/* Manuel Pedrosa · hoja de estilos (generada por tools/build.py) */
:root{
  --bg:#161616;
  --card:#1e1e22;
  --card-2:#25252a;
  --line:rgba(241,241,241,.1);
  --line-2:rgba(241,241,241,.2);
  --cream:#f1f1f1;
  --muted:rgba(241,241,241,.68);
  --dim:rgba(241,241,241,.42);
  --gold:#f1f1f1;
  --r:18px;
  --r-sm:12px;
  --gap:16px;
  --left:72%;
  --display:"Plus Jakarta Sans","Manrope",system-ui,sans-serif;
  --sans:"Manrope",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--cream);font-family:var(--sans);font-weight:300;font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.04em;line-height:1}
.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Estructura ---------- */
.shell{display:grid;grid-template-columns:var(--left) 1fr;gap:var(--gap);padding:var(--gap);min-height:100vh;transition:grid-template-columns .9s var(--ease)}
body:not([data-view="inicio"]){--left:60%}

/* ---------- Bloque fijo izquierdo ---------- */
.stage{position:sticky;top:var(--gap);height:calc(100vh - var(--gap)*2);height:calc(100svh - var(--gap)*2);border-radius:var(--r);overflow:hidden;background:var(--card)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(1.08);transition:transform 8s linear}
.slide.on img{transform:scale(1)}
.slide.empty{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#1D1B17 0%,#0F0F0D 70%)}
.slide.empty span{font-family:var(--display);font-size:clamp(28px,4vw,56px);letter-spacing:.2em;color:var(--dim)}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,10,.45) 0%,rgba(11,11,10,0) 26%,rgba(11,11,10,0) 42%,rgba(11,11,10,.85) 100%);pointer-events:none}

.bar{position:absolute;top:28px;left:28px;z-index:5;display:flex;align-items:center;gap:6px;padding:7px;background:rgba(11,11,10,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px}
.burger{width:42px;height:42px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;transition:background .3s}
.burger:hover{background:var(--card-2)}
.burger span{display:block;width:16px;height:1px;background:var(--cream);box-shadow:0 -5px 0 var(--cream),0 5px 0 var(--cream)}
.logo{display:flex;align-items:center;padding:0 14px 0 10px}
.logo img{height:32px;width:auto}
.bar nav{display:flex;align-items:center;gap:2px}
.bar nav a{white-space:nowrap;font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:10px 12px;border-radius:10px;color:var(--muted);transition:color .3s}
.bar nav a:not(.cta){display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:6px 12px 4px}
.bar nav a:not(.cta)::after{content:"";height:1px;background:var(--line-2);transition:background .3s,box-shadow .3s}
.bar nav a:hover,.bar nav a.on{color:var(--cream)}
.bar nav a:not(.cta):hover::after,.bar nav a:not(.cta):focus-visible::after,.bar nav a.on::after{background:var(--cream);box-shadow:0 0 8px rgba(241,241,241,.35)}
.bar nav a.cta{border:1px solid rgba(241,241,241,.55);background:rgba(241,241,241,.1);color:var(--cream);margin-left:6px;padding:10px 16px;transition:background .3s,color .3s,border-color .3s}
.bar nav a.cta:hover,.bar nav a.cta.on{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.lang{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:10px 10px 10px 12px;border-left:1px solid var(--line);margin-left:6px}
.lang:hover{color:var(--cream)}

.stage-text{position:absolute;left:clamp(28px,4vw,64px);bottom:clamp(28px,5vh,60px);right:180px;z-index:4}
.stage-text .eyebrow{display:block;margin-bottom:18px;color:var(--cream);opacity:.75}
.stage-title{font-size:clamp(52px,7vw,124px);color:var(--cream);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.stage-intro{max-width:520px;margin-top:22px;color:var(--cream);opacity:.82;font-size:17px}
.stage-intro .btns{margin-top:24px}
.stage-cap{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:13px;color:var(--cream);opacity:.7;transition:opacity .6s}
.stage-cap:empty{display:none}
.stage-cap::before{content:"";width:6px;height:6px;border:1px solid currentColor;transform:rotate(45deg);flex:none}
.swap{opacity:0 !important;transform:translateY(10px)}

/* Testimonios en portada */
.quotes{width:min(600px,100%);background:linear-gradient(160deg,rgba(11,11,10,.42),rgba(11,11,10,.58));backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);border:1px solid rgba(241,241,241,.16);box-shadow:0 20px 60px rgba(0,0,0,.25);border-radius:var(--r);padding:clamp(26px,3vw,44px)}
.q{display:none;margin:0;position:relative}
.q.on{display:block;animation:rise .7s var(--ease)}
.q h2{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(32px,3vw,50px);line-height:1.05;color:var(--cream)}
.q h2,.q blockquote p,.q-who{text-shadow:0 1px 12px rgba(0,0,0,.45)}
.q blockquote p{color:var(--muted);font-size:17px;line-height:1.75;margin-top:18px}
.q-who{display:flex;align-items:center;gap:14px;margin-top:22px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.6}
.q-who b{display:block;font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:.08em;color:var(--cream)}
.av{width:44px;height:44px;border-radius:50%;border:1px solid rgba(241,241,241,.5);display:grid;place-items:center;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:20px;color:var(--gold);flex:none;object-fit:cover}

/* Bloques destacados: mismo esquema que las tarjetas numeradas, con el estilo del botón Reservar */
.card.accent{background:rgba(241,241,241,.1);border-color:rgba(241,241,241,.55)}
.card.accent p{color:var(--muted)}
.card-head{display:flex;align-items:center;gap:16px;padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid rgba(241,241,241,.35)}
.card-head .dia{border-color:var(--cream);flex:none}
.card-head h3{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.05em;text-transform:uppercase;line-height:1.1;color:var(--cream)}
.card.accent .q h2{color:var(--cream)}

.brand-logo{height:56px;width:auto;max-width:100%}
.card.accent .credit{margin-top:22px;font-size:12px;color:var(--dim)}

/* Testimonios en Experiencias */
.quotes-card .quotes{width:100%;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none;padding:0}
.quotes-card .q h2,.quotes-card .q blockquote p,.quotes-card .q-who{text-shadow:none}
.card.quotes-card{padding:0;overflow:hidden}
.quotes-card .q.on{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.q-img{overflow:hidden;min-height:400px;margin:14px 0 14px 14px;border-radius:calc(var(--r) - 6px);background:var(--card-2)}
.q-txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,3vw,48px)}
.q-img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.quotes-card .q h2{margin-top:0}
.quotes-card .q-who{margin-top:26px;padding-top:18px;border-top:1px solid rgba(241,241,241,.35)}
@container (max-width:430px){
  .quotes-card .q.on{grid-template-columns:1fr}
  .q-img{min-height:0;aspect-ratio:4/5;margin:12px 12px 0}
}

/* Esquina recortada con redes */
.notch{position:absolute;right:0;bottom:0;z-index:5;background:var(--bg);border-top-left-radius:var(--r);padding:12px 0 0 12px;display:flex;gap:8px}
.notch::before,.notch::after{content:"";position:absolute;width:var(--r);height:var(--r);background:radial-gradient(circle at 0 0,transparent calc(var(--r) - .5px),var(--bg) var(--r))}
.notch::before{right:0;top:calc(var(--r)*-1)}
.notch::after{left:calc(var(--r)*-1);bottom:0}
.notch a{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--cream);transition:background .3s,color .3s}
.notch a:hover{background:var(--cream);color:var(--bg)}
.notch svg{width:16px;height:16px}

/* ---------- Bloque derecho ---------- */
.panel{container-type:inline-size;min-width:0;display:flex;flex-direction:column;gap:var(--gap);animation:rise .8s var(--ease)}
.panel.out{opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(28px,3vw,48px)}
.card h2{font-size:clamp(28px,2.4vw,40px);margin-bottom:18px}
.card p{color:var(--muted)}
.card p + p{margin-top:12px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.photo{border-radius:var(--r);overflow:hidden;position:relative;background:var(--card);margin:0}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.photo:hover img{transform:scale(1.04)}
.photo figcaption{position:absolute;left:12px;bottom:12px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:5px 9px;border-radius:6px;background:rgba(11,11,10,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--cream)}
.photo.empty{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#1D1B17 0%,#0F0F0D 70%);border:1px dashed rgba(241,241,241,.3)}

.dia{display:inline-block;width:7px;height:7px;border:1px solid var(--muted);transform:rotate(45deg)}
.orn{display:flex;align-items:center;justify-content:center;gap:14px}
.orn i{display:flex;align-items:center}
.orn i::before{content:"";width:6px;height:6px;border:1px solid var(--dim);transform:rotate(45deg)}
.orn i::after{content:"";width:40px;height:1px;background:var(--line-2)}
.orn i:last-child{flex-direction:row-reverse}
.orn h2,.orn h3{margin:0;font-size:clamp(24px,2vw,32px)}
.center{text-align:center}
.note{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:6px 0}
.lead{max-width:560px;margin:0 auto}

/* Inicio: accesos */
.home-cards{height:calc(100vh - var(--gap)*2);height:calc(100svh - var(--gap)*2);display:grid;grid-template-rows:repeat(4,1fr);gap:var(--gap)}
.tile{position:relative;border-radius:var(--r);overflow:hidden;display:block;background:var(--card)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:0;transition:opacity 1.6s ease-in-out,transform 1.4s var(--ease)}
.tile img.on{opacity:1;z-index:2}
.tile img.prev{opacity:1;z-index:1;transition:transform 1.4s var(--ease)}   /* la anterior se queda debajo mientras entra la nueva: fundido sin bajón a negro */
.tile .tag{z-index:3}
.tile:hover img{transform:scale(1.06)}
.tile.empty{background:radial-gradient(ellipse at 40% 40%,#221F1A 0%,#121210 75%)}
.tile.empty .ph{position:absolute;left:18px;top:14px;margin:0}
.tile .tag{position:absolute;right:0;bottom:0;background:var(--bg);border-top-left-radius:var(--r);padding:12px 4px 4px 18px;display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:17px;letter-spacing:.1em;text-transform:uppercase}
.tile .tag::before,.tile .tag::after{content:"";position:absolute;width:var(--r);height:var(--r);background:radial-gradient(circle at 0 0,transparent calc(var(--r) - .5px),var(--bg) var(--r))}
.tile .tag::before{right:0;top:calc(var(--r)*-1)}
.tile .tag::after{left:calc(var(--r)*-1);bottom:0}
.arrow{width:36px;height:36px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;transition:background .3s,color .3s}
.arrow svg{width:14px;height:14px}
.tile:hover .arrow{background:var(--cream);color:var(--bg)}

/* Bloques */
.hero-card{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:320px}
.hero-card h2{font-size:clamp(32px,2.8vw,46px);line-height:1.08;margin:0}
.hero-card .eyebrow{color:var(--gold)}
.step{display:flex;flex-direction:column;gap:14px}
.step-head{display:flex;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.step .n{font-family:var(--display);font-size:15px;color:var(--gold);letter-spacing:.1em;flex:none}
.step h3{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.05em;text-transform:uppercase;line-height:1.1}
.step p{font-size:16px}
.story{display:flex;flex-direction:column;justify-content:center;gap:20px;min-height:340px}
.story .orn{justify-content:center}
.story p{text-align:center}
.quote{font-family:var(--display);font-size:clamp(22px,1.8vw,28px);line-height:1.35;color:var(--cream);text-transform:none;letter-spacing:.01em}
.values{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:26px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.values .dia{border-color:var(--dim);align-self:center}
.list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin-top:10px}
.list li{list-style:none;display:flex;gap:14px;align-items:baseline;padding:16px 0;border-bottom:1px dotted var(--line-2);font-size:17px}
.list li span{font-family:var(--display);color:var(--gold);font-size:14px;letter-spacing:.1em}
.stat{text-align:center;padding:28px 18px}
.stars{letter-spacing:5px;font-size:12px;color:var(--gold);margin-bottom:10px}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(20px,1.7vw,26px);letter-spacing:.06em;text-transform:uppercase;line-height:1.1}
.stat small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.ph{display:inline-block;font-size:11px;letter-spacing:.06em;color:#E7C97F;background:rgba(241,241,241,.1);border:1px dashed rgba(241,241,241,.4);border-radius:6px;padding:3px 8px;margin-top:14px;text-transform:none;font-family:var(--sans);font-weight:300;line-height:1.5}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:14px 22px;border-radius:10px;border:1px solid var(--line-2);transition:background .3s,color .3s,border-color .3s}
.btn:hover{background:var(--cream);color:var(--bg);border-color:var(--cream)}
.btn.solid{background:rgba(241,241,241,.1);border-color:rgba(241,241,241,.55);color:var(--cream);font-weight:400}
.btn.solid:hover{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.btns.center{justify-content:center}

/* Galería de platos */
.dishes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:10px;margin-top:28px}
.dishes .photo{aspect-ratio:1}
.dishes .photo:nth-child(1),.dishes .photo:nth-child(8){grid-column:span 2;grid-row:span 2}

/* Galería clientes */
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}
.gal .photo{aspect-ratio:4/5}
.gal .photo:nth-child(-n+2){grid-column:span 3}
.gal .photo:nth-child(n+3){grid-column:span 2}

/* Trayectoria */
.tl{display:grid;margin-top:8px}
.tl-row{display:grid;grid-template-columns:130px 1fr;gap:24px;padding:22px 0;border-bottom:1px dotted var(--line-2)}
.tl-row:last-child{border-bottom:0}
.tl-row .when{font-family:var(--display);font-size:15px;letter-spacing:.1em;color:var(--gold);text-transform:uppercase}
.tl-row .when .ph{margin:0}
.tl-row h4{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.05em;text-transform:uppercase;line-height:1.2}
.tl-row p{font-size:16px;margin-top:6px}

/* Formulario */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:10px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:13px 14px;font-size:17px;color:var(--cream);outline:none;transition:border-color .3s;width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(-45deg,transparent 50%,var(--muted) 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.form .btns{grid-column:1/-1;margin-top:10px}
.form-msg{grid-column:1/-1;font-size:13px;color:#E7C97F;min-height:1em}

/* Contacto */
.rows{display:grid;margin-top:8px}
.row{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px dotted var(--line-2);font-size:17px}
.row:last-child{border-bottom:0}
.row span:first-child{color:var(--muted)}
.row .ph{margin:0}

.foot{display:flex;flex-direction:column;gap:14px;padding:22px 26px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 28px}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.foot-row:first-child .foot-links{margin-left:auto;justify-content:flex-end}
.foot a{transition:color .3s}
.foot a:hover{color:var(--cream)}
.foot-sub{padding-top:14px;border-top:1px solid var(--line);color:var(--dim);font-size:10px}
.home-foot{display:none}
.card.legal h2{font-size:clamp(22px,1.8vw,28px)}
.card.legal p{font-size:16px}
.card.legal a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}

/* ---------- Menú superpuesto ---------- */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(11,11,10,.97);backdrop-filter:blur(8px);display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:var(--gap);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.menu-open .overlay{opacity:1;visibility:visible}
.ov-links{display:flex;flex-direction:column;justify-content:center;padding:0 clamp(28px,6vw,100px);gap:4px}
.ov-seal{width:120px;height:120px;margin-bottom:28px}
.ov-links a{font-family:var(--display);text-transform:uppercase;font-size:clamp(38px,4.8vw,76px);line-height:1.08;letter-spacing:.03em;color:var(--dim);transition:color .3s,transform .5s var(--ease);transform:translateY(12px)}
.menu-open .ov-links a{transform:none}
.ov-links a:hover,.ov-links a.on{color:var(--cream)}
.ov-links .ov-lang{font-family:var(--sans);font-size:12px;letter-spacing:.2em;margin-top:24px}
.ov-side{border-radius:var(--r);overflow:hidden;position:relative}
.ov-side img{width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease)}
.ov-side img.fade{opacity:0}
.ov-info{position:absolute;left:24px;right:24px;bottom:24px;background:rgba(11,11,10,.85);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:20px 22px;font-size:14px;color:var(--muted);line-height:1.8}
.ov-info b{color:var(--cream);font-weight:400}
.close{position:absolute;top:44px;left:44px;width:42px;height:42px;border:1px solid var(--line-2);border-radius:10px;display:grid;place-items:center;z-index:2}
.close svg{width:16px;height:16px}

/* Contextos (Maison Crémel) */
.ctx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.ctx .photo{aspect-ratio:4/5}

/* Columna derecha estrecha: los bloques pasan a una columna */
@container (max-width:720px){
  .grid-2,.grid-3:not(.stats),.list,.form{grid-template-columns:1fr}
  .ctx{grid-template-columns:1fr}
  .ctx .stack{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--gap)}
  .ctx .photo{aspect-ratio:auto;min-height:200px}
  .ctx .step{justify-content:center}
}
@container (max-width:420px){
  .ctx .stack{grid-template-columns:1fr}
  .ctx .photo{aspect-ratio:4/3}
}

/* ---------- Tablet ---------- */
@media (max-width:1600px){
  body:not([data-view="inicio"]) .bar nav a:not(.cta){display:none}
}
@media (max-width:1280px){
  .bar nav a:not(.cta){display:none}
  .stage-text{right:28px}
}
@media (max-width:1100px){
  body:not([data-view="inicio"]){--left:52%}
  .grid-2,.grid-3,.list{grid-template-columns:1fr}
  .grid-3.stats{grid-template-columns:repeat(3,1fr)}
  .form{grid-template-columns:1fr}
}
/* ---------- Móvil ---------- */
@media (max-width:860px){
  :root{--gap:10px;--r:16px}
  .shell{display:block;padding:var(--gap)}
  .stage{position:relative;top:0;height:78vh;height:78svh;margin-bottom:var(--gap)}
  body:not([data-view="inicio"]) .stage{height:52vh;height:52svh}
  .bar{position:fixed;top:14px;left:14px;right:auto}
  .logo{padding:0 8px}
  .logo img{height:28px}
  .lang{margin-left:2px;padding:10px 8px}
  .stage-text{left:22px;right:22px;bottom:78px}
  .stage-title{font-size:clamp(44px,13vw,78px)}
  .stage-intro{font-size:16px}
  .q h2{font-size:clamp(28px,8vw,40px)}
  .home-cards{height:auto;grid-template-rows:none}
  .home-foot{display:flex}
  .foot-row{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  .foot-row:first-child .foot-links,.foot-links{margin-left:0;justify-content:flex-start}
  .tile{aspect-ratio:16/10}
  .grid-3.stats{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr 1fr}
  .gal .photo:nth-child(n){grid-column:auto}
  .dishes{grid-template-columns:1fr 1fr}
  .dishes .photo:nth-child(n){grid-column:auto;grid-row:auto;aspect-ratio:1}
  .gal .photo:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:16/10}
  .hero-card,.story{min-height:0}
  .orn{gap:10px}
  .orn i::after{width:18px}
  .overlay{grid-template-columns:1fr}
  .ov-side{display:none}
  .close{top:28px;left:28px}
}
@media (max-width:480px){
  .bar nav a.cta{padding:10px 12px;letter-spacing:.12em}
  .logo img{height:26px}
  .tl-row{grid-template-columns:1fr;gap:6px}
  .row{flex-direction:column;gap:2px}
}
/* ---------- Lightbox ---------- */
#panel .photo:not(.empty){cursor:zoom-in}
#panel .photo:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.lb-on{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;background:rgba(11,11,10,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;grid-template-columns:72px 1fr 72px;align-items:center;gap:var(--gap);padding:clamp(16px,3vw,40px);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.lb.open{opacity:1;visibility:visible}
.lb-fig{grid-column:2;margin:0;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.lb-fig img{max-width:100%;max-height:calc(100svh - 150px);width:auto;height:auto;object-fit:contain;border-radius:var(--r-sm);transition:opacity .18s,transform .5s var(--ease);transform:scale(.97)}
.lb.open .lb-fig img{transform:none}
.lb.swap .lb-fig img{opacity:0}
.lb-fig figcaption{display:flex;align-items:center;gap:16px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center}
.lb-n{color:var(--gold);letter-spacing:.12em;white-space:nowrap}
.lb-n::before{content:"";display:inline-block;width:6px;height:6px;border:1px solid var(--dim);transform:rotate(45deg);margin-right:16px;vertical-align:middle}
.lb-btn{width:46px;height:46px;border:1px solid var(--line-2);border-radius:10px;display:grid;place-items:center;color:var(--cream);transition:background .3s,color .3s,border-color .3s;justify-self:center}
.lb-btn:hover{background:var(--cream);color:var(--bg);border-color:var(--cream)}
.lb-btn svg{width:18px;height:18px}
.lb-next svg{transform:scaleX(-1)}
.lb-prev{grid-column:1;grid-row:1}
.lb-next{grid-column:3;grid-row:1}
.lb-close{position:absolute;top:clamp(16px,3vw,40px);right:clamp(16px,3vw,40px);z-index:2}
.lb.single .lb-prev,.lb.single .lb-next,.lb.single .lb-n{display:none}
@media (max-width:860px){
  .lb{grid-template-columns:1fr;grid-template-rows:1fr auto;padding:16px}
  .lb-fig{grid-column:1;grid-row:1}
  .lb-fig img{max-height:calc(100svh - 190px)}
  .lb-fig figcaption{flex-direction:column;gap:6px;font-size:11px}
  .lb-n::before{display:none}
  .lb-prev,.lb-next{grid-row:2;position:static}
  .lb-prev{justify-self:start;margin-left:calc(50% - 56px)}
  .lb-next{justify-self:end;grid-column:1;margin-right:calc(50% - 56px)}
  .lb-close{top:16px;right:16px}
}
/* ---------- Efectos de texto (suaves) ---------- */
/* Entrada del bloque fijo al cargar: cada línea sube y aparece, una tras otra */
@keyframes txtIn{from{opacity:0;transform:translateY(14px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.stage-text.intro > *{animation:txtIn 1.1s var(--ease) both}
.stage-text.intro > :nth-child(1){animation-delay:.15s}
.stage-text.intro > :nth-child(2){animation-delay:.3s}
.stage-text.intro > :nth-child(3){animation-delay:.5s}
.stage-text.intro > :nth-child(4){animation-delay:.65s}
/* Bloque derecho: títulos y textos aparecen al entrar en pantalla */
.rv{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ================================================================
   Tema Manuel Pedrosa (modo oscuro)
   ================================================================ */
:root{
  --paper:#161616;--ink:#f1f1f1;--black:#25252a;--white:#f1f1f1;
  --sky:#8fd4f5;--peri:#a7b4ff;--lilac:#d9b8f3;--rose:#f8bcd6;--peach:#ffd8b5;
  /* Acento: negro metalizado oscuro (2026-10-23; el dorado y el verde anteriores están en _versiones/).
     --oro      = acero claro #9DA1A9 para textos de acento y detalles pequeños (sobre el fondo oscuro un negro no se leería);
     --orange   = el mismo acero para textos, guiones e iconos;
     --iri      = negro metalizado fijo #52565e (sin degradado), en subrayados, cuadro del botón y líneas finas. Nombres antiguos para no tocar las reglas. */
  --oro:#9DA1A9;
  --orange:var(--oro);
  --iri:linear-gradient(#52565e,#52565e);   /* color fijo, sin degradado (se deja como imagen para que el subrayado siga siendo una franja) */
  --r:16px;
}
body{font-weight:400;font-size:17px;line-height:1.65}
::selection{background:var(--ink);color:var(--paper)}

/* Titulares: Plus Jakarta en minúscula, apretados */
.display{font-weight:700;text-transform:none;letter-spacing:-.035em;line-height:1.02}
.card h2{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.step h3,.card-head h3,.tl-row h4,.stat b,.tile .tag,.ov-links a,.orn h2,.orn h3{text-transform:none;letter-spacing:-.02em;font-weight:700}
.eyebrow{font-weight:700;letter-spacing:.16em;font-size:11px}
.card .eyebrow{display:block;margin-bottom:18px}
em{font-style:normal}
.card h2 em,.stage-title em{background:var(--iri) no-repeat 0 92%/100% 14%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.card p{color:var(--muted)}

/* Bloque fijo: foto en color, texto claro encima */
.stage{background:var(--black);--cream:#f1f1f1;--muted:rgba(241,241,241,.75)}
.stage::after{background:linear-gradient(180deg,rgba(37,37,42,.25) 0%,rgba(37,37,42,0) 24%,rgba(37,37,42,0) 40%,rgba(22,22,26,.82) 100%)}
.stage-title{font-size:clamp(44px,5.4vw,96px)}
.stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(22,22,26,.55) 0%,rgba(22,22,26,.15) 45%,rgba(22,22,26,0) 70%)}
.stage-text .eyebrow{opacity:.9}
.stage-intro p{font-size:18px;max-width:30em}
.stage-intro .btn:not(.solid){color:var(--white);border-color:rgba(241,241,241,.45)}
.stage-intro .btn:not(.solid):hover{background:var(--white);color:var(--black);border-color:var(--white)}

/* Barra flotante clara */
.bar{--cream:#f1f1f1;--muted:rgba(241,241,241,.7);background:rgba(22,22,22,.82);border-color:rgba(241,241,241,.1);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.logo img{height:18px}
.bar nav a{letter-spacing:.08em;font-weight:700;font-size:11px}
.bar nav a.cta{background:var(--ink);border-color:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.bar nav a.cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--iri)}
.bar nav a.cta:hover,.bar nav a.cta.on{background:#fff;color:var(--paper)}

/* Esquina con redes: color de página */
.notch{--cream:#f1f1f1}
.notch a{color:var(--ink)}
.notch a:hover{background:var(--ink);color:var(--paper)}
.notch a[aria-label="LinkedIn"] svg{width:15px;height:15px}

/* Tarjetas */
.card{border-color:rgba(241,241,241,.07);box-shadow:none}
.hero-card h2{font-size:clamp(30px,2.5vw,42px)}
.step .n{font-family:var(--display);font-weight:700;color:var(--ink);opacity:.45}
.step h3{font-size:clamp(22px,1.7vw,27px)}
.step p{color:var(--muted)}
.price-line{margin-top:6px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink) !important}

/* Bloque destacado: negro de marca con línea iridiscente arriba */
.card.accent{background:var(--black);border-color:rgba(241,241,241,.14);color:var(--white);position:relative;overflow:hidden;--cream:#f1f1f1;--muted:rgba(241,241,241,.72);--line-2:rgba(241,241,241,.3)}
.card.accent::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--iri)}
.card.accent h2{color:var(--white)}
.card.accent p{color:rgba(241,241,241,.72)}
.card-head{border-bottom-color:rgba(241,241,241,.18)}
.card-head h3{color:var(--white);font-size:20px}
.card-head .dia{border-color:var(--white)}
.card.accent .btn:not(.solid){color:var(--white);border-color:rgba(241,241,241,.35)}
.card.accent .btn:not(.solid):hover{background:var(--white);color:var(--black)}
.card.accent .btn.solid{background:var(--white);color:var(--black);border-color:var(--white)}

/* Botones: negro + cuadro de flecha con el degradado de acento */
.btn{letter-spacing:.1em;font-weight:700;font-size:11.5px;border-radius:0;padding:0 22px;min-height:50px}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.solid{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:700;padding-right:0;gap:18px}
.btn.solid::after{content:"";width:50px;align-self:stretch;margin:-1px -1px -1px 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23161616' stroke-width='1.6' stroke-linecap='square'%3E%3Cpath d='M5.5 2.5 11 8l-5.5 5.5'/%3E%3C/svg%3E") center/16px no-repeat,var(--iri);transition:background-size .4s}
.btn.solid:hover{background:#fff;color:var(--paper)}
.btn.solid:hover::after{background-size:20px,100% 100%}

/* Accesos de inicio */
.tile{background:var(--black)}
.tile::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(37,37,42,0) 55%,rgba(37,37,42,.25));pointer-events:none}
.tile .tag{font-size:16px;color:var(--ink)}
.tile:hover .arrow{background:var(--ink);color:var(--paper)}

/* Lo que resuelvo: portada tipográfica + texto */
.card.prob-card{padding:14px}
.prob{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,2.4vw,36px);align-items:center}
.prob .photo{border-radius:calc(var(--r) - 6px)}
.prob .step{padding:clamp(10px,1.6vw,24px) clamp(10px,1.6vw,24px) clamp(10px,1.6vw,24px) 0}
.prob .quote{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:clamp(20px,1.6vw,25px);line-height:1.25;color:var(--ink)}
.prob-t{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-top:4px}
@container (max-width:400px){.prob{grid-template-columns:1fr}.prob .step{padding:6px 12px 18px}}

/* Filosofía */
.story{min-height:0;padding-block:clamp(40px,4vw,64px)}
.quote{font-family:var(--display);font-weight:700;letter-spacing:-.02em;color:var(--ink);font-size:clamp(22px,1.9vw,30px);line-height:1.25}
.values{color:var(--ink);font-weight:700;letter-spacing:.18em;font-size:11px}
.orn i::after{background:var(--iri);height:2px;width:46px}
.orn i::before{border-color:var(--ink)}
.orn h2{font-size:12px !important;letter-spacing:.2em !important;text-transform:uppercase !important;font-family:var(--sans);font-weight:700}

/* Listas */
.list li span{font-family:var(--display);font-weight:700;color:var(--ink);opacity:.45}
.list li{font-size:16px;border-bottom:1px solid var(--line)}
.list.one{grid-template-columns:1fr}

/* Cifras */
.stat b{font-size:clamp(22px,1.8vw,30px);color:var(--ink)}
.stat small{letter-spacing:.14em;font-weight:700}

/* Trayectoria / pasos */
.tl-row{border-bottom:1px solid var(--line)}
.tl-row .when{font-family:var(--display);font-weight:700;color:var(--ink);opacity:.45}
.tl-row h4{font-size:19px}
.tl-row p{color:var(--muted)}

/* Logos de clientes */
.logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 30px;align-items:center;margin-top:10px}
.logos img{max-height:36px;width:auto;margin:auto;filter:brightness(0) invert(1);opacity:.6;transition:opacity .3s}
.logos img:hover{opacity:1}
@container (max-width:520px){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Formulario y contacto */
.field input,.field select,.field textarea{background:var(--paper);border-color:var(--line-2);border-radius:0;font-size:16px;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.field label{font-weight:700;letter-spacing:.12em}
.form-msg{color:var(--ink)}
.row{border-bottom:1px solid var(--line);font-size:16px}
.row a{border-bottom:1px solid var(--line-2)}

/* Pie */
.foot{letter-spacing:.12em;font-weight:700}
.foot a:hover{color:var(--ink)}

/* Fotos */
.photo{background:var(--card-2)}
.photo figcaption{background:rgba(22,22,22,.8);color:var(--white)}
.ctx .photo{aspect-ratio:4/5}

/* Menú superpuesto claro */
.overlay{background:rgba(22,22,22,.98)}
.ov-seal{width:auto;height:30px;margin-bottom:40px}
.ov-links a{font-size:clamp(36px,4.2vw,68px);color:rgba(241,241,241,.3)}
.ov-links a:hover,.ov-links a.on{color:var(--ink)}
.ov-info{background:rgba(22,22,22,.85);border-color:rgba(241,241,241,.1);color:var(--muted)}
.ov-info b{color:var(--ink);font-weight:700}
.close{border-color:var(--line-2)}

/* Lightbox oscuro */
.lb{background:rgba(22,22,26,.96);--cream:#f1f1f1;--muted:rgba(241,241,241,.7);--line-2:rgba(241,241,241,.25)}
.lb-btn:hover{background:var(--white);color:var(--black)}

@media (max-width:860px){
  .stage::before{background:linear-gradient(180deg,rgba(22,22,26,.35),rgba(22,22,26,.55))}
  .logo img{height:15px}
  .stage-title{font-size:clamp(42px,12vw,72px)}
  .stage-intro p{font-size:16px}
}

/* Columna derecha: imágenes fijas, sin zoom ni ampliación */
#panel .photo:not(.empty){cursor:default}
.photo:hover img,.tile:hover img{transform:none}

/* Bloque fijo: una sola imagen por página, sin zoom lento */
.slide img,.slide.on img{transform:none;transition:none}

/* Cabecera sin botón: los enlaces ocupan el espacio con más aire entre ellos */
.bar nav{gap:clamp(10px,1.6vw,30px);margin:0 14px 0 10px}
@media (min-width:1281px){body:not([data-view="inicio"]) .bar nav a:not(.cta){display:flex}}

/* Banner de Gráffica sobre la foto de inicio: aparece y desaparece encima de los iconos */
.gf-ad{position:absolute;right:16px;bottom:140px;z-index:6;width:322px;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.gf-ad.on{opacity:1;transform:none;pointer-events:auto}
body:not([data-view="inicio"]) .gf-ad{display:none}
.gf-ad a{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:14px;padding:10px 14px 10px 10px;background:rgba(22,22,22,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(241,241,241,.12);border-radius:14px;position:relative;overflow:hidden;color:var(--white)}
.gf-ad a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange)}
.gf-ad img{width:56px;height:56px;object-fit:cover;object-position:62% 50%;border-radius:9px}
.gf-ad span{display:flex;flex-direction:column;white-space:nowrap;font-size:12.5px;line-height:1.35;color:rgba(241,241,241,.75)}
.gf-ad small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--orange);margin-bottom:3px}
.gf-ad b{font-family:var(--display);font-size:16px;letter-spacing:-.01em;color:var(--white)}
.gf-ad .arrow{width:32px;height:32px;border-color:rgba(241,241,241,.25);color:var(--white)}
.gf-ad a:hover .arrow{background:var(--orange);border-color:var(--orange);color:#161616}
@media (max-width:1180px){.gf-ad{display:none}}

/* Conocimiento: tarjetas de artículo y texto del artículo */
a.card.art-card{padding:14px;display:block;transition:border-color .3s}
a.card.art-card:hover{border-color:rgba(241,241,241,.25)}
.art-card .read{display:inline-flex;align-items:center;gap:12px;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.art-card:hover .read .arrow{background:var(--orange);border-color:var(--orange);color:#161616}
.byline{font-size:13px;color:var(--dim) !important}
.card h2.art-h{font-size:clamp(24px,1.9vw,30px);margin-bottom:16px}
.art{color:var(--muted)}
.art p + p,.art p + ul,.art ul + p,.art ul + div,.art div + p,.art p + div{margin-top:14px}
.art .lead{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.5vw,23px);line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.art a{color:var(--ink);border-bottom:1px solid var(--orange)}
.art strong{color:var(--ink);font-weight:700}
.alist{list-style:none;display:grid;gap:10px}
.alist li{position:relative;padding-left:22px}
.alist li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--orange)}
.formula{margin-top:18px;padding:18px 22px;border-left:3px solid var(--orange);background:var(--card-2);font-family:var(--display);font-weight:700;font-size:clamp(18px,1.4vw,21px);line-height:1.35;color:var(--ink)}
.callout,.essentials{margin-top:18px;padding:20px 22px;border:1px solid var(--line-2);border-radius:12px}
.callout b,.essentials b{display:block;margin-bottom:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.essentials ul{list-style:none;display:grid;gap:8px}
.essentials li{padding-left:22px;position:relative}
.essentials li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--ink)}
.more{display:grid}
.more a{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:16px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.more a:last-child{border-bottom:0}
.more a > span:first-child{opacity:.45;font-size:14px}
.more a:hover .arrow{background:var(--orange);border-color:var(--orange);color:#161616}

/* Carrusel infinito de logos (Sobre mí): pista con dos tiras iguales; -50 % = una tira exacta, sin corte */
.logo-marquee{overflow:hidden;margin-top:18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logo-track{display:flex;width:max-content;animation:logos 32s linear infinite;will-change:transform;backface-visibility:hidden}
.logo-set{display:flex;align-items:center;flex:none;list-style:none;margin:0;padding:0}
.logo-set li{flex:none;display:flex;align-items:center;justify-content:center;height:64px;padding:0 34px}
.logo-set img{display:block;width:auto;max-width:none;filter:brightness(0) invert(1);opacity:.62;user-select:none;-webkit-user-drag:none}
.logo-marquee:hover .logo-track{animation-play-state:paused}
@keyframes logos{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Inversión: tarjetas de precio y preguntas frecuentes */
.price{display:flex;align-items:baseline;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.price b{font-family:var(--display);font-weight:700;font-size:clamp(34px,3vw,46px);letter-spacing:-.03em;color:var(--ink);line-height:1}
.price span{font-size:13px;color:var(--muted)}
.price-card .price-line{border-top:0;padding-top:4px;margin-top:4px}
.price-note{font-size:14px;color:var(--orange) !important}
.price-card .quote{font-size:clamp(19px,1.5vw,23px)}
.price-card .alist{margin-top:6px}
.story .quote.center{text-align:center}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-family:var(--display);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-size:22px;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--muted)}

/* Cómo trabajo: dos listas por área */
.two-lists{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin-top:18px;padding-top:20px;border-top:1px solid var(--line)}
.two-lists .eyebrow{display:block;margin-bottom:12px;color:var(--orange)}
.two-lists .alist{font-size:15px;color:var(--muted)}
@container (max-width:560px){.two-lists{grid-template-columns:1fr}}
a.row{transition:color .3s}
a.row:hover span:last-child{color:var(--orange)}
a.row span:last-child{color:var(--ink)}

/* Sobre mí: herramientas */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chips span{font-size:13px;font-weight:700;padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink)}

/* Legales */
.card.legal h2{font-size:clamp(20px,1.6vw,26px);margin:30px 0 12px}
.card.legal h2:first-child{margin-top:0;font-size:clamp(28px,2.4vw,38px)}
.card.legal p,.card.legal li{font-size:15.5px;color:var(--muted)}
.card.legal ul{margin:10px 0 10px 20px}
.card.legal a{color:var(--ink);border-bottom:1px solid var(--orange)}
.card.legal table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.card.legal th,.card.legal td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.card.legal th{color:var(--ink);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
@container (max-width:620px){
  .card.legal table,.card.legal tbody,.card.legal tr,.card.legal td{display:block;width:100%}
  .card.legal thead{display:none}
  .card.legal tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .card.legal td{border:0;padding:3px 0}
  .card.legal td::before{content:attr(data-label) " · ";color:var(--ink);font-weight:700}
}

/* El H1 de cada página es la línea pequeña sobre el titular (palabra clave); el titular grande es decorativo */
h1.eyebrow{font-family:var(--sans);margin:0}
/* Menú superpuesto: logo a su tamaño, sin estirarse */
.ov-links .ov-seal{align-self:flex-start;width:auto;height:20px;max-width:none;object-fit:contain;margin-bottom:44px}
@media (max-width:860px){.ov-links .ov-seal{height:17px;margin-bottom:30px}}

/* Prueba: velo negro del 30 % sobre todas las fotos (brightness .7 = negro al 30 % encima). Para quitarlo: --velo:1 */
:root{--velo:.7}
.slide img,.tile img,.photo img,.ov-side img{filter:brightness(var(--velo))}

/* Banner de Gráffica: X de cierre arriba a la derecha */
.gf-x{position:absolute;top:-10px;right:-10px;z-index:2;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#161616;border:1px solid rgba(241,241,241,.25);color:var(--white);transition:background .3s,color .3s,border-color .3s}
.gf-x svg{width:12px;height:12px}
.gf-x:hover{background:var(--orange);border-color:var(--orange);color:#161616}
.gf-ad{overflow:visible}

/* Aceptación de políticas + contador de visitas (assets/js/consent.js) */
html.gp-pending body{visibility:hidden}
html.gp-lock{overflow:hidden}
.gp-consent{position:fixed;inset:0;z-index:9999;visibility:visible;display:grid;place-items:center;padding:16px;background:rgba(10,10,12,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow-y:auto}
.gp-card{position:relative;overflow:hidden;width:min(560px,100%);background:var(--black);color:var(--white);border:1px solid rgba(241,241,241,.12);border-radius:var(--r);padding:clamp(26px,4vw,42px);margin:auto}
.gp-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--iri)}
.gp-card small{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.gp-card h2{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:clamp(28px,3.4vw,38px);margin:0 0 12px;color:var(--white)}
.gp-card p{font-size:15.5px;line-height:1.6;color:rgba(241,241,241,.72);margin:0 0 16px}
.gp-card ul{list-style:none;border-top:1px solid rgba(241,241,241,.18);margin:0 0 20px}
.gp-card li{border-bottom:1px solid rgba(241,241,241,.1)}
.gp-card li a{display:flex;justify-content:space-between;padding:12px 0;font-weight:700;color:var(--white)}
.gp-card li a::after{content:"↗";color:var(--orange)}
.gp-check{display:flex;gap:12px;align-items:flex-start;margin:0 0 20px;cursor:pointer;font-size:14.5px;line-height:1.5;color:var(--white)}
.gp-check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--orange)}
.gp-card .btn{width:100%;justify-content:space-between;padding-left:22px}
.gp-card .btn[disabled]{opacity:.4;pointer-events:none}
.gp-card .gp-note{font-size:12.5px;color:rgba(241,241,241,.5);margin:14px 0 0}
.gp-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;display:flex;gap:14px 24px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 20px;background:var(--black);color:var(--white);border:1px solid rgba(241,241,241,.14);border-radius:14px}
.gp-bar p{margin:0;font-size:14.5px;line-height:1.45;max-width:60ch;color:rgba(241,241,241,.8)}
@media (max-width:640px){.gp-bar .btn{width:100%}}

/* Pie: «Asesor estratégico de ventas» junto al nombre en escritorio y debajo en móvil */
/* El cargo va siempre debajo del nombre, en todas las pantallas */
.foot-role{display:block;margin-top:6px}

/* Safari (barra transparente): franja fija y opaca arriba, del color del fondo.
   Safari tiñe la barra con lo que hay en el borde superior; así siempre se ve oscura
   y las tarjetas que suben al hacer scroll no se transparentan por detrás. */
html{background:#161616}
.top-edge{position:fixed;top:0;left:0;right:0;height:var(--gap);background:#161616;z-index:50;pointer-events:none}

/* Foto de inicio (pieza metálica negra): ya es oscura, así que lleva menos velo que el resto */
body[data-view="inicio"] .slide img{filter:brightness(.9)}

/* Cabecera más ancha: más aire entre el logo y las páginas, y la raya más pegada al texto */
.bar{padding:8px 10px 8px 8px}
.bar nav{margin:0 16px 0 36px;gap:clamp(14px,2vw,36px)}
.bar nav a:not(.cta){gap:3px;padding:8px 6px 6px}

/* Pie: enlaces (Contacto, Gráffica Estudio, LinkedIn) alineados a la izquierda, debajo del nombre */
.foot-row:first-child{flex-direction:column;align-items:flex-start;gap:14px}
.foot-row:first-child .foot-links{margin-left:0;justify-content:flex-start}

/* Menú desplegable: tarjeta reducida con retrato, nombre, cargo e iconos */
.ov-side{background:var(--black);border:1px solid rgba(241,241,241,.08);display:flex;align-items:flex-end;padding:clamp(28px,4vw,56px)}
.ov-card{display:flex;flex-direction:column;align-items:flex-start}
.ov-side img.ov-retrato{width:190px;height:236px;object-fit:cover;object-position:50% 25%;filter:none;border-radius:0}
.ov-name{display:flex;align-items:center;gap:20px;margin-top:30px;font-family:var(--display);font-weight:700;font-size:clamp(30px,2.8vw,44px);letter-spacing:-.03em;line-height:1;color:var(--white)}
.ov-name i{width:14px;height:14px;background:var(--oro);flex:none}
.ov-role{margin-top:14px;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(241,241,241,.6)}
.ov-social{display:flex;gap:26px;margin-top:30px}
.ov-social a{color:rgba(241,241,241,.85);transition:color .3s}
.ov-social a:hover{color:var(--orange)}
.ov-social svg{width:26px;height:26px}

/* Sobre mí: tarjeta de Harvard con logo (en blanco sobre el fondo oscuro) */
.stat-harvard .harvard{display:block;width:auto;height:58px;margin:0 auto 14px;filter:brightness(0) invert(1);opacity:.9}
.grid-3.stats .stat{display:flex;flex-direction:column;justify-content:center;align-items:center}

.ov-name img{height:clamp(26px,2.4vw,34px);width:auto;display:block}
.ov-name i{width:12px;height:12px}
/* Tarjeta del menú: logo más pequeño, sin cuadrado, cargo más pequeño */
.ov-name{margin-top:24px}
.ov-name img{height:20px}
.ov-role{margin-top:10px;font-size:10px;letter-spacing:.16em}
.ov-side img.ov-retrato{border-radius:12px}
.ov-name img{height:38px}
/* Tarjeta del menú: logo Growth Partner más grande, iconos más pequeños */
.ov-name img{height:52px}
.ov-social{gap:20px;margin-top:26px}
.ov-social svg{width:19px;height:19px}
.ov-name img{height:42px}
.ov-name img{height:37px}

/* VARIANTE: logo de manuelpedrosa.com (símbolo + «Manuel Pedrosa / Growth Partner», en dos líneas).
   Al ser más alto que el logotipo de una línea, se ajustan las alturas. */
.logo img{height:30px}
.ov-name img{height:46px}
@media (max-width:860px){.logo img{height:26px}}
.logo img{height:36px}
@media (max-width:860px){.logo img{height:30px}}

/* ---- Textos v3 (2026-10-23) ---- */
/* Pie: credencial de Harvard en la segunda fila; en móvil pasa debajo de los enlaces legales */
.foot-cred{display:inline-flex;gap:8px;align-items:center}
.foot-cred img{height:22px;width:auto;filter:brightness(0) invert(1);opacity:.75}
.foot-sub{gap:10px 28px}
.foot-sub > span:last-child{margin-left:auto}
@media (max-width:860px){.foot-sub > span:last-child{margin-left:0}}
/* Inicio: con el escaparate de programas el panel ya se desplaza, así que el pie también se ve en escritorio */
.home-foot{display:flex}
/* Listas de programas: precio a la derecha de cada nombre */
.list.prog li small{margin-left:auto;padding-left:12px;white-space:nowrap;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--orange)}
.card.accent .list.prog li{color:var(--white)}
.list.prog + .price-line{margin-top:18px}
/* Inversión: tarjetas de programas en dos columnas (una en móvil) */
.progs .price-card{height:100%}
.progs .step{display:flex;flex-direction:column;height:100%}
.progs .price{margin-top:auto}
.progs .price b{font-size:clamp(28px,2.4vw,38px)}
#programas{scroll-margin-top:var(--gap)}
/* Sobre mí: tarjeta puente a Gráffica, texto y foto en dos columnas */
.card .split{align-items:center}
.split .card-head{margin-bottom:22px}
/* Banner de Gráffica: algo más ancho para «desde 50 €/mes» sin empujar la flecha */
.gf-ad{width:344px}
/* Columna estrecha (inicio en escritorio, móvil): cifras apiladas y precio de cada programa debajo del nombre si no cabe */
@container (max-width:520px){
  .grid-3.stats{grid-template-columns:1fr}
  .grid-3.stats .stat{padding:22px 18px}
  .list.prog li{flex-wrap:wrap;row-gap:2px}
  .list.prog li small{margin-left:auto}
}
/* Inversión: «Ver todo el detalle» de cada paso (qué incluye, qué no incluye y condiciones) */
.price-card .detalle{margin-top:14px;border-top:1px solid var(--line)}
.price-card .detalle summary{padding:16px 0;font-size:15px}
.detalle .eyebrow{display:block;margin:18px 0 10px;color:var(--orange)}
.detalle details > .eyebrow:first-of-type{margin-top:0}
.detalle .alist{font-size:15px;color:var(--muted)}
.byline.center{text-align:center;margin-top:12px}
/* Móvil: la barra es fija (top 14px, unos 60px de alto). El texto del escenario iba anclado abajo en absoluto y,
   cuando era largo (inicio), subía por detrás de la barra. Ahora va en flujo con hueco arriba para la barra
   y el escenario crece si el texto lo pide; las anclas (#programas…) también dejan ese hueco. */
@media (max-width:860px){
  html{scroll-padding-top:92px}
  [id]{scroll-margin-top:92px}
  .stage{height:auto;min-height:78vh;min-height:78svh;display:flex;flex-direction:column;justify-content:flex-end}
  body:not([data-view="inicio"]) .stage{height:auto;min-height:52vh;min-height:52svh}
  .stage-text{position:relative;left:auto;right:auto;bottom:auto;padding:100px 22px 78px}
}

/* Inicio: credencial de Harvard encima de los iconos sociales (solo en inicio) */
.stage-cred{position:absolute;right:16px;bottom:76px;z-index:5;display:flex;align-items:center;gap:12px;padding:9px 16px 9px 12px;background:rgba(22,22,22,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(241,241,241,.12);border-radius:14px;color:var(--white);font-size:12px;line-height:1.3}
.stage-cred img{height:34px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.stage-cred b{display:block;font-size:13px;font-weight:700;color:var(--white)}
body:not([data-view="inicio"]) .stage-cred{display:none}
@media (max-width:860px){
  /* Móvil: la credencial va encima de los iconos y el texto deja hueco para las dos filas */
  body[data-view="inicio"] .stage-text{padding-bottom:150px}
  .stage-cred{bottom:72px}
}
/* Inicio: los iconos empiezan en el mismo borde izquierdo que la credencial (ancho fijo 236 + margen 16) */
.stage-cred{width:236px;box-sizing:border-box}
body[data-view="inicio"] .notch{width:calc(236px + 16px + 12px);box-sizing:border-box;justify-content:flex-start}

/* Banner de programas: las imágenes se funden una sobre otra; nombre, frase y puntos */
.gf-media{position:relative;width:56px;height:56px;border-radius:9px;overflow:hidden}
.gf-media img{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.gf-media img.on{opacity:1}
.gf-ad .gf-txt{display:flex;flex-direction:column;white-space:nowrap;font-size:12.5px;line-height:1.35;color:rgba(241,241,241,.75)}
.gf-txt em{font-style:normal}
.gf-dots{display:flex !important;flex-direction:row !important;gap:4px;margin-top:6px}
.gf-dots i{width:5px;height:5px;border-radius:50%;background:rgba(241,241,241,.25);transition:background .3s,width .3s}
.gf-dots i.on{width:14px;border-radius:3px;background:var(--white)}