/* ============================================================
   NUTRISLIM — sistema de diseño
   Paleta y curvas inspiradas en la estética editorial premium.
   Tres tipografías, tres trabajos. Cuatro colores. Nada más.
   ============================================================ */

/* ============================================================
   PALETAS
   Todo el color sale de siete variables. Cambiarlas cambia el
   sitio entero —fondos, tintas, velos de las fotos, sombras—
   sin tocar una sola regla más abajo.

     BOSQUE  la original: crema, verde carbón, oliva
     SALVIA  marfil mineral, grafito, salvia botánico, champán
     NOCHE   la versión oscura, con champán como acento
   ============================================================ */

:root,
html[data-theme="bosque"]{
  --bg:        #f3f1ec;   /* crema hueso, fondo dominante */
  --dark:      #1a2418;   /* verde carbón — la tinta */
  --overlay:   #121a11;   /* casi negro verdoso — secciones invertidas */
  --olive:     #6f8039;   /* acento sobre fondo claro */
  --lime:      #a9c04f;   /* acento vivo sobre fondo oscuro */
  --sand:      #c7bfae;   /* arena */
  --light:     #f3f1ec;   /* texto sobre fondo oscuro */

  --ink-rgb:    26,36,24;
  --paper-rgb:  243,241,236;
  --scrim-rgb:  18,26,17;
  --accent-rgb: 111,128,57;
  --media-bg:   #e6e3db;
  --ink-on:     var(--light);    /* texto sobre un bloque pintado con --dark  */
  --paper-on:   var(--dark);     /* texto sobre un bloque pintado con --light */
}

html[data-theme="salvia"]{
  --bg:        #F9F8F6;   /* marfil mineral */
  --dark:      #1E2229;   /* gris grafito profundo */
  --overlay:   #171A20;   /* grafito más cerrado para las secciones invertidas */
  --olive:     #7A8B79;   /* verde salvia botánico */
  --lime:      #C5A059;   /* champán aterciopelado */
  --sand:      #C5A059;
  --light:     #F9F8F6;

  --ink-rgb:    30,34,41;
  --paper-rgb:  249,248,246;
  --scrim-rgb:  23,26,32;
  --accent-rgb: 122,139,121;
  --media-bg:   #EDEAE5;
  --ink-on:     var(--light);
  --paper-on:   var(--dark);
}

html[data-theme="noche"]{
  --bg:        #171A1F;   /* grafito de fondo */
  --dark:      #ECEAE5;   /* la tinta se invierte: texto claro */
  --overlay:   #0E1014;   /* casi negro para las secciones invertidas */
  --olive:     #9AAC98;   /* salvia aclarado, para que lea sobre oscuro */
  --lime:      #C5A059;   /* champán */
  --sand:      #C5A059;
  --light:     #ECEAE5;

  --ink-rgb:    236,234,229;
  --paper-rgb:  236,234,229;
  --scrim-rgb:  8,10,13;
  --accent-rgb: 122,139,121;
  --media-bg:   #22262C;
  /* en noche la tinta es clara: lo que va encima tiene que ser oscuro */
  --ink-on:     var(--overlay);
  --paper-on:   var(--overlay);
}

:root{
  --dark-60:   rgba(var(--ink-rgb),.6);
  --dark-40:   rgba(var(--ink-rgb),.4);
  --dark-20:   rgba(var(--ink-rgb),.2);
  --dark-10:   rgba(var(--ink-rgb),.102);
  --light-60:  rgba(var(--paper-rgb),.6);
  --light-40:  rgba(var(--paper-rgb),.4);
  --light-20:  rgba(var(--paper-rgb),.2);
  --light-10:  rgba(var(--paper-rgb),.102);

  /* — tipografía — */
  --font-display: "Fraunces", Garamond, "Times New Roman", serif;
  --font-body:    "Inter", Helvetica, Arial, sans-serif;
  --font-mono:    "Space Mono", "Courier New", monospace;

  /* — movimiento — */
  --expoOut:   cubic-bezier(.16,1,.3,1);
  --expoInOut: cubic-bezier(.87,0,.13,1);
  --expoIn:    cubic-bezier(.7,0,.84,0);

  --radius: 3px;
  --media-radius: 14px;
  /* sombra larga y muy suave: levanta la pieza del fondo sin que se vea la sombra */
  --lift: 0 54px 88px -48px rgba(var(--ink-rgb),.55), 0 10px 26px -16px rgba(var(--ink-rgb),.18);
  /* cantos: hilo oscuro sobre crema, hilo de luz sobre material oscuro */
  --edge-dark:  inset 0 0 0 1px rgba(var(--ink-rgb),.07);
  --edge-light: inset 0 0 0 1px rgba(var(--paper-rgb),.10);
  --shell: 1440px;
  --gut: clamp(20px, 4vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.is-loading{ overflow:hidden; }

body{
  margin:0;
  background:var(--bg);
  color:var(--dark);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,figure{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

/* ── Grano ────────────────────────────────────────────────────────────
   Una capa de ruido finísimo sobre toda la página. Es lo que separa una
   pantalla "plana digital" de algo que parece impreso: unifica fotos,
   video y color plano bajo la misma textura. Generado con SVG, cero peso
   y cero pedidos al servidor.
   ──────────────────────────────────────────────────────────────────── */
body::after{
  content:""; position:fixed; inset:0; z-index:200;
  pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* que el dock fijo no tape el título al saltar por anclas */
section[id]{ scroll-margin-top:96px; }

/* ============================================================
   1 · TELÓN DE APERTURA
   El .inner se desplaza hacia arriba y revela lo que ya estaba
   montado debajo. No hace fade: se corre. Ese es el gesto.
   ============================================================ */

.loader{ position:fixed; inset:0; z-index:9091; pointer-events:none; }

.loader__inner{
  position:absolute; inset:0;
  background:var(--overlay);
  color:var(--sand);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  transform:translateY(0);
  transition:transform 1s var(--expoInOut);
}
.loader.is-done .loader__inner{ transform:translateY(-101%); }
.loader.is-gone{ display:none; }

.loader__mark{ display:flex; flex-direction:column; align-items:center; gap:16px; }

/* El logo original venía sobre fondo negro. Se le generó canal alfa a partir
   de la luminancia (ver README), así que acá va limpio, sin recuadro.

   Aparece con un barrido diagonal de borde difuso: una máscara en degradado
   a 115° más grande que el propio logo, que se desplaza de una esquina a la
   otra. No es un fundido —el logo se va dibujando— y ese es el gesto de la
   referencia. */
.loader__logo{
  width:clamp(210px, 26vw, 340px); height:auto;
  -webkit-mask-image:linear-gradient(115deg,
    transparent 0 26%, rgba(0,0,0,.45) 34%, #000 43% 57%,
    rgba(0,0,0,.45) 66%, transparent 74%);
          mask-image:linear-gradient(115deg,
    transparent 0 26%, rgba(0,0,0,.45) 34%, #000 43% 57%,
    rgba(0,0,0,.45) 66%, transparent 74%);
  -webkit-mask-size:320% 320%;   mask-size:320% 320%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation:logoSweep 3.2s .2s both;
}

/* Un solo barrido continuo: la banda de luz entra por una esquina, se
   detiene sobre el logo y sigue de largo llevándoselo. Aparece y
   desaparece del mismo modo porque es el mismo movimiento, no dos. */
@keyframes logoSweep{
  0%{
    -webkit-mask-position:0% 0%; mask-position:0% 0%;
    transform:scale(1.04);
    animation-timing-function:cubic-bezier(.16,1,.3,1);
  }
  34%{
    -webkit-mask-position:46% 46%; mask-position:46% 46%;
    transform:none;
    animation-timing-function:linear;
  }
  66%{
    -webkit-mask-position:54% 54%; mask-position:54% 54%;
    transform:none;
    animation-timing-function:cubic-bezier(.7,0,.84,0);
  }
  100%{
    -webkit-mask-position:100% 100%; mask-position:100% 100%;
    transform:scale(.99);
  }
}
.loader__word{
  font-family:var(--font-mono); font-size:13px;
  letter-spacing:.42em; text-indent:.42em;
}
/* el pie del telón entra aparte; el logo tiene su propio barrido */
/* el pie acompaña: entra, se sostiene y se va con el logo */
.loader__meta{
  opacity:0;
  animation:loaderMeta 3.4s var(--expoOut) both;
}
@keyframes loaderMeta{
  0%  { opacity:0; transform:translateY(12px); }
  20% { opacity:1; transform:none; }
  74% { opacity:1; transform:none; }
  100%{ opacity:0; transform:translateY(-6px); }
}

.loader__meta{
  position:absolute; left:var(--gut); right:var(--gut); bottom:28px;
  display:flex; justify-content:space-between; gap:16px;
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.16em; color:var(--light-40);
}
.loader__count{ color:var(--sand); }

/* ============================================================
   2 · CURSOR
   Capa fija a pantalla completa con mix-blend-mode:difference.
   El punto es crema y se invierte solo sobre cualquier fondo.
   ============================================================ */

.cursor{
  position:fixed; inset:0; z-index:150;
  pointer-events:none; mix-blend-mode:difference;
  opacity:0; transition:opacity .3s;
}
.cursor.is-on{ opacity:1; }

.cursor__dot{
  position:absolute; top:0; left:0;
  /* 18px navegando (12 + 50 %); sobre un elemento interactivo pasa a 84 */
  width:18px; height:18px; margin:-9px 0 0 -9px;
  border-radius:50%; background:var(--light);
  transition:width .5s var(--expoOut), height .5s var(--expoOut),
             margin .5s var(--expoOut);
  will-change:transform;
}
.cursor.is-lg .cursor__dot{ width:84px; height:84px; margin:-42px 0 0 -42px; }

.cursor__label{
  position:absolute; top:0; left:0;
  transform:translate(-50%,-50%);
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--dark); opacity:0;
  transition:opacity .35s var(--expoOut);
  white-space:nowrap;
}
.cursor.is-lg .cursor__label{ opacity:1; }

@media (hover:none), (pointer:coarse){ .cursor{ display:none; } }

/* ============================================================
   3 · DOCK
   Tres capas: vidrio esmerilado + máscara deslizante + ítems.
   ============================================================ */

.dock{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:14px var(--gut);
  display:flex; justify-content:center;
  transform:translateY(-140%);
  transition:transform 1s var(--expoOut) .35s;
}
.dock.is-in{ transform:none; }

.dock__inner{ position:relative; display:flex; align-items:center; gap:4px; padding:6px; }

.dock__blur{
  position:absolute; inset:0; z-index:-1;
  background:rgba(var(--ink-rgb),.58);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-radius:10px;
}

.dock__brand{
  display:grid; place-items:center;
  width:38px; height:34px; color:var(--sand);
  border-right:1px solid var(--light-10);
  margin-right:4px;
}
.dock__brand svg{ width:17px; height:27px; }

.dock__menu{ position:relative; display:flex; }

.dock__mask{
  position:absolute; top:0; left:0; height:100%;
  background:var(--light-20); border-radius:6px;
  transition:transform .55s var(--expoOut), width .55s var(--expoOut), opacity .3s;
  pointer-events:none;
}

.dock__item > a{
  position:relative; display:flex; align-items:center; gap:6px;
  padding:10px 15px;
  font-size:13.5px; font-weight:400; color:var(--light-60);
  letter-spacing:.01em; white-space:nowrap;
  transition:color .4s var(--expoOut);
}
.dock__item > a:hover, .dock__item.is-active > a{ color:var(--light); }
.dock__item i{
  font-family:var(--font-mono); font-size:9.5px; font-style:normal;
  color:var(--sand); transform:translateY(-4px);
}

/* — selector de paleta — */
.theme{ position:relative; margin-left:4px; }
.theme__toggle{
  display:grid; place-items:center; width:34px; height:34px;
  color:var(--light-40); transition:color .4s var(--expoOut);
}
.theme__toggle svg{ width:19px; height:19px; }
.theme__toggle:hover, .theme.is-open .theme__toggle{ color:var(--light); }

.theme__menu{
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:184px; padding:6px; border-radius:10px;
  background:rgba(var(--scrim-rgb),.86);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--light-10);
  box-shadow:0 24px 48px rgba(0,0,0,.34);
  opacity:0; visibility:hidden;
  transform:translateY(-8px) scale(.97); transform-origin:top right;
  transition:opacity .4s var(--expoOut), transform .5s var(--expoOut), visibility .4s;
}
.theme.is-open .theme__menu{ opacity:1; visibility:visible; transform:none; }

.theme__opt{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 11px; border-radius:6px; text-align:left;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  color:var(--light-60);
  transition:background .35s var(--expoOut), color .35s var(--expoOut);
}
.theme__opt:hover{ background:var(--light-10); color:var(--light); }
.theme__opt.is-on{ background:var(--light-20); color:var(--light); }
.sw{ display:flex; flex:none; }
.sw i{
  width:11px; height:16px; display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
}
.sw i:first-child{ border-radius:3px 0 0 3px; }
.sw i:last-child{ border-radius:0 3px 3px 0; }

@media (max-width:720px){ .theme{ display:none; } }

/* — selector de idioma — */
.flag-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.flag{
  width:18px; height:12px; flex:none;
  border-radius:2px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.18) inset;
}

.lang{
  position:relative;
  margin-left:6px; padding-left:10px;
  border-left:1px solid var(--light-10);
}

.lang__toggle{
  display:flex; align-items:center; gap:7px;
  padding:8px 6px; color:var(--light-60);
  transition:color .4s var(--expoOut);
}
.lang__toggle:hover, .lang.is-open .lang__toggle{ color:var(--light); }
.lang__code{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; }
.lang__chev{
  width:9px; height:6px;
  transition:transform .45s var(--expoOut);
}
.lang.is-open .lang__chev{ transform:rotate(180deg); }

.lang__menu{
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:186px; padding:6px;
  border-radius:10px;
  background:rgba(var(--scrim-rgb),.82);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--light-10);
  box-shadow:0 24px 48px rgba(0,0,0,.32);
  opacity:0; visibility:hidden;
  transform:translateY(-8px) scale(.97); transform-origin:top right;
  transition:opacity .4s var(--expoOut), transform .5s var(--expoOut), visibility .4s;
}
.lang.is-open .lang__menu{
  opacity:1; visibility:visible; transform:none;
}

.lang__opt{
  display:flex; align-items:center; gap:11px;
  width:100%; padding:9px 11px; border-radius:6px;
  font-size:13.5px; color:var(--light-60); text-align:left;
  transition:background .35s var(--expoOut), color .35s var(--expoOut);
}
.lang__opt:hover{ background:var(--light-10); color:var(--light); }
.lang__opt.is-on{ background:var(--light-20); color:var(--light); }

/* El ancho del dock depende del idioma: «Tecnología» y «Направления» son
   mucho más largos que «Technology». En pantallas angostas eso lo hacía
   más ancho que el teléfono y el primer ítem quedaba cortado. Ahora el
   dock nunca excede la pantalla y el menú se desliza dentro. */
@media (max-width:720px){
  .dock{ padding-inline:10px; }
  .dock__inner{ max-width:100%; min-width:0; }
  .dock__menu{
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
    overscroll-behavior-x:contain;
  }
  .dock__menu::-webkit-scrollbar{ display:none; }
  .dock__item{ flex:none; }
  .dock__item > a{ padding:9px 8px; font-size:12px; }
  .dock__item i{ display:none; }
  .dock__brand{ display:none; }
  .lang{ flex:none; margin-left:2px; padding-left:7px; }
  .lang__code, .lang__chev{ display:none; }
  .lang__toggle{ padding:8px 4px; }
}

@media (max-width:400px){
  .dock{ padding-inline:8px; padding-block:10px; }
  .dock__item > a{ padding:8px 6px; font-size:11.5px; }
  .lang{ padding-left:5px; }
}

/* ============================================================
   3-BIS · TIPOGRAFÍA POR SISTEMA DE ESCRITURA
   Fraunces y Space Mono sólo tienen alfabeto latino. Para que
   el ruso y el coreano no caigan en la fuente del sistema, cada
   uno usa familias que sí cubren su escritura. Se cargan solas
   cuando el visitante elige ese idioma (ver app.js).
   ============================================================ */

html[lang="ru"]{
  --font-display:"Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono:"JetBrains Mono", "Courier New", monospace;
}

html[lang="ko"]{
  --font-display:"Noto Serif KR", serif;
  --font-body:"Noto Sans KR", "Inter", sans-serif;
  --font-mono:"Noto Sans KR", monospace;
}
/* el hangul no tiene mayúsculas ni tolera el tracking ancho */
html[lang="ko"] .eyebrow,
html[lang="ko"] .case__tag,
html[lang="ko"] .table__head,
html[lang="ko"] .readout dt,
html[lang="ko"] .panel__list li,
html[lang="ko"] .foot__h{ letter-spacing:.06em; }
html[lang="ko"] .hero__meta{ letter-spacing:.08em; }
html[lang="ko"] .h2, html[lang="ko"] .hero__title,
html[lang="ko"] .cta__title{ letter-spacing:0; line-height:1.28; }
/* el hangul ocupa más alto: el mismo cuerpo se desborda */
html[lang="ko"] .hero__title{ font-size:clamp(27px, 4.2vw, 58px); max-width:22ch; }
html[lang="ko"] .h2{ font-size:clamp(27px, 4vw, 54px); }
html[lang="ko"] .cta__title{ font-size:clamp(29px, 4.8vw, 68px); max-width:20ch; }
html[lang="ko"] .case__title{ font-size:clamp(26px, 3vw, 42px); }
html[lang="ko"] .row__name, html[lang="ko"] .step__name,
html[lang="ko"] .case__title{ letter-spacing:0; }

html[lang="zh-Hant"]{
  --font-display:"Noto Serif TC", serif;
  --font-body:"Noto Sans TC", "Inter", sans-serif;
  --font-mono:"Noto Sans TC", monospace;
}
/* los ideogramas ocupan más alto y no toleran el tracking ancho */
html[lang="zh-Hant"] .eyebrow,
html[lang="zh-Hant"] .case__tag,
html[lang="zh-Hant"] .table__head,
html[lang="zh-Hant"] .readout dt,
html[lang="zh-Hant"] .panel__list li,
html[lang="zh-Hant"] .foot__h{ letter-spacing:.08em; }
html[lang="zh-Hant"] .hero__meta{ letter-spacing:.1em; }
html[lang="zh-Hant"] .h2, html[lang="zh-Hant"] .hero__title,
html[lang="zh-Hant"] .cta__title{ letter-spacing:0; line-height:1.3; }
html[lang="zh-Hant"] .hero__title{ font-size:clamp(27px, 4.2vw, 58px); max-width:22ch; }
html[lang="zh-Hant"] .h2{ font-size:clamp(27px, 4vw, 54px); }
html[lang="zh-Hant"] .cta__title{ font-size:clamp(29px, 4.8vw, 68px); max-width:20ch; }
html[lang="zh-Hant"] .case__title{ font-size:clamp(26px, 3vw, 42px); }
html[lang="zh-Hant"] .row__name, html[lang="zh-Hant"] .step__name{ letter-spacing:0; }

/* el cirílico en versalitas necesita algo menos de tracking */
html[lang="ru"] .eyebrow,
html[lang="ru"] .case__tag,
html[lang="ru"] .table__head{ letter-spacing:.14em; }
html[lang="ru"] .h2, html[lang="ru"] .hero__title,
html[lang="ru"] .cta__title{ letter-spacing:-.01em; line-height:1.1; }

/* ============================================================
   4 · TIPOGRAFÍA COMPARTIDA
   ============================================================ */

.eyebrow{
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--dark-40); margin:0 0 28px;
}
.eyebrow--light{ color:var(--light-40); }

.h2{
  font-family:var(--font-display);
  font-size:clamp(34px, 5.4vw, 76px);
  font-weight:300; line-height:1.04;
  letter-spacing:-.02em; margin:0 0 clamp(40px,6vw,80px);
}
.h2 em, .cta__title em, .hero__title em{
  font-style:italic; font-weight:300; color:var(--olive);
}
.h2--light{ color:var(--light); }
.h2--light em{ color:var(--lime); }

.lead{
  font-size:clamp(16px,1.35vw,19px); line-height:1.65;
  max-width:56ch; color:var(--dark-60); margin:0 0 34px;
}
.tech .lead{ color:var(--light-60); }

.counter{
  font-family:var(--font-mono); font-size:12px;
  letter-spacing:.16em; color:var(--light-40); margin:0;
}
.disclaimer{
  font-family:var(--font-mono); font-size:10.5px; line-height:1.8;
  letter-spacing:.05em; color:var(--light-40);
  max-width:78ch; margin:56px 0 0;
  padding-top:22px; border-top:1px solid var(--light-10);
}

/* — botones — */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:100px;
  border:1px solid var(--dark-20);
  font-size:14px; font-weight:400; letter-spacing:.01em;
  transition:background .5s var(--expoOut), color .5s var(--expoOut),
             border-color .5s var(--expoOut);
}
.btn:hover{ background:var(--dark); color:var(--ink-on); border-color:var(--dark); }
.btn--solid{ background:var(--dark); color:var(--ink-on); border-color:var(--dark); }
.btn--solid:hover{ background:var(--olive); color:var(--ink-on); border-color:var(--olive); }
.btn--light{ border-color:var(--light-20); color:var(--light); }
.btn--light:hover{ background:var(--light); color:var(--paper-on); border-color:var(--light); }
.btn--fill{ background:var(--light); color:var(--paper-on); border-color:var(--light); }

/* ── Latido del botón principal ───────────────────────────────────────
   Mismo gesto que el logo animado de KeyVox: respira cada 3,2 s. Allá
   escala un 18 %, que en un logo funciona; en un botón se vería de
   juguete y además distrae al leerlo. Acá escala un 4 % y el peso lo
   lleva el resplandor, que es lo que el ojo capta de reojo.
   Se frena al pasar el mouse: ahí manda el estado de hover.
   ──────────────────────────────────────────────────────────────────── */
.btn--pulse{
  animation:btnBreathe 3.2s ease-in-out infinite;
  will-change:transform, box-shadow;
}
@keyframes btnBreathe{
  0%,100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(var(--accent-rgb),0),
               0 0 0 0 rgba(var(--paper-rgb),0);
  }
  50%{
    transform:scale(1.04);
    box-shadow:0 0 26px 2px rgba(var(--accent-rgb),.55),
               0 0 56px 10px rgba(var(--paper-rgb),.18);
  }
}
.btn--pulse:hover, .btn--pulse:focus-visible{ animation:none; }
@media (prefers-reduced-motion:reduce){ .btn--pulse{ animation:none; } }
.btn--fill:hover{ background:var(--lime); border-color:var(--lime); color:var(--overlay); }

.round{
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--light-20); color:var(--light);
  display:grid; place-items:center; font-size:15px;
  transition:background .45s var(--expoOut), color .45s var(--expoOut);
}
.round:hover{ background:var(--light); color:var(--overlay); }

/* ============================================================
   5 · PLACEHOLDERS DE IMAGEN
   Para poner una foto:  style="--img:url('assets/img/foo.jpg')"
   La etiqueta desaparece sola cuando hay imagen.
   ============================================================ */

.media{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--media-radius);
  background-color:var(--media-bg);
  background-size:cover;
  background-position:var(--pos, center);
  box-shadow:var(--lift);
}

/* ── Tratamiento de bordes ────────────────────────────────────────────
   Un rectángulo con un corte neto contra el fondo se lee como "una caja
   con una imagen adentro". Tres capas lo resuelven:
     1. radio de 14 px — suficiente para leerse como decisión, no como error
     2. --lift  una sombra larguísima y casi invisible: la pieza flota
     3. un hilo de 1 px que define el canto sin llegar a dibujar un marco
   ──────────────────────────────────────────────────────────────────── */

.media, .media--video{ box-shadow:var(--lift), var(--edge-dark); }
.media::before, .media::after, .media--video::after{ border-radius:inherit; }

/* Sobre material oscuro el canto se define con luz, no con sombra:
   es el mismo principio que el bisel de una pantalla. */
.media--dark, .media--video,
.cases .media, .tech .media{ box-shadow:var(--lift), var(--edge-light); }

/* el hero ocupa toda la pantalla: no tiene canto que tratar */
.hero__bg{ box-shadow:none; }
.media::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg,
    rgba(var(--ink-rgb),.035) 0 1px, transparent 1px 11px);
}
.media::after{
  content:attr(data-label);
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.2em; color:var(--dark-40); text-align:center;
  padding:20px;
}
.media.has-img::after{ content:none; }

/* Tratamiento de color: baja saturación y una capa oliva encima, para que
   cualquier foto —de banco o propia— entre en la paleta en vez de pelearse
   con ella. Es lo que hace que un sitio se vea de una sola pieza. */
.media.has-img{ filter:saturate(.74) contrast(1.04); }
.media.has-img::before{
  background:linear-gradient(172deg,
    rgba(var(--accent-rgb),.13) 0%, rgba(var(--ink-rgb),.10) 45%, rgba(var(--ink-rgb),.26) 100%);
}
/* .media--raw : sin tratamiento, para fotos que ya vengan graduadas */
.media--raw.has-img{ filter:none; }
.media--raw.has-img::before{ background:none; }
.media--dark{ background-color:#1f2a1d; }
.media--dark::before{
  background:repeating-linear-gradient(45deg,
    rgba(var(--paper-rgb),.04) 0 1px, transparent 1px 11px);
}
.media--dark::after{ color:var(--light-40); }

/* ============================================================
   6 · HERO
   ============================================================ */

.hero{
  position:relative; overflow:hidden;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:flex-end;
  padding-bottom:clamp(44px, 7vh, 92px);
  color:var(--light);
}

.hero__bg{
  position:absolute; inset:0;
  border-radius:0; z-index:0;
  transform:scale(1.06);
  animation:heroDrift 14s var(--expoOut) forwards;
}
/* acá el degradado lo pone .hero__scrim; el tratamiento de color queda */
.hero__bg.has-img::before{ background:none; }
/* un movimiento apenas perceptible: la foto respira mientras se sostiene sola */
@keyframes heroDrift{ to{ transform:scale(1); } }

/* Dos degradados cruzados: uno lateral que da fondo al texto y deja la foto
   respirar a la derecha, otro inferior que ancla el bloque. El texto se lee
   siempre, sin importar qué foto se ponga. */
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to right,
      rgba(var(--scrim-rgb),.90) 0%,
      rgba(var(--scrim-rgb),.74) 30%,
      rgba(var(--scrim-rgb),.34) 58%,
      rgba(var(--scrim-rgb),.06) 82%,
      rgba(var(--scrim-rgb),.02) 100%),
    linear-gradient(to top,
      rgba(var(--scrim-rgb),.60) 0%,
      rgba(var(--scrim-rgb),.10) 42%,
      rgba(var(--scrim-rgb),.00) 62%,
      rgba(var(--scrim-rgb),.30) 100%);
}

/* El velo arranca suave —para que la foto se luzca sola— y termina de bajar
   justo cuando entra el texto. */
.hero__scrim{ opacity:.42; transition:opacity 1.6s var(--expoOut); }
.hero.is-ready .hero__scrim{ opacity:1; }

/* .shell centra el contenedor de 1440; el texto se limita adentro,
   pegado al margen izquierdo. */
.hero__content{ position:relative; z-index:2; }
.hero__content > *{ max-width:min(66%, 880px); }

.hero__title{
  font-family:var(--font-display);
  font-size:clamp(31px, 4.3vw, 63px);
  font-weight:300; line-height:1.06;
  letter-spacing:-.022em;
  max-width:19ch; margin:0 0 clamp(28px,3.4vw,42px);
  text-shadow:0 1px 40px rgba(var(--scrim-rgb),.45);
}

@media (max-width:900px){
  .hero__content > *{ max-width:100%; }
  .hero__scrim{
    background:linear-gradient(to top,
      rgba(var(--scrim-rgb),.92) 0%, rgba(var(--scrim-rgb),.72) 34%,
      rgba(var(--scrim-rgb),.34) 62%, rgba(var(--scrim-rgb),.30) 100%);
  }

  /* En vertical, la foto apaisada se recorta tanto que la persona queda
     fuera de cuadro y sólo se ve fondo. Va un recorte propio, 3:4, con
     ella arriba para que el texto entre debajo sin taparla. */
  .hero__bg{
    background-image:url('../img/mujerdeblanco-vert.webp') !important;
    background-position:center 18% !important;
  }
  .hero{ min-height:92vh; min-height:92svh; }
  .hero__title{ font-size:clamp(30px, 8.2vw, 44px); max-width:16ch; }
}
.hero__title em{ color:var(--lime); }

.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:8px 34px;
  margin:clamp(34px,4.5vw,58px) 0 0;
  padding-top:18px; border-top:1px solid var(--light-20);
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.18em; color:var(--light-40);
}

.hero__cue{
  position:absolute; z-index:2;
  right:var(--gut); bottom:clamp(44px,7vh,92px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.22em; color:var(--light-40);
}
.hero__cue i{
  width:1px; height:46px;
  background:linear-gradient(to bottom, var(--light-40), transparent);
}
@media (max-width:900px){ .hero__cue{ display:none; } }

/* ============================================================
   7 · CASOS
   ============================================================ */

.cases{
  background:var(--overlay); color:var(--light);
  margin-top:clamp(90px,12vw,170px);
  padding:clamp(70px,9vw,120px) 0 clamp(60px,7vw,90px);
}

.cases__stage{ overflow:hidden; }
.cases__track{
  display:flex;
  transition:transform .95s var(--expoInOut);
  will-change:transform;
}

/* ── El caso ocupa toda la platea ─────────────────────────────────────
   La foto va a sangre, de borde a borde. El nombre del paciente se
   sobreimprime, y los datos quedan abajo a la izquierda. Los controles
   viven en una capa aparte, fija sobre el escenario.
   ──────────────────────────────────────────────────────────────────── */

.cases__stage{ position:relative; }

.case{
  position:relative; flex:0 0 100%;
  height:clamp(520px, 80vh, 880px);
  overflow:hidden;
}
.case__media{
  position:absolute; inset:0;
  margin:0;                      /* <figure> trae 40px de margen por defecto */
  background-size:cover; background-position:var(--pos, center);
  filter:saturate(.74) contrast(1.04);
}
.case__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top,
      rgba(var(--scrim-rgb),.94) 0%, rgba(var(--scrim-rgb),.72) 26%,
      rgba(var(--scrim-rgb),.30) 55%, rgba(var(--scrim-rgb),.14) 78%,
      rgba(var(--scrim-rgb),.42) 100%),
    linear-gradient(to right,
      rgba(var(--scrim-rgb),.62) 0%, rgba(var(--scrim-rgb),.20) 46%, rgba(var(--scrim-rgb),0) 78%);
}

.case__inner{
  position:relative; z-index:2; height:100%;
  max-width:var(--shell); margin-inline:auto;
  padding:clamp(70px,10vh,120px) var(--gut) clamp(96px,13vh,150px);
  display:flex; flex-direction:column; justify-content:space-between;
}

.case__title{
  font-family:var(--font-display);
  font-size:clamp(38px,6.4vw,96px);
  font-weight:300; line-height:1; letter-spacing:-.03em;
  margin:0; color:var(--light);
  text-shadow:0 2px 50px rgba(var(--scrim-rgb),.45);
}

.case__block{ max-width:52ch; }

.case__tag{
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.18em; color:var(--lime); margin:0 0 14px;
}
.case__text{
  font-size:15.5px; line-height:1.7;
  color:var(--light-60); max-width:46ch; margin:0 0 26px;
}

.readout{
  display:flex; flex-wrap:wrap; gap:2px 40px;
  padding-top:20px; border-top:1px solid var(--light-10);
}
.readout dt{
  font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.16em; color:var(--light-40); margin-bottom:5px;
}
.readout dd{
  font-family:var(--font-mono); font-size:15px;
  color:var(--lime); margin:0;
}

/* — capa de controles, fija sobre el escenario — */
.cases__ui{
  position:absolute; z-index:3;
  left:0; right:0; bottom:clamp(28px,4.5vh,54px);
  max-width:var(--shell); margin-inline:auto;
  padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.cases__nav{ display:flex; gap:10px; pointer-events:auto; }
.cases__ui .counter{
  position:absolute; right:var(--gut); bottom:14px;
  color:var(--light-60);
}
.cases__ui .round{
  background:rgba(var(--paper-rgb),.10);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-color:var(--light-20);
}
.cases__ui .round:hover{ background:var(--light); color:var(--overlay); }

/* barra de avance: se ve cuánto falta para que cambie solo */
.cases__progress{
  position:absolute; left:var(--gut); bottom:16px;
  width:clamp(90px,14vw,190px); height:1px;
  background:var(--light-20); overflow:hidden;
}
.cases__progress i{
  position:absolute; inset:0; background:var(--lime);
  transform:scaleX(0); transform-origin:left;
}
.cases__progress.is-running i{
  animation:caseFill var(--auto,5s) linear forwards;
}
.cases__progress.is-paused i{ animation-play-state:paused; }
@keyframes caseFill{ to{ transform:scaleX(1); } }
@media (max-width:640px){ .cases__progress{ display:none; } }

@media (max-width:900px){
  .case{ height:auto; min-height:88vh; }
  .case__inner{ padding-top:clamp(48px,8vh,80px); padding-bottom:clamp(104px,15vh,150px); }
  .case__scrim{
    background:linear-gradient(to top,
      rgba(var(--scrim-rgb),.96) 0%, rgba(var(--scrim-rgb),.82) 34%,
      rgba(var(--scrim-rgb),.42) 66%, rgba(var(--scrim-rgb),.40) 100%);
  }
  .cases__ui .counter{ position:static; margin-left:16px; }
  .cases__ui{ justify-content:flex-start; }
}

/* ============================================================
   8 · ÁREAS — la tabla que reemplaza a las tarjetas
   ============================================================ */

.areas{ padding:clamp(90px,12vw,170px) 0; position:relative; }

.table__head{
  display:grid; grid-template-columns:90px 1.15fr 1fr;
  gap:24px; padding-bottom:12px;
  border-bottom:1px dashed var(--dark-20);
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.18em; color:var(--dark-40);
}

.row{
  display:grid; grid-template-columns:90px 1.15fr 1fr;
  gap:24px; align-items:center;
  padding:26px 0; border-bottom:1px solid var(--dark-10);
  transition:padding-left .6s var(--expoOut), opacity .5s var(--expoOut);
}
.row:hover{ padding-left:18px; }
.table:hover .row{ opacity:.35; }
.table:hover .row:hover{ opacity:1; }

.row__id{
  font-family:var(--font-mono); font-size:17px;
  color:var(--dark-40); transition:color .5s var(--expoOut);
}
.row:hover .row__id{ color:var(--olive); }
.row__name{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(19px,2.1vw,28px); line-height:1.15;
  letter-spacing:-.01em;
}
.row__desc{ font-size:14px; color:var(--dark-60); }

.table__preview{
  position:fixed; top:0; left:0; z-index:60;
  width:196px; height:250px;
  pointer-events:none; opacity:0;
  transform:translate(-50%,-50%) scale(.94);
  transition:opacity .5s var(--expoOut), transform .6s var(--expoOut);
  box-shadow:var(--lift), var(--edge-dark);
}
.table__preview.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); }

@media (max-width:820px){
  .table__head{ display:none; }
  .row{ grid-template-columns:56px 1fr; row-gap:8px; }
  .row__desc{ grid-column:2; }
  .table__preview{ display:none; }
}

/* ============================================================
   9 · MÉTODO
   ============================================================ */

.method{ padding:0 0 clamp(90px,12vw,170px); }

.method__grid{
  display:grid; grid-template-columns:.85fr 1fr;
  gap:clamp(28px,5vw,80px); align-items:start;
}
.method__media{ height:clamp(320px,58vh,620px); position:sticky; top:110px; }

/* Video en loop: mismo tratamiento de color que las fotos, para que no se
   note el cambio de material entre una sección y otra. */
.media--video{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--media-radius); background:transparent;
}
.media--video video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.74) contrast(1.04);
}
.media--video::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(172deg,
    rgba(var(--accent-rgb),.13) 0%, rgba(var(--ink-rgb),.10) 45%, rgba(var(--ink-rgb),.26) 100%);
}

.step{ border-top:1px solid var(--dark-10); }
.step:last-child{ border-bottom:1px solid var(--dark-10); }

.step__head{
  width:100%; display:flex; align-items:baseline; gap:20px;
  padding:24px 0; text-align:left;
  transition:padding-left .6s var(--expoOut);
}
.step__head:hover{ padding-left:12px; }
.step__n{
  font-family:var(--font-mono); font-size:12px;
  letter-spacing:.1em; color:var(--dark-40);
  transition:color .5s var(--expoOut);
}
.step.is-open .step__n{ color:var(--olive); }
.step__name{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(22px,2.5vw,34px); letter-spacing:-.01em;
}
.step__name em{ font-style:italic; font-size:.55em; color:var(--dark-40); }

.step__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .65s var(--expoOut);
}
.step.is-open .step__body{ grid-template-rows:1fr; }
.step__body > p{
  overflow:hidden; margin:0;
  max-width:52ch; color:var(--dark-60);
  font-size:15.5px; line-height:1.7;
  opacity:0; transition:opacity .5s var(--expoOut) .1s;
}
.step.is-open .step__body > p{ opacity:1; padding-bottom:26px; }

@media (max-width:900px){
  .method__grid{ grid-template-columns:1fr; }
  .method__media{ position:static; height:260px; }
}

/* ============================================================
   10 · TECNOLOGÍA
   ============================================================ */

.tech{
  background:var(--overlay); color:var(--light);
  padding:clamp(90px,12vw,170px) 0;
}
.tech__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(36px,6vw,100px); align-items:center;
}

.tech__panel{
  border:1px solid var(--light-10); border-radius:var(--media-radius);
  box-shadow:0 40px 70px -46px rgba(0,0,0,.7);
  padding:clamp(22px,3vw,38px);
  background:rgba(var(--paper-rgb),.02);
}
.panel__head{
  display:flex; justify-content:space-between; gap:16px;
  padding-bottom:20px; margin-bottom:8px;
  border-bottom:1px solid var(--light-10);
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.18em; color:var(--light-40);
}
.panel__list li{
  display:flex; align-items:baseline; gap:14px;
  padding:17px 0; border-bottom:1px solid var(--light-10);
  font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.12em; color:var(--light-60);
}
.panel__list i{ flex:1; border-bottom:1px dotted var(--light-20); }
.panel__list b{ font-size:15px; font-weight:400; color:var(--lime); }
.panel__foot{
  font-family:var(--font-mono); font-size:9.5px; line-height:1.8;
  letter-spacing:.06em; color:var(--light-40); margin:22px 0 0;
}

@media (max-width:900px){ .tech__grid{ grid-template-columns:1fr; } }

/* ============================================================
   11 · CTA + FOOTER
   ============================================================ */

.cta{ padding:clamp(100px,14vw,190px) 0; text-align:center; }
.cta .eyebrow, .cta .lead{ margin-inline:auto; }
.cta__title{
  font-family:var(--font-display);
  font-size:clamp(36px,6.6vw,96px);
  font-weight:300; line-height:1.02; letter-spacing:-.03em;
  max-width:16ch; margin:0 auto clamp(28px,4vw,42px);
}
.cta .lead{ text-align:center; }
.cta .hero__actions{ justify-content:center; }

/* ── Cierre: "Hablemos" ───────────────────────────────────────────────
   Comparte fondo con la sección anterior a propósito: no es un bloque
   nuevo, es el silencio después del argumento. Todo el trabajo lo hace
   el aire — por eso el padding inferior es el más grande de la página.
   ──────────────────────────────────────────────────────────────────── */
.talk{
  padding:clamp(30px,4vw,60px) 0 clamp(110px,15vw,200px);
  text-align:center;
}
.talk__dot{
  display:block; width:11px; height:11px; border-radius:50%;
  background:var(--dark); margin:0 auto clamp(26px,4vw,44px);
  animation:talkDot 3.2s ease-in-out infinite;
}
@keyframes talkDot{ 50%{ transform:scale(1.35); opacity:.55; } }
@media (prefers-reduced-motion:reduce){ .talk__dot{ animation:none; } }

.talk__title{
  font-family:var(--font-display);
  font-size:clamp(54px,11vw,150px);
  font-weight:300; line-height:.98; letter-spacing:-.035em;
  margin:0 0 clamp(34px,5vw,56px);
}
/* El ruso y el coreano no toleran el mismo interletrado que una serif
   latina: a -3,5 % los caracteres se tocan. */
html[lang="ru"] .talk__title,
html[lang="ko"] .talk__title,
html[lang="zh-Hant"] .talk__title{ letter-spacing:-.01em; }

.talk__btn{ padding:17px 34px; }

/* ── Dos caminos ──────────────────────────────────────────────────────
   El test gratuito y el WhatsApp dejan de ser dos botones compitiendo
   y pasan a ser dos destinos con peso propio. La tarjeta del test es
   más ancha: sigue siendo la puerta principal.
   ──────────────────────────────────────────────────────────────────── */

.paths{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(16px,2.2vw,30px);
  text-align:left; margin-top:clamp(42px,5vw,70px);
}

.path{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
  min-height:clamp(380px,50vh,520px);
  padding:clamp(28px,3.4vw,48px);
  border-radius:var(--media-radius);
  background:rgba(var(--ink-rgb),.028);
  box-shadow:var(--lift), var(--edge-dark);
}

.path__n{
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.2em; color:var(--dark-40);
  margin:0 0 auto;                 /* empuja el resto hacia abajo */
}
.path__t{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(25px,2.7vw,40px); line-height:1.08;
  letter-spacing:-.02em; margin:0 0 14px;
}
.path__d{
  font-size:15px; line-height:1.65; color:var(--dark-60);
  max-width:36ch; margin:0 0 28px;
}

/* — las tarjetas con video de fondo — */
.path--dark{ padding:0; background:var(--overlay); color:var(--light); box-shadow:var(--lift), var(--edge-light); }
.path__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:saturate(.74) contrast(1.04);
}
.path__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(var(--scrim-rgb),.94) 0%, rgba(var(--scrim-rgb),.72) 38%,
    rgba(var(--scrim-rgb),.34) 68%, rgba(var(--scrim-rgb),.18) 100%);
}
.path__body{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start;
  height:100%; padding:clamp(28px,3.4vw,48px);
}
.path--dark .path__n{ color:var(--light-40); }
.path--dark .path__d{ color:var(--light-60); }

/* El logo animado viene sobre negro puro: se muestra entero en la mitad
   superior en vez de recortarlo, y la tarjeta se pinta del mismo negro
   para que no se vea el empalme. */
/* El logo no se puede recortar sin cortarle el nombre a la marca. En vez
   de ponerlo de fondo y pelear con el texto, va en el flujo: una banda
   arriba, el texto debajo. Así no se pisan por más que la tarjeta cambie
   de alto. Como el video es negro y la tarjeta también, no se ve el corte. */
.path--logo{ background:#000; display:flex; flex-direction:column; }
.path--logo .path__video{
  position:relative; inset:auto;
  width:100%; height:clamp(128px, 21vh, 196px);
  object-fit:contain; flex:none;
  padding-top:clamp(18px,2vw,28px);
}
.path--logo .path__scrim{ display:none; }
.path--logo .path__body{ flex:1; padding-top:clamp(18px,2vw,26px); }

@media (max-width:820px){
  .paths{ grid-template-columns:1fr; }
  .path{ min-height:340px; }
}

.foot{
  background:var(--overlay); color:var(--light);
  padding:clamp(60px,8vw,100px) 0 30px;
}
.foot__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(50px,7vw,90px);
}
.foot__logo{
  width:clamp(150px,15vw,210px); height:auto; margin-bottom:26px;
  /* mismo latido que el botón del test */
  animation:btnBreathe 3.2s ease-in-out infinite;
  will-change:transform, filter;
}
/* en el logo el resplandor va por filtro, no por sombra de caja: el PNG
   tiene fondo transparente y una box-shadow dibujaría un rectángulo */
@keyframes logoBreathe{
  0%,100%{ transform:scale(1); filter:drop-shadow(0 0 0 rgba(var(--accent-rgb),0)); }
  50%{ transform:scale(1.035);
       filter:drop-shadow(0 0 18px rgba(var(--accent-rgb),.55))
              drop-shadow(0 0 40px rgba(var(--paper-rgb),.16)); }
}
.foot__logo{ animation-name:logoBreathe; }
@media (prefers-reduced-motion:reduce){ .foot__logo{ animation:none; } }

/* — redes — */
.social{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.foot__col .social a{
  display:grid; place-items:center; padding:0;
  width:44px; height:44px; border-radius:50%;
  color:var(--sand);
  background:rgba(var(--paper-rgb),.06);
  border:1px solid rgba(var(--paper-rgb),.18);
  transition:color .4s var(--expoOut), border-color .4s var(--expoOut),
             background .4s var(--expoOut), transform .4s var(--expoOut);
}
.foot__col .social a:hover{
  color:var(--overlay); background:var(--sand);
  border-color:var(--sand); transform:translateY(-2px);
}
.social svg{ width:21px; height:21px; }
.foot__coord, .foot__h, .foot__hours{
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.16em; color:var(--light-40);
}
.foot__coord{ margin:0 0 16px; }
.foot__h{ margin:0 0 20px; color:var(--sand); }
.foot__addr{ font-size:14px; color:var(--light-60); margin:0; line-height:1.7; }
.foot__hours{ margin:20px 0 0; line-height:1.9; }
.foot__col a{
  display:block; font-size:14px; color:var(--light-60);
  padding:6px 0; transition:color .4s var(--expoOut);
}
.foot__col a:hover{ color:var(--light); }

.foot__bar{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid var(--light-10);
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.16em; color:var(--light-40);
}

@media (max-width:820px){ .foot__grid{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   12 · REVELADOS
   ============================================================ */

.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .9s var(--expoOut), transform .9s var(--expoOut);
  transition-delay:calc(var(--d,0) * 70ms);
}

.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > span{
  display:inline-block; transform:translateY(105%);
  transition:transform 1s var(--expoOut);
  transition-delay:calc(var(--i,0) * 42ms + var(--d,0) * 70ms);
}
.split.is-in .word > span{ transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .word > span{ transform:none; }
  .cursor{ display:none; }
}


/* ── Ajustes finos por paleta ─────────────────────────────────────────
   El salvia es un verde desaturado: sobre él, texto claro queda por
   debajo del contraste recomendado. Los botones sólidos pasan a champán
   con tinta grafito, que además es el gesto de lujo que pide la paleta.
   ──────────────────────────────────────────────────────────────────── */

html[data-theme="salvia"] .btn--solid:hover,
html[data-theme="noche"]  .btn--solid:hover{
  background:var(--sand); border-color:var(--sand); color:var(--overlay);
}
html[data-theme="salvia"] .btn--fill:hover,
html[data-theme="noche"]  .btn--fill:hover{
  background:var(--sand); border-color:var(--sand); color:var(--overlay);
}

/* En noche, el fondo ya es oscuro: la sombra larga no se ve y en su
   lugar el canto de luz hace todo el trabajo. */
html[data-theme="noche"]{
  --lift: 0 40px 70px -44px rgba(0,0,0,.75), 0 8px 20px -14px rgba(0,0,0,.5);
}
html[data-theme="noche"] .media,
html[data-theme="noche"] .media--video,
html[data-theme="noche"] .path{ box-shadow:var(--lift), var(--edge-light); }

/* El grano se ve distinto sobre fondo oscuro */
html[data-theme="noche"] body::after{ opacity:.035; }