/* =============================================================================
   VIRGINIA GARCÍA SIERRA — Logopedia y orientación pedagógica · Salamanca
   Sistema visual v2: "Editorial verde"
   -----------------------------------------------------------------------------
   El lima #B7D511 deja de ser un acento y pasa a ser MATERIA: chips sólidos,
   bandas, barras que barren, secciones enteras en verde pleno.
   Tipografía gruesa. Resaltes en color, nunca en cursiva. Sin numeración /01/.
   Un solo easing en todo el sitio.
   ============================================================================= */

/* ----------------------------------------------------------------- 1. TOKENS */
:root{
  /* Color ------------------------------------------------------------------ */
  --bg:#FBFBF7;             /* blanco roto cálido. Nunca #FFF puro            */
  --paper:#F1F2E7;          /* fondo alterno, tirando al verde de marca       */
  --ink:#18220F;            /* verde profundo: el negro tiene clorofila       */
  --ink-70:rgba(24,34,15,.70);
  --ink-sec:rgba(24,34,15,.64);   /* secundario AA-seguro: 4.5:1 sobre el fondo */
  --ink-30:rgba(24,34,15,.30);
  --ink-14:rgba(24,34,15,.14);
  --lima:#B7D511;           /* EL color del cliente, intacto                  */
  --lima-dark:#A3BD0F;      /* su hover, también de su web anterior           */
  --lima-ink:#5C7007;       /* legible como texto normal (5.4:1)              */
  --lima-hi:#6E8508;        /* mas vivo, solo para titulares grandes (4:1)     */       /* la versión legible como texto (AA)             */
  --lima-wash:#F2F6D9;      /* lima al 12%                                    */
  --lima-field:#E9F2BE;     /* lima al 24%                                    */
  --line:var(--ink-14);

  /* Tipografía ------------------------------------------------------------- */
  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --sans:'Hanken Grotesk','Segoe UI',system-ui,sans-serif;

  --step--2:clamp(.72rem,.70rem + .10vw,.78rem);
  --step--1:clamp(.85rem,.82rem + .15vw,.95rem);
  --step-0: clamp(1rem,.95rem + .25vw,1.125rem);
  --step-1: clamp(1.25rem,1.1rem + .70vw,1.6rem);
  --step-2: clamp(1.6rem,1.3rem + 1.5vw,2.4rem);
  --step-3: clamp(2rem,1.5rem + 2.6vw,3.4rem);
  --step-4: clamp(2.4rem,1.5rem + 4.6vw,5.4rem);
  --step-5: clamp(2.9rem,1.3rem + 7.4vw,7.4rem);

  /* Movimiento — UN SOLO EASING ------------------------------------------- */
  --ease:cubic-bezier(.16,1,.3,1);
  --t-micro:.35s;
  --t-reveal:.9s;

  /* Métrica ---------------------------------------------------------------- */
  --gut:clamp(1.25rem,5vw,5rem);
  --maxw:78rem;
  --nav-h:5.25rem;
}

body.t-ninos{ --bg:#F4F5EA; }
body.t-adultos{ --bg:#FCFCF9; }

/* ------------------------------------------------------------- 2. RESET/BASE */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 1rem)}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;font-variant-numeric:tabular-nums;
  transition:background-color 1s var(--ease);
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--lima);color:var(--ink)}

/* Grano global — mata el aspecto "vector limpio" --------------------------- */
body::after{
  content:'';position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.030;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

:focus-visible{outline:2px solid var(--lima-ink);outline-offset:3px}
.skip{
  position:absolute;left:0;top:0;z-index:300;transform:translateY(-120%);
  background:var(--ink);color:var(--bg);padding:.8rem 1.2rem;font-size:var(--step--1);
  transition:transform var(--t-micro) var(--ease);
}
.skip:focus{transform:none}

/* -------------------------------------------------------- 3. TIPOGRAFÍA BASE */
h1,h2,h3{
  font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.03em;
  font-variation-settings:'wdth' 100;
  text-wrap:balance;
}
h1{font-size:var(--step-4);font-weight:800}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);line-height:1.15;letter-spacing:-.02em}
p{text-wrap:pretty;max-width:62ch}

/* El resalte: MISMO tipo, MISMO peso, otro color. Nunca cursiva. */
em,.em{font-style:normal;font-weight:inherit;color:var(--lima-ink)}
/* En titular el verde puede ser mas vivo: el texto grande solo necesita 3:1 */
h1 em,h2 em,h3 em,.quote em,.big-list em{color:var(--lima-hi)}
strong,b{font-weight:600}

.lead{font-size:var(--step-1);line-height:1.45;color:var(--ink-70);max-width:36ch;font-weight:400}
.txt{color:var(--ink-70)}
.txt + .txt{margin-top:1rem}

/* El titular ES la lista de lo que hace. Al ser texto largo baja de cuerpo
   respecto a un titular normal, y el filete de lima le hace de ancla.        */
.hero h1.h1-list{
  font-size:clamp(1.75rem,4vw,3.35rem);
  max-width:26ch;line-height:1.14;letter-spacing:-.028em;text-wrap:balance;
  padding-top:clamp(1.25rem,3vh,2rem);position:relative;
}
.hero-sub{
  margin-top:clamp(1rem,2.5vh,1.5rem);
  font-size:var(--step--2);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink-sec);
}
.hero-sub i{font-style:normal;color:var(--lima-ink);margin-inline:.4em}

/* ------------------------------------- 4. LA FIRMA: el verde como MATERIA */

/* Chip sólido: es lo que distingue cada apartado (sustituye a la numeración) */
.tag{
  display:inline-block;align-self:start;justify-self:start;width:fit-content;
  background:var(--lima);color:var(--ink);
  font-family:var(--sans);font-size:var(--step--2);font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  padding:.5rem .9rem .45rem;
}
.tag--ghost{background:transparent;color:var(--lima-ink);box-shadow:inset 0 0 0 2px var(--lima)}
.sec--lima .tag{background:var(--ink);color:var(--lima)}
.sec--dark .tag{background:var(--lima);color:var(--ink)}

/* Bullet: bloque, no punto */
.list-slash{list-style:none;display:grid;gap:.75rem}
.list-slash li{position:relative;padding-left:1.5rem;color:var(--ink-70)}
.list-slash li::before{
  content:'';position:absolute;left:0;top:.62em;width:.55rem;height:.55rem;
  background:var(--lima);
}
.sec--lima .list-slash li::before{background:var(--ink)}

/* ------------------------------------------------------------ 5. LAYOUT */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(3.75rem,7.5vw,6.75rem);position:relative}
.sec--paper{background:var(--paper)}
.sec--wash{background:var(--lima-wash)}
.sec--lima{background:var(--lima);color:var(--ink)}
.sec--dark{background:var(--ink);color:var(--bg)}
.sec--dark .txt,.sec--dark .list-slash li{color:rgba(251,251,247,.75)}
.sec--dark em{color:var(--lima)}
.sec--dark .list-slash li::before{background:var(--lima)}
.sec--lima em{color:var(--lima);background:var(--ink);padding:0 .14em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.sec--lima .txt{color:rgba(24,34,15,.78)}

.sec-head{margin-bottom:clamp(2rem,4vw,3.25rem)}
.sec-head h2{max-width:20ch;margin-top:1.4rem}
.sec-head-aside{margin-top:1.4rem;max-width:40ch;color:var(--ink-sec);font-size:var(--step--1)}
.sec--lima .sec-head-aside{color:rgba(24,34,15,.72)}
.sec--dark .sec-head-aside{color:rgba(251,251,247,.65)}

/* La onda que se ordena — del sonido al habla clara ----------------------- */
.wave{display:block;width:100%;overflow:visible}
.wave path{fill:none;stroke-width:2.5;vector-effect:non-scaling-stroke}
/* El clon de <use> vive en un shadow tree: no le llegan los selectores de arriba.
   fill y stroke-width si se heredan, asi que se declaran sobre el propio <use>. */
.wave use{fill:none;stroke-width:2.5}
.wave .w-1{stroke:var(--lima)}
.wave .w-2{stroke:var(--ink-14)}
.sec--lima .wave .w-1{stroke:var(--ink)}
.sec--dark .wave .w-1{stroke:var(--lima)}
.js .draw{stroke-dasharray:var(--len,2400);stroke-dashoffset:var(--len,2400);
  transition:stroke-dashoffset 2.4s var(--ease)}
.js .draw.in{stroke-dashoffset:0}

/* --------------------------------------------------------------- 6. ENLACES */
.link{
  text-decoration:none;position:relative;font-weight:600;
  background:linear-gradient(var(--lima),var(--lima)) no-repeat 0 100%/0 .18em;
  transition:background-size .45s var(--ease);
  padding-bottom:.15em;
}
.link:hover,.link:focus-visible{background-size:100% .18em}

/* --------------------------------------------------------------- 7. BOTONES */
.btn{
  --btn-bg:var(--lima);--btn-fg:var(--ink);
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--btn-bg);color:var(--btn-fg);
  padding:1rem 1.9rem;
  font-size:var(--step--1);font-weight:700;letter-spacing:.01em;text-decoration:none;
  overflow:clip;position:relative;isolation:isolate;
  transition:color var(--t-micro) var(--ease);
}
/* el fondo entra barriendo desde abajo */
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.btn:hover{color:var(--bg)}
.btn:hover::before{transform:none}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);box-shadow:inset 0 0 0 2px var(--ink-30)}
.btn--ghost::before{background:var(--lima)}
.btn--ghost:hover{color:var(--ink)}
.btn--ink{--btn-bg:var(--ink);--btn-fg:var(--bg)}
.btn--ink::before{background:var(--lima)}
.btn--ink:hover{color:var(--ink)}
.sec--dark .btn--ghost{--btn-fg:#FBFBF7;box-shadow:inset 0 0 0 2px rgba(251,251,247,.35)}
.sec--lima .btn{--btn-bg:var(--ink);--btn-fg:var(--lima)}
.sec--lima .btn::before{background:var(--bg)}
.sec--lima .btn:hover{color:var(--ink)}

/* el texto rueda hacia arriba y entra su duplicado */
.btn .roll{display:block;position:relative;overflow:clip;height:1.35em}
.btn .roll span{display:block;transition:transform .45s var(--ease)}
.btn .roll span::after{content:attr(data-t);position:absolute;left:0;top:100%;width:100%}
.btn:hover .roll span{transform:translateY(-100%)}

.btn-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

/* ------------------------------------------------- 8. CORTINA Y PROGRESO */
/* Cortina de entrada y de cambio de página: tres franjas de lima */
.curtain{
  position:fixed;inset:0;z-index:400;pointer-events:none;display:grid;
  grid-template-columns:repeat(3,1fr);
}
.curtain i{display:block;background:var(--lima);transform:scaleY(0);transform-origin:bottom;
  box-shadow:0 0 0 1px var(--lima)}
.js .curtain i{transform:scaleY(1)}
.curtain.is-in i{transform:scaleY(1);transform-origin:bottom;
  transition:transform .5s var(--ease)}
.curtain.is-out i{transform:scaleY(0);transform-origin:top;
  transition:transform .65s var(--ease)}
.curtain.is-in i:nth-child(2),.curtain.is-out i:nth-child(2){transition-delay:.06s}
.curtain.is-in i:nth-child(3),.curtain.is-out i:nth-child(3){transition-delay:.12s}
.curtain-mark{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,5vw,3.2rem);
  letter-spacing:-.03em;color:var(--ink);opacity:0;text-align:center;
  transition:opacity .35s var(--ease);
}
.curtain.is-in .curtain-mark{opacity:1;transition-delay:.2s}

.progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:150;
  background:var(--lima);transform:scaleX(0);transform-origin:0 50%;will-change:transform;
}

/* ------------------------------------------------------------------ 9. NAV */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;border-bottom:1px solid transparent;
  transition:transform .5s var(--ease),background-color .4s var(--ease),
             border-color .4s var(--ease),color .4s var(--ease);
}
.nav.is-stuck{
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav.is-hidden{transform:translateY(-101%)}
.nav-inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}

.brand{text-decoration:none;display:flex;align-items:center;gap:.7rem;line-height:1.05}
.brand-mark{
  flex:0 0 auto;height:2.7rem;width:auto;
  transition:transform var(--t-micro) var(--ease);
}
.brand:hover .brand-mark{transform:rotate(-8deg)}
.brand-txt{display:block}
.brand-txt b{font-family:var(--display);font-weight:700;font-size:1.18rem;letter-spacing:-.03em;display:block}
.brand-txt span{
  display:block;font-size:.58rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.17em;color:var(--ink-sec);margin-top:.15rem;
}

.nav-links{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem);list-style:none}
.nav-links a{
  text-decoration:none;font-size:var(--step--1);font-weight:600;position:relative;
  padding-block:.5rem;
}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--lima);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

.nav-cta{display:flex;align-items:center;gap:1rem}
.nav-tel{
  text-decoration:none;font-size:var(--step--1);font-weight:700;white-space:nowrap;
  box-shadow:inset 0 -2px 0 var(--lima);transition:box-shadow var(--t-micro) var(--ease);
  padding-inline:.15em;
}
.nav-tel:hover{box-shadow:inset 0 -1.1em 0 var(--lima)}
.nav .btn{padding:.78rem 1.4rem}

.burger{display:none;width:2.75rem;height:2.75rem;place-items:center;position:relative;z-index:2}
.burger i{display:block;width:24px;height:2px;background:currentColor;position:relative}
.burger i::before,.burger i::after{
  content:'';position:absolute;left:0;width:24px;height:2px;background:currentColor;
  transition:transform var(--t-micro) var(--ease);
}
.burger i::before{top:-7px}
.burger i::after{top:7px}
body.menu-open .burger i{background:transparent}
body.menu-open .burger i::before{transform:translateY(7px) rotate(45deg)}
body.menu-open .burger i::after{transform:translateY(-7px) rotate(-45deg)}

/* Menú overlay ------------------------------------------------------------ */
.menu{
  position:fixed;inset:0;z-index:99;background:var(--ink);color:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--nav-h) var(--gut) 3rem;
  clip-path:inset(0 0 100% 0);pointer-events:none;
  transition:clip-path .7s var(--ease);
}
body.menu-open .menu{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu ul{list-style:none;display:grid;gap:.15rem}
.menu li{overflow:clip}
.menu a{
  display:block;text-decoration:none;
  font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,10vw,5rem);
  letter-spacing:-.04em;line-height:1.1;
  transform:translateY(110%);
  transition:transform .8s var(--ease),color var(--t-micro) var(--ease);
}
body.menu-open .menu a{transform:none;transition-delay:calc(var(--i,0) * 65ms + .12s)}
.menu a:hover{color:var(--lima)}
.menu-foot{
  margin-top:auto;padding-top:2.5rem;border-top:1px solid rgba(251,251,247,.18);
  display:flex;flex-wrap:wrap;gap:.4rem 2rem;font-size:var(--step--1);
  color:rgba(251,251,247,.65);
}
.menu-foot a{text-decoration:none;color:var(--lima);font-weight:600}

@media(max-width:960px){
  .nav-links,.nav-tel{display:none}
  .burger{display:grid}
  .nav .btn{display:none}
}

/* ----------------------------------------------------------------- 10. HERO */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--nav-h) + clamp(1.5rem,4.5vh,3.5rem));
  padding-bottom:clamp(2rem,4.5vh,3.25rem);position:relative;isolation:isolate;
}
.hero h1{font-size:var(--step-5);max-width:16ch;letter-spacing:-.04em;line-height:.98}
.hero .tag{margin-bottom:clamp(1.5rem,4vh,2.25rem)}
.hero .lead{margin-top:clamp(1.5rem,3.5vh,2.25rem)}
.hero .btn-row{margin-top:clamp(1.75rem,4vh,2.75rem)}

.hero-wave{
  display:block;width:100%;margin-top:clamp(1.6rem,4vh,3rem);
  height:clamp(52px,7vh,86px);pointer-events:none;overflow:visible;
}

.hero-meta{
  padding-top:1.6rem;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.75rem;
}
.hero-meta div{border-top:3px solid var(--lima);padding-top:.9rem}
.hero-meta b{display:block;font-weight:700;font-size:var(--step--1)}
.hero-meta span{display:block;font-size:var(--step--1);color:var(--ink-sec);margin-top:.15rem}

/* Online: una sola pantalla, así que la onda ocupa el sitio del contenido ---- */
.hero--online .hero-wave{height:clamp(120px,26vh,240px);margin-top:clamp(2.5rem,7vh,5rem)}

/* Hero corto de página interior -------------------------------------------- */
.hero--sm{min-height:auto;padding-bottom:clamp(2rem,5vh,3.5rem)}
.hero--sm h1{font-size:var(--step-4);max-width:18ch}
.hero--sm .hero-wave{height:clamp(38px,5vh,60px);margin-top:clamp(1.75rem,4vh,2.75rem)}

.crumbs{font-size:var(--step--2);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-sec);margin-bottom:1.25rem;font-weight:600}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--lima-ink)}
.crumbs span{margin-inline:.55rem;color:var(--lima-ink)}

/* ------------------------------------------------- 11. MARQUESINA REACTIVA */
.marquee{
  background:var(--lima);color:var(--ink);overflow:clip;
  padding-block:1.15rem;border-block:2px solid var(--ink);user-select:none;
}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-track span{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.4rem,3.4vw,2.6rem);letter-spacing:-.025em;
  white-space:nowrap;display:flex;align-items:center;gap:2.5rem;padding-right:2.5rem;
}
.marquee-track span::after{content:'';width:.7rem;height:.7rem;background:var(--ink);flex:0 0 auto}

/* -------------------------------------------- 12. LOS DOS CAMINOS */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
@media(max-width:840px){.paths{grid-template-columns:1fr}}
.path{
  background:var(--bg);padding:clamp(2.25rem,4.5vw,4rem);text-decoration:none;display:block;
  position:relative;overflow:clip;isolation:isolate;
}
.path--b{background:var(--paper)}
.path::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--lima-wash);
  transform:translateY(100%);transition:transform .55s var(--ease);
}
.path:hover::before{transform:none}
.path .tag{margin-bottom:1.75rem}
.path h3{font-size:var(--step-3);margin-bottom:1rem}
.path p{color:var(--ink-70);font-size:var(--step--1);max-width:36ch}
.path .path-list{margin-top:1.75rem}
.path .go{
  margin-top:2.25rem;display:inline-flex;align-items:center;gap:.7rem;
  font-size:var(--step--1);font-weight:700;
}
.path .go svg{transition:transform var(--t-micro) var(--ease)}
.path:hover .go svg{transform:translateX(6px)}
.path-wave{position:absolute;right:0;bottom:0;width:62%;height:70px;pointer-events:none;opacity:.55}
.path-wave path{fill:none;stroke:var(--lima);stroke-width:2.5;vector-effect:non-scaling-stroke}

/* ------------------------------------- 13. SECCIÓN ANCLADA CON SCROLL LATERAL */
.pin{position:relative}
.pin-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:clip}
.pin-head{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);width:100%;
  margin-bottom:clamp(1.5rem,4vh,3rem);
}
.pin-head h2{margin-top:1.2rem;max-width:22ch}
.pin-track{display:flex;gap:.75rem;width:max-content;
  padding-left:var(--gut);will-change:transform}
.pin-card{
  background:var(--bg);width:min(78vw,25rem);padding:clamp(1.75rem,3vw,2.5rem);
  display:flex;flex-direction:column;
  min-height:min(48vh,24rem);text-decoration:none;position:relative;overflow:clip;isolation:isolate;
}
.pin-card::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--lima);
  transform:translateY(100%);transition:transform .5s var(--ease);
}
.pin-card:hover::before{transform:none}
.pin-card h3{font-size:var(--step-2);margin-bottom:.8rem;max-width:14ch}
.pin-card p{color:var(--ink-sec);font-size:var(--step--1)}
.pin-card:hover p{color:rgba(24,34,15,.8)}
.pin-card .tag{align-self:flex-start;margin-bottom:auto}
.pin-card:hover .tag{background:var(--ink);color:var(--lima)}
.pin-card .txt-b{margin-top:1.6rem}
.pin-rail{
  max-width:var(--maxw);margin:clamp(1.5rem,3vh,2.5rem) auto 0;width:100%;
  padding-inline:var(--gut);
}
.pin-rail i{display:block;height:3px;background:var(--ink-14);position:relative}
.pin-rail i::after{
  content:'';position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--lima);
}
@media(max-width:840px){
  .pin{height:auto!important}
  .pin-stage{position:static;height:auto}
  .pin-track{flex-direction:column;width:auto;padding-left:0;transform:none!important;
    background:none;gap:0;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
  .pin-card{width:auto;min-height:0;background:none;border-top:1px solid var(--line);
    padding-inline:0}
  .pin-card .tag{margin-bottom:1.1rem}
  .pin-card .txt-b{margin-top:0}
  .pin-card::before{display:none}
  .pin-rail{display:none}
}

/* --------------------------- 13b. LAS DOS FRANJAS DEL DÍA (mañana / tarde) */
.bands{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
@media(max-width:760px){.bands{grid-template-columns:1fr}}
.band{background:var(--bg);padding:clamp(1.9rem,4vw,3.2rem);position:relative;overflow:clip}
.band--pm{background:var(--paper)}
.sec--paper .band{background:var(--bg)}
.sec--paper .band--pm{background:var(--paper)}
.band .tag{margin-bottom:1.6rem}
.band h3{font-size:var(--step-3);margin-bottom:.9rem;letter-spacing:-.035em}
.band p{color:var(--ink-sec);font-size:var(--step--1);max-width:34ch;margin-bottom:1.5rem}
.band .list-slash{margin-bottom:1.6rem;font-size:var(--step--1)}
/* Marca de "todavía no existe". Se quita el día que el bot esté en marcha. */
.band .soon{
  display:inline-block;width:fit-content;max-width:none;
  font-size:var(--step--2);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--lima-ink);box-shadow:inset 0 0 0 2px var(--lima);
  padding:.35rem .7rem .3rem;margin:-1.05rem 0 1.05rem;
}
.band .btn{margin-top:.4rem}
.band-price{
  font-family:var(--display);font-weight:800;font-size:var(--step-1);
  color:var(--lima-ink);margin:-.3rem 0 1rem;letter-spacing:-.02em;
}
.band-price small{font-family:var(--sans);font-weight:600;font-size:var(--step--1);
  color:var(--ink-sec);letter-spacing:0;margin-left:.5rem}
/* La cifra grande de la página de precios */
.band--price h3{
  font-size:clamp(3.2rem,9vw,6rem);letter-spacing:-.05em;line-height:.95;margin-bottom:.4rem;
}
.band--price .sub{font-size:var(--step--1);font-weight:700;color:var(--ink-sec);
  margin-bottom:1.4rem;text-transform:uppercase;letter-spacing:.14em}

/* --------------------------------------------------- 14. FILAS Y TARJETAS */
.rows{border-top:2px solid var(--ink)}
.row{
  display:grid;grid-template-columns:minmax(0,16rem) 1fr auto;
  gap:clamp(1rem,3vw,2.5rem);align-items:baseline;
  padding:clamp(1.5rem,2.6vw,2.2rem) clamp(1rem,2vw,1.5rem);
  border-bottom:1px solid var(--line);text-decoration:none;
  position:relative;overflow:clip;isolation:isolate;
}
.row::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--lima);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease);
}
.row:hover::before{transform:none}
.row h3{font-size:var(--step-1)}
.row p{color:var(--ink-sec);font-size:var(--step--1);max-width:52ch}
.row:hover p{color:rgba(24,34,15,.8)}
.row .arrow{transition:transform var(--t-micro) var(--ease);color:var(--ink-30)}
.row:hover .arrow{transform:translateX(6px);color:var(--ink)}
@media(max-width:840px){
  .row{grid-template-columns:1fr;row-gap:.5rem}
  .row .arrow{display:none}
}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:1px;background:var(--line)}
.card{background:var(--bg);padding:clamp(1.75rem,3vw,2.4rem)}
.sec--paper .card{background:var(--paper)}
.sec--wash .card{background:var(--lima-wash)}
.sec--lima .cards{background:rgba(24,34,15,.22)}
.sec--lima .card{background:var(--lima)}
.card .tag{margin-bottom:1.4rem}
.card h3{margin-bottom:.7rem}
.card p{color:var(--ink-sec);font-size:var(--step--1)}
.sec--lima .card p{color:rgba(24,34,15,.78)}
.card .list-slash{margin-top:1.2rem;font-size:var(--step--1)}

/* ------------------------------------------------------------- 15. PASOS */
/* Aquí el número SÍ es información: es una secuencia real */
.steps{display:grid;gap:0;max-width:54rem;border-top:2px solid currentColor;position:relative}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.5rem);
  padding:clamp(1.5rem,2.5vw,2.2rem) 0 clamp(1.5rem,2.5vw,2.2rem) clamp(1.25rem,3vw,2rem);
  border-bottom:1px solid currentColor;
  align-items:baseline;
}
.step-n{
  font-family:var(--display);font-weight:800;font-size:var(--step-2);
  line-height:1;min-width:2ch;
}
.step h3{font-family:var(--sans);font-size:var(--step-0);font-weight:700;
  letter-spacing:0;margin-bottom:.35rem}
.step p{color:var(--ink-sec);font-size:var(--step--1)}
.sec--lima .steps,.sec--lima .step{border-color:rgba(24,34,15,.3)}
.sec--lima .step p{color:rgba(24,34,15,.78)}
.sec--dark .steps,.sec--dark .step{border-color:rgba(251,251,247,.3)}
.sec--dark .step p{color:rgba(251,251,247,.7)}
.sec--dark .step-n{color:var(--lima)}

/* ---------------------------------------------------------- 16. PERFIL */
.profile{display:grid;grid-template-columns:minmax(0,22rem) 1fr;
  gap:clamp(2rem,6vw,5rem);align-items:start}
@media(max-width:880px){.profile{grid-template-columns:1fr}}
/* Sin retrato: la columna de la izquierda la ocupa la frase. Por debajo de
   1024 px se apila (título, frase, texto) para que respire.                  */
.profile--solo{grid-template-columns:minmax(0,23rem) 1fr}
.profile--solo .quote{max-width:20ch}
@media(max-width:1024px){.profile--solo{grid-template-columns:1fr;gap:clamp(1.5rem,4vw,2.5rem)}}
.creds{margin-top:2rem;display:grid;gap:0}
.creds div{border-top:1px solid var(--line);padding:.85rem 0;font-size:var(--step--1);color:var(--ink-sec)}
.creds b{color:var(--ink);font-weight:700}
.quote{font-family:var(--display);font-weight:700;font-size:var(--step-2);
  line-height:1.18;letter-spacing:-.028em;max-width:22ch}


/* ------------------------------------------------------------- 18. TABLAS */
.table{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.table caption{text-align:left;margin-bottom:1.25rem;color:var(--ink-sec);font-size:var(--step--1)}
.table th,.table td{padding:1.05rem .9rem;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top}
.table thead th{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.16em;
  font-weight:700;color:var(--ink-sec);border-bottom:2px solid var(--ink)}
.table tbody tr{transition:background-color var(--t-micro) var(--ease)}
.table tbody tr:hover{background:var(--lima-wash)}
.table .name{font-weight:700;color:var(--ink)}
.table .meta{display:block;color:var(--ink-sec);font-weight:400;margin-top:.2rem;max-width:44ch}
.table .price{font-family:var(--display);font-weight:800;font-size:var(--step-1);
  white-space:nowrap;letter-spacing:-.02em}
.table td.closed{color:var(--ink-sec)}

@media(max-width:640px){
  .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .table tr{display:grid;gap:.15rem;padding-block:1rem;border-bottom:1px solid var(--line)}
  .table td{border:0;padding:.15rem .2rem}
}
.tw{overflow-x:auto}


/* ------------------------------------------------------------------ 20. FAQ */
.faq{border-top:2px solid var(--ink);max-width:54rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.45rem 3rem 1.45rem 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:var(--step-1);letter-spacing:-.02em;
  transition:color var(--t-micro) var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after,.faq summary::before{
  content:'';position:absolute;right:.4rem;top:50%;width:15px;height:3px;background:var(--lima-ink);
  transition:transform var(--t-micro) var(--ease);
}
.faq summary::before{transform:rotate(90deg)}
.faq details[open] summary::before{transform:rotate(0)}
.faq summary:hover{color:var(--lima-ink)}
.faq details p{padding:0 3rem 1.7rem 0;color:var(--ink-70);font-size:var(--step--1)}

/* --------------------------------------------------------------- 21. CTA */
.cta-big{padding-block:clamp(3.25rem,6.5vw,5.5rem)}
.cta-big h2{font-size:var(--step-4);max-width:16ch;letter-spacing:-.035em}
.cta-big .lead{color:rgba(251,251,247,.75);margin-top:1.25rem}
.cta-big .btn-row{margin-top:1.9rem}

/* ------------------------------------------------------------- 22. FOOTER */
.foot{background:var(--ink);color:var(--bg);padding-top:clamp(2.25rem,4.5vw,3.5rem);overflow:clip}
.foot a{text-decoration:none}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(1.75rem,3.5vw,2.75rem)}
@media(max-width:840px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot h4{
  display:inline-block;background:var(--lima);color:var(--ink);
  font-family:var(--sans);font-size:var(--step--2);text-transform:uppercase;
  letter-spacing:.17em;font-weight:700;padding:.4rem .75rem .35rem;margin-bottom:1.2rem;
}
.foot ul{list-style:none;display:grid;gap:.65rem;font-size:var(--step--1)}
.foot ul a{color:rgba(251,251,247,.78);transition:color var(--t-micro) var(--ease)}
.foot ul a:hover{color:var(--lima)}
.foot address{font-style:normal;font-size:var(--step--1);color:rgba(251,251,247,.78);line-height:1.9}
.foot address a{color:inherit;box-shadow:inset 0 -1px 0 rgba(251,251,247,.3);
  transition:box-shadow var(--t-micro) var(--ease)}
.foot address a:hover{box-shadow:inset 0 -1px 0 var(--lima)}

.monogram{
  font-family:var(--display);font-weight:800;
  font-size:clamp(3.5rem,14vw,10.5rem);line-height:.74;letter-spacing:-.055em;
  color:rgba(183,213,17,.18);margin-bottom:-.09em;user-select:none;white-space:nowrap;
}
.foot-legal{
  border-top:1px solid rgba(251,251,247,.18);padding-block:1.1rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;justify-content:space-between;
  font-size:var(--step--2);color:rgba(251,251,247,.6);
}
.foot-legal nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.foot-legal a{color:inherit;transition:color var(--t-micro) var(--ease)}
.foot-legal a:hover{color:var(--lima)}

/* ------------------------------------------- 22b. AVISO DE COOKIES ------ */
/* Barra inferior, no modal: informa sin secuestrar la página. Los dos botones
   pesan lo mismo, que es lo que exige la AEPD: rechazar tiene que costar
   exactamente igual que aceptar.                                            */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:98;
  background:var(--ink);color:var(--bg);
  border-top:3px solid var(--lima);
  transform:translateY(101%);transition:transform .6s var(--ease);
}
.cookies.is-on{transform:none}
.cookies-in{
  max-width:var(--maxw);margin-inline:auto;padding:1.25rem var(--gut);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;justify-content:space-between;
}
.cookies p{font-size:var(--step--1);color:rgba(251,251,247,.8);max-width:62ch;margin:0}
.cookies p b{color:var(--bg);font-weight:700}
.cookies a{color:var(--lima)}
.cookies-btns{display:flex;gap:.75rem;flex-wrap:wrap;flex:0 0 auto}
.cookies .btn{padding:.8rem 1.5rem;font-size:var(--step--1)}
/* Sobre fondo oscuro el botón fantasma heredaba tinta oscura: invisible.
   Rechazar tiene que pesar lo mismo que aceptar. */
.cookies .btn--ghost{--btn-fg:#FBFBF7;box-shadow:inset 0 0 0 2px rgba(251,251,247,.45)}
.cookies .btn--ghost::before{background:#FBFBF7}
.cookies .btn--ghost:hover{color:var(--ink)}
@media(max-width:640px){
  .cookies-in{padding-block:1.1rem}
  .cookies-btns{width:100%}
  .cookies-btns .btn{flex:1 1 0;justify-content:center}
}
/* Con la barra abierta, el botón de WhatsApp se aparta */
body.cookies-open .wa{bottom:calc(clamp(1rem,3vw,2rem) + 5.5rem)}

/* La puerta del mapa: hasta que no se acepta, Google no carga nada --------- */
.map-gate{
  position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;
  gap:1rem;text-align:center;padding:clamp(1.25rem,4vw,2.5rem) 1.25rem 4.5rem;
  background:var(--lima-wash);
}
.map-gate p{font-size:var(--step--1);color:var(--ink-70);max-width:34ch;margin:0}
.map-gate .map-gate-alt{font-size:var(--step--2);color:var(--ink-sec)}

/* --------------------------------------------------- 23. BOTÓN WHATSAPP */
.wa{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:95;
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--ink);color:var(--bg);
  padding:.9rem 1.3rem;text-decoration:none;font-size:var(--step--1);font-weight:700;
  transition:transform var(--t-micro) var(--ease),background-color var(--t-micro) var(--ease),
             color var(--t-micro) var(--ease);
}
.wa:hover{transform:translateY(-3px);background:var(--lima);color:var(--ink)}
.wa svg{flex:0 0 auto}
@media(max-width:560px){.wa span{display:none}.wa{padding:.95rem}}

/* --------------------------------------------------------- 24. MOVIMIENTO */
/* Todo lo que se oculta para animarse cuelga de html.js: sin JavaScript la
   página se lee entera, sin efectos. Cuatro entradas distintas según qué sea
   cada cosa: subir (por defecto), entrar por la izquierda (listas), crecer
   (tarjetas) o descubrirse tras una máscara (notas y citas).                 */
.js [data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease),
             filter var(--t-reveal) var(--ease),clip-path 1.1s var(--ease)}
.js [data-reveal="left"]{transform:translateX(-32px)}
.js [data-reveal="scale"]{transform:scale(.9);transform-origin:0 100%}
.js [data-reveal="blur"]{transform:none;filter:blur(10px)}
.js [data-reveal="mask"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
.js [data-reveal].in{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}

.js [data-stagger] > *{opacity:0;transform:translateY(24px);
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.js [data-stagger="left"] > *{transform:translateX(-28px)}
.js [data-stagger="scale"] > *{transform:scale(.94);transform-origin:0 50%}
.js [data-stagger].in > *{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 85ms)}

/* Titular: cada PALABRA sube desde su propia máscara. --base lo retrasa en
   bloque para encajarlo en la secuencia de entrada.                          */
.split{display:block;overflow:clip;padding-bottom:.08em}
.w{display:inline-block;overflow:clip;vertical-align:bottom}
.w > span{display:inline-block;transform:translateY(105%);
  transition:transform 1s var(--ease)}
.split.in .w > span{transform:none;transition-delay:calc(var(--base,0ms) + var(--wi,0) * 45ms)}

/* El titular-lista de la home se despliega disciplina a disciplina cuando la
   cortina se retira (body.is-ready). Palabras sueltas, sin máscara, para que
   partan de línea donde toque. El filete de lima se dibuja con él.           */
.js .h1-list:not(.is-split){opacity:0}
.h1-list .dw{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(7px);
  transition:opacity .7s var(--ease),transform 1s var(--ease),filter .8s var(--ease);
  transition-delay:calc(var(--di,0) * 75ms)}
body.is-ready .h1-list .dw{opacity:1;transform:none;filter:none}
/* La ultima disciplina ("y Coaching") no se parte: sin "y" colgando a final de linea */
.h1-list .d:last-child{white-space:nowrap}
.h1-list::before{
  content:'';position:absolute;left:0;top:0;width:100%;height:5px;background:var(--lima);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease);
}
body.is-ready .h1-list::before{transform:none}

/* La onda respira: la copia tenue oscila sola y la línea de lima estira su
   amplitud con la velocidad del scroll (eso lo mueve el bucle).              */
.wave use,.wave path{transform-box:fill-box;transform-origin:50% 50%}
.hero-wave .w-2{animation:respira 7s ease-in-out infinite}
@keyframes respira{
  0%,100%{transform:translateX(0) scaleY(1)}
  50%{transform:translateX(-14px) scaleY(1.45)}
}

/* Hover direccional: el relleno entra por el borde por el que llega el ratón
   y sale por el que se va. Van después de :hover para mandar en reposo.      */
.path.no-t::before,.pin-card.no-t::before{transition:none}
.path[data-from="top"]::before,.pin-card[data-from="top"]::before{transform:translateY(-100%)}
.path[data-from="left"]::before,.pin-card[data-from="left"]::before{transform:translateX(-100%)}
.path[data-from="right"]::before,.pin-card[data-from="right"]::before{transform:translateX(100%)}
.path:hover::before,.pin-card:hover::before{transform:none}

/* Carril anclado: cada tarjeta crece al pasar por el centro (lo mueve el bucle) */
.pin-card,.pin-card .txt-b{will-change:transform}
.pin-card{transform-origin:50% 50%}

/* La línea de los pasos: un carril a la izquierda que se rellena al bajar y
   enciende cada número al llegar a él.                                       */
.steps::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:currentColor;opacity:.16}
.steps::after{content:'';position:absolute;left:0;top:0;width:3px;height:var(--fill,0%);
  background:var(--lima)}
.sec--lima .steps::after{background:var(--ink)}
.sec--dark .steps::after{background:var(--lima)}
.step-n{transition:color .4s var(--ease),background-color .4s var(--ease)}
.step.is-on .step-n{color:var(--lima-ink)}
.sec--lima .step.is-on .step-n{color:var(--lima);background:var(--ink);padding:.04em .16em;margin:-.04em -.16em}
.sec--dark .step.is-on .step-n{color:var(--bg)}

[data-para]{will-change:transform}

/* ---------------------------------------------------------- 25. LEGALES */
.prose{max-width:48rem}
.prose h2{font-size:var(--step-2);margin:clamp(2.5rem,5vw,3.5rem) 0 1rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--sans);font-size:var(--step-0);font-weight:700;
  letter-spacing:0;margin:1.75rem 0 .5rem}
.prose p,.prose li{color:var(--ink-70);font-size:var(--step--1);line-height:1.75}
.prose p{margin-bottom:.9rem}
.prose ul{list-style:none;display:grid;gap:.55rem;margin-bottom:1.2rem}
.prose ul li{position:relative;padding-left:1.4rem}
.prose ul li::before{content:'';position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;
  background:var(--lima)}
.prose .tbd{background:var(--lima-field);padding:.1em .4em;font-weight:700;color:var(--ink)}
.prose a{color:var(--lima-ink);font-weight:600}

/* ----------------------------------------------------------- 26. UTILIDADES */
.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}
.mt-3{margin-top:3rem}
.mt-4{margin-top:clamp(2.5rem,5vw,4rem)}
.narrow{max-width:54rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.note{border-left:4px solid var(--lima);padding:.9rem 0 .9rem 1.4rem;
  font-size:var(--step--1);color:var(--ink-70);max-width:48rem}
.note b{color:var(--ink)}
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(1.5rem,4vw,3.5rem)}
.big-list{display:grid;max-width:46rem;border-top:2px solid var(--ink)}
.big-list p{font-family:var(--display);font-weight:700;font-size:var(--step-2);
  line-height:1.2;letter-spacing:-.028em;padding:1.4rem 0;
  border-bottom:1px solid var(--line);max-width:32ch}
.big-list .closer{font-family:var(--sans);font-size:var(--step-0);font-weight:400;
  color:var(--ink-sec);border:0;padding-top:2rem;max-width:46ch;line-height:1.65;letter-spacing:0}

.contact-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,6vw,5rem);
  align-items:start}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}}
.contact-block{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1.6rem 2rem}
.contact-item{border-top:3px solid var(--lima);padding-top:1.1rem}
.contact-item b{display:block;font-size:var(--step--2);text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink-sec);margin-bottom:.45rem;font-weight:700}
.contact-item a,.contact-item span{font-size:var(--step-1);font-family:var(--display);
  font-weight:700;letter-spacing:-.02em;text-decoration:none;display:block;line-height:1.25;
  overflow-wrap:anywhere}
/* el correo no cabe a cuerpo de titular: baja de tamaño y parte donde toque */
.contact-item--mail a{font-size:var(--step-0);letter-spacing:0;line-height:1.4}
.contact-item a:hover{color:var(--lima-ink)}
.contact-item small{display:block;font-family:var(--sans);font-size:var(--step--1);
  color:var(--ink-sec);margin-top:.35rem;font-weight:400}

.map{position:relative;aspect-ratio:16/10;background:var(--lima-field);overflow:clip;
  box-shadow:inset 0 0 0 2px var(--ink)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:saturate(.85) contrast(1.02)}
.map figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:var(--ink);color:var(--bg);padding:.9rem 1.1rem;font-size:var(--step--1);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;font-weight:600}
.map figcaption a{color:var(--lima);text-decoration:none;white-space:nowrap}
.map figcaption a:hover{box-shadow:inset 0 -2px 0 var(--lima)}

/* --------------------------------------- 27. ACCESIBILIDAD DE MOVIMIENTO */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js [data-reveal],.js [data-stagger] > *{opacity:1!important;transform:none!important;
    filter:none!important;clip-path:none!important}
  .w > span{transform:none}
  .js .draw{stroke-dashoffset:0}
  .js .h1-list:not(.is-split){opacity:1}
  .h1-list .dw{opacity:1;transform:none;filter:none}
  .h1-list::before{transform:none}
  .hero-wave .w-2{animation:none}
  .curtain{display:none}
  .pin{height:auto!important}
  .pin-stage{position:static;height:auto}
  .pin-track{flex-direction:column;width:auto;transform:none!important}
  .pin-card{width:auto;min-height:0}
}

/* --------------------------------------------------- 25. RESERVA DE CITAS */
/* Tres pasos: día, hora y datos. Todo con la misma gramática del sitio:
   filo de un píxel, esquinas vivas y el verde entrando desde abajo.        */
.reserva{background:var(--bg);border-top:2px solid var(--ink);margin-top:1.6rem}
.reserva-cab{padding:clamp(1.3rem,3vw,2rem);display:grid;gap:.85rem;border-bottom:1px solid var(--line)}
.reserva-nota{color:var(--ink-sec);font-size:var(--step--1);max-width:56ch}
.reserva-nota b{color:var(--ink)}

.reserva-pasos{display:flex;list-style:none;border-bottom:1px solid var(--line)}
.rp{
  flex:1;display:flex;align-items:center;gap:.55rem;padding:.85rem clamp(.7rem,2vw,1.3rem);
  font-size:var(--step--1);font-weight:700;color:var(--ink-30);border-right:1px solid var(--line);
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
.rp:last-child{border-right:0}
.rp i{font-style:normal;font-family:var(--display);font-weight:800}
.rp.is-on{color:var(--ink);background:var(--lima-wash)}
.rp.is-done{color:var(--lima-ink)}
@media(max-width:520px){.rp span{display:none}.rp{justify-content:center}}

.reserva-cuerpo{padding:clamp(1.3rem,3vw,2rem)}
.rpaso{display:grid;gap:1.15rem}
.rpaso[hidden]{display:none}

.mes-grupo{display:grid;gap:.6rem}
.mes-grupo + .mes-grupo{margin-top:1.1rem}
.mes-tit{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-sec);font-weight:700}
.dias{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.2rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.dia{
  background:var(--bg);padding:.85rem .4rem;display:grid;gap:.1rem;justify-items:center;text-align:center;
  cursor:pointer;position:relative;overflow:clip;isolation:isolate;font:inherit;color:inherit;
}
.dia::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--lima);transform:translateY(100%);transition:transform .4s var(--ease)}
.dia:hover::before,.dia:focus-visible::before{transform:none}
.dia .sem{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-sec)}
.dia .num{font-family:var(--display);font-weight:800;font-size:var(--step-2);line-height:1;letter-spacing:-.04em}
.dia .cuantas{font-size:var(--step--2);color:var(--lima-ink);font-weight:700;margin-top:.15rem}
.dia:hover .sem,.dia:hover .cuantas{color:var(--ink)}
.dia.is-sel{background:var(--ink);color:var(--bg)}
.dia.is-sel::before{content:none}
.dia.is-sel .sem,.dia.is-sel .cuantas{color:var(--lima)}

.horas{display:flex;flex-wrap:wrap;gap:.6rem}
.hora{
  font-family:var(--display);font-weight:700;font-size:var(--step-0);letter-spacing:-.02em;
  padding:.75rem 1.25rem;background:var(--bg);box-shadow:inset 0 0 0 1px var(--ink-30);cursor:pointer;
  transition:box-shadow .25s var(--ease),background-color .25s var(--ease);
}
.hora:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.hora.is-sel{background:var(--lima);box-shadow:inset 0 0 0 2px var(--lima)}

.elegido{font-family:var(--display);font-weight:700;font-size:var(--step-1);letter-spacing:-.025em;line-height:1.15}
.elegido em{font-style:normal;color:var(--lima-hi)}
.volver{align-self:start;background:none;border:0;padding:0;font:inherit;font-size:var(--step--1);
  font-weight:600;color:var(--ink-sec);cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.volver:hover{color:var(--ink)}

.rform{display:grid;gap:1rem;max-width:36rem}
.rcampo{display:grid;gap:.3rem}
.rcampo label{font-size:var(--step--1);font-weight:700}
.rcampo label small{display:block;font-weight:400;color:var(--ink-sec);font-size:var(--step--2)}
.rcampo input{font:inherit;font-size:var(--step-0);color:var(--ink);background:var(--bg);
  border:1px solid var(--ink-30);padding:.8rem .9rem;width:100%;border-radius:0}
.rcampo input:focus{outline:2px solid var(--lima-ink);outline-offset:0;border-color:var(--lima-ink)}
.rcampo.mal input{border-color:#A32017}
.rcampo .fallo{font-size:var(--step--2);color:#A32017;font-weight:600}
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.rlegal{font-size:var(--step--2);color:var(--ink-sec);max-width:52ch}
.rlegal a{color:var(--lima-ink);font-weight:600}
.rform button[type=submit][disabled]{opacity:.55;cursor:progress}

.rok{border-left:4px solid var(--lima);padding-left:1.2rem;display:grid;gap:.7rem}
.rok .codigo{font-family:var(--display);font-weight:800;font-size:var(--step-2);letter-spacing:.08em;color:var(--lima-ink)}
.raviso{font-size:var(--step--1);color:#A32017;font-weight:600}

/* --- ya tengo cita: el conmutador y el panel de gestión */
.modos{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.modo{
  font:inherit;font-size:var(--step--1);font-weight:700;padding:.6rem 1rem;
  background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-30);cursor:pointer;
  transition:box-shadow .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease);
}
.modo:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.modo[aria-pressed=true]{background:var(--ink);color:var(--bg);box-shadow:inset 0 0 0 1px var(--ink)}
[data-nueva][hidden],[data-gestion][hidden],.gpaso[hidden]{display:none}
.gpaso{display:grid;gap:1.15rem}
.gbotones{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.gpregunta{flex-basis:100%;font-weight:700}