/* ahnsa-hims.css v1 (B1 + cromo v3 fundido en B3) — tokens y primitivos del layout de hims.com con la paleta AHNSA.
   ─────────────────────────────────────────────────────────────────────────────
   Fuente de cada numero: formlabs-ahnsa/_entrega_home_hims/hims_tokens.md (§1–§10)
   y medido_hims.md (Playwright sobre el espejo, 26-ago). Nada se copio de hims:
   son medidas, reescritas en CSS propio. Se carga DESPUES de ahnsa-theme.css
   (que ya declara la @font-face de `supreme` 100–800 con font-display optional
   y el token --font-supreme: aqui NO se vuelve a declarar).

   Mapa rol por rol (hims → AHNSA). hims es ambar/crema/cafe; el sitio es azul:
     ambar de acento y barra promo        → celeste  --hm-celeste
     bento oscuro (cafe) / modulo         → marino   --hm-marino / --hm-marino-2
     CTA ambar sobre oscuro               → azul     --hm-azul (hover --hm-azul-2)
     tarjeta sidekick (degradado ambar)   → azul-2 → azul
     tile 1 (cafe → ocre) / tile 2 (ocre) → marino → azul / azul
     chips crema                          → lavado celeste al 12 % sobre blanco
     texto de chip / span de acento       → marino / azul
     borde activo de input, foco          → azul
     estrellas, badge, spans en oscuro    → celeste
     blanco, negro y las rgba() de hims   → identicos (son neutrales)
   Ningun hex fuera de la paleta: los tonos derivados salen de color-mix().

   Tipografia fluida: hims calcula font-size = min + (max − min) × escala, con
   escala = (bp − 360)/1032 ESCALONADA en 360/488/740/1092/1266/1392 (no continua),
   y por debajo de 360 escala min × 100vw/360. Aqui --hm-escala y --hm-px lo
   reproducen tal cual; cada rol es calc((MIN + (MAX − MIN) × escala) × px).
   Peso de titulo en hims = max(410, 530 − 2.5·px): aqui va fijo por rol porque
   font-weight no admite dividir longitudes en todos los navegadores.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* paleta */
  --hm-marino: #0A1E5E;
  --hm-marino-2: color-mix(in srgb, #0A1E5E 84%, #000);   /* modulo dentro del bento */
  --hm-azul: #1878B9;
  --hm-azul-2: #3B9BD9;
  --hm-azul-oscuro: color-mix(in srgb, #1878B9 72%, #0A1E5E);  /* hover del CTA en claro */
  --hm-celeste: #7FC4EC;
  --hm-celeste-2: color-mix(in srgb, #7FC4EC 88%, #000);  /* hover de la barra promo */
  --hm-lavado: color-mix(in srgb, #7FC4EC 12%, #fff);     /* chips (crema de hims) */
  --hm-lavado-2: color-mix(in srgb, #7FC4EC 6%, #fff);
  --hm-blanco: #fff;
  --hm-negro: #000;
  --hm-tinta: rgba(0,0,0,.89);
  --hm-tinta-2: rgba(0,0,0,.65);
  --hm-tinta-3: rgba(0,0,0,.54);
  --hm-tinta-4: rgba(0,0,0,.44);
  --hm-borde: rgba(0,0,0,.19);
  --hm-hairline: rgba(0,0,0,.03);
  --hm-hover-claro: rgba(0,0,0,.06);
  --hm-glass: rgba(255,255,255,.07);
  --hm-glass-borde: rgba(255,255,255,.17);
  --hm-glass-hover: rgba(0,0,0,.33);
  --hm-blanco-9: rgba(255,255,255,.9);
  --hm-blanco-51: rgba(255,255,255,.51);
  /* El dorado del sello NO es un valor elegido: es la mediana de los 61,621
     pixeles dorados del inserto TiN del propio video del B6, muestreada sobre
     el master. Asi el sello y el arte son el mismo oro y no dos que se parecen. */
  --hm-oro: #EAB188;

  /* fuente: la declara ahnsa-theme.css; si no esta cargado cae al respaldo */
  --hm-fuente: var(--font-supreme, supreme), "supreme Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* radios (hims_tokens §9) */
  --hm-r-pill: 3rem;
  --hm-r-badge: 6.25rem;
  --hm-r-card: 1.5rem;
  --hm-r-card-m: 1rem;       /* bento/tiles < 740 */
  --hm-r-input: .875rem;
  --hm-r-chico: .5rem;

  /* layout */
  --hm-max: 108rem;          /* seccion */
  --hm-max-hero: 87rem;      /* columna del heroe */
  --hm-col: 1132px;          /* columna interior de bentos */
  --hm-gap-seccion: 1.5rem;
  --hm-bento-gap: .25rem;
  --hm-bento-pad-h: .5rem;
  --hm-bento-pad-v: 2.25rem;
  --hm-overlap: 3rem;
  --hm-promo-h: 0rem;        /* v92: la barra promo se retiro (Mario 8-sep 11:13). Se deja el token en 0 en vez de limpiar las seis reglas que lo restan: asi los calc() siguen cuadrando solos. */
  --hm-hdr-h: 4.5rem;        /* 72 px: hims mide 48 con un logo de 24 px de alto; el logo AHNSA a
                                120 px de ancho mide 59 (sin aire en el bitmap) y desbordaba la fila */
  --hm-btn-h: 3rem;

  /* motion */
  --hm-ease-reveal: cubic-bezier(.72,0,.45,1);
  --hm-ease-title: cubic-bezier(.72,0,.25,.88);
  --hm-ease-acc: cubic-bezier(.33,1,.68,1);
  --hm-ease-label: cubic-bezier(.33,0,0,1);
  --hm-ease-chevron: cubic-bezier(.86,0,.07,1);
  --hm-ease-alto: cubic-bezier(.28,.13,.38,1);
  --hm-ease-header: cubic-bezier(.68,-.6,.32,1.6);
  --hm-t-reveal: 600ms;
  --hm-t-title: 800ms;
  --hm-t-acc: 450ms;
  --hm-sombra-nav: 0 2px 64px 0 rgba(0,0,0,.08), 0 8px 30px 0 rgba(0,0,0,.05);
  --hm-sombra-pill: 0 2px 16px rgba(0,0,0,.05);

  /* cromo v3 (tools/cromo_v3/cromo_v3.css): fila del header y roles fluidos en clamp() */
  --hm-hdr-row: 4.5rem;      /* = --hm-hdr-h (mega_js lo mide en vivo y lo reescribe en :root) */
  --hm-fs-14-16: clamp(.875rem, calc(.875rem + 2 * (100vw - 360px) / 1032), 1rem);
  --hm-fs-16-19: clamp(1rem, calc(1rem + 3 * (100vw - 360px) / 1032), 1.1875rem);
  --hm-fs-25-43: clamp(1.5625rem, calc(1.5625rem + 18 * (100vw - 360px) / 1032), 2.6875rem);

  /* escala fluida (hims --scale) y unidad de pixel */
  --hm-escala: 0;
  --hm-px: 1px;

  /* roles tipograficos: min→max px de hims_tokens §9 */
  --hm-fs-xl:       calc((40 + 42 * var(--hm-escala)) * var(--hm-px));           /* 40→82 */
  --hm-fs-h1:       min(57px, calc((40 + 42 * var(--hm-escala)) * var(--hm-px)));/* 40→82, tope 57 ≥1092 */
  --hm-fs-d-l:      calc((32 + 25 * var(--hm-escala)) * var(--hm-px));           /* 32→57 */
  --hm-fs-d-m:      calc((28 + 20 * var(--hm-escala)) * var(--hm-px));           /* 28→48 */
  --hm-fs-h-l:      calc((25 + 15 * var(--hm-escala)) * var(--hm-px));           /* 25→40 */
  --hm-fs-h-s:      calc((22 + 11 * var(--hm-escala)) * var(--hm-px));           /* 22→33 */
  --hm-fs-h-m:      calc((20 +  8 * var(--hm-escala)) * var(--hm-px));           /* 20→28 */
  --hm-fs-cuerpo-l: calc((16 +  3 * var(--hm-escala)) * var(--hm-px));           /* 16→19 */
  --hm-fs-cuerpo:   calc((14 +  2 * var(--hm-escala)) * var(--hm-px));           /* 14→16 */
  --hm-fs-caption:  calc((12 +  1 * var(--hm-escala)) * var(--hm-px));           /* 12→13 */
  --hm-fs-micro:    11px;

  /* pesos (formula de hims evaluada por rol) */
  --hm-peso-display: 410;
  --hm-peso-d-m: 430;
  --hm-peso-h-l: 450;
  --hm-peso-h-m: 460;
  --hm-peso-cuerpo: 400;
  --hm-peso-label: 500;
  --hm-peso-promo: 600;
  --hm-ls-display: -.01em;
  --hm-ls-cuerpo: .022em;
  --hm-ls-caption: .027em;
}
@media (max-width: 359.98px) { :root { --hm-px: calc(100vw / 360); } }
@media (min-width: 488px)  { :root { --hm-escala: .12403; } }
@media (min-width: 740px)  { :root { --hm-escala: .36822; --hm-r-card-m: 1.5rem; --hm-bento-gap: .5rem; --hm-overlap: 3.75rem; } }
@media (min-width: 1092px) { :root { --hm-escala: .70930; --hm-bento-pad-h: 1rem; } }
@media (min-width: 1266px) { :root { --hm-escala: .87791; --hm-gap-seccion: 2.5rem; } }
@media (min-width: 1392px) { :root { --hm-escala: 1; } }
@media (max-width: 767.98px) { :root { --hm-btn-h: 2.75rem; } }

/* ═══ base del bloque hims ═══════════════════════════════════════════════ */
.hm-home, .hm-asesor, .hm-promo, .hm-hdr, .hm-mega, .hm-foot {
  font-family: var(--hm-fuente);
  color: var(--hm-tinta);
  -webkit-font-smoothing: antialiased;
}
/* border-box tambien en el cromo (promo/header/mega/footer viven FUERA de .hm-home):
   sin esto la promo mide 44 + 24 de padding = 68 px y el header fijo a 44 px la tapa. */
.hm-home, .hm-home *, .hm-home ::before, .hm-home ::after,
.hm-asesor, .hm-asesor *, .hm-asesor ::before, .hm-asesor ::after,
.hm-promo, .hm-promo *, .hm-promo::before, .hm-promo::after,
.hm-hdr, .hm-hdr *, .hm-hdr ::before, .hm-hdr ::after,
.hm-mega, .hm-mega *, .hm-foot, .hm-foot *, .hm-foot ::before, .hm-foot ::after { box-sizing: border-box; }
/* Reset de medios con especificidad CERO (:where). Antes era ".hm-home img,
   .hm-home video" = (0,1,1), que le gana a CUALQUIER regla de una sola clase:
   .hm-tile__img pedia height:100% y perdia, asi que la imagen del tile se
   quedaba con su alto natural (381 px) dentro de una caja de 199 y el inserto
   salia cortado por la mitad -- 48% perdido, medido a 1440 el 27-ago. Con
   :where() el reset sigue aplicando pero lo pisa cualquier componente. */
:where(.hm-home) :where(img, video) { display: block; max-width: 100%; height: auto; }
.hm-home ul, .hm-asesor ul { list-style: none; margin: 0; padding: 0; }
.hm-home :where(h1, h2, h3, h4, p) { margin: 0; }   /* :where(): (0,1,0), para que .hm-bento__desc { margin: 0 auto } gane (medido: el reset pisaba el centrado) */
.hm-home :where(a), .hm-foot :where(a), .hm-hdr :where(a) { color: inherit; text-decoration: none; }   /* (0,1,0): .hm-btn--blanco y .hm-btn--marino ponen su color (medido: salian sin texto) */
.hm-home [hidden] { display: none !important; }

/* ═══ roles tipograficos (hims_tokens §9, tabla de roles) ═════════════════ */
/* v89 (6-sep, ux-movil; Mario «que se vea optimo en movil»): el H1 del heroe
   tenia interlinea 1.0 — 40 px de fuente con 40 px de linea— y a cuatro lineas
   en telefono se lee apelmazado. Medido a 360/390/430/768 (produccion contra
   el arbol servido, `_entrega_diseno/antes_despues_h1.py`): a 360/390/430 son
   40 px de fuente en CUATRO lineas y el bloque pasa de 151 a 163 px (+12); a
   768 son 55.5 px en TRES lineas y pasa de 152 a 163 px (+11) — no es el mismo
   numero en los cuatro anchos, es el mismo ratio. El CTA de abajo baja lo
   mismo (cta_top 316->328 y 321->332): nada se encima. El control —reinyectar
   line-height:1 en el arbol— devuelve 151/152 exactos, asi que el crecimiento
   es de esta linea y no de la diferencia de commit contra produccion.
   No se toca el tamano: --hm-fs-h1 ya baja solo a 40 px en
   movil. El rol .hm-h1 lo usa UNA pagina (el heroe de la home, gen_home:1364),
   asi que el alcance esta acotado. La animacion de entrada sigue siendo SOLO
   transform: es el elemento LCP y animarle la opacidad desde 0 lo retrasaria
   (regla de la hoja desde el v77/v85). */
.hm-h1       { font-size: var(--hm-fs-h1);  font-weight: var(--hm-peso-display); line-height: 1.1;  letter-spacing: var(--hm-ls-display); }
.hm-xl       { font-size: var(--hm-fs-xl);  font-weight: var(--hm-peso-display); line-height: 1;    letter-spacing: var(--hm-ls-display); }
.hm-d-l      { font-size: var(--hm-fs-d-l); font-weight: var(--hm-peso-display); line-height: 1.05; letter-spacing: var(--hm-ls-display); }
.hm-d-m      { font-size: var(--hm-fs-d-m); font-weight: var(--hm-peso-d-m);     line-height: 1.1;  letter-spacing: var(--hm-ls-display); }
.hm-h-m      { font-size: var(--hm-fs-h-m); font-weight: var(--hm-peso-h-m);     line-height: 1.15; letter-spacing: 0; }
.hm-cuerpo-l { font-size: var(--hm-fs-cuerpo-l); font-weight: var(--hm-peso-cuerpo); line-height: 1.27; letter-spacing: var(--hm-ls-cuerpo); }
.hm-cuerpo   { font-size: var(--hm-fs-cuerpo);   font-weight: var(--hm-peso-cuerpo); line-height: 1.3;  letter-spacing: .025em; }
.hm-caption  { font-size: var(--hm-fs-caption);  font-weight: var(--hm-peso-cuerpo); line-height: 1.31; letter-spacing: var(--hm-ls-caption); }
/* Podadas el 30-ago por 0 usos en los 1,507 html vivos + js + generadores:
   .hm-h-l .hm-h-s .hm-label .hm-micro .hm-acento .hm-acento-claro. Los roles
   que SI se usan se quedan; el registro tipografico completo vive en el
   dossier, no en una hoja que el visitante paga. */

/* ═══ botones (hims_tokens §9, button primitives) ═════════════════════════ */
.hm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: var(--hm-btn-h); padding: 0 calc(var(--hm-btn-h) / 2);
  border: 2px solid transparent; border-radius: var(--hm-r-pill);
  font-family: inherit; font-size: var(--hm-fs-cuerpo); font-weight: var(--hm-peso-label); line-height: 1;
  letter-spacing: 0; text-decoration: none; cursor: pointer; white-space: nowrap;
  color: var(--hm-blanco); background: rgba(0,0,0,.12);
  transition: color 300ms, background-color 300ms, box-shadow 300ms, border-color 300ms, backdrop-filter 300ms;
}
.hm-btn:disabled, .hm-btn[aria-disabled="true"] { pointer-events: none; color: var(--hm-tinta-3); background: rgba(0,0,0,.12); }
.hm-btn--primario { color: var(--hm-blanco); background: var(--hm-azul); }
.hm-btn--blanco { color: var(--hm-negro); background: var(--hm-blanco); }
.hm-btn--ghost { color: var(--hm-blanco); background: var(--hm-glass); border: 1px solid var(--hm-glass-borde); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.hm-btn--negro { color: var(--hm-blanco); background: var(--hm-negro); width: 100%; }
.hm-btn--marino { color: var(--hm-blanco); background: var(--hm-marino); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.hm-btn--outline { color: var(--hm-negro); background: transparent; border-color: rgba(0,0,0,.1); }
.hm-btn--ancho { min-height: 3.25rem; padding: 1rem 1.5rem; }
@media (hover: hover) {
  .hm-btn:hover { background: var(--hm-glass-hover); backdrop-filter: blur(2.5rem); -webkit-backdrop-filter: blur(2.5rem); }
  .hm-btn--primario:hover { background: var(--hm-azul-2); }
  .hm-btn--blanco:hover { background: var(--hm-blanco-51); }
  .hm-btn--ghost:hover { background: var(--hm-glass-hover); color: var(--hm-blanco); }
  .hm-btn--negro:hover { background: var(--hm-tinta-3); }
  .hm-btn--marino:hover { background: var(--hm-azul); }
  .hm-btn--outline:hover { background: var(--hm-negro); color: var(--hm-blanco); border-color: var(--hm-negro); }
}
.hm-btn:focus-visible { outline: 2px solid var(--hm-azul); outline-offset: 2px; }
.hm-btn--primario:active { background: var(--hm-azul-oscuro); }

/* pildora chica: "Cotizar" del header (34 px, 12/500, sombra) = "Iniciar sesion" de hims */
.hm-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; margin: 1px; padding: 0 .9rem; position: relative;
  border: 0; border-radius: var(--hm-r-pill); font-family: inherit; font-size: .75rem; font-weight: 500; line-height: 1;
  letter-spacing: normal; text-transform: none; text-decoration: none; cursor: pointer; white-space: nowrap;
  color: var(--hm-negro); background: var(--hm-blanco); box-shadow: var(--hm-sombra-pill);
  transition: background-color 300ms ease-in, box-shadow 300ms ease-in;
}
.hm-pill::before { content: ""; position: absolute; inset: -1px; border: 1px solid var(--hm-hairline); border-radius: var(--hm-r-pill); pointer-events: none; }
@media (hover: hover) { .hm-pill:hover { color: var(--hm-tinta); background: var(--hm-hover-claro); box-shadow: none; } .hm-pill:hover::before { border-color: transparent; } }
.hm-pill:active { background: var(--hm-hover-claro); box-shadow: none; }
.hm-pill--azul { color: var(--hm-blanco); background: var(--hm-azul); }
@media (hover: hover) { .hm-pill--azul:hover { color: var(--hm-blanco); background: var(--hm-azul-2); } }

/* badge: "Nuevo" outline (hims_tokens §6 membership) y solido de tarjeta (§5) */
.hm-badge {
  display: inline-flex; align-items: center; padding: .25rem .625rem;
  border: 1px solid var(--hm-celeste); border-radius: var(--hm-r-badge);
  font-size: .75rem; font-weight: 500; line-height: .78125rem; color: var(--hm-celeste); background: transparent;
}
.hm-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 100px;
  font-size: 11px; font-weight: 500; letter-spacing: .045px; line-height: 13.54px; color: var(--hm-blanco);
  background: var(--hm-glass-borde); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hm-tag--solido { background: var(--hm-azul); }

/* ═══ pagina y heroe (hims_tokens §3) ═════════════════════════════════════ */
.hm-home { background: var(--hm-blanco); overflow-x: clip; }   /* el padding-top lo da body:has(.hm-promo), en el cromo */
.hm-hero { width: 100%; max-width: var(--hm-max-hero); margin: 0 auto; }
/* copy del heroe (opcion D, Mario 26-ago 08:00, Task B5): h1 + lead a la
   IZQUIERDA con la caja del h1 de hims (width 100%, max 87rem, padding 0 1rem,
   margin 1rem auto 1.5rem -> 1.25/2rem >= 740). Centrar el bloque (margin auto
   sobre un max-width en ch) era justo lo que NO es hims. */
.hm-hero__copy { box-sizing: border-box; width: 100%; max-width: var(--hm-max-hero); padding: 0 1rem; margin: 1rem auto 1.5rem; text-align: left; }
.hm-hero__h1 { margin: 0; color: var(--hm-negro); text-align: left; }
/* Entrada suave del h1 (Mario 31-ago). DOS cuidados que mandan sobre el gusto:
   1. El h1 es el elemento LCP. Animar su OPACIDAD desde 0 retrasa el LCP —
      el navegador no cuenta como pintado lo que aun no se ve— y la home esta
      hoy en 0.7 s escritorio / 2.5 s movil, justo en el umbral bueno. Por eso
      el titular se mueve SOLO con transform, que no toca la opacidad ni el
      layout: entra ya visible.
   2. `transform` es propiedad de compositor: no provoca reflow, asi que el
      CLS sigue en 0 (medido). Nada de animar `top`, `margin` ni `height`.
   La segunda linea SI puede desvanecerse: no es el LCP. */
@keyframes hm-h1-sube { from { transform: translateY(.5rem); } to { transform: none; } }
@keyframes hm-h1-mx   { from { transform: translateY(.375rem); opacity: 0; } to { transform: none; opacity: 1; } }
.hm-hero__h1 { animation: hm-h1-sube 620ms cubic-bezier(.16,1,.3,1) both; }
.hm-hero__h1-mx { animation: hm-h1-mx 560ms cubic-bezier(.16,1,.3,1) 180ms both; }
@media (prefers-reduced-motion: reduce) {
  .hm-hero__h1, .hm-hero__h1-mx { animation: none; }
}
/* Segunda linea del mismo <h1> (Mario 30-ago). Renglon propio, no una coletilla
   pegada a la frase: por eso `display:block` y no un separador tipografico.
   Va DENTRO del h1 —dos <h1> en una pagina es un error de SEO— pero con su
   propio peso y tamano para que se lea como lo que es: la cobertura. */
.hm-hero__h1-mx {
  display: block; margin-top: .375rem;
  font-size: .5em; font-weight: 500; line-height: 1.25;
  color: var(--hm-azul); letter-spacing: .01em;
}
.hm-hero__lead { margin: .75rem 0 0; max-width: 40rem; font-size: var(--hm-fs-h-m); font-weight: var(--hm-peso-cuerpo); line-height: 1.2; letter-spacing: 0; color: rgba(0,0,0,.7); text-align: left; text-wrap: pretty; }
/* C3: pildora "¿No sabes cuál? Usa el asesor" bajo el lead. Entra al asesor
   por el paso 1; los chips que entran con el paso 1 YA contestado viven en la
   tarjeta del bloque de operaciones. */
.hm-hero__asesor { margin: 1rem 0 0; height: 2.25rem; padding: 0 1.125rem; font-size: var(--hm-fs-caption); }
.hm-hero__asesor-chevron { margin-left: .5rem; }
@media (min-width: 740px) { .hm-hero__copy { margin-top: 1.25rem; margin-bottom: 2rem; } .hm-hero__lead { margin-top: 1rem; } }

/* tiles anchos: 2 × flex:1, gap 4 px, 227 → 199 px, r1rem → 1.5rem, cross-fade al hover */
.hm-tiles { display: flex; gap: .25rem; margin-bottom: .25rem; padding-inline: clamp(.3125rem, calc(.3125rem + (100vw - 840px) * .02), 1rem); }
.hm-tile {
  position: relative; flex: 1 1 0; min-width: 0; height: 14.1875rem; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: var(--hm-r-card-m); color: var(--hm-blanco); text-decoration: none;
  background: linear-gradient(to right, var(--hm-marino), var(--hm-azul));
}
.hm-tile--2 { background: var(--hm-azul); }
.hm-tile__img, .hm-tile__img-hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.hm-tile__img { opacity: .001; transition: opacity 200ms linear; }
.hm-tile__img.is-cargada, .hm-tile__img[data-is-loaded="true"] { opacity: 1; }
.hm-tile__img-hover { opacity: 0; }
.hm-tile__cuerpo { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; padding: 1rem; }
.hm-tile__titulo { font-size: 1.125rem; line-height: 1.1375rem; font-weight: var(--hm-peso-h-m); color: var(--hm-blanco); }
.hm-tile__titulo span { color: var(--hm-celeste); }
.hm-tile__pie { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; font-size: .875rem; font-weight: 400; }
.hm-tile__chevron { flex: 0 0 auto; width: 6.4615px; height: 12px; }
/* Mismo motivo que en el chip: fuera del `@media (hover: hover)`, que no se
   aplica en equipos con pantalla tactil aunque tengan raton. `.is-hover` la
   pone el JS en el `pointerenter`. */
.hm-tile:hover .hm-tile__img-hover, .hm-tile.is-hover .hm-tile__img-hover { opacity: 1; }
/* OJO: el TILE no se comporta como el chip, y esto esta medido, no supuesto.
   En hims el chip cruza las dos imagenes (.3s sale / .15s entra) pero el tile
   ancho del heroe solo hace ENTRAR la de hover, en .2s, y la base NO se
   desvanece -- cambia UNA capa, no dos. Lo caz o tools/verifica_vs_hims.py
   despues de que yo le hubiera copiado el patron del chip. */
.hm-tile__img-hover { transition: opacity .2s linear; }
@media (min-width: 488px) { .hm-tile { height: 12.4375rem; } }
@media (min-width: 740px) { .hm-tile__cuerpo { padding: 1.25rem; } .hm-tile__titulo { font-size: 1.25rem; max-width: 11.25rem; } }
@media (min-width: 1092px) { .hm-tiles { margin-bottom: 2.25rem; } .hm-tile__pie { font-size: 1rem; } }
@media (max-width: 739.98px) { .hm-tiles { flex-direction: column; } .hm-tile { flex: 0 0 auto; } }   /* en columna, flex-basis 0 pisaba el height y el tile median 0 px (medido a 390) */

/* Los chips de FAMILIA (.hm-chips/.hm-chip*) se retiraron el 30-ago: 0 usos.
   El generador conserva chip() pero nadie la llama desde v9 — los 4 chips
   vivos son los de OPERACION (.hm-op*), que tienen su propio bloque. */

/* ═══ seccion y bento (hims_tokens §4, §6) ════════════════════════════════ */
.hm-section { width: 100%; max-width: var(--hm-max); margin: 0 auto var(--hm-gap-seccion); padding-inline: 0; }
.hm-section--pad { padding-inline: clamp(.375rem, calc(.375rem + (100vw - 360px) * .0012), .5rem); }
.hm-section--bajo { content-visibility: auto; contain-intrinsic-size: auto 800px; }
.hm-bento {
  position: relative; overflow: hidden; container-type: inline-size;
  border-radius: var(--hm-r-card-m); padding-bottom: var(--hm-bento-pad-v);
  color: var(--hm-blanco); background: var(--hm-marino);
}
.hm-bento--claro { color: var(--hm-marino); background: linear-gradient(180deg, color-mix(in srgb, var(--hm-celeste) 25%, var(--hm-blanco)) 0%, var(--hm-blanco) 100%); }
/* Vitrina v1 podada el 30-ago (0 usos en todo el arbol entregado):
   .hm-bento--negro/__hero/__h2/__desc/__cta y .hm-modulo__media/__pos, con
   todas las reglas que solo los citaban. Lo VIVO se queda: .hm-bento,
   .hm-bento--claro, .hm-bento__video, .hm-bento__grid, .hm-bento__cab. */
.hm-bento__video { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hm-bento__video video, .hm-bento__video img { width: 100%; height: 100%; object-fit: cover; object-position: center 5%; transform: scale(1.04) translateY(-4%); }
.hm-bento__grid { position: relative; z-index: 2; display: flex; flex-flow: column wrap; gap: var(--hm-bento-gap); padding: 0 var(--hm-bento-pad-h); }
.hm-bento__grid > * { position: relative; overflow: hidden; border-radius: var(--hm-r-card-m); color: var(--hm-blanco); background: var(--hm-marino-2); }
.hm-bento--claro .hm-bento__grid > * { color: var(--hm-marino); background: linear-gradient(127deg, color-mix(in srgb, var(--hm-celeste) 18%, var(--hm-blanco)) 2.43%, var(--hm-blanco) 96.81%); backdrop-filter: blur(1.25rem); -webkit-backdrop-filter: blur(1.25rem); }
.hm-modulo { display: flex; flex-direction: column; align-items: center; min-height: 25rem; }
.hm-modulo__lockup { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.75rem 1.75rem 0; }
.hm-modulo__titulo { font-size: var(--hm-fs-h-l); font-weight: var(--hm-peso-h-l); line-height: 1.375rem; white-space: pre-line; }
.hm-modulo__titulo span { color: var(--hm-celeste); }
.hm-modulo--centro { padding: 1.25rem 1.25rem 1.75rem; text-align: center; }
.hm-modulo--centro .hm-badge { margin-bottom: 1rem; }
.hm-modulo--centro h2 { max-width: 22.5rem; margin: 0 auto .625rem; padding-bottom: .08em; }
.hm-modulo--centro .hm-btn { margin-top: 1rem; }
@media (min-width: 488px) { .hm-modulo__titulo { line-height: 1.875rem; } }
@media (min-width: 740px) {
  .hm-bento { border-radius: var(--hm-r-card); }
  .hm-bento__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; max-width: var(--hm-col); margin-inline: auto; }
  .hm-bento__grid > :first-child { grid-column: 1 / span 2; }
  .hm-bento--sin-ancho .hm-bento__grid > :first-child { grid-column: auto; }
  .hm-bento__video video, .hm-bento__video img { transform: scale(1.04) translateY(-5%); }
}
@media (min-width: 1092px) {
  .hm-bento__video video, .hm-bento__video img { transform: scale(1.04) translateY(-8%); }
  .hm-modulo { min-height: 30rem; }
  .hm-modulo__lockup { padding: 2rem 2rem 0; }
  .hm-modulo__titulo { line-height: 2.625rem; }
  .hm-modulo--centro { padding-top: 2rem; }
  .hm-modulo--centro .hm-btn { margin-top: 1.5rem; }
}

/* ═══ carrusel "sidekick" (hims_tokens §5) ════════════════════════════════ */
.hm-sidekick { width: calc(100% + 2 * var(--hm-bento-pad-h)); margin-left: calc(-1 * var(--hm-bento-pad-h)); padding: 1.5rem 0; background: transparent !important; }
@supports (width: 100cqi) { .hm-sidekick { width: 100cqi; margin-left: calc((100% - 100cqi) / 2); } }
.hm-sidekick__titulo { padding-inline: calc((100cqi - min(100cqi, var(--hm-col))) / 2 + 2rem); color: var(--hm-blanco); }
.hm-track {
  display: flex; gap: .75rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
  user-select: none; -webkit-user-select: none; cursor: grab; touch-action: pan-x pan-y;
  padding: 1.25rem calc((100cqi - min(100cqi, var(--hm-col))) / 2 + 2rem); margin-bottom: -1.25rem;
}
.hm-track::-webkit-scrollbar { display: none; }
.hm-track.is-arrastrando { cursor: grabbing; scroll-behavior: auto; }
.hm-track.is-arrastrando a { pointer-events: none; }
.hm-track--glass { gap: .625rem; }
@media (min-width: 740px) { .hm-sidekick { padding: 2rem 0; } .hm-track--glass { padding-block: 1.5rem; margin-bottom: -1.5rem; } }
@media (min-width: 1092px) { .hm-track { padding-block: 2rem; margin-bottom: -2rem; } }

/* tarjeta de producto: 260×316 → 320×389 (≥740), r1.5rem, degradado azul, hover scale 1.03 + overlay + flotacion */
.hm-card-wrap { display: flex; flex: 0 0 16.25rem; height: 19.75rem; opacity: 0; transition: opacity 200ms linear; transition-delay: calc(100ms * var(--hm-i, 0)); }
.hm-track.is-in .hm-card-wrap, .hm-card-wrap.is-in { opacity: 1; }
.hm-card {
  position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden;
  border-radius: var(--hm-r-card); color: var(--hm-blanco); text-decoration: none;
  background: linear-gradient(to bottom, var(--hm-azul-2), var(--hm-azul));
  transition: transform 200ms ease-in-out;
}
.hm-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 200ms linear;
  background: linear-gradient(to bottom, var(--hm-azul), color-mix(in srgb, var(--hm-azul) 70%, var(--hm-marino)));
}
.hm-card__media { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.25rem 1.25rem 0; }
.hm-card__media > div, .hm-card__media > picture { position: relative; width: 75%; aspect-ratio: 1; }
.hm-card__media img, .hm-card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hm-card__media video { opacity: 0; transition: opacity 200ms linear; }
.hm-card.is-giro .hm-card__media video { opacity: 1; }
.hm-card__sombra { position: absolute; left: 50%; bottom: .625rem; width: 20%; height: 8px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(rgba(0,0,0,.3), transparent 80%); }
.hm-card__badges { position: absolute; top: .625rem; left: .625rem; z-index: 2; display: flex; gap: .375rem; }
.hm-card__sello { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 3.5rem; height: 3.5rem; }
.hm-card__cuerpo { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .125rem; padding: .75rem .75rem .875rem; }
.hm-card__titulo { min-height: 2lh; align-content: end; font-size: var(--hm-fs-h-m); font-weight: var(--hm-peso-h-m); line-height: 1.15; color: var(--hm-blanco); }
.hm-card__precio { margin-top: .25rem; font-size: var(--hm-fs-caption); color: var(--hm-blanco-9); }
.hm-card__sub { margin-top: .25rem; font-size: var(--hm-fs-cuerpo); color: var(--hm-blanco-9); }
/* B7: tarjeta de FAMILIA — la linea de dato es UNA linea (el generador la
   acota a DATO_MAX caracteres; el ellipsis es solo la red por si una fuente
   de respaldo mide mas); el poster provisional de Blender y el placeholder
   con la inicial llevan un halo celeste detras para que la tarjeta se vea
   terminada aunque la pieza IA no este. */
.hm-card__sub { font-size: var(--hm-fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-card--blender .hm-card__media > div::before, .hm-card--placeholder .hm-card__media > div::before {
  content: ""; position: absolute; inset: -12%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--hm-celeste) 28%, transparent) 0%, transparent 62%);
}
.hm-card--blender .hm-card__media > div { isolation: isolate; }
/* pieza IA instalada: el poster y el giro traen su propio marino (16:9 hoy;
   1:1 cuando llegue el formato de §4b): se recortan a la caja cuadrada con
   esquinas redondeadas en vez de flotar como una tira letterbox */
.hm-card--foto .hm-card__media img, .hm-card--foto .hm-card__media video { object-fit: cover; border-radius: calc(var(--hm-r-card) * .75); }
.hm-card--placeholder .hm-card__media > div { display: flex; align-items: center; justify-content: center; font-size: 6rem; font-weight: 300; color: var(--hm-celeste); border-radius: var(--hm-r-card); background: color-mix(in srgb, var(--hm-marino) 60%, transparent); }
@media (hover: hover) {
  .hm-card:hover, .hm-card:focus-visible { transform: scale(1.03); }
  .hm-card:hover::after, .hm-card:focus-visible::after { opacity: 1; }
  .hm-card:hover .hm-card__media > div, .hm-card.is-hover .hm-card__media > div { animation: hm-flota 1500ms ease-in-out infinite; }
  .hm-card:hover .hm-card__sombra, .hm-card.is-hover .hm-card__sombra { animation: hm-pulso 1500ms ease-in-out infinite; }
}
.hm-card:focus-visible { outline: 2px solid var(--hm-celeste); outline-offset: 3px; }
@media (min-width: 740px) { .hm-card-wrap { flex: 0 0 20rem; height: 24.3125rem; } .hm-card__cuerpo { padding: .875rem .875rem 1rem; } }

/* tarjeta glass por operacion (hims_tokens §7): 20rem×25rem → clamp(21,22.25rem)×31.75/32.25rem */
.hm-glass-wrap { display: flex; flex: 0 0 20rem; height: 25rem; opacity: 0; transition: opacity 200ms linear; transition-delay: calc(100ms * var(--hm-i, 0)); }
.hm-track.is-in .hm-glass-wrap, .hm-glass-wrap.is-in { opacity: 1; }
.hm-glass {
  display: flex; flex-direction: column; gap: .75rem; width: 100%; padding: 1.125rem;
  border-radius: 24px; color: var(--hm-blanco); text-decoration: none;
  background: var(--hm-glass); backdrop-filter: blur(37px); -webkit-backdrop-filter: blur(37px);
  transition: transform 200ms ease-in-out;
}
@media (hover: hover) { .hm-glass:hover { transform: scale(1.03); } }
.hm-glass__tags { display: flex; flex-wrap: wrap; gap: 4px; }
/* .hm-glass__media* podado el 30-ago: 0 usos. */
.hm-glass__linea { height: 1px; margin-top: 16px; background: rgba(255,255,255,.15); }
.hm-glass__nombre { font-size: 28px; line-height: 31.5px; font-weight: 500; letter-spacing: -.047px; }
.hm-glass__meta { font-size: 13px; line-height: 16.94px; letter-spacing: .305px; color: var(--hm-blanco-51); }
.hm-glass__n { font-size: 13px; line-height: 16.94px; color: var(--hm-blanco-9); }
@media (min-width: 740px) { .hm-glass-wrap { flex: 0 0 clamp(21rem, calc(21rem + (100vw - 740px) * .03), 22.25rem); height: 31.75rem; } }
@media (min-width: 1092px) { .hm-glass-wrap { height: 32.25rem; } }

/* C3: tarjeta "¿Qué operación vas a hacer?" del carrusel de operaciones.
   Mismos primitivos glass, chips en vez de media. NO es un enlace (los chips
   van dentro): no escala al hover, para que nada prometa un clic al centro.
   El nombre baja de 28 a 22 px porque aqui es una pregunta de 4 palabras y a
   28 px se come tres renglones de la tarjeta de 20rem. */
.hm-glass--asesor { gap: .625rem; }
.hm-glass--asesor .hm-glass__nombre { font-size: 22px; line-height: 25px; }
@media (hover: hover) { .hm-glass--asesor:hover { transform: none; } }
.hm-op-chips { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; margin-top: .25rem; }
.hm-op-chip {
  display: inline-flex; align-items: center; height: 1.75rem; padding: 0 .625rem;
  border: 1px solid var(--hm-glass-borde); border-radius: var(--hm-r-pill);
  font-size: 12px; line-height: 1; letter-spacing: .045px; color: var(--hm-blanco);
  text-decoration: none; background: rgba(255,255,255,.04);
  transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out, color 200ms ease-in-out;
}
@media (hover: hover) { .hm-op-chip:hover { color: var(--hm-marino); background: var(--hm-celeste); border-color: var(--hm-celeste); } }
.hm-op-chip:focus-visible { outline: 2px solid var(--hm-celeste); outline-offset: 2px; }
.hm-glass__cta { display: inline-flex; align-items: center; gap: .5rem; font-size: 13px; line-height: 16.94px; font-weight: 500; color: var(--hm-celeste); text-decoration: none; }
@media (hover: hover) { .hm-glass__cta:hover { color: var(--hm-blanco); } }

/* seccion "para cada operacion": foto/video de fondo + overlay + heroe alineado a la izquierda */
.hm-opera { position: relative; gap: 1rem; padding-bottom: 2.25rem; }
.hm-opera__fondo { position: absolute; inset: 0; z-index: 0; }
.hm-opera__fondo img, .hm-opera__fondo video { width: 100%; height: 100%; object-fit: cover; object-position: 78% top; }
.hm-opera__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--hm-marino) 15%, transparent) 0%, color-mix(in srgb, var(--hm-marino) 5%, transparent) 35%, color-mix(in srgb, var(--hm-marino) 20%, transparent) 70%, color-mix(in srgb, var(--hm-marino) 45%, transparent) 100%); }
.hm-opera__hero { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem 0 3.5rem; text-align: center; padding-inline: calc((100cqi - min(100cqi, var(--hm-col))) / 2 + 2rem); }
.hm-opera__hero .hm-xl { color: var(--hm-blanco); }
.hm-opera__ctas { display: flex; flex-direction: column; gap: .5rem; width: 14.125rem; }
.hm-opera__h2 { position: relative; z-index: 1; font-size: 1.25rem; font-weight: 500; letter-spacing: -.04em; line-height: 1.1; text-align: center; white-space: nowrap; color: var(--hm-blanco); padding-inline: calc((100cqi - min(100cqi, var(--hm-col))) / 2 + 2rem); }
@media (min-width: 740px) {
  .hm-opera { gap: .75rem; }
  .hm-opera__hero { align-items: flex-start; text-align: left; gap: .75rem; padding: clamp(3.5rem, calc(3.5rem + (100vw - 740px) * .03), 4.5rem) 0 3.5rem; padding-inline: calc((100cqi - min(100cqi, var(--hm-col))) / 2 + 2rem); }
  .hm-opera__hero .hm-xl { white-space: nowrap; }
  .hm-opera__ctas { flex-direction: row; width: auto; }
  .hm-opera__h2 { font-size: 1.75rem; line-height: 31.5px; text-align: left; }
}
@media (min-width: 1092px) { .hm-opera__hero { padding-top: clamp(4rem, calc(4rem + (100vw - 1092px) * .05), 5rem); padding-bottom: 4rem; } }

/* tarjeta "¿que operacion?" (quiz card de hims): degradado azul→marino, chips glass apilados */
/* Quiz v1 (.hm-quiz*) podado el 30-ago: 0 usos. El quiz vigente es
   .hm-res-quiz__op, dentro del bloque de operaciones. */

/* bento de 2 col con foto (testo/labs de hims): tarjetas claras con boton marino abajo a la derecha */
.hm-ficha { position: relative; min-height: 25rem; overflow: hidden; }
.hm-ficha img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-ficha__cuerpo { position: relative; z-index: 1; padding: 1.25rem; }
.hm-ficha__titulo { width: 55%; max-width: 14.375rem; font-size: var(--hm-fs-h-m); font-weight: var(--hm-peso-h-m); color: var(--hm-marino); }
.hm-ficha__titulo span { color: var(--hm-azul); white-space: nowrap; }
.hm-ficha .hm-btn { position: absolute; right: 1.25rem; bottom: 1.25rem; }
@media (min-width: 488px) { .hm-ficha .hm-btn { right: 2.5rem; bottom: 1.5rem; } }
@media (min-width: 1092px) { .hm-ficha { min-height: 30rem; } .hm-ficha__cuerpo { padding: 1.5rem; } .hm-ficha__titulo { width: 60%; max-width: 15.625rem; } }

/* seccion clara centrada (expertos de hims): titulo + descripcion + marquee */
.hm-claro { padding: 5rem 0; overflow: hidden; }
.hm-claro__cab { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 0 auto 2.375rem; text-align: center; }
.hm-claro__cab h2 { color: var(--hm-tinta); }
.hm-claro__cab h2 span { color: var(--hm-azul); }
.hm-claro__cab p { max-width: 28.25rem; color: var(--hm-tinta-4); }
@media (min-width: 740px) { .hm-claro__cab { margin-bottom: 3.75rem; } }

/* marco con foto (newsletter de hims → Nosotros): 612 px, r1.5rem, scrim en movil */
.hm-foto { position: relative; display: flex; align-items: flex-end; overflow: hidden; border-radius: var(--hm-r-card); background: rgba(0,0,0,.19); }
.hm-foto > img { width: 100%; height: 38.25rem; object-fit: cover; object-position: center top; }
.hm-foto__cuerpo { position: absolute; inset: 0; display: grid; align-content: flex-end; gap: 1.5rem; padding: 1.25rem; color: var(--hm-blanco); background: linear-gradient(180deg, rgba(0,0,0,0) 19%, rgba(0,0,0,.5) 100%); }
.hm-foto__cuerpo h2 { font-size: var(--hm-fs-d-m); font-weight: var(--hm-peso-d-m); line-height: 1.1; }
.hm-foto__cuerpo p { font-size: var(--hm-fs-cuerpo-l); }
.hm-foto__cuerpo small { font-size: .75rem; }
@media (min-width: 488px) { .hm-foto > img { object-position: left 20%; } .hm-foto__cuerpo { right: auto; max-width: 28rem; padding: 3.75rem; align-content: flex-start; background: none; } }
@media (min-width: 1092px) { .hm-foto__cuerpo { max-width: 28.75rem; } }

/* nube ISO: pildoras chicas claras */
.hm-nube { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; padding: 0 1rem; }
.hm-nube a { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border: 1px solid var(--hm-borde); border-radius: 30px; font-size: var(--hm-fs-cuerpo); color: var(--hm-tinta); text-decoration: none; transition: color 300ms, border-color 300ms, background-color 300ms; }
@media (hover: hover) { .hm-nube a:hover { color: var(--hm-blanco); background: var(--hm-azul); border-color: var(--hm-azul); } }

/* ═══ CROMO v3 (promo · header · mega · pie) ═══════════════════════════
   Fundido de tools/cromo_v3/cromo_v3.css (B2, 26-ago) tal como lo pide su
   cabecera: estas son las clases que usan los fragmentos tools/cromo_v3/*.html
   (.hm-hdr-in, .hm-nav, .hm-search, .hm-foot-grp...). Los bloques que B1 habia
   escrito a ciegas para el cromo (.hm-hdr__fila, .hm-foot__col, .hm-mega.is-abierto)
   no tenian markup y se retiraron aqui. Sus :root, .hm-btn y .hm-pill ya estan
   arriba (tokens y primitivos de B1); solo se conserva .hm-btn svg.
   ───────────────────────────────────────────────────────────────────── */
/* Cromo v3 (promo · header · mega · pie) — medidas de hims_tokens.md §1, §2,
   §8 (Footer) y §9 (botones), con la paleta AHNSA. Acompaña a los fragmentos
   de tools/cromo_v3/*.html. NO se sirve solo: B1/B3 lo funden en
   css/ahnsa-hims.css (los tokens --hm-* de abajo son los del plan; si ya
   existen en ahnsa-hims.css, ganan los de ahi). Sin hex fuera de la paleta.

   Contrato con mega_js.html (clases que el script pone/quita):
     :root  --hm-promo-h / --hm-hdr-h (alturas medidas)   html.hm-scrolled (y>44)
     nav    .con-sombra (y>4)  .is-oculto (headroom)  .hs-abierta (lupa)  .menu-abierto
     #ahMega .on (abierto)  .hm-cajon (abierto como cajon movil)   html.hm-sin-scroll
     .hm-foot-grp.is-abierto (acordeon <1024)                                        */


html.hm-sin-scroll, html.hm-sin-scroll body { overflow: hidden; }
/* margin: 0 = el UA pone body{margin:8px} y ninguna hoja lo quitaba (medido 26-ago:
   <main> arrancaba en x=8 a 390 y a 1440, y el h1 salia en 24 en vez del gutter de
   16 de hims; los bentos full-bleed tampoco llegaban al borde). hims: body margin 0. */
/* v92: se ancla al ENCABEZADO y no a la promo. Con .hm-promo fuera del arbol el :has() dejaba de casar y el cuerpo se quedaba SIN padding-top: el header fijo tapaba el contenido. */
body:has(.hm-hdr) { margin: 0; padding-top: calc(var(--hm-promo-h) + var(--hm-hdr-h)); }
/* hims mide todo en border-box; este arbol no lo tiene global (medido: la
   promo salia de 68 px = 44 + 24 de padding). Se acota al cromo. */
.hm-promo, .hm-promo *, .hm-hdr, .hm-hdr *, .hm-mega, .hm-mega *, .hm-foot, .hm-foot * { box-sizing: border-box; }

/* ── 1. Barra promo (hims §1): fija, 44 px, celeste, pildora con flecha ──── */
.ah-usp { display: contents; }
.hm-promo {
  position: fixed; top: 0; left: 0; z-index: 702; width: 100%;
  /* hims: min-height 2.75rem + padding .75rem; la pildora (27 px) crece la
     linea y daba 51 px medidos. Con .5rem de padding la barra queda en los
     44 px medidos en hims y solo crece si el texto se parte en dos lineas. */
  min-height: 2.75rem; padding: .5rem 1rem; line-height: 1.1875rem;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--hm-tinta); font-size: var(--hm-fs-14-16); letter-spacing: .02em;
  transition: transform 300ms;
}
/* Mario 12:02: la barra vuelve a azul claro (el oro del 09:40 le parecio
   naranja). Celeste de la paleta; el texto sigue en tinta marino: AA, y las
   esquinas invertidas del header ya asumian celeste. */
/* v91 (8-sep 01:28, Mario: «<div class="hm-promo-bg"> esto mejor en todas las paginas ocultalo, se vera
   mejor la pagina»): la banda celeste se OCULTA. El nodo sigue en el cromo (usp.html) para no
   re-estampar 2,466 paginas por un fondo; el texto queda en tinta marino sobre blanco, AA. */
.hm-promo-bg { display: none; }
.hm-promo-txt { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; }
/* `.hm-promo .hm-promo-sep` (0,2,0): ahnsa-theme.css trae `.ah-usp span` (0,1,1)
   para la barra vieja y pisaba al selector simple */
.hm-promo .hm-promo-sep { display: inline; opacity: .55; margin: 0 .25rem; padding: 0; font-size: inherit; }
@media (max-width: 487px) { .hm-promo .hm-promo-sep { display: none; } .hm-promo .hm-promo-cta { padding: 4px 8px; } }
/* medido: a 360 px "Existencia real en 15 sucursales" (221 px) + la pildora
   (112 px) no caben en 328 px a 14 px y la barra se iba a 68 px de alto */
@media (max-width: 400px) { .hm-promo { font-size: .8125rem; letter-spacing: 0; } }
.hm-promo-cta {
  display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; padding: 4px 10px;
  font-weight: 600; color: inherit; text-decoration: none; background: rgba(0,0,0,.06);
  border-radius: 9999px; transition: background-color .25s ease, gap .25s ease-out;
}
.hm-promo:hover .hm-promo-cta { gap: 8px; }
.hm-promo .hm-promo-flecha { width: 20px; height: 20px; flex: 0 0 auto; color: inherit; opacity: 1; }
/* esquinas invertidas: el header blanco se redondea contra la celeste (§1 corner tabs) */
.hm-promo::before, .hm-promo::after {
  content: ""; position: absolute; top: 100%; width: 1.5rem; height: 3rem; pointer-events: none;
  box-shadow: 0 -1.5rem 0 0 var(--hm-celeste); transition: box-shadow 300ms;
}
.hm-promo::before { left: 0; border-top-left-radius: 1.5rem; }
.hm-promo::after { right: 0; border-top-right-radius: 1.5rem; }
.hm-promo:hover::before, .hm-promo:hover::after { box-shadow: 0 -1.5rem 0 0 color-mix(in srgb, var(--hm-celeste) 92%, #000); }
html.hm-scrolled .hm-promo { transform: translateY(-100%); }
/* con la barra escondida las orejas quedarian pintadas en y=0..24 (medido) */
html.hm-scrolled .hm-promo::before, html.hm-scrolled .hm-promo::after { opacity: 0; transition: opacity 300ms, box-shadow 300ms; }

/* ── 2. Header (hims §2): fijo bajo la promo, fila 48 px (+1), blanco ──────
   `nav.hm-hdr` y no `.hm-hdr`: css/ahnsa-comun.css trae
   `nav.global-styles--header{position:relative}` (0,1,1) y le ganaba al
   fixed (medido: la barra quedaba en y=193 y se iba con el scroll). Esa
   regla y el bloque `.ahmega` de comun.css se retiran en la Fase E. */
nav.hm-hdr {
  position: fixed; top: var(--hm-promo-h); left: 0; right: 0; z-index: 701;
  height: calc(var(--hm-hdr-row) + 1px); background: #fff; color: var(--hm-tinta);
  transition: box-shadow 300ms linear, background-color 300ms linear, transform 200ms linear;
}
.hm-hdr.con-sombra { box-shadow: var(--hm-sombra-nav); }
html.hm-scrolled .hm-hdr { transform: translate3d(0, calc(-1 * var(--hm-promo-h)), 0); }
/* (0,2,1) como la de arriba (el `html` cuenta) y declarada despues: gana */
nav.hm-hdr.is-oculto { transform: translate3d(0, calc(-1 * (var(--hm-promo-h) + var(--hm-hdr-h))), 0); }
.hm-hdr.menu-abierto, .hm-hdr:has(#ahMega.on) { box-shadow: 0 1px 0 0 rgba(0,0,0,.05); }
.hm-hdr-in {
  position: relative; height: 100%; max-width: 108rem; margin: 0 auto;
  display: flex; align-items: center; gap: .75rem; padding: 0 .5rem 0 1rem;   /* 16 px izq / 8 px der */
}
.hm-logo { display: inline-flex; align-items: center; height: 100%; flex: 0 0 auto; }
.hm-logo img { display: block; width: 120px; height: auto; }   /* 120x59 (Mario 26-ago 08:00); hims: 89x44 */
.hm-nav { display: none; list-style: none; margin: 0 0 0 .75rem; padding: 0; height: 100%; align-items: center; gap: .125rem; }
.hm-nav > li { position: relative; height: 100%; display: flex; align-items: center; }
.hm-nav > li > a {
  display: inline-flex; align-items: center; gap: .25rem; height: 34px; padding: 0 .75rem;
  color: var(--hm-tinta); text-decoration: none; font-size: .875rem; font-weight: 500;
  border-radius: var(--hm-r-pill); transition: background-color 300ms ease-in;
}
.hm-nav > li > a:hover, .hm-nav > li > a[aria-expanded="true"] { background: rgba(0,0,0,.06); }
.hm-nav > li > a[aria-current="page"] { color: var(--hm-azul); }
.hm-chev { width: 1rem; height: 1rem; transition: transform 200ms; }
a[aria-expanded="true"] > .hm-chev { transform: rotate(180deg); }
.hm-rec {
  position: absolute; top: 100%; left: 0; min-width: 17rem; padding: .5rem; margin-top: .5rem;
  background: #fff; border-radius: 1rem; box-shadow: var(--hm-sombra-nav);
  opacity: 0; transform: translateY(-.25rem); transition: opacity 200ms linear, transform 200ms linear;
}
.hm-rec.on { opacity: 1; transform: none; }
.hm-rec a {
  display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem; border-radius: .75rem;
  color: var(--hm-tinta); text-decoration: none; font-size: .9375rem;
}
.hm-rec a:hover { background: rgba(0,0,0,.06); }
.hm-rec svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; color: var(--hm-azul); }
.hm-hdr-acts { margin-left: auto; display: flex; align-items: center; gap: .125rem; height: 100%; }
/* buscador compacto: el motor es js/ahnsa-sku.js; solo cambia la caja */
.hm-search {
  position: relative; display: none; align-items: center; height: 34px; width: 16rem;
  margin: 1px .5rem 1px 0; padding: 0 .25rem 0 .75rem; background: rgba(0,0,0,.06); border-radius: var(--hm-r-pill);
  transition: background-color 300ms ease-in, width 300ms ease-in-out;
}
.hm-search:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--hm-azul-2); }
.hm-search-ico { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; color: rgba(0,0,0,.54); }
.hm-search input {
  flex: 1 1 auto; min-width: 0; height: 100%; margin: 0 .25rem; padding: 0; border: 0; background: transparent;
  font: inherit; font-size: .875rem; color: var(--hm-tinta); outline: none; appearance: none;
}
.hm-search input::placeholder { color: rgba(0,0,0,.54); }
.hm-search input::-webkit-search-cancel-button { appearance: none; }
.hm-search-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem;
  border: 0; border-radius: 50%; background: var(--hm-azul); color: #fff; cursor: pointer; flex: 0 0 auto;
  opacity: 0; transition: opacity 150ms linear, background-color 300ms;
}
.hm-search-btn svg { width: .875rem; height: .875rem; }
.hm-search:focus-within .hm-search-btn, .hm-search input:not(:placeholder-shown) ~ .hm-search-btn { opacity: 1; }
.hm-search-btn:hover { background: var(--hm-marino); }
.hm-search .sku-panel { top: calc(100% + .5rem); min-width: 24rem; right: auto; }
.hm-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 2.625rem; height: 2.625rem;
  border: 0; border-radius: 50%; background: transparent; color: var(--hm-tinta); cursor: pointer; position: relative;
  transition: background-color 300ms ease-in;
}
.hm-ico:hover { background: rgba(0,0,0,.06); }
.hm-ico svg { width: 1.5rem; height: 1.5rem; }
.hm-cart .ah-cart-n {
  position: absolute; top: .25rem; right: .125rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .25rem;
  border-radius: var(--hm-r-badge); background: var(--hm-azul); color: #fff; font-size: .6875rem; font-weight: 600;
  line-height: 1.125rem; text-align: center;
}
.hm-cart .ah-cart-n[hidden] { display: none; }
/* El mismo badge dentro de la pildora del promo (paginas de productos): ahi el
   absoluto del tema viejo lo pintaba ENCIMA de la flecha (medido 29-ago:
   badge x305-332 vs flecha x304-324). En la pildora fluye en linea. */
.hm-promo-cta .ah-cart-n {
  position: static; display: inline-block; min-width: 1.125rem; height: 1.125rem;
  margin-left: .25rem; padding: 0 .25rem; border-radius: 9999px;
  background: var(--hm-marino); color: #fff; font-size: .6875rem; font-weight: 600;
  line-height: 1.125rem; text-align: center;
}
.hm-promo-cta .ah-cart-n[hidden] { display: none; }
.hm-cta { color: #fff; background: var(--hm-azul); }
.hm-cta:hover { color: #fff; background: var(--hm-marino); }
/* v89 (6-sep, ux-movil; Mario «que se vea optimo en movil»): el CTA principal
   —«Cotizar», el MISMO en las seis paginas medidas— se leia a 12 px, que es el
   registro de pildora de hims para chips y filtros, no para el boton que decide
   la conversion. Sube a 16 px SOLO con el dedo (pointer: coarse); con raton se
   queda en 12, que es lo que dice la hoja.
   Medido ANTES de tocarlo, porque la pildora crece con el texto (white-space:
   nowrap y ancho automatico) y el riesgo real era el desbordamiento: a 390 el
   boton pasa de 77.7 a 90.3 px en una barra de 390 con 168 px libres; a 768 el
   CTA no vive en la barra del pulgar sino en la cabecera, y ahi el grupo de
   acciones crece 12.6 px hacia la izquierda dentro de los 417.5 px vacios que
   hay entre el logo y el grupo — quedan 404.9. Cero desbordamiento de barra y
   de documento, cabecera igual en 73 px y el alto del boton no cambia (48 px
   con el dedo, ya por encima de 44).
   El fragmento del cromo NO se toca: cromo_v3/nav.html sigue byte a byte y
   `cromo.py --verifica` compara lo mismo. */
@media (pointer: coarse) {
  .hm-hdr .hm-hdr-acts .hm-pill.hm-cta { font-size: 1rem; }
}
/* Pildora «Compra en linea» (Mario 1-sep). La EMITE tools/cromo.py al estampar,
   y SOLO cuando `tools/marcas_cobrables.json` nombra exactamente una marca: con
   la lista vacia el header no promete una compra que no existe, y este CSS no
   pinta nada porque no hay nodo. Va antes de «Cotizar» y comparte la geometria
   de .hm-pill; el marino la distingue del azul de la CTA sin inventar un tercer
   componente.
   Bajo 1024 px se retira: a 390 px el header ya lleva logo + 3 iconos + la CTA,
   y una cuarta pieza de ~120 px lo desborda (medido). El camino sigue vivo en el
   mega-menu y en /productos. */
.hm-compra { color: var(--hm-marino); }
.hm-compra:hover { color: var(--hm-marino); background: rgba(0,0,0,.06); }
@media (max-width: 1023px) { .hm-compra { display: none; } }
/* Dedo grueso: el globo del carrito no puede quedar bajo el minimo tactil. El
   icono mide 42 px (2.625rem) y el objetivo sube a 44 sin mover el layout —
   .hm-hdr-acts los reparte con gap, no con anchos fijos. */
@media (pointer: coarse) {
  .hm-ico { width: 2.75rem; height: 2.75rem; }
}

@media (min-width: 1024px) {
  .hm-nav, .hm-search { display: flex; }
  .hm-hs-toggle, .hm-burger { display: none; }
}
@media (min-width: 1266px) { .hm-search { width: 22rem; } }
@media (max-width: 1023px) {
  .hm-hdr.hs-abierta .hm-search {
    display: flex; position: absolute; left: .75rem; right: .75rem; top: calc(100% + .5rem); width: auto; height: 2.75rem;
    background: #fff; box-shadow: var(--hm-sombra-nav);
  }
  .hm-hdr.hs-abierta .hm-search .sku-panel { min-width: 0; right: 0; }
  .hm-hdr.hs-abierta .hm-hs-toggle { background: rgba(0,0,0,.06); }
}

/* ── 3. Mega (hims §2 dropdown): panel blanco que baja del header ─────────── */
.hm-hdr .ahmega {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 900; display: block;
  opacity: 0; transform: translateY(-.5rem); transition: opacity 200ms linear, transform 200ms linear;
}
.hm-hdr .ahmega[hidden] { display: none; }
.hm-hdr .ahmega.on { opacity: 1; transform: none; }
.hm-mega { background: #fff; border-radius: 0 0 var(--hm-r-card) var(--hm-r-card); box-shadow: var(--hm-sombra-nav); }
.hm-mega-in { position: relative; max-width: 90rem; margin: 0 auto; padding: 1.5rem 1.5rem 1.25rem; }
.hm-mega-cerrar { display: none; }
/* Mega v1 (.hm-mega-cols/-h/-item) podado el 30-ago: el mega vigente es
   .hm-mega2-* (tools/cromo_v3/mega.html). `.hm-cajon` NO se toca —esta vivo en
   3,013 paginas—, solo caen sus tres reglas hacia el mega v1. */
.hm-mega-foot { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem .75rem 0; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.06); }
.hm-mega-foot a { display: inline-flex; align-items: center; gap: .375rem; color: var(--hm-azul); font-size: .875rem; font-weight: 600; text-decoration: none; }
.hm-mega-foot a:hover { color: var(--hm-marino); }
.hm-mega-foot svg { width: 1rem; height: 1rem; }
.hm-mega-movil { display: none; }
body:has(.hm-hdr #ahMega.on:not(.hm-cajon))::after {   /* cortina rgba(0,0,0,.44) de hims */
  content: ""; position: fixed; inset: 0; z-index: 700; background: rgba(0,0,0,.44); pointer-events: none;
  animation: hm-cortina 200ms ease-in;
}
@keyframes hm-cortina { from { opacity: 0; } }
@media (max-width: 1023px) {
  /* como cajon: pantalla completa bajo la barra, con cierre flotante (§2 mobile close FAB) */
  .hm-hdr .ahmega { display: none; }
  .hm-hdr .ahmega.hm-cajon { display: block; position: fixed; top: calc(var(--hm-promo-h) + var(--hm-hdr-h)); bottom: 0; overflow-y: auto; }
  html.hm-scrolled .hm-hdr .ahmega.hm-cajon { top: var(--hm-hdr-h); }
  .hm-hdr .ahmega.hm-cajon .hm-mega { min-height: 100%; border-radius: 0; box-shadow: none; }
  .hm-hdr .ahmega.hm-cajon .hm-mega-in { padding: 1rem 1rem 7rem; }
  .hm-hdr .ahmega.hm-cajon .hm-mega-movil {
    display: grid; gap: .25rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(0,0,0,.06);
  }
  .hm-mega-movil a { padding: .75rem .5rem; color: var(--hm-tinta); text-decoration: none; font-size: 1.125rem; border-radius: .75rem; }
  .hm-mega-movil a:hover { background: rgba(0,0,0,.06); }
  .hm-mega-movil .hm-mega-movil-cta { margin-top: .5rem; text-align: center; color: #fff; background: var(--hm-azul); border-radius: var(--hm-r-pill); font-weight: 500; }
  .hm-hdr .ahmega.hm-cajon .hm-mega-cerrar {
    display: inline-flex; align-items: center; justify-content: center; position: fixed; left: 50%; top: calc(100dvh - 6rem);
    width: 2.75rem; height: 2.75rem; margin-left: -1.375rem; border: 0; border-radius: 22px; background: #000; color: #fff;
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.08); cursor: pointer; z-index: 2;
  }
  .hm-mega-cerrar svg { width: 1.25rem; height: 1.25rem; }
}

/* ── 4. Pie (hims §8 Footer): negro, r1.5rem arriba, columnas, logo gigante ─
   `footer.hm-foot` (0,1,1): el arbol trae reglas `footer.global-styles--footer`
   con fondo propio que pisaban el negro plano. Se retiran en la Fase E. */
/* ahnsa-theme.css pinta la foto footer-bg.webp y un degradado en
   footer.global-styles--footer::before/::after (medido): se anulan aqui con
   la misma especificidad; hims es negro plano */
footer.hm-foot::before, footer.hm-foot::after { content: none; }
footer.hm-foot {
  position: relative; background: #000; background-image: none; color: #fff; border-radius: 1rem 1rem 0 0;
  padding: 1rem 1rem 0; content-visibility: auto; contain-intrinsic-size: auto 60rem; overflow: hidden;
}
.hm-foot a { color: inherit; text-decoration: none; }
.hm-foot-in { max-width: 108rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.hm-foot-top { display: flex; flex-direction: column; gap: 1.5rem; }
.hm-foot-card {
  max-width: 26.875rem; min-width: 11.25rem; margin-top: 2rem; padding: 1.5rem; border-radius: var(--hm-r-card);
  background: rgba(255,255,255,.11); display: flex; flex-direction: column; gap: 1rem;
}
.hm-foot-titulo { margin: 0; font-size: var(--hm-fs-25-43); font-weight: 400; line-height: 1; letter-spacing: -.01em; }
.hm-foot-intro { margin: 0; font-size: var(--hm-fs-14-16); line-height: 1.3; color: rgba(255,255,255,.9); }
.hm-foot-form { display: grid; gap: .5rem; }
.hm-foot-form .ah-hp { position: absolute; left: -9999px; }
.hm-foot-input {
  height: 3rem; padding: 0 1.0625rem; border: 2px solid rgba(0,0,0,.19); border-radius: .875rem; background: #fff;
  color: var(--hm-tinta); font: inherit; font-size: var(--hm-fs-16-19); font-weight: 500; transition: border-color 150ms linear;
}
.hm-foot-input::placeholder { color: rgba(0,0,0,.54); font-weight: 400; }
.hm-foot-input:hover { border-color: rgba(0,0,0,.33); }
.hm-foot-input:focus { outline: none; border-color: var(--hm-azul); }
.hm-btn svg { width: 1rem; height: 1rem; }
.hm-foot-contacto { display: flex; gap: 0; }
.hm-foot-circulo {
  display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; margin-right: 1rem;
  border-radius: var(--hm-r-pill); background: rgba(255,255,255,.11); color: #fff; transition: background-color 300ms ease-out, color 300ms ease-out;
}
.hm-foot-circulo svg { width: 20px; height: 20px; }
.hm-foot-circulo:hover { background: #fff; color: #000; }
.hm-foot-cols { display: flex; flex-direction: column; }
.hm-foot-grp h3 { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.875rem; }
.hm-foot-grp h3 button {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 4rem; padding: 2rem 0;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.34); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.hm-foot-chev { position: relative; width: 1rem; height: 1rem; flex: 0 0 auto; }
.hm-foot-chev::before, .hm-foot-chev::after {
  content: ""; position: absolute; top: 50%; width: .625rem; height: 2px; background: currentColor; border-radius: 1px;
  transition: transform 300ms cubic-bezier(.86,0,.07,1);
}
.hm-foot-chev::before { left: 0; transform: rotate(40deg); }
.hm-foot-chev::after { right: 0; transform: rotate(-40deg); }
/* el «nudge» de hims: al pasar por el head del acordeon, un cabeceo en bucle */
@keyframes hm-nudge {
  0% { transform: translate3d(0, 0, 0); }
  30% { transform: translate3d(0, 8%, 0); }
  100% { transform: translate3d(0, -2%, 0); }
}
@media (hover: hover) {
  .hm-foot-grp h3 button:hover .hm-foot-chev {
    animation: hm-nudge 1000ms cubic-bezier(.215, .61, .355, 1) infinite;
  }
}
.hm-foot-grp.is-abierto .hm-foot-chev::before { transform: rotate(-40deg); }
.hm-foot-grp.is-abierto .hm-foot-chev::after { transform: rotate(40deg); }
.hm-foot-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms cubic-bezier(.28,.13,.38,1); }
.hm-foot-panel > ul { overflow: hidden; margin: 0; padding: 0; list-style: none; opacity: 0; transition: opacity 300ms; }
.hm-foot-grp.is-abierto .hm-foot-panel { grid-template-rows: 1fr; }
.hm-foot-grp.is-abierto .hm-foot-panel > ul { opacity: 1; padding: 1rem 0 1.5rem; }
.hm-foot-panel li a {
  display: inline-block; padding-bottom: .5rem; line-height: 1.5rem; font-size: 1.125rem; font-weight: 400;
  border-bottom: .0625rem solid transparent; transition: border-color 300ms linear;
}
.hm-foot-panel li a:hover { border-color: inherit; }
.hm-foot-sec a { font-size: .875rem; color: rgba(255,255,255,.51); }
/* ── Fuente preferida en Google (pie) ────────────────────────────────────────
   Google permite diseno propio para este boton (Search Central, "Preferred
   sources"): el enlace lleva al usuario a SU tablero de preferencias, con el
   dominio precargado. Por eso el texto es una INVITACION, nunca un sello: la
   G de Google identifica de que producto se habla, y no dice que Google
   avale a AHNSA — eso seria un dato inventado con forma de insignia.
   Reactivo al hover: la placa sube y se aclara, el borde toma el azul de la
   casa, la G crece y la flecha corre. Todo a los 200 ms ease-in-out que ya
   usa el resto del sitio, y todo apagado bajo prefers-reduced-motion. */
.hm-gps {
  /* `align-self` + `width:max-content`: el pie es una COLUMNA flex, y ahi un
     inline-flex se estira a los 1,408 px del ancho completo — se veia como
     una barra, no como un boton. Medido en el navegador, no a ojo. */
  display: inline-flex; align-self: flex-start; width: max-content; max-width: 100%;
  align-items: center; gap: .75rem;
  margin: 0 0 1.25rem; padding: .5rem 1rem .5rem .75rem;
  border: .0625rem solid rgba(255,255,255,.22); border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.82); text-decoration: none;
  transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out,
              transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
}
.hm-gps__marca { width: 3.75rem; height: auto; flex: none; opacity: .92; }
.hm-gps__txt { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; }
.hm-gps__txt b { font-size: .8125rem; font-weight: 600; color: #fff; letter-spacing: .01em; }
.hm-gps__txt i { font-size: .6875rem; font-style: normal; color: rgba(255,255,255,.58); }
.hm-gps__g { width: 1rem; height: 1rem; flex: none; transition: transform 200ms ease-in-out; }
/* la flecha se dibuja en CSS: un glifo mas que cargar no vale una flecha */
.hm-gps__fl {
  width: .5rem; height: .5rem; flex: none; margin-left: -.25rem;
  border-top: .09375rem solid currentColor; border-right: .09375rem solid currentColor;
  transform: rotate(45deg); opacity: .55;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
}
.hm-gps:hover, .hm-gps:focus-visible {
  background: rgba(255,255,255,.1);
  border-color: var(--hm-azul-2, #3B9BD9);
  transform: translateY(-.0625rem);
  box-shadow: 0 .25rem .875rem rgba(59,155,217,.28);
}
.hm-gps:hover .hm-gps__g, .hm-gps:focus-visible .hm-gps__g { transform: scale(1.14); }
.hm-gps:hover .hm-gps__fl, .hm-gps:focus-visible .hm-gps__fl {
  transform: rotate(45deg) translate(.125rem, -.125rem); opacity: 1;
}
.hm-gps:focus-visible { outline: .125rem solid var(--hm-azul-2, #3B9BD9); outline-offset: .1875rem; }
@media (prefers-reduced-motion: reduce) {
  .hm-gps, .hm-gps__g, .hm-gps__fl { transition: none; }
  .hm-gps:hover, .hm-gps:focus-visible { transform: none; }
  .hm-gps:hover .hm-gps__g, .hm-gps:focus-visible .hm-gps__g { transform: none; }
  .hm-gps:hover .hm-gps__fl, .hm-gps:focus-visible .hm-gps__fl { transform: rotate(45deg); }
}
.hm-foot-legal { display: flex; flex-direction: column; gap: .5rem; font-size: .75rem; color: rgba(255,255,255,.51); }
.hm-foot-copy { margin: 0; max-width: 60rem; }
.hm-foot-links { display: flex; flex-wrap: wrap; }
.hm-foot-links a, .hm-foot-locale { padding-right: .75rem; padding-bottom: .25rem; }
.hm-foot-links a:hover { color: #fff; }
/* hims estira su wordmark al 100 % (es apaisado); el de AHNSA es 2:1 y a
   ancho completo medía 700 px de alto, asi que se acota y se centra */
.hm-foot-logo {
  /* Era una marca de agua: 44rem de ancho al 17 % de opacidad, o sea un
     fantasma gigante. Mario lo queria como LOGO. Tamano de firma y opaco. */
  display: block; width: min(100%, 17rem); height: auto; margin: 3.25rem auto 0;
  padding-inline: clamp(.375rem, 1vw, .5rem);
  opacity: 1; pointer-events: none;
}
@media (min-width: 1024px) {
  footer.hm-foot { border-radius: var(--hm-r-card) var(--hm-r-card) 0 0; padding-bottom: 3.75rem; }
  .hm-foot-top { flex-direction: row; justify-content: space-between; gap: 2rem; }
  .hm-foot-card { margin-top: 4rem; }
  .hm-foot-cols { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 4rem; }
  .hm-foot-grp h3 { font-size: .75rem; line-height: .875rem; margin-bottom: .5rem; color: rgba(255,255,255,.51); }
  .hm-foot-grp h3 button { min-height: 0; padding: 0; border: 0; cursor: default; pointer-events: none; }
  .hm-foot-chev { display: none; }
  .hm-foot-panel, .hm-foot-grp.is-abierto .hm-foot-panel { display: block; }
  .hm-foot-panel > ul, .hm-foot-grp.is-abierto .hm-foot-panel > ul { opacity: 1; padding: 0; overflow: visible; }
  .hm-foot-panel li a { font-size: 1rem; }
  .hm-foot-grp--principal .hm-foot-panel li:not(.hm-foot-sec) a { font-size: 1.25rem; }
  .hm-foot-legal { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1.5rem; }
}
@media (min-width: 1440px) { .hm-foot-top { gap: 2rem; } }

@media (prefers-reduced-motion: reduce) {
  .hm-promo, .hm-promo-bg, .hm-promo-cta, .hm-hdr, .hm-rec, .hm-hdr .ahmega, .hm-search, .hm-foot-panel, .hm-foot-panel > ul,
  .hm-foot-chev::before, .hm-foot-chev::after { transition: none; }
  body:has(.hm-hdr #ahMega.on)::after { animation: none; }
}

/* ═══ asesor /asesor (hims_tokens §10 + medido_hims cuestionario) ═════════ */
.hm-asesor__pie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; padding: .625rem 1rem 1.25rem; }
.hm-asesor__pie > div { display: flex; flex-direction: column; gap: .625rem; max-width: 34.125rem; margin: 0 auto; }
.hm-asesor__pie .hm-btn { width: 100%; --hm-btn-h: 2.75rem; }
.hm-asesor__pie.is-oculto { visibility: hidden; }
@media (min-width: 516px) { .hm-asesor__pie { padding-bottom: 3rem; } .hm-asesor__pie::before { height: calc(100% + 4.5rem); } .hm-asesor__pie .hm-btn { --hm-btn-h: 2.875rem; } }

/* ═══ motion (hims_tokens §9 motion + medido_hims) ════════════════════════ */
.hm-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--hm-t-reveal) var(--hm-ease-reveal), transform var(--hm-t-reveal) var(--hm-ease-reveal); transition-delay: calc(100ms * var(--hm-i, 0)); will-change: opacity, transform; }
.hm-reveal.is-in { opacity: 1; transform: none; }
.hm-reveal-linea { display: block; overflow: hidden; }
.hm-reveal-linea > span { display: block; opacity: 0; transform: translateY(100%); transition: transform var(--hm-t-title) var(--hm-ease-title), opacity var(--hm-t-title) linear; }
.hm-reveal-linea + .hm-reveal-linea > span { transition-delay: 100ms; }
.is-in .hm-reveal-linea > span, .hm-reveal-linea.is-in > span { opacity: 1; transform: none; }
.hm-float { animation: hm-flota 1500ms ease-in-out infinite; }
/* Podados el 30-ago por 0 usos: .hm-float--lento, .hm-acordeon*, .hm-entra
   (y con .hm-entra se va el UNICO @keyframes con `filter: blur`, que era lo
   que Lighthouse marcaba como animacion no compuesta). `.hm-float` se queda:
   tools/test_css_hims.py lo exige como primitiva del sistema. */
@keyframes hm-flota { 0% { transform: translateY(0); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0); } }
@keyframes hm-pulso { 0% { opacity: 1; transform: translateX(-50%) scale(1); } 50% { opacity: .5; transform: translateX(-50%) scale(1.5); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } }

/* movimiento reducido: sin reveals, sin flotacion, sin auto-giro; todo visible desde el primer frame */
@media (prefers-reduced-motion: reduce) {
  .hm-reveal, .hm-card-wrap, .hm-glass-wrap, .hm-reveal-linea > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hm-float, .hm-card__media > div, .hm-card__sombra, .hm-foot__chevron { animation: none !important; }
  .hm-card, .hm-glass, .hm-glass__cta, .hm-tile__img-hover, .hm-promo, .hm-hdr, .hm-mega, .hm-asesor__paso, .hm-foot__panel { transition: none !important; }
  .hm-card:hover, .hm-glass:hover { transform: none !important; }
  .hm-card__media video { display: none; }
  .hm-track { scroll-behavior: auto; }
}

/* ═══ home v3: lo que el generador emite y B1 no preveia (B3, 26-ago) ═════
   Placeholders de pieza (images/hims/<clave> aun no instalada: marino con la
   letra de la forma o el diametro, data-pendiente="1"), textos de modulo,
   bandas de existencia, cabecera de bento claro, ficha rotativa, creditos. */
.hm-hero__h1 { max-width: 30ch; text-wrap: balance; }   /* 2 lineas >= 1092: 'Distribuidor de herramientas / de corte industrial' */
.hm-ph { display: flex; align-items: center; justify-content: center; color: var(--hm-celeste); font-weight: 300; line-height: 1; letter-spacing: -.02em;
         background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--hm-azul) 45%, var(--hm-marino)) 0%, var(--hm-marino) 70%); }
.hm-ph b { font-weight: 300; }
.hm-ph--tile { position: absolute; inset: 0; font-size: 7rem; background: radial-gradient(circle at 70% 50%, color-mix(in srgb, var(--hm-azul) 55%, var(--hm-marino)) 0%, transparent 60%); }
.hm-tile--2 .hm-ph--tile { font-size: 5rem; }
.hm-card__media > div.hm-ph { position: relative; width: 75%; aspect-ratio: 1; border-radius: var(--hm-r-card); font-size: 6rem; }
.hm-ph--glass { width: 8.875rem; height: 8.875rem; border-radius: 50%; font-size: 3.5rem; box-shadow: 0 0 0 1px var(--hm-glass-borde); }
.hm-ph--ficha { position: absolute; inset: 0; border-radius: 0; font-size: 6rem; color: var(--hm-blanco);
                background: radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--hm-azul-2) 55%, var(--hm-marino)) 0%, var(--hm-marino) 75%); }
.hm-bento__video--pend { background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--hm-azul) 40%, var(--hm-marino)) 0%, var(--hm-marino) 65%); }
.hm-bento--modulos .hm-modulo { min-height: 0; }   /* los 25/30rem de hims son para su media; aqui no hay */
.hm-modulo--ancho { align-items: flex-start; gap: 1rem; padding-bottom: 1.75rem; }
.hm-bento--modulos .hm-modulo--centro { padding-bottom: 2.5rem; }
.hm-modulo__texto { max-width: 34rem; padding: 0 1.75rem; font-size: var(--hm-fs-cuerpo-l); line-height: 1.27; color: var(--hm-blanco-9); }
.hm-modulo--centro .hm-modulo__texto { padding: 0; margin: 0 auto; max-width: 22.5rem; }
.hm-modulo--centro > h2 { max-width: 22.5rem; margin: 0 auto .625rem; }
.hm-bandas { display: flex; flex-wrap: wrap; gap: .375rem; padding: .5rem 1.75rem 0; }
.hm-bandas a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--hm-glass-borde); border-radius: 30px;
               font-size: var(--hm-fs-cuerpo); color: var(--hm-blanco); background: var(--hm-glass); transition: background-color 300ms, color 300ms; }
@media (hover: hover) { .hm-bandas a:hover { background: var(--hm-celeste); color: var(--hm-marino); border-color: transparent; } }
@media (min-width: 1092px) { .hm-modulo__texto, .hm-bandas { padding-inline: 2rem; } }
.hm-bento__cab { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 2.5rem 1.25rem 1.5rem; text-align: center; }
.hm-bento__cab h2 span { color: var(--hm-azul); }
.hm-bento__cab p { max-width: 32rem; color: var(--hm-tinta-4); }
.hm-ficha__dato { margin-top: .5rem; font-size: var(--hm-fs-cuerpo); color: var(--hm-tinta-3); }
.hm-ficha .hm-ph--ficha + .hm-ficha__cuerpo .hm-ficha__titulo, .hm-ficha .hm-ph--ficha + .hm-ficha__cuerpo .hm-ficha__dato { color: var(--hm-blanco); }
.hm-ficha .hm-ph--ficha + .hm-ficha__cuerpo .hm-ficha__titulo span { color: var(--hm-celeste); }
.hm-ficha .hm-ph--ficha ~ .hm-btn { background: var(--hm-blanco); color: var(--hm-marino); }
.hm-opera__credito { position: relative; z-index: 1; margin: .5rem 0 0; padding-inline: calc((100cqi - min(100cqi, var(--hm-col))) / 2 + 2rem); font-size: var(--hm-fs-caption); color: var(--hm-blanco-51); }
.hm-opera__credito a { text-decoration: underline; }
.hm-opera__hero h2 { display: block; }
.hm-claro__cta { margin: 1.5rem 0 0; text-align: center; }
.hm-claro .mk50 { margin: 0; }
.hm-iso { padding-top: 0; }
.hm-foto__ctas { display: flex; flex-wrap: wrap; gap: .5rem; }
.hm-foto .hm-caption { color: var(--hm-blanco-9); }

/* ═══ B6: escena unica de las 10 formas (la vitrina = el control) ═════════
   Mario 26-ago 14:10: las 10 formas ISO juntas en un lienzo de 1920x1080,
   girando; hover = ESA pieza se detiene, se delinea en celeste y dice su
   nombre y su conteo; clic = su listado filtrado. Los sprites traen alfa
   (Blender --sin-piso), asi que el marino y el haz los pone este CSS.
   La escena va EN FLUJO dentro del bento (no de fondo absoluto como el video
   de hims): es interactiva y no puede quedar debajo del lockup del heroe ni
   pelearse por los eventos con .hm-bento__hero. Por eso .hm-vitrina--escena
   recoge los margenes gigantes que el heroe reservaba para el video. */
/* ── B6: el bloque del racimo ─────────────────────────────────────────────
   Las tres proporciones son las de hims, MEDIDAS sobre el espejo el 27-ago:
   1440x1562 = 0.922 · 1092x1263 = 0.865 · 390x857 = 0.455. No son un gusto:
   Mario pidio «el mismo tamano que el de hims» y este bloque es lo unico del
   sitio que se copia a medida. El arte se genero CUADRADO para poder cubrirlas
   -- 1:1 en 0.922 recorta un 8 % del ancho; hims recorta un 4 % con su 0.957.

   Es una IMAGEN, no un video, y la razon esta en tools/instala_b6.py: la caja
   pide 3124 px en pantalla retina y los modelos de video dan 1080 como maximo,
   o sea un 45 % de ampliacion. El master trae 4096. Lo unico que se mueve en el
   de hims es la luz (sus 181 cuadros dan IoU minimo 0.9981 en la pieza), y eso
   se anima aqui abajo con .hm-b6__luz. */
.hm-b6 { position: relative; overflow: hidden; background: var(--hm-marino); }
/* El MEDIO es cuadrado, como el arte: asi no se recorta nada de las
   herramientas. Las tarjetas van DEBAJO, ya fuera del cuadrado pero dentro del
   mismo bloque y sobre el mismo fondo continuo -- medido, las piezas terminan al
   84.9 % del alto del arte y las tarjetas empezaban al 74 %: por eso se
   empalmaban. */
/* El medio cubre TODO el bloque, con la proporcion del arte (3:4). Asi el video
   llega hasta abajo y no hay frontera entre el y la franja de las tarjetas: el
   borde de abajo del arte NO es de un solo color --el haz calido sale por la
   esquina-- y por eso ningun color plano podia empatar con el. hims hace justo
   esto: su video cubre el bloque entero y las tarjetas van encima. */
.hm-b6--video .hm-b6__media { position: absolute; inset: 0; }
/* Mario 10:09: «scrolleo mucho mas que en hims». Su caja mide 1440x1562
   (1.085) y la nuestra era 3:4 (1.333): un 23 % mas de scroll. Se adopta SU
   caja; el video la cubre con object-fit cover anclado ARRIBA (el master es
   mas alto y la parte extendida de abajo era marino liso: recortable). */
.hm-b6--video { aspect-ratio: 1440 / 1562; }
.hm-b6--video video.hm-b6__fondo { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hm-b6--video .hm-b6__fondo { position: absolute; inset: 0; }
.hm-b6__fondo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Con el video puesto, la luz ya viene DENTRO de el (tools/anima_b6.py la rinde
   cuadro a cuadro); la capa CSS sobraria y sumaria dos veces la misma banda. */
.hm-b6--video .hm-b6__luz { display: none; }

/* La luz que respira. hims mide: el centro del haz se desplaza 0.007 del ancho
   -- o sea que NO barre, se abre y se cierra en su sitio -- y el pico cae en la
   mitad exacta del ciclo. Por eso la animacion solo toca opacidad y escala
   transversal, nunca la posicion. */
.hm-b6__luz {
  position: absolute; inset: -20%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(114deg, transparent 34%,
              rgba(255, 224, 190, .30) 45%, rgba(255, 232, 205, .42) 50%,
              rgba(255, 224, 190, .30) 55%, transparent 66%);
  opacity: .55; transform-origin: 50% 50%;
  animation: hm-respira 6s ease-in-out infinite;
}
@keyframes hm-respira {
  0%, 100% { opacity: .30; transform: scaleX(.86); }
  50%      { opacity: .78; transform: scaleX(1.14); }
}
@media (prefers-reduced-motion: reduce) { .hm-b6__luz { animation: none; opacity: .5; } }

/* El copy va DENTRO del bloque, encima del arte. Las posiciones son las de
   hims medidas sobre el espejo: su parrafo cae al 61.4 % del alto y su boton al
   67.7 %, con el sujeto del video ocupando el tercio de arriba. */
.hm-b6__copy {
  position: absolute; left: 50%; top: 58%; transform: translateX(-50%);
  z-index: 3; width: min(92%, 44rem); text-align: center;
}
.hm-b6__h2 {
  margin: 0 0 1.75rem; color: var(--hm-blanco);
  font-size: clamp(1.6rem, 3.5vw, 3rem); line-height: 1.14;
  letter-spacing: -.02em; font-weight: 600;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
.hm-b6__h2 span, .hm-b6__h2 em { display: block; font-style: normal; }
.hm-b6__h2 em { color: var(--hm-oro); }        /* el mismo recurso de hims: la frase clave en el color de acento */
.hm-btn--oro {
  background: var(--hm-oro); color: var(--hm-marino); border-color: var(--hm-oro);
}
.hm-btn--oro:hover { background: color-mix(in srgb, var(--hm-oro) 84%, #fff); }


/* ── Las tarjetas del carrusel, con el diseno del referente ───────────────
   El fondo de la tarjeta NO se elige aqui: llega en `--hm-tarj-bg` desde
   tarjetas.json, que lo MIDIO sobre las fotos. Las fotos se generaron sobre un
   azul plano y la tarjeta tiene que ser ese mismo azul o se ve el rectangulo de
   la foto dentro de la tarjeta. Un color puesto a ojo en los dos sitios es un
   espejo entre dos constantes mias, que es como se colo el `?v=8` un dia entero. */
.hm-sidekick--tarj .hm-track { gap: 1rem; }
.hm-tarj {
  position: relative; flex: 0 0 auto; width: min(74vw, 22rem);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 1.5rem; background: var(--hm-tarj-bg, var(--hm-marino));
  color: var(--hm-blanco); text-decoration: none;
  /* ENTRADA como la mide el dossier de hims: SOLO opacidad, 200 ms lineales,
     100 ms de escalon por indice. Sin translateY, sin scale, sin keyframes --
     lo suave de sus tarjetas es justo que no se mueven. */
  opacity: 0;
  /* hover con RESORTE (Mario 12:04: «que haga un bounce como el de hims»):
     back-out con sobretiro, el scale pasa de largo y regresa. */
  transition: opacity 200ms linear calc(100ms * var(--hm-i, 0)),
              transform 350ms cubic-bezier(.34, 1.56, .64, 1);
}
.hm-track.is-in .hm-tarj, .hm-tarj.is-in { opacity: 1; }
/* sin JS nadie pone .is-in: las tarjetas no pueden quedarse invisibles */
@media (scripting: none) { .hm-tarj, .hm-card-wrap, .hm-glass-wrap { opacity: 1; } }
@media (hover: hover) { .hm-tarj:hover { transform: scale(1.03); } }
.hm-tarj.is-hover { transform: scale(1.03); }
/* velo permanente de legibilidad (abajo) + velo de hover que oscurece toda la
   tarjeta a 200 ms lineales, la pareja exacta de su product card */
.hm-tarj::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(2, 10, 30, 0) 58%, rgba(2, 10, 30, .34) 100%);
}
.hm-tarj::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity 200ms linear;
  background: linear-gradient(180deg, rgba(2, 10, 30, .06) 0%, rgba(2, 10, 30, .28) 100%);
}
.hm-tarj:hover::before, .hm-tarj.is-hover::before { opacity: 1; }
.hm-tarj__foto { display: block; aspect-ratio: 1; }
.hm-tarj__foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* la pieza ocupa poco del render: un 6 % de acercamiento la hace presente
     sin recortar nada que no sea el azul liso del margen */
  transform: scale(1.06);
}
/* la FLOTACION de hims: translateY 0 -> -15 -> 0 en 1500 ms ease-in-out,
   infinita; el JS (flote) la enciende al hover y la deja ATERRIZAR en el
   siguiente animationiteration para que nunca pegue un brinco */
@keyframes hm-flota {
  0%, 100% { transform: translateY(0) scale(1.06); }
  50% { transform: translateY(-15px) scale(1.06); }
}
.hm-tarj.is-flotando .hm-tarj__foto img { animation: hm-flota 1500ms ease-in-out infinite; }
/* v2 (29-ago): la tarjeta con PAR de hover hace el swap de angulo de los chips
   de hims -- crossfade asimetrico, sale a 300 ms y entra a 150 ms -- y NO
   flota (flotar y luego saltar a una foto quieta seria el brinco que hims
   evita). El fondo del pie llega por --hm-tarj-bg desde tarjetas.json. */
.hm-tarj__foto { position: relative; }
.hm-tarj__foto img { transition: opacity 300ms ease-in-out; }
.hm-tarj__foto-hover {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; opacity: 0; transform: scale(1.06);
  transition: opacity 150ms ease-in-out;
}
.hm-tarj.has-hover:hover .hm-tarj__foto-hover,
.hm-tarj.has-hover.is-hover .hm-tarj__foto-hover { opacity: 1; }
.hm-tarj.has-hover:hover .hm-tarj__foto > img:not(.hm-tarj__foto-hover),
.hm-tarj.has-hover.is-hover .hm-tarj__foto > img:not(.hm-tarj__foto-hover) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hm-tarj.is-flotando .hm-tarj__foto img { animation: none; }
}
.hm-tarj__pie { display: block; padding: 0 1.5rem 1.5rem; position: relative; z-index: 2; }
.hm-tarj__n { display: block; font-size: var(--hm-fs-h-m, 1.35rem); font-weight: 600; line-height: 1.2; }
.hm-tarj__d { display: block; margin-top: .35rem; font-size: var(--hm-fs-caption); color: var(--hm-blanco-9); }
.hm-tarj__d--2 { color: var(--hm-blanco-51); }

/* El sello circular, arriba a la derecha: el sitio exacto donde el referente
   pone su «FDA APPROVED». No se copia la acreditacion -- esa no la tenemos --
   sino el recurso: un aro de texto que dice lo que si es cierto. */
.hm-tarj__sello {
  position: absolute; right: .9rem; top: .9rem; z-index: 2;
  width: 4.75rem; aspect-ratio: 1; pointer-events: none;
  animation: hm-gira 22s linear infinite;
}
.hm-tarj__sello svg { width: 100%; height: 100%; }
.hm-tarj__sello text {
  /* blanco, no oro: el oro #EAB188 sobre el azul #15407B daba ~2.8:1 y el aro
     se veia como un arco roto, no como un sello (Mario, 29-ago) */
  font-size: 8px; letter-spacing: .06em; font-weight: 600;
  fill: rgba(255, 255, 255, .88); text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) { .hm-tarj__sello { animation: none; } }

/* Anillo de texto 3D del B6 (.hm-anillo*, v29) podado el 30-ago: 0 usos.
   El generador conserva anillo() pero nadie la llama desde que el B6
   pasó a video —el texto que gira va HORNEADO en el master. */

.hm-escena {
  position: relative; z-index: 1; isolation: isolate;
  width: min(100% - 2 * var(--hm-bento-pad-h), var(--hm-col));
  margin: 0 auto 1.75rem; aspect-ratio: 1920 / 1080;   /* el generador la sobreescribe con la del lienzo recortado */
}
/* haz frio suave detras de las piezas (spec §4b: marino con haz) */
.hm-escena::before {
  content: ""; position: absolute; z-index: -1; inset: -8% -4% -14%; pointer-events: none;
  background: radial-gradient(ellipse 58% 52% at 50% 48%, color-mix(in srgb, var(--hm-azul) 46%, transparent) 0%,
                              color-mix(in srgb, var(--hm-azul) 14%, transparent) 46%, transparent 72%);
}
.hm-escena__pieza {
  position: absolute; display: block; line-height: 0; color: inherit;
  transition: transform 200ms var(--hm-ease-acc);
}
.hm-escena__img, .hm-escena__ph { display: block; width: 100%; height: auto; }
.hm-escena__img { transition: filter 200ms linear; }
/* la HOJA de los 36 cuadros: capa exactamente encima del cuadro 0, en su misma
   caja. Nace en display:none y SIN background-image a proposito — un
   background-image escrito aqui lo pediria el navegador al pintar, que es justo
   lo que la regla del spec §6 prohibe. La URL, el background-size (cols x filas
   de sprite-36.json) y el background-position los pone js/ahnsa-home.js al
   hover/tap de esa pieza, y solo despues de que la hoja ya esta decodificada. */
.hm-escena__hoja {
  position: absolute; inset: 0; display: none;
  background-repeat: no-repeat; transition: filter 200ms linear;
}
.hm-escena__ph { border-radius: var(--hm-r-card-m); font-size: clamp(.875rem, 2.2vw, 2rem); }
/* contorno celeste: la pieza detenida se despega del fondo sin caja ni borde
   (los sprites tienen alfa: el halo sigue la silueta, no un rectangulo) */
.hm-escena__pieza:focus-visible { outline: none; }
.hm-escena__pieza.is-activa, .hm-escena__pieza:focus-visible { transform: scale(1.06); z-index: 3; }
.hm-escena__pieza.is-activa .hm-escena__img, .hm-escena__pieza:focus-visible .hm-escena__img,
.hm-escena__pieza.is-activa .hm-escena__hoja, .hm-escena__pieza:focus-visible .hm-escena__hoja {
  filter: drop-shadow(0 0 14px var(--hm-celeste)) drop-shadow(0 0 2px var(--hm-blanco));
}
@media (hover: hover) {
  .hm-escena__pieza:hover { transform: scale(1.06); z-index: 3; }
  .hm-escena__pieza:hover .hm-escena__img,
  .hm-escena__pieza:hover .hm-escena__hoja { filter: drop-shadow(0 0 14px var(--hm-celeste)) drop-shadow(0 0 2px var(--hm-blanco)); }
}
/* globo con nombre y conteo (el dato real, el mismo que el listado) */
.hm-escena__nombre {
  position: absolute; top: calc(100% + .375rem); left: 50%; transform: translateX(-50%) translateY(.25rem);
  display: flex; flex-direction: column; gap: .0625rem; padding: .375rem .625rem;
  border: 1px solid var(--hm-glass-borde); border-radius: var(--hm-r-card-m);
  font-size: var(--hm-fs-caption); line-height: 1.25; white-space: nowrap; text-align: center;
  color: var(--hm-blanco-9); background: color-mix(in srgb, var(--hm-marino-2) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none; transition: opacity 200ms linear, transform 200ms var(--hm-ease-acc);
}
.hm-escena__nombre b { font-weight: 500; color: var(--hm-blanco); }
.hm-escena__pieza--izq .hm-escena__nombre { left: 0; transform: translateX(0) translateY(.25rem); }
.hm-escena__pieza--der .hm-escena__nombre { left: auto; right: 0; transform: translateX(0) translateY(.25rem); }
.hm-escena__pieza.is-activa .hm-escena__nombre, .hm-escena__pieza:focus-visible .hm-escena__nombre { opacity: 1; transform: translateX(-50%) translateY(0); }
.hm-escena__pieza--izq.is-activa .hm-escena__nombre, .hm-escena__pieza--izq:focus-visible .hm-escena__nombre,
.hm-escena__pieza--der.is-activa .hm-escena__nombre, .hm-escena__pieza--der:focus-visible .hm-escena__nombre { transform: translateX(0) translateY(0); }
@media (hover: hover) {
  .hm-escena__pieza:hover .hm-escena__nombre { opacity: 1; transform: translateX(-50%) translateY(0); }
  .hm-escena__pieza--izq:hover .hm-escena__nombre, .hm-escena__pieza--der:hover .hm-escena__nombre { transform: translateX(0) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hm-escena__pieza, .hm-escena__img, .hm-escena__hoja, .hm-escena__nombre { transition: none !important; }
}


/* ── B8: resenas reales de Google ───────────────────────────────────────────
   Sin foto de autor a proposito: las de Google viven en lh3.googleusercontent.com
   y la CSP del sitio no admite otro host. Va la inicial sobre un circulo marino. */
/* ── B8 Reseñas al 6b de hims: bento marino de dos columnas — tarjeta de
   agregado con gradiente (su «quiz card») + carrusel de vidrio con la cita
   grande, estrellas celestes, avatar cuadrado, flechas y dots. Los HECHOS no
   cambian: resenas reales, con fecha, con enlace, y el agregado que cuenta
   tambien las malas. Solo cambia el escenario. */
.hm-resenas-bento {
  display: grid; gap: 1rem; margin: 1.5rem auto 0; max-width: 108rem;
  border-radius: var(--hm-r-card); background: var(--hm-marino);
  color: var(--hm-blanco); padding: 1rem;
}
@media (min-width: 740px) {
  .hm-resenas-bento { grid-template-columns: 5fr 7fr; min-height: 30rem; padding: 1.5rem; gap: 1.5rem; }
}
.hm-res-quiz {
  display: flex; flex-direction: column; justify-content: center; gap: 1.25rem;
  border-radius: 1.5rem; padding: 2.75rem 2rem;
  background: linear-gradient(160deg, var(--hm-azul) 0%, var(--hm-marino-2) 100%);
}
.hm-res-quiz .hm-caption { color: var(--hm-blanco-9); }
.hm-res-quiz .hm-h2 { color: var(--hm-blanco); }
.hm-res-quiz .hm-btn { align-self: flex-start; }
.hm-res__agregado {
  display: inline-flex; align-items: center; gap: .625rem;
  color: var(--hm-blanco); text-decoration: none;
}
.hm-res__agregado b { font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hm-res__agregado span { font-size: var(--hm-fs-caption); color: var(--hm-blanco-9); }
.hm-res__estrellas { display: inline-flex; gap: .0625rem; color: var(--hm-celeste); }
.hm-res-carrusel {
  position: relative; display: flex; flex-direction: column;
  border-radius: 1.5rem; padding: 2.75rem 1.5rem;
  background: rgba(255, 255, 255, .07);
  /* hims usa blur(70px); a ese radio Chromium headless deja de capturar el
     cuadro y en moviles baratos el compositor lo paga caro. A 28px sobre
     marino se ve IGUAL y cuesta una fraccion (CWV rey). */
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  overflow: hidden;   /* recorta la pista que se DESLIZA (Mario 15:30) */
}
/* Mario 15:30: «como el de hims, slide» — la pista es una fila y el cambio es
   un DESLIZAMIENTO lateral (translateX por indice, desde ahnsa-home.js v15),
   ya no el crossfade apilado. El alto sigue siendo el de la cita mas larga
   porque los items comparten fila con align-items stretch. */
.hm-res-slides {
  display: flex; flex: 1; align-items: stretch;
  transition: transform 480ms cubic-bezier(.25, .8, .25, 1);
}
.hm-res {
  flex: 0 0 100%; min-width: 100%;
  display: flex; flex-direction: column; gap: 0; margin: 0;
  padding-inline: .25rem;
}
@media (min-width: 740px) { .hm-res { padding-inline: 3.25rem; } }
@media (prefers-reduced-motion: reduce) { .hm-res-slides { transition: none; } }
.hm-res .hm-res__estrellas { font-size: 1.375rem; letter-spacing: .125rem; line-height: 1; margin-bottom: 1.5rem; }
.hm-res__texto {
  margin: 0; font-size: clamp(1.375rem, 2.6vw, 2rem); line-height: 1.16;
  letter-spacing: -.01em; font-weight: 500; color: var(--hm-blanco); text-wrap: balance;
}
/* una resena de Google puede ser un parrafo entero: la cita larga baja de
   cuerpo en vez de desbordar la caja */
.hm-res--larga .hm-res__texto { font-size: 1.0625rem; line-height: 1.5; font-weight: 400; text-wrap: initial; }
.hm-res__texto::before { content: '\201C'; }
.hm-res__texto::after { content: '\201D'; }
.hm-res__pie { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: 1.5rem; }
.hm-res__ini {
  flex: 0 0 auto; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: .5rem; background: var(--hm-azul); color: var(--hm-blanco);
  font-size: .9375rem; font-weight: 600;
}
.hm-res__quien { display: flex; flex-direction: column; line-height: 1.3; }
.hm-res__quien b { font-weight: 500; font-size: var(--hm-fs-14-16); }
.hm-res__quien small { font-size: var(--hm-fs-caption); color: var(--hm-blanco-51); }
.hm-res__quien time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-res__ver {
  margin-left: auto; align-self: center; flex: 0 0 auto;
  font-size: var(--hm-fs-caption); color: var(--hm-blanco-51); text-decoration: none;
  border-bottom: .0625rem solid transparent; transition: border-color 300ms linear, color 300ms linear;
}
@media (hover: hover) { .hm-res__ver:hover { color: var(--hm-blanco); border-color: inherit; } }
.hm-res-nav { display: flex; align-items: center; gap: .5rem; padding-top: 1.25rem; }
.hm-res-flecha {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .11); color: var(--hm-blanco);
  cursor: pointer; transition: background-color 300ms ease-out, color 300ms ease-out, opacity 300ms linear;
}
.hm-res-flecha svg { width: 1rem; height: 1rem; }
@media (hover: hover) { .hm-res-flecha:hover:not(:disabled) { background: #fff; color: #000; } }
.hm-res-flecha:disabled { opacity: .4; cursor: default; }
.hm-res-dots { margin-left: auto; display: flex; gap: .375rem; }
.hm-res-dot {
  width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .34); cursor: pointer; transition: background-color 200ms linear;
}
.hm-res-dot.is-activa { background: #fff; }
/* v89 (6-sep, ux-movil; Mario «que se vea optimo en movil»): AREA DE GOLPE de
   los puntos de resena. Medidos en produccion: 8 x 8 px con 6 px de hueco, los
   objetivos mas chicos de la home. El punto NO crece —es un indicador, y a 44
   px de bolita el grupo deja de leerse como paginacion—: crece solo su area
   tactil con un pseudo que no ocupa layout, el mismo patron que ya usa la
   pildora de la barra promo mas abajo. Con hueco de 1.25rem el paso es de 28 px
   y cada punto queda en 24 x 44: los 24 son el minimo de WCAG 2.5.8 AA y sobran
   4 px entre areas, asi que un pulgar en el borde no cae en el vecino.
   Va en (pointer: coarse) y no en max-width porque esto es GESTO, no layout
   (regla de la hoja, linea ~3290): a 768 el tablet tambien se toca con el dedo.
   Cabe: la fila .hm-res-nav mide 342 px a 390 y el grupo pasa de 36 a 64 px,
   con 210 px libres entre las flechas y los puntos.
   OJO para el reporte: los puntos NO son la unica forma de cambiar de resena.
   En la misma fila hay dos .hm-res-flecha de 44 x 44 («Resena anterior» y
   «Siguiente resena») que ya cumplen; esto quita un objetivo fallido, no
   desbloquea una funcion. */
@media (pointer: coarse) {
  .hm-res-dots { gap: 1.25rem; }
  .hm-res-dot  { position: relative; }
  .hm-res-dot::after { content: ''; position: absolute; inset: -18px -8px; }
}


/* ── cabecera de seccion clara (la usan #hm-resenas y #hm-faq) ──────────────
   Estaba sin definir: el bloque de resenas caia a los valores por omision del
   navegador. Mismo lockup que el resto de la home: caption chica arriba,
   titulo con la escala fluida de hims. */
.hm-section__cab { max-width: 108rem; margin: 0 auto 1.5rem; padding-inline: 1rem; }
.hm-section__cab .hm-caption { margin: 0 0 .5rem; color: var(--hm-tinta-2); text-transform: uppercase; letter-spacing: .06em; }
.hm-h2 { margin: 0; font-size: var(--hm-fs-h-l); font-weight: var(--hm-peso-h-l); line-height: 1.1; letter-spacing: -.005em; color: var(--hm-tinta); }


/* ── D5 (AEO): bloque de preguntas ─────────────────────────────────────────
   <details> nativo: el texto de una respuesta cerrada SI viaja en el HTML
   entregado (lo leen el rastreador y el lector de pantalla); lo que lo
   esconderia de verdad es cargarlo con JS, y por eso no hay JS aqui. */
.hm-faq__lista {
  max-width: 52rem; margin: 0 auto; padding-inline: 1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
/* la cabecera comparte el borde izquierdo de la lista: con 108rem quedaba
   pegada al canto de la pagina y las tarjetas centradas en medio. */
#hm-faq .hm-section__cab { max-width: 52rem; }
.hm-faq__item {
  border: 1px solid var(--hm-borde); border-radius: var(--hm-r-card-m);
  background: var(--hm-lavado-2); overflow: hidden;
}
.hm-faq__p {
  display: flex; align-items: center; gap: 1rem; cursor: pointer;
  padding: 1rem 1.25rem; list-style: none;
}
.hm-faq__p::-webkit-details-marker { display: none; }
.hm-faq__p h3 {
  margin: 0; flex: 1 1 auto;
  font-size: var(--hm-fs-cuerpo-l); font-weight: 500; line-height: 1.3; color: var(--hm-tinta);
}
.hm-faq__mas {
  flex: 0 0 auto; position: relative; width: .875rem; height: .875rem;
  transition: transform 300ms var(--hm-ease-acc);
}
.hm-faq__mas::before, .hm-faq__mas::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--hm-tinta-2);
}
.hm-faq__mas::after { transform: rotate(90deg); transition: opacity 300ms var(--hm-ease-acc); }
.hm-faq__item[open] .hm-faq__mas { transform: rotate(180deg); }
.hm-faq__item[open] .hm-faq__mas::after { opacity: 0; }
.hm-faq__r { padding: 0 1.25rem 1.125rem; }
.hm-faq__r p {
  margin: 0; max-width: 44rem;
  font-size: var(--hm-fs-cuerpo); line-height: 1.5; color: var(--hm-tinta-2);
}
.hm-faq__pie { margin: 1.5rem 0 0; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .hm-faq__mas, .hm-faq__mas::after, .hm-res__ver { transition: none !important; }
}


/* ── C5: widget-formulario de corte (Mario 26-ago 18:18, spec §4c) ──────────
   Equivalente AHNSA del bloque de hims "Start your weight loss today · Find
   your Rx match": tarjeta grande con FOTO de una pieza real del pipeline a la
   izquierda y el formulario por pasos a la derecha (en movil la foto va
   arriba). El motor es js/ahnsa-cortes.js (espejo de tools/cortes_motor.py) y
   el conteo del boton sale de data/recomendaciones.json: aqui NO se calcula
   nada de corte, solo se pinta.

   Nada nuevo de diseno: reusa los tokens de hims medidos en hims_tokens.md
   (input §7 newsletter: borde 2px rgba(0,0,0,.19), radio .875rem, foco de
   color, transicion border-color 150ms linear; opciones §10 selector: hover
   rgba(0,0,0,.06), elegido #00000008 + borde rgba(0,0,0,.12), 150ms ease-out;
   tarjeta radio 1.5rem; boton pildora 3rem; error rgba(189,60,50,1)).
   Unica desviacion consciente: la etiqueta del campo NO flota (hims la anima
   de grande a chica al enfocar); aqui nace ya en su posicion pequena dentro
   de la caja, porque la mitad de los campos son <select> y un <select> jamas
   esta "vacio", asi que la mitad del formulario nunca veria la animacion y la
   otra mitad si. Geometria, colores y tiempos son los mismos.
   ------------------------------------------------------------------------ */
.hm-wc {
  --hm-error: rgba(189,60,50,1);          /* hims_tokens §9: borde de input con error */
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  border-radius: var(--hm-r-card-m); background: var(--hm-blanco);
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
}
.hm-wc::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: 1px solid var(--hm-hairline); border-radius: inherit;
}
@media (min-width: 740px)  { .hm-wc { border-radius: var(--hm-r-card); } }
@media (min-width: 1092px) { .hm-wc { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); } }

/* foto: el poster de una pieza YA instalada (marino con haz frio, spec §4b) */
.hm-wc__foto { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--hm-marino); }
@media (min-width: 1092px) {
  .hm-wc__foto { aspect-ratio: auto; height: 100%; min-height: 33rem; }
  /* La foto NO crece con el panel. El paso 4 mide ~1,000 px de alto y, con
     `height:100%` + `object-fit:cover`, el recorte se volvia una tira vertical
     que cortaba la pieza por abajo. Se fija en 4/5 y se pega arriba; el resto
     de la columna lo llena el marino del contenedor, que es el MISMO marino
     del render, asi que la union no se ve. */
  .hm-wc__foto img { position: sticky; top: 0; height: auto; aspect-ratio: 4 / 5; }
}
.hm-wc__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
.hm-wc__credito {
  position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1rem; z-index: 2; margin: 0;
  font-size: var(--hm-fs-caption); font-weight: var(--hm-peso-label); letter-spacing: var(--hm-ls-caption);
  color: var(--hm-blanco-9); text-shadow: 0 1px 12px rgba(0,0,0,.55);
}
.hm-wc__credito span { color: var(--hm-celeste); }

/* panel del formulario */
.hm-wc__panel { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem 1.25rem 1.75rem; }
@media (min-width: 740px)  { .hm-wc__panel { padding: 2.25rem 2rem 2.5rem; } }
@media (min-width: 1092px) { .hm-wc__panel { padding: 2.75rem 3rem 3rem; } }
.hm-wc__cab { display: grid; gap: .5rem; }
/* 0,2,0 a proposito: `.hm-wc__cab p` (0,1,1) le ganaba y lo pintaba gris
   3.23:1. El azul del sistema da 4.74:1 sobre el fondo del widget (AA). */
.hm-wc__cab .hm-wc__kicker { color: var(--hm-azul); }
.hm-wc__cab h2 { color: var(--hm-tinta); text-wrap: balance; }
/* tinta-4 daba 3.23:1 aqui (falla AA). tinta-3 sube a 4.60:1. El TOKEN no se
   mueve: --hm-tinta-4 tiene 22 usos y la paleta la decide Mario, no un audit. */
.hm-wc__cab p { max-width: 34rem; color: var(--hm-tinta-3); text-wrap: pretty; }
.hm-wc__nojs { font-size: var(--hm-fs-cuerpo); color: var(--hm-tinta-3); }
.hm-wc__nojs a { color: var(--hm-azul); text-decoration: underline; }

/* Las opciones, sobre PLACA CLARA — el mismo choque que `.hm-progreso`.
   El asesor paso `.hm-opcion` a la pildora GLASS de hims (`--hm-glass` de
   fondo, `--hm-blanco` de texto, `backdrop-filter: blur(20px)`), que es lo
   correcto sobre su gradiente marino. Aqui dejaba las TRES tarjetas del paso 1
   —Torneado, Fresado, Barrenado, que son la entrada de todo el bloque— en
   blanco sobre blanco: contraste 1.00, invisibles. Esta es la variante clara de
   antes del 27-ago, acotada a `.hm-wc`. */
.hm-wc .hm-opcion {
  color: var(--hm-tinta); background: var(--hm-blanco);
  border-color: var(--hm-borde);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hm-wc .hm-opcion small { color: var(--hm-tinta-3); }
@media (hover: hover) {
  .hm-wc .hm-opcion:hover { background: var(--hm-hover-claro); border-color: transparent; }
}
.hm-wc .hm-opcion:active { background: rgba(0,0,0,.12); }
.hm-wc .hm-opcion { transition: background-color 150ms ease-out, border-color 150ms ease-out; }
.hm-wc .hm-opcion.is-elegida,
.hm-wc .hm-opcion[aria-pressed="true"] {
  color: var(--hm-tinta); background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.12);
  position: relative;
}
/* el INDICADOR de hims en la elegida: punto marino a la derecha */
.hm-wc .hm-opcion.is-elegida::after,
.hm-wc .hm-opcion[aria-pressed="true"]::after {
  content: ''; position: absolute; right: .875rem; top: 50%;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--hm-marino); transform: translateY(-50%);
}
.hm-wc .hm-opcion:focus-visible { outline: 2px solid var(--hm-azul); outline-offset: 2px; }

/* El progreso, sobre PLACA CLARA.
   `.hm-progreso` la comparten dos consumidores con fondos opuestos: el asesor
   (js/ahnsa-asesor.js), que vive sobre el gradiente marino, y este widget, que
   vive sobre el panel blanco. El 27-ago el asesor paso a la tarjeta de hims y
   repinto la clase en blancos translucidos (`rgba(255,255,255,.10)` de fondo,
   `--hm-blanco-51` de texto): correcto sobre el marino, INVISIBLE aqui — las
   cuatro pildoras desaparecian y solo quedaba el numero del paso activo
   flotando en blanco, a 390 px y a 1440 igual. Esto devuelve la variante clara
   de antes, pero ACOTADA a `.hm-wc`, que es lo que faltaba: con dos clases gana
   por especificidad y no depende de quedar despues en el archivo, asi que el
   asesor puede seguir repintando `.hm-progreso` sin volver a apagar esta.
   Si algun dia se separan de verdad, esto se borra y el widget pide su clase. */
.hm-wc .hm-progreso span {
  color: var(--hm-tinta-3); background: rgba(0,0,0,.03);
}
.hm-wc .hm-progreso .is-activo { color: var(--hm-blanco); background: var(--hm-azul); }
.hm-wc .hm-progreso .is-hecho {
  color: var(--hm-azul); background: color-mix(in srgb, var(--hm-azul) 12%, transparent);
}

/* pasos: slide + fade 300 ms (mismo gesto que el asesor) */
.hm-wc__pasos { position: relative; }
.hm-wc__paso { display: grid; gap: 1rem; transition: opacity 300ms ease, transform 300ms ease; }
.hm-wc__paso.is-saliendo { opacity: 0; transform: translateX(-1.5rem); }
.hm-wc__paso.is-entrando { opacity: 0; transform: translateX(1.5rem); }
.hm-wc__paso:focus { outline: none; }
.hm-wc__pregunta { display: grid; gap: .25rem; }
.hm-wc__pregunta h3 { margin: 0; font-size: var(--hm-fs-h-m); font-weight: var(--hm-peso-h-m); line-height: 1.15; letter-spacing: -.005em; color: var(--hm-tinta); }
.hm-wc__pregunta p { margin: 0; font-size: var(--hm-fs-cuerpo); color: var(--hm-tinta-3); }
.hm-wc__acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.hm-wc__acciones .hm-btn { --hm-btn-h: 2.75rem; }
.hm-wc .hm-wc__atras { background: transparent; color: var(--hm-tinta-3); border-color: transparent; padding: 0 .75rem; }
@media (hover: hover) { .hm-wc .hm-wc__atras:hover { background: var(--hm-hover-claro); color: var(--hm-tinta); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* opciones-pildora del paso 1 (primitivo .hm-opcion del asesor, en 2 columnas) */
.hm-wc__opciones { display: grid; gap: .625rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 488px) { .hm-wc__opciones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hm-wc__opciones .hm-opcion { height: 100%; }

/* campos (geometria del input de hims §7) */
.hm-wc__campos { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 488px) { .hm-wc__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hm-wc__campo { position: relative; display: block; }
.hm-wc__campo--ancho { grid-column: 1 / -1; }
.hm-wc__campo > span {
  position: absolute; top: .5625rem; left: 1.0625rem; z-index: 1; pointer-events: none;
  font-size: .75rem; font-weight: var(--hm-peso-label); letter-spacing: 0; color: var(--hm-tinta-3);
  transform-origin: left top;
  transition: transform 200ms cubic-bezier(.33, 0, 0, 1);
}
/* la etiqueta FLOTANTE de hims (200ms cubic-bezier(.33,0,0,1)): sin valor y
   sin foco, baja al centro a tamano completo; con foco o valor, sube. Solo
   para <input> (el <select> siempre muestra valor). Con :has sin soporte,
   se queda arriba: el estado actual, no un estado roto. */
.hm-wc__campo:has(> input:placeholder-shown:not(:focus)) > span {
  transform: translateY(.8125rem) scale(1.333);
}
.hm-wc__campo input, .hm-wc__campo select {
  width: 100%; height: 4rem; padding: 1.375rem 1.0625rem .375rem;
  border: 2px solid var(--hm-borde); border-radius: var(--hm-r-input);
  font: inherit; font-size: var(--hm-fs-cuerpo-l); font-weight: var(--hm-peso-label); line-height: 1.2;
  color: var(--hm-tinta); background: var(--hm-blanco);
  transition: border-color 150ms linear;
}
.hm-wc__campo select {
  padding-right: 2.5rem; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgba(0,0,0,.54) 50%), linear-gradient(135deg, rgba(0,0,0,.54) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) calc(50% + .3rem), calc(100% - 1rem) calc(50% + .3rem);
  background-size: .3125rem .3125rem, .3125rem .3125rem; background-repeat: no-repeat;
}
@media (hover: hover) { .hm-wc__campo input:hover, .hm-wc__campo select:hover { border-color: rgba(0,0,0,.33); } }
.hm-wc__campo input:focus, .hm-wc__campo select:focus { outline: none; border-color: var(--hm-azul); }
.hm-wc__campo input[aria-invalid="true"], .hm-wc__campo select[aria-invalid="true"] { border-color: var(--hm-error); }
.hm-wc__campo input::placeholder { color: rgba(0,0,0,.28); font-weight: 400; }
.hm-wc__ayuda { margin: 0; font-size: var(--hm-fs-caption); color: var(--hm-tinta-3); }

/* errores del motor: SIEMPRE su mensaje, nunca un numero de relleno */
.hm-wc__error {
  display: grid; gap: .25rem; margin: 0; padding: .75rem 1rem;
  border-left: 3px solid var(--hm-error); border-radius: .5rem;
  background: color-mix(in srgb, var(--hm-error) 7%, transparent);
  font-size: var(--hm-fs-cuerpo); line-height: 1.35; color: var(--hm-tinta);
}
.hm-wc__error b { font-weight: 600; color: var(--hm-error); }
.hm-wc__error ul { margin: .25rem 0 0; padding: 0; display: grid; gap: .125rem; }
.hm-wc__error li { font-size: var(--hm-fs-caption); color: var(--hm-tinta-2); }

/* resultado */
.hm-wc__rec {
  display: grid; gap: .75rem; padding: 1.25rem; border-radius: var(--hm-r-card-m);
  color: var(--hm-blanco); background: linear-gradient(127deg, var(--hm-marino) 0%, color-mix(in srgb, var(--hm-azul) 45%, var(--hm-marino)) 100%);
}
.hm-wc__rec-eti { font-size: var(--hm-fs-caption); letter-spacing: var(--hm-ls-caption); color: var(--hm-celeste); }
.hm-wc__rec-cod { font-size: var(--hm-fs-h-l); font-weight: var(--hm-peso-h-l); line-height: 1.05; letter-spacing: -.01em; }
.hm-wc__pills { display: flex; flex-wrap: wrap; gap: .375rem; }
.hm-wc__pill {
  display: inline-flex; align-items: center; gap: .375rem; height: 1.875rem; padding: 0 .75rem;
  border: 1px solid var(--hm-glass-borde); border-radius: var(--hm-r-badge); background: var(--hm-glass);
  font-size: var(--hm-fs-caption); font-weight: var(--hm-peso-label); color: var(--hm-blanco-9);
}
.hm-wc__pill b { font-weight: 600; color: var(--hm-celeste); }
.hm-wc__rec-nota { font-size: var(--hm-fs-caption); line-height: 1.35; color: var(--hm-blanco-51); }

.hm-wc__params { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 488px) { .hm-wc__params { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hm-wc__param {
  display: grid; gap: .125rem; padding: .625rem .75rem;
  border: 1px solid var(--hm-borde); border-radius: .75rem; background: var(--hm-lavado-2);
}
.hm-wc__param dt { font-size: var(--hm-fs-caption); color: var(--hm-tinta-3); }
.hm-wc__param dd { margin: 0; font-size: var(--hm-fs-cuerpo-l); font-weight: var(--hm-peso-label); color: var(--hm-tinta); font-variant-numeric: tabular-nums; }
.hm-wc__param dd small { font-size: .6875rem; font-weight: 400; color: var(--hm-tinta-3); }

.hm-wc__cta { display: grid; gap: .5rem; }
.hm-wc__cta .hm-btn { width: 100%; min-height: 3.25rem; }
.hm-wc__nota {
  display: grid; gap: .375rem; margin: 0; padding: .875rem 1rem;
  border-left: 3px solid var(--hm-azul); border-radius: .5rem;
  background: color-mix(in srgb, var(--hm-azul) 6%, transparent);
  font-size: var(--hm-fs-cuerpo); line-height: 1.35; color: var(--hm-tinta-2);
}
.hm-wc__nota b { color: var(--hm-tinta); font-weight: 600; }
.hm-wc__nota a { color: var(--hm-azul); text-decoration: underline; }
.hm-wc__avisos { display: grid; gap: .25rem; margin: 0; padding: 0; }
.hm-wc__avisos li { position: relative; padding-left: .875rem; font-size: var(--hm-fs-caption); line-height: 1.4; color: var(--hm-tinta-3); }
.hm-wc__avisos li::before { content: ""; position: absolute; left: 0; top: .5em; width: .25rem; height: .25rem; border-radius: 50%; background: var(--hm-tinta-4); }

/* «cuales quedaron fuera y por que» (arreglo 01). Vive en el paso de medidas
   —plegado, para no tapar el formulario— y tambien dentro de .hm-wc__error
   cuando no queda ningun compatible. */
.hm-wc__excluidos { font-size: var(--hm-fs-caption); color: var(--hm-tinta-3); }
.hm-wc__excluidos > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem 0; font-weight: var(--hm-peso-label); color: var(--hm-tinta-3);
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
  text-decoration-color: var(--hm-borde);
}
.hm-wc__excluidos > summary::-webkit-details-marker { display: none; }
.hm-wc__excluidos > summary::before {
  content: ""; width: .3125rem; height: .3125rem; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform 150ms ease-out;
}
.hm-wc__excluidos[open] > summary::before { transform: rotate(-135deg) translate(-1px, -1px); }
@media (hover: hover) { .hm-wc__excluidos > summary:hover { color: var(--hm-tinta); } }
.hm-wc__excluidos > ul { margin: .375rem 0 0; padding: 0 0 0 .0625rem; display: grid; gap: .5rem; }
.hm-wc__excluidos > ul > li { list-style: none; }
.hm-wc__excluidos > ul > li > b { font-weight: 600; color: var(--hm-tinta-2); }
.hm-wc__excluidos ul ul { margin: .125rem 0 0; padding: 0; display: grid; gap: .125rem; }
.hm-wc__excluidos ul ul li { position: relative; padding-left: .75rem; line-height: 1.35; }
.hm-wc__excluidos ul ul li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .25rem; height: .25rem; border-radius: 50%; background: var(--hm-tinta-4);
}
.hm-wc__error .hm-wc__excluidos { margin-top: .25rem; }
.hm-wc__error .hm-wc__excluidos > summary { color: var(--hm-tinta-2); }

@media (prefers-reduced-motion: reduce) {
  .hm-wc__paso { transition: none !important; }
  .hm-wc__paso.is-saliendo, .hm-wc__paso.is-entrando { opacity: 1; transform: none; }
  .hm-wc__excluidos > summary::before { transition: none; }
}


/* ── B5-bis: fila de 4 chips de OPERACION (la CategoryTilesRow de hims) ──────
   Medidas tomadas de _entrega_home_hims/hims_tokens.md (linea 82-93): 4 chips de
   337x100, gap 4 px, radio 24 px, alto 5rem movil -> 6.25rem >=740, padding
   0 .5rem 0 1rem, texto 16->19 px peso 400 con transition color 400ms, y hover
   por ::before a pantalla completa con opacity 0->1 en 400ms ease.
   Lo unico que cambia respecto a hims es la paleta: su crema por nuestro azul. */
.hm-ops {
  display: grid; grid-template-columns: 1fr; gap: .25rem;
  padding-inline: clamp(.3125rem, calc(.3125rem + (100vw - 840px) * .02), 1rem);
  margin-bottom: 1.5rem;
}
.hm-op {
  position: relative; isolation: isolate; overflow: hidden; flex-shrink: 0;
  height: 5rem; padding: 0 .5rem 0 1rem;
  display: flex; align-items: center; gap: .75rem;
  border-radius: 1.5rem; text-decoration: none;
  background: linear-gradient(167deg, #E8EEF6 0%, #F5F8FC 38%, #F5F8FC 84%, #E8EEF6 100%);
  color: var(--hm-marino);
  transition: color 400ms ease;
}
/* la capa de color del hover: full-bleed bajo el contenido, 400 ms como hims */
.hm-op::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  transition: opacity 400ms ease;
}
/* 29-ago (Mario): «diferente color cada uno», como los 4 chips de hims. Antes
   eran cuatro azules casi identicos. Ahora: ORO (torneado: el color del
   inserto TiN, #EAB188 muestreado del propio arte), AZUL (fresado), CELESTE
   (barrenado) y MARINO (roscado) — toda la paleta de la casa, nada nuevo. */
/* Mario 09:36: SOLO el dorado (torneado, el color del inserto) y los demas
   MARINO — tres profundidades del mismo azul de la casa para que no se
   confundan entre si sin salirse de la paleta. */
/* Mario 12:08: cada operacion con su color, como los chips de hims —
   torneado oro (queda), fresado ROJO oxido, barrenado AZUL, roscado verde
   petroleo (eleccion nuestra: el color del refrigerante de corte). */
.hm-op--1::before { background: linear-gradient(162deg, #7A4E12 0%, #C08A3E 48%, #7A4E12 100%); }
.hm-op--2::before { background: linear-gradient(167deg, #5E1512 0%, #9E3A2E 52%, #5E1512 100%); }
.hm-op--3::before { background: linear-gradient(167deg, #122C74 0%, #1E4E8C 52%, #122C74 100%); }
.hm-op--4::before { background: linear-gradient(167deg, #0C352F 0%, #17594E 52%, #0C352F 100%); }
/* y la imagen se EMPUJA hacia arriba al hover ademas del cruce de angulo */
.hm-op__img { transition: transform 300ms ease; }
.hm-op:hover .hm-op__img, .hm-op.is-hover .hm-op__img { transform: translateY(-6px); }

.hm-op__img--pend {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: color-mix(in srgb, var(--hm-celeste) 34%, #fff);
  color: var(--hm-marino); font-weight: 600;
}
.hm-op__texto { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; }
.hm-op__texto b { font-size: clamp(1rem, calc(1rem + (100vw - 360px) * .0043), 1.1875rem); font-weight: 400; line-height: 1.2; }
.hm-op__n { font-size: var(--hm-fs-caption); color: var(--hm-tinta-3); font-variant-numeric: tabular-nums; transition: color 400ms ease; }
.hm-op__chevron { margin-left: auto; flex: 0 0 auto; color: var(--hm-tinta-3); transition: color 400ms ease; }

/* FUERA del `@media (hover: hover)`, a proposito. Ese bloque no se aplica si el
   navegador reporta que el puntero primario no puede hacer hover -- pasa en
   equipos con pantalla tactil aunque tengan raton conectado. Con TODAS las
   reglas de color ahi dentro, en esas maquinas el chip no reaccionaba en
   absoluto: ni color, ni texto, ni cruce de imagen. Mario, en su maquina: «los
   chips tampoco reaccionan ni se cambian de color».
   `.is-hover` la pone js/ahnsa-home.js en el `pointerenter`, que SI llega con
   raton en cualquier dispositivo. Se dejan las dos: el `:hover` para lo comun y
   la clase como red. */
.hm-op:hover::before, .hm-op.is-hover::before { opacity: 1; }
.hm-op:hover, .hm-op.is-hover { color: var(--hm-blanco); }
.hm-op:hover .hm-op__n, .hm-op.is-hover .hm-op__n,
.hm-op:hover .hm-op__chevron, .hm-op.is-hover .hm-op__chevron { color: var(--hm-blanco-9); }
.hm-op:hover .hm-op__img--pend, .hm-op.is-hover .hm-op__img--pend { background: var(--hm-blanco-51); color: var(--hm-blanco); }
.hm-op:focus-visible { outline: 2px solid var(--hm-azul); outline-offset: 2px; }

@media (min-width: 740px) { .hm-ops { grid-template-columns: 1fr 1fr; } .hm-op { height: 6.25rem; } }
@media (min-width: 1092px) { .hm-ops { margin-bottom: 2.25rem; } }
@media (min-width: 1266px) { .hm-ops { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { .hm-op, .hm-op::before, .hm-op__n, .hm-op__chevron { transition: none !important; } }

/* cross-fade de hims en el chip: 2.a foto encima, opacity 0 -> 1 en 200 ms lineales,
   SIN transform (medido en hims_tokens.md linea 77: "image cross-fade, no transform"). */
.hm-op:hover .hm-op__img-hover, .hm-op.is-hover .hm-op__img-hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hm-op__img img { transition: none !important; } }

/* La imagen del chip pasa a la regla MEDIDA en hims para su carrusel de producto:
   arte 1:1 con object-fit: CONTAIN sobre una placa clara, o sea el producto flota
   con margen y no se recorta (hims_tokens / _medido_exoma_hero.md §2: nat 292x292,
   caja 278x168, fit contain). Antes iba un poster 16:9 con la pieza al centro y el
   fondo marino horneado, que sobre un chip claro se leia como un bloque oscuro. */
.hm-op__img {
  position: relative; flex: 0 0 auto;
  /* Mario 12:08 «mas grande como hims» + dossier §2.2: el chip de hims mide
     100 px de alto (ya lo cumplimos) y su arte LLENA la caja (100%/100%, sin
     placa). El arte pasa de 56 a 80 px dentro del chip de 100. */
  width: 5rem; height: 5rem;
  display: grid; place-items: center;
  border-radius: 1rem; overflow: hidden;
}
.hm-op__img img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  /* Tiempos MEDIDOS en hims (_medido_hover_hims.md): la que SALE tarda .3s y la
     que ENTRA .15s -- el doble de rapido. Esa asimetria es la clave: con las dos
     a 200 ms (lo que habia) el efecto se siente muerto, un desvanecido en vez
     de un cambio. */
  transition: opacity .3s ease;
}
/* El .15s va en el SPAN, no en el <img>: quien cambia de opacidad es el
   contenedor. Puesto en la imagen no se aplicaba nunca -- lo caz o
   tools/verifica_vs_hims.py comparando contra hims capa por capa. */
/* OJO CON LA ESPECIFICIDAD. `.hm-op__img-hover` ES el <img>, no un span que lo
   envuelva, asi que `.hm-op__img img` (0,1,1) le ganaba a `.hm-op__img-hover`
   (0,1,0) y el .15s no se aplicaba nunca: medido 0.3s donde hims da 0.15s.
   Se sube la especificidad para que gane el que debe. */
.hm-op__img img.hm-op__img-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .15s ease; }
/* Y la base tiene que IRSE, no solo quedar tapada. En hims cambian 4 capas (las
   dos imagenes, cada una con su span); aqui cambiaba 1. Con la base fija debajo
   el cruce se ve turbio en los bordes con alfa. */
/* SOLO si de verdad hay una imagen de hover debajo: sin el :has(), un chip sin
   variante -h desvanecia su unica imagen hacia NADA (la broca desaparecia). */
.hm-op:hover .hm-op__img:has(img.hm-op__img-hover) img:not(.hm-op__img-hover),
.hm-op.is-hover .hm-op__img:has(img.hm-op__img-hover) img:not(.hm-op__img-hover) { opacity: 0; }
/* El texto y el chevron van a .4s, mas lento que la imagen: el ojo sigue la
   herramienta y el texto acompana. Tambien medido en hims. */
.hm-op__texto b, .hm-op__n, .hm-op__chevron { transition: color .4s ease; }
.hm-op__chevron svg { transition: stroke .4s ease, fill .4s ease; }
@media (hover: hover) {
  .hm-op:hover .hm-op__img-hover, .hm-op.is-hover .hm-op__img-hover { opacity: 1; }
  /* la placa se aclara cuando el chip se llena de color, para que la pieza siga leyendo */
  }
@media (min-width: 740px) { .hm-op__img { width: 4.25rem; height: 4.25rem; border-radius: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .hm-op__img img { transition: none !important; } }

/* ── C2-bis: el asesor al registro de hims ─────────────────────────────────
   Medido en el espejo (hims_tokens.md 190-202): la tarjeta del cuestionario es
   546x600 con gradiente, y sus opciones son PILDORAS GLASS —fondo translucido,
   borde de 1 px translucido, backdrop-filter: blur(20px)— de alto 3.25rem que
   sube a 3.375rem en >=740, con hover a rgba(0,0,0,.33). El nuestro eran
   pildoras blancas sobre pagina blanca: funcionaba, pero no se leia como el
   referente. La entrada de paso pasa a la medida de hims: desplazamiento +
   blur(6px) + opacidad, no solo opacidad (medido_hims.md linea 24). */
.hm-asesor {
  min-height: 100dvh;
  padding: calc(var(--hm-promo-h) + var(--hm-hdr-h) + 1px) 1rem 200px;
  background: var(--hm-lavado-2);
}
.hm-asesor__col {
  width: 100%; max-width: 34.125rem;      /* 546 px, el ancho de la tarjeta de hims */
  margin: 2rem auto 0;
  padding: 1.75rem 1.5rem 2rem;
  border-radius: var(--hm-r-card-m);
  background: linear-gradient(158deg, var(--hm-marino) 0%, var(--hm-azul) 62%, var(--hm-azul-2) 100%);
  box-shadow: 0 24px 60px rgba(10, 30, 94, .22);
  color: var(--hm-blanco);
}
.hm-asesor__pantalla { min-height: 0; padding-top: 0; overflow: hidden; text-wrap: pretty; }
.hm-asesor__cab { display: grid; gap: .5rem; margin: 1.25rem 0 1.25rem; }
.hm-asesor__cab h2 {
  font-size: clamp(1.625rem, calc(1.625rem + (100vw - 360px) * .012), 2rem);
  font-weight: var(--hm-peso-d-m); line-height: 1.15; letter-spacing: -.01em;
  color: var(--hm-blanco);
}
.hm-asesor__cab p { font-size: 1rem; line-height: 1.35; color: var(--hm-blanco-9); }

/* el progreso, sobre el gradiente */
.hm-progreso { display: flex; gap: .25rem; height: 2rem; align-items: center; }
.hm-progreso span {
  display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; height: 2rem;
  border-radius: var(--hm-r-pill); font-size: .75rem; font-weight: 500;
  color: var(--hm-blanco-51); background: rgba(255,255,255,.10);
  transition: background-color 300ms, color 300ms;
}
.hm-progreso .is-activo { color: var(--hm-marino); background: var(--hm-blanco); }
.hm-progreso .is-hecho { color: var(--hm-blanco); background: rgba(255,255,255,.26); }

/* las opciones: pildora glass de hims */
.hm-opciones { display: flex; flex-direction: column; gap: .25rem; }
.hm-opcion {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; min-height: 3.25rem; padding: 0 1.25rem;
  border: 1px solid var(--hm-glass-borde); border-radius: var(--hm-r-pill);
  font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.2; text-align: center;
  color: var(--hm-blanco); background: var(--hm-glass); cursor: pointer;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
.hm-opcion small { font-size: .8125rem; color: var(--hm-blanco-51); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .hm-opcion:hover { background: var(--hm-glass-hover); border-color: rgba(255,255,255,.30); } }
.hm-opcion:active { background: rgba(0,0,0,.42); }
.hm-opcion.is-elegida, .hm-opcion[aria-pressed="true"] { background: var(--hm-blanco); color: var(--hm-marino); border-color: var(--hm-blanco); }
.hm-opcion.is-elegida small, .hm-opcion[aria-pressed="true"] small { color: var(--hm-tinta-3); }
.hm-opcion:focus-visible { outline: 2px solid var(--hm-blanco); outline-offset: 2px; }
.hm-opcion--tarjeta { flex-direction: column; align-items: flex-start; gap: .375rem; min-height: 4rem; padding: 1.125rem 1.5rem; border-radius: var(--hm-r-card-m); text-align: left; font-size: .875rem; }
@media (min-width: 740px) { .hm-opcion { min-height: 3.375rem; font-size: 1.125rem; } }

/* el pie deja de ser blanco: vive sobre el fondo claro de la pagina */
.hm-asesor__pie::before {
  background: linear-gradient(transparent, color-mix(in srgb, var(--hm-lavado-2) 77%, transparent) 25%, var(--hm-lavado-2) 100%);
}

/* v78 (31-ago): el asesor deja de preguntar a ciegas y el pie deja de tapar.
   - la pantalla reserva el alto del pie FIXED: sin esta reserva, en listas de
     6+ opciones el boton Atras caia ENCIMA de la sexta (medido: tapaba
     "Trigon 80 (W)" y "25.4 mm" en el recorrido del 31-ago).
   - .hm-asesor__ayuda: la linea de consejo bajo la pregunta (desahogo/forma).
   - .hm-op-croquis: el croquis sk-forma-* del listado dentro de la opcion;
     solo contorno y barreno (la guia del IC y la cota son ruido a 2rem). */
.hm-asesor__pantalla { padding-bottom: 7.5rem; }
.hm-asesor__ayuda { margin-top: .5rem; font-size: .8125rem; line-height: 1.5; color: inherit; opacity: .78; }
.hm-opcion--croquis { display: flex; align-items: center; gap: .75rem; text-align: left; }
.hm-op-croquis { width: 2.25rem; height: 2.25rem; flex: none; }
.hm-op-croquis .rl, .hm-op-croquis .d2 { fill: none; stroke: currentColor; stroke-width: 4; }
.hm-op-croquis .gu, .hm-op-croquis .cota { display: none; }

/* entrada de paso: la medida de hims (desplazamiento + desenfoque + opacidad) */
.hm-asesor__paso { transition: opacity 300ms var(--hm-ease-acc), transform 300ms var(--hm-ease-acc), filter 300ms var(--hm-ease-acc); }
.hm-asesor__paso.is-saliendo { opacity: 0; transform: translateX(-1.5rem); filter: blur(6px); }
.hm-asesor__paso.is-entrando { opacity: 0; transform: translateX(1.5rem); filter: blur(6px); }
@media (prefers-reduced-motion: reduce) {
  .hm-asesor__paso { transition: none !important; filter: none !important; transform: none !important; }
}

/* ── Banda de confianza: UNA sola foto con el texto encima (Mario 27-ago) ───
   Antes eran dos paneles (texto | foto) y se veia como dos fotos pegadas. Ahora
   la foto ES el fondo del banner y el texto va encima, con un velo de gradiente
   desde la izquierda para que el texto se lea sobre la parte clara de la toma.
   La foto se compone A LA FORMA DE LA CAJA (2.6:1) con el sujeto en el tercio
   derecho, para que el velo caiga sobre fondo vacio y no sobre la mano. */
.hm-conf {
  position: relative; isolation: isolate; overflow: hidden;
  display: block; min-height: 20rem;
  border-radius: var(--hm-r-card-m);
  background: var(--hm-marino); color: var(--hm-blanco);
}
.hm-conf__foto { position: absolute; inset: 0; z-index: -2; }
.hm-conf__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; display: block; }
/* el velo: opaco a la izquierda donde va el texto, transparente sobre el sujeto */
.hm-conf::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(96deg,
      color-mix(in srgb, var(--hm-marino) 92%, transparent) 0%,
      color-mix(in srgb, var(--hm-marino) 78%, transparent) 34%,
      color-mix(in srgb, var(--hm-marino) 24%, transparent) 58%,
      transparent 74%);
}
.hm-conf__texto {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  max-width: 34rem; padding: 2.25rem 1.5rem;
}
.hm-conf__h2 {
  margin: 0;
  font-size: clamp(2rem, calc(2rem + (100vw - 360px) * .028), 3.5rem);
  font-weight: var(--hm-peso-display); line-height: 1.03; letter-spacing: -.02em;
  text-shadow: 0 1px 24px rgba(10,30,94,.45);
}
.hm-conf__h2 span { color: var(--hm-celeste); }
.hm-conf__texto p { margin: 0; max-width: 26rem; font-size: var(--hm-fs-cuerpo-l); line-height: 1.35; color: var(--hm-blanco-9); }
.hm-conf__ctas { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (min-width: 740px) {
  /* La caja toma la PROPORCION DEL ARTE (2.6), no un alto fijo. Con
   `min-height: 26rem` la caja medía 1425x416 = 3.43 y la foto es 2.60: con
   `object-fit: cover` el navegador la agrandaba para llenar 3.43 y se comia el
   24 % del alto. Eso es lo que Mario veia -- «la foto de la mano sigue muy
   zoomed in».
   Es el MISMO fallo que ya estaba documentado (_medido_exoma_hero.md §2: el
   arte se compone a la forma de su caja) y volvio a pasar porque el verificador
   comparaba contra una constante que yo habia escrito a mano (ARTE_AR
   'confianza': 2.6) en vez de contra la caja de verdad: validaba mi suposicion.
   Aqui se hace al reves -- la caja se ajusta al arte, que es lo que no recorta
   nada. */
.hm-conf { aspect-ratio: 2.6 / 1; min-height: 20rem; display: flex; align-items: center; }
  .hm-conf__texto { padding: 3rem 1.5rem 3rem 3rem; }
}
@media (min-width: 1092px) { .hm-conf__texto { padding: 3.5rem 1.5rem 3.5rem 4rem; } }

/* ── ficha de marca (/marcas/<slug>) ──────────────────────────────────────
   El heroe viejo era una foto a sangre con un velo encima y el texto dentro.
   Mario: «eliminar la estructura y foto del current hero no me gusta, mismo
   estilo de antes con widgets». Asi que aqui no hay foto de fondo: superficie
   clara, jerarquia y cifras que se pueden comprobar. El video oficial de la
   marca deja de ser papel tapiz y pasa a ser UN WIDGET que se reproduce si el
   visitante quiere — son de 5 a 11 MB y traen locucion; ponerlos en autoplay
   detras del texto castiga el LCP y habla solo. */
.hm-mk { --hm-mk-pad: clamp(1rem, 4vw, 2.5rem); }

.hm-mk__hero {
  max-width: var(--hm-max-hero); margin: 0 auto var(--hm-gap-seccion);
  padding: clamp(1.5rem, 5vw, 3.5rem) var(--hm-mk-pad) clamp(1.5rem, 4vw, 2.5rem);
  background: var(--hm-lavado); border-radius: var(--hm-r-card);
}
.hm-mk__crumbs { margin: 0 0 1.25rem; font-size: var(--hm-fs-caption); color: var(--hm-tinta-3); }
.hm-mk__crumbs a { color: var(--hm-tinta-2); text-decoration: none; }
.hm-mk__crumbs a:hover { text-decoration: underline; }
.hm-mk__logo { display: block; height: 3rem; width: auto; max-width: 13rem; margin: 0 0 1.25rem; object-fit: contain; object-position: left center; }
.hm-mk__hero h1 { margin: 0 0 .75rem; max-width: 20ch; }
.hm-mk__sub { margin: 0; max-width: 46ch; color: var(--hm-tinta-2); }
.hm-mk__ctas { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.5rem; }

/* las cifras: cada una tiene que poder comprobarse contra el catalogo */
.hm-mk__cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .25rem; margin: 2rem 0 0;
}
.hm-mk__cifra {
  padding: 1rem 1.125rem; background: var(--hm-blanco);
  border-radius: var(--hm-r-chico);
}
.hm-mk__cifra dt { font-size: var(--hm-fs-caption); color: var(--hm-tinta-3); text-transform: uppercase; letter-spacing: .06em; }
.hm-mk__cifra dd { margin: .25rem 0 0; font-size: var(--hm-fs-h-l); font-weight: var(--hm-peso-h-l); line-height: 1.1; font-variant-numeric: tabular-nums; }

/* el video, como widget */
.hm-mk__video { position: relative; margin: 0; border-radius: var(--hm-r-card); overflow: hidden; background: var(--hm-marino); }
.hm-mk__video img, .hm-mk__video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hm-mk__play {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .75rem;
  border: 0; background: color-mix(in srgb, #0A1E5E 34%, transparent);
  color: var(--hm-blanco); font: inherit; cursor: pointer;
  transition: background 200ms linear;
}
.hm-mk__play:hover, .hm-mk__play:focus-visible { background: color-mix(in srgb, #0A1E5E 46%, transparent); }
.hm-mk__play span { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--hm-blanco); color: var(--hm-marino); font-size: 1.5rem; }
.hm-mk__play small { font-size: var(--hm-fs-caption); color: var(--hm-blanco-9); }
.hm-mk__video.is-play .hm-mk__play { display: none; }
@media (scripting: none) { .hm-mk__play { display: none; } }
.hm-mk__pie { margin: .625rem 0 0; font-size: var(--hm-fs-caption); color: var(--hm-tinta-3); }

/* familias */
/* .hm-mk__fams/__fam podados el 30-ago: 0 usos. */

/* grados */
.hm-mk__grados { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.hm-mk__grados li {
  padding: .3125rem .75rem; border-radius: var(--hm-r-pill);
  background: var(--hm-lavado); font-size: var(--hm-fs-caption);
  font-variant-numeric: tabular-nums;
}
.hm-mk__nota { max-width: 62ch; color: var(--hm-tinta-2); }
.hm-mk__prosa { max-width: 62ch; color: var(--hm-tinta-2); }
.hm-mk__prosa p { margin: 0 0 .75rem; }

@media (min-width: 60rem) {
  .hm-mk__lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
}

/* El cierre de la ficha de marca. No reusa `.hm-modulo` porque esa es la caja
   OSCURA de la home: tiene min-height 30rem y topa el h2 en 22.5rem, asi que
   «Cotiza tu herramienta Sumitomo» salia partido en tres renglones dentro de
   medio metro de vacio. */
.hm-mk__cierre {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .5rem; padding: clamp(2.5rem, 7vw, 4.5rem) var(--hm-mk-pad);
  background: var(--hm-lavado); border-radius: var(--hm-r-card);
}
.hm-mk__cierre h2 { max-width: 26ch; margin: 0; }
.hm-mk__cierre p { max-width: 48ch; margin: 0; color: var(--hm-tinta-2); }
.hm-mk__cierre .hm-mk__ctas { margin-top: 1.25rem; }

/* Sello circular v28 (.hm-sello/__giro/__centro) podado el 30-ago: 0 usos;
   sello() esta definida y nunca se llama. NO confundir con .hm-tarj__sello,
   que es el vivo y sigue usando @keyframes hm-gira. */
@keyframes hm-gira { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ── Rejilla de marcas (sustituye al marquee .mk50) ───────────────────────
   Mario, 27-ago: la tira de logotipos «no queda muy bien» y hims no la tiene.
   Un logotipo desfilando no dice nada; el logotipo CON su cifra si, y ademas se
   puede pinchar. Un solo dato por marca -- las familias ya las cuenta la ficha. */
.hm-marcas-rejilla {
  display: grid; gap: .75rem; padding: 0 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px)  { .hm-marcas-rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .hm-marcas-rejilla { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
@media (min-width: 1266px) { .hm-marcas-rejilla { grid-template-columns: repeat(6, 1fr); } }
.hm-marca {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  padding: 1.5rem 1rem; border-radius: 1rem; text-decoration: none;
  background: var(--hm-lavado); border: 1px solid var(--hm-hairline);
  transition: background .2s ease, transform .2s ease;
}
@media (hover: hover) { .hm-marca:hover { background: var(--hm-lavado-2); transform: translateY(-2px); } }
.hm-marca.is-hover { background: var(--hm-lavado-2); transform: translateY(-2px); }
/* .hm-marca__logo/__n podados el 30-ago: 0 usos. */

/* ── B6 continuo: el fondo no se corta entre el arte y las tarjetas ───────
   Comparando con hims (capturas de Mario del 28-ago) lo primero que saltaba era
   una COSTURA: nuestro arte muere en un casi-negro (#0D0F22, medido al instalar
   y servido en --hm-b6-borde) y la seccion de abajo empezaba en marino #0A1E5E.
   Dos colores distintos pegados. En hims el mismo degradado pasa por detras del
   titular, del producto y de las tarjetas, sin un solo escalon.

   Asi que la seccion ARRANCA en el color donde muere el arte y baja al marino, y
   el borde del video se funde encima. La caja del bento deja de pintar su propio
   fondo -- si lo pintara, volveria el escalon. */
.hm-vitrina--b6,
#hm-vitrina:has(.hm-vitrina--b6) {
  /* el video cubre la caja entera y su pie ya aterriza en marino (::after de
     arriba), asi que la seccion es marino liso: mismo color = misma capa. */
  background: var(--hm-marino);
}
.hm-vitrina--b6 { border-radius: 0; }
.hm-b6--video { background: transparent; }
.hm-b6--video .hm-b6__media::after {
  /* VUELVE con el master Seedance (29-ago): su pie muere en un gris-marino
     desaturado (#161A27 medido) que NO es el marino AHNSA, y Mario lo vio a la
     primera: la franja de las tarjetas se leia como OTRA capa. El fundido ya no
     va al borde medido sino al MARINO del sistema: el ultimo tercio del video
     aterriza en --hm-marino y el bloque entero vuelve a ser una sola superficie,
     como el degradado unico de hims. */
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 34%;
  background: linear-gradient(to bottom, transparent 0%,
              color-mix(in srgb, var(--hm-marino) 55%, transparent) 52%,
              var(--hm-marino) 100%);
  pointer-events: none; z-index: 1;
}
.hm-b6--video { background: var(--hm-b6-borde, #0D0F22); }
.hm-b6--video .hm-b6__copy { z-index: 3; }
/* y el carrusel sube: entre el boton y las tarjetas habia un hueco muerto */
.hm-vitrina--b6 .hm-bento__grid { padding-top: 0; }
.hm-vitrina--b6 .hm-sidekick__titulo { margin-top: 0; }
/* ── Las tarjetas DENTRO de la banda ──────────────────────────────────────
   Mario lo pidio cuatro veces y tenia razon: con el carrusel debajo quedaban
   260 px de nada entre el boton y las tarjetas, y la seccion se leia como dos
   bloques pegados aunque el fondo ya fuera continuo. Ahora el carrusel va
   posicionado sobre la mitad inferior del video --que es marino liso, sin
   pieza-- y todo cae dentro de la misma caja, con las medidas de hims. */
.hm-b6--video .hm-sidekick {
  position: absolute; left: 0; right: 0; bottom: clamp(1rem, 2.5vw, 2rem); z-index: 3;
  padding: 0 clamp(1rem, 3vw, 2.75rem);
}
.hm-b6--video .hm-sidekick__titulo { margin: 0 0 .9rem; }
.hm-b6--video .hm-tarj { width: min(64vw, 17.5rem); border-radius: 1.25rem; }
.hm-b6--video .hm-tarj__pie { padding: 0 1.15rem 1.15rem; }
.hm-b6--video .hm-tarj__n { font-size: 1.15rem; }
.hm-b6--video .hm-tarj__sello { width: 3.4rem; right: .7rem; top: .7rem; }
/* el copy ARRIBA, como el h2 de hims (5.8-9.9 % medido en su bloque; Mario,
   29-ago 08:51). En el master Seedance el 8 % superior es marino/negro limpio
   — las herramientas empiezan mas abajo — asi que el titular no pisa nada.
   El 10 % libra el header fijo + la barra promo en el peor de los casos. */
/* Mario 09:36: el titular EMPALMABA las herramientas — el bloque copy median
   240 px y bajaba del 10 al 18 %, donde ya vive la broca. Se parte como hims:
   h2 arriba (4.5 %) y el BOTON se va solo a la franja limpia (~68 %), igual
   que su CTA al 67.7 %. El velo radial pasa del copy al h2. */
.hm-b6--video .hm-b6__copy { top: 4.5%; bottom: 32%; }
.hm-b6--video .hm-b6__copy .hm-btn {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
}
@media (max-width: 739px) {
  .hm-b6--video .hm-sidekick { bottom: .75rem; }
  .hm-b6--video .hm-b6__copy { top: 6%; bottom: 34%; }
}

/* Velo detras del copy: el video no siempre tiene marino liso ahi -- segun el
   cuadro, una pieza le pasa por detras al titular. Un degradado radial suave
   detras del texto lo hace legible pase lo que pase, sin tapar el arte. */
.hm-b6--video .hm-b6__h2 { position: relative; }
.hm-b6--video .hm-b6__h2::before {
  content: ''; position: absolute; inset: -18% -12% -22%;
  background: radial-gradient(62% 58% at 50% 50%,
              rgba(6, 8, 20, .62) 0%, rgba(6, 8, 20, .38) 48%, transparent 80%);
  z-index: -1; pointer-events: none;
}
/* (la regla del top vive arriba, junto al fundido: 10 % como el h2 de hims;
   aqui vivia un 63 % historico que la pisaba — 29-ago) */

/* Los 4 chips de operacion, dentro del bloque y sobre el arte. Van encima del
   copy y debajo de las tarjetas: el arte 3:4 tiene marino limpio justo ahi. */
.hm-b6--video .hm-ops {
  position: absolute; left: 0; right: 0; bottom: 33%; z-index: 3;
  margin: 0; padding: 0 clamp(1rem, 3vw, 2.75rem);
}
@media (max-width: 739px) { .hm-b6--video .hm-ops { bottom: 38%; } }

/* ── Paginas de operacion (/operaciones/<op>) ─────────────────────────────── */
.hm-op-pag__cab { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; text-align: center; }
.hm-op-pag__cta { margin-top: 1.5rem; }
.hm-tabla-wrap { overflow-x: auto; padding: 0 1.25rem; }
.hm-tabla {
  width: 100%; max-width: 62rem; margin: 0 auto; border-collapse: collapse;
  font-size: var(--hm-fs-cuerpo); font-variant-numeric: tabular-nums;
}
.hm-tabla caption { caption-side: bottom; padding-top: 1rem; color: var(--hm-tinta-3); font-size: var(--hm-fs-caption); text-align: left; }
.hm-tabla th, .hm-tabla td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--hm-borde); }
.hm-tabla thead th { font-weight: 600; white-space: nowrap; }
.hm-tabla tbody th { font-weight: 500; }

/* ── La pantalla de carga (hims: su «h» con el aro de puntos) ─────────────
   Logo AHNSA + 24 puntos que se encienden en cadena (encendido rapido, apagado
   lento, como el chase de su loader). La enciende window.ahnsaCargando(true)
   SOLO donde hay espera real; jamas en el primer pintado de una pagina
   estatica, que eso es regalar LCP. */
.hm-cargando {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: var(--hm-blanco); opacity: 1; transition: opacity 300ms linear;
}
.hm-cargando.is-fuera { opacity: 0; pointer-events: none; }
.hm-cargando__aro { position: relative; width: 8.5rem; aspect-ratio: 1; display: grid; place-items: center; }
.hm-cargando__aro svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-cargando__aro circle { fill: var(--hm-azul); opacity: .14; animation: hm-punto 1.1s linear infinite; }
.hm-cargando__logo { width: 3.6rem; height: auto; }
@keyframes hm-punto {
  0% { opacity: .14; }
  10% { opacity: 1; }
  45% { opacity: .14; }
  100% { opacity: .14; }
}
@media (prefers-reduced-motion: reduce) { .hm-cargando__aro circle { animation: none; opacity: .5; } }

/* ── El muro de videos (Mario, 29-ago): tiles 16:9 con los loops oficiales ──
   El patron multi-video de hims: autoplay-loop-muted en rejilla, poster hasta
   entrar al viewport (fondos() los enciende y los pausa al salir). */
.hm-muro {
  display: grid; gap: 1rem; margin: 1.5rem auto 0; max-width: 108rem;
  padding-inline: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}
.hm-muro__tile {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--hm-r-card-m); background: var(--hm-marino);
  color: var(--hm-blanco); text-decoration: none;
  transition: transform 200ms ease-in-out;
}
@media (hover: hover) { .hm-muro__tile:hover { transform: scale(1.02); } }
.hm-muro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-muro__tile::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 10, 30, 0) 55%, rgba(2, 10, 30, .55) 100%);
}
.hm-muro__pie {
  position: absolute; left: 1rem; right: 1rem; bottom: .875rem; z-index: 2;
  display: flex; align-items: center; gap: .625rem;
}
.hm-muro__logo { height: 1.375rem; width: auto; flex: 0 0 auto; }
.hm-muro__quien { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.hm-muro__quien b { font-weight: 600; font-size: var(--hm-fs-14-16); }
.hm-muro__quien small { font-size: var(--hm-fs-caption); color: var(--hm-blanco-9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-muro__fuente { max-width: 108rem; margin: 1rem auto 0; padding-inline: 1rem; font-size: var(--hm-fs-caption); color: var(--hm-tinta-3); }

/* ── Ficha de marca al nivel del inicio (29-ago) ─────────────────────────── */
.hm-mk__hero--arte { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) {
  .hm-mk__hero--arte { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.hm-mk__arte {
  display: block; border-radius: var(--hm-r-card); overflow: hidden;
  background: var(--hm-tarj-bg, var(--hm-marino)); aspect-ratio: 1; max-width: 30rem;
  justify-self: center; width: 100%;
}
.hm-mk__arte img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); }
/* el track de familias en la ficha: mismas tarjetas del B6, fondo claro */
.hm-track--mk { padding-block: 1.25rem; }
.hm-tarj--num { aspect-ratio: 1; justify-content: flex-end; width: min(64vw, 17.5rem); }
.hm-tarj--num .hm-tarj__cifra {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 600; font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .22); letter-spacing: -.02em;
}
.hm-mk__quienes { display: grid; gap: 1rem; max-width: 108rem; margin: 0 auto; padding-inline: 1rem; }
@media (min-width: 900px) { .hm-mk__quienes { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; } }
.hm-mk__datos {
  align-self: start; border-radius: var(--hm-r-card-m); padding: 1.5rem;
  background: var(--hm-marino); color: var(--hm-blanco);
}
.hm-mk__datos dl { margin: 0; display: grid; gap: 1rem; }
.hm-mk__datos dt { font-size: var(--hm-fs-caption); color: var(--hm-blanco-51); text-transform: uppercase; letter-spacing: .06em; }
.hm-mk__datos dd { margin: .25rem 0 0; font-size: var(--hm-fs-14-16); line-height: 1.35; }
.hm-mk__series dd { display: flex; flex-wrap: wrap; gap: .375rem; }
.hm-mk__serie {
  display: inline-block; padding: .3125rem .75rem; border-radius: var(--hm-r-pill);
  background: rgba(255, 255, 255, .11); font-size: var(--hm-fs-caption); font-weight: 500;
}
/* el cierre como la tarjeta de agregado de resenas: gradiente, no gris */
.hm-mk__cierre {
  background: linear-gradient(160deg, var(--hm-azul) 0%, var(--hm-marino-2) 100%);
  color: var(--hm-blanco); border-radius: var(--hm-r-card);
}
.hm-mk__cierre p { color: var(--hm-blanco-9); }

/* ── Ficha de marca v2 (29-ago): anatomia de CATEGORIA de hims, dossier §9 ──
   Mario: «esta super feo [...] ¿enserio no pudiste encontrar un layout perfecto
   para cada marca?». La respuesta esta medida en sexual-health/hair-loss: cada
   seccion es un "fangs" — cabecera con kicker + h2 grande (formula 25+15·escala,
   que ya es .hm-h2) y la ACCION a la derecha en >=900px; en movil el boton se
   duplica DEBAJO del contenido (el dupe hidden-for-desktop/hidden-for-mobile
   de su header_component). Solo clases .hm-mk__* nuevas; nada de la home. */

/* heroe §9.2: display-s con balance; el tamaño lo da .hm-d-l en el HTML */
.hm-mk__h1 { text-wrap: balance; }

/* cifras como fila de stats limpia: hairlines, no cajitas blancas */
.hm-mk__cifras--fila { display: flex; flex-wrap: wrap; gap: .5rem 0; }
.hm-mk__cifras--fila .hm-mk__cifra { background: none; border-radius: 0; padding: .125rem 1.5rem .125rem 0; }
.hm-mk__cifras--fila .hm-mk__cifra + .hm-mk__cifra { border-left: 1px solid var(--hm-borde); padding-left: 1.5rem; }

/* cabecera "fangs": headings a la izquierda, actions a la derecha >=900px */
.hm-mk__cab { display: grid; gap: .75rem 2rem; }
.hm-mk__cab-txt > .hm-mk__nota { margin-top: .625rem; }
.hm-mk__cab-act { display: none; }
@media (min-width: 900px) {
  .hm-mk__cab { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .hm-mk__cab-act { display: block; padding-bottom: .25rem; }
}
/* la copia movil del boton, despues del contenido, a lo ancho (hims la fuerza
   full-width en xsmall: _force-full-width) */
.hm-mk__accion-mov { max-width: 108rem; margin: .75rem auto 0; padding-inline: 1rem; }
.hm-mk__accion-mov .hm-mk__accion { width: 100%; }
@media (min-width: 900px) { .hm-mk__accion-mov { display: none; } }
/* el FAQ comparte el borde izquierdo de su lista (52rem), como #hm-faq */
.hm-mk__cab--faq, .hm-mk__accion-mov--faq { max-width: 52rem; }

/* §9.1: en los interiores las filas de tarjetas SI llevan scroll-snap en
   movil (scroll-snap-styles-xsmall) — a diferencia de la home. El 2rem del
   scroll-padding es el padding-inline que .hm-track resuelve en pantallas
   angostas. */
@media (max-width: 899.98px) {
  .hm-mk__track { scroll-snap-type: x mandatory; scroll-padding-inline: 2rem; }
  .hm-mk__track > * { scroll-snap-align: start; }
}

/* el video oficial dentro de la seccion, a la columna interior (1132px) en
   vez de a sangre: 16:9 a todo lo ancho de la pagina era una pared */
.hm-mk__video { max-width: var(--hm-col); margin: 0 auto; }
.hm-mk__pie { max-width: var(--hm-col); margin-inline: auto; }

/* ficha tecnica como rejilla de `card` de hims (§9.1): radius-md = 16px,
   padding U024/U018 = 24/18px, align-self stretch y SIN hover */
.hm-mk__tec {
  max-width: 108rem; margin: 0 auto; padding-inline: 1rem;
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.hm-mk__tec-card {
  align-self: stretch; display: flex; flex-direction: column; height: 100%;
  border-radius: 1rem; padding: 1.5rem 1.125rem;
  background: var(--hm-lavado-2); border: 1px solid var(--hm-hairline);
}
.hm-mk__tec-card > .hm-caption { margin: 0 0 .875rem; color: var(--hm-tinta-2); text-transform: uppercase; letter-spacing: .06em; }
.hm-mk__tec-card .hm-mk__grados { margin: 0; }
.hm-mk__tec-card--nota { background: var(--hm-marino); color: var(--hm-blanco); border-color: transparent; }
.hm-mk__tec-card--nota > .hm-caption { color: var(--hm-blanco-51); }
.hm-mk__tec-card--nota .hm-mk__nota { margin: 0; color: var(--hm-blanco-9); }
.hm-mk__tec-card--nota .hm-mk__nota b { color: var(--hm-blanco); }

/* sin JS no hay quien ponga .is-in: en la ficha de marca todo visible */
@media (scripting: none) { .hm-mk .hm-reveal { opacity: 1; transform: none; } }

/* ── El muro VERTICAL de marcas (Mario 10:04): copy izquierda, 2 columnas de
   logos grandes desfilando en vertical; una sube, la otra baja; pausa al
   hover; quieto con reduced-motion. Cada tile lleva cifra real y ficha. */
.hm-mv { display: grid; gap: 1.5rem; max-width: 108rem; margin: 0 auto; padding-inline: 1rem; }
@media (min-width: 900px) { .hm-mv { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 3rem; } }
.hm-mv__copy .hm-claro__cta { margin-top: 1.25rem; }
.hm-mv__muro {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  height: min(38rem, 72vh); overflow: hidden; position: relative;
  /* desvanecidos arriba y abajo, como el borde suave de un carrusel.
     Mario 15:29: la entrada/salida mas suave -> la zona de fundido crece
     de 8 a 14 % por lado. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.hm-mv__col { overflow: hidden; }
.hm-mv__rollo { display: flex; flex-direction: column; gap: 1rem; }
/* 36 -> 28 -> 17 -> 10 s: Mario lo pidio mas rapido TRES veces (15:29, 31-ago y 6-sep 22:19).
   Los 10 s son el suelo razonable y conviene que quede escrito por que: cada columna lleva 6 logos
   duplicados (12 fichas) y el rollo recorre el 50 % en un ciclo, o sea ~1.7 s por logo a 10 s. Por
   debajo de ~8 s los logotipos dejan de ser RECONOCIBLES, y este muro existe justo para que alguien
   reconozca su marca: acelerarlo mas lo convierte en textura. Si aun asi se quiere mas rapido, lo
   que hay que cambiar no es el tiempo sino el numero de fichas por columna. */
.hm-mv__col--1 .hm-mv__rollo { animation: hm-mv-sube 10s linear infinite; }
.hm-mv__col--2 .hm-mv__rollo { animation: hm-mv-baja 10s linear infinite; }
.hm-mv__muro:hover .hm-mv__rollo { animation-play-state: paused; }
@keyframes hm-mv-sube { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes hm-mv-baja { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hm-mv__rollo { animation: none !important; } }
.hm-mv__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  min-height: 9.5rem; padding: 1.5rem; border-radius: var(--hm-r-card-m);
  background: var(--hm-blanco); border: 1px solid var(--hm-borde);
  text-decoration: none; color: var(--hm-tinta-3);
  transition: border-color 300ms linear, background-color 300ms linear;
}
.hm-mv__tile:hover { border-color: var(--hm-tinta-4); background: var(--hm-hover-claro); }
.hm-mv__tile img { max-width: 76%; max-height: 4.5rem; width: auto; height: auto; object-fit: contain; }

/* ── /productos al lenguaje de hims (29-ago): hub y 19 familias — dossier §9 ──
   Mario: «la pagina esta fea; aplicar la teoria y formato de hims». Solo el
   CROMO: heroe, cabeceras fangs, tarjetas de familia y chips de subfamilia.
   La tarjeta de producto (card_html <-> card) NI SE TOCA — es el espejo de
   verifica_prod_cards. Los ganchos del JS del hub se conservan tal cual:
   .prod-marca-aviso, .sumi-tile[data-fam] > a, .sumi-tile-t, .sumi-tile-n,
   .prod-tiles y su previousElementSibling .prod-franja (por eso la cabecera
   fangs de franja LLEVA la clase prod-franja: asi ?marca=X la esconde entera).
   Radios del shop DS (§9.1): 10 / 16 / 24 px. Cero hex nuevo: el fondo medido
   de cada foto llega inline en --hm-tarj-bg desde tarjetas.json. */

/* — heroe del hub: display-s con balance (§9.2) + fila de cifras reales — */
.ahprodhub.hm-cat .sumi-cab { padding: 1.5rem 0 .75rem; }
.hm-cat__h1 { margin: .5rem 0 .875rem; max-width: 22ch; color: var(--hm-tinta); text-wrap: balance; }
.hm-cat__h1 span { color: var(--hm-azul); font-variant-numeric: tabular-nums; }
.hm-cat__lead { margin: 0 0 1.25rem; max-width: 62ch; font-size: var(--hm-fs-cuerpo-l); line-height: 1.35; letter-spacing: var(--hm-ls-cuerpo); color: var(--hm-tinta-2); text-wrap: pretty; }
.hm-cat .hm-mk__cifras--fila { margin: 0 0 1.25rem; }
.hm-cat .hm-mk__ctas { margin: 0 0 .5rem; }

/* — cabecera fangs de franja (§9.1: headings izquierda, actions derecha).
   El CSS viejo de .prod-franja (13px, uppercase) se neutraliza porque ahora la
   clase vive en el DIV de la cabecera, no en un h2 suelto. — */
.ahprodhub.hm-cat .prod-franja {
  margin: 2.75rem auto .875rem; padding-inline: 0; max-width: none;
  font-size: inherit; font-weight: inherit; letter-spacing: normal;
  text-transform: none; color: inherit;
}
.ahprodhub.hm-cat .prod-franja:first-of-type { margin-top: 1.25rem; }

/* — rejilla de familias: tarjetas ricas; en movil fila con scroll-snap (§4.4:
   el snap es de las paginas interiores; la home no lo lleva) — */
.ahprodhub.hm-cat .sumi-tiles.hm-cat__fams {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: .75rem; margin: 0 0 .5rem;
}
.hm-cat__fam { display: flex; }
/* la cascada la enciende el UL (data-hm-reveal -> .is-in), como el track de
   hims §1.1; el escalon de 100 ms x indice ya viene en --hm-i de cada li */
.ahprodhub.hm-cat .hm-cat__fams.is-in .hm-cat__fam { opacity: 1; transform: none; }
.ahprodhub.hm-cat .prod-tiles .sumi-tile a {
  flex: 1 1 auto; gap: 0; padding: 0; border: 0; border-radius: var(--hm-r-card);
  overflow: hidden; background: var(--hm-lavado-2); color: var(--hm-tinta);
  min-height: 0; transition: background-color 150ms ease-out;
}
.ahprodhub.hm-cat .prod-tiles .sumi-tile a:hover { border-color: transparent; box-shadow: none; }
@media (hover: hover) { .ahprodhub.hm-cat .hm-cat__fam--render a:hover { background: var(--hm-lavado); } }
.hm-cat__fam-vis { position: relative; display: block; width: 100%; aspect-ratio: 1; background: var(--hm-tarj-bg, var(--hm-lavado-2)); }
.hm-cat__fam-vis img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  margin: 0; transition: opacity 300ms ease-in-out;   /* la que SALE, 300 ms */
}
.hm-cat__fam-hover { opacity: 0; transition: opacity 150ms ease-in-out; }  /* la que ENTRA, 150 ms (§2.2) */
@media (hover: hover) {
  .hm-cat__fam--foto a:hover .hm-cat__fam-hover { opacity: 1; }
  .hm-cat__fam--foto a:hover .hm-cat__fam-vis img:not(.hm-cat__fam-hover) { opacity: 0; }
}
/* el render 3D sobre blanco se compone a la caja con contain (hims medido:
   tarjetas 1:1 con contain) y multiply deja pasar el lavado bajo el blanco */
.hm-cat__fam--render .hm-cat__fam-vis img { object-fit: contain; padding: 1.75rem; mix-blend-mode: multiply; }
/* velo de legibilidad solo en la variante de foto (pie sobre el fondo medido) */
.hm-cat__fam--foto .hm-cat__fam-vis::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(2,10,30,0) 62%, rgba(2,10,30,.30) 100%);
}
/* misma especificidad (0,4,1) que la regla base del <a> de arriba: gana por
   orden. Con menos clases, el lavado-2 de la base pisaba el fondo MEDIDO y el
   pie quedaba blanco-51 sobre blanco (medido en el primer screenshot). */
.ahprodhub.hm-cat .prod-tiles .hm-cat__fam--foto a { background: var(--hm-tarj-bg, var(--hm-marino)); color: var(--hm-blanco); }
.hm-cat__fam-pie { display: flex; flex: 1 1 auto; flex-direction: column; gap: .375rem; padding: 1rem 1.25rem 1.25rem; position: relative; }
.ahprodhub.hm-cat .sumi-tile-t { font-size: var(--hm-fs-h-m); font-weight: var(--hm-peso-h-m); line-height: 1.15; }
.ahprodhub.hm-cat .sumi-tile-n { font-size: var(--hm-fs-caption); font-weight: var(--hm-peso-label); color: var(--hm-azul); font-variant-numeric: tabular-nums; }
.ahprodhub.hm-cat .hm-cat__fam--foto .sumi-tile-n { color: var(--hm-celeste); }
.ahprodhub.hm-cat .sumi-tile-c {
  font-size: var(--hm-fs-caption); line-height: 1.31; letter-spacing: var(--hm-ls-caption);
  color: var(--hm-tinta-3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ahprodhub.hm-cat .hm-cat__fam--foto .sumi-tile-c { color: var(--hm-blanco-51); }
@media (max-width: 739.98px) {
  .ahprodhub.hm-cat .sumi-tiles.hm-cat__fams {
    display: flex; gap: .625rem; margin-inline: -1rem; padding-inline: 1rem;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .ahprodhub.hm-cat .sumi-tiles.hm-cat__fams::-webkit-scrollbar { display: none; }
  .ahprodhub.hm-cat .hm-cat__fam { flex: 0 0 74vw; max-width: 19rem; scroll-snap-align: start; }
}

/* — la nota de cierre del hub (disponibilidad) como tarjeta marino, no como
   parrafo suelto pegado al canto — */
.hm-cat__nota {
  margin: 2.25rem 0 1rem; padding: 1.5rem 1.375rem; border-radius: var(--hm-r-card-m);
  background: var(--hm-marino); color: var(--hm-blanco-9);
  font-size: var(--hm-fs-cuerpo); line-height: 1.5; letter-spacing: var(--hm-ls-cuerpo);
}
.hm-cat__nota b { color: var(--hm-blanco); font-variant-numeric: tabular-nums; }

/* — pagina de familia: heroe compacto — */
.ahprodnav.hm-cat .sumi-cab { padding: 1.5rem 0 .25rem; }
.ahprodnav.hm-cat .sumi-titulo {
  margin: .5rem 0 .625rem; gap: .5rem 1rem;
  font-size: var(--hm-fs-d-l); font-weight: var(--hm-peso-display);
  letter-spacing: var(--hm-ls-display); line-height: 1.02; color: var(--hm-tinta);
}
.ahprodnav.hm-cat .sumi-titulo .sumi-n {
  padding: .3125rem .875rem; border: 0; border-radius: var(--hm-r-pill);
  background: var(--hm-lavado); color: var(--hm-azul);
  font-size: var(--hm-fs-caption); font-weight: var(--hm-peso-label);
  font-variant-numeric: tabular-nums;
}
.ahprodnav.hm-cat .prod-desc {
  margin: 0 0 1rem; max-width: 70ch;
  font-size: var(--hm-fs-cuerpo); line-height: 1.4; color: var(--hm-tinta-2);
}

/* — chips de subfamilia: el selector del wizard de hims (§9.4): blanco, borde
   .19, radio 10 (--radius-sm), hover fill .06 a 150 ms ease-out; fila con
   scroll-snap SOLO en movil (§9.1) — */
.hm-cat__subs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; }
.hm-cat__sub {
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .5625rem .875rem; border: 1px solid var(--hm-borde); border-radius: .625rem;
  background: var(--hm-blanco); color: var(--hm-tinta); text-decoration: none;
  font-size: var(--hm-fs-cuerpo); font-weight: var(--hm-peso-label); line-height: 1.2;
  white-space: nowrap; transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.hm-cat__sub small { font-size: var(--hm-fs-caption); font-weight: var(--hm-peso-cuerpo); color: var(--hm-tinta-3); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .hm-cat__sub:hover { background: var(--hm-hover-claro); border-color: transparent; } }
.hm-cat__sub:focus-visible { outline: 2px solid var(--hm-azul); outline-offset: 2px; }
@media (max-width: 739.98px) {
  .hm-cat__subs {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    margin-inline: -1rem; padding-inline: 1rem; padding-bottom: .25rem;
    scroll-snap-type: x mandatory; scroll-padding-inline: 1rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .hm-cat__subs::-webkit-scrollbar { display: none; }
  .hm-cat__sub { flex: 0 0 auto; scroll-snap-align: start; }
}

/* — cabecera fangs del listado (kicker + h2 + accion; dupe movil abajo) — */
.hm-cat .hm-cat__cab-listado { margin: 1.5rem auto .875rem; padding-inline: 0; max-width: none; }
.hm-cat__cab-listado .hm-caption { font-variant-numeric: tabular-nums; }
.hm-cat .hm-cat__accion-mov { margin: .875rem auto 0; padding-inline: 0; max-width: none; }

/* — otras familias: pastillas quietas en vez de cajitas con sombra — */
.ahprodnav.hm-cat .prod-otras a { border-radius: .625rem; transition: background-color 150ms ease-out, border-color 150ms ease-out; }
.ahprodnav.hm-cat .prod-otras a:hover { background: var(--hm-hover-claro); border-color: transparent; }

/* sin JS nadie pone .is-in: el catalogo no puede quedarse invisible */
@media (scripting: none) { .hm-cat .hm-reveal { opacity: 1; transform: none; } }


/* ==========================================================================
   POPUP «Encuentra tu herramienta» (.hm-modal*) + pagina /parametros (.hm-par*)
   ==========================================================================
   Mario 29-ago 12:12: overlay estilo hims que calcula seleccion + parametros
   y aterriza en /parametros/<op>/<material> (paginas de tools/gen_parametros.py).
   Mecanica MEDIDA de hims (DOSSIER_HIMS_PARITY §1.3, el quiz modal del ATF):
     - velo: opacity 200 ms LINEAL (su token de carga de imagenes);
     - panel: entrada con desplazamiento + blur, como .hm-asesor__paso;
     - opciones: entran escalonadas desde la derecha con blur — 670 ms
       cubic-bezier(.71,0,.18,1), escalon 90 ms x indice + 120 ms inicial,
       desde translateX(3rem) + blur(6px), la opacidad se queda en 0 hasta el
       15 % (verbatim de su @keyframes dTTRnx).
   Lo pintan js/ahnsa-popup.js (overlay) y js/ahnsa-parametros.js (pagina).
   CERO teclado: pastillas .hm-par-chip y steppers .hm-par-step, nada que
   escribir. Colores solo de la paleta de arriba.
   ------------------------------------------------------------------------ */
html.hm-modal-abierto { overflow: hidden; }
html.hm-modal-abierto body { overflow: hidden; }

.hm-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 1rem; }
.hm-modal__velo {
  position: absolute; inset: 0; background: rgba(0,0,0,.48);
  opacity: 0; transition: opacity 200ms linear;
}
.hm-modal.is-abierto .hm-modal__velo { opacity: 1; }
.hm-modal__panel {
  position: relative; z-index: 1; width: min(33rem, 100%);
  max-height: min(92dvh, 46rem); overflow: auto; overscroll-behavior: contain;
  background: var(--hm-blanco); border-radius: var(--hm-r-card);
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(1.25rem); filter: blur(6px);
  transition: opacity 300ms var(--hm-ease-acc), transform 300ms var(--hm-ease-acc),
              filter 300ms var(--hm-ease-acc);
}
.hm-modal.is-abierto .hm-modal__panel { opacity: 1; transform: none; filter: none; }
.hm-modal__x {
  position: absolute; top: .875rem; right: .875rem; z-index: 2;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--hm-tinta-3); cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.hm-modal__x:hover { background: var(--hm-hover-claro); color: var(--hm-tinta); }
.hm-modal__x svg { width: 1.25rem; height: 1.25rem; }
.hm-modal__cuerpo { padding: 1.75rem 1.5rem 1.5rem; }
@media (min-width: 740px) { .hm-modal__cuerpo { padding: 2.25rem 2rem 1.75rem; } }

.hm-modal__cab { display: grid; gap: .75rem; margin-bottom: 1.25rem; }
.hm-modal__titulo { font-size: var(--hm-fs-d-m); font-weight: var(--hm-peso-d-m); color: var(--hm-tinta); text-wrap: balance; }
.hm-modal__sub { font-size: var(--hm-fs-cuerpo); color: var(--hm-tinta-3); text-wrap: pretty; }
/* el progreso vive sobre panel BLANCO: el mismo repintado que .hm-wc */
.hm-modal .hm-progreso span { color: var(--hm-tinta-4); background: var(--hm-lavado-2); }
.hm-modal .hm-progreso .is-activo { color: var(--hm-blanco); background: var(--hm-azul); }

.hm-modal__ops { display: grid; gap: .625rem; }
.hm-modal__op {
  --hm-i: 0;
  display: grid; gap: .125rem; width: 100%; padding: .875rem 1.125rem; text-align: left;
  border: 1px solid var(--hm-hairline); border-radius: var(--hm-r-input);
  background: var(--hm-blanco); font: inherit; color: var(--hm-tinta); cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
  opacity: 0;
  animation: hm-modal-op 670ms cubic-bezier(.71,0,.18,1) both;
  animation-delay: calc(120ms + 90ms * var(--hm-i));
}
.hm-modal__op:hover { background: var(--hm-lavado-2); border-color: var(--hm-azul); }
.hm-modal__op b { font-weight: 600; }
.hm-modal__op small { font-size: var(--hm-fs-caption); color: var(--hm-tinta-4); }
.hm-modal__op.is-sin-datos { cursor: default; opacity: 1; animation: none; color: var(--hm-tinta-4); background: var(--hm-lavado-2); border-style: dashed; }
@keyframes hm-modal-op {
  0%   { transform: translateX(3rem); filter: blur(6px); opacity: 0; }
  15%  { opacity: 0; }
  100% { transform: translateX(0); filter: blur(0); opacity: 1; }
}

.hm-modal__form { display: grid; gap: 1rem; }
.hm-modal__acciones { margin-top: 1.25rem; }
.hm-modal__cta { width: 100%; justify-content: center; }
.hm-modal__res { display: grid; gap: 1rem; }
.hm-modal__herr { display: grid; gap: .25rem; padding: .875rem 1.125rem; border-radius: var(--hm-r-input); background: var(--hm-lavado); color: var(--hm-tinta); }
.hm-modal__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--hm-hairline);
}
.hm-modal__atras { border: 0; background: none; font: inherit; font-size: var(--hm-fs-caption); color: var(--hm-tinta-3); cursor: pointer; padding: .25rem 0; }
.hm-modal__atras:hover { color: var(--hm-tinta); }
.hm-modal__asesor { font-size: var(--hm-fs-caption); color: var(--hm-azul); text-decoration: none; }
.hm-modal__asesor:hover { text-decoration: underline; }

/* — controles compartidos: pastillas y steppers (cero teclado) — */
.hm-par-ctrl { display: grid; gap: .375rem; }
.hm-par-ctrl__et { font-size: var(--hm-fs-caption); font-weight: var(--hm-peso-label); letter-spacing: var(--hm-ls-caption); color: var(--hm-tinta-4); }
.hm-par-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.hm-par-chip {
  padding: .5rem .875rem; border: 1px solid var(--hm-hairline); border-radius: var(--hm-r-pill);
  background: var(--hm-blanco); font: inherit; font-size: var(--hm-fs-caption); font-weight: 500;
  color: var(--hm-tinta); cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.hm-par-chip:hover { background: var(--hm-lavado-2); border-color: var(--hm-azul); }
.hm-par-chip.is-activo { color: var(--hm-blanco); background: var(--hm-azul); border-color: var(--hm-azul); }
.hm-par-step { display: inline-flex; align-items: center; gap: .375rem; }
.hm-par-step__btn {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid var(--hm-hairline); border-radius: 50%; background: var(--hm-blanco);
  font: inherit; font-size: 1.25rem; line-height: 1; color: var(--hm-tinta); cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.hm-par-step__btn:hover { background: var(--hm-lavado-2); border-color: var(--hm-azul); }
.hm-par-step__v { min-width: 7rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--hm-tinta); }

/* — pagina /parametros/<op>/<material> — */
.hm-par-migas { font-size: var(--hm-fs-caption); color: var(--hm-tinta-4); margin-bottom: .75rem; }
.hm-par-migas a { color: inherit; text-decoration: none; }
.hm-par-migas a:hover { color: var(--hm-azul); }
.hm-par-caso {
  display: grid; gap: 1rem; padding: 1.5rem 1.25rem; border-radius: var(--hm-r-card-m);
  background: var(--hm-blanco); box-shadow: 0 2px 16px rgba(0,0,0,.05); position: relative;
}
.hm-par-caso::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--hm-hairline); border-radius: inherit; }
@media (min-width: 740px) { .hm-par-caso { padding: 2rem 2rem 2.25rem; border-radius: var(--hm-r-card); } }
.hm-par-caso__cab { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.hm-par-caso__cab h2 { color: var(--hm-tinta); }
.hm-par-caso__marca {
  padding: .25rem .75rem; border-radius: var(--hm-r-pill); background: var(--hm-azul);
  color: var(--hm-blanco); font-size: var(--hm-fs-caption); font-weight: 600;
}
.hm-par-caso__form { display: grid; gap: 1rem; }
@media (min-width: 740px) { .hm-par-caso__form { grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; } }
.hm-par-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0,1fr)); margin: 0; }
@media (min-width: 740px) { .hm-par-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.hm-par-grid__i { display: grid; gap: .125rem; padding: .75rem .875rem; border-radius: var(--hm-r-input); background: var(--hm-lavado-2); }
.hm-par-grid__i dt { font-size: var(--hm-fs-caption); color: var(--hm-tinta-4); }
.hm-par-grid__i dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hm-tinta); }
.hm-par-error { padding: .875rem 1.125rem; border-radius: var(--hm-r-input); border: 1px solid rgba(189,60,50,1); color: rgba(189,60,50,1); font-size: var(--hm-fs-cuerpo); }
.hm-par-avisos { max-width: 52rem; margin: 1.25rem auto 0; font-size: var(--hm-fs-caption); color: var(--hm-tinta-4); }
.hm-par-avisos ul, .hm-par-avisos__lista { margin: .5rem 0 0; padding-left: 1.25rem; display: grid; gap: .375rem; font-size: var(--hm-fs-caption); color: var(--hm-tinta-4); }
.hm-par-rangos { display: grid; gap: .75rem; margin: 0 0 1.5rem; }
@media (min-width: 740px) { .hm-par-rangos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.hm-par-rango { display: grid; gap: .125rem; padding: .875rem 1rem; border-radius: var(--hm-r-input); background: var(--hm-lavado-2); }
.hm-par-rango dt { font-size: var(--hm-fs-caption); color: var(--hm-tinta-4); }
.hm-par-rango dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hm-tinta); }
.hm-par-factores { display: grid; gap: .5rem; padding-left: 1.25rem; max-width: 52rem; color: var(--hm-tinta-2); }
.hm-par-prods { display: grid; gap: .75rem; }
@media (min-width: 740px) { .hm-par-prods { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.hm-par-prod {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border: 1px solid var(--hm-hairline); border-radius: var(--hm-r-input);
  background: var(--hm-blanco); color: var(--hm-tinta); text-decoration: none;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.hm-par-prod:hover { background: var(--hm-lavado-2); border-color: var(--hm-azul); }
.hm-par-prod b { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--hm-azul); }
.hm-par-otros { margin-top: 1.5rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--hm-fs-caption); color: var(--hm-tinta-4); }
.hm-par-otros .hm-pill { border: 1px solid var(--hm-hairline); color: var(--hm-tinta); text-decoration: none; padding: .375rem .875rem; }
.hm-par-otros .hm-pill:hover { border-color: var(--hm-azul); color: var(--hm-azul); }

@media (prefers-reduced-motion: reduce) {
  .hm-modal__velo, .hm-modal__panel { transition: none !important; }
  .hm-modal__panel { transform: none; filter: none; opacity: 1; }
  .hm-modal__op { animation: none; opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOVIL (29-ago)   —   Mario 14:45: «en mobile el video no se ve bien» y
   «mobile view tenemos que mejorarlo TODO igual que el de hims».

   Todo lo de aqui abajo es SOLO <=739 px: el escritorio no se mueve un pixel.
   Se sobreescribe al FINAL de la hoja a proposito, para no tocar las reglas
   base de .hm-b6, .hm-modal, .hm-sidekick ni .hm-tarj.

   MEDIDO en hims a 390x844 (su hero de weight-loss, que es el gemelo exacto
   de nuestro B6: video de fondo + h2 + CTA + carrusel de tarjetas):

     caja del video      375 x 857 px   (relacion 0.4375, o sea 2.29 de alto)
     h2                  32 px / 35.2 lh / peso 450, arranca al 4.2 % de la caja
     CTA                 44 px de alto, al 70.2 % de la caja
     titulo del carrusel 85.3 % de la caja
     tarjetas            260 x 316, radio 24, gap 12, pista con padding 20/32
     pista               overflow-x auto y **sin scroll-snap** (§4.2 del dossier:
                         la home de hims no lleva snap; las de categoria si)
     secciones           24 px de separacion, sin padding vertical propio

   NUESTRO ANTES, medido igual a 390x844:

     caja del B6         375 x 407 px   (relacion 0.9219) = 47 % de la de hims
     h2                  25.6 px, al 6 %
     .hm-sidekick        arrancaba al -4.7 % de la caja (o sea 19 px POR ENCIMA
                         del bloque) y medía 413.7 px dentro de una caja de 406.8
     empalme h2/tarjetas 87.5 px  = el 100 % del alto del h2
     empalme CTA/tarjetas 44 px   = el 100 % del alto del boton
     tarjeta             249.6 x 356.3 = el 58 % del AREA del bloque, encima

   O sea: las dos cosas que reporto Mario son la misma. El titular no se
   «cortaba contra una banda»: lo tapaba la primera tarjeta del carrusel, que
   estaba posicionada en absoluto sobre una caja que a 390 px ya no tenia alto
   para sostener cuatro capas. Y «el video casi no muestra las herramientas»
   porque una tarjeta opaca de 250x356 cubria el centro del arte.

   El arreglo es estructural y de CSS puro: a <=739 px el carrusel SALE del
   posicionamiento absoluto y baja al flujo, debajo del arte y sobre el mismo
   marino. El arte conserva su relacion (1440/1562) en su propia caja, asi que
   se sigue viendo el 96.4 % del ancho del master -- adoptar la relacion 0.4375
   de hims aqui seria un error: su arte es una mano centrada y aguanta el
   recorte, el nuestro es una fila de herramientas y con cover a 0.4375 se
   perderia el 54 % del ancho, que es justo lo contrario de lo que pidio.
   El alto total del bloque queda en ~830 px, contra los 857 de hims.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 739px) {

  /* ── B6: el carrusel deja de flotar sobre el arte ───────────────────────
     El bloque suelta el aspect-ratio y lo hereda el MEDIO, que es quien lleva
     la proporcion del master. Asi el bloque puede crecer con el carrusel
     dentro del flujo en vez de recortarlo contra el overflow:hidden. */
  .hm-b6--video { aspect-ratio: auto; background: var(--hm-marino); }
  .hm-b6--video .hm-b6__media { position: relative; aspect-ratio: 1440 / 1562; }

  /* El copy se calca sobre la caja del arte con el MISMO aspect-ratio, y
     reparte con space-between: h2 arriba (5 %) y CTA abajo (~71 %), que son
     las dos posiciones medidas en hims (4.2 % y 70.2 %). */
  .hm-b6--video .hm-b6__copy {
    top: 0; bottom: auto; left: 0; right: 0; width: auto; transform: none;
    aspect-ratio: 1440 / 1562;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    padding: 5% 1.25rem 18%;
  }
  .hm-b6--video .hm-b6__copy .hm-btn { position: static; transform: none; }
  /* 25.6 -> 32 px: el tamano exacto del h2 de hims en movil (32/35.2) */
  .hm-b6__h2 { margin: 0; font-size: 2rem; line-height: 1.1; }

  /* y el carrusel al flujo, debajo del arte. El ::after del medio ya funde el
     pie del video en --hm-marino, asi que no aparece costura. */
  .hm-b6--video .hm-sidekick {
    position: static; left: auto; right: auto; bottom: auto;
    padding: 1.25rem 0 1.5rem;
  }

  /* ── Piso tipografico ───────────────────────────────────────────────────
     11 px estaba por debajo del minimo de hims, que es 12 px (26 elementos en
     la home lo usaban). */
  :root { --hm-fs-micro: 12px; }

  /* ── Ritmo de seccion ───────────────────────────────────────────────────
     5rem (80 px) arriba y abajo es cadencia de escritorio; a 390 px comia
     media pantalla. hims separa sus secciones con 24 px en movil. */
  .hm-claro { padding: 2.5rem 0; }

  /* ── Objetivos tactiles a 44 px ─────────────────────────────────────────
     Solo los CONTROLES. Los enlaces de texto en linea se dejan como estan:
     hims tambien tiene 53 por debajo de 44 y son parrafos y pie de pagina. */
  .hm-ico { width: 2.75rem; height: 2.75rem; }              /* 42 -> 44 */
  .hm-modal__x { width: 2.75rem; height: 2.75rem; }         /* 36 -> 44 */
  .hm-pill { min-height: 2.75rem; }                         /* 34 -> 44 */
  .hm-hero__asesor { height: auto; min-height: 2.75rem; }   /* 36 -> 44 */
  .hm-par-chip, .hm-par-step__btn { min-height: 2.75rem; }  /* 35 y 40 -> 44 */
  /* La pildora de la barra promo mide 28 px dentro de una barra de 44. Crecer
     su padding NO sirve: medido, la pildora subia a 36 pero la BARRA se iba a
     52 px, y los 44 de la barra son un numero medido en hims que la regla base
     defiende por escrito. Asi que crece solo el AREA TACTIL, con un pseudo que
     no ocupa layout: 28 + 8 + 8 = 44 px de alto que se pueden tocar, con la
     barra intacta en 44. */
  .hm-promo .hm-promo-cta { position: relative; }
  .hm-promo .hm-promo-cta::after {
    content: ''; position: absolute; inset: -8px -6px;
  }
  /* la nube de etiquetas son 24 pildoras de 30 px en filas: subirlas solo
     hace la nube mas alta, no descuadra ninguna tarjeta */
  .hm-nube a { height: 2.75rem; }                           /* 30 -> 44 */

  /* NO se tocan y van al reporte, porque subirlos a 44 cambia la GEOMETRIA de
     la tarjeta que los contiene y eso ya no es un ajuste de movil:
       .hm-op-chip (28 px, 9 en la home)  -> viven en una fila flex dentro de
         la tarjeta de vidrio; a 44 la tarjeta crece y se rompe el bento.
       .hm-banda   (30 px, 7 en la home)  -> es la banda de disponibilidad
         dentro de la tarjeta de producto.
     Y NO se tocan .hm-glass__cta (17 px) ni .hm-res__ver (18 px) porque son
     enlaces de texto en linea: hims tiene 53 asi y son correctos. */
}

/* ══════════════════════════════════════════════════════════════════════════
   DESGLOSABLE DE PRODUCTOS v2 — patron §8.1 del DOSSIER_HIMS_PARITY (29-ago)
   ══════════════════════════════════════════════════════════════════════════
   Mario, 29-ago 15:10: «hay que arreglar el desglosable de productos». Lo que
   le dolia, medido en Chrome a 1440x900 sobre /productos:

     · las 19 familias salian en CUATRO COLUMNAS a la vez y la cuarta franja
       tiene NUEVE: el panel medía ~900 px de alto --la ventana entera-- con
       las columnas 1-3 vacias de la mitad para abajo;
     · con ese alto, el pie del panel («Ver las 19 familias») quedaba FUERA de
       la ventana: existia y no habia forma de alcanzarlo;
     · era todo texto: ni la foto de familia que ya vive en el hub
       (images/hims/tarjetas/<fam>-480.webp, las 19) ni el conteo, o sea que el
       menu no decia nada que el usuario no supiera ya;
     · y un panel de 900 px es un panel del que cuesta salir (la queja vieja
       del 27-ago) porque el raton casi nunca cruza su borde.

   El patron de hims (§8.1) es otro: categorias a la IZQUIERDA, contenido de la
   categoria activa a la DERECHA, superpuestos en la misma caja
   (`ContentWrapper` va `position:absolute`), y el alto de la caja SIGUE al
   contenido con rebote. Tiempos verbatim del dossier:

     salir / cambiar de categoria : transform,opacity 120ms linear
     entrar                       : 300ms, ease-out + linear, delay 100ms,
                                    translateY(-15px) -> 0
     alto de la caja              : height .3s cubic-bezier(.68,-.6,.32,1.6)

   El markup lo escribe `tools/cromo.py --mega` (fotos y CONTEOS reales desde
   data/productos/_indice.json, la misma fuente que pinta el hub) y el
   interruptor vive en tools/cromo_v3/mega_js.html §4b.

   Bloque NUEVO (.hm-mega2*) y no un parche sobre .hm-mega: las reglas viejas
   (.hm-mega-cols, .hm-mega-item) siguen ahi porque .hm-mega-foot y
   .hm-mega-movil las comparten, y porque volver atras es quitar `hm-mega2` de
   una clase.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 1. La caja: dos zonas, alto animado ─────────────────────────────────── */
.hm-mega2 .hm-mega-in { padding: 1.25rem 1.5rem 1rem; }
.hm-mega2-cuerpo {
  position: relative;
  /* `overflow:hidden` es OBLIGATORIO con este cubic-bezier: el .68,-.6 se pasa
     del alto final y sin recorte se ve el contenido de la categoria anterior
     asomando por abajo (es el `overflow:hidden` del .ipTkNc de hims). */
  overflow: hidden;
  height: var(--hm-mega2-h, auto);
  transition: height .3s cubic-bezier(.68, -.6, .32, 1.6);
}
/* la raya que separa las dos zonas: va en el CUERPO y no en la lista, porque
   la lista mide lo que miden sus 4 botones y la raya tiene que llegar abajo */
.hm-mega2-cuerpo::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--hm-mega2-cw) + .75rem); width: 1px; background: rgba(0,0,0,.06);
}

/* ── 2. Zona izquierda: las cuatro franjas del hub ───────────────────────── */
.hm-mega2 { --hm-mega2-cw: 17rem; }
.hm-mega2-cats { width: var(--hm-mega2-cw); display: grid; gap: .125rem; align-content: start; }
.hm-mega2-cat {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: .5rem; width: 100%; margin: 0; padding: .625rem .75rem;
  border: 0; background: transparent; border-radius: .75rem; cursor: pointer;
  text-align: left; color: var(--hm-tinta); font: inherit;
  transition: background-color 150ms linear;
}
.hm-mega2-cat__t { grid-column: 1; font-size: .9375rem; font-weight: 500; line-height: 1.3; }
.hm-mega2-cat__n {
  grid-column: 1; font-size: .75rem; line-height: 1.4; color: rgba(0,0,0,.54);
  font-variant-numeric: tabular-nums;
}
.hm-mega2-cat__ch {
  grid-column: 2; grid-row: 1 / 3; width: 1rem; height: 1rem; flex: 0 0 auto;
  color: rgba(0,0,0,.32); transition: transform 200ms ease-out, color 150ms linear;
}
.hm-mega2-cat:hover { background: rgba(0,0,0,.04); }
.hm-mega2-cat.is-activa { background: rgba(0,0,0,.06); }
.hm-mega2-cat.is-activa .hm-mega2-cat__t { color: var(--hm-azul); }
.hm-mega2-cat.is-activa .hm-mega2-cat__ch { color: var(--hm-azul); transform: translateX(2px); }
.hm-mega2-cat:focus-visible { outline: 2px solid var(--hm-azul); outline-offset: -2px; }

/* ── 3. Zona derecha: las familias de la categoria activa ────────────────── */
/* Los cuatro paneles se superponen: solo el activo recibe el puntero. Es lo
   que permite que el alto se anime (si estuvieran en flujo, el contenedor ya
   tendria el alto de los cuatro juntos). */
.hm-mega2-panel {
  position: absolute; top: 0; left: calc(var(--hm-mega2-cw) + 1.5rem); right: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .125rem .5rem; align-content: start;
  pointer-events: none; opacity: 0; transform: translateY(-15px);
  transition-property: transform, opacity;
  transition-duration: 120ms; transition-timing-function: linear; transition-delay: 0s;
}
.hm-mega2-panel.is-activa {
  pointer-events: auto; opacity: 1; transform: translateY(0);
  transition-duration: 300ms; transition-timing-function: ease-out, linear;
  transition-delay: 100ms;
}
.hm-mega2-fam {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: .75rem; padding: .5rem .625rem; border-radius: .75rem;
  color: var(--hm-tinta); text-decoration: none;
  transition: background-color 150ms linear;
}
.hm-mega2-fam:hover { background: rgba(0,0,0,.06); }
.hm-mega2-fam:focus-visible { outline: 2px solid var(--hm-azul); outline-offset: -2px; }
/* el fondo sale de images/hims/tarjetas/tarjetas.json, que MIDIO la mediana de
   la banda inferior de cada foto: sin el se ve el rectangulo de la foto */
.hm-mega2-fam__vis {
  width: 2.75rem; height: 2.75rem; border-radius: .625rem; overflow: hidden;
  background: var(--hm-mega2-bg, #15407B);
}
.hm-mega2-fam__vis img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-mega2-fam__tx { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; }
/* el conteo va PEGADO al titulo y no en una tercera columna a la derecha: con
   celdas de ~510 px el numero quedaba a 300 px del nombre al que se refiere y
   se leia como si fuera de otra fila (medido a 1440) */
.hm-mega2-fam__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .0625rem .5rem; min-width: 0; }
.hm-mega2-fam__h b { font-size: .9375rem; font-weight: 500; line-height: 1.3; }
/* Sin recorte de lineas: aqui llevaba un `-webkit-line-clamp:2` que NO hacia
   nada --el elemento es hijo de un flex y el navegador lo blockifica, asi que
   `display:-webkit-box` se computa `flow-root` y el clamp muere-- y medido con
   las 19 lineas de apoyo el maximo natural son DOS renglones (a 1280, 1440 y
   1600). CSS muerto que promete un recorte es peor que no tenerlo. */
.hm-mega2-fam__d { font-size: .8125rem; line-height: 1.35; color: rgba(0,0,0,.54); }
.hm-mega2-fam__n {
  font-size: .75rem; line-height: 1.3; color: rgba(0,0,0,.54); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hm-mega2 .hm-mega-foot { margin-top: 1.25rem; }

/* ── 4. Anchos ───────────────────────────────────────────────────────────── */
/* Por debajo de 1280 la linea de apoyo no cabe sin partir la fila en tres
   renglones: se queda el titulo y el conteo, que es lo que decide el clic. */
@media (max-width: 1279px) { .hm-mega2-fam__d { display: none; } }
@media (min-width: 1280px) { .hm-mega2 { --hm-mega2-cw: 20rem; } }
@media (min-width: 1600px) { .hm-mega2 { --hm-mega2-cw: 22rem; } }

/* ── 5. Cajon movil (<1024): las mismas 19, en acordeon y a 44 px ─────────
   El cajon NO puede esconder lo que hoy se ve, asi que las cuatro categorias
   arrancan ABIERTAS (mega_js.html §4b, `abreTodas`) y el boton solo sirve para
   plegar la que no te interesa. Sin `position:absolute` ni alto animado: aqui
   el panel va en flujo y el que scrollea es el cajon. */
@media (max-width: 1023px) {
  .hm-mega2 .hm-mega-in { padding: 1rem 1rem 7rem; }
  .hm-mega2-cuerpo { height: auto; overflow: visible; transition: none; }
  .hm-mega2-cuerpo::before { content: none; }
  .hm-mega2-cats { width: auto; gap: .5rem; }
  .hm-mega2-cat { min-height: 2.75rem; padding: .75rem .5rem; }
  .hm-mega2-cat__t { font-size: 1rem; }
  /* en el cajon las cuatro estan abiertas: si «activa» pintara azul, las cuatro
     saldrian azules y el azul dejaria de significar nada. Aqui son rotulos. */
  .hm-mega2-cat.is-activa { background: transparent; }
  .hm-mega2-cat.is-activa .hm-mega2-cat__t { color: var(--hm-tinta); }
  .hm-mega2-cat.is-activa .hm-mega2-cat__ch { color: rgba(0,0,0,.32); transform: rotate(90deg); }
  .hm-mega2-panel {
    position: static; display: none; grid-template-columns: 1fr; gap: .125rem;
    opacity: 1; transform: none; pointer-events: auto; transition: none;
  }
  .hm-mega2-panel.is-activa { display: grid; }
  /* 44 px de foto + 8 px arriba y abajo = 60 px de fila: por encima del minimo
     tactil sin que las 19 filas se vuelvan una alfombra */
  .hm-mega2-fam { min-height: 3.5rem; padding: .5rem; gap: .625rem; }
  .hm-mega2-fam__d { display: block; }
  .hm-mega2 .hm-mega-foot { margin: 1.5rem .5rem 0; }
}

/* ── 6. Motion ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hm-mega2-cuerpo, .hm-mega2-panel, .hm-mega2-cat, .hm-mega2-cat__ch,
  .hm-mega2-fam { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   29-ago 16:38/16:42 (Mario, «LA CONEXION»): el cierre del popup dejo de ser
   UN boton. Ahora son dos o tres —«Ver mis parametros», «Ir directo a los
   productos» y, en la vista honesta de los combos sin tabla impresa, el
   asesor por WhatsApp— y `.hm-modal__acciones` estaba escrito para uno solo:
   sin `gap` los .hm-modal__cta (width:100%) se apilaban pegados.
   ═════════════════════════════════════════════════════════════════════════ */
.hm-modal__acciones { display: grid; gap: .5rem; }
/* Los rotulos de estos botones llevan DENTRO el conteo del catalogo («Ver los
   2,503 insertos para aluminio»): con el `white-space: nowrap` de .hm-btn el
   rotulo no cabe en el panel y ensancha la rejilla entera —los botones se
   salian del panel—. Aqui, y solo aqui, envuelve. */
.hm-modal__acciones .hm-btn {
  white-space: normal; text-align: center; line-height: 1.25;
  height: auto; min-height: var(--hm-btn-h); padding: .75rem 1.25rem;
  box-sizing: border-box;   /* .hm-btn no lo trae: con width:100% el padding
                               y el borde se sumaban y el boton salia 44 px
                               fuera del panel */
}
/* El panel mide ~464 px de contenido: las rejillas de /parametros (3 y 2
   columnas a partir de 740 px de VIEWPORT, no de panel) ahi no caben. */
.hm-modal__res .hm-par-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.hm-modal__res .hm-par-grid__i.is-ancho { grid-column: 1 / -1; }
.hm-modal__res .hm-par-prods { grid-template-columns: 1fr; }
.hm-modal__nota {
  margin: 0; text-align: center;
  font-size: var(--hm-fs-caption); color: var(--hm-tinta-4);
}

/* == Sombra viva de las tarjetas del B6 (Mario 19:21, 29-ago) ============
   La sombra de contacto se BORRO de las 38 fotos (quedaba horneada y no podia
   reaccionar) y se redibuja aqui, con el centro/tamano MEDIDOS de la silueta
   de cada pieza (instala_tarjeta_v2 -> tarjetas.json -> vars del generador).
   Al hover la tarjeta ya escala 1.03; la sombra se encoge y se aclara en los
   mismos 200 ms ease-in-out: la pieza se LEVANTA. */
.hm-tarj__sombra {
  position: absolute; pointer-events: none;
  left: var(--hm-som-x, 50%); top: var(--hm-som-y, 82%);
  width: var(--hm-som-w, 30%); height: var(--hm-som-h, 6%);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(4, 7, 16, var(--hm-som-o, .5)), transparent 74%);
  filter: blur(5px);
  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}
.hm-tarj:hover .hm-tarj__sombra,
.hm-tarj:focus-visible .hm-tarj__sombra {
  transform: translate(-50%, -50%) scale(.78);
  opacity: .55;
}
@media (prefers-reduced-motion: reduce) {
  .hm-tarj__sombra { transition: none; }
}

/* == Logo Sumitomo en la calculadora (Mario 19:38, 29-ago) == */
.hm-wc__logo {
  display: block; width: min(340px, 60%); height: auto;
  margin: .35rem 0 1rem;
}

/* == Tarjeta de operacion v3 (Mario 20:42, 29-ago): la foto ES la tarjeta =
   La escena ilustrativa llena la tarjeta completa (cover) y el texto vive
   encima sobre un velo de legibilidad: tags arriba, nombre/datos abajo. */
.hm-glass--v3 {
  position: relative; z-index: 1; overflow: hidden; padding: 1.125rem;
  background: #0E1526; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hm-glass--v3 .hm-glass__foto { position: absolute; inset: 0; margin: 0; }
.hm-glass--v3 .hm-glass__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-glass--v3 .hm-glass__velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,10,22,.45) 0%, transparent 30%,
              transparent 50%, rgba(6,10,22,.88) 100%);
}
.hm-glass--v3 .hm-glass__tags,
.hm-glass--v3 .hm-glass__nombre,
.hm-glass--v3 .hm-glass__meta,
.hm-glass--v3 .hm-glass__n { position: relative; }
.hm-glass--v3 .hm-glass__nombre { margin-top: auto; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.hm-glass--v3 .hm-glass__meta { color: rgba(255,255,255,.78); margin-top: .25rem; }
.hm-glass--v3 .hm-glass__n { color: rgba(255,255,255,.92); margin-top: .3rem; }

/* == Fondo BLUEPRINT de operaciones (Mario 20:42: «innovate algo») =========
   Fuera la foto: marino con reticula de plano tecnico dibujada aqui (lineas
   finas cada 48px) y un resplandor azul arriba a la derecha. Deterministico,
   nada que regenerar, y las tarjetas fotograficas claras REVIENTAN encima. */
.hm-opera {
  background:
    radial-gradient(62% 44% at 78% 0%, rgba(64,128,255,.20), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, #0C1F55 0%, #0A1E5E 55%, #081536 100%);
}

/* == El quiz PREGUNTA (patron «How would you like to...» de hims; medido:
   CtaList columna gap .25rem, opciones apiladas a lo ancho; Mario 19:45) == */
.hm-res-quiz__ops {
  display: flex; flex-direction: column; align-items: stretch;
  gap: .25rem; width: 100%; margin: .5rem 0 1rem;
}
.hm-res-quiz__op {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem .25rem; border-bottom: 1px solid rgba(255,255,255,.28);
  color: var(--hm-blanco); text-decoration: none;
  font-size: 1.25rem; font-weight: 500; line-height: 1.3;
  transition: padding-left 200ms ease-in-out;
}
.hm-res-quiz__op:first-child { border-top: 1px solid rgba(255,255,255,.28); }
@media (hover: hover) { .hm-res-quiz__op:hover { padding-left: .75rem; } }
.hm-res-quiz__op:focus-visible { outline: 2px solid var(--hm-celeste); outline-offset: 2px; }
.hm-res-quiz__chevron { flex: 0 0 auto; }

/* == Resenas DENTRO del fondo de operaciones (Mario 20:25, 29-ago) =======
   El bento del quiz + testimonios deja su seccion propia y vive sobre el
   MISMO fondo fotografico de #hm-operaciones, como el modulo de hims. El
   marino propio del bento se apaga: el fondo de la seccion ES el fondo. */
.hm-opera__resenas { position: relative; z-index: 1; margin-top: 1.75rem; }
.hm-opera__resenas .hm-resenas-bento { background: transparent; padding: .5rem 0 0; margin-top: 0; }
.hm-opera__resenas .hm-res__fuente { color: rgba(255,255,255,.6); }
.hm-opera__resenas .hm-res__fuente a { color: rgba(255,255,255,.8); }

/* == Fichas de rotativas v2 (Mario 21:41, 29-ago): retrato de familia =====
   La foto clara llena la ficha; el titulo pasa a BLANCO sobre un velo
   (antes era marino sobre marino: «Brocas de» era invisible). */
.hm-ficha__velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 10, 22, .58) 0%, rgba(6, 10, 22, .18) 34%,
              transparent 55%, rgba(6, 10, 22, .42) 100%);
}
.hm-ficha__cuerpo { position: relative; }
.hm-ficha__titulo, .hm-ficha__titulo span { color: #fff; }
.hm-ficha__titulo { text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
.hm-ficha__titulo span { color: var(--hm-celeste); }

/* == Hub /productos v3 (Mario 22:20): las 19 en UNA pantalla =============
   Heroe compacto y una sola rejilla densa; la foto de familia (estudio claro,
   images/hims/familias) llena la tarjeta y el nombre + conteo van encima
   sobre un velo. Fuera las franjas y fuera las descripciones. */
.hm-cat__hero { padding-top: 1.25rem; padding-bottom: 1.5rem; }
.hm-cat__hero .hm-cat__h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.hm-cat__hero .hm-cat__lead { max-width: 56rem; font-size: .95rem; line-height: 1.45; }
.hm-cat__fams--todas {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem;
  padding: 0 0 1.25rem;
}
@media (min-width: 740px) { .hm-cat__fams--todas { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1092px) { .hm-cat__fams--todas { grid-template-columns: repeat(5, 1fr); gap: .875rem; } }
.hm-cat__fams--todas .hm-cat__fam--v3 { border-radius: 1rem; overflow: hidden; }
.hm-cat__fams--todas .hm-cat__fam--v3 a { position: relative; display: block; }
.hm-cat__fams--todas .hm-cat__fam--v3 .hm-cat__fam-vis { display: block; aspect-ratio: 1 / 1.06; }
.hm-cat__fams--todas .hm-cat__fam--v3 .hm-cat__fam-vis img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 200ms ease-in-out;
}
@media (hover: hover) { .hm-cat__fams--todas .hm-cat__fam--v3 a:hover .hm-cat__fam-vis img { transform: scale(1.04); } }
.hm-cat__fams--todas .hm-cat__fam--v3 .hm-cat__fam-pie {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.9rem .8rem .65rem;
  background: linear-gradient(180deg, transparent 0%, rgba(9, 16, 34, .78) 62%);
}
.hm-cat__fams--todas .hm-cat__fam--v3 .sumi-tile-t {
  display: block; color: #fff; font-weight: 600; font-size: .98rem; line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.hm-cat__fams--todas .hm-cat__fam--v3 .sumi-tile-n {
  display: block; color: rgba(255, 255, 255, .82); font-size: .78rem; margin-top: .15rem;
}

/* == Hub v3.1: refuerzo de columnas y dieta del heroe (Mario 22:20) ======
   Otra regla de .hm-cat__fams pone 4 columnas con mas especificidad; aqui se
   gana con el padre. Y el heroe adelgaza para acercar la meta de UNA pantalla. */
@media (min-width: 1092px) {
  .hm-cat .hm-cat__fams--todas { grid-template-columns: repeat(5, 1fr); gap: .75rem; }
}
@media (min-width: 740px) and (max-width: 1091.9px) {
  .hm-cat .hm-cat__fams--todas { grid-template-columns: repeat(3, 1fr); }
}
.hm-cat .hm-cat__fams--todas .hm-cat__fam--v3 .hm-cat__fam-vis { aspect-ratio: 1 / 1; }
.hm-cat__hero.hm-cat__hero { padding-top: .75rem; padding-bottom: 1rem; }
.hm-cat__hero .hm-cat__h1 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: .25rem; }
.hm-cat__hero .hm-cat__lead { font-size: .9rem; line-height: 1.4; margin: .25rem 0 .5rem; }
.hm-cat__hero .hm-mk__cifras--fila { margin: .5rem 0; }
.hm-cat__hero .hm-mk__cifras--fila dd { font-size: 1.5rem; }
.hm-cat__fams--todas .hm-cat__fam--v3 .hm-cat__fam-pie { padding: 1.5rem .7rem .55rem; }
.hm-cat__fams--todas .hm-cat__fam--v3 .sumi-tile-t { font-size: .92rem; }
.hm-cat__fams--todas .hm-cat__fam--v3 .sumi-tile-n { font-size: .74rem; }

/* == Hub v3.2: la regla vieja de 4 columnas tiene 4 clases; se iguala y por
   orden gana esta (Mario 22:20: 5 columnas) == */
@media (min-width: 1092px) {
  .ahprodhub.hm-cat .sumi-tiles.hm-cat__fams--todas { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; overflow: visible; }
}
@media (min-width: 740px) and (max-width: 1091.9px) {
  .ahprodhub.hm-cat .sumi-tiles.hm-cat__fams--todas { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}

/* == Ficha de marca: el heroe lleva el LOGO en grande (Mario 22:54) ====== */
.hm-mk__arte--logo {
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; padding: 2rem;
}
.hm-mk__arte--logo img { width: 78%; height: auto; max-height: 70%; object-fit: contain; }

/* == La flechita del mega es un BOTON aparte (Mario 22:52) == */
.hm-nav-prod { display: inline-flex; align-items: center; gap: .1rem; }
.hm-chev-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: .35rem .3rem; cursor: pointer;
  color: inherit; border-radius: .5rem;
}
.hm-chev-btn:hover { background: rgba(10, 30, 94, .07); }
.hm-chev-btn[aria-expanded="true"] .hm-chev { transform: rotate(180deg); }
.hm-chev-btn .hm-chev { transition: transform 200ms ease-in-out; }

/* == Header fijo tambien donde carga ahnsa-app.css (Mario 23:05) =========
   /nosotros y /contacto traen la hoja de la app vieja cuyo
   .global-styles--v3 .global-styles--header (0,2,0) pisa el fixed de
   nav.hm-hdr (0,1,1): el header quedaba en flujo DEBAJO del padding del
   body y flotaba a 161px. Se gana con 0,2,2 y el mismo contrato de arriba. */
div.global-styles--v3 nav.hm-hdr {
  position: fixed; top: var(--hm-promo-h); left: 0; right: 0; z-index: 701;
}

/* v74 (30-ago) — Mario: "quiero que el fondo del video sea el mismo para el
   fondo de arriba y el de los widgets".
   Y se puede sin empalmar nada, porque el propio master lo permite: medido por
   deteccion de bordes, las herramientas viven del 26% al 76% del cuadro y el
   resto es fondo con su haz. Asi que el VIDEO cubre el bloque entero —fondo
   unico y continuo, sin degradado CSS que lo imite— y encima van las tres
   franjas EN FLUJO: el copy sobre el vacio de arriba, las herramientas libres
   en medio, y las tarjetas sobre el vacio de abajo. Nada tapa una pieza.
   v77 (31-ago) — Mario: "el video de inicio esta muy grande en comparacion
   con el de hims". Medido: el nuestro iba a 1.319 de alto/ancho contra el
   1.085 de hims, un 22 % mas. Pero NO se puede encoger la caja a secas: las
   herramientas del master viven del 26 % al 76 % del cuadro y las tarjetas ya
   arrancaban al 74.1 %, asi que bajar el alto sin mas las mete encima del
   metal — el empalme que Mario hizo quitar el 29-ago.
   Se baja a la proporcion de hims Y se aprieta lo que sobraba, que estaba
   medido: el copy ocupa 294 px de los 494 de su zona. El resto lo da el
   `clamp` de las franjas, que ceden antes que el contenido. */
.hm-b6--video {
  position: relative;
  aspect-ratio: 1440 / 1562;
  display: flex; flex-direction: column;
  background: #030C24;   /* solo por si el video tarda: el master manda */
}
.hm-b6--video .hm-b6__media {
  position: absolute; inset: 0; z-index: 0;
  aspect-ratio: auto; width: 100%; height: 100%;
}
.hm-b6--video video.hm-b6__fondo,
.hm-b6--video img.hm-b6__fondo {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
}
.hm-b6--video .hm-b6__copy {
  position: relative; z-index: 2; transform: none; inset: auto;
  width: min(92%, 44rem); margin: 0 auto;
  padding: clamp(2.25rem, 4.5vw, 3.75rem) 0 0;
  display: flex; flex-direction: column; align-items: center;
}
.hm-b6--video .hm-b6__copy .hm-btn { position: static; transform: none; margin-top: 1.35rem; }
.hm-b6--video .hm-b6__h2 { margin: 0; }
.hm-b6--video .hm-sidekick {
  position: relative; z-index: 2; inset: auto; margin-top: auto;
  padding: 0 clamp(1rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem);
}
.hm-b6--video .hm-sidekick__titulo { margin: 0 0 .75rem; }

/* ── Banner de cookies (v79) ─────────────────────────────────────────────────
   Una línea con liga a /privacidad, requerida por el blindaje legal del 31-ago.
   El markup vive en el PIE canónico (tools/cromo_v3/pie.html) y sale en las
   ~1,478 páginas; se descarta con localStorage('ahnsa_ck'). */
/* v81: el boton «Entendido» NO ocultaba nada — `.hm-ck{display:flex}` (0,1,0)
   le ganaba al UA `[hidden]{display:none}` (mismo peso, autor > navegador), asi
   que `b.hidden=true` ponia el atributo y la barra seguia visible; y un
   visitante que YA acepto la volvia a ver por lo mismo. El `[hidden]` explicito
   con el atributo presente sube a (0,2,0) y gana. De paso deja de ser una barra
   de lado a lado (molesta, Mario 1-sep) y pasa a tarjeta compacta abajo-derecha. */
.hm-ck {
  position: fixed; left: 1rem; right: auto; bottom: 1rem; z-index: 90; /* v83: abajo a la IZQUIERDA (Mario 2-sep): se empalmaba con el boton del chat, que vive abajo a la derecha */
  display: flex; gap: .75rem 1rem; align-items: center;
  flex-wrap: wrap; max-width: min(26rem, calc(100vw - 2rem));
  background: #0A1E5E; color: #fff;
  padding: .75rem 1rem; border-radius: .75rem;
  box-shadow: 0 8px 30px rgba(10, 30, 94, .35); font-size: .875rem;
}
.hm-ck[hidden] { display: none; }
.hm-ck p { margin: 0; flex: 1 1 12rem; }
.hm-ck a { color: #fff; text-decoration: underline; }
.hm-ck button {
  background: #fff; color: #0A1E5E; border: 0; border-radius: .5rem;
  padding: .5rem 1rem; font: inherit; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .hm-ck { left: .5rem; right: 5.25rem; bottom: .5rem; max-width: none; padding: .625rem .75rem; } /* v83: deja libre el boton del chat (56 px + 18 px) */
  .hm-ck button { min-height: 44px; flex: 1 1 auto; }
}

/* ── v80: el carrusel de familias EXISTE en móvil ────────────────────────────
   Medido (auditoría 31-ago, _entrega_movil): a 390px `.hm-b6--video` fija su
   alto con aspect-ratio 1440/1562 (≈423px) + overflow:hidden del .hm-b6 — el
   sidekick de 408px no cabe, el track queda 338px amputado y las .hm-tarj se
   quedan opacity:0 PARA SIEMPRE (el IntersectionObserver nunca ve área visible
   de un track 100% clipeado): las 6 familias no existían en teléfono. Bajo
   740px el alto deja de venir del video y el carrusel sale del clip; el IO
   vuelve a ver el track y el JS de siempre lo enciende (cero JS nuevo, no
   toca el LCP). El copy sigue sobre el video. */
@media (max-width: 739px) {
  .hm-b6--video { aspect-ratio: auto; }
  .hm-b6--video .hm-b6__media { position: relative; aspect-ratio: 1440/1562; inset: auto; }
  .hm-b6--video .hm-sidekick { position: static; padding: 0 1rem 1rem; }
  .hm-b6--video .hm-b6__copy { position: absolute; }
}

/* Advertencia legal junto a los resultados de la calculadora y del popup
   (v79, blindaje 31-ago): visible donde se usan los números, no solo en
   /aviso-legal. Discreta pero legible (AA sobre sus fondos). */
.hm-wc__legal, .hm-par-legal {
  font-size: .8125rem; line-height: 1.5; color: var(--hm-tinta-3, #4a5866);
  margin: .75rem 0 0;
}
.hm-wc__legal a, .hm-par-legal a { color: inherit; text-decoration: underline; }


/* ══ v84 · MÓVIL AL LENGUAJE hims (Mario 3-sep 14:10 «sí») ═══════════════════
   Encargo literal de Mario (2-sep 22:2x): «en el scroll móvil no se ve el video
   que tenemos o el UI está muy complicado». Todo lo de aquí abajo vive DENTRO
   de @media (max-width: 739.98px) —o de (pointer: coarse) cuando es un gesto y
   no un layout, que es la regla de la casa— y NO toca escritorio.

   Lo que se midió el 2-sep en producción y otra vez el 3-sep en este árbol
   (`_entrega_movil/_medidas_antes.json`, 390x844 is_mobile has_touch):

     · `.hm-b6__media` 390x423 y `.hm-b6__copy` 359x389 ARRANCANDO EN LA MISMA
       `y` (1186): el titular tapa el 92 % del video, y lo poco que asoma es
       marino sobre un fondo marino. Eso es lo que Mario ve como «no se ve el
       video».
     · el video se enciende y se APAGA con un IntersectionObserver de umbral
       .3, o sea menos de una pantalla y media de movimiento; y antes de eso
       hay que bajar 5,845,356 B sin que nadie los haya pedido.
     · con `prefers-reduced-motion` no carga NUNCA: sólo póster.
     · `/productos` a 390 px pinta las 19 familias en UNA fila horizontal
       (el `repeat(auto-fill, minmax(min(304px,100%),1fr))` de `.sumi-tiles`
       gana) y el primer tile empieza a los 711 px.

   Se arregla así, y en este orden de peso:
     1. el video pasa a HÉROE del bloque, con su proporción y su botón de PLAY;
        el titular baja DEBAJO, en flujo. Nada tapa nada.
     2. el video NO se descarga hasta que alguien lo pide (el póster son 49 KB
        contra 5.85 MB). Eso además MEJORA el LCP: el elemento LCP pasa a ser
        el póster, que ya se descargaba de todos modos.
     3. las 19 familias se leen BAJANDO, en filas con la foto a la derecha,
        el conteo y un chevron — el patrón «Have better sex ›» de hims.
   El botón de PLAY sólo aparece si el JS lo enciende (`.hm-b6--gesto`): sin
   JS no hay nada que reproducir y un botón muerto es peor que ningún botón. */

/* El botón vive en el marcado que emite gen_home.py, pero NO existe visualmente
   fuera de móvil: en escritorio el video arranca solo, como hasta hoy. */
.hm-b6__play { display: none; }

@media (max-width: 739.98px) {
  /* ── 1. el B6: video arriba, titular debajo ─────────────────────────────── */
  /* `aspect-ratio:auto` + columna: el alto lo pone el contenido, no el video,
     así que el carrusel de familias sale del clip (eso ya lo arregló v80) y
     ahora ADEMÁS el copy deja de estar `position:absolute` encima del cuadro. */
  .hm-b6--video { aspect-ratio: auto; display: flex; flex-direction: column; }
  .hm-b6--video .hm-b6__media {
    position: relative; inset: auto; order: 1;
    width: 100%; height: auto;
    /* 1/1.18 es la proporción del héroe móvil de hims medida en la captura que
       mandó Mario; a 390 px son 460 px de video contra los 423 de hoy, pero
       ahora se ven ENTEROS. */
    aspect-ratio: 1 / 1.18;
  }
  .hm-b6--video .hm-b6__copy {
    position: static; order: 2; inset: auto; transform: none;
    width: auto; margin: 0; padding: 1.25rem 1rem .25rem;
    align-items: flex-start; text-align: left;
    /* El bloque de arriba (v72) le calcaba al copy el MISMO `aspect-ratio` que
       al arte —porque iba encima— y lo repartia con `space-between`. Debajo del
       video eso dejaria una caja de 423 px con el titular pegado al techo y el
       boton al suelo: el alto lo tiene que poner el texto. */
    aspect-ratio: auto; justify-content: flex-start;
  }
  /* El velo radial detrás del titular existía porque el titular iba ENCIMA del
     video. Debajo no tapa nada y sólo ensucia. */
  .hm-b6--video .hm-b6__h2::before { display: none; }
  .hm-b6--video .hm-b6__h2 { font-size: 2.25rem; line-height: 1.04; letter-spacing: -.028em; }
  .hm-b6--video .hm-b6__copy .hm-btn { width: 100%; min-height: 52px; margin-top: 1.125rem; }
  .hm-b6--video .hm-sidekick { order: 3; position: static; margin-top: 1.5rem; padding: 0 1rem 1.25rem; }
  .hm-b6--video .hm-sidekick__titulo { margin: 0 0 .75rem; }

  /* ── 2. el botón de PLAY ────────────────────────────────────────────────── */
  /* Sólo con `.hm-b6--gesto`, que pone js/ahnsa-home.js: si el JS no corre, el
     video no se puede reproducir y el botón no debe existir. */
  .hm-b6--gesto .hm-b6__play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: grid; place-items: center; z-index: 3;
    width: 76px; height: 76px; padding: 0; border-radius: 50%;
    background: rgba(3, 12, 36, .46); border: 1.5px solid var(--hm-glass-borde);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: var(--hm-blanco); cursor: pointer;
    transition: opacity 300ms linear, transform 300ms var(--hm-ease-acc);
  }
  /* `display: block` NO es decorativo y la especificidad tampoco. En
     css/ahnsa-theme.css:84 vive `div:has(> video:not([src])) svg{display:none}`
     —«fuera el icono de play, los loops autoplay no se reproducen a mano»—, y
     `.hm-b6__media` es EXACTAMENTE eso: un div con un <video> sin `src` (el
     nuestro no lo tiene hasta que se pide). Esa premisa deja de ser cierta en
     movil, que es justo el cambio que aprobo Mario. theme.css se carga la
     ULTIMA y ademas es un activo SIN generador (su ?v= vive en
     activos_sin_generador.py y cambiarlo obliga a sustituir en 2,196 paginas),
     asi que se le gana por especificidad: la suya es (0,1,3) y esta (0,2,1).
     Medido: sin esta linea el circulo salia sin el triangulo. */
  .hm-b6--gesto .hm-b6__play svg {
    display: block; width: 30px; height: 30px; margin-left: 3px; fill: currentColor;
  }
  /* El rótulo va sobre una FOTO y no puede depender del píxel que le toque
     debajo: lleva su propia placa, y separada del círculo —que es translúcido y
     se leía como si el texto lo tocara—. */
  .hm-b6__play-t {
    position: absolute; top: calc(100% + .875rem); left: 50%; transform: translateX(-50%);
    padding: .3rem .7rem; border-radius: var(--hm-r-pill);
    background: rgba(3, 12, 36, .62); color: var(--hm-blanco-9);
    font-size: .8125rem; font-weight: 500; white-space: nowrap;
  }
  .hm-b6--video.es-video .hm-b6__play {
    opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.85);
  }

  /* ── 3. el hub /productos: 19 filas, no 19 tiles en una fila ────────────── */
  /* Gana con el padre a `.sumi-tiles` de ahnsa-sumi.css, que es quien pone hoy
     el auto-fill de 304 px y el overflow-x. */
  .ahprodhub.hm-cat .sumi-tiles.hm-cat__fams--todas {
    display: flex; flex-direction: column; gap: .5rem;
    overflow: visible; padding: 0 0 1.25rem; margin: 0;
  }
  .ahprodhub.hm-cat .hm-cat__fams--todas .hm-cat__fam--v3 {
    border-radius: var(--hm-r-card-m); overflow: hidden; background: var(--hm-lavado);
    /* `flex: 0 0 74vw` viene del bloque de arriba, que convertia el hub en
       carrusel horizontal; en una columna ese `flex-basis` se lee como ALTO y
       dejaba filas de 289 px. Se apaga aqui, no alla: alla sigue sirviendo a
       `.hm-cat__fams` sin `--todas` (las tiras cortas de familia). */
    display: block; flex: none; max-width: none;
  }
  .ahprodhub.hm-cat .hm-cat__fams--todas .hm-cat__fam--v3 > a {
    display: grid; grid-template-columns: minmax(0, 1fr) 72px 14px;
    align-items: center; gap: .875rem;
    min-height: 96px; padding: .75rem .875rem .75rem 1.25rem;
  }
  .ahprodhub.hm-cat .hm-cat__fams--todas .hm-cat__fam--v3 .hm-cat__fam-vis {
    order: 2; width: 72px; height: 72px; aspect-ratio: 1 / 1;
    border-radius: .75rem; overflow: hidden; background: var(--hm-blanco);
  }
  .ahprodhub.hm-cat .hm-cat__fams--todas .hm-cat__fam--v3 .hm-cat__fam-vis img {
    /* `padding: 1.75rem` de la variante --render se comeria un cuadro de 72 px */
    width: 100%; height: 100%; object-fit: cover; padding: 0; mix-blend-mode: normal;
  }
  /* El pie deja de flotar sobre la foto con su degradado: ahora es la columna
     de texto, en tinta sobre claro. */
  .ahprodhub.hm-cat .hm-cat__fams--todas .hm-cat__fam--v3 .hm-cat__fam-pie {
    position: static; order: 1; min-width: 0;
    padding: 0; background: none; display: block;
  }
  .ahprodhub.hm-cat .hm-cat__fams--todas .hm-cat__fam--v3 .sumi-tile-t {
    display: block; color: var(--hm-tinta); text-shadow: none;
    font-size: 1.25rem; line-height: 1.15; font-weight: 500; letter-spacing: -.02em;
  }
  /* 13 px, no los 11.84 medidos: el piso de hims en móvil es 12 px y el conteo
     es justo el dato por el que se entra a la familia. */
  .ahprodhub.hm-cat .hm-cat__fams--todas .hm-cat__fam--v3 .sumi-tile-n {
    display: block; margin-top: .25rem; color: var(--hm-tinta-3);
    font-size: .8125rem; font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* El chevron se DIBUJA: no hay marcado que añadir y el espejo del listado no
     se entera (el hub no tiene `.sumi-grid`). */
  .ahprodhub.hm-cat .hm-cat__fams--todas .hm-cat__fam--v3 > a::after {
    content: ""; order: 3; width: 9px; height: 9px; justify-self: end;
    border-right: 2px solid var(--hm-tinta-3); border-top: 2px solid var(--hm-tinta-3);
    transform: rotate(45deg);
  }
  /* Cabecera del hub a dieta: el primer tile empezaba a los 711 px, o sea el
     84 % de la primera pantalla era héroe y texto. */
  .hm-cat__hero.hm-cat__hero { padding-top: .5rem; padding-bottom: .75rem; }
  .hm-cat__hero .hm-cat__h1 { font-size: 2rem; line-height: 1.06; letter-spacing: -.028em; margin: .25rem 0 .5rem; }
  .hm-cat__hero .hm-cat__lead { font-size: .9375rem; line-height: 1.45; margin: 0 0 .75rem; }

}

/* Los chips de subfamilia YA se deslizan a sangre bajo 740 px (bloque de la
   §chips, arriba): aquí sólo se les da el blanco de toque, que es un GESTO. */
@media (pointer: coarse) {
  .hm-cat__sub { min-height: 44px; align-items: center; }
}

/* Gestos, no layout: el ancho decide el layout, `pointer` decide los gestos.
   Sólo CONTROLES. Los enlaces de texto en línea (migas, legales del pie) se
   quedan como están A PROPÓSITO: es la decisión escrita en el bloque de 739 px
   de la auditoría del 29-ago —hims también tiene 53 por debajo de 44 y son
   párrafos y pie—, y meterlos en un `inline-flex` de 44 px rompe el interlineado
   del párrafo que los contiene. La medida de esos dos sigue estando en
   `_entrega_movil/_medidas_despues.json` para quien quiera reabrirlo. */
@media (pointer: coarse) {
  .hm-promo .hm-promo-cta { min-height: 44px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
}


/* ══ v85 · 4-sep (UI, handoff §3.3.3: «los h1 … ¿se podrán animar?» y «espacios
   raros al hacer scroll», Mario 3-sep 09:21) ═══════════════════════════════════
   1. `--hm-cab-h`, la altura VISIBLE de la cabecera, sube de ahnsa-filtros-mc.css
      (donde nacio en 8e13604 y solo la veian 404 paginas) a ESTA hoja, que cargan
      todas: cualquier pegajoso (la columna derecha de la ficha, .ahf-der) se pega a
      lo que se ve de la barra y no a lo que mide. Con `.is-oculto` lo visible es 0.
      La copia de filtros-mc.css queda: es identica y no estorba.
   2. Entrada suave del h1 en TODA superficie que no la tenia (marcas, hub, medidas,
      sistemas, herramientas, catalogo, cotizacion, ficha). SOLO transform: en
      varias de estas paginas el h1 es el elemento LCP y animar su opacidad desde 0
      lo retrasa (misma regla que el heroe, v77). transform es de compositor: CLS 0.
      El heroe de la home queda fuera (tiene la suya, 620 ms) y el listado de
      /productos conserva la suya por especificidad (.ahprodnav.hm-cat .sumi-titulo,
      0,3,0, gana a 0,1,2). @keyframes y no .hm-reveal: una animacion CSS siempre
      termina aunque el JS no llegue. */
:root { --hm-cab-h: var(--hm-hdr-h, 73px); }
html:has(nav.hm-hdr.is-oculto) { --hm-cab-h: 0px; }
@keyframes hm-h1-entra { from { transform: translateY(10px); } to { transform: none; } }
h1:not(.hm-hero__h1) { animation: hm-h1-entra 420ms cubic-bezier(.22, .61, .36, 1) both; }
h1:not(.hm-hero__h1) + p { animation: hm-h1-entra 420ms cubic-bezier(.22, .61, .36, 1) 120ms both; }
@media (prefers-reduced-motion: reduce) {
  h1:not(.hm-hero__h1), h1:not(.hm-hero__h1) + p { animation: none; }
}

/* ===== SKIPER40 v86 (5-sep-2026) — INICIO. GENERADO: no editar a mano. =====
   Subrayado animado de enlaces (Skiper UI «Animated Link» skiper40, Link001, el de cursor.com)
   portado a CSS puro. Mario, 5-sep 00:40: «si me gusto pero asegurar high fps core web vitals».
   Configuracion elegida: nav=1,pie=1,cont=1,flecha=1,pildora=0 (menu, pie y prosa con subrayado que entra por la
   izquierda y sale por la derecha; flecha absoluta al hover; sin pildora gris en el menu).
   Rendimiento medido: solo transform/opacity (compositor), 0.00 px de cambio de layout en reposo
   sobre 92 enlaces, flecha sin huella (position:absolute; display:none en hover:none), prosa por
   background-image para enlaces partidos en dos lineas, y sustituye el subrayado del pie de
   theme.css:121-126 que animaba `right` (layout). QA: _entrega_skiper40/qa/INFORME.md;
   integracion: _entrega_skiper40/INTEGRACION.md. FUENTE UNICA: _entrega_skiper40/
   gen_skiper40_css.py + exporta_final.py --config nav=1,pie=1,cont=1,flecha=1,pildora=0 ; este bloque lo
   escribe integra_v86.py. */
/* skiper40 — CSS FINAL para nav=1 pie=1 cont=1 flecha=1 pildora=0.
   GENERADO por _entrega_skiper40/exporta_final.py desde gen_skiper40_css.genera()
   (generador sha256 af7f060c68dc): las mismas reglas de la vista previa, sin los atributos
   de <html> ni el panel. Destino: al FINAL de css/ahnsa-hims.css, con bump de V_CSS en
   tools/gen_home.py y enlaza_hims --escribe. No editar a mano: regenerar. */
:root{--sk-dur:300ms; --sk-ease:cubic-bezier(.4,0,.2,1); --sk-grosor:max(1px,.06em); --sk-flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1.004 9.166 9.337.833m0 0v8.333m0-8.333H1.004' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.hm-nav > li > a{position:relative;text-decoration:none;}
.hm-nav > li > a::before{content:"";position:absolute;pointer-events:none;left:.75rem;right:.75rem;bottom:7px;height:var(--sk-grosor);background:currentColor;transform:scaleX(0);transition:transform var(--sk-dur) var(--sk-ease);}
.hm-nav > li > a[aria-haspopup]::before{right:calc(.75rem + 1.35rem);}
.hm-nav > li > a::before{transform-origin:right;}
.hm-mega-foot a{position:relative;text-decoration:none;}
.hm-mega-foot a::before{content:"";position:absolute;pointer-events:none;left:0;right:0;bottom:-3px;height:var(--sk-grosor);background:currentColor;transform:scaleX(0);transition:transform var(--sk-dur) var(--sk-ease);}
.hm-mega-foot a.hm-mega-todas::before{right:1.4rem;}
.hm-mega-foot a::before{transform-origin:right;}
footer.hm-foot .hm-foot-panel li a{position:relative;text-decoration:none;border-bottom-color:transparent !important;}
footer.hm-foot .hm-foot-panel li a::before{content:"";position:absolute;pointer-events:none;left:0;right:0;bottom:calc(.5rem - 1px);height:var(--sk-grosor);background:currentColor;transform:scaleX(0);transition:transform var(--sk-dur) var(--sk-ease);}
footer.hm-foot .hm-foot-panel li a::after{content:none;}
footer.hm-foot .hm-foot-panel li a::before{transform-origin:right;}
footer.hm-foot .hm-foot-links a{position:relative;text-decoration:none;}
footer.hm-foot .hm-foot-links a::before{content:"";position:absolute;pointer-events:none;left:0;right:.75rem;bottom:.25rem;height:var(--sk-grosor);background:currentColor;transform:scaleX(0);transition:transform var(--sk-dur) var(--sk-ease);}
footer.hm-foot .hm-foot-links a::after{content:none;}
footer.hm-foot .hm-foot-links a::before{transform-origin:right;}
main :is(p,dd,td,summary,figcaption,blockquote) a:not([class])::before{content:none;}
.hm-nube__a{position:relative;text-decoration:none;}
.hm-nube__a::before{content:"";position:absolute;pointer-events:none;left:0;right:0;bottom:0;height:var(--sk-grosor);background:currentColor;transform:scaleX(0);transition:transform var(--sk-dur) var(--sk-ease);}
.hm-nube__a::before{transform-origin:right;}
.hm-res__ver{position:relative;text-decoration:none;border-bottom-color:transparent !important;}
.hm-res__ver::before{content:"";position:absolute;pointer-events:none;left:0;right:0;bottom:-1px;height:var(--sk-grosor);background:currentColor;transform:scaleX(0);transition:transform var(--sk-dur) var(--sk-ease);}
.hm-res__ver::before{transform-origin:right;}
@media (hover:hover){
  .hm-nav > li > a:is(:hover,:focus-visible)::before{transform-origin:left;transform:scaleX(1);}
  .hm-mega-foot a:is(:hover,:focus-visible)::before{transform-origin:left;transform:scaleX(1);}
  footer.hm-foot .hm-foot-panel li a:is(:hover,:focus-visible)::before{transform-origin:left;transform:scaleX(1);}
  footer.hm-foot .hm-foot-links a:is(:hover,:focus-visible)::before{transform-origin:left;transform:scaleX(1);}
  main :is(p,dd,td,summary,figcaption,blockquote) a:not([class]){text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0 var(--sk-grosor);transition:background-size var(--sk-dur) var(--sk-ease);}
  main :is(p,dd,td,summary,figcaption,blockquote) a:not([class]){background-position:100% 100%;}
  main :is(p,dd,td,summary,figcaption,blockquote) a:not([class]):is(:hover,:focus-visible){background-size:100% var(--sk-grosor);background-position:0 100%;}
  .hm-nube__a:is(:hover,:focus-visible)::before{transform-origin:left;transform:scaleX(1);}
  .hm-res__ver:is(:hover,:focus-visible)::before{transform-origin:left;transform:scaleX(1);}
}
.hm-nav > li > a:not([aria-haspopup])::after{content:"";position:absolute;left:auto;bottom:auto;margin:0;right:.2rem;top:50%;margin-top:-.275em;width:.55em;height:.55em;background:currentColor;pointer-events:none;-webkit-mask:var(--sk-flecha) center/contain no-repeat;mask:var(--sk-flecha) center/contain no-repeat;opacity:0;transform:translateY(.25em);transition:opacity var(--sk-dur) var(--sk-ease),transform var(--sk-dur) var(--sk-ease);}
footer.hm-foot .hm-foot-panel li a::after{content:"";position:absolute;left:auto;bottom:auto;margin:0;right:-.9em;top:calc(.75rem - .275em + .15em);width:.55em;height:.55em;background:currentColor;pointer-events:none;-webkit-mask:var(--sk-flecha) center/contain no-repeat;mask:var(--sk-flecha) center/contain no-repeat;opacity:0;transform:translateY(.25em);transition:opacity var(--sk-dur) var(--sk-ease),transform var(--sk-dur) var(--sk-ease);}
footer.hm-foot .hm-foot-links a::after{content:"";position:absolute;left:auto;bottom:auto;margin:0;right:.1rem;top:calc(50% - .125rem);margin-top:-.275em;width:.55em;height:.55em;background:currentColor;pointer-events:none;-webkit-mask:var(--sk-flecha) center/contain no-repeat;mask:var(--sk-flecha) center/contain no-repeat;opacity:0;transform:translateY(.25em);transition:opacity var(--sk-dur) var(--sk-ease),transform var(--sk-dur) var(--sk-ease);}
@media (hover:hover){
  .hm-nav > li > a:not([aria-haspopup]):is(:hover,:focus-visible)::after{opacity:1;transform:translateY(0);right:.2rem;top:50%;margin-top:-.275em;}
  footer.hm-foot .hm-foot-panel li a:is(:hover,:focus-visible)::after{opacity:1;transform:translateY(0);right:-.9em;top:calc(.75rem - .275em + .15em);}
  footer.hm-foot .hm-foot-links a:is(:hover,:focus-visible)::after{opacity:1;transform:translateY(0);right:.1rem;top:calc(50% - .125rem);margin-top:-.275em;}
}
@media (hover:none){
  .hm-nav > li > a:not([aria-haspopup])::after{display:none;}
  footer.hm-foot .hm-foot-panel li a::after{display:none;}
  footer.hm-foot .hm-foot-links a::after{display:none;}
}
.hm-nav > li > a:hover{background:transparent;}
@media (prefers-reduced-motion:reduce){
  .hm-nav > li > a::before,.hm-nav > li > a::after,.hm-mega-foot a::before,.hm-mega-foot a::after,footer.hm-foot .hm-foot-panel li a::before,footer.hm-foot .hm-foot-panel li a::after,footer.hm-foot .hm-foot-links a::before,footer.hm-foot .hm-foot-links a::after,main :is(p,dd,td,summary,figcaption,blockquote) a:not([class]),.hm-nube__a::before,.hm-nube__a::after,.hm-res__ver::before,.hm-res__ver::after{transition:none !important;}
}
/* ===== SKIPER40 v86 — FIN ===== */

/* ===== DISENO v86 (5-sep-2026, helper 2; bloques 1,2a,3,4,5,6,7,8,9,10,12,13,14,15,16b,17,18,19,20) — INICIO. GENERADO: no editar a mano. =====
   Auditoría UI/UX de helper 2 (_entrega_diseno/ANTES.md, DESPUES.md, INTEGRACION.md): esquina inferior
   de 390 como un sistema (cookie compacta sobre la barra; flotante oculto donde hay barra), contraste de
   conteos de filtros 3.86→5.6+ con var(--hm-tinta-2), áreas de golpe de 44 px por ::after sin mover layout,
   migas a 390, rejilla de KPIs de marca, :focus-visible para los outline:none, indicio de scroll en
   .hm-cat__subs. Especificidad medida con CDP: 0 choques con SKIPER40. Fuente única:
   _entrega_diseno/overlay/exporta_bloque.py; este bloque lo escribe integra_despues_v86.py. */
/* ══ DISEÑO · helper 2 · bloques 1,2a,3,4,5,6,7,8,9,10,12,13,14,15,16b,17,18,19,20 · fuente _entrega_diseno/overlay/despues.css sha 6057deee4847 · repo 42519fb3a ══
   Origen y evidencia: _entrega_diseno/{ANTES,DESPUES,INTEGRACION}.md. NO editar a mano: regenerar con
   exporta_bloque.py y volver a pegar. */

/* ── #1 · 390: la esquina inferior como UN sistema (cookie + barra + WhatsApp)
   Decisión de Mario (5-sep, vía master): la burbuja del chat (#ahnsa-chat-btn)
   se va y en su lugar irá un botón de WhatsApp al bot. Jerarquía propuesta a 390:
     1. La barra .ah-sticky (Ver el catálogo · Cotizar por WhatsApp) ES el CTA
        primario y ya contiene WhatsApp: en las páginas que la tienen, el botón
        flotante de WhatsApp es REDUNDANTE y se oculta (un solo WhatsApp a la vista).
     2. En páginas SIN barra (home, fichas de marca sin barra) el botón flotante
        de WhatsApp vive abajo a la DERECHA (56 px, ya libre del cookie por v83).
     3. El cookie es lo menos importante: se coloca ENCIMA de la barra (nunca
        sobre una tarjeta ni sobre un CTA), a todo el ancho, y desaparece al
        aceptar. Ley: Fitts (un objetivo tapado no existe), Hick (un WhatsApp,
        no dos), WIG «sticky overlays must not cover the focused element».
   Selectores: el chat de hoy (#ahnsa-chat-btn) y el futuro botón de WhatsApp
   (.ah-wa-flotante, nombre propuesto) reciben la misma regla. `:has()`: Chrome
   105+, Safari 15.4+, Firefox 121+; sin soporte, queda como hoy.            */
@media (min-width: 740px) and (max-width: 767px) {   /* bajo 740 manda el bloque #9 (barra del pulgar): el flotante vuelve */
  body:has(.ah-sticky) #ahnsa-chat-btn,
  body:has(.ah-sticky) .ah-wa-flotante { display: none !important; }
}
@media (max-width: 767px) {
  body:has(.ah-sticky) .hm-ck {
    left: .5rem; right: .5rem; max-width: none;
    bottom: calc(64px + env(safe-area-inset-bottom) + 6px);
    /* compacto: una tira de ~60 px en vez de 114 (2 líneas + botón de 44) para
       tapar lo MENOS posible de la primera tarjeta mientras vive. */
    flex-wrap: nowrap; gap: .5rem; padding: .5rem .625rem; font-size: .8125rem; line-height: 1.3;
  }
  body:has(.ah-sticky) .hm-ck p { flex: 1 1 auto; }
  body:has(.ah-sticky) .hm-ck button { flex: 0 0 auto; min-height: 40px; padding: .375rem .75rem; }
}
/* el cookie NO se pone encima de la barra de CTAs ni del chat (z 9990 / 99990):
   hoy z-index 90 ya queda por debajo; se deja explícito para que no cambie. */
.hm-ck { z-index: 90; }
/* a >=1100 px la barra de filtros de /productos ocupa la esquina inferior IZQUIERDA (fam-*-1440-orden.png: tapaba
   «Ancho del zanco»); el cookie pasa a la derecha, dejando libres los 56+18 px del chat/WhatsApp. */
/* Mario 11:57: el aviso de cookies va abajo a la IZQUIERDA en todos los anchos, para no compartir esquina con el
   botón de WhatsApp. hims ya lo pone a la izquierda (v83, :3222); aquí solo se alinea con el margen del botón en
   escritorio (22 px) y, en los listados con columna de filtros pegada (≥1100, .ahsumi--lado, 320 px), se corre a la
   derecha de la columna para no tapar «Ancho del zanco» ni el pie de la barra. Sigue subiendo con la barra de la
   ficha (ahnsa-ficha.css:625) y con la barra del pulgar (#9). */
@media (min-width: 1100px) {
  .hm-ck#hmCk { left: 22px; right: auto; bottom: 22px; }
  body:has(.ahsumi--lado) .hm-ck#hmCk { left: calc(320px + 1rem); }
}
/* 921-1099 con ratón la columna es estática de 380 px (filtros-mc.css:782) y el cookie la tapaba al llegar abajo */
@media (min-width: 921px) and (max-width: 1099.98px) and (pointer: fine) {
  body:has(.ahsumi--lado) .hm-ck#hmCk { left: calc(380px + 1rem); }
}

/* ── #3 · WCAG 1.4.3: conteos de filtros a 12 px con #78838F = 3.86:1 ─────
   Ley: contraste mínimo 4.5:1 en texto < 24 px; ui-ux-pro-max: nunca texto
   funcional por debajo de 12 px. --hm-tinta-2 (rgba(0,0,0,.65)) sobre blanco = 6.2:1, token ya
   existente de hims (sin hex nuevo); la etiqueta de forma sube de 11 a 12 px.                                             */
.sumi-val .sumi-val-c, .mcf .sumi-val .sumi-val-c { color: var(--hm-tinta-2, rgba(0,0,0,.65)); font-size: 13px; }  /* (0,2,0) gana a ahnsa-sumi.css:151; token de hims (6.2:1), sin hex nuevo para test_css_hims */
.mcf .mcf-rejilla .sumi-val .sumi-val-t { font-size: 12px; }  /* (0,4,0) gana a filtros-mc.css:363/383 */
.mcf .mcf-rejilla .sumi-val .sumi-val-c { font-size: 12px; }

/* ── #4 · Fitts / WCAG 2.5.8: objetivos de 26-28 px en la cabecera fija ────
   La lupa y el chevrón quedan con su tamaño VISUAL (26 px, el diseño manda)
   pero ganan un área de golpe de 44×44 con un pseudo-elemento: no cambia el
   layout ni un píxel (medido en DESPUES.md).                               */
.hm-search-btn, .hm-chev-btn { position: relative; }
.hm-search-btn::after, .hm-chev-btn::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
/* «Cotiza hoy» del promo: 121×28 con puntero fino y 28 en viewports angostos
   cuando el navegador reporta `pointer: fine` (emuladores, Windows táctil con
   ratón). Un min-height de 44 crece la barra 44→60 px y empuja la página 16 px
   (medido: altura de página +16); por eso se usa el MISMO pseudo-elemento de
   golpe que la lupa: 44 px de área efectiva, 0 px de cambio de layout.     */
.hm-promo-cta { position: relative; }
.hm-promo-cta::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}
/* breadcrumbs a 390: «Inicio › Productos» miden 15-18 px de alto. Se les da
   área de golpe de 44 px SIN mover el texto (padding + margen negativo), solo
   con puntero grueso, que es donde Fitts cobra. hims dejó los enlaces de
   texto en línea a propósito (comentario en hims.css:585); esta regla NO toca
   párrafos, solo las migas.                                                */
@media (pointer: coarse), (max-width: 767px) {
  .hm-mk__crumbs a, .ahnav-migas a, .fam-crumbs a {
    display: inline-block; padding: .8125rem 0; margin: -.8125rem 0;
  }
}
/* filas de facetas: 27 px de alto, 296 de ancho. Con puntero grueso, 44. */
@media (pointer: coarse) {
  .mcf .sumi-val, .sumi-val { min-height: 44px; }
  .mcf-limpiar { min-height: 44px; }
}

/* ── KPIs de marca rotos en 390 («GRADOS 14» huérfano con borde colgando) ──
   Ley: Gestalt (alineación, cierre); responsive-craft: intrínseco primero.
   Tres cifras en tres columnas iguales; el borde izquierdo separa columnas y
   nunca queda colgando porque ya no hay segunda fila.                     */
@media (max-width: 480px) {
  dl.hm-mk__cifras.hm-mk__cifras--fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }  /* (0,2,1) gana a hims.css:2252 */
  .hm-mk__cifras--fila .hm-mk__cifra { padding: .125rem .75rem .125rem 0; }
  .hm-mk__cifras--fila .hm-mk__cifra + .hm-mk__cifra { padding-left: .75rem; }
  .hm-mk__cifras--fila dd { font-size: 1.375rem; }
  .hm-mk__cifras--fila dt { font-size: .625rem; letter-spacing: .04em; }
}

/* ── figcaption.hm-mk__pie dentro de la figura navy (1.23:1) ───────────────
   Solo actúa si el pie está DENTRO de .hm-mk__video (fondo --hm-marino);
   fuera de la figura no casa y no cambia nada.                            */
.hm-mk__video .hm-mk__pie { color: rgba(255, 255, 255, .78); }

/* ── p.hm-cuerpo-l en rgba(0,0,0,.44) sobre blanco = 3.23:1 a 19 px ───────
   Es el párrafo de .hm-claro__cab (hims.css:505, --hm-tinta-4). Sube al
   token .65 (--hm-tinta-2 = 6.2:1); los demás .hm-cuerpo-l no cambian.                       */
.hm-claro__cab p, .hm-claro__cab .hm-cuerpo-l { color: var(--hm-tinta-2, rgba(0, 0, 0, .65)); }  /* hims.css:505 usaba --hm-tinta-4 */

/* ── «por familia» #7FC4EC sobre azul #1878B9 = 2.49:1 (tile 2 de la home) ─
   Texto grande (20 px) necesita 3:1; blanco al 92 % da 3.9:1 y conserva la
   idea de «segunda voz» del título.                                        */
.hm-tile--2 .hm-tile__titulo span { color: rgba(255, 255, 255, .92); }

/* ── Foco visible: outline:none sin sustituto (hims.css:795,1216,1528,1574;
   productos.css:338). Ley: WCAG 2.4.7; WIG «never outline:none without
   focus-visible replacement». Solo :focus-visible: el clic con ratón no
   pinta anillo.                                                            */
.hm-foot-input:focus-visible, .flt-buscar:focus-visible,
.hm-wc__campo input:focus-visible, .hm-wc__campo select:focus-visible,
.hm-wc__paso:focus-visible, .hm-escena__pieza:focus-visible {
  outline: 2px solid var(--hm-azul, #1878B9); outline-offset: 2px;
}

/* ── Chips de tipo cortados a sangre en 390 sin indicio de scroll ──────────
   Ley: Nielsen #1 (visibilidad). Un degradado al borde derecho dice «hay
   más»; se pinta con mask para no tapar el último chip cuando se llega. */
@media (max-width: 767px) {
  .hm-cat__subs, .prod-chips, .hm-cat__sub-row {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
  }
}

/* ── #8 · Scroller de filtros: la cabecera de grupo pegada se esconde DEBAJO de
   la cabecera fija entre 921 y 1099 px con ratón (captura de Mario, 5-sep).
   Causa medida (mide_sticky.py, 8905): en ese rango `.sumi-lado` es `static`
   (ahnsa-filtros-mc.css:782) y el que hace scroll es el VIEWPORT, pero
   `.mcf .sumi-g-h` pega a `top: 0` (filtros-mc.css:294, escrito para cuando la
   barra tiene su propio scroll). Al subir, el cromo vuelve a mostrar `nav.hm-hdr`
   (0-73 px) y la cabecera de grupo queda tapada bajo ella: en la franja 73-123
   asoman filas sueltas del grupo sin su rótulo. Desde 1100 px la barra es
   sticky con scroll propio y el 0 es correcto; con dedo es el cajón (top:123).
   Arreglo: en ese rango la cabecera de grupo pega a la altura VISIBLE de la
   cabecera fija (--hm-cab-h: 73 px con cabecera a la vista, 0 px oculta), la
   misma variable y los mismos 200 ms que ya usa la barra desde 1100 px
   (filtros-mc.css:894-900). Ley: Nielsen #1 (visibilidad del estado) y
   WIG «sticky headers must not cover content».                             */
@media (min-width: 921px) and (max-width: 1099.98px) and (pointer: fine) {
  .mcf.sumi-lado .sumi-g-h { top: var(--hm-cab-h, 73px); transition: top 200ms linear; }  /* (0,3,0): filtros-mc.css carga DESPUÉS de hims/theme y su .mcf .sumi-g-h es (0,2,0) */
  @media (prefers-reduced-motion: reduce) { .mcf.sumi-lado .sumi-g-h { transition: none; } }
}

/* ── #9 · MÓVIL «fat thumb» (Mario 02:23: «improve massively mobile navigation») ─
   Medido ANTES a 390 (pulgar-antes.json): las 4 acciones primarias del sitio
   (Buscar, Carrito, Cotizar, Menú) viven a y=75, en el tercio SUPERIOR de la
   pantalla, donde el pulgar no llega con una mano; en la zona del pulgar solo
   hay cookie y chat. Propuesta CSS pura (mismo markup, cero JS):
     1. `.hm-hdr-acts` (la fila de acciones que ya existe en el cromo) baja a una
        BARRA FIJA de 64 px en la zona del pulgar; objetivos de 48 px repartidos
        con space-around (separación >= 24 px). La cabecera conserva el logo.
     2. El buscador (`hs-abierta`) se abre ENCIMA de la barra y sus resultados
        crecen hacia arriba, cerca del pulgar.
     3. El cajón del menú termina donde empieza la barra y su «Cerrar» sube;
        renglones del menú con 8 px de separación y los tres enlaces chicos del
        pie del menú a 44 px.
     4. La barra de CTAs de los listados (`.ah-sticky`) se RETIRA en móvil: sus
        dos acciones ya están en la barra (Cotizar) y en el botón de WhatsApp
        (el que sustituye a la burbuja del chat, abajo a la derecha, ENCIMA de
        la barra). Decisión para Mario: si prefiere conservarla, se apila
        encima (128 px de barras: se desaconseja).
     5. Cookie y WhatsApp/chat suben por encima de la barra; el body gana el
        aire de abajo para que el último contenido no quede tapado.
   Leyes: zona del pulgar (Hoober 2013: el 49 % usa una mano; el tercio
   inferior es la zona cómoda), Fitts (objetivos de 48 px, separación >= 8),
   Apple HIG / Material (barra inferior de 3-5 acciones), WCAG 2.5.8.
   Fuente al integrar: bloque móvil de css/ahnsa-hims.css (V_CSS), tras el
   bloque #1: NO toca cromo_v3/*.html ni JS.                                 */
@media (max-width: 739.98px) {
  :root { --ah-pulgar-h: 64px; --ah-pulgar-total: calc(var(--ah-pulgar-h) + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: var(--ah-pulgar-total); }
  /* MEDIDO 5-sep 12:0x: la barra del pulgar vive DENTRO de nav.hm-hdr, y el cromo esconde la cabecera con
     `transform: translate3d(…)` (hims.css:608-610, headroom). Un `position: fixed` dentro de un ancestro con
     transform se ancla al ancestro, no al viewport: al bajar 600 px la barra se iba con la cabecera (acts en
     -64..0). Bajo 740 la cabecera se esconde moviendo `top` en vez de `transform` (es un elemento fijo: su
     `top` no mueve el flujo, 0 CLS), con los mismos 200 ms lineales; el resto del headroom (clases, --hm-cab-h,
     el cajón) no cambia. */
  html.hm-scrolled nav.hm-hdr { transform: none; top: 0; transition: box-shadow 300ms linear, background-color 300ms linear, top 200ms linear; }
  nav.hm-hdr.is-oculto, html.hm-scrolled nav.hm-hdr.is-oculto { transform: none; top: calc(-1 * var(--hm-hdr-h, 73px) - 1px); }   /* (0,3,1): gana a la de hm-scrolled de arriba */
  nav.hm-hdr { transition: box-shadow 300ms linear, background-color 300ms linear, top 200ms linear; }
  .hm-hdr .hm-hdr-acts {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 701;
    height: var(--ah-pulgar-total); margin: 0; padding: 0 .75rem env(safe-area-inset-bottom, 0px);
    display: flex; justify-content: space-around; align-items: center; gap: 0;
    background: #fff; border-top: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 -6px 24px rgba(10, 30, 94, .10);
  }
  .hm-hdr .hm-hdr-acts .hm-ico { width: 3rem; height: 3rem; }                 /* 48 px */
  .hm-hdr .hm-hdr-acts .hm-pill.hm-cta { min-height: 3rem; padding: 0 1.25rem; }
  /* buscador abierto: encima de la barra, resultados hacia arriba */
  .hm-hdr.hs-abierta .hm-hdr-acts .hm-search {   /* (0,3,0): hims.css:715 es (0,2,0) y carga después */
    position: fixed; top: auto; bottom: calc(var(--ah-pulgar-total) + .5rem); left: .75rem; right: .75rem; z-index: 702;
  }
  .hm-hdr.hs-abierta .hm-hdr-acts .hm-search .sku-panel { top: auto; bottom: calc(100% + .25rem); max-height: 55vh; overflow: auto; }
  /* cajón del menú: termina en la barra; «Cerrar» encima de ella */
  .hm-hdr .ahmega.hm-cajon.on { bottom: var(--ah-pulgar-total); }   /* (0,4,0) > hims.css:749 (0,3,0) */
  .hm-hdr .ahmega.hm-cajon .hm-mega-cerrar.hm-mega-cerrar { top: auto; bottom: calc(var(--ah-pulgar-total) + .75rem); }
  .hm-hdr .ahmega.hm-cajon .hm-mega-in.hm-mega-in { padding-bottom: 5.5rem; }
  .hm-hdr .ahmega.hm-cajon .hm-mega-movil.hm-mega-movil { gap: .5rem; }
  .hm-hdr .ahmega.hm-cajon .hm-mega-foot { gap: .25rem 1.5rem; }
  .hm-hdr .ahmega.hm-cajon .hm-mega-foot a { min-height: 44px; padding: .5rem 0; }
  /* la barra fija de la FICHA (#ahfBarra, ahnsa-ficha.css:566, z 95, bottom:0) quedaba DETRÁS de la barra del
     pulgar (z 701): sube y se apila encima de ella; se muestra por transform (visibility/opacity), así que no
     cuenta como layout shift. */
  .ahfb { bottom: var(--ah-pulgar-total); }
  /* la barra de CTAs de los listados se retira (sus acciones ya viven en la barra del pulgar + WhatsApp) */
  .ah-sticky { display: none !important; }
  /* WhatsApp/chat y cookie, encima de la barra (pisa al bloque #1: misma especificidad, va después) */
  body:has(.ah-sticky) #ahnsa-chat-btn#ahnsa-chat-btn, #ahnsa-chat-btn, .ah-wa-flotante.ah-wa-flotante {   /* (2,1,1): gana al bloque #1 ya integrado en hims (carga después) */
    bottom: calc(var(--ah-pulgar-total) + 12px) !important;   /* el display lo pone cada uno (#10: inline-flex); aquí solo la altura */
  }
  body:has(.ah-sticky) #ahnsa-chat-btn#ahnsa-chat-btn { display: inline-block !important;
  }
  body:has(.ah-sticky) .hm-ck, .hm-ck#hmCk { bottom: calc(var(--ah-pulgar-total) + 6px); left: .5rem; right: 5.25rem; max-width: none; }
}

/* ── #10 · Botón flotante de WhatsApp en el sitio de la burbuja del chat ──────
   Mario 5-sep 01:00-01:11 (_entrega_whatsapp/DECISIONES_MARIO_2026-09-05.md) y
   11:41 («make it look good»). Lo inyecta enlaza_hims.py en TODO el árbol como
   <a class="ah-wa-flotante"><span class="ah-wa-flotante__etq">Escríbenos</span>
   <svg…/></a>, sin JS ni ?v=. Diseño: glifo oficial de WhatsApp en blanco sobre
   el verde de marca rgb(37,211,102) (rgb(), no hex: es la marca, no la paleta);
   56 px en móvil, 60 en escritorio; sombra doble (contacto corta + difusa
   larga teñida del verde); hover: sube 2 px y la sombra larga crece; con ratón
   y ≥1024 la etiqueta «Escríbenos» se despliega a la IZQUIERDA (píldora verde,
   texto blanco 15 px); position:fixed → 0 CLS aunque cambie de ancho; pulso de
   anillo UNA vez al cargar (2 ciclos × 2 s, ::before), apagado con
   prefers-reduced-motion. Esquina: a < 740 el bloque #9 lo sube sobre la barra
   del pulgar; a 740-767 con barra de listado el #1 lo oculta; el cookie compacto
   ya le deja 5.25rem. (Hasta el 6-sep el #11 tambien lo retiraba en /asesor-ia;
   esa pagina se elimino y el bloque #11 con ella.) Área 56/60 px (Fitts).
   aria-label «Chatea con AHNSA por WhatsApp»; la etiqueta va aria-hidden.   */
.ah-wa-flotante {
  --wa-verde: rgb(37, 211, 102);
  --wa-verde-oscuro: rgb(30, 190, 90);
  position: fixed; right: 18px; bottom: 18px; z-index: 99990;
  box-sizing: border-box; height: 56px; min-width: 56px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: flex-end;
  border-radius: 999px; background: var(--wa-verde); color: #fff; text-decoration: none;
  font-family: var(--hm-fuente, system-ui, sans-serif); font-weight: 600; font-size: 15px; line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .20), 0 10px 26px rgba(37, 211, 102, .32);
  transition: transform 200ms cubic-bezier(.22, .61, .36, 1), box-shadow 200ms cubic-bezier(.22, .61, .36, 1), background-color 200ms;
  -webkit-tap-highlight-color: transparent;
}
.ah-wa-flotante svg { width: 32px; height: 32px; flex: 0 0 auto; margin: 0 12px; }
.ah-wa-flotante__etq {
  display: block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  padding-left: 0; transition: max-width 240ms cubic-bezier(.22, .61, .36, 1), opacity 160ms ease-out, padding-left 240ms cubic-bezier(.22, .61, .36, 1);
}
/* pulso de atención una sola vez: dos ciclos de 2 s tras 600 ms; el anillo no recibe clics */
.ah-wa-flotante::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
  animation: ah-wa-pulso 2s cubic-bezier(.22, .61, .36, 1) 600ms 2 both;
}
@keyframes ah-wa-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
  70%  { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.ah-wa-flotante:active { transform: translateY(0) scale(.97); }
.ah-wa-flotante:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(37, 211, 102, .9), 0 10px 26px rgba(37, 211, 102, .32); }
/* escritorio: 60 px, elevación al pasar y la etiqueta que se despliega a la izquierda */
@media (min-width: 1024px) {
  .ah-wa-flotante { height: 60px; min-width: 60px; right: 22px; bottom: 22px; }
  .ah-wa-flotante svg { width: 34px; height: 34px; margin: 0 13px; }
}
@media (hover: hover) and (min-width: 1024px) {
  .ah-wa-flotante:hover, .ah-wa-flotante:focus-visible {
    transform: translateY(-2px); background: var(--wa-verde-oscuro);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .18), 0 16px 36px rgba(37, 211, 102, .40);
  }
  .ah-wa-flotante:hover .ah-wa-flotante__etq, .ah-wa-flotante:focus-visible .ah-wa-flotante__etq {
    max-width: 10rem; opacity: 1; padding-left: 22px;
  }
}
/* con la barra fija de la ficha puesta (body.ahf-barra-on, ahnsa-ficha.css:623-625 hace lo mismo con el chat y el
   cookie) el botón sube lo que mide la barra, por transform (sin CLS); el hover suma sus 2 px. */
body.ahf-barra-on .ah-wa-flotante { transform: translateY(calc(-1 * var(--ahf-barra-h, 64px))); }
@media (hover: hover) and (min-width: 1024px) {
  body.ahf-barra-on .ah-wa-flotante:hover, body.ahf-barra-on .ah-wa-flotante:focus-visible { transform: translateY(calc(-1 * var(--ahf-barra-h, 64px) - 2px)); }
}
@media (prefers-reduced-motion: reduce) {
  .ah-wa-flotante, .ah-wa-flotante__etq { transition: none; }
  .ah-wa-flotante::before { animation: none; }
  .ah-wa-flotante:hover { transform: none; }
}

/* ── #12 · «Saltar al contenido» (P2/P3 de ANTES.md; WCAG 2.4.1) ────────────
   El nav canónico (cromo_v3/nav.html) trae <a class="hm-salto" href="#contenido">
   como primer foco de la página y enlaza_hims pone id="contenido" al <main>.
   Invisible hasta que recibe foco por teclado; entonces se pinta ENCIMA de la
   cabecera fija (z 703 > 701) arriba a la izquierda, sin mover el layout
   (position: fixed). Sin transición: el foco debe verse al instante.        */
.hm-salto {
  position: fixed; top: 8px; left: 8px; z-index: 703;
  padding: .75rem 1rem; border-radius: 999px;
  background: var(--hm-marino, #0A1E5E); color: #fff; font-weight: 600; text-decoration: none;
  transform: translateY(-200%); opacity: 0; pointer-events: none;
}
.hm-salto:focus, .hm-salto:focus-visible {
  transform: none; opacity: 1; pointer-events: auto;
  outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--hm-azul, #1878B9);
}
#contenido:focus { outline: none; }   /* el destino recibe foco programático al saltar; el anillo va en los controles */

/* ── #13 · MONITORES GRANDES · una sola banda (BASE de las dos escuelas) ─────
   Encargo B de Mario (5-sep 20:23): «que se vea igual de chingón en TODOS los
   monitores». Medido con mide_monitores.py a 1280/1440/1600/1920/2560/3440:
   el sitio tiene SIETE topes de ancho distintos y por debajo de 1440 no se
   distinguen porque todos chocan con el borde de la ventana:

     1728 px (108rem)  cabecera .hm-hdr-in, pie .hm-foot-in y .hm-section
     1480 px           hub /productos (.ahsumi.ahprodhub.hm-cat)
     1460 px           .ahnav.ahprod.ahf (envoltura de la ficha)
     1440 px           main.fam-main y /contacto
     1392 px (87rem)   el héroe de la home (--hm-max-hero)
     1266 px           .hm-foot-cols dentro del pie
     1200 px           .fam-wrap (la ficha)

   Efecto a 2560: el logo empieza en x=416 y el h1 del héroe en x=584 — 168 px
   de desalineación entre la cabecera y lo que hay debajo, constante e igual a
   (1728-1392)/2. En la ficha son 264 px. A 1440 no se ve; de 1728 en adelante
   se ven los siete escalones.

   Aquí se igualan SOLO las superficies que se leen como banda completa. Lo que
   es angosto A PROPÓSITO (el formulario de /cotizacion en 992, la prosa) no se
   toca: eso no es desalineación, es medida de lectura.
   `--hm-banda` la define cada escuela (#16A / #16B); sin ellas vale 108rem, que
   es lo que ya usan la cabecera y el pie.                                     */
@media (min-width: 1266px) {
  :root { --hm-banda: 108rem; }

  /* La banda tiene que mandar TAMBIEN sobre las superficies que hoy llevan el 1728 escrito a
     mano, o la escuela A las deja atras y se reabre la desalineacion por el otro lado: en el
     primer intento el contenido de la ficha crecio a 2,072 px mientras la cabecera se quedaba
     en 1,728, o sea 192 px de desfase — el mismo defecto, al reves. Se vio en la captura, no
     en la tabla: por eso se miran las capturas.
     `.hm-section` ya usa el token (`--hm-max`, hims:319) y es el UNICO que lo usa; las otras
     diez lo llevan literal. Con `--hm-banda: 108rem` esto es un no-op exacto para la escuela B
     y para el sitio de hoy: solo cambia algo donde la escuela A mueve la banda.
     `.hm-muro__fuente` NO entra aqui: es prosa y la gobierna el bloque #14. */
  :root { --hm-max: var(--hm-banda); }
  .hm-hdr-in, .hm-foot-in, .hm-section__cab, .hm-resenas-bento, .hm-muro,
  .hm-mk__quienes, .hm-mk__accion-mov, .hm-mk__tec, .hm-mv { max-width: var(--hm-banda); }

  /* home: el héroe se alinea con la cabecera; la COLUMNA de texto sigue siendo
     angosta (87rem) pero pegada al mismo borde izquierdo, no centrada dentro. */
  .hm-hero { max-width: var(--hm-banda); }
  .hm-hero__copy { max-width: min(var(--hm-banda), 87rem); margin-inline: 0; }

  /* hub /productos */
  .ahsumi.ahprodhub.hm-cat { max-width: var(--hm-banda); }

  /* ficha: `main.fam-main` y `.fam-wrap` mandan sobre la rejilla de 3 columnas.
     Medido en la ficha D1115202: la rejilla mide 1400 px a 1440, a 1920, a 2560
     Y a 3440 — el dibujo topa en 640 (clamp), el bloque de pedido es fijo de 330
     y la columna del CENTRO se queda en 374 px con celdas de 84/90 px, que es
     donde «Superaleaciones» se parte a la mitad. Todo píxel de más se iba al
     margen. Con la banda, el centro pasa a 702 px a 1920 sin tocar ahnsa-ficha.css. */
  /* `margin-inline: auto` NO es decoracion: `main.fam-main` era un envoltorio A SANGRE
     (2,560 px de ancho en una ventana de 2,560) y ponerle `max-width` sin centrarlo dejaba la
     pagina entera PEGADA A LA IZQUIERDA por encima de 1728 px, con la cabecera centrada encima.
     Medido en /medidas a 2560: cabecera en x=435 y el contenido en x=0. No se vio antes porque
     a 1440 el tope no llega a morder y porque esas plantillas no estaban en la muestra de seis.
     Lo cazo la muestra de 40 al exigir cobertura completa. */
  main.fam-main, .ahnav.ahprod.ahf, .fam-wrap {
    max-width: var(--hm-banda);
    margin-inline: auto;
  }
}

/* ── #14 · MONITORES GRANDES · tope de línea en la prosa ────────────────────
   ux-guidelines (Container Width / Line Length): 65-75 caracteres; el `ch` de
   verdad es el avance del '0' de la fuente, que es como lo mide
   mide_monitores.py. Medido ANTES (caracteres reales, no `px/(fs*0.5)`):

     213 ch  p.hm-muro__fuente   home, 13 px sobre 1,680 px de ancho
     189 ch  p.px-2.text-xs      /contacto, «PLAZAS ATENDIDAS: SALTILLO · …»
     170 ch  p                   /productos, «¿Buscas otra marca? …»
     144 ch  p.hm-cat__nota      /productos
     131 ch  p.hm-foot-copy      el pie, en TODAS las páginas

   El tope va en `ch`, así que sigue valiendo si cambia el cuerpo de letra (y en
   la escuela B, que sube la raíz, se ajusta solo). No se centra ni se descentra
   nada: se respeta el margen que cada bloque ya tenía.                        */
@media (min-width: 1266px) {
  main :is(p, li, dd, blockquote):not([class]),
  p.hm-muro__fuente, p.hm-cat__nota, p.hm-foot-copy, p.hm-foot-intro,
  .hm-cat__aviso p, .cot-lead, p.au-d, p.au-f, p.ahf-parrafo, .hm-wc__nojs,
  /* Los que aparecieron al medir la MUESTRA DE 40 PAGINAS y no las 6 del primer informe.
     Tercera vez que la misma leccion cobra: una lista de selectores sacada de seis paginas
     describe seis paginas. `p.mk2-nota` llevaba 211 caracteres reales en las fichas de marca
     —con `max-width: 1728px`, o sea la banda entera—, `figcaption.hm-mk__pie` 143 y
     `.cot-cta-d` 98. Desde ahora quien vigila que no vuelva a colarse otro es
     verifica_monitores.py, que mide el maximo del sitio contra un esperado. */
  p.mk2-nota, figcaption.hm-mk__pie, .cot-cta-d, p.ah-leyenda, p.mapa-d {
    max-width: min(100%, 72ch);
  }
  /* Tres que sobrevivieron a la primera pasada por ESPECIFICIDAD, medidos a 2560. Cada uno
     lleva aquí el mismo peso que la regla que le gana, y gana por orden (este bloque va al
     final de la hoja). Es la lección del espejo: no basta con escribir la regla, hay que
     volver a MEDIR que se aplicó.
       102 ch  .hm-cat__hero .hm-cat__lead  <- hims:3084 `max-width: 56rem` le pisa el
               `max-width: 62ch` que su propia regla (hims:2356) ya pedía. Aquí se repone
               ESE 62ch, que es el número que eligió la casa, no uno nuevo.
       292 ch  .prod-nota-ref               <- ahnsa-prod.css:725
       229 ch  .ahprodnav .sumi-banda-t     <- ahnsa-prod.css:460                          */
  .hm-cat__hero .hm-cat__lead { max-width: 62ch; }
  .ahprodnav .prod-nota-ref, .prod-nota-ref,
  .ahprodnav .sumi-banda-t { max-width: min(100%, 72ch); }
}

/* ── #15 · MONITORES GRANDES · lo que NO hace falta tocar (medido) ──────────
   Dos de los cuatro candidatos del encargo B se DESCARTAN con medida, y se deja
   escrito para que nadie los vuelva a proponer de oído:

   a) «alto del héroe por svh». El héroe de la home NO está atado a la ventana:
      mide 575 px a 1280, a 1920, a 2560 y a 3440. En porcentaje de pantalla eso
      es 71.8 % → 53.2 % → 39.9 % → 39.9 %, o sea que en el monitor grande ya
      deja ver lo que sigue, que es justo lo que se quiere. Atarlo a `svh` lo
      haría CRECER en la pantalla grande (62svh = 892 px a 1440 de alto) y
      empujaría el catálogo bajo el pliegue. El único héroe con `vh` es el de las
      familias (ahnsa-productos.css:154, `clamp(26rem, 62vh, 40rem)`) y ya está
      acotado por arriba.
   b) «letra base con clamp()» NO es neutral: la hoja está escrita en `rem`, así
      que subir la raíz mueve TAMBIÉN los topes, los huecos y la altura de la
      cabecera. Por eso no va aquí como arreglo suelto: es el corazón de la
      escuela B (#16B) y se mide con ella.

   Lo que sí queda por medir y no se toca sin decisión: el h1 del héroe mide
   57 px y 1,041 px de ancho a 1280 Y a 3440 — no crece nunca. Crecerlo es una
   decisión de marca (está en «Pendientes de decisión de Mario» de DESPUES.md).  */

/* ── #16B · ESCUELA B: centrado, con más aire y letra mayor ─────────────────
   La banda NO crece (queda clavada en 1,728 px, en píxeles para que no la
   arrastre la raíz) y lo que crece es la LETRA y, con ella, todo lo que la hoja
   mide en `rem`: huecos, paddings, altura de cabecera, radios. La página se ve
   como la de 1440 vista más de cerca, en vez de una página chica en medio de un
   monitor grande. 16 px hasta 1266 y 19 px a partir de ~1860.
   El `rem` dentro de un `font-size` de :root se resuelve contra el valor
   INICIAL (16 px), no contra sí mismo: por eso el clamp no se realimenta.
   Se sirve SOLA (overlay B). No convive con #16A.                            */
@media (min-width: 1266px) {
  :root { font-size: clamp(16px, 0.55rem + 0.55vw, 19px); }
  /* La banda se ATA en pixeles al 1728 de siempre. Sin esto, al subir la raiz a 19 px los
     108rem valen 2,052 y a 1920 la cabecera y el pie se van A SANGRE mientras el contenido de
     cada pagina sigue centrado en su propio tope: medido sobre 32 paginas, la desalineacion
     mediana a 1920 pasaba de 16 px a 162 y la peor a 549 — un empeoramiento, y justo en el
     ancho del monitor de Mario. Es lo contrario de lo que esta escuela promete: aqui NO se
     mueve el layout, solo crece la letra. `min()` porque por debajo de 1728 manda la ventana. */
  :root { --hm-banda: min(108rem, 1728px); }
  /* `--hm-banda` se queda en los 108rem del bloque #13 A PROPÓSITO: al subir la raíz, los
     108rem crecen con ella (2,052 px a 2560) igual que `.hm-section`, y todo sigue alineado.
     El primer intento la clavó en `1728px` y eso volvía a partir la página — el héroe en
     1,728 contra secciones de 2,052 — o sea que reintroducía justo el defecto que el bloque
     #13 existe para arreglar. Medido antes de quitarlo. */
}

/* ── #17 · REEL15 nº9 · el scroll suave tiene que respetar «reducir movimiento» ─
   DEFECTO, no adorno. `html { scroll-behavior: smooth; }` (ahnsa-theme.css:118) es GLOBAL y no
   tiene guarda. En la MISMA hoja sí la tienen los carruseles (theme.css:390-392) y las
   transiciones de página (theme.css:1049-1051): se quedó suelto justo el de la página entera.
   Para quien tiene «reducir movimiento» activado —vértigo, migraña, trastorno vestibular— cada
   clic en un ancla del índice de /terminos es un desplazamiento animado de miles de píxeles.
   Gana por orden: hims.css carga después de theme.css.                                       */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── #18 · REEL15 nº15 · barra de progreso de lectura, solo en documentos largos ─
   En la home no sirve: la barra de desplazamiento del navegador ya dice cuánto falta. Donde sí
   paga es en los documentos que se leen de arriba abajo — /terminos son 24 secciones — y ahí
   contesta «cuánto me falta» sin ocupar sitio.

   SIN JavaScript: animación ligada al scroll (`animation-timeline`), o sea fuera del hilo
   principal, y solo `transform`, así que no puede causar CLS. El navegador que no la soporte
   simplemente no la pinta — por eso va dentro de `@supports` y no hay ruta de respaldo con JS.

   El ALCANCE va por CLASE, no por adivinanza. La vista previa usaba
   `body:has(.fam-section):not(:has(.ahf-grid))` para que Mario lo viera sin tocar HTML, pero eso
   describe «documento largo» de rebote: la misma plantilla la usan /nosotros, /glosario y la
   FICHA de producto, que no se lee de corrido. Integrado, el gancho lo pone quien sabe qué
   página es: `gen_paginas_legales.py` (y `gen_privacidad.py`) escriben `class="ah-doc"` en el
   <body> de /terminos, /aviso-legal y /privacidad. Una clase que emite el generador no se puede
   equivocar de página; un selector que deduce, sí.                                            */
@supports (animation-timeline: scroll()) {
  body.ah-doc::after {
    content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 704;
    background: var(--hm-azul, #1878B9);
    transform: scaleX(0); transform-origin: 0 50%;
    animation: ah-progreso linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes ah-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
/* Quieta y escondida para quien pidió menos movimiento: una barra que corre sola es
   exactamente lo que esa preferencia pide no ver. */
@media (prefers-reduced-motion: reduce) {
  body.ah-doc::after { display: none; }
}

/* ── #19 · Prosa de la familia `app` (/contacto, /nosotros) ─────────────────
   Mario, 6-sep 13:27: SI. Esas dos paginas cargan hims pero NO tienen <main>, que es de donde
   cuelga todo el bloque #14, y no tienen generador (contacto.html es de mano). Por eso no se
   podian alcanzar antes y por eso el gancho es `#__next`, su envoltorio, que no existe en
   ninguna pagina de hims.
   Solo texto corrido SIN clases de utilidad: la franja «PLAZAS ATENDIDAS…» de /contacto se
   queda a lo ancho A PROPOSITO (Mario, misma tanda). Medida y coste: _entrega_diseno/APP_PROSA.md */
@media (min-width: 1266px) {
  #__next :is(p, li, dd, blockquote):not([class]) { max-width: min(100%, 72ch); }
}

/* ── #20 · La jerarquia de titulos de la home, al derecho (Mario 6-sep 13:27: SI) ────
   El h2 del bloque de operaciones medía 82 px y el h1 de la pagina 57: el segundo titulo mas
   importante era el MAS grande. Medido igual a 1440 y a 1920 (el h1 no esta en `rem`, asi que
   la escuela B no lo movio).
   El universo esta medido antes de tocar: `--hm-fs-xl` (40→82) tiene UN solo consumidor,
   `.hm-xl` (hims:169), y `.hm-xl` se usa en UNA sola pagina —index.html— en UN solo <h2>. Por
   eso se puede igualar sin barrer el arbol: no hay segunda victima.
   «Igualar» es la palabra de Mario, asi que el h2 toma el tamano del h1 (`--hm-fs-d-l`, 32→57)
   y deja de invertir la jerarquia. Si mas adelante se quiere el escalon completo (h2 un paso
   POR DEBAJO del h1, que es lo que pedia la nota original de la auditoria), es cambiar este
   token por uno menor: ya no hay que buscar quien mas lo usa.                              */
.hm-xl { font-size: var(--hm-fs-d-l); }
/* ===== DISENO v86 — FIN ===== */

/* ===== #21 h1 ROTATIVO (Mario 6-sep 22:31) — se suma a la v90, sin bump propio =====
   El SEGUNDO renglon del h1 rota entre SEIS frases (v91: la sexta es «A mayoreo hay descuentos · ¡Cotiza!»). El primero no se toca: es el LCP.
   Tres cosas que no son cosmeticas y por eso van escritas:
   1) Las frases se APILAN en la misma celda de grid, asi que la caja mide siempre lo que
      la frase mas alta y el bloque NO empuja nada al cambiar: layout shift 0. Animar la
      altura habria metido CLS en el elemento que mas pesa en la primera pantalla.
   2) Solo se animan `opacity` y `transform` — las dos propiedades que el compositor
      resuelve sin recalcular layout. Es la misma regla que la casa aplico al titular
      en la v77 y a las tarjetas del B6 en la v45.
   3) El ciclo esta repartido entre SEIS (24 s): cada frase entra, se queda ~14 % del ciclo y
      sale. Si cambia el numero de frases hay que cambiar los porcentajes de aqui Y
      `FRASES_H1` en gen_home.py — que ABORTA si no coinciden, para que no se quede una
      frase sin turno o dos encimadas.                                                  */
.hm-h1rot { display: grid; }
.hm-h1rot__i {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(.35em);
  animation: hm-h1rot 24s cubic-bezier(.22,.61,.36,1) infinite;
  animation-delay: calc(var(--i) * 4s);
  will-change: opacity, transform;
}
@keyframes hm-h1rot {
  0%   { opacity: 0; transform: translateY(.35em); }
  1.7% { opacity: 1; transform: none; }
  15%  { opacity: 1; transform: none; }
  16.7% { opacity: 0; transform: translateY(-.3em); }
  100% { opacity: 0; transform: translateY(-.3em); }
}
/* Sin movimiento: se queda la PRIMERA frase, fija y legible. No es «apagar la
   animacion» (eso dejaria las cinco superpuestas a opacidad 0 y el renglon vacio). */
@media (prefers-reduced-motion: reduce) {
  .hm-h1rot__i { animation: none; opacity: 0; transform: none; }
  .hm-h1rot__i:first-child { opacity: 1; }
}
/* El renglon que lee el lector de pantalla: uno solo, no los cinco. */
.hm-solo-lector {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* ===== #21 — FIN ===== */

/* ── Buscador de producto por marca (v90, 7-sep, ux-movil; Mario 22:26) ─────
   Ocupa el hueco del widget de condiciones de corte en la home. Reusa la caja
   `.hm-wc` (foto + panel) a proposito: el layout ya esta medido y probado, y lo
   que cambia es el CONTENIDO del panel, no la composicion.
   Cada linea es un enlace de verdad al listado filtrado — sin JavaScript sigue
   sirviendo— con 44 px de alto porque se toca con el dedo.
   NO sube el ?v=: el MAESTRO ya subio V_CSS a 90 en este ciclo y dos bumps sin
   regenerar dejan verifica_frescura en rojo. */
.hm-bq-fams { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
.hm-bq-f { display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; min-height: 44px; padding: .5rem .875rem;
  border: 1px solid var(--hm-hairline); border-radius: var(--hm-r-card);
  background: var(--hm-blanco); color: var(--hm-tinta); text-decoration: none;
  transition: background-color 200ms linear, border-color 200ms linear; }
@media (hover: hover) { .hm-bq-f:hover { background: var(--hm-hover-claro);
  border-color: var(--hm-azul); } }
.hm-bq-f__t { font-size: var(--hm-fs-14-16); font-weight: 600; }
.hm-bq-f__n { font-size: var(--hm-fs-caption); color: var(--hm-tinta-3);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-bq-pie { margin: .875rem 0 0; font-size: var(--hm-fs-caption);
  color: var(--hm-tinta-3); }
.hm-bq-pie a { color: var(--hm-azul); }