/* ============================================================
   Nutrición Activa — base de craft compartida
   Tokens de movimiento, superficies del navegador, estados
   de interacción y sistema de reveals. Cargado por todas las
   páginas; no redefine color, tipografía ni layout de marca.
   ============================================================ */

:root{
  /* ---- curvas: las nativas de CSS no tienen carácter suficiente ---- */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  /* ---- duraciones por consecuencia, no por gusto ---- */
  --t-press:150ms;   /* feedback inmediato */
  --t-state:200ms;   /* cambio de estado rutinario */
  --t-move:320ms;    /* desplazamiento / capa */
  --t-enter:560ms;   /* entrada deliberada al viewport */
  /* ---- ritmo vertical unificado entre secciones ---- */
  --gap-section:clamp(64px,7vw,104px);
  --header-h:72px;

  /* ============================================================
     Escala móvil
     Un solo juego de medidas para todo el sitio, para que el
     margen lateral y el ritmo vertical sean los mismos en la
     portada, en las categorías y en los legales.

     Puntos de corte (los únicos que debe usar el trabajo nuevo):
       ≤1024  tableta
       ≤700   compacto  (tableta pequeña / teléfono apaisado)
       ≤560   teléfono
       ≤380   teléfono estrecho (320–375)
     ============================================================ */
  --pad-x:clamp(20px,5.2vw,28px);  /* margen lateral del contenido */
  --tap:48px;                      /* alto mínimo de algo que se toca */
  --stack:clamp(14px,3.4vw,18px);  /* separación entre piezas apiladas */
}
@media (max-width:560px){
  :root{--gap-section:clamp(52px,11vw,68px)}
}

/* ---- superficies que dibuja el navegador, no el diseño ---- */
::selection{background:var(--jade-light);color:var(--jade-dark)}
html{scrollbar-color:var(--line) transparent;caret-color:var(--jade);scroll-padding-top:calc(var(--header-h) + 16px);
  /* iOS infla el texto al girar el teléfono si no se le dice que no */
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html:not(.lenis){scroll-behavior:smooth}}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#C9C0AE;background-clip:content-box}
a{text-underline-offset:.17em;text-decoration-thickness:.075em}

/* ---- foco visible, teñido desde la paleta y no desde el navegador ---- */
:focus-visible{outline:2.5px solid var(--jade);outline-offset:3px;border-radius:5px}
.s-ingredientes :focus-visible,.s-trust :focus-visible,.s-footer :focus-visible,
.s-infantil :focus-visible,.s-cualesparami .half.right :focus-visible,
.s-hero .topbar :focus-visible,.foot :focus-visible,.topbar :focus-visible,
.site-header :focus-visible,.site-menu :focus-visible{outline-color:var(--jade-light)}

/* ---- todo lo presionable responde al dedo o al clic ---- */
.press,
.s-hero .cta,.s-hero .pill-link,.s-hero .icon-btn,
.s-categorias .arrow-btn,.s-cualesparami .go,.s-sinazucar .prod-cta,
.s-pruebasocial .social a,.s-infantil .ctas a,.s-trust a.card,
.s-faq .q,.s-footer .logo,.s-comparador .hint,
.site-header .sh-logo,.site-header .sh-wa,.site-header .sh-menu,.site-menu a,
.topbar .back,.card .buy a,.foot a.wa,.otras a,.go-wa,.lb-close,.lb-nav{
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-press) var(--ease-out),
             background-color var(--t-state) ease,
             color var(--t-state) ease,
             box-shadow var(--t-state) ease,
             border-color var(--t-state) ease;
}
.press:active,
.s-hero .cta:active,.s-hero .pill-link:active,.s-hero .icon-btn:active,
.s-categorias .arrow-btn:active,.s-cualesparami .go:active,.s-sinazucar .prod-cta:active,
.s-pruebasocial .social a:active,.s-infantil .ctas a:active,.s-trust a.card:active,
.s-faq .q:active,.s-footer .logo:active,.s-comparador .hint:active,
.site-header .sh-logo:active,.site-header .sh-wa:active,.site-header .sh-menu:active,.site-menu a:active,
.topbar .back:active,.card .buy a:active,.foot a.wa:active,.otras a:active,.go-wa:active,
.lb-close:active,.lb-nav:active{transform:scale(.97)}

/* los botones con sombra sólida hunden la sombra al presionarse:
   la pieza baja hacia su propia sombra en vez de encogerse en el aire */
.s-hero .cta:active{transform:translateY(4px) scale(.985);box-shadow:0 4px 0 var(--shadow)}
.s-hero .pill-link:active,.s-hero .icon-btn:active{transform:translateY(3px) scale(.985);box-shadow:0 3px 0 var(--shadow)}
.s-footer .logo:active{transform:translateY(3px);box-shadow:0 2px 0 var(--shadow)}

/* ============================================================
   Sistema de reveals
   Vocabulario corto y con intención: cada tipo dice algo
   distinto sobre el elemento que entra. Sin JS todo queda
   visible; la clase .rv de <html> es la que arma los estados.
   ============================================================ */
.rv [data-rv]{will-change:opacity,transform}
.rv [data-rv]:not(.rv-in){opacity:0}
.rv [data-rv].rv-in{opacity:1}
.rv [data-rv]{
  transition:opacity var(--t-enter) var(--ease-out),
             transform var(--t-enter) var(--ease-out),
             clip-path var(--t-enter) var(--ease-out),
             filter var(--t-enter) var(--ease-out);
  transition-delay:calc(var(--rv-i,0) * 60ms);
}
/* sube: titulares y bloques de texto */
.rv [data-rv="rise"]:not(.rv-in){transform:translate3d(0,18px,0)}
/* asienta: tarjetas y paneles que aterrizan en su sitio */
.rv [data-rv="settle"]:not(.rv-in){transform:scale(.965) translate3d(0,10px,0)}
/* revela: imagen que se descubre en vez de aparecer */
.rv [data-rv="clip"]{clip-path:inset(0 0 0 0)}
.rv [data-rv="clip"]:not(.rv-in){clip-path:inset(0 0 100% 0);opacity:1;transform:none}
/* entra de lado: mitades de una composición partida */
.rv [data-rv="wipe-l"]:not(.rv-in){transform:translate3d(-32px,0,0)}
.rv [data-rv="wipe-r"]:not(.rv-in){transform:translate3d(32px,0,0)}
/* enfoca: dato que llega desenfocado y se resuelve */
.rv [data-rv="focus"]:not(.rv-in){transform:scale(.94);filter:blur(6px)}
.rv [data-rv].rv-in{transform:none;filter:none;clip-path:inset(0 0 0 0)}
.rv [data-rv].rv-in{will-change:auto}

@media (prefers-reduced-motion:reduce){
  .rv [data-rv],.rv [data-rv]:not(.rv-in){
    transform:none!important;filter:none!important;clip-path:none!important;
    transition:opacity 240ms ease!important;transition-delay:0ms!important;
  }
  .press,.press:active,
  .s-hero .cta:active,.s-hero .pill-link:active,.s-hero .icon-btn:active{transform:none!important}
  *{scroll-behavior:auto!important}
}

/* ---- hover sólo donde hay puntero fino: en táctil da falsos positivos ---- */
@media (hover:hover) and (pointer:fine){
  .hoverable{transition:transform var(--t-state) var(--ease-out),box-shadow var(--t-state) ease}
}

/* ============================================================
   Lightbox de reseñas
   Escala desde 0.96, nunca desde 0: nada en el mundo real
   aparece de la nada.
   ============================================================ */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px)}
.lightbox[hidden]{display:none}
.lb-veil{position:absolute;inset:0;background:rgba(10,12,15,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity var(--t-move) var(--ease-out)}
.lightbox.is-open .lb-veil{opacity:1}
.lb-frame{position:relative;margin:0;max-width:min(560px,92vw);max-height:100%;display:flex;flex-direction:column;gap:14px;
  opacity:0;transform:scale(.96) translateY(10px);transition:opacity var(--t-move) var(--ease-out),transform var(--t-move) var(--ease-out)}
.lightbox.is-open .lb-frame{opacity:1;transform:none}
.lb-frame img{width:100%;height:auto;max-height:82vh;object-fit:contain;border-radius:14px;background:var(--paper);
  box-shadow:0 24px 60px -12px rgba(0,0,0,.55),0 6px 18px -6px rgba(0,0,0,.4)}
/* en el móvil la barra del navegador entra y sale: 82vh mide la ventana
   grande y recorta la reseña por abajo. dvh mide la de verdad. */
@supports (height:100dvh){.lb-frame img{max-height:76dvh}}
.lb-cap{font-family:Figtree,system-ui,sans-serif;font-size:13.5px;line-height:1.5;color:var(--tile-muted);text-align:center;max-width:46ch;margin:0 auto}
.lb-close,.lb-nav{position:absolute;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  background:rgba(245,243,239,.14);color:var(--tile-text);border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lb-close{top:clamp(12px,2.5vw,26px);right:clamp(12px,2.5vw,26px);width:46px;height:46px}
.lb-nav{top:50%;margin-top:-24px;width:48px;height:48px}
.lb-nav.prev{left:clamp(6px,2vw,26px)}
.lb-nav.next{right:clamp(6px,2vw,26px)}
.lb-close svg,.lb-nav svg{width:22px;height:22px}
@media (hover:hover) and (pointer:fine){
  .lb-close:hover,.lb-nav:hover{background:rgba(245,243,239,.26)}
}
@media (max-width:560px){.lb-nav{width:42px;height:42px;margin-top:-21px}.lb-nav svg{width:19px;height:19px}}
/* ============================================================
   Motor de scroll (Lenis) — assets/scroll.js
   Sólo lo imprescindible de la librería: la clase .lenis la pone
   el propio motor, así que sin JS nada de esto se aplica y el
   scroll sigue siendo el nativo.
   ============================================================ */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ============================================================
   Crédito de autoría — "Hecho por Blixtor"
   Va debajo de los dos pies del sitio (.s-footer en index e
   infantil, .foot en categorías y legales). Los dos van sobre
   --ink, así que la franja comparte fondo y comparte estilo.
   El selector lleva .blixtor porque craft.css carga ANTES del
   <style> de cada página, y ahí `.s-footer a` pintaría el
   enlace de --paper con el mismo peso que `.made-by a`.
   ============================================================ */
.made-by{background:var(--ink);border-top:1px solid var(--line-dark);
  padding:22px 24px 28px;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:14px;font-family:Figtree,system-ui,sans-serif}
.made-by .by{font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tile-muted)}
.made-by a.blixtor{position:relative;display:inline-flex;align-items:center;gap:7px;
  padding-bottom:7px;font-size:15px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--jade-light);text-decoration:none}
.made-by a.blixtor::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.45;transition:opacity .28s ease}
.made-by a.blixtor svg{width:11px;height:11px;flex:none;
  transition:transform .28s cubic-bezier(.22,1,.36,1)}
@media (hover:hover) and (pointer:fine){
  .made-by a.blixtor:hover{color:var(--jade-light)}
  .made-by a.blixtor:hover::after{opacity:1}
  .made-by a.blixtor:hover svg{transform:translate3d(2px,-2px,0)}
}
.made-by a.blixtor:focus-visible{outline:2px solid var(--jade-light);outline-offset:5px;border-radius:2px}
@media (max-width:560px){
  .made-by{gap:9px;padding:18px 20px 24px}
  .made-by .by{letter-spacing:.16em}
  /* 24 px de alto para un enlace externo: el subrayado sigue donde estaba,
     la zona que responde al dedo crece por debajo */
  .made-by a.blixtor{font-size:14px;padding-top:9px;padding-bottom:16px;margin-bottom:-9px}
}
/* Texto sólo para lectores de pantalla (el proyecto no lo tenía). */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   Botón "Regresar" flotante
   Vivía duplicado, palabra por palabra, en el <style> en línea de
   las diez páginas interiores. Aquí se define una vez.

   En el móvil se retira: se montaba sobre la barra superior y,
   al bajar, sobre el propio texto de la página. Cada una de esas
   diez páginas conserva dos caminos de vuelta que sí caben en la
   pantalla — el logotipo de la barra y las migas de pan — más el
   gesto de retroceso del sistema.
   ============================================================ */
.btn-regresar{
  position:fixed; z-index:9999;
  top:calc(14px + env(safe-area-inset-top,0px));
  left:calc(14px + env(safe-area-inset-left,0px));
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper); color:var(--ink);
  border:1px solid rgba(20,22,26,.10);
  box-shadow:0 6px 18px rgba(20,22,26,.22);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background var(--t-state) ease, color var(--t-state) ease,
             transform var(--t-press) var(--ease-out), box-shadow var(--t-state) ease;
}
.btn-regresar svg{width:21px;height:21px;display:block}
@media (hover:hover) and (pointer:fine){
  .btn-regresar:hover{background:var(--flame);color:#FFFFFF;transform:translateX(-2px);
    box-shadow:0 8px 22px rgba(232,93,42,.34);border-color:transparent}
}
.btn-regresar:active{transform:translateX(-2px) scale(.94)}
.btn-regresar:focus-visible{outline:3px solid var(--jade-light);outline-offset:3px}
/* deja aire para que la flecha no tape el logo de la barra superior */
@media (max-width:1345px){ .nav .wrap{padding-left:74px} }
@media (max-width:1215px){ .topbar .wrap{padding-left:74px} }
@media (max-width:700px){
  .btn-regresar{display:none}
  .topbar .wrap,.nav .wrap{padding-left:var(--pad-x)}
}