/* Extraído de salud-01-home.html por herramientas/extraer.js. NO EDITAR: se regenera. */

/* Neue Montreal — self-hosted (títulos del hero) */
@font-face { font-family:"Neue Montreal"; src:url("../fonts/NeueMontreal-Regular.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Neue Montreal"; src:url("../fonts/NeueMontreal-Medium.woff") format("woff"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Neue Montreal"; src:url("../fonts/NeueMontreal-Bold.woff") format("woff"); font-weight:700; font-style:normal; font-display:swap; }

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; background:#EAECEE; }
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; background:none; border:0; cursor:pointer; }
/* Lenis (smooth scroll) */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* Tokens salud-01 (paleta oficial Sumimedic) */
.t-salud01{
  --azul-fuerte:#35398E; --azul-navy:#2A2D6E; --azul-medio:#4763B5; --azul-claro:#36A9E1; --verde:#70B62C;
  --paper:#FAFCFC; --gris-claro:#DFE7E8; --gris-medio:#A1A5A4; --ink:#1A2230;
  --hero-headline:#FAFCFC; --cta-bg:#FAFCFC; --cta-text:var(--azul-fuerte); --bar-bg:var(--azul-fuerte); --bar-text:#FAFCFC;
  --pad-x:40px; --header-h:112px; --bar-h:26px; --maxw:3000px; --menu-w:min(480px,86vw);
  --font-ui:'Nunito Sans', system-ui, -apple-system, sans-serif;
  background:#EAECEE;
}

/* Hero */
.s01-hero{ position:relative; width:100%; height:100vh; min-height:720px; overflow:hidden; background:var(--ink); font-family:var(--font-ui); color:var(--paper); letter-spacing:-.02em; --edge:max(var(--pad-x), calc((100% - var(--maxw)) / 2)); }
/* Barra de anuncios — medida de `.marquee-css.is-v1` de la referencia: 26px de alto, sin botón,
   mono 9.8/1.96 uppercase, items a 70px, dos listas duplicadas en translateX lineal infinito. */
.s01-bar{ position:relative; height:var(--bar-h); display:flex; align-items:center; background:var(--bar-bg); color:var(--bar-text); overflow:hidden; transition:height .3s ease; }
.s01-bar-list{ flex:none; display:flex; align-items:center; padding-right:70px; gap:70px; animation:s01marquee var(--marquee-dur, 64s) linear infinite; will-change:transform; }
.s01-bar-item{ flex:none; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.8px; line-height:9.8px; letter-spacing:1.96px; text-transform:uppercase; white-space:nowrap; }
@keyframes s01marquee{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }
.s01-bar:hover .s01-bar-list{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .s01-bar-list{ animation:none; } }
/* Header sticky (patrón Function): overlay transparente sobre el hero → se pinta al hacer scroll */
.s01-siteheader{ position:sticky; top:0; z-index:20; margin-bottom:calc(-1 * (var(--bar-h) + var(--header-h))); padding:0; font-family:var(--font-ui); letter-spacing:-.02em; --edge:max(var(--pad-x), calc((100vw - var(--maxw)) / 2)); transition:padding .6s cubic-bezier(.22,1,.36,1); }
/* Al scrollear, el padding del header inset-ea el nav → se angosta de forma transicional */
.s01-siteheader.paint{ padding:12px max(0px, calc((100% - 1180px) / 2)) 0; }
.s01-siteheader.paint .s01-bar{ height:0; }
/* Al hacer scroll: barra flotante, más angosta, con blur oscuro (estilo goodlifemeds) */
.s01-siteheader.paint .s01-nav{ height:auto; padding:7px 18px; border-radius:6px; background:rgba(3,3,3,0.72); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); box-shadow:none; }
.s01-siteheader.paint .s01-logo-img{ height:22px; }
.s01-siteheader.paint .s01-cta{ background:#fff; color:var(--azul-fuerte); }
/* R2 · Mega adaptado al blur del header scrolleado: panel oscuro translúcido, centrado a la barra */
/* El header sí se vuelve una cápsula oscura al hacer scroll, pero el mega NO le sigue: es una
   superficie de contenido con 26 entradas y sus recuentos, y sobre negro translúcido con blur
   se lee peor y el panel entero cambia de identidad a mitad de navegación. Se queda claro
   siempre; lo que hereda del estado "paint" es la forma (cápsula redondeada), no el color. */
.s01-siteheader.paint .s01-mega{ background:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none; border-radius:0 0 6px 6px; box-shadow:0 30px 60px rgba(15,22,32,.16); padding:30px 0 36px; }
.s01-siteheader.paint .s01-mega-cols{ padding:0 26px; }
.s01-siteheader.paint.mega-open .s01-nav{ border-radius:6px 6px 0 0; }
.s01-bar a{ color:inherit; text-decoration:underline; text-underline-offset:3px; font-weight:600; }
/* Grilla 1fr auto 1fr: los enlaces quedan centrados respecto a la BARRA, no al espacio sobrante.
   Con flex + margin:auto el logo y las acciones (anchos distintos) los desplazaban del eje. */
.s01-nav{ position:relative; height:var(--header-h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:32px; padding:0 var(--edge); transition:all .6s cubic-bezier(.22,1,.36,1); }
.s01-logo{ display:flex; align-items:center; text-decoration:none; justify-self:start; }
.s01-logo-img{ height:34px; width:auto; display:block; transition:height .6s cubic-bezier(.22,1,.36,1), filter .2s ease; }
.s01-links{ display:flex; align-items:center; gap:28px; margin:0; justify-self:center; }
.s01-links>a,.s01-navitem>a{ position:relative; color:var(--paper); text-decoration:none; font-size:16px; display:inline-flex; align-items:center; gap:6px; }
.s01-links a span{ position:relative; display:inline-block; }
.s01-links>a span::after,.s01-navitem>a span::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .32s cubic-bezier(.22,1,.36,1); }
.s01-links>a:hover span::after,.s01-navitem>a:hover span::after,.s01-navitem:hover>a span::after{ transform:scaleX(1); }
.s01-caret{ width:6px; height:6px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-1px); transition:transform .25s ease; margin-left:2px; }
.s01-navitem:hover .s01-caret{ transform:rotate(225deg) translateY(-1px); }
.s01-navitem{ position:relative; align-self:stretch; display:flex; align-items:center; }
/* Mega corporativo full-width (estilo functionhealth.com): banda pegada bajo el header */
/* Mega: hermano del nav (no hijo) → su blur ve el fondo real y hereda el ancho de la barra */
.s01-megawrap{ position:relative; z-index:3; }
.s01-mega{ position:absolute; top:0; left:0; right:0; color:var(--ink); background:var(--paper); box-shadow:0 30px 60px rgba(15,22,32,.10); padding:40px 0 48px; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px); transition:opacity .22s ease, transform .3s cubic-bezier(.22,1,.36,1); letter-spacing:-.02em; }
.s01-mega.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
/* 4 columnas FLUIDAS, no 3 de 240px fijos. Con el ancho fijo, a 1920 las columnas acababan en
   x=872 y quedaban 1048px de panel vacío a la derecha: el menú parecía a medio cargar. El
   contenido se acota además a 1360 (la misma retícula del sitio) y se centra, para que en
   pantallas anchas no se estire indefinidamente y siga alineado con el resto de la página. */
.s01-mega-cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px 48px;
  max-width:1360px; margin:0 auto; padding:0 var(--edge); }
@media (max-width:1024px){ .s01-mega-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.s01-mega-col{ display:flex; flex-direction:column; gap:3px; }
/* ── Mega menú en dos niveles ───────────────────────────────────────────────────────────────
   Con 14 raíces y 87 subcategorías, el panel de columnas medía más que la ventana y abajo se
   cortaba — peor cuanto más pequeña la pantalla. Ahora la altura NO depende de cuántas
   categorías haya: el riel de la izquierda las lista, y a la derecha se pinta solo la que
   señalas. El tope es de ventana, y cada mitad hace su propio scroll si hace falta. */
.s01-mega2{ display:grid; grid-template-columns:minmax(230px,268px) minmax(0,1fr);
  /* La fila tiene que ser `minmax(0,1fr)` y el alto DEFINIDO, no un máximo: con solo
     `max-height` la fila se dimensiona por su contenido, los hijos nunca reciben una altura
     que respetar y el `overflow:auto` no recorta nada. */
  grid-template-rows:minmax(0,1fr); gap:0;
  max-width:1360px; margin:0 auto; padding:0 var(--edge);
  height:min(62vh,540px); overflow:hidden; }
.s01-mega-rail{ display:flex; flex-direction:column; gap:1px; padding:2px 20px 2px 0;
  border-right:1px solid #EEF1F4; overflow-y:auto; overscroll-behavior:contain;
  /* min-height:0 — sin esto un hijo de grid NO encoge por debajo de su contenido, el
     overflow no recorta nada y el riel se derrama fuera del panel. Es el defecto recurrente
     del proyecto: ocho apariciones, ocho síntomas distintos. */
  min-height:0; }
.s01-mega-r,.s01-mega-todo{ display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font:inherit; color:#35414F; text-decoration:none; font-size:14.5px; font-weight:500;
  padding:8px 12px; border-radius:4px; transition:background .14s ease, color .14s ease; }
.s01-mega-r:hover,.s01-mega-todo:hover{ background:#F1F4FB; color:var(--azul-fuerte); }
.s01-mega-r.is-on{ background:#F1F4FB; color:var(--azul-fuerte); font-weight:600; }
.s01-mega-todo{ margin-top:8px; padding-top:14px; border-top:1px solid #EEF1F4;
  border-radius:0; color:var(--azul-fuerte); font-weight:600; }
.s01-mega-panes{ padding:2px 0 2px 32px; overflow-y:auto; overscroll-behavior:contain;
  min-height:0; }
.s01-mega-pane{ display:none; }
.s01-mega-pane.is-on{ display:block; }
.s01-mega-ph{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-family:var(--font-ui); font-size:12.5px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--azul-fuerte); font-weight:700; text-decoration:none;
  padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid #EEF1F4; }
.s01-mega-ph:hover{ opacity:.66; }
/* Las subcategorías reparten en columnas: la más poblada tiene 13 y en una sola columna
   volvería a estirar el panel. `min-width:0` porque son hijas de grid y algunas son largas. */
.s01-mega-subs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px;
  align-content:start; }
.s01-mega-subs a{ min-width:0; display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; color:#35414F; text-decoration:none; font-size:14.5px; font-weight:500;
  padding:7px 0; border-bottom:1px solid #EEF1F4;
  transition:color .16s ease, padding-left .16s ease; }
.s01-mega-subs a:hover{ color:var(--azul-fuerte); padding-left:5px; }
.s01-mega-subs .s01-mega-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:1024px){
  .s01-mega2{ grid-template-columns:1fr; max-height:min(56vh,440px); }
  .s01-mega-rail{ border-right:0; border-bottom:1px solid #EEF1F4; padding:0 0 10px; }
  .s01-mega-panes{ padding:14px 0 0; }
  .s01-mega-subs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Pie del panel: la salida al catálogo completo. Va FUERA de .s01-mega-cols, así que necesita
   su propia retícula — sin esto salía pegado al borde de la ventana y con los dos textos
   corridos (la trampa de siempre: clase nueva sin CSS propio). */
.s01-mega-pie{ max-width:1360px; margin:26px auto 0; padding:16px var(--edge) 0;
  border-top:1px solid #EEF1F4; }
.s01-mega-pie a{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  color:var(--azul-fuerte); text-decoration:none; font-size:14px; font-weight:600;
  letter-spacing:-.01em; transition:opacity .16s ease; }
.s01-mega-pie a:hover{ opacity:.62; }
.s01-mega-pie .s01-mega-n{ font-weight:400; text-transform:none; letter-spacing:0; }
/* El enlace de "ver las restantes" es una salida, no una subcategoría: se distingue. */
.s01-mega-mas .s01-mega-t{ color:var(--azul-fuerte); font-weight:600; }
.s01-mega-h{ font-family:var(--font-ui); font-size:13px; letter-spacing:.02em; text-transform:uppercase; color:var(--azul-fuerte); font-weight:700; margin-bottom:12px; }
.s01-mega-col a{ position:relative; color:#35414F; text-decoration:none; font-size:15px; font-weight:500; padding:8px 0; border-bottom:1px solid #EEF1F4; transition:color .16s ease, padding-left .16s ease; }
.s01-mega-col a:last-child{ border-bottom:0; }
.s01-mega-col a:hover{ color:var(--azul-fuerte); padding-left:6px; }
.s01-mega-brands{ padding:0 var(--edge); }
.s01-mega-brand-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; gap:40px; }
.s01-mega-all{ font-size:13px; font-weight:600; color:var(--azul-fuerte); text-decoration:none; }
.s01-mega-all:hover{ text-decoration:underline; text-underline-offset:3px; }
.s01-brand-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; max-width:960px; }
.s01-brand-chip{ display:flex; align-items:center; justify-content:center; padding:14px 10px; border:1px solid #E4E9EE; border-radius:10px; color:#35414F; text-decoration:none; font-size:15px; font-weight:600; transition:border-color .16s ease, color .16s ease, background .16s ease; }
.s01-brand-chip:hover{ border-color:var(--azul-fuerte); color:var(--azul-fuerte); background:#F2F6FC; }
/* El header se PINTA al abrir cualquier mega (más corporativo, como Function) */
/* El fondo claro del header dependía SOLO del :hover sobre el enlace. Al mover el ratón hacia
   el panel para elegir una subcategoría, ese hover se perdía y el header se quedaba
   transparente sobre el hero mientras el mega seguía abierto y blanco: el menú se partía en
   dos justo al empezar a usarlo. El estado real es "hay un mega abierto", y el JS ya lo marca
   con .mega-open — solo faltaba que el CSS lo escuchara. */
.s01-siteheader:not(.paint) .s01-nav:has(.s01-navitem:hover), .s01-siteheader.mega-open:not(.paint) .s01-nav{ background:var(--paper); box-shadow:inset 0 -1px 0 rgba(26,34,48,.08); }
/* La taxonomía real tiene 6 raíces con hijos, así que el encabezado de grupo (que ya
   estaba escrito y estilado, pero oculto) vuelve a verse: ahora es el enlace a la
   categoría raíz y cada fila lleva su recuento real a la derecha. Los recuentos son
   el activo de esta entrega —"Material de Curación 49" es una promesa comprobable—,
   así que se enseñan en los dos niveles. */
.s01-mega-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.s01-mega-group{ display:flex; flex-direction:column; gap:3px; }
.s01-mega-group + .s01-mega-group{ margin-top:26px; }
.s01-mega-col a{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
/* min-width:0 — el nombre es hijo de un flex y "Antiséptico, Desinfectate y Esterilizante"
   no cabe en una línea: sin esto no encoge, no parte y desborda la columna. */
.s01-mega-t{ min-width:0; }
.s01-mega-n{ flex:none; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:10px; letter-spacing:.02em; color:var(--gris-medio); }
/* Sube por encima de ".s01-mega-col a", que si no le impone tamaño, color y filete. */
.s01-mega-col a.s01-mega-h{ padding:0; border-bottom:0; font-size:13px; font-weight:700; color:var(--azul-fuerte); }
.s01-mega-col a.s01-mega-h:hover{ padding-left:0; text-decoration:underline; text-underline-offset:4px; }
.s01-mega-col a.s01-mega-h .s01-mega-n{ color:var(--azul-claro); }
.s01-siteheader:not(.paint) .s01-nav:has(.s01-navitem:hover) .s01-links > a, .s01-siteheader:not(.paint) .s01-nav:has(.s01-navitem:hover) .s01-navitem > a, .s01-siteheader.mega-open:not(.paint) .s01-nav .s01-links > a, .s01-siteheader.mega-open:not(.paint) .s01-nav .s01-navitem > a{ color:var(--ink); }
.s01-siteheader:not(.paint) .s01-nav:has(.s01-navitem:hover) .s01-icon, .s01-siteheader.mega-open:not(.paint) .s01-nav .s01-icon{ color:var(--ink); }
.s01-siteheader:not(.paint) .s01-nav:has(.s01-navitem:hover) .s01-logo-img, .s01-siteheader.mega-open:not(.paint) .s01-nav .s01-logo-img{ filter:brightness(0); }
.s01-siteheader:not(.paint) .s01-nav:has(.s01-navitem:hover) .s01-cta, .s01-siteheader.mega-open:not(.paint) .s01-nav .s01-cta{ background:var(--azul-fuerte); color:#fff; }
.s01-actions{ display:flex; align-items:center; gap:18px; justify-self:end; }
.s01-login{ color:var(--paper); text-decoration:none; font-size:16px; font-weight:600; }
.s01-cta{ background:var(--cta-bg); color:var(--cta-text); font-size:16px; font-weight:700; text-decoration:none; padding:13px 22px; border-radius:999px; white-space:nowrap; transition:background .22s ease, color .22s ease, box-shadow .22s ease; }
.s01-cta:hover{ background:var(--azul-fuerte); color:#fff; }
.s01-icon{ background:transparent; border:0; color:var(--paper); cursor:pointer; line-height:0; padding:4px; display:inline-flex; opacity:.92; }
.s01-icon:hover{ opacity:1; }
.s01-hammenu{ position:relative; display:inline-flex; }
/* Menú "underlay" (mecánica medida de kommakomma.is, adaptada a Sumimedic):
   el sitio (.s01-stage) se corre a la izquierda y revela el menú fijo que está debajo. */
.s01-menu{ position:fixed; top:0; right:0; height:100%; width:var(--menu-w); z-index:1; background:#EAECEE; color:var(--ink); font-family:var(--font-ui); letter-spacing:-.02em; display:flex; flex-direction:column; padding:26px 32px 32px; }
.s01-menu-close{ align-self:flex-end; background:transparent; border:0; color:var(--ink); cursor:pointer; line-height:0; padding:6px; opacity:.9; transition:opacity .16s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.s01-menu-close:hover{ opacity:1; transform:rotate(90deg); }
/* Cuerpo del menú: contiene las vistas (raíz + submenús) que se intercambian */
/* overflow-y:auto — el cuerpo crecía sin recortar y por debajo de ~800px de alto la
   navegación se derramaba encima del pie (Legal / Contacto). Con scroll propio el pie
   se queda en su sitio y la lista se desplaza. */
.s01-menu-body{ flex:1 1 auto; min-height:0; position:relative; margin-top:30px;
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
.s01-menu-body::-webkit-scrollbar{ display:none; }
.s01-menu-view{ display:none; flex-direction:column; }
.s01-menu-view.is-active{ display:flex; animation:s01menuin .34s cubic-bezier(.16,1,.3,1); }
@keyframes s01menuin{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:translateX(0); } }
.s01-menu-nav{ display:flex; flex-direction:column; }
.s01-menu-nav a, .s01-menu-drill{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; text-align:left; background:transparent; border:0; cursor:pointer; color:var(--ink); font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:32px; line-height:1.08; letter-spacing:-.02em; padding:12px 16px; border-radius:2px; transition:background .2s ease, color .2s ease; }
.s01-menu-nav a.is-active{ background:var(--azul-fuerte); color:#fff; }
.s01-menu-nav a:not(.is-active):hover, .s01-menu-drill:hover{ background:rgba(53,57,142,.09); }
.s01-menu-chev{ flex:none; width:9px; height:9px; border-right:2px solid currentColor; border-top:2px solid currentColor; transform:rotate(45deg); opacity:.5; }
.s01-menu-drill:hover .s01-menu-chev{ opacity:.9; }
.s01-menu-back{ display:inline-flex; align-items:center; gap:9px; background:transparent; border:0; cursor:pointer; color:var(--gris-medio); font-family:var(--font-ui); font-size:15px; letter-spacing:-.01em; padding:2px 16px 18px; transition:color .16s ease; }
.s01-menu-back:hover{ color:var(--azul-fuerte); }
/* Ficha sin fotografía: en vez de un marco vacío, se dice qué falta. Un recuadro gris donde
   debería estar el producto se lee como "la imagen no cargó", y confunde más que el hueco. */
.s01-pdp-gallery.is-sin-foto .s01-pdp-shot{ background:#F1F4FB; border:1px dashed var(--gris-claro);
  display:flex; align-items:center; justify-content:center; min-height:320px; }
/* Sin producto no hay sombra de producto: la sombra suelta delata el hueco. */
.s01-pdp-gallery.is-sin-foto .s01-pdp-shot::before,
.s01-pdp-gallery.is-sin-foto .s01-pdp-shot::after{ display:none; }
.s01-pdp-nofoto{ margin:0; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gris-medio); }
/* ── Cajón de catálogo, por la IZQUIERDA ────────────────────────────────────────────────────
   Gemelo del menú de hamburguesa, en el lado contrario. Sustituye al panel colgante: con 14
   categorías y 87 subcategorías aquel medía más que la ventana y se cortaba abajo, y en un
   portátil se cortaba antes. Un cajón scrollea por naturaleza, así que la altura deja de ser
   un problema y caben las 201 marcas enteras. */
.s01-cat-drawer{ position:fixed; top:0; left:0; height:100%; width:var(--menu-w);
  /* z-index 10, por encima de .s01-frame (9). Con z-index:1 —el que usa el menú de
     hamburguesa— el cajón se abría, respondía al ratón y su fondo se veía, pero su CONTENIDO
     no se pintaba nunca: el marco lo tapaba. Los estilos calculados decían opacidad 1 y color
     oscuro; solo se descubrió MIRANDO y subiendo el z-index a mano. */
  z-index:10;
  background:#EAECEE; color:var(--ink); font-family:var(--font-ui); letter-spacing:-.02em;
  display:flex; flex-direction:column; padding:26px 28px 28px;
  /* Estado CERRADO explícito. El menú de hamburguesa no lo necesita porque vive debajo del
     sitio y el escenario lo tapa; este va por encima del marco (z-index 10, ver arriba), así
     que sin esto se quedaba visible desde que cargaba la página. */
  visibility:hidden; opacity:0; pointer-events:none;
  transform:translateX(-22px);
  transition:opacity .26s ease, transform .34s cubic-bezier(.16,1,.3,1), visibility .34s; }
.t-salud01.cat-open .s01-cat-drawer{ visibility:visible; opacity:1; pointer-events:auto;
  transform:none; }
/* Barra superior: el volver atrás va a la MISMA altura que la X y como cápsula, para que se
   lea como un botón y no como una migaja perdida encima del título. */
/* `display:flex` gana al atributo `hidden`, así que sin esto nada se ocultaba: el chip de
   volver salía también en la raíz y el buscador no filtraba aunque marcara los elementos. */
.s01-cat-drawer [hidden]{ display:none !important; }
.s01-cat-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:32px; margin:0 0 14px; }
.s01-cat-x{ flex:none; background:transparent; border:0; cursor:pointer;
  color:var(--gris-medio); padding:4px; margin-left:auto; transition:color .16s ease; }
.s01-cat-x:hover{ color:var(--ink); }
/* Volver: solo el chevron, a la izquierda del título. La cápsula con la palabra "Categorías"
   competía con el propio título por la atención. */
.s01-cat-back{ flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; background:#fff; border:1px solid rgba(26,34,48,.12);
  border-radius:999px; cursor:pointer; color:var(--ink); padding:0;
  transition:background .16s ease, color .16s ease, border-color .16s ease; }
.s01-cat-back:hover{ background:var(--azul-fuerte); border-color:var(--azul-fuerte); color:#fff; }
.s01-cat-back .s01-menu-chev{ flex:none; opacity:.75; }
.s01-cat-back:hover .s01-menu-chev{ opacity:1; }
/* Conmutador Categorías · Marcas. Está aquí para no tener que salir al header y volver a
   entrar solo para cambiar de eje. */
.s01-cat-tabs{ flex:1 1 auto; min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:3px;
  background:rgba(26,34,48,.06); border-radius:7px; padding:3px; margin:0; }
.s01-cat-tab{ min-width:0; background:none; border:0; cursor:pointer; font-family:inherit; font-size:14px;
  font-weight:500; letter-spacing:-.01em; color:var(--gris-medio); padding:8px 10px;
  border-radius:5px; transition:background .16s ease, color .16s ease, box-shadow .16s ease; }
.s01-cat-tab:hover{ color:var(--ink); }
.s01-cat-tab.is-on{ background:#fff; color:var(--azul-fuerte); font-weight:600;
  box-shadow:0 1px 3px rgba(26,34,48,.12); }
/* Buscador del cajón: con 14 raíces, 87 subcategorías y 201 marcas, recorrer la lista no es
   navegar. Filtra la vista que esté abierta, sin recargar nada. */
.s01-cat-buscar{ flex:none; display:flex; align-items:center; gap:9px; background:#fff;
  border:1px solid rgba(26,34,48,.12); border-radius:6px; padding:0 12px; height:42px;
  margin:0 0 12px; color:var(--gris-medio);
  transition:border-color .16s ease, box-shadow .16s ease; }
.s01-cat-buscar:focus-within{ border-color:var(--azul-fuerte);
  box-shadow:0 0 0 3px rgba(53,57,142,.12); }
.s01-cat-buscar svg{ flex:none; }
.s01-cat-buscar input{ flex:1 1 auto; min-width:0; border:0; outline:0; background:none;
  font-family:inherit; font-size:14.5px; letter-spacing:-.01em; color:var(--ink); }
.s01-cat-buscar input::placeholder{ color:var(--gris-medio); }
.s01-cat-buscar input::-webkit-search-cancel-button{ display:none; }
.s01-cat-qx{ flex:none; background:none; border:0; cursor:pointer; color:var(--gris-medio);
  padding:2px; display:flex; transition:color .16s ease; }
.s01-cat-qx:hover{ color:var(--ink); }
.s01-cat-vacio{ flex:none; margin:0 0 12px; padding:0 14px; color:var(--gris-medio);
  font-size:14px; }
/* En los resultados de búsqueda, la subcategoría dice de qué categoría cuelga. El nombre y su
   categoría van en elementos SEPARADOS: metidos en el mismo, la puerta de veracidad los leía
   pegados ("Agujas de suturaSutura") y los daba por inventados. */
.s01-cat-tt{ flex:1 1 auto; min-width:0; }
.s01-cat-madre{ display:block; font-size:11.5px; color:var(--gris-medio); font-weight:400;
  letter-spacing:0; margin-top:1px; }
/* Pie fijo: la salida al catálogo no scrollea con la lista y se siente botón. */
.s01-cat-pie{ flex:none; padding-top:16px; margin-top:14px;
  border-top:1px solid rgba(26,34,48,.12); }
.s01-cat-cta{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--azul-fuerte); color:#fff; text-decoration:none; border-radius:6px;
  padding:13px 16px; font-size:15px; font-weight:600; letter-spacing:-.01em;
  box-shadow:0 6px 18px rgba(53,57,142,.22);
  transition:transform .16s ease, box-shadow .2s ease, background .16s ease; }
.s01-cat-cta:hover{ background:var(--azul-navy); transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(53,57,142,.3); }
.s01-cat-cta .s01-cat-num{ color:rgba(255,255,255,.72); }
/* min-height:0 para que el cuerpo pueda encoger y su overflow recorte de verdad. */
.s01-cat-body{ flex:1 1 auto; min-height:0; overflow:hidden; position:relative; }
.s01-cat-view{ position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain;
  padding-right:8px; opacity:0; visibility:hidden; transform:translateX(18px);
  transition:opacity .22s ease, transform .28s cubic-bezier(.16,1,.3,1), visibility .28s; }
.s01-cat-view.is-on{ opacity:1; visibility:visible; transform:none; }
.s01-cat-nav{ display:flex; flex-direction:column; gap:1px; padding-bottom:20px; }
.s01-cat-nav a,.s01-cat-drill{ display:flex; align-items:center; gap:12px; width:100%;
  text-align:left; background:transparent; border:0; cursor:pointer; color:var(--ink);
  font-family:inherit; font-weight:400; font-size:17px; line-height:1.25; letter-spacing:-.02em;
  padding:11px 14px; border-radius:3px; text-decoration:none;
  transition:background .18s ease, color .18s ease; }
.s01-cat-nav a:hover,.s01-cat-drill:hover{ background:rgba(53,57,142,.09); color:var(--azul-fuerte); }
.s01-cat-t{ flex:1 1 auto; min-width:0; }
.s01-cat-num{ flex:none; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:10.5px;
  letter-spacing:.02em; color:var(--gris-medio); }
.s01-cat-drill .s01-menu-chev{ flex:none; opacity:.45; }
.s01-cat-todo{ color:var(--azul-fuerte)!important; font-weight:600; }
/* La página se aparta hacia la DERECHA, espejo de lo que hace el menú de hamburguesa. */
.t-salud01.cat-open .s01-stage{ transform:translateX(var(--menu-w)) scale(.972);
  border-radius:26px; overflow:hidden; will-change:transform; }
.t-salud01.cat-open .s01-frame::before{ transform:translateX(var(--menu-w)) scale(.972);
  border-radius:26px; will-change:transform; }
.t-salud01.cat-open .s01-dim{ opacity:.3; pointer-events:auto; cursor:pointer; }
.t-salud01.cat-open .s01-wa{ opacity:0; pointer-events:none; }
@media (max-width:600px){ .s01-cat-drawer{ width:100%; } }
.s01-menu-chev.back{ width:8px; height:8px; transform:rotate(-135deg); opacity:.8; }
/* Submenú Marcas: 2 columnas, tamaño intermedio */
.s01-menu-brands{ flex-direction:row; flex-wrap:wrap; }
.s01-menu-brands a{ width:50%; font-size:22px; padding:9px 16px; }
/* Footer: SIEMPRE abajo, con nuestra fuente */
/* El correo de ventas no parte y desbordaba la columna del pie 6.3px. min-width:0 para que
   la columna pueda encoger, y que el correo pueda partirse. */
.s01-menu-col{ min-width:0; }
.s01-menu-col a{ overflow-wrap:anywhere; }
.s01-menu-foot{ flex:none; display:grid; grid-template-columns:1fr 1fr; column-gap:24px; row-gap:12px; padding-top:24px; border-top:1px solid rgba(26,34,48,.16); }
.s01-menu-colh{ font-family:var(--font-ui); font-size:15px; color:var(--gris-medio); margin-bottom:6px; }
.s01-menu-col{ display:flex; flex-direction:column; gap:10px; }
.s01-menu-col a{ font-family:var(--font-ui); font-size:16px; color:var(--ink); text-decoration:none; transition:color .16s ease; }
.s01-menu-col a:hover{ color:var(--azul-fuerte); }
/* Stage: el sitio entero, encapsulado. Se desplaza y redondea al abrir el menú. */
/* Destino de ancla por debajo del header pegajoso (112 + barra de 26 + aire). Sin esto,
   "Cumplimiento COFEPRIS" del pie deja el titular tapado y parece que el enlace no funcionó. */
[id="cumplimiento"],[id="cobertura"],[id="preguntas"]{ scroll-margin-top:160px; }
.s01-stage{ position:relative; z-index:2; transform-origin:center center; transition:transform .62s cubic-bezier(.16,1,.3,1), border-radius .62s cubic-bezier(.16,1,.3,1); }
.t-salud01.menu-open .s01-stage{ transform:translateX(calc(-1 * var(--menu-w))) scale(.972); border-radius:26px; overflow:hidden; will-change:transform; }
/* El "abrazo": el color del menú rodea la cápsula por arriba, abajo y derecha, y se curva
   en las esquinas para envolverla. Es un agujero (::before) con el MISMO transform y el MISMO
   radio que .s01-stage: el gris se pinta fuera del agujero con un box-shadow de spread enorme.
   Al estar fijo funciona con la página scrolleada (donde la cápsula real ya no tiene esquinas
   visibles) y al compartir transform va sincronizado al pixel con el sitio. El clip-path
   recorta la franja del menú para no tapar su contenido. */
.s01-frame{ position:fixed; inset:0; z-index:9; pointer-events:none; clip-path:inset(0 var(--menu-w) 0 0); }
.s01-frame::before{ content:""; position:absolute; inset:0; transform-origin:center center; box-shadow:0 0 0 200vmax #EAECEE; transition:transform .62s cubic-bezier(.16,1,.3,1), border-radius .62s cubic-bezier(.16,1,.3,1); }
.t-salud01.menu-open .s01-frame::before{ transform:translateX(calc(-1 * var(--menu-w))) scale(.972); border-radius:26px; will-change:transform; }
@media (prefers-reduced-motion:reduce){ .s01-stage, .s01-frame::before{ transition:none; } }
.s01-dim{ position:absolute; inset:0; z-index:7; background:#000; opacity:0; pointer-events:none; transition:opacity .55s ease; }
.t-salud01.menu-open .s01-dim{ opacity:.3; pointer-events:auto; cursor:pointer; }
/* Buscador (modal estilo functionhealth.com, adaptado a productos) */
.s01-search{ position:fixed; inset:0; z-index:30; visibility:hidden; }
.s01-search.open{ visibility:visible; }
.s01-search-scrim{ position:absolute; inset:0; background:rgba(10,14,22,.5); opacity:0; transition:opacity .3s ease; }
.s01-search.open .s01-search-scrim{ opacity:1; }
.s01-search-modal{ position:absolute; left:50%; top:calc(var(--bar-h) + var(--header-h) + 8px); transform:translateX(-50%) translateY(-14px); width:min(680px,92vw); max-height:calc(100vh - var(--bar-h) - var(--header-h) - 32px); overflow:auto; background:var(--paper); color:var(--ink); border-radius:24px; box-shadow:0 40px 120px rgba(15,22,32,.34); padding:26px 30px 30px; font-family:var(--font-ui); letter-spacing:-.02em; opacity:0; transition:opacity .3s ease, transform .38s cubic-bezier(.16,1,.3,1); }
.s01-search.open .s01-search-modal{ opacity:1; transform:translateX(-50%) translateY(0); }
.s01-search-close{ position:absolute; top:22px; right:24px; background:transparent; border:0; color:var(--ink); cursor:pointer; line-height:0; padding:6px; opacity:.85; transition:opacity .16s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.s01-search-close:hover{ opacity:1; transform:rotate(90deg); }
.s01-search-field{ position:relative; margin:30px 0 20px; }
.s01-search-field input{ width:100%; height:60px; border:1px solid #D6DEE2; border-radius:999px; background:#fff; padding:0 58px 0 26px; font-family:var(--font-ui); font-size:18px; letter-spacing:-.02em; color:var(--ink); outline:none; transition:border-color .16s ease; }
.s01-search-field input:focus{ border-color:var(--azul-fuerte); }
.s01-search-field svg{ position:absolute; right:24px; top:50%; transform:translateY(-50%); color:var(--gris-medio); pointer-events:none; }
/* overflow-x:auto crea contenedor de scroll propio: las 5 pestañas no caben en 390px y sin esto
   empujaban el ancho del documento. Con scroll propio se deslizan y la página no se mueve. */
.s01-search-tabs{ display:flex; gap:28px; border-bottom:1px solid rgba(26,34,48,.12); overflow-x:auto; scrollbar-width:none; }
.s01-search-tabs::-webkit-scrollbar{ display:none; }
.s01-search-tab{ flex:0 0 auto; white-space:nowrap; position:relative; background:transparent; border:0; cursor:pointer; font-family:var(--font-ui); font-size:15px; font-weight:600; letter-spacing:-.01em; color:#7A8087; padding:6px 0 14px; transition:color .16s ease; }
.s01-search-tab:hover{ color:var(--ink); }
.s01-search-tab.is-active{ color:var(--ink); }
.s01-search-tab.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--azul-fuerte); }
.s01-search-ver{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; padding:13px; border-top:1px solid rgba(26,34,48,.12); font-family:var(--font-ui); font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--azul-fuerte); text-decoration:none; }
.s01-search-ver:hover{ background:rgba(53,57,142,.05); }
.s01-search-ver span{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:var(--gris-medio); }
.s01-search-label{ font-size:13px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--gris-medio); margin:22px 0 4px; }
.s01-search-row{ display:flex; gap:18px; align-items:flex-start; padding:15px 0; border-bottom:1px solid #EEF1F4; text-decoration:none; color:inherit; }
.s01-search-row:hover .s01-search-name{ color:var(--azul-fuerte); }
.s01-search-thumb{ flex:none; width:52px; height:52px; border-radius:10px; background:#EEF2F6; display:flex; align-items:center; justify-content:center; color:var(--azul-fuerte); font-weight:800; font-size:15px; text-transform:uppercase; }
.s01-search-body{ min-width:0; }
.s01-search-cat{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--azul-fuerte); }
.s01-search-name{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:20px; font-weight:400; color:var(--ink); margin-top:3px; transition:color .16s ease; }
.s01-search-meta{ font-size:14px; color:#6B7480; margin-top:3px; }
.s01-search-empty{ padding:30px 4px; color:var(--gris-medio); font-size:15px; }
/* Side cart · flujo de COMPRA. Cotizar es un flujo aparte, no se mezclan. */
.s01-cart{ position:fixed; inset:0; z-index:31; visibility:hidden; }
.s01-cart.open{ visibility:visible; }
.s01-cart-scrim{ position:absolute; inset:0; background:rgba(10,14,22,.5); opacity:0; transition:opacity .3s ease; }
.s01-cart.open .s01-cart-scrim{ opacity:1; }
.s01-cart-panel{ position:absolute; top:0; right:0; height:100%; width:min(432px,92vw); background:var(--paper); color:var(--ink); font-family:var(--font-ui); letter-spacing:-.02em; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .5s cubic-bezier(.16,1,.3,1); box-shadow:-30px 0 80px rgba(15,22,32,.22); will-change:transform; }
.s01-cart.open .s01-cart-panel{ transform:translateX(0); }
/* La descripción pertenece al título, no a los productos: entra en el encabezado y la regla
   de 1px cierra por debajo del conjunto. La X se mantiene arriba a la derecha con una fila
   propia (.s01-cart-headtop), para que el párrafo no la empuje ni la centre. */
.s01-cart-head{ flex:none; padding:24px 26px 18px; border-bottom:1px solid rgba(26,34,48,.10); }
.s01-cart-headtop{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.s01-cart-title{ min-width:0; font-size:20px; font-weight:800; letter-spacing:-.02em; }
.s01-cart-title span{ color:var(--gris-medio); font-weight:600; }
.s01-cart-x{ background:transparent; border:0; cursor:pointer; color:var(--ink); line-height:0; padding:6px; opacity:.85; transition:opacity .16s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.s01-cart-x:hover{ opacity:1; transform:rotate(90deg); }
.s01-cart-intro{ margin:8px 0 0; padding:0; max-width:36ch; font-family:var(--font-ui); font-size:14px; line-height:20px; letter-spacing:-.01em; color:#5A6472; }
.s01-cart-items{ flex:1 1 auto; overflow:auto; padding:2px 26px; }
.s01-cart-item{ display:grid; grid-template-columns:60px 1fr auto; gap:14px; padding:18px 0; border-bottom:1px solid #EEF1F4; }
.s01-cart-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.s01-cart-thumb{ width:60px; height:60px; border-radius:10px; background:#EEF2F6; display:flex; align-items:center; justify-content:center; color:var(--azul-fuerte); font-weight:800; text-transform:uppercase; }
.s01-cart-name{ font-size:15px; font-weight:700; line-height:1.25; }
.s01-cart-meta{ font-size:13px; color:#6B7480; margin-top:2px; }
.s01-cart-qty{ display:inline-flex; align-items:center; margin-top:12px; border:1px solid #D6DEE2; border-radius:999px; overflow:hidden; }
.s01-cart-qty button{ width:28px; height:28px; background:#fff; border:0; cursor:pointer; color:var(--ink); font-size:16px; line-height:1; }
.s01-cart-qty button:hover{ background:#F2F6FC; color:var(--azul-fuerte); }
.s01-cart-qty span{ min-width:32px; text-align:center; font-size:14px; font-weight:600; }
.s01-cart-right{ display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; }
.s01-cart-price{ font-size:15px; font-weight:700; white-space:nowrap; }
.s01-cart-remove{ background:transparent; border:0; cursor:pointer; color:var(--gris-medio); font-size:12px; text-decoration:underline; text-underline-offset:2px; }
.s01-cart-remove:hover{ color:var(--azul-fuerte); }
.s01-cart-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--gris-medio); text-align:center; padding:50px 30px; }
.s01-cart-foot{ flex:none; border-top:1px solid rgba(26,34,48,.10); padding:20px 26px 24px; }
.s01-cart-sub{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.s01-cart-sub b{ font-size:22px; font-weight:800; letter-spacing:-.02em; }
.s01-cart-note{ font-size:12px; color:var(--gris-medio); margin-bottom:16px; }
.s01-cart-cta{ display:block; width:100%; text-align:center; background:var(--azul-fuerte); color:#fff; border:0; cursor:pointer; padding:15px; border-radius:999px; font-family:var(--font-ui); font-size:16px; font-weight:700; letter-spacing:-.02em; text-decoration:none; transition:background .18s ease; }
.s01-cart-cta:hover{ background:var(--azul-navy); }
/* Con fondo: comprar y cotizar son dos flujos, no uno principal y una nota al pie. Se
   distinguen por peso de color, no por tener o no tener fondo. */
.s01-cart-ver{ display:block; text-align:center; padding:14px 12px; border-radius:999px; background:rgba(53,57,142,.10);
  font-family:var(--font-ui); font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--azul-fuerte); text-decoration:none; transition:background .16s ease; }
.s01-cart-ver:hover{ background:rgba(53,57,142,.18); }
/* Mismo ritmo que la página de carrito (.s01-ped-acc): los dos flujos separados 10px. */
.s01-cart-acc{ display:flex; flex-direction:column; gap:10px; }
.s01-cartbtn{ position:relative; }
.s01-cart-badge{ position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--azul-fuerte); color:#fff; font-family:var(--font-ui); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1; }
/* ===== HOME — secciones bajo el hero ===== */
.s01-home{ background:var(--paper); color:var(--ink); font-family:var(--font-ui); letter-spacing:-.02em; --edge:max(var(--pad-x), calc((100vw - var(--maxw)) / 2)); }
.s01-sec{ padding:92px var(--edge); }
.s01-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:38px; }
.s01-sec-title{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:44px; line-height:1.04; letter-spacing:-.02em; margin:0; }
.s01-sec-link{ font-size:15px; font-weight:600; color:var(--azul-fuerte); text-decoration:none; white-space:nowrap; }
.s01-sec-link:hover{ text-decoration:underline; text-underline-offset:3px; }
/* 1 · Franja de confianza */
.s01-trust{ padding:32px var(--edge); border-bottom:1px solid #EDEFF2; }
.s01-trust-label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gris-medio); text-align:center; margin-bottom:18px; }
.s01-trust-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:20px 46px; }
.s01-trust-row span{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:23px; font-weight:400; letter-spacing:-.02em; color:#5A6472; opacity:.82; }
/* 2 · Categorías (cards) */
/* ——— 2 · Categorías — lista editorial con conmutación por hover ———
   La parrilla de 6 tarjetas iguales era el punto débil de la página: todas las categorías pesaban
   lo mismo y la firma de movimiento (card lift) se repetía. Aquí el peso lo da la tipografía y la
   única animación es la conmutación de imagen, que no se usa en ninguna otra sección.
   Se mantiene el sistema: grilla de 12, radio 9.6, etiquetas mono, punteados 2/4, botón r2.4. */
.s01-cat{ padding:128px 24px; }
.s01-cat-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:12.8px; align-items:start; }
/* `grid-row:1` en ambos: la lista va primero en el DOM (orden de lectura y de tabulación) pero
   ocupa las columnas de la derecha, y la colocación automática no retrocede — sin esto la imagen
   se cae a una segunda fila. */
.s01-cat-left{ grid-column:7 / 13; grid-row:1; display:flex; flex-direction:column; align-items:flex-start; }
.s01-cat-label{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; color:var(--azul-medio); }
.s01-cat-title{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:56px; line-height:56px; letter-spacing:-.96px; color:var(--ink); margin:24px 0 56px; }
.s01-cat-list{ width:100%; display:flex; flex-direction:column; }
.s01-cat-row{ position:relative; display:flex; align-items:baseline; gap:20px; padding:22px 4px; text-decoration:none; color:var(--ink); background:repeating-linear-gradient(90deg, var(--gris-claro) 0 2px, transparent 2px 6px) top left / 100% 1px no-repeat; transition:padding-left .32s cubic-bezier(.22,1,.36,1), color .2s ease; }
.s01-cat-row:last-child{ box-shadow:inset 0 -1px 0 0 transparent; }
.s01-cat-list::after{ content:""; height:1px; background:repeating-linear-gradient(90deg, var(--gris-claro) 0 2px, transparent 2px 6px); }
.s01-cat-num{ flex:none; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; letter-spacing:.64px; color:var(--gris-medio); transition:color .2s ease; }
.s01-cat-name{ flex:1 1 auto; font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:34px; line-height:1.05; letter-spacing:-.02em; }
.s01-cat-count{ flex:none; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; letter-spacing:.64px; color:var(--gris-medio); }
/* Color-señal = puntuación: sólo la fila activa lo lleva, nunca las seis. */
.s01-cat-row.is-active{ color:var(--azul-fuerte); padding-left:18px; }
.s01-cat-row.is-active .s01-cat-n,.s01-cat-row.is-active .s01-cat-count{ color:var(--azul-fuerte); }
.s01-cat-row::before{ content:""; position:absolute; left:0; top:50%; width:8px; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .32s cubic-bezier(.22,1,.36,1); }
.s01-cat-row.is-active::before{ transform:scaleX(1); }
.s01-cat-btn{ margin-top:48px; display:inline-flex; align-items:center; gap:10px; background:var(--azul-fuerte); color:#fff; font-family:var(--font-ui); font-size:16px; font-weight:500; line-height:20px; padding:12px 24px 12.8px; border-radius:2.4px; text-decoration:none; transition:background .22s ease, gap .22s cubic-bezier(.22,1,.36,1); }
.s01-cat-btn:hover{ background:var(--azul-navy); gap:16px; }
.s01-cat-visual{ position:relative; grid-column:1 / 6; grid-row:1; aspect-ratio:4/5; border-radius:9.6px; overflow:hidden; background:var(--gris-claro); }
.s01-cat-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition:opacity .5s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.s01-cat-visual img.is-on{ opacity:1; transform:scale(1); }
@media (max-width:1024px){
  .s01-cat{ padding:64px var(--edge); }
  .s01-cat-grid{ display:flex; flex-direction:column; gap:32px; }
  .s01-cat-left,.s01-cat-visual{ grid-column:auto; }
  .s01-cat-title{ font-size:36px; line-height:38px; margin:16px 0 32px; }
  .s01-cat-name{ font-size:24px; }
  .s01-cat-visual{ order:-1; aspect-ratio:3/2; width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .s01-cat-row,.s01-cat-row::before,.s01-cat-visual img{ transition-duration:.01ms; }
}
/* 3 · Productos destacados (product-card estilo goodlifemeds, radius 10) */
.s01-prodgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.s01-prodcard{ display:flex; flex-direction:column; border:1px solid #EAEEF2; border-radius:10px; overflow:hidden; background:#F7F8FA; transition:box-shadow .22s ease, border-color .22s ease; }
.s01-prodcard:hover{ box-shadow:0 16px 34px rgba(15,22,32,.08); border-color:#DCE3EA; }
.s01-prod-top{ padding:22px 22px 0; }
.s01-prod-name{ font-family:"Neue Montreal",sans-serif; font-weight:400; font-size:21px; line-height:1.14; letter-spacing:-.02em; color:var(--ink); }
.s01-prod-sub{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--azul-fuerte); margin-top:7px; }
.s01-prod-img{ aspect-ratio:1/1; margin:12px 0 0; background:#fff; padding:18px; }
.s01-prod-img img{ width:100%; height:100%; object-fit:contain; display:block; }
.s01-prod-btns{ display:flex; gap:8px; padding:14px 14px 14px; margin-top:auto; }
.s01-prod-btn1{ flex:1; text-align:center; background:var(--azul-fuerte); color:#fff; border:0; border-radius:3px; padding:11px; font-family:var(--font-ui); font-size:14px; font-weight:500; letter-spacing:-.01em; cursor:pointer; text-decoration:none; transition:background .18s ease; }
.s01-prod-btn1:hover{ background:var(--azul-navy); }
.s01-prod-btn2{ flex:1; text-align:center; background:#fff; color:var(--ink); border:1px solid #DCE3EA; border-radius:3px; padding:11px; font-family:var(--font-ui); font-size:14px; font-weight:500; letter-spacing:-.01em; cursor:pointer; text-decoration:none; transition:border-color .18s ease, color .18s ease; }
.s01-prod-btn2:hover{ border-color:var(--azul-fuerte); color:var(--azul-fuerte); }
/* 3 · Showcase (clon estructural de goodlifemeds: foto full-bleed + heading + carrusel) */
/* ——— Productos destacados · spec medido del DOM de goodlifemeds (.products-section @1440) ———
   Medido con Playwright: contenedor r9.6 overflow-hidden · foto full-bleed 115% con parallax ·
   velo negro 15% · contenido pt56/pb128/px56 gap80 · h2 122.4/97.92/-4.32 · slider gap42 ·
   tarjeta 337.34×396.55 r9.6 · visual 286.75 r7 · divisor 1px sobre los botones.
   Identidad (azul, Neue Montreal, copy ES) es nuestra. Media = placeholder de referencia. */
.s01-show{ padding:12.8px; }
.s01-show-card{ position:relative; overflow:hidden; border-radius:9.6px; padding:0 0 56px; }
.s01-show-photo{ position:absolute; inset:0; overflow:hidden; z-index:1; }
.s01-show-photo-t{ position:absolute; top:-7.5%; left:0; right:0; height:115%; will-change:transform; }
.s01-show-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Velo: la referencia mide 15%, pero nuestra foto es un cenital de bodega con piso de concreto
   muy claro justo donde cae el titular. Se sube y se carga arriba, que es donde va el texto. */
.s01-show-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.64) 0%, rgba(0,0,0,.50) 42%, rgba(0,0,0,.34) 100%); z-index:2; }
.s01-show-content{ position:relative; z-index:5; display:flex; flex-direction:column; gap:80px; padding:56px 56px 128px; }
/* Tipografía idéntica al spec. max-width propio: "Productos destacados" es mucho más largo que
   "Weight Loss" y a una línea cruzaba la zona clara de la foto; a dos líneas queda sobre el lado oscuro. */
.s01-show-title{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:122.4px; line-height:97.92px; letter-spacing:-4.32px; color:var(--paper); margin:0; max-width:700px; }
.s01-show-row{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; width:352px; }
.s01-show-num{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; color:var(--paper); }
/* Legibilidad: 20.4/27 en vez del 22.4/24.64 medido. El interlineado apretado de la referencia
   funciona en inglés (líneas cortas); en español el párrafo es más largo y necesita aire. */
.s01-show-p{ font-size:20.4px; line-height:27px; letter-spacing:-.32px; color:var(--paper); width:352px; margin:0; }
.s01-slider{ position:relative; z-index:5; display:flex; flex-direction:column; gap:42px; align-items:center; overflow:hidden; }
.s01-slider-view{ width:100%; overflow:hidden; padding-bottom:76px; margin-bottom:-76px; }
.s01-slider-list{ display:flex; flex-direction:row; padding:0 12.8px; will-change:transform; cursor:grab; user-select:none; touch-action:pan-y; }
.s01-slider-list.is-drag{ cursor:grabbing; }
/* .s01-slide envuelve tarjeta + etiqueta (la etiqueta vive FUERA de la tarjeta, gap 6.4px — medido) */
.s01-slide{ flex:none; width:337.34px; margin-right:12.8px; display:flex; flex-direction:column; gap:6.4px; }
.s01-pcard{ width:100%; height:452px; border-radius:9.6px; background:var(--paper); overflow:hidden; position:relative; display:flex; flex-direction:column; justify-content:space-between; }
/* El aire va en el bloque, no en el título. Si el título reserva 3 líneas, un nombre de una
   línea deja 48px muertos entre el nombre y la referencia: el hueco exagerado. Reservando en
   el contenedor, la referencia queda pegada al nombre (6px) y las imágenes siguen arrancando
   a la misma altura en toda la fila. */
.s01-pcard-top{ padding:24px 24px 0; display:flex; flex-direction:column; gap:6px; min-height:116px; }
/* El nombre iba a 20.8/22.88 (ratio 1.1), medido de una referencia cuyos productos se llaman
   "Tirzepatide". El catálogo real tiene nombres de hasta 98 caracteres —"Catéter Percutaneo de
   Silicon de un Lumen Neonatal con Introductor Tipo Excalibur MCA UTAH MEDICAL"— y a ese ratio
   tres líneas se leen como un bloque macizo. Baja el cuerpo y sube el aire entre líneas.
   NO se trunca: en estos nombres el dato que distingue el producto (el calibre, "20G", "14G")
   va al FINAL. Un clamp de tres líneas dejaría dos catéteres distintos con el mismo título.
   La altura mínima de 3 líneas mantiene la fila pareja sin impedir que uno crezca a 4. */
.s01-pcard-title{ display:block; font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:17.6px; line-height:24px; letter-spacing:-.16px; color:var(--ink); }
.s01-pcard-rx{ flex:none; font-size:12.8px; font-weight:500; line-height:12.8px; margin-top:3px; color:var(--gris-medio); }
/* Reserva de dos líneas: las subcategorías reales van de "Batas" a "Antiséptico, Desinfectate y
   Esterilizante", y sin esta reserva la tarjeta larga empujaba su clave y su imagen hacia abajo,
   desalineándose de las vecinas de la misma fila. Es un hueco de 11px que nadie ve, frente a una
   fila que no cuadra, que se ve siempre. */
.s01-pcard-eyebrow{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; color:var(--azul-medio); max-width:80%; min-height:23.04px; }
/* min-height:0 — sin esto el `min-height:auto` implícito del flex item impide encoger bajo su
   contenido y la botonera se sale de la tarjeta (queda recortada por el overflow:hidden). */
.s01-pcard-bottom{ position:relative; flex:1 1 0%; min-height:0; display:flex; flex-direction:column; justify-content:flex-end; }
/* El producto vive sobre el color de la tarjeta, nunca sobre una foto: recorte con alpha, cero fondo. */
/* El visual absorbe el sobrante en vez de empujar la botonera fuera de la tarjeta:
   nuestro card-top es más alto que el de la referencia (títulos en español). `contain` + flex:1
   mantiene el producto centrado y respetando siempre los 8px de aire bajo los botones. */
.s01-pcard-visual{ width:286.75px; flex:1 1 0%; min-height:0; max-height:286.75px; margin-left:16.86px; border-radius:7px; overflow:hidden; }
.s01-pcard-visual img{ width:100%; height:100%; object-fit:contain; display:block; }
/* ——— Precio en la tarjeta ———
   Anatomía pedida por Camilo: título+marca · foto · LÍNEA · concepto izquierda / valor derecha
   con MXN · LÍNEA · botones. La línea de arriba es el punteado; la de abajo, el border-top que
   ya tenían los botones. Mismo patrón que .s01-pdp-tot, para que PLP, home y PDP hablen igual. */
.s01-pcard-precio{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 16px;
  margin:0 24px 20px; padding-top:15px; border-top:1px solid var(--gris-claro); }
.s01-pcard-precio-l{ font-family:var(--font-ui); font-size:14px; line-height:18px; letter-spacing:-.01em; color:#5A6472; }
.s01-pcard-precio-l span{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; letter-spacing:.64px; text-transform:uppercase; color:var(--gris-medio); margin-left:4px; }
.s01-pcard-precio-r{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:22px; line-height:1; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.s01-pcard-precio-r i{ font-style:normal; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; letter-spacing:.64px; color:var(--gris-medio); margin-left:4px; }
/* ——— Favoritos: corazón flotante arriba a la derecha ———
   Vive sobre la tarjeta y sobre la foto de la ficha. Va por encima del enlace que cubre la
   tarjeta (z-index 1), o el clic nunca llegaría al botón. */
.s01-fav{ position:absolute; z-index:2; top:12px; right:12px; width:32px; height:32px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; border:0; border-radius:50%;
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#8A9199; transition:color .16s ease, background .16s ease, transform .16s cubic-bezier(.16,1,.3,1); }
.s01-fav svg{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linejoin:round; }
.s01-fav:hover{ color:var(--azul-fuerte); transform:scale(1.08); }
.s01-fav[aria-pressed="true"]{ color:#D64550; }
.s01-fav[aria-pressed="true"] svg{ fill:currentColor; stroke:currentColor; }
.s01-fav:focus-visible{ outline:2px solid var(--azul-fuerte); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .s01-fav{ transition:none; } }
/* El título deja sitio al corazón. */
.s01-pcard-top{ padding-right:52px; }
/* ——— Agregar / cantidad en la tarjeta ———
   El botón se convierte en control cuando el producto ya está en el carrito: si siguiera
   diciendo "Agregar" no habría forma de saber cuánto llevas ni de corregirlo sin ir al carrito. */
.s01-pcard-add{ flex:1 1 0; min-width:0; }
.s01-pcard-add .s01-pcard-btn{ width:100%; }
.s01-pcard-step{ display:flex; align-items:center; justify-content:space-between; gap:4px;
  height:44.8px; padding:4px; border-radius:2.4px; background:rgba(53,57,142,.10); }
.s01-pcard-step button{ flex:none; width:34px; height:36px; border:0; border-radius:2.4px; background:transparent; cursor:pointer;
  color:var(--azul-fuerte); font-size:18px; line-height:1; transition:background .15s ease; }
.s01-pcard-step button:hover{ background:rgba(53,57,142,.16); }
.s01-pcard-step span{ flex:1; text-align:center; font-family:var(--font-ui); font-size:16px; font-weight:600; color:var(--azul-fuerte); font-variant-numeric:tabular-nums; }
.s01-pcard-btns{ padding:0 8px 8px; }
/* Rejilla de dos columnas iguales, no flex. Con flex-basis:0 y box-sizing:border-box cada
   hijo arranca en su propio padding (el claro tiene 32px, el otro 0) y el reparto del espacio
   libre salía desplazado justo esos 32px. Con grid las columnas son iguales por definición. */
.s01-pcard-btns-inner{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8px; padding-top:8px; border-top:1px solid var(--gris-claro); }
.s01-pcard-btns-inner > *{ min-width:0; }
/* Mitad y mitad: ambas etiquetas son cortas y caben sin apretar. */
.s01-pcard-btn{ flex:1 1 0; text-align:center; font-family:var(--font-ui); font-size:16px; font-weight:500; line-height:20px; letter-spacing:-.01em; border-radius:2.4px; padding:12px 16px 12.8px; text-decoration:none; white-space:nowrap; border:0; cursor:pointer; transition:scale .15s cubic-bezier(.4,0,.2,1), background .2s ease, color .2s ease; }
.s01-pcard-btn.is-light{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.s01-pcard-btn.is-light svg{ flex:none; }
/* Stepper: ocupa exactamente el hueco del botón que sustituye, para que la fila no salte. */
.s01-qty{ flex:1 1 auto; display:flex; align-items:center; justify-content:space-between; gap:4px; background:rgba(53,57,142,.08); border-radius:2.4px; padding:4px; }
.s01-qty button{ width:36px; height:36.8px; display:flex; align-items:center; justify-content:center; border:0; border-radius:2.4px; background:transparent; color:var(--azul-fuerte); font-family:var(--font-ui); font-size:18px; line-height:1; cursor:pointer; transition:background .18s ease; }
.s01-qty button:hover{ background:rgba(53,57,142,.14); }
.s01-qty span{ min-width:28px; text-align:center; font-family:var(--font-ui); font-size:16px; font-weight:600; color:var(--azul-fuerte); font-variant-numeric:tabular-nums; }
/* Chip de éxito: emerge desde abajo, cristal + check verde. Sustituye a abrir el drawer.
   Vive en <body>, fuera de .t-salud01: dentro quedaba atrapado en un contexto de apilamiento
   intermedio y los controles del carrusel le pasaban por encima. Por eso los valores van
   literales aquí (los tokens sólo existen bajo .t-salud01). */
/* width:max-content obligatorio: con left:50% el ancho disponible para un elemento fijo es
   sólo la mitad derecha de la ventana, así que en móvil el chip se estrangulaba a ~194px y
   el texto caía en tres líneas. max-content + max-width le da su ancho natural con tope. */
.s01-toast{ position:fixed; left:50%; bottom:28px; z-index:2147483000; display:flex; align-items:center; gap:12px; width:max-content; max-width:min(480px, calc(100vw - 32px)); padding:14px 22px 14px 16px; border-radius:999px; background:rgba(20,26,40,.62); -webkit-backdrop-filter:blur(24px) saturate(1.4); backdrop-filter:blur(24px) saturate(1.4); color:#fff; font-family:'Nunito Sans', system-ui, -apple-system, sans-serif; font-size:15px; line-height:20px; letter-spacing:-.02em; box-shadow:0 18px 44px rgba(15,22,32,.28); transform:translate(-50%, 140%); opacity:0; pointer-events:none; transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .3s cubic-bezier(.16,1,.3,1); }
.s01-toast.is-on{ transform:translate(-50%, 0); opacity:1; }
.s01-toast-check{ flex:none; width:22px; height:22px; border-radius:50%; background:#70B62C; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px rgba(112,182,44,.32); }
/* min-width:0 obligatorio: hijo de flex con texto largo — sin esto el nombre del producto
   desborda el chip en lugar de partir en dos líneas. */
/* El nombre encoge y el mensaje no. Contar caracteres a ciegas servía en 1440 pero a 390
   recortaba también el "se agregó a tu pedido", que es justo la parte que da sentido al chip:
   un aviso que dice "Catéter Percutaneo de… se agre…" no confirma nada. Repartiendo por flex,
   el mensaje va entero en cualquier ancho y el nombre se lleva el recorte, que es lo que
   puede permitirse perder. El tope por caracteres se queda como límite superior. */
.s01-toast-txt{ min-width:0; display:flex; align-items:baseline; white-space:nowrap; }
.s01-toast-nom{ min-width:0; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.s01-toast-suf{ flex:none; }
.s01-toast b{ font-weight:600; }
@media (prefers-reduced-motion:reduce){ .s01-toast{ transition:opacity .2s linear; transform:translate(-50%,0); } .s01-toast.is-on{ transform:translate(-50%,0); } }
/* ——— Acciones de cuenta: error en línea y estado "trabajando" ———
   Lo usan Mi cuenta, el cotizador y Finalizar compra (window.S01Accion, más abajo), así que vive
   aquí y no en un generador. El error va JUNTO al formulario que falló, nunca en un alert(): es
   el chip de estado del sistema (fondo teñido, radio de control 2.4) en el rojo que el sitio ya
   usa para lo destructivo (#C0392B), con el texto un punto más oscuro para que se lea. */
.s01-err{ display:flex; align-items:flex-start; gap:10px; margin:0; padding:12px 14px; border-radius:2.4px; background:rgba(192,57,43,.08); color:#A5311F; font-family:var(--font-ui); font-size:14px; line-height:20px; letter-spacing:-.01em; text-align:left; }
.s01-err::before{ content:"!"; flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%; background:#C0392B; color:#fff; display:flex; align-items:center; justify-content:center; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; font-weight:700; line-height:1; }
/* Mientras la promesa está pendiente el botón está deshabilitado y dice lo que hace. No se apaga
   al .42 de "todavía no puedes": está trabajando, no bloqueado. */
[aria-busy="true"]{ cursor:progress; }
button[aria-busy="true"],a[aria-busy="true"]{ pointer-events:none; }
.s01-pcard-btn[aria-busy="true"],.s01-pcard-btn[aria-busy="true"]:disabled{ opacity:.72 !important; }
/* Lo que el rol de la sesión no puede hacer no se ofrece. <html data-s01-puede="…"> lo pone el
   guion de permisos; sin esa marca no se oculta nada. */
html[data-s01-puede]:not([data-s01-puede~="facturar"]) [data-puede~="facturar"],
html[data-s01-puede]:not([data-s01-puede~="usuarios"]) [data-puede~="usuarios"],
html[data-s01-puede]:not([data-s01-puede~="direcciones"]) [data-puede~="direcciones"],
html[data-s01-puede]:not([data-s01-puede~="cotizar"]) [data-puede~="cotizar"],
html[data-s01-puede]:not([data-s01-puede~="comprar"]) [data-puede~="comprar"]{ display:none !important; }
/* La tarjeta entera lleva a la ficha; los botones van por encima con su propia acción. */
.s01-pcard-link{ position:absolute; inset:0; z-index:1; }
.s01-pcard-btns-inner{ position:relative; z-index:2; }
.s01-pcard:hover .s01-pcard-title{ color:var(--azul-fuerte); }
.s01-pcard-title{ transition:color .18s ease; }
.s01-pcard-btn:active{ scale:.97; }
.s01-pcard-btn.is-fill{ background:var(--azul-fuerte); color:#fff; }
.s01-pcard-btn.is-fill:hover{ background:var(--azul-navy); }
/* Secundario con fondo propio (el tono del hover): sin fondo se perdía contra la tarjeta clara. */
.s01-pcard-btn.is-light{ background:rgba(53,57,142,.08); color:var(--azul-fuerte); }
.s01-pcard-btn.is-light:hover{ background:rgba(53,57,142,.16); }
/* Ocupa el slot que en la referencia lleva "IMPORTANT SAFETY INFORMATION". Aquí, existencia real:
   el dato que un comprador B2B mira antes que ninguno. `--verde` está definido en la paleta como
   micro-acento de ESTADO, no estructural — este es exactamente su uso permitido. */
.s01-pcard-note{ align-self:center; display:inline-flex; align-items:center; gap:6px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:9.6px; letter-spacing:.64px; text-transform:uppercase; color:var(--paper); background:rgba(255,255,255,.1); border-radius:2.4px; padding:6.4px 8px 4.8px; }
.s01-pcard-note i{ width:5px; height:5px; border-radius:50%; background:var(--verde); display:inline-block; }
.s01-pcard-note.is-out{ color:rgba(255,255,255,.62); }
.s01-pcard-note.is-out i{ background:rgba(255,255,255,.4); }
/* Precio abajo, sobre el divisor: el dato de cierre, no el de entrada. */
.s01-pcard-price{ display:flex; align-items:baseline; gap:5px; padding:0 16px 10px; font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:26px; line-height:1; letter-spacing:-.02em; color:var(--ink); }
.s01-pcard-price span{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; letter-spacing:.64px; text-transform:uppercase; color:var(--gris-medio); }
.s01-slider-ctrls{ display:flex; gap:12.8px; }
.s01-sctrl{ width:54.8px; height:39.31px; background:var(--paper); border-radius:2.4px; display:flex; align-items:center; justify-content:center; cursor:pointer; border:0; color:var(--ink); transition:opacity .2s ease; }
.s01-sctrl:disabled{ opacity:.2; cursor:default; }
@media (max-width:900px){
  .s01-show-title{ font-size:56px; line-height:.86; letter-spacing:-2px; }
  .s01-show-content{ padding:32px 24px 84px; gap:40px; }
  .s01-show-row,.s01-show-p{ width:100%; max-width:352px; }
  .s01-slide{ width:min(78vw, 337.34px); }
  .s01-pcard-visual{ width:auto; height:auto; aspect-ratio:1; margin:0 16px; }
}
@media (prefers-reduced-motion:reduce){ .s01-show-photo-t{ transform:none !important; } }
/* ——— 4 · Diferenciadores · spec medido de goodlifemeds `.medical-section` @1440 ———
   No son dos columnas: son DOS CAPAS superpuestas. Detrás, un recorte PNG con alpha que mide
   115% de su recuadro con overflow:hidden (sobresale 146.8px por abajo) + parallax yPercent 0→15.
   Delante, una grilla de 12 col donde ningún bloque llena su fila, con tarjetas `backdrop-filter`
   que toman el color de lo que tienen detrás. Filas medidas: 192.78 / 253.75 / 455.08. */
/* Separación con MARGIN, no padding: el recorte de atrás usa `height:90%` y el padding entraría
   en ese cálculo, agrandando la foto (daba 1257.7 en vez de los 1125.23 medidos). */
.s01-diff{ position:relative; margin-top:128px; padding:0 24px 160px; color:var(--ink); }
.s01-diff-gradient{ position:absolute; inset:auto 0 0; height:80%; z-index:1; background:linear-gradient(180deg, var(--paper), #E4EAF6); }
/* inset con left:0, no `auto`: con left:auto la caja encoge al contenido y el `width:80%` del
   target se resuelve contra un contenedor equivocado (daba 644 en vez de 979.19). */
/* Anclado al pie: subir el recuadro dejaba un hueco debajo y la figura flotaba.
   La altura de la cabeza se regula en el asset (relleno transparente superior), no aquí. */
.s01-diff-trigger{ position:absolute; inset:auto 0 0 0; height:90%; padding-right:15%; display:flex; justify-content:flex-end; align-items:flex-start; overflow:hidden; z-index:1; }
.s01-diff-target{ width:80%; height:115%; position:relative; z-index:5; will-change:transform; }
.s01-diff-target img{ width:100%; height:100%; object-fit:contain; display:block; }
.s01-diff-grid{ position:relative; z-index:5; display:grid; grid-template-columns:repeat(12,1fr); gap:12.8px; grid-template-rows:192.78px 253.75px 455.08px; }
.s01-diff-head{ grid-area:1 / 2 / 2 / 9; padding:28px 0; }
.s01-diff-head h2{ width:40vw; font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:72px; line-height:68.4px; letter-spacing:-1.44px; color:var(--ink); margin:0; }
.s01-diff-para{ grid-area:2 / 2 / 3 / 5; display:flex; flex-direction:column; align-items:flex-start; gap:24px; padding-top:24px; border-top:1px dotted var(--gris-claro); }
.s01-diff-para .is-bold{ font-size:16px; line-height:22.4px; font-weight:600; color:#54595F; margin:0; }
.s01-diff-para p{ font-size:16px; line-height:22.4px; color:#54595F; margin:0; }
.s01-diff-btn{ margin-top:24px; background:var(--azul-fuerte); color:#fff; font-size:16px; font-weight:500; line-height:20px; padding:12px 24px 12.8px; border-radius:2.4px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:background .2s ease; }
.s01-diff-btn:hover{ background:var(--azul-navy); }
/* Las tarjetas: mismo blur/geometría que la referencia; el contenido pasa de UI animada a nuestras cifras. */
.s01-diff-slot1{ grid-area:2 / 8 / 3 / 11; align-self:end; }
.s01-diff-slot2{ grid-area:3 / 4 / 4 / 7; padding-top:240px; }
.s01-diff-slot3{ grid-area:3 / 9 / 4 / 13; padding-top:240px; }
.s01-diff-box{ background:rgba(0,0,0,.25); -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); border-radius:9.6px; color:#fff; display:flex; flex-direction:column; justify-content:center; }
.s01-diff-box.is-1{ width:72%; aspect-ratio:3/2; padding:12.8px 20px; }
.s01-diff-box.is-2{ width:100%; aspect-ratio:5.5/2; padding:0 20px; background:rgba(0,0,0,.15); }
.s01-diff-box.is-3{ width:85%; aspect-ratio:3.6/2; padding:0 24px; }
.s01-diff-big{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:40px; line-height:1; letter-spacing:-.03em; }
.s01-diff-box.is-2 .s01-diff-big{ font-size:32px; }
.s01-diff-desc{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:14px; letter-spacing:.64px; text-transform:uppercase; color:rgba(255,255,255,.8); }
.s01-diff-box.is-1,.s01-diff-box.is-3{ justify-content:space-between; padding-top:16px; padding-bottom:16px; }
.s01-diff-box.is-2{ flex-direction:row; align-items:center; justify-content:space-between; gap:20px; }
/* min-width:auto impedía que el texto encogiera y a 1280 (cápsula de 298.4) empujaba el
   recurso 36px fuera. Cuarta aparición del mismo defecto en el proyecto. */
.s01-diff-box.is-2 .s01-diff-txt{ min-width:0; }
.s01-diff-box.is-2 .s01-diff-txt > *{ overflow-wrap:anywhere; }
.s01-diff-txt{ display:flex; flex-direction:column; gap:6px; }

/* ——— Recursos dentro de las cápsulas ———
   La referencia llena sus blur-boxes con Lotties (gráfica de peso, mensaje del médico, tarjeta de
   producto). Aquí el equivalente honesto para B2B: cada gráfico DICE algo, no decora.
   Guardrail: diagramas informativos, no decorativos. */

/* [48 h] línea de tiempo real del compromiso: pedido → confirmación → despacho */
.s01-viz-time{ display:flex; align-items:center; margin-top:14px; }
.s01-viz-dot{ flex:none; width:7px; height:7px; border-radius:50%; border:1px solid rgba(255,255,255,.55); }
.s01-viz-dot.is-on{ background:#fff; border-color:#fff; }
.s01-viz-line{ flex:1 1 auto; height:1px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 2px, transparent 2px 6px); }
.s01-viz-line.is-on{ background:rgba(255,255,255,.9); }
.s01-viz-labels{ display:flex; justify-content:space-between; margin-top:7px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:8.5px; letter-spacing:.5px; color:rgba(255,255,255,.7); }

/* [COFEPRIS] ficha de documento verificado, como el "inbox" de la referencia */
.s01-viz-doc{ flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:12px 14px; border-radius:6px; background:rgba(255,255,255,.14); }
.s01-viz-doc svg{ flex:none; display:block; }
.s01-viz-doc-t{ display:flex; flex-direction:column; gap:3px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:8.5px; letter-spacing:.5px; text-transform:uppercase; line-height:1.1; }
.s01-viz-doc-t span:first-child{ color:rgba(255,255,255,.72); }
.s01-viz-ok{ display:inline-flex; align-items:center; gap:4px; color:#fff; }
.s01-viz-ok i{ width:5px; height:5px; border-radius:50%; background:var(--verde); display:inline-block; }

/* [20 años] barras de instituciones atendidas por año — la última, la actual, destacada */
.s01-viz-bars{ display:flex; align-items:flex-end; gap:3px; height:46px; margin-top:14px; }
.s01-viz-bars i{ flex:1 1 0; height:var(--h); border-radius:1px; background:rgba(255,255,255,.38); }
.s01-viz-bars i:last-child{ background:#fff; }
@media (max-width:1024px){
  .s01-diff{ padding:64px var(--edge) 80px; }
  .s01-diff-grid{ display:flex; flex-direction:column; gap:24px; grid-template-rows:none; }
  .s01-diff-head,.s01-diff-para,.s01-diff-slot1,.s01-diff-slot2,.s01-diff-slot3{ grid-area:auto; padding-top:0; align-self:auto; }
  .s01-diff-head h2{ width:100%; font-size:40px; line-height:40px; letter-spacing:-.8px; }
  .s01-diff-para{ padding-top:24px; }
  .s01-diff-box.is-1,.s01-diff-box.is-2,.s01-diff-box.is-3{ width:100%; aspect-ratio:auto; padding:20px; }
  .s01-diff-trigger{ opacity:.28; }
}
.s01-diff-note{ position:absolute; left:24px; bottom:24px; z-index:6; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:9.6px; letter-spacing:.64px; text-transform:uppercase; color:var(--ink); background:rgba(26,34,48,.08); border-radius:2.4px; padding:6.4px 8px 4.8px; }
@media (prefers-reduced-motion:reduce){ .s01-diff-target{ transform:none !important; } }
/* ——— 5 · Cómo cotizas · spec medido de goodlifemeds `.process-section` @1440 ———
   Escalera de 3 cajas con backdrop-blur sobre foto a sangre, unidas por conectores punteados.
   Grilla 12 col × 104px gap 12.8 · cajas 688×171.5 · [01] col 1→7, [02] col 4→10, [03] col 7→13. */
.s01-proc{ padding:12.8px; }
.s01-proc-card{ position:relative; overflow:hidden; border-radius:9.6px; min-height:900px; padding:0 12.8px 12.8px; }
.s01-proc-bg{ position:absolute; inset:0; z-index:1; }
.s01-proc-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Velo con peso arriba: la referencia no lo lleva, pero nuestra foto tiene un tragaluz en la
   zona alta que se comía el titular. El degradado hunde esa franja y deja el pie casi limpio,
   para que la caja [03] no se pierda contra lo oscuro. */
.s01-proc-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.52) 32%, rgba(0,0,0,.26) 62%, rgba(0,0,0,.14) 100%); }
.s01-proc-grid{ position:relative; z-index:5; display:grid; grid-template-columns:repeat(12,1fr); gap:12.8px; }
.s01-proc-head{ grid-column:1 / 7; display:flex; flex-direction:column; align-items:flex-start; gap:128px; padding:56px 0 128px 40px; }
/* El párrafo va ARRIBA del titular (invertido respecto a la sección de productos: varía el ritmo) */
.s01-proc-lede{ font-size:20.4px; line-height:27px; letter-spacing:-.32px; color:var(--paper); width:352px; margin:0; }
.s01-proc-title{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:122.4px; line-height:97.92px; letter-spacing:-4.32px; color:var(--paper); margin:0; }
.s01-proc-box{ display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:16px; padding:24px; background:rgba(0,0,0,.15); border-radius:9.6px; -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); min-height:171.5px; }
/* nth-child, no nth-of-type: todos los hijos de la grilla son <div>, así que of-type no discrimina. */
.s01-proc-grid > *:nth-child(2){ grid-column:1 / 7; }
.s01-proc-grid > *:nth-child(4){ grid-column:4 / 10; }
.s01-proc-grid > *:nth-child(6){ grid-column:7 / 13; }
.s01-proc-boxhead{ display:flex; flex-direction:column; justify-content:space-between; gap:56px; }
.s01-proc-n{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; color:#fff; }
.s01-proc-box h3{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:28px; line-height:28px; letter-spacing:-.32px; color:var(--paper); margin:0; }
.s01-proc-boxtext{ padding-left:12.8px; }
.s01-proc-boxtext p{ font-size:16px; line-height:22.4px; color:var(--paper); margin:0; }
/* Conectores punteados (medidos uno por uno, no deducidos):
   el 1º lleva el SVG ARRIBA del bloque y baja→derecha; el 2º lo lleva ABAJO y sube→izquierda.
   Cada SVG ocupa media caja (padding 50%) y media altura de fila (85.75 de 171.5). */
.s01-proc-joint{ display:flex; color:var(--paper); }
.s01-proc-grid > *:nth-child(3){ grid-column:1 / 4; padding-left:50%; align-items:flex-start; }
.s01-proc-grid > *:nth-child(5){ grid-column:10 / 13; padding-right:50%; align-items:flex-end; }
/* CTA de la sección: ocupa la esquina inferior izquierda que la escalera deja vacía
   (fila 4, col 1→6, ya que [03] vive en 7→13). Grande, porque es el remate de la sección. */
.s01-proc-cta{ grid-column:1 / 6; grid-row:4 / 5; align-self:end; justify-self:start; display:inline-flex; align-items:center; gap:14px; background:var(--paper); color:var(--azul-fuerte); font-family:var(--font-ui); font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1; padding:24px 34px; border-radius:2.4px; text-decoration:none; transition:background .22s ease, color .22s ease, gap .22s cubic-bezier(.22,1,.36,1); }
.s01-proc-cta:hover{ background:var(--azul-fuerte); color:#fff; gap:20px; }
.s01-proc-cta svg{ flex:none; }
.s01-proc-joint svg{ width:100%; height:85.75px; overflow:visible; }
.s01-proc-joint path{ stroke:currentColor; stroke-width:1; fill:none; stroke-dasharray:2 4; }
.s01-proc-grid > *:nth-child(3) path{ stroke-dashoffset:-28px; }
.s01-proc-grid > *:nth-child(5) path{ stroke-dashoffset:28px; }
@media (max-width:1024px){
  .s01-proc-card{ min-height:0; }
  .s01-proc-grid{ display:flex; flex-direction:column; gap:12.8px; }
  .s01-proc-head{ padding:32px 0 56px 16px; gap:56px; }
  .s01-proc-title{ font-size:56px; line-height:.9; letter-spacing:-2px; }
  .s01-proc-lede{ width:100%; max-width:352px; }
  .s01-proc-box{ grid-template-columns:1fr; align-items:start; gap:20px; }
  .s01-proc-boxhead{ gap:12px; }
  .s01-proc-boxtext{ padding-left:0; }
  .s01-proc-joint{ display:none; }
}
@media (max-width:1024px){ .s01-catgrid{ grid-template-columns:repeat(2,1fr); } .s01-prodgrid{ grid-template-columns:repeat(2,1fr); } .s01-sec-title{ font-size:36px; } .s01-diff-grid{ grid-template-columns:repeat(2,1fr); } .s01-steps{ grid-template-columns:1fr; } }
@media (max-width:767px){ .s01-catgrid{ grid-template-columns:1fr; } .s01-sec{ padding:64px var(--edge); } .s01-sec-title{ font-size:30px; } .s01-diff-grid{ grid-template-columns:1fr; } }
/* 7 · Statement editorial */
.s01-statement{ padding:108px var(--edge); }
.s01-statement .eyebrow{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--azul-fuerte); font-weight:700; margin-bottom:26px; }
.s01-statement p{ font-family:"Neue Montreal",sans-serif; font-weight:400; font-size:65px; line-height:1.1; letter-spacing:-.025em; max-width:1240px; margin:0; color:var(--ink); }
.s01-statement em{ font-style:normal; color:var(--azul-fuerte); }
/* ——— 8 · Prueba social · spec medido de goodlifemeds `.testimonial-section` @1440 ———
   Collage asimétrico de 4 tarjetas + titular con el cluster de avatares EMBEBIDO en el texto.
   Grilla 12 col × 104.27 gap 12.8 · tarjeta alta 338×508 · tarjeta baja 221×332 centrada en 508. */
/* La referencia no lleva padding vertical (la sección vecina lo aporta); aquí sí hace falta
   porque encima queda la tarjeta del proceso, que termina a ras. */
.s01-testi{ padding:104px 24px; }
.s01-testi-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:12.8px; align-items:start; }
.s01-testi-left,.s01-testi-right{ display:grid; grid-template-columns:repeat(5,1fr); gap:12.8px; }
.s01-testi-left{ grid-column:1 / 6; }
/* 7/12, no 7/13: la referencia mide 572.53 = 5 columnas. Col 6 y col 12 quedan de aire. */
.s01-testi-right{ grid-column:7 / 12; padding-top:80px; row-gap:80px; }
.s01-testi-slot{ grid-column:span 2; display:flex; flex-direction:column; justify-content:center; min-height:507.6px; }
/* GIRO PROPIO: la referencia llena el collage con video testimonios. Un proveedor B2B de insumos
   no los tiene, así que se conserva la geometría exacta y las tarjetas pasan a ser CITAS de texto. */
.s01-testi-card{ position:relative; overflow:hidden; border-radius:9.6px; background:#EFF2F9; display:flex; flex-direction:column; justify-content:space-between; padding:28px; }
.s01-testi-card.is-tall{ grid-column:span 3; height:507.6px; }
.s01-testi-card.is-small{ height:331.98px; }
/* Color-señal = puntuación: UNA sola tarjeta en azul por sección, nunca repartido. */
.s01-testi-card.is-signal{ background:var(--azul-fuerte); color:#fff; }
.s01-testi-mark{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:56px; line-height:.6; color:var(--azul-medio); opacity:.5; }
.s01-testi-card.is-signal .s01-testi-mark{ color:#fff; opacity:.55; }
.s01-testi-q{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; letter-spacing:-.32px; color:var(--ink); margin:0; }
.s01-testi-card.is-tall .s01-testi-q{ font-size:28px; line-height:31px; }
.s01-testi-card.is-small .s01-testi-q{ font-size:20.8px; line-height:23.5px; }
.s01-testi-card.is-signal .s01-testi-q{ color:#fff; }
.s01-testi-by{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:14px; letter-spacing:.64px; text-transform:uppercase; color:var(--azul-medio); }
.s01-testi-by b{ display:block; font-weight:400; color:var(--ink); font-family:var(--font-ui); font-size:15px; letter-spacing:-.02em; text-transform:none; margin-bottom:2px; }
.s01-testi-card.is-signal .s01-testi-by{ color:rgba(255,255,255,.75); }
.s01-testi-card.is-signal .s01-testi-by b{ color:#fff; }
.s01-testi-headwrap{ grid-column:1 / 6; display:flex; flex-direction:column; align-items:flex-start; gap:28px; }
/* El titular fluye en línea y el cluster de avatares es un elemento más del renglón. */
.s01-testi-title{ display:flex; flex-wrap:wrap; align-items:center; gap:0 12.8px; font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:56px; line-height:56px; letter-spacing:-.96px; color:var(--ink); margin:0; }
.s01-testi-avatars{ display:flex; align-items:center; }
.s01-testi-av{ width:48px; height:57.6px; border-radius:9.6px; border:1px solid var(--paper); overflow:hidden; flex:none; }
.s01-testi-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.s01-testi-av:nth-child(1){ transform:rotate(-8deg); }
.s01-testi-av:nth-child(2){ transform:rotate(2deg); margin-left:-16px; }
.s01-testi-av:nth-child(3){ transform:rotate(12deg); margin-left:-16px; }
.s01-testi-proof{ display:flex; align-items:center; gap:14px; font-size:15px; color:#5A6472; }
.s01-testi-proof strong{ color:var(--ink); font-weight:700; }
.s01-testi-stars{ color:var(--azul-fuerte); letter-spacing:2px; font-size:16px; }
@media (max-width:1024px){
  .s01-testi{ padding:0 var(--edge); }
  .s01-testi-grid{ display:flex; flex-direction:column; gap:12.8px; }
  .s01-testi-left,.s01-testi-right{ display:grid; grid-template-columns:1fr 1fr; gap:12.8px; padding-top:0; row-gap:12.8px; }
  .s01-testi-slot{ grid-column:auto; min-height:0; }
  .s01-testi-card.is-tall{ grid-column:auto; height:auto; aspect-ratio:2/3; }
  .s01-testi-card.is-small{ height:auto; aspect-ratio:2/3; }
  .s01-testi-headwrap{ grid-column:1 / -1; }
  .s01-testi-title{ font-size:36px; line-height:38px; letter-spacing:-.6px; gap:0 8px; }
  .s01-testi-av{ width:36px; height:43px; }
}
@media (prefers-reduced-motion:reduce){ .s01-testi-play{ transition:none; } }
/* ——— 9 · Blog · spec medido de goodlifemeds `.guide-section` @1440 ———
   La asimetría NO viene de tamaños raros: viene de dejar VACÍAS las columnas 1–4 de la fila 2.
   Grilla 12 col (104.27) · column-gap 12.8 · row-gap 56 · titular centrado a 128px del grid.
   Fila 1: texto 1→4 · retrato 2.8/3 en 4→7 · apaisada doble ancho 3/2 en 7→13.
   Fila 2: tres 3/2 iguales en 4→7, 7→10, 10→13. */
.s01-blog{ display:flex; flex-direction:column; align-items:center; gap:128px; padding:128px 24px; }
.s01-blog-display{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:122.4px; line-height:97.92px; letter-spacing:-4.32px; color:var(--ink); margin:0; text-align:center; }
.s01-bloggrid{ width:100%; display:grid; grid-template-columns:repeat(12,1fr); column-gap:12.8px; row-gap:56px; }
.s01-blog-intro{ grid-column:1 / 4; display:flex; flex-direction:column; align-items:flex-start; gap:24px; border-top:1px dotted var(--gris-claro); padding:24px 20% 0 0; }
.s01-blog-intro h3{ font-family:"Neue Montreal",sans-serif; font-weight:400; font-size:22.4px; line-height:24.64px; letter-spacing:-.32px; color:var(--ink); margin:0; }
.s01-blog-intro p{ font-size:16px; line-height:22.4px; color:#54595F; margin:0; }
.s01-blog-btn{ margin-top:24px; background:var(--azul-fuerte); color:#fff; font-size:16px; font-weight:500; line-height:20px; padding:12px 24px 12.8px; border-radius:2.4px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:background .2s ease; }
.s01-blog-btn:hover{ background:var(--azul-navy); }
.s01-blogcard{ text-decoration:none; color:inherit; display:flex; flex-direction:column; align-items:flex-start; gap:24px; width:100%; }
.s01-blogcard:nth-of-type(1){ grid-column:4 / 7; }
.s01-blogcard:nth-of-type(2){ grid-column:7 / 13; }
.s01-blogcard:nth-of-type(3){ grid-column:4 / 7; }
.s01-blogcard:nth-of-type(4){ grid-column:7 / 10; }
.s01-blogcard:nth-of-type(5){ grid-column:10 / 13; }
.s01-blogcard-img{ position:relative; width:100%; aspect-ratio:3/2; border-radius:9.6px; overflow:hidden; background:#E7ECF1; }
/* La única en retrato: es lo que desalinea los pies de foto y crea el ritmo editorial. */
.s01-blogcard.is-portrait .s01-blogcard-img{ aspect-ratio:2.8/3; }
.s01-blogcard-t{ position:absolute; inset:0; overflow:hidden; }
.s01-blogcard-target{ width:100%; height:115%; will-change:transform; }
.s01-blogcard-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.s01-blog-info{ display:flex; flex-direction:column; gap:12.8px; max-width:480px; padding-right:12%; }
.s01-blogcard.is-wide .s01-blog-info{ width:60%; }
.s01-blogcard h3{ font-family:"Neue Montreal",sans-serif; font-weight:400; font-size:22.4px; line-height:24.64px; letter-spacing:-.32px; color:var(--ink); margin:0; transition:color .16s ease; }
.s01-blogcard:hover h3{ color:var(--azul-fuerte); }
.s01-blog-read{ display:inline-flex; align-items:center; gap:8px; font-size:16px; line-height:20px; color:var(--ink); }
.s01-blogcard:hover .s01-blog-read{ color:var(--azul-fuerte); }
@media (max-width:1024px){
  .s01-blog{ gap:56px; padding:64px var(--edge); }
  .s01-blog-display{ font-size:56px; line-height:.9; letter-spacing:-2px; }
  .s01-bloggrid{ display:flex; flex-direction:column; gap:40px; }
  .s01-blogcard,.s01-blog-intro{ grid-column:auto; }
  .s01-blogcard.is-portrait .s01-blogcard-img{ aspect-ratio:3/2; }
  .s01-blogcard.is-wide .s01-blog-info{ width:100%; }
  .s01-blog-intro{ padding-right:0; }
}
@media (prefers-reduced-motion:reduce){ .s01-blogcard-target{ transform:none !important; } }
@media (max-width:1024px){ .s01-testi-grid,.s01-bloggrid{ grid-template-columns:1fr; } .s01-statement p{ font-size:32px; } }
/* 10 · CTA de cierre */
/* ——— 10 · CTA de cierre ———
   Vocabulario de la referencia (contenedor r9.6 · display 122.4/-4.32 · cápsula backdrop-blur 30
   · etiqueta mono entre corchetes · punteados 2/4 · botón r2.4), pero con FIRMA DISTINTA: las otras
   tres secciones con foto la usan nítida; aquí la foto va desenfocada de fábrica y funciona como
   campo de color, no como imagen. Así no es el cuarto contenedor fotográfico de la página. */
/* Radio e inset homogéneos con el footer (panel 22px, tarjeta interna 14px, laterales 20px):
   son las dos losas grandes del cierre y van una encima de la otra. */
.s01-cta-band{ padding:12.8px 20px; }
.s01-cta-panel{ position:relative; overflow:hidden; border-radius:22px; min-height:440px; display:grid; grid-template-columns:repeat(12,1fr); gap:12.8px; align-content:space-between; padding:48px 56px; color:#fff; background:var(--azul-navy); }
.s01-cta-bg{ position:absolute; inset:0; z-index:1; }
.s01-cta-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Viñeta: hunde las esquinas para que el texto se sostenga sin bajar el color del centro. */
.s01-cta-bg::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 22% 30%, rgba(42,45,110,0) 0%, rgba(20,22,58,.55) 62%, rgba(15,17,45,.85) 100%); }
.s01-cta-label{ position:relative; z-index:5; grid-column:1 / 7; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; color:rgba(255,255,255,.82); }
/* Condensado: el párrafo ES el titular. Fila con el texto a la izquierda y las acciones a la
   derecha, alineadas al pie del bloque para que compartan la misma línea base visual. */
.s01-cta-row{ position:relative; z-index:5; grid-column:1 / 13; display:flex; align-items:flex-end; justify-content:space-between; gap:24px 64px; flex-wrap:wrap; }
.s01-cta-panel h2{ flex:1 1 520px; max-width:19ch; font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:56px; line-height:58px; letter-spacing:-1.2px; color:#fff; margin:0; text-wrap:balance; }
/* La cápsula: mismo cristal que las de Diferenciadores y Cómo cotizas. */
.s01-cta-actions{ flex:none; display:flex; gap:8px; flex-wrap:wrap; }
/* Radio 4px = el mismo del botón del footer. Hover en `--azul-fuerte`, que es el patrón de CTA
   del sitio (igual que el del header); `--azul-claro` se leía como un azul ajeno a la marca. */
.s01-cta-primary{ background:var(--paper); color:var(--azul-fuerte); border:0; border-radius:4px; padding:16px 28px; font-family:var(--font-ui); font-size:16px; font-weight:600; line-height:20px; letter-spacing:-.02em; text-decoration:none; cursor:pointer; transition:background .22s ease, color .22s ease; }
.s01-cta-primary:hover{ background:var(--azul-fuerte); color:#fff; }
.s01-cta-secondary{ background:rgba(255,255,255,.12); color:#fff; border:0; border-radius:4px; padding:16px 28px; font-family:var(--font-ui); font-size:16px; font-weight:500; line-height:20px; letter-spacing:-.02em; text-decoration:none; cursor:pointer; transition:background .22s ease; }
.s01-cta-secondary:hover{ background:rgba(255,255,255,.22); }
/* Fila de garantías: punteado 2/4, el mismo de los conectores de Cómo cotizas. */
.s01-cta-facts{ position:relative; z-index:5; grid-column:1 / 13; display:flex; flex-wrap:wrap; align-items:center; gap:14px 48px; padding-top:20px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 2px, transparent 2px 6px) top left / 100% 1px no-repeat; }
.s01-cta-fact{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:14px; letter-spacing:.64px; text-transform:uppercase; color:rgba(255,255,255,.78); }
.s01-cta-fact b{ color:#fff; font-weight:400; }
/* 11 · Footer */
/* Footer (estructura medida de goodlifemeds, identidad Sumimedic) */
.s01-footer{ background:var(--paper); padding:10px 20px 0; }
.s01-ft-panel{ background:var(--ink); color:#fff; border-radius:22px; padding:52px clamp(40px,7vw,120px) 120px; }
.s01-ft-top{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.s01-ft-logo{ grid-column:2; justify-self:center; }
.s01-ft-logo img{ height:34px; display:block; }
.s01-ft-social{ grid-column:3; justify-self:end; display:flex; gap:12px; }
.s01-ft-social a{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .18s ease; }
.s01-ft-social a:hover{ background:var(--azul-fuerte); }
.s01-ft-hero{ font-family:"Neue Montreal",sans-serif; font-weight:400; font-size:78px; line-height:.98; letter-spacing:-.03em; text-align:center; margin:152px 0 96px; }
.s01-ft-main{ display:grid; grid-template-columns:1.35fr 1fr; gap:56px; align-items:start; padding-bottom:64px; }
.s01-ft-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.s01-ft-col{ border-top:1px solid rgba(255,255,255,.16); padding-top:22px; }
.s01-ft-h{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:700; margin-bottom:16px; }
.s01-ft-col a{ display:block; font-size:15px; color:rgba(255,255,255,.82); text-decoration:none; padding:5px 0; transition:color .16s ease; }
.s01-ft-col a:hover{ color:#fff; }
.s01-ft-cta{ display:flex; flex-direction:column; align-items:flex-end; gap:16px; }
.s01-ft-cta-card{ width:100%; min-height:340px; background:var(--azul-fuerte); border-radius:14px; padding:32px 34px; display:flex; flex-direction:column; justify-content:space-between; text-decoration:none; color:#fff; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.s01-ft-cta-card:hover{ transform:translateY(-3px); box-shadow:0 22px 46px rgba(53,57,142,.38); background:var(--azul-medio); }
.s01-ft-cta-eyebrow{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.s01-ft-cta-big{ font-family:"Neue Montreal",sans-serif; font-weight:400; font-size:52px; line-height:.96; letter-spacing:-.02em; display:inline-flex; align-items:flex-end; gap:14px; }
.s01-ft-cta-arrow{ flex:none; margin-bottom:8px; transition:transform .2s ease; }
.s01-ft-cta-card:hover .s01-ft-cta-arrow{ transform:translateX(5px); }
.s01-ft-login{ display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--ink); border-radius:4px; padding:15px 28px; font-size:15px; font-weight:600; letter-spacing:-.01em; text-decoration:none; transition:transform .18s ease; }
.s01-ft-login:hover{ transform:translateY(-2px); }
.s01-ft-contact{ display:grid; grid-template-columns:1fr 1fr; gap:56px; max-width:58%; padding-bottom:52px; }
.s01-ft-contact > div{ border-top:1px solid rgba(255,255,255,.16); padding-top:22px; }
.s01-ft-contact a{ font-size:15px; color:rgba(255,255,255,.82); text-decoration:none; }
.s01-ft-contact a:hover{ color:#fff; }
.s01-ft-news{ display:flex; align-items:center; justify-content:space-between; gap:30px; border-top:1px solid rgba(255,255,255,.16); padding-top:28px; }
.s01-ft-badge{ font-size:12px; letter-spacing:.03em; color:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:11px 15px; }
.s01-ft-form{ display:flex; align-items:center; gap:16px; border-bottom:1px solid rgba(255,255,255,.32); padding-bottom:8px; min-width:360px; }
.s01-ft-form input{ flex:1; background:transparent; border:0; color:#fff; font-family:var(--font-ui); font-size:16px; letter-spacing:-.02em; outline:none; }
.s01-ft-form input::placeholder{ color:rgba(255,255,255,.45); }
.s01-ft-form button{ background:transparent; border:0; color:#fff; font-family:var(--font-ui); font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap; }
.s01-ft-form button:hover{ color:var(--azul-claro); }
/* Legal FUERA del panel, centrado, sobre el fondo claro */
.s01-ft-legal{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 22px; padding:26px 20px 36px; text-align:center; font-size:13px; color:var(--gris-medio); }
.s01-ft-legal a{ color:var(--gris-medio); text-decoration:none; }
.s01-ft-legal a:hover{ color:var(--azul-fuerte); }
@media (max-width:1024px){ .s01-cta-panel h2{ font-size:34px; line-height:36px; letter-spacing:-.6px; max-width:none; } .s01-cta-row{ align-items:flex-start; } .s01-cta-panel{ padding:72px 26px; } .s01-ft-hero{ font-size:44px; margin:40px 0 56px; } .s01-ft-main{ grid-template-columns:1fr; } .s01-ft-cols{ grid-template-columns:1fr 1fr; } .s01-ft-contact{ max-width:100%; } .s01-ft-news{ flex-direction:column; align-items:stretch; } .s01-ft-form{ min-width:0; } .s01-ft-top{ grid-template-columns:auto 1fr; } .s01-ft-logo{ grid-column:1; justify-self:start; } .s01-ft-social{ grid-column:2; } }
/* Pie del hero: un solo titular descriptivo (sin párrafo), acciones debajo, y la franja de
   confianza al fondo a todo el ancho. */
/* Contenido anclado abajo a la izquierda, con la franja de datos justo debajo. */
.s01-hero-foot{ position:absolute; left:var(--edge); right:var(--edge); bottom:40px; z-index:2; display:flex; flex-direction:column; gap:44px; }
.s01-content{ max-width:1040px; text-align:left; }
.s01-title{ margin:0 0 32px; font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:60px; line-height:60px; letter-spacing:-.025em; color:var(--hero-headline); text-wrap:balance; }
.s01-hero-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.s01-cta-lg{ display:inline-block; padding:16px 30px; font-size:17px; }
/* Secundario en cristal: no compite con el primario y funciona sobre cualquier fotograma. */
.s01-cta-ghost{ display:inline-block; padding:16px 30px; font-size:17px; font-weight:600; letter-spacing:-.02em; text-decoration:none; border-radius:999px; color:#fff; background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); transition:background .22s ease; }
.s01-cta-ghost:hover{ background:rgba(255,255,255,.26); }
.s01-stats{ display:flex; flex-wrap:wrap; align-items:stretch; gap:0 56px; padding-top:20px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 2px, transparent 2px 6px) top left / 100% 1px no-repeat; }
.s01-stat{ display:flex; align-items:baseline; gap:9px; }
.s01-stat-big{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:22px; font-weight:400; letter-spacing:-.02em; }
.s01-stat-small{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; color:rgba(250,252,252,.76); }
@media (max-width:1024px){ .t-salud01{ --pad-x:24px; } .s01-links{ display:none; } .s01-hero-foot{ gap:28px; bottom:28px; } .s01-title{ font-size:40px; line-height:42px; } .s01-stats{ gap:12px 28px; } }
@media (max-width:767px){ .t-salud01{ --pad-x:18px; } .s01-login{ display:none; } .s01-title{ font-size:32px; line-height:34px; margin-bottom:22px; } .s01-hero-actions{ gap:8px; } .s01-cta-lg,.s01-cta-ghost{ padding:14px 22px; font-size:15px; } .s01-stat{ gap:7px; } .s01-stat-big{ font-size:17px; }
  /* Dos columnas de 1fr no bajan de min-content, y los correos no parten: en 390px las dos
     columnas sumaban más que el ancho disponible y desbordaban el documento. */
  .s01-ft-contact{ grid-template-columns:1fr; gap:28px; }
  .s01-ft-contact a{ overflow-wrap:anywhere; }
  /* El nav gasta 64px solo en los dos huecos de su grid de 3 columnas; en 390px no sobran. */
  .s01-nav{ gap:10px; } .s01-actions{ gap:12px; }
  /* min-width:auto impedía que la tarjeta bajara de su ancho mínimo (328.6) dentro de una
     columna de 270: se derramaba fuera del panel oscuro sin generar overflow de documento. */
  .s01-ft-cta{ align-items:stretch; min-width:0; }
  .s01-ft-cta-card{ min-width:0; }
  /* A 52px el texto ya está en su ancho mínimo dentro de la caja de 202, así que la flecha
     (hermana en el inline-flex) se derramaba fuera de la tarjeta. */
  .s01-ft-cta-big{ font-size:38px; flex-wrap:wrap; }
  .s01-ft-cta-arrow{ margin-left:auto; }
  .s01-ft-login{ align-self:flex-end; }
  /* flex:1 no baja del min-content del input y empujaba al botón fuera del panel. */
  .s01-ft-form input{ min-width:0; } }

/* Fluted glass */
.fg-wrap{ position:absolute; inset:0; overflow:hidden; }
.fg-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
/* Poster: pinta al instante mientras el primer video carga; se desvanece al reproducir. */
.fg-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; pointer-events:none; transition:opacity .5s ease; }

/* ── WhatsApp flotante ──
   z-index por debajo del chip de éxito (2147483000) y por encima del resto: el chip es efímero y
   no debe quedar tapado. Se aparta del borde inferior en móvil para no chocar con el chip, que
   emerge centrado abajo. Verde de MARCA de WhatsApp (#25D366), deliberadamente distinto del
   --verde del sistema, que aquí solo significa "disponible". */
.s01-wa{ position:fixed; right:24px; bottom:24px; z-index:2147482000; width:56px; height:56px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:#25D366; color:#fff; text-decoration:none;
  box-shadow:0 10px 28px rgba(15,22,32,.26); transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease; }
.s01-wa:hover{ transform:scale(1.06); box-shadow:0 14px 34px rgba(15,22,32,.32); }
.s01-wa:focus-visible{ outline:2px solid var(--azul-fuerte); outline-offset:3px; }
/* Con el menú lateral abierto el sitio se encapsula: el flotante estorbaría encima del panel. */
.t-salud01.menu-open .s01-wa{ opacity:0; pointer-events:none; }
.s01-wa{ transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, opacity .3s ease; }
@media (max-width:767px){ .s01-wa{ right:16px; bottom:16px; width:52px; height:52px; } }
@media (prefers-reduced-motion:reduce){ .s01-wa{ transition:opacity .2s linear; } .s01-wa:hover{ transform:none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   MOTOR DE REVEAL EN SCROLL · salud-01
   Fuente única: este archivo. Las otras 14 páginas se generan desde aquí, así
   que el CSS y el script viajan con ellas sin duplicarse.

   Regla nº1 de robustez: el estado oculto NO vive en la hoja de estilos a
   secas. Cuelga de .rv-armado / .rv-listo, dos clases que pone el propio JS
   sobre <html>. Sin JS —o si el motor revienta— no hay ninguna regla que
   pueda ocultar nada: la página se ve entera y quieta.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* El movimiento se hace notar con RECORRIDO, no con lentitud. A 1150ms se apreciaba, pero se
     sentía arrastrado; y al acortarlo con poco recorrido volvía el parpadeo. La salida es la
     contraria: sale de más abajo y tarda menos. 60px es distancia suficiente para que el ojo
     siga el trayecto aunque dure 880ms. */
  --rv-dur:880ms;
  --rv-blur:14px;
  --rv-y:60px;                           /* emerge de bastante más abajo: el gesto se ve */
  /* Desviación deliberada del ease del sistema, y este es el motivo:
     cubic-bezier(.16,1,.3,1) es un ease-out muy agresivo — resuelve ~80% del recorrido en el
     primer 30% del tiempo. Es perfecto para interacción (responde al instante), pero en una
     aparición hace que el movimiento se acabe enseguida y el resto de la duración no se vea:
     de ahí la sensación de parpadeo, más que de la duración en sí. Este ease reparte el
     recorrido de forma progresiva, así que el elemento se ve SUBIR durante todo el trayecto. */
  --rv-ease:cubic-bezier(.25,.46,.30,1);
  --rv-paso:120ms;                       /* retardo entre hermanos: la secuencia debe leerse */
  --rv-tope:6;                           /* pasos máximos acumulados */
}

/* Fase 1 · desde el <head> hasta que el motor marca las unidades (milisegundos).
   Reserva el contenido para que no se vea un fogonazo de la página ya pintada
   antes de esconderse. El script del <head> arma un temporizador de seguridad:
   si el motor no llega a arrancar, esta clase se cae sola y todo aparece. */
html.rv-armado main{ opacity:0 !important; }

/* Fase 2 · el motor ya marcó: solo las unidades quedan ocultas.
   Se anima translate (propiedad independiente) y NO transform: así no se pisa
   el transform propio de los parallax ni el de los hovers. Solo opacity,
   filter y translate — ninguna propiedad de layout. */
html.rv-listo [data-rv]{
  opacity:0;
  filter:blur(var(--rv-blur));
  translate:0 var(--rv-y);
  will-change:opacity, filter, translate;
}
/* Unidades que no deben desplazarse (marcadas por el motor: sticky, o pieza
   que ya trae su propio movimiento). Especificidad (0,2,0) > (0,1,0). */
html.rv-listo [data-rv][data-rv-quieto]{ translate:none; }

html.rv-listo [data-rv].rv-in{
  opacity:1;
  filter:blur(0);
  translate:0 0;
  transition:opacity var(--rv-dur) var(--rv-ease),
             filter   var(--rv-dur) var(--rv-ease),
             translate var(--rv-dur) var(--rv-ease);
  transition-delay:var(--rv-d, 0ms);
}
/* Al terminar se retiran filter y will-change: dejar 154 capas de composición
   vivas en el catálogo hunde el rendimiento. Va DESPUÉS de .rv-in a propósito:
   misma especificidad, gana la última. */
html.rv-listo [data-rv].rv-fin{
  opacity:1; filter:none; translate:none;
  will-change:auto; transition:none;
}

@media (prefers-reduced-motion:reduce){
  html.rv-listo [data-rv]{ opacity:1; filter:none; translate:none; will-change:auto; }
  html.rv-listo [data-rv].rv-in{ transition:none; }
  html.rv-armado main{ opacity:1 !important; }
}