@import url("iron-tokens.css?v=iron-cat-tokens-20260802-1");

/* ============================================================
   iron.cat — DESIGN SYSTEM INVENTORY (Lote 11, cierre)
   Inventario de referencia del DS centralizado. Solo documenta lo
   que ya existe abajo; NO redefine nada ni cambia el render.

   --- TOKENS (fuente: iron-tokens.css) ----------------------------
   Primitivos color:    --ic-color-{cream,sage,mustard,coral,petrol,
                          charcoal,divider,white,black}
                          · paleta de marca base (hex crudo, única fuente).
   Color canal RGB:     --ic-{petrol,cream,sage,mustard,coral}-rgb
                          · forma "R G B" para alpha: rgb(var(--ic-petrol-rgb) / .14).
   Rampa acento/hover:  --ic-color-petrol-{700,900,950,ink},
                          --ic-color-coral-{700,800}, --ic-color-mustard-{600,700}
                          · sombras/hover promovidos desde hex inline.
   Semánticos:          --ic-bg-{page,page-alt,brand,glass},
                          --ic-surface-{default,raised,muted},
                          --ic-text-{primary,body,muted,inverse},
                          --ic-border-{soft,default,strong},
                          --ic-action-primary[-hover], --ic-focus-ring
                          · resuelven a primitivos; usar ESTOS en componentes.
   Tipografía:          --ic-font-{display,body},
                          --ic-type-{display-1,h1,h2,h3,body-lg,body,
                          body-sm,caption}-{size,line}
   Espaciado/forma:     --ic-space-{0..32}, --ic-radius-{xs,sm,md,lg,xl,
                          2xl,pill}, --ic-shadow-{soft,card,card-lg,card-md,
                          floating,coral}
   Movimiento:          --ic-duration-{fast,base,slow}, --ic-ease-{standard,soft}
   Layout:              --ic-container-{max,wide}, --ic-container-padding-x,
                          --ic-section-padding-{x,y}
   Alias compat:        --c-*, --ink, --cream, --white, --terracotta, etc.
                          · puentes legacy → tokens; no introducir nuevos.

   --- COMPONENTES (.ds-* y clases base, def. en bloque DS abajo) --
   .ds-container        · wrapper centrado min(100%, --ic-container-wide);
                          absorbe los 7 `-inner`. Uso: <div class="x-inner ds-container">.
   .ds-card             · chrome base de tarjeta (border+radius-xl+surface+shadow).
     .ds-card--feature  · media card (radius-2xl + shadow-lg, how-feature).
   .eyebrow             · kicker uppercase 700/tracking; color vía --eyebrow-color.
     .eyebrow--marker   · variante flex con marcador inline (.ds-eyebrow-bar / .ds-eyebrow-dot).
   .icon-circle         · chip redondo place-items:center; tamaño vía --icon-size.
   .ds-stroke-icon svg  · reset de line-icon (fill:none; stroke:currentColor; caps/joins round).
   .ds-marker-underline · trazo "rotulador" mustard; draw-in vía --marker-draw
                          (0→1 lo dispara .reveal.in-view). Ajustes: --marker-{w,tilt,angle}.
   .ds-dot-ring         · arco punteado coral 3/4; --ring-{size,tilt,opacity}.
   .button-petrol       · contrato color (relleno petrol + cream + shadow-floating + hover-700).
   (canónico: usar la clase DS junto a la clase de sección anclada por tests,
    p.ej. class="concern-card ds-card"; la sección solo guarda overrides locales.)
   ============================================================ */

:root {
  /* Compatibility aliases for existing homepage sections. Canonical `--ic-*`
     values live exclusively in iron-tokens.css. */
  --c-mustard: var(--ic-color-mustard);
  --c-petrol: var(--ic-color-petrol);
  --c-sage: var(--ic-color-sage);
  --c-warm-cream: var(--ic-color-cream);
  --c-terracotta: var(--ic-color-coral);
  --c-light-text: var(--ic-color-cream);
  --ink: var(--ic-text-primary);
  --cream: var(--ic-bg-page);
  --cream-soft: var(--ic-bg-page-alt);
  --white: var(--ic-text-inverse);
  --muted: var(--ic-color-sage);
  --stone: var(--ic-color-divider);
  --consult: var(--ic-color-petrol);
  --amber: var(--ic-color-mustard);
  --terracotta: var(--ic-action-primary);
  --alert: var(--ic-action-primary);
  --radius: var(--ic-radius-sm);
  --nav-h: 56px;
  --ease-out-expo: var(--ic-ease-soft);
  --ease-emphasized: var(--ic-ease-standard);
}

/* ============================================================
   DS COMPONENTS — reusable base classes (Lote 2)
   Defined but NOT YET applied in the HTML: render must stay
   byte-identical until each section is migrated (Lotes 3-4-5).
   Every value replicates EXACTLY what the section rules use
   today; sections will later keep only their local overrides
   (layout/size/local color) and add the DS class beside their
   existing (test-anchored) class, e.g. class="concern-card ds-card".
   ============================================================ */

/* Container — absorbs the 7 `-inner` wrappers.
   Width per section via local --ic-container-wide override (Lote 5);
   default falls back to the global token. Matches the shared
   `position:relative; width:min(100%, Npx); margin:0 auto` pattern. */
.ds-container {
  position: relative;
  margin-inline: auto;
  width: min(100%, var(--ic-container-wide));
}

/* Card — shared chrome behind concern-card / signal-card /
   how-feature-card / no-conflict-side. Defaults use the semantic tokens; each section
   keeps its bespoke background/border/shadow override where it
   differs (the DS class only carries the common contract). */
.ds-card {
  border: 1px solid var(--ic-border-default);
  border-radius: var(--ic-radius-xl);
  background: var(--ic-surface-default);
  box-shadow: var(--ic-shadow-card);
}

/* Feature: media card chrome (how-feature-card feel). */
.ds-card--feature {
  border-radius: var(--ic-radius-2xl);
  box-shadow: var(--ic-shadow-card-lg);
}

/* Eyebrow — uppercase kicker shared by section-eyebrow and the
   editorial eyebrows. Color comes from a local --eyebrow-color
   (petrol by default, mustard for no-conflict). Replicates the
   common uppercase + weight 700 + tracking + tight line-height. */
.eyebrow {
  margin: 0 0 20px;
  color: var(--eyebrow-color, var(--ic-color-petrol));
  font-family: var(--ic-font-body);
  font-size: clamp(0.74rem, 0.9vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.34em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Marker variant — eyebrow with a decorative dash/dot marker laid
   out inline (criteria / founding pattern). */
.eyebrow--marker {
  display: flex;
  align-items: center;
  gap: 14px;
  letter-spacing: 0.22em;
  line-height: 1;
}

/* The decorative bar marker (span). */
.eyebrow--marker .ds-eyebrow-bar {
  width: 64px;
  height: 2px;
  border-radius: var(--ic-radius-pill);
  background: currentColor;
}

/* The decorative dot marker (i). */
.eyebrow--marker .ds-eyebrow-dot {
  display: block;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: var(--ic-radius-pill);
  background: currentColor;
}

/* Icon circle — centered round chip behind concern-icon /
   signal-icon / how-step-icon / how-step-number. Size via
   --icon-size, background/color local. */
.icon-circle {
  display: grid;
  place-items: center;
  width: var(--icon-size, 72px);
  height: var(--icon-size, 72px);
  border-radius: var(--ic-radius-pill);
}

/* Line icon — canonical stroked icon chip. It takes the lighter outlined
   language from the how-funnel icons and adds the mustard dot as the brand cue. */
.ds-line-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--ds-line-icon-size, var(--icon-size, 46px));
  aspect-ratio: 1;
  border: var(--ds-line-icon-border-width, 1px) solid var(--ds-line-icon-border-color, rgb(var(--ic-petrol-rgb) / var(--ds-line-icon-border-alpha, 0.32)));
  border-radius: var(--ic-radius-pill);
  background: var(--ds-line-icon-bg, rgb(var(--ic-cream-rgb) / 0.6));
  color: var(--ds-line-icon-color, var(--ic-color-petrol));
}

.ds-line-icon svg {
  width: var(--ds-line-icon-svg-size, 55%);
  height: var(--ds-line-icon-svg-size, 55%);
  stroke-width: var(--ds-line-icon-stroke, 1.7);
  vector-effect: non-scaling-stroke;
}

.ds-line-icon--dot::after {
  content: "";
  position: absolute;
  right: var(--ds-line-icon-dot-right, 7%);
  bottom: var(--ds-line-icon-dot-bottom, 8%);
  width: var(--ds-line-icon-dot-size, 9px);
  height: var(--ds-line-icon-dot-size, 9px);
  border-radius: var(--ic-radius-pill);
  background: var(--ic-color-mustard);
  box-shadow: 0 0 0 var(--ds-line-icon-dot-halo, 3px) rgb(var(--ic-cream-rgb) / 0.78);
}

/* Stroke-icon reset — centralizes the line-icon SVG contract
   repeated ~11× (fill:none; stroke:currentColor; round caps/joins).
   stroke-width / size stay local to each icon. */
.ds-stroke-icon svg,
.hero-proof-icon svg,
.concern-arrow svg,
.how-overview-actions svg,
.signal-icon svg,
.signal-plant,
.criteria-banner-leaf svg,
.criteria-banner-arrow svg,
.founding-ribbon.receipt-stamp svg,
.receipt-coupon-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Marker underline — the hand-drawn "rotulador" stroke under
   editorial headings (criteria-underline).
   Width via --marker-w, tilt via --marker-tilt,
   stripe angle via --marker-angle; default values match the existing
   strokes (8px tall, pill radius, mustard fill + stripe). */
.ds-marker-underline {
  display: block;
  width: var(--marker-w, min(320px, 54%));
  height: 8px;
  border-radius: var(--ic-radius-pill);
  background:
    linear-gradient(90deg, transparent, var(--ic-color-mustard) 12%, var(--ic-color-mustard) 88%, transparent),
    repeating-linear-gradient(
      var(--marker-angle, 175deg),
      transparent 0 7px,
      rgba(var(--ic-mustard-rgb) / var(--marker-stripe-alpha, 0.55)) 8px 10px,
      transparent 11px 16px
    );
  /* 8: draw-in. --marker-draw va de 0 (oculto) a 1 (trazado); por defecto 1 para
     que cualquier marcador fuera de un .reveal quede dibujado. El draw-in real lo
     dispara el .reveal.in-view (IntersectionObserver) de la seccion editorial. */
  transform-origin: left center;
  transform: scaleX(var(--marker-draw, 1)) rotate(var(--marker-tilt, -1deg));
  transition: transform 520ms var(--ic-ease-soft);
}

/* 8: estado inicial (seccion aun no revelada) y trazado al entrar.
   Especificidad (0,2,0) > la del marcador por seccion (0,1,0), asi que estas
   reglas ganan al transform local que cada marcador definia. */
.reveal:not(.in-view) .ds-marker-underline {
  --marker-draw: 0;
}

.reveal.in-view .ds-marker-underline {
  --marker-draw: 1;
}

/* Dot ring — dotted coral 3/4-arc decoration (criteria-eva-ring).
   Size via --ring-size, tilt via --ring-tilt,
   opacity via --ring-opacity; positioned by the section locally. */
.ds-dot-ring {
  position: absolute;
  width: var(--ring-size, 220px);
  height: var(--ring-size, 220px);
  border: 4px dotted var(--ic-color-coral);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: var(--ring-opacity, 0.86);
  transform: rotate(var(--ring-tilt, -24deg));
  pointer-events: none;
}

/* Petrol button variant — the color contract of .concern-cta.
   Layout/size (min-height, padding, font) stay on the section class;
   this carries only the petrol fill + cream text + floating shadow
   and the petrol-700 hover. Pairs with the base .button. */
.button-petrol {
  border-color: var(--ic-color-petrol);
  background: var(--ic-color-petrol);
  color: var(--ic-color-cream);
  box-shadow: var(--ic-shadow-floating);
}

.button-petrol:hover,
.button-petrol:focus-visible {
  border-color: var(--ic-color-petrol-700);
  background: var(--ic-color-petrol-700);
  color: var(--ic-color-cream);
  box-shadow: var(--ic-shadow-floating), var(--ic-focus-ring);
}

/* ===================== end DS COMPONENTS ===================== */

* {
  box-sizing: border-box;
}

/* 7: blindaje de overflow horizontal. `clip` (no `hidden`) para no crear un
   scroll-container que rompa los `position:sticky` de la hero. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--ic-font-body);
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.menu-open {
  overflow: hidden;
}

@supports (content-visibility: auto) {
  .signals-section,
  .founding-offer-section,
  .faq,
  .final-cta,
  .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }

  .faq { contain-intrinsic-size: auto 780px; }
  .site-footer { contain-intrinsic-size: auto 520px; }
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  display: block;
  width: 100%;
}

#top,
#how,
#problems,
#eva,
#pricing,
#faq {
  scroll-margin-top: 96px;
}

.display {
  margin: 0;
  font-family: var(--ic-font-display);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid currentColor;
  border-radius: var(--ic-radius-pill);
  font-family: var(--ic-font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color 260ms var(--ease-emphasized),
    border-color 260ms var(--ease-emphasized),
    color 260ms var(--ease-emphasized),
    box-shadow 260ms var(--ease-emphasized),
    transform 220ms var(--ease-out-expo);
}

.button span {
  font-size: 0.95em;
}

.button-primary {
  background: var(--ic-action-button);
  color: var(--ic-action-button-ink);
  border-color: var(--ic-action-button);
  box-shadow: var(--ic-shadow-coral);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--ic-action-button-hover);
  border-color: var(--ic-action-button-hover);
  color: var(--ic-action-button-ink);
  box-shadow: var(--ic-shadow-coral);
}

.button-secondary {
  background: rgba(var(--ic-cream-rgb) / 0.12);
  color: inherit;
  border-color: rgba(var(--ic-cream-rgb) / 0.62);
  box-shadow: inset 0 0 0 1px rgba(var(--ic-cream-rgb) / 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: rgba(var(--ic-cream-rgb) / 0.18);
  border-color: rgba(var(--ic-cream-rgb) / 0.88);
}

.button-on-dark {
  color: var(--white);
}

.button-nav,
.button-outline {
  background: var(--terracotta);
  color: var(--ic-action-button-ink);
  border-color: var(--terracotta);
  /* 11.A: magnetic hover. Las vars las fija el JS (gate hover+fine, !reduced-motion);
     por defecto translate(0,0) = sin efecto (tactil/sin JS). */
  transform: translate(var(--magnet-x, 0), var(--magnet-y, 0));
}

.button-nav {
  min-height: 48px;
  padding-inline: 26px 18px;
  box-shadow: inset 0 0 0 1px rgb(var(--ic-cream-dim-rgb) / 0.24);
}

.button-arrow {
  overflow: hidden;
  transition:
    background-color 350ms ease,
    border-color 350ms ease,
    color 350ms ease;
}

.button-arrow span {
  display: inline-block;
  transition: transform 350ms var(--ease-emphasized);
}

.button-arrow:hover,
.button-arrow:focus-visible {
  background: var(--ic-action-button-hover);
  border-color: var(--ic-action-button-hover);
  color: var(--ic-action-button-ink);
}

/* el secundario de cristal NO se rellena de coral en hover (preserva jerarquia) */
.button-secondary.button-arrow:hover,
.button-secondary.button-arrow:focus-visible {
  background: rgba(var(--ic-cream-rgb) / 0.18);
  border-color: rgba(var(--ic-cream-rgb) / 0.88);
  color: inherit;
}

/* 8: nudge del span tras gate hover; focus-visible (teclado) aparte y sin gate.
   El test desktop-only "animates the footer arrow actions" hace .hover() en un
   proyecto con hover:hover -> el transform sigue aplicando. */
@media (hover: hover) {
  .button-arrow:hover span {
    transform: translate(3px, -3px);
  }}

.button-arrow:focus-visible span {
  transform: translate(3px, -3px);
}

/* 3.E: focus-visible global accesible. */
.button:focus-visible,
.nav-links a:focus-visible,
.brand:focus-visible,
.menu-toggle:focus-visible,
.footer-links a:focus-visible,
.footer-mail:focus-visible,
.footer-top-link:focus-visible,
.faq-item summary:focus-visible,
.faq-a .faq-sources a:focus-visible {
  outline: 2px solid var(--consult);
  outline-offset: 2px;
  border-radius: var(--ic-radius-xs);
}

/* skip-link: oculto hasta recibir foco con teclado (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--ic-radius-sm);
  background: var(--ic-color-petrol);
  color: var(--ic-color-cream);
  font-weight: 600;
  text-decoration: none;
  transition: top 160ms var(--ic-ease-soft);
}
.skip-link:focus-visible { top: 12px; outline: 2px solid var(--ic-color-mustard); outline-offset: 2px; }

/* grupo derecho del nav: agrupa selector de idioma + CTA en una sola celda del
   grid (.nav-shell es auto 1fr auto); sin esto el CTA pasa a una 2ª fila. */
.nav-end {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  justify-self: end;
}

/* selector de idioma (ES|CA): hereda color para funcionar en header claro y oscuro */
.lang-switch { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 600; }
.lang-switch__opt {
  position: relative;
  color: inherit;
  text-decoration: none;
  opacity: 0.62;
  padding: 4px 3px;
  border-radius: var(--ic-radius-xs);
  transition: opacity 160ms var(--ic-ease-soft);
}

/* ES y CA miden 28×36 y 31×36 reales: por debajo de los 44×44 que pide un
   objetivo táctil, y en la cabecera están pegados el uno al otro. Se amplía el
   ÁREA DE PULSACIÓN con una capa transparente centrada, sin tocar la caja: así
   la tipografía y el subrayado mostaza del idioma activo no se mueven ni un
   píxel y la barra no crece.

   El ancho se capa a 36 px y no a 44: los centros de ES y CA están a 37,9 px
   (medido), así que con 40 se solapaban 2,1 px — un objetivo generoso que te
   lleva al idioma equivocado es peor que uno pequeño. Con 36 quedan 1,9 px de
   holgura. La altura sí llega a 44, que es el eje que de verdad fallaba: 36. */
.lang-switch__opt::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 36px);
  height: 44px;
  transform: translate(-50%, -50%);
}
.lang-switch__opt.is-active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ic-color-mustard);
}
.lang-switch__opt:hover { opacity: 1; }
.lang-switch__opt:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.lang-switch__sep { opacity: 0.4; }

/* Contextos oscuros (hero, steps, footer): outline claro. */
.hero :focus-visible,
.site-footer :focus-visible{
  outline-color: var(--white);
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 26px;
  left: 0;
  width: 100%;
  padding: 0 7.2vw;
  color: var(--ink);
  pointer-events: none;
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 320ms ease,
    opacity 520ms var(--ease-emphasized);
}

/* En "cómo funciona" (sección pinneada a pantalla completa) el menú se difumina
   con suavidad: se aparta de la coreografía sin un corte brusco, y reaparece al
   salir de la sección. Fade largo + leve lift para que sea sutil, pero sigue
   disponible: no desactivamos navegación durante la parte más larga de scroll. */
.site-header.is-hushed {
  opacity: 0.46;
  transform: translateY(-8px);
}

.site-header.is-hushed .nav-shell {
  pointer-events: auto;
}

.site-header.is-hushed:hover,
.site-header.is-hushed:focus-within,
body.menu-open .site-header {
  opacity: 1;
  transform: translateY(0);
}

.nav-shell {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 1080px;
  min-height: 66px;
  margin: 0 auto;
  padding: 8px 10px 8px 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(26px, 4vw, 54px);
  /* en la hero: integrado, sin pastilla (la cápsula ::before está oculta) */
  color: var(--ink);
  transition: color 420ms var(--ease-emphasized);
  pointer-events: auto;
}

/* Cápsula flotante: oculta dentro de la hero; al salir de la hero (.is-floating)
   materializa la pastilla con fundido + escala muy suaves, SIN mover el logo ni
   los enlaces (por eso va en ::before y no en el propio shell). Vira a oscuro
   con .is-dark según la sección que tiene detrás. */
.nav-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--ic-radius-pill);
  /* CONTRASTE: sobre contenido CLARO la pastilla flota en OSCURO (petrol) para
     destacar; sobre contenido oscuro (.is-dark) se invierte a CLARA (más abajo). */
  background: rgba(var(--ic-petrol-rgb) / 0.92);
  border: 1px solid rgba(var(--ic-cream-rgb) / 0.16);
  box-shadow:
    0 18px 44px rgba(var(--ic-petrol-950-rgb) / 0.3),
    0 4px 12px rgba(var(--ic-petrol-950-rgb) / 0.16);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  opacity: 0;
  transform: scale(0.97);
  transform-origin: center top;
  pointer-events: none;
  transition:
    opacity 460ms var(--ease-emphasized),
    transform 560ms var(--ease-emphasized),
    background-color 400ms var(--ease-emphasized),
    border-color 400ms var(--ease-emphasized),
    box-shadow 460ms var(--ease-emphasized);
}

.site-header.is-floating .nav-shell::before {
  opacity: 1;
  transform: scale(1);
}

/* sobre contenido CLARO (pastilla oscura): texto e iconos en claro */
.site-header.is-floating:not(.is-dark) .nav-shell {
  color: var(--ic-text-inverse);
}

/* sobre contenido OSCURO (.is-dark): la pastilla se invierte a CLARA; el texto
   vuelve a oscuro (--ink por defecto), contraste inverso. */
.site-header.is-dark .nav-shell::before {
  background: rgba(255, 254, 251, 0.94);
  border-color: rgba(var(--ic-petrol-rgb) / 0.1);
  box-shadow:
    0 18px 44px rgba(var(--ic-petrol-950-rgb) / 0.24),
    0 4px 12px rgba(var(--ic-petrol-950-rgb) / 0.14);
}

.brand {
  display: grid;
  place-items: center start;
  width: 160px;
  height: 44px;
  justify-self: start;
  font-weight: 700;
  font-size: 1.65rem;
}

.brand-logo {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  transition:
    opacity 300ms var(--ease-emphasized),
    filter 300ms var(--ease-emphasized);
}

.site-header .brand-logo--light {
  opacity: 0;
}

.site-header .brand-logo--dark {
  opacity: 1;
}

.site-header.is-floating:not(.is-dark) .brand-logo--light {
  opacity: 1;
}

.site-header.is-floating:not(.is-dark) .brand-logo--dark {
  opacity: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 38px);
  justify-content: center;
  font-family: var(--ic-font-display);
  font-size: 1.01rem;
  font-weight: 500;
}

.nav-menu-cta {
  display: none;
}

.nav-links a {
  position: relative;
  opacity: 0.94;
  /* 11.A: magnetic hover. El translate del enlace NO afecta al underline ::after
     (pseudo-elemento aparte) ni al wordmark (.brand, otro elemento). */
  transform: translate(var(--magnet-x, 0), var(--magnet-y, 0));
  transition: transform 220ms var(--ease-out-expo);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-emphasized);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a.is-current::after {
  transform: scaleX(1);
}

/* sección activa (scroll-spy): más marcada que el hover — texto y subrayado
   en rojo de marca (coral), más grueso y opacidad plena, para que se vea claro
   por dónde vas al hacer scroll (funciona sobre header claro y oscuro) */
.nav-links a.is-current {
  opacity: 1;
  font-weight: 600;
  color: var(--ic-color-coral);
}
.nav-links a.is-current::after {
  height: 3px;
  bottom: -5px;
  background: var(--ic-color-coral);
}

.site-header .button {
  justify-self: end;
}

.site-header.is-scrolled .button-nav,
.site-header.is-scrolled .button-outline {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--white);
}

.site-header.is-dark .button-nav,
.site-header.is-dark .button-outline {
  background: var(--ic-color-coral);
  border-color: var(--ic-color-coral);
  color: var(--ic-text-inverse);
}

.site-header.is-hero-hidden {
  transform: translateY(-132px);
}

.menu-toggle {
  display: none;
  /* 7: tap target >=44px (era 42px). */
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: var(--ic-radius-pill);
  background: transparent;
  color: inherit;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.menu-toggle span {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: var(--ic-radius-pill);
}

.hero {
  --hero-progress: 0;
  --hero-content-shift: 0px;
  --hero-copy-shift: 0px;
  --hero-media-shift: 0px;
  --hero-media-scale: 1;
  --hero-exit-cover-opacity: 0;
  --hero-title-opacity: 1;
  position: relative;
  z-index: 2;
  min-height: 132svh;
  overflow: clip;
  color: var(--white);
  background: transparent;
}

.hero-media-stage {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  overflow: hidden;
  pointer-events: none;
  background: var(--cream);
}

.hero-media-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(var(--ic-sage-rgb) / 0.34), transparent 52%),
    linear-gradient(180deg, rgba(var(--ic-cream-rgb) / 0) 0%, rgba(var(--ic-cream-rgb) / 0.42) 48%, var(--ic-bg-page) 100%);
  opacity: var(--hero-exit-cover-opacity);
  pointer-events: none;
  will-change: opacity;
}

.hero-media,
.hero-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media {
  z-index: 1;
  width: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 62% center;
  transform:
    translateY(var(--hero-media-shift))
    scale(var(--hero-media-scale));
  transform-origin: center;
  will-change: transform;
}

.hero-scrim {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(var(--ic-petrol-rgb) / 0.86), rgba(var(--ic-petrol-rgb) / 0.42) 39%, rgba(var(--ic-petrol-rgb) / 0.08) 70%),
    linear-gradient(180deg, rgba(var(--ic-petrol-rgb) / 0.26), rgba(var(--ic-petrol-rgb) / 0.04) 48%, rgba(var(--ic-petrol-rgb) / 0.22)),
    /* capa inferior: protege la fila .hero-proof, que cae sobre la mesa clara */
    linear-gradient(0deg, rgba(var(--ic-petrol-rgb) / 0.42), transparent 28%);
}

.hero-content {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 100svh;
  margin-top: -100svh;
  padding: 146px var(--ic-section-padding-x) 46px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  transform: translateY(var(--hero-content-shift));
  will-change: transform;
}

.hero-eyebrow {
  /* overrides sobre el contrato .eyebrow (co-aplicado en el markup) */
  --eyebrow-color: var(--amber);
  font-size: clamp(0.72rem, 0.9vw, 0.92rem);
  letter-spacing: 0.3em;
}

.hero-title {
  max-width: 660px;
  font-size: clamp(3.9rem, 5.85vw, 6.05rem);
  line-height: 0.94;
  color: var(--white);
  opacity: var(--hero-title-opacity, 1);
  text-shadow: 0 2px 18px rgba(var(--ic-petrol-rgb) / 0.22);
  transition: opacity 120ms linear;
}

.hero-title span {
  color: var(--amber);
}

.hero-subtitle {
  margin: 20px 0 18px;
  max-width: 640px;
  color: rgb(var(--ic-cream-dim-rgb) / 0.92);
  font-size: clamp(1.45rem, 2.25vw, 2rem);
  line-height: 1.28;
  font-weight: 400;
  text-shadow: 0 1px 12px rgba(var(--ic-petrol-rgb) / 0.2);
}

.hero-rule {
  width: min(410px, 42vw);
  height: 1px;
  margin: 0 0 22px;
  background: rgb(var(--ic-cream-dim-rgb) / 0.42);
}

.hero-copy {
  margin: 0 0 28px;
  max-width: 550px;
  color: rgb(var(--ic-cream-dim-rgb) / 0.95);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.55;
  font-weight: 400;
  text-wrap: pretty;
  text-shadow: 0 1px 12px rgba(var(--ic-petrol-rgb) / 0.26);
}

.hero-copy,
.hero-actions,
.hero-proof-grid,
.hero-subtitle,
.hero-rule,
.hero-eyebrow {
  opacity: var(--hero-copy-opacity, 1);
  transform: translateY(var(--hero-copy-shift));
  transition:
    opacity 140ms linear,
    transform 140ms linear;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
}

.hero-actions .button {
  min-height: 60px;
  min-width: 252px;
  padding-inline: 28px 22px;
  justify-content: space-between;
  font-family: var(--ic-font-display);
  font-size: 1rem;
  font-weight: 600;
}

.hero-actions .button-secondary {
  min-width: 242px;
  border-color: rgb(var(--ic-cream-dim-rgb) / 0.64);
  background: rgb(var(--ic-cream-dim-rgb) / 0.04);
}

.hero-proof-grid {
  width: min(710px, 48vw);
  margin-top: clamp(22px, 3.8svh, 38px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.hero-proof {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 15px;
  align-items: start;
  min-width: 0;
}

.hero-proof + .hero-proof {
  padding-left: 22px;
  border-left: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.28);
}

.hero-proof p {
  margin: 0;
  color: rgb(var(--ic-cream-dim-rgb) / 0.9);
  font-size: 0.88rem;
  line-height: 1.35;
}

.hero-proof strong {
  color: var(--white);
}

.hero-proof-icon {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 42px;
  color: rgb(var(--ic-cream-dim-rgb) / 0.72);
}

.hero-proof-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
}

.hero-proof-icon::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: 2px;
  width: 12px;
  height: 12px;
  border-radius: var(--ic-radius-pill);
  background: var(--amber);
  box-shadow: 0 0 0 2px rgba(var(--ic-petrol-rgb) / 0.42);
}

@media (max-width: 1320px) and (min-width: 701px) {
  .hero-proof-grid {
    width: min(620px, 62vw);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
  }

  .hero-proof,
  .hero-proof + .hero-proof {
    padding-left: 0;
    border-left: 0;
  }

  .hero-proof:nth-child(even) {
    padding-left: 22px;
    border-left: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.26);
  }

  .hero-proof p {
    font-size: 0.84rem;
    line-height: 1.32;
  }
}

.concern-finder {
  position: relative;
  z-index: 1;
  overflow: clip;
  /* Seccion normal tras .criteria: ya NO underlapa el hero (ese rol paso a
     .criteria). Sin margen negativo ni 100svh en el padding. */
  background: var(--ic-bg-page);
  color: var(--ic-text-primary);
  padding: var(--ic-section-padding-y) var(--ic-container-padding-x);
}

.concern-finder::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: clamp(300px, 38vw, 540px);
  background:
    linear-gradient(180deg, rgba(var(--ic-sage-rgb) / 0.16), rgba(var(--ic-cream-rgb) / 0) 72%);
  pointer-events: none;
}

.concern-inner {
  z-index: 1;
}

.concern-header {
  max-width: 860px;
  margin: 0 auto clamp(26px, 3.4vw, 42px);
  text-align: center;
}

.concern-title {
  color: var(--ic-text-primary);
  font-size: var(--ic-type-h2-size);
  font-weight: 500;
  line-height: var(--ic-type-h2-line);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.concern-title span {
  color: rgba(var(--ic-petrol-rgb) / 0.62);
}

.concern-rule {
  width: 44px;
  height: 2px;
  margin: clamp(15px, 1.9vw, 21px) auto clamp(17px, 2.1vw, 23px);
  background: var(--ic-color-petrol);
  border-radius: var(--ic-radius-pill);
}

.concern-header p {
  max-width: 690px;
  margin: 0 auto;
  color: var(--ic-text-body);
  font-size: clamp(1.03rem, 1.45vw, 1.26rem);
  line-height: 1.58;
  text-wrap: pretty;
}

.concern-header strong,
.concern-footer strong {
  color: var(--ic-text-primary);
  font-weight: 700;
}

.concern-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
}

.concern-card {
  position: relative;
  min-height: 100px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 26px;
  align-items: center;
  gap: clamp(13px, 1.5vw, 19px);
  padding: clamp(15px, 1.7vw, 21px);
  /* border + border-radius now from .ds-card (identical tokens) */
  background: rgba(var(--ic-cream-rgb) / 0.62);
  box-shadow: 0 1px 0 rgb(var(--ic-white-rgb) / 0.52) inset;
  cursor: pointer;
  transform: translateY(0);
  transition:
    background-color var(--ic-duration-slow) var(--ic-ease-soft),
    border-color var(--ic-duration-slow) var(--ic-ease-soft),
    box-shadow var(--ic-duration-slow) var(--ic-ease-soft),
    transform var(--ic-duration-slow) var(--ic-ease-soft);
  /* 8: stagger del reveal por tarjeta (mismo patron que signal-card/how-step).
     El delay aplica a la transicion del .reveal fallback (IntersectionObserver
     -> .in-view); en reduced-motion el kill global (transition-duration:0.001ms)
     lo neutraliza y el .reveal queda visible/quieto. */
  transition-delay: calc(var(--card-index, 0) * 70ms);
}

.concern-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--ic-radius-xl) - 1px);
  background: linear-gradient(135deg, rgb(var(--ic-white-rgb) / 0.26), transparent 48%);
  opacity: 0.7;
  pointer-events: none;
}

/* 8: feedback de color/borde/sombra para hover Y focus-visible (sin transform aqui). */
.concern-card:hover,
.concern-card:focus-visible {
  background: linear-gradient(135deg, rgba(var(--ic-sage-rgb) / 0.36), rgba(var(--ic-cream-rgb) / 0.84));
  border-color: rgba(var(--ic-petrol-rgb) / 0.32);
  box-shadow: var(--ic-shadow-card);
}

/* 8: el lift de transform del HOVER va tras gate (hover:hover) -> sin sticky-hover
   en tactil. focus-visible (teclado) lo mantiene aparte, fuera del media query. */
@media (hover: hover) {
  .concern-card:hover {
    --reveal-lift: -5px;
  }}

.concern-card:focus-visible {
  outline: none;
  box-shadow: var(--ic-shadow-card), var(--ic-focus-ring);
  transform: translateY(-5px);
}

.concern-card:active {
  transform: translateY(-2px);
}

.concern-icon {
  position: relative;
  z-index: 1;
  /* size + pill radius from .icon-circle (--icon-size 72px default) */
  --icon-size: 56px;
  /* keep inline-flex centering as local override of icon-circle's grid */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--ic-cream-rgb) / 0.7), transparent 58%),
    rgba(var(--ic-sage-rgb) / 0.2);
  color: rgba(var(--ic-petrol-rgb) / 0.8);
  box-shadow:
    inset 0 0 0 1px rgba(var(--ic-petrol-rgb) / 0.05),
    0 8px 18px rgba(var(--ic-petrol-rgb) / 0.05);
}

.concern-card:hover .concern-icon,
.concern-card:focus-visible .concern-icon {
  background: rgba(var(--ic-cream-rgb) / 0.58);
}

/* punto mustard con halo, el mismo gesto que .how-step-icon::after (la marca
   de la casa en los iconos de línea) */
.concern-icon::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 4px;
  width: 9px;
  height: 9px;
  border-radius: var(--ic-radius-pill);
  background: var(--ic-color-mustard);
  box-shadow: 0 0 0 3px rgba(var(--ic-cream-rgb) / 0.78);
}

.concern-icon svg {
  width: 28px;
  height: 28px;
  /* fill/stroke/linecap/linejoin from .ds-stroke-icon svg */
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
}

.concern-label {
  position: relative;
  z-index: 1;
  color: var(--ic-text-primary);
  font-family: var(--ic-font-display);
  font-size: clamp(1.22rem, 1.45vw, 1.48rem);
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
}

.concern-arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: 28px;
  height: 28px;
  color: var(--ic-text-primary);
  opacity: 0.82;
  transform: translateX(0);
  transition:
    opacity var(--ic-duration-base) var(--ic-ease-standard),
    transform var(--ic-duration-base) var(--ic-ease-standard);
}

.concern-arrow svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.concern-card:hover .concern-arrow,
.concern-card:focus-visible .concern-arrow {
  opacity: 1;
}

/* 8: nudge del transform de la flecha tras gate hover; focus-visible aparte. */
@media (hover: hover) {
  .concern-card:hover .concern-arrow {
    transform: translateX(4px);
  }}

.concern-card:focus-visible .concern-arrow {
  transform: translateX(4px);
}

.concern-footer {
  max-width: 780px;
  margin: clamp(26px, 3.2vw, 40px) auto 0;
  display: grid;
  justify-items: center;
  gap: 24px;
  text-align: center;
}

.concern-footer p {
  margin: 0;
  color: var(--ic-text-body);
  font-size: clamp(1rem, 1.28vw, 1.18rem);
  line-height: 1.5;
}

.concern-cta {
  min-height: 60px;
  min-width: 258px;
  padding: 0 34px;
  justify-content: space-between;
  /* rol de color: coral = conversión (contrato .button-primary en el markup);
     tamaño "cierre" (60px) y voz Fraunces 600 compartida con el resto de CTAs. */
  font-size: 1.1rem;
}

/* .section-eyebrow: el contrato base es identico a .eyebrow (co-aplicada en el
   markup), por eso no se redefine aqui; solo conserva su override movil mas abajo. */

.how-overview {
  position: relative;
  overflow: clip;
  padding: var(--ic-section-padding-y-sm) var(--ic-container-padding-x);
  background:
    radial-gradient(ellipse at 50% 2%, rgb(var(--ic-white-rgb) / 0.66), rgba(var(--ic-cream-rgb) / 0) 46%),
    radial-gradient(ellipse at 50% 110%, rgba(var(--ic-coral-rgb) / 0.1), rgba(var(--ic-cream-rgb) / 0) 42%),
    var(--ic-bg-page);
  color: var(--ic-text-primary);
}

.how-overview::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--ic-sage-rgb) / 0.1), transparent 28%, transparent 72%, rgba(var(--ic-mustard-rgb) / 0.09));
  pointer-events: none;
}

.how-overview-inner {
  z-index: 1;
}

.how-overview-header {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.how-overview-header .section-eyebrow {
  justify-content: center;
}

.how-overview-header h2 {
  color: var(--ic-text-primary);
  font-size: var(--ic-type-h2-size);
  font-weight: 500;
  line-height: var(--ic-type-h2-line);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.how-overview-header h2 span {
  color: var(--ic-color-mustard);
}

.how-overview-header > p:last-child {
  margin: 15px auto 0;
  color: var(--ic-text-body);
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.5;
}

.how-process {
  position: relative;
  --how-rail-y: 27px;
  --how-rail-color: rgba(var(--ic-petrol-rgb) / 0.28);
  --how-rail-soft: rgba(var(--ic-petrol-rgb) / 0.12);
  margin-top: clamp(26px, 3.2vw, 44px);
  padding-top: 68px;
  display: grid;
  grid-template-columns: repeat(3, minmax(155px, 0.82fr)) minmax(480px, 1.55fr);
  gap: clamp(24px, 3.2vw, 52px);
  align-items: start;
}

.how-timeline {
  position: absolute;
  z-index: 0;
  top: var(--how-rail-y);
  left: 5%;
  right: 14%;
  height: 1px;
  background:
    linear-gradient(90deg, transparent 0, var(--how-rail-soft) 2.5%, var(--how-rail-color) 16%, var(--how-rail-color) 71%, var(--how-rail-soft) 93%, transparent 100%);
  box-shadow: 0 1px 0 rgb(var(--ic-white-rgb) / 0.36);
}

.how-timeline::after {
  content: "";
  position: absolute;
  right: -1.3%;
  top: -9px;
  width: clamp(82px, 7vw, 122px);
  height: 22px;
  border-top: 1px solid var(--how-rail-color);
  border-radius: 999px 999px 0 0;
  opacity: 0.75;
  transform: rotate(6deg);
  transform-origin: left center;
}

.how-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  text-align: center;
  transition-delay: calc(var(--step-index, 0) * 90ms);
}

.how-step-number {
  position: absolute;
  top: -68px;
  left: 50%;
  z-index: 2;
  overflow: hidden;
  isolation: isolate;
  /* grid centering + pill radius from .icon-circle; size local. Keep
     inline-grid so the badge stays inline-level like before. */
  --icon-size: 54px;
  display: inline-grid;
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.28);
  border-radius: var(--ic-radius-pill);
  background: rgba(var(--ic-sage-rgb) / 0.38);
  box-shadow:
    0 0 0 4px rgba(var(--ic-cream-rgb) / 0.78),
    inset 0 0 0 1px rgb(var(--ic-white-rgb) / 0.35);
  color: var(--ic-text-primary);
  font-family: var(--ic-font-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
  transform: translateX(-50%);
}

/* Relleno OPACO: el carril (.how-timeline) pasa por detrás del número y queda
   oculto bajo el círculo, así la línea conecta de círculo a círculo sin
   cruzar la cifra (antes un ::before dibujaba la raya sobre el número). */
.how-step-number {
  background:
    linear-gradient(rgba(var(--ic-sage-rgb) / 0.42), rgba(var(--ic-sage-rgb) / 0.42)),
    var(--ic-bg-page);
}

.how-step-body {
  display: grid;
  justify-items: center;
}

.how-step-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  margin-bottom: 24px;
  color: var(--ic-text-primary);
}

.how-step-icon::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 6px;
  width: 10px;
  height: 10px;
  border-radius: var(--ic-radius-pill);
  background: var(--ic-color-mustard);
  box-shadow: 0 0 0 4px rgba(var(--ic-cream-rgb) / 0.78);
}

.how-step-icon svg {
  width: 100%;
  height: 100%;
  /* fill/stroke/linecap/linejoin from .ds-stroke-icon svg */
  stroke-width: 2.05;
  vector-effect: non-scaling-stroke;
}

.how-step h3,
.how-feature-copy h3 {
  color: var(--ic-text-primary);
  font-size: clamp(1.4rem, 1.6vw, 1.8rem);
  line-height: 1.04;
  font-weight: 500;
  text-wrap: balance;
}

.how-step p,
.how-feature-copy p {
  margin: 12px auto 0;
  max-width: 295px;
  color: var(--ic-text-body);
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.58;
}

.how-step-arrow {
  position: absolute;
  top: 107px;
  right: calc(clamp(24px, 3.2vw, 52px) * -0.68);
  color: var(--ic-text-primary);
  font-size: 2.2rem;
  font-family: var(--ic-font-body);
  font-weight: 300;
  line-height: 1;
}

.how-feature-card {
  position: relative;
  z-index: 1;
  min-height: clamp(296px, 24vw, 352px);
  margin-top: -38px;
  overflow: visible;
  isolation: isolate;
  /* border-radius now from .ds-card--feature (--ic-radius-2xl, identical);
     border/background/box-shadow stay local (bespoke values). */
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.22);
  background: var(--ic-surface-muted);
  box-shadow: 0 24px 70px rgba(var(--ic-petrol-rgb) / 0.12);
  transition-delay: calc(var(--step-index, 0) * 90ms);
}

.how-feature-card picture,
.how-feature-card img,
.how-feature-scrim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.how-feature-card picture {
  display: block;
  overflow: hidden;
}

.how-feature-card img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.how-feature-scrim {
  background:
    linear-gradient(90deg, rgba(var(--ic-cream-rgb) / 0.96) 0%, rgba(var(--ic-cream-rgb) / 0.88) 44%, rgba(var(--ic-cream-rgb) / 0.08) 74%),
    linear-gradient(180deg, rgba(var(--ic-cream-rgb) / 0.12), rgba(var(--ic-petrol-rgb) / 0.12));
}

.how-feature-number {
  top: calc(var(--icon-size) / -2);
  left: 36%;
  transform: none;
}

.how-feature-copy {
  position: relative;
  z-index: 2;
  width: min(58%, 390px);
  min-height: inherit;
  padding: clamp(24px, 2.8vw, 38px) clamp(26px, 3.2vw, 42px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.how-feature-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
}

.how-feature-copy p {
  max-width: 310px;
  margin-left: 0;
}

.how-feature-rule {
  width: min(100%, 245px);
  height: 1px;
  margin: 15px 0 11px;
  background:
    linear-gradient(90deg, rgba(var(--ic-petrol-rgb) / 0.24), rgba(var(--ic-petrol-rgb) / 0.2)),
    var(--ic-color-mustard);
  position: relative;
}

.how-feature-rule::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: var(--ic-radius-pill);
  background: var(--ic-color-mustard);
}

/* especificidad suficiente contra .how-feature-copy p: sin !important */
.how-feature-card .how-feature-copy .how-feature-note {
  margin-top: 0;
  color: var(--ic-text-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  line-height: 1.7 !important;
  text-transform: uppercase;
}

.how-overview-actions {
  margin-top: clamp(30px, 3.8vw, 50px);
  display: grid;
  justify-items: center;
  gap: 20px;
  text-align: center;
}

.how-overview-cta {
  min-width: min(100%, 330px);
  min-height: 60px;
  padding-inline: 36px 28px;
  justify-content: space-between;
  box-shadow: var(--ic-shadow-coral);
  font-size: 1.1rem;
}

.how-overview-actions p {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ic-text-body);
  font-size: 1rem;
  line-height: 1.4;
}

.how-overview-actions svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
}

.signals-section {
  position: relative;
  overflow: clip;
  padding: var(--ic-section-padding-y-sm) var(--ic-container-padding-x);
  background:
    linear-gradient(to bottom, rgba(var(--ic-cream-rgb) / 0) calc(100% - 180px), var(--ic-bg-page) 100%),
    radial-gradient(ellipse at 14% 88%, rgba(var(--ic-sage-rgb) / 0.24), rgba(var(--ic-cream-rgb) / 0) 30%),
    radial-gradient(ellipse at 58% 48%, rgb(var(--ic-white-rgb) / 0.5), rgba(var(--ic-cream-rgb) / 0) 44%),
    var(--ic-bg-page);
  color: var(--ic-text-primary);
}

.signals-shape {
  position: absolute;
  pointer-events: none;
}

.signals-shape-petrol {
  z-index: 0;
  width: min(46vw, 640px);
  height: min(46vw, 640px);
  right: -18vw;
  top: 7%;
  border-radius: 44% 56% 53% 47% / 48% 42% 58% 52%;
  background:
    radial-gradient(circle at 35% 28%, rgb(var(--ic-white-rgb) / 0.06), transparent 32%),
    linear-gradient(135deg, rgb(var(--ic-petrol-925-rgb) / 0.9), rgba(var(--ic-petrol-rgb) / 0.88));
  box-shadow: inset 0 0 70px rgb(var(--ic-black-rgb) / 0.06);
}

.signals-shape-sage {
  z-index: 0;
  width: min(34vw, 480px);
  height: min(22vw, 300px);
  left: -13vw;
  bottom: -5vw;
  border-radius: 48% 52% 36% 64% / 56% 50% 50% 44%;
  background: rgba(var(--ic-sage-rgb) / 0.42);
  transform: rotate(6deg);
}

.signals-cat-outline {
  position: absolute;
  z-index: 1;
  left: clamp(18px, 3vw, 58px);
  bottom: clamp(26px, 4vw, 64px);
  width: min(16vw, 220px);
  min-width: 150px;
  height: auto;
  opacity: 0.32;
  pointer-events: none;
  user-select: none;
}

.signals-section h2.display {
  font-size: var(--ic-type-h2-size);
  font-weight: 500;
  line-height: var(--ic-type-h2-line);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.signals-inner {
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(620px, 1.28fr);
  gap: clamp(36px, 4.6vw, 72px);
  align-items: center;
}

.signals-copy {
  max-width: 500px;
  padding-top: 0;
}

.signals-eyebrow {
  margin: 0 0 clamp(18px, 2.4vw, 32px);
}

.signals-copy h2 {
  max-width: 520px;
  color: var(--ic-text-primary);
  font-size: clamp(2.4rem, 3.4vw, 3.7rem);
  line-height: 1.04;
  font-weight: 500;
  text-wrap: balance;
}

.signals-copy p:not(.eyebrow--slash) {
  max-width: 440px;
  margin: clamp(22px, 2.8vw, 34px) 0 0;
  color: var(--ic-text-body);
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Puente narrativo desde «¿Qué te preocupa?»: lo que ya ves → lo que no. */
.signals-copy .signals-bridge {
  max-width: 440px;
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  font-family: var(--ic-font-display);
  font-style: italic;
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  line-height: 1.4;
  color: rgba(var(--ic-petrol-rgb) / 0.68);
}

.signals-copy .signals-bridge em {
  color: var(--ic-text-primary);
}

.signals-collage {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  grid-template-areas: none;
  gap: clamp(14px, 1.35vw, 20px);
  align-items: stretch;
}

.signal-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 166px;
  padding: clamp(18px, 1.35vw, 22px);
  /* border + border-radius now from .ds-card (identical tokens);
     background gradient + layered box-shadow stay local. */
  /* capas opacas: el blob petrol de la sección no debe teñir las cards */
  background:
    linear-gradient(145deg, #fdfaf2, #f8f1e5 46%, #f7efe2),
    var(--ic-surface-default);
  box-shadow:
    0 16px 42px rgba(var(--ic-petrol-rgb) / 0.1),
    inset 0 1px 0 rgb(var(--ic-white-rgb) / 0.58);
  transition-delay: calc(var(--card-index, 0) * 80ms);
}

.signal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 14% 9%, rgba(var(--ic-sage-rgb) / 0.2), transparent 28%),
    radial-gradient(circle at 84% 84%, rgba(var(--ic-mustard-rgb) / 0.09), transparent 26%);
  pointer-events: none;
}

.signal-card h3 {
  margin-top: clamp(10px, 1vw, 14px);
  color: var(--ic-text-primary);
  font-size: clamp(1.58rem, 1.62vw, 2.05rem);
  line-height: 1;
  font-weight: 500;
  text-wrap: balance;
}

.signal-card p {
  max-width: 285px;
  margin: 10px 0 0;
  color: var(--ic-text-body);
  font-size: clamp(0.86rem, 0.86vw, 0.93rem);
  line-height: 1.42;
}

/* Micro-CTA de cada señal → formulario con ?concern= precargado. */
.signal-card .signal-cta {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 14px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ic-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ic-text-primary);
}

.signal-card .signal-cta span {
  color: rgba(var(--ic-coral-rgb) / 0.95);
  transition: transform 0.18s ease;
}

.signal-card .signal-cta:hover,
.signal-card .signal-cta:focus-visible {
  color: rgba(var(--ic-coral-rgb) / 0.95);
}

.signal-card .signal-cta:hover span,
.signal-card .signal-cta:focus-visible span {
  /* el + de la casa gira en lugar de desplazarse */
  transform: rotate(90deg);
}

.signal-card .signal-cta:focus-visible {
  outline: 2px solid rgba(var(--ic-petrol-rgb) / 0.5);
  outline-offset: 3px;
  border-radius: 4px;
}

.signal-icon {
  --ds-line-icon-size: 54px;
  --ds-line-icon-svg-size: 55%;
  --ds-line-icon-stroke: 1.7;
  --ds-line-icon-border-alpha: 0.34;
  --ds-line-icon-bg: rgb(var(--ic-cream-rgb) / 0.62);
  --ds-line-icon-dot-size: 9px;
}

.signal-icon svg {
  width: var(--ds-line-icon-svg-size);
  height: var(--ds-line-icon-svg-size);
  stroke-width: var(--ds-line-icon-stroke);
  vector-effect: non-scaling-stroke;
}

.signal-card-kidney {
  grid-area: auto;
}

.signal-card-weight {
  grid-area: auto;
  justify-content: flex-start;
}

.signal-card-mouth {
  grid-area: auto;
  display: flex;
  min-height: 166px;
}

.signal-card-mouth .signal-icon {
  --ds-line-icon-size: 54px;
  align-self: center;
}

.signal-card-mouth h3 {
  margin-top: clamp(10px, 1vw, 14px);
}

.signal-card-mouth p {
  max-width: 310px;
}

.signal-card-litter {
  grid-area: auto;
}

.signal-card-vomit {
  grid-area: auto;
}

.signal-card-food {
  grid-area: auto;
}

.signal-plant {
  position: absolute;
  right: -4px;
  top: 26px;
  width: 148px;
  color: rgba(var(--ic-petrol-rgb) / 0.14);
  stroke-width: 2.2;
}

.signal-rings {
  position: absolute;
  right: -32px;
  bottom: -34px;
  width: 155px;
  height: 155px;
  border: 2px solid rgba(var(--ic-coral-rgb) / 0.46);
  border-radius: 50%;
}

.signal-rings::before,
.signal-rings::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: inherit;
  border-radius: inherit;
}

.signal-rings::after {
  inset: 36px;
}

.signal-dots,
.signal-dot-grid {
  display: flex;
  gap: 16px;
  margin-top: auto;
  padding-top: 34px;
  align-self: center;
}

.signal-dots span,
.signal-dot-grid span {
  width: 7px;
  height: 7px;
  border-radius: var(--ic-radius-pill);
  background: var(--ic-color-mustard);
}

.signal-dot-grid {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: grid;
  grid-template-columns: repeat(3, 7px);
  gap: 12px 15px;
}

/* ===================== NO VENDEMOS COMIDA (sin conflicto) =====================
   Rediseño (jun-2026): una tarjeta unica con copy editorial a la izquierda y un
   panel comparativo simplificado (marca vs iron.cat) a la derecha. Namespace
   .nc-* nuevo; el CSS .no-conflict-* anterior quedo inerte (el markup ya no usa
   esas clases). Solo .no-conflict-section + #no-conflict-title se conservan
   para el wiring de JS y los tests. */
.no-conflict-section {
  position: relative;
  overflow: clip;
  padding: var(--ic-section-padding-y) var(--ic-container-padding-x);
  background: var(--ic-bg-page);
  color: var(--ic-text-primary);
}

.nc-card {
  position: relative;
  width: min(100%, 1180px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.94fr);
  align-items: center;
  gap: clamp(34px, 4.4vw, 74px);
  padding: clamp(34px, 4.5vw, 74px) clamp(32px, 4.4vw, 72px);
  border: 1px solid var(--ic-border-default);
  border-radius: clamp(28px, 2.6vw, 40px);
  background:
    radial-gradient(120% 92% at 15% 22%, rgb(var(--ic-white-rgb) / 0.62), rgba(var(--ic-cream-rgb) / 0) 52%),
    var(--ic-surface-default);
  box-shadow: var(--ic-shadow-card-lg);
  overflow: clip;
}

/* arco decorativo: un circulo recortado por el overflow del card -> arco en la
   esquina inferior izquierda. */
.nc-arc {
  position: absolute;
  left: clamp(-150px, -11vw, -112px);
  bottom: clamp(-150px, -11vw, -112px);
  width: clamp(220px, 22vw, 320px);
  aspect-ratio: 1;
  border: 2px solid rgba(var(--ic-petrol-rgb) / 0.26);
  border-radius: 50%;
  pointer-events: none;
}

/* ---- Copy (izquierda) ---- */
.nc-copy {
  position: relative;
  z-index: 1;
}

.nc-eyebrow {
  /* a11y: el texto va en petrol (6.43:1 sobre cream, pasa AA); el mustard solo
     queda como acento en el punto/barra decorativos (aria-hidden), igual que
     criteria/founding. Mustard sobre cream daba 1.46:1 (fallaba AA). */
  --eyebrow-color: var(--ic-color-petrol);
  margin: 0 0 clamp(22px, 2.4vw, 34px);
}

.nc-eyebrow.eyebrow--marker .ds-eyebrow-bar,
.nc-eyebrow.eyebrow--marker .ds-eyebrow-dot {
  background: var(--ic-color-mustard);
}

.nc-title {
  margin: 0;
  color: var(--ic-text-primary);
  font-size: var(--ic-type-h2-size);
  font-weight: 500;
  line-height: var(--ic-type-h2-line);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.nc-claim {
  margin: clamp(6px, 0.8vw, 12px) 0 0;
  color: var(--ic-color-coral-800);
  font-size: clamp(2.05rem, 3.3vw, 3.3rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.04;
  text-wrap: balance;
}

.nc-lede {
  max-width: 32ch;
  margin: clamp(22px, 2.4vw, 32px) 0 0;
  color: var(--ic-text-body);
  font-size: clamp(1.02rem, 1.2vw, 1.2rem);
  line-height: 1.6;
}

.nc-lede strong {
  color: var(--ic-text-primary);
  font-weight: 700;
}

/* ---- Panel comparativo (derecha) ---- */
.nc-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border: 1px solid var(--ic-border-default);
  border-radius: clamp(20px, 1.8vw, 28px);
  background: rgba(var(--ic-cream-rgb) / 0.45);
}

/* divisor vertical central */
.nc-panel::before {
  content: "";
  position: absolute;
  top: 16%;
  bottom: 16%;
  left: 50%;
  width: 1px;
  background: var(--ic-border-default);
  transform: translateX(-0.5px);
}

.nc-side {
  display: grid;
  justify-items: center;
  align-content: center;
  padding: clamp(30px, 3.2vw, 50px) clamp(18px, 2.4vw, 34px);
  text-align: center;
}

.nc-side h3 {
  margin: 0;
  color: var(--ic-text-primary);
  font-family: var(--ic-font-display);
  font-size: clamp(1.36rem, 1.9vw, 1.88rem);
  font-weight: 600;
  line-height: 1.06;
}

.nc-rule {
  width: 34px;
  height: 3px;
  margin: clamp(14px, 1.4vw, 20px) 0 clamp(12px, 1.3vw, 18px);
  border-radius: var(--ic-radius-pill);
  background: var(--ic-color-coral);
}

.nc-side p {
  margin: 0;
  color: var(--ic-text-body);
  font-size: clamp(0.98rem, 1.1vw, 1.12rem);
  line-height: 1.42;
}

/* circulo "vs." centrado en el divisor */
.nc-versus {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(52px, 4.5vw, 68px);
  aspect-ratio: 1;
  border-radius: var(--ic-radius-pill);
  background: var(--ic-color-mustard);
  color: var(--ic-color-petrol-ink);
  font-family: var(--ic-font-display);
  font-size: clamp(1.05rem, 1.3vw, 1.32rem);
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 12px 28px rgba(var(--ic-petrol-rgb) / 0.2);
}

/* ===================== "El pienso apesta" =====================
   La verdad incómoda sobre el seco-exclusivo, en clave basada en evidencia (agua,
   carnívoro estricto, sobrepeso) — nunca causalidad renal. Va tras "no vendemos
   comida" y enlaza con esa tesis: criticamos el formato dominante sin prohibir. */
.kibble {
  position: relative;
  padding: var(--ic-section-padding-y-sm) var(--ic-container-padding-x);
  /* clip, no hidden: hidden convierte el panel en scroll container y eso
     deja INACTIVOS los view-timeline de dentro (el bol se congelaba); clip
     recorta igual las esquinas sin crear scroller. Fallback hidden para
     navegadores sin clip (ahí tampoco hay scroll-timelines). */
  overflow: hidden;
  overflow: clip;
}
.kibble-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.4vw, 1.6rem);
}
.kibble-head,
.kibble-grid,
.kibble-close {
  position: relative;
  z-index: 1;
}
.kibble-head {
  max-width: 44rem;
}
.kibble-title {
  /* escalón compacto: la sección es -sm, un punto por debajo del contrato H2 */
  font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  font-weight: 500;
  line-height: var(--ic-type-h2-line);
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0.4rem 0 0;
}
.kibble-dot {
  color: var(--ic-color-coral);
}
.kibble-claim {
  margin: 0.35rem 0 0.75rem;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-style: italic;
  color: var(--ic-color-coral);
}
.kibble-lede {
  max-width: 40rem;
  margin: 0;
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  line-height: 1.5;
  color: var(--ic-text-body);
}
.kibble-lede strong {
  color: var(--ic-text-primary);
}
.kibble-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
}
.kibble-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: clamp(0.95rem, 1.8vw, 1.3rem);
}
.kibble-num {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--ic-radius-pill);
  background: rgba(var(--ic-coral-rgb) / 0.14);
  color: var(--ic-color-coral-800);
  font-family: var(--ic-font-display);
  font-weight: 600;
  font-size: 0.95rem;
}
.kibble-card h3 {
  margin: 0.1rem 0 0;
  font-size: clamp(1.05rem, 1.9vw, 1.22rem);
  line-height: 1.12;
}
.kibble-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ic-text-body);
}
.kibble-card p strong {
  color: var(--ic-text-primary);
}
.kibble-source {
  margin-top: auto;
  padding-top: 0.2rem;
  font-size: 0.68rem;
  font-style: italic;
  color: var(--ic-text-muted);
}
.kibble-close {
  max-width: 42rem;
}
.kibble-close-lead {
  margin: 0;
  font-size: clamp(0.95rem, 1.8vw, 1.08rem);
  line-height: 1.5;
  color: var(--ic-text-body);
}
.kibble-close-lead strong {
  color: var(--ic-text-primary);
}
.kibble-note {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ic-text-muted);
}
@media (max-width: 760px) {
  .kibble-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================== PRICING — "La cuenta honesta" (recibo) =====================
   Rediseño (jun-2026): la sección de pricing ES un recibo de veterinaria que
   imprime, a 0,00 €, lo que NO te cobramos (marca de pienso propia, comisión,
   suplementos) — el posicionamiento "sin conflicto de interés" hecho forma.
   Namespace .receipt-*; conserva los hooks del test (.founding-offer-section,
   #founding-title, .founding-price strong=="49€", .founding-ribbon, .founding-list
   li ×4, .founding-cat img, .founding-cta[href]). */
.founding-offer-section {
  position: relative;
  overflow: clip;
  scroll-margin-top: 96px;
  min-height: clamp(520px, 40vw, 660px);
  padding: var(--ic-section-padding-y) var(--ic-container-padding-x);
  background: linear-gradient(115deg, var(--ic-color-cream) 0%, var(--ic-surface-tint) 48%, rgba(var(--ic-sage-rgb) / 0.7) 100%);
  color: var(--ic-text-primary);
}

.receipt-grid {
  --ic-container-wide: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  column-gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

/* ---- relato (izquierda) ---- */
.receipt-lede { max-width: 560px; }
.receipt-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(14px, 2vw, 22px); color: var(--ic-text-primary); }
.receipt-eyebrow .ds-eyebrow-dot { width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%; background: var(--ic-color-mustard); }
.receipt-lede h2 {
  margin: 0;
  color: var(--ic-text-primary);
  font-size: var(--ic-type-h2-size);
  font-weight: 500;
  line-height: var(--ic-type-h2-line);
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.receipt-lede h2 span {
  display: inline-block;
  margin-right: 0.08em;
  font-style: italic;
  color: var(--ic-color-coral-700);
}
.receipt-promise {
  margin: 1.1rem 0 0;
  max-width: 30rem;
  color: var(--ic-text-body);
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  line-height: 1.55;
  text-wrap: pretty;
}
/* mismo coral que "49€" en el H2 de arriba: ata visualmente la promesa
   de precio a la cifra destacada del titular. */
.receipt-promise strong { color: var(--ic-color-coral-700); }

/* bloque "no incluido — y no lo cobramos" (el moat de la marca) */

.receipt-scarcity {
  margin: 1.05rem 0 0;
  font-family: var(--ic-font-mono);
  font-size: 0.84rem;
  color: var(--ic-text-muted);
}

/* ---- el recibo (derecha) ---- */
.receipt-ticket {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 380px;
  padding: clamp(18px, 2vw, 24px);
  background: var(--ic-surface-raised);
  border-radius: var(--ic-radius-xs) var(--ic-radius-xs) 0 0;
  box-shadow: var(--ic-shadow-card-md);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* timeline con nombre en el TICKET (mucho más alto que el subrayado):
       así el trazo dibuja a lo largo de un recorrido de scroll perceptible,
       en vez de resolverse en los ~9px de alto del propio marker. */
    .receipt-ticket { view-timeline-name: --receipt-ticket; }
  }
}
/* borde dentado inferior (zig-zag tipo recibo) */
.receipt-tear {
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 9px;
  background:
    linear-gradient(135deg, var(--ic-surface-raised) 50%, transparent 51%) 0 0 / 12px 9px repeat-x,
    linear-gradient(-135deg, var(--ic-surface-raised) 50%, transparent 51%) 6px 0 / 12px 9px repeat-x;
  filter: drop-shadow(0 3px 2px rgba(var(--ic-petrol-rgb) / 0.05));
}

/* cuño diagonal (= .founding-ribbon obligatorio; reset de colas del ribbon viejo) */
.founding-ribbon.receipt-stamp {
  position: absolute;
  top: 22px; right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 0; min-width: 0;
  padding: 3px 8px;
  border: 2px solid rgba(var(--ic-petrol-rgb) / 0.34);
  border-radius: var(--ic-radius-xs);
  background: none;
  box-shadow: none;
  transform: rotate(8deg);
  font-family: var(--ic-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--ic-petrol-rgb) / 0.82);
}
.founding-ribbon.receipt-stamp::before,
.founding-ribbon.receipt-stamp::after { content: none; }
.founding-ribbon.receipt-stamp span {
  width: auto; height: auto;
  display: inline-flex;
  background: none;
  color: inherit;
}
.founding-ribbon.receipt-stamp svg { width: 14px; height: 14px; stroke-width: 1.7; }

/* cabecera con membrete (= .founding-cat obligatoria, como avatar) */
.receipt-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-right: 1.6rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed rgba(var(--ic-petrol-rgb) / 0.32);
}
.founding-cat.receipt-avatar {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  /* .founding-cat sin este reset hereda min-width (240/290px…) de las media
     queries del gato-hero de arriba y sale deforme dentro del recibo. */
  min-width: 0;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.16);
  filter: none;
  transform: none;
}
.founding-cat.receipt-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.receipt-brand {
  margin: 0;
  font-family: var(--ic-font-display);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ic-text-primary);
}
.receipt-meta {
  margin: 0.22rem 0 0;
  font-family: var(--ic-font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--ic-text-muted);
}

/* conceptos (= .founding-list, 4 li) con etiqueta temporal mono */
.receipt-items {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
  border-bottom: 1px dashed rgba(var(--ic-petrol-rgb) / 0.32);
}
.receipt-items li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
}
/* la línea temporal (Sem 0 / Sem 2 …) ya no se muestra: solo check + texto */
.receipt-when { display: none; }
.receipt-what { font-size: 0.95rem; line-height: 1.3; color: var(--ic-text-primary); }
.receipt-check { color: var(--ic-color-petrol); font-weight: 700; }

/* total (= .founding-price; strong contiene SOLO "49€") */
.receipt-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0 0.1rem;
}
.receipt-total-label {
  max-width: 9rem;
  font-family: var(--ic-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--ic-text-muted);
}
.receipt-total-detail {
  margin: 0.18rem 0 0.2rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--ic-text-muted);
}
.founding-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12rem;
  margin: 0;
}
.founding-price strong {
  font-family: var(--ic-font-display);
  font-size: clamp(2.1rem, 3.1vw, 2.6rem);
  font-weight: 600;
  line-height: 0.9;
  color: var(--ic-color-coral-700);
}
.founding-price span {
  font-family: var(--ic-font-display);
  font-size: 1.15rem;
  color: var(--ic-text-primary);
}
.receipt-future {
  margin: 0.55rem 0 0;
  font-family: var(--ic-font-mono);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ic-text-muted);
}
.receipt-future strong { color: var(--ic-color-coral-700); }

/* cupón desprendible (.receipt-coupon), sangra a los bordes del ticket */
.receipt-coupon {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1rem calc(-1 * clamp(18px, 2vw, 24px)) -0.2rem;
  padding: 0.85rem clamp(18px, 2vw, 24px);
  border-top: 2px dashed var(--ic-color-coral);
  transition: background-color 180ms var(--ic-ease-soft), transform 180ms var(--ic-ease-soft);
}
.receipt-coupon-icon {
  --ds-line-icon-size: 42px;
  --ds-line-icon-svg-size: 58%;
  --ds-line-icon-stroke: 1.6;
  --ds-line-icon-border-alpha: 0.3;
  --ds-line-icon-bg: rgb(var(--ic-cream-rgb) / 0.58);
}
.receipt-coupon-icon svg { width: var(--ds-line-icon-svg-size); height: var(--ds-line-icon-svg-size); stroke-width: var(--ds-line-icon-stroke); }
.receipt-coupon p { margin: 0; font-size: 0.85rem; line-height: 1.4; color: var(--ic-text-body); }
.receipt-coupon strong { color: var(--ic-text-primary); font-weight: 700; }
.receipt-coupon p span { font-family: var(--ic-font-display); font-size: 1.18em; font-weight: 600; color: var(--ic-color-coral-700); }
.receipt-coupon s { color: var(--ic-text-muted); font-weight: 400; }
.receipt-coupon--primary {
  border-bottom: 1px dashed rgba(var(--ic-petrol-rgb) / 0.2);
  background: rgba(var(--ic-coral-rgb) / 0.045);
}
@media (hover: hover) { .receipt-coupon:hover { transform: translateY(-2px); background: rgba(var(--ic-coral-rgb) / 0.06); } }

/* extras de menor peso: no compiten con el producto principal */
.receipt-extras {
  margin: 0.75rem calc(-1 * clamp(18px, 2vw, 24px)) -0.15rem;
  padding: 0.75rem clamp(18px, 2vw, 24px) 0.65rem;
  border-top: 1px dashed rgba(var(--ic-petrol-rgb) / 0.25);
  background: rgba(var(--ic-cream-rgb) / 0.38);
}
.receipt-extras-title {
  margin: 0 0 0.5rem;
  font-family: var(--ic-font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: rgba(var(--ic-petrol-rgb) / 0.68);
}
.receipt-extra-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.38rem 0;
  border-top: 1px solid rgba(var(--ic-petrol-rgb) / 0.12);
  font-size: 0.84rem;
  line-height: 1.3;
}
.receipt-extra-row:first-of-type { border-top: 0; }
.receipt-extra-row span { color: var(--ic-text-body); }
.receipt-extra-row strong {
  flex: 0 0 auto;
  font-family: var(--ic-font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ic-color-coral-700);
  white-space: nowrap;
}

/* cierre decorativo */
.receipt-closing {
  margin: 0.85rem 0 0;
  text-align: center;
  font-family: var(--ic-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(var(--ic-petrol-rgb) / 0.42);
}

/* CTA (= .founding-cta) full-width al pie del ticket */
.founding-cta {
  /* color por contrato .button-petrol (markup); aquí solo layout y matices */
  margin-top: 1rem;
  width: 100%;
  min-height: 60px;
  padding: 0 12px 0 26px;
  gap: 12px;
  justify-content: space-between;
  border: 0;
  border-radius: var(--ic-radius-pill);
  font-size: 1.1rem;
  line-height: 1.08;
  text-align: left;
  white-space: normal;
  box-shadow: 0 16px 40px rgba(var(--ic-petrol-rgb) / 0.22);
  transition: background-color 180ms var(--ic-ease-standard), transform 180ms var(--ic-ease-standard);
}
.founding-cta .icon-circle {
  --icon-size: 40px;
  display: grid;
  place-items: center;
  line-height: 1;
  background: var(--ic-color-mustard);
  color: var(--ic-text-primary);
  font-family: var(--ic-font-body);
  font-size: 1.4rem;
}
.founding-cta:hover,
.founding-cta:focus-visible {
  background: var(--ic-color-petrol-700);
  color: var(--ic-color-cream);
}
@media (hover: hover) { .founding-cta:hover { transform: translateY(-2px); } }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .receipt-grid { grid-template-columns: 1fr; row-gap: clamp(24px, 5vw, 38px); }
  .receipt-lede { max-width: none; }
  .receipt-ticket { justify-self: center; max-width: 440px; }
}
@media (max-width: 480px) {
  .receipt-ticket { max-width: 100%; }
  .receipt-items li { grid-template-columns: 1fr auto; gap: 8px; }
  .founding-ribbon.receipt-stamp { top: 16px; font-size: 0.58rem; }
}

/* ===================== FOOTER (contentinfo a nivel body) =====================
   Banda profunda en petrol-ink, multi-columna: marca + tagline + promesa,
   navegacion, y bloque "empieza" (CTA + email + privacidad), mas una barra
   inferior con copyright y volver-arriba. */
.site-footer {
  position: relative;
  z-index: 2;
  padding: clamp(56px, 7vw, 100px) var(--ic-container-padding-x) clamp(26px, 3vw, 40px);
  /* La banda usa el petrol de marca (#2e5d63): coincide con el fondo horneado
     del wordmark reversed, asi el logo se funde sin placa visible. */
  background: var(--ic-color-petrol);
  color: rgba(var(--ic-cream-rgb) / 0.9);
}

.footer-inner {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.15fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

.footer-brand {
  max-width: 340px;
}

.footer-logo {
  display: inline-block;
}

.footer-logo img {
  display: block;
  width: clamp(124px, 13vw, 156px);
  height: auto;
}

.footer-tagline {
  margin: clamp(20px, 2vw, 26px) 0 0;
  font-family: var(--ic-font-display);
  font-size: clamp(1.16rem, 1.5vw, 1.42rem);
  line-height: 1.3;
  color: var(--ic-color-cream);
}

.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: clamp(16px, 1.6vw, 20px) 0 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(var(--ic-cream-rgb) / 0.72);
}

.footer-badge-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--ic-radius-pill);
  background: var(--ic-color-mustard);
}

.footer-h {
  margin: 0 0 clamp(16px, 1.6vw, 22px);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--ic-cream-rgb) / 0.58);
}

.footer-legal {
  display: flex;
  gap: 6px 16px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.footer-legal a {
  color: inherit;
  opacity: 0.72;
  text-decoration: none;
}

.footer-links {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: rgba(var(--ic-cream-rgb) / 0.84);
  font-size: 0.98rem;
  font-weight: 500;
  transition: color 240ms var(--ic-ease-soft);
}

.footer-start {
  display: grid;
  justify-items: start;
}

.footer-cta {
  margin-bottom: clamp(18px, 1.8vw, 24px);
}

.footer-mail {
  color: var(--ic-color-cream);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(var(--ic-cream-rgb) / 0.4);
  transition: text-decoration-color 240ms var(--ic-ease-soft);
}

.footer-privacy {
  margin: 12px 0 0;
  max-width: 30ch;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(var(--ic-cream-rgb) / 0.62);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  padding-top: clamp(24px, 2.6vw, 34px);
  border-top: 1px solid rgba(var(--ic-cream-rgb) / 0.16);
}

.footer-copy {
  margin: 0;
  font-size: 0.84rem;
  color: rgba(var(--ic-cream-rgb) / 0.62);
}

.footer-top-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(var(--ic-cream-rgb) / 0.84);
  font-size: 0.9rem;
  font-weight: 600;
}

.footer-top-link span {
  display: inline-block;
  transition: transform 350ms var(--ease-emphasized);
}

@media (hover: hover) {
  .footer-links a:hover,
  .footer-top-link:hover {
    color: var(--ic-color-cream);
  }

  .footer-mail:hover {
    text-decoration-color: var(--ic-color-mustard);
  }

  .footer-top-link:hover span {
    transform: translateY(-4px);
  }
}

.footer-top-link:focus-visible span {
  transform: translateY(-4px);
}

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: clamp(32px, 8vw, 44px);
  }

  .footer-brand,
  .footer-start {
    max-width: min(100%, 420px);
  }

  .footer-cta {
    width: min(100%, 320px);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ===================== 404 =====================
   Error page for GitHub Pages/Cloudflare fallback. It keeps the iron.cat
   editorial language without loading the homepage scroll machinery. */
.not-found-body {
  min-height: 100svh;
  background:
    radial-gradient(circle at 84% 16%, rgba(var(--ic-sage-rgb) / 0.58) 0 18vw, transparent 18.5vw),
    radial-gradient(circle at 12% 86%, rgba(var(--ic-mustard-rgb) / 0.18) 0 20vw, transparent 20.5vw),
    linear-gradient(135deg, var(--ic-surface-raised) 0%, var(--ic-color-cream) 46%, rgba(var(--ic-sage-rgb) / 0.62) 100%);
}

.not-found-page {
  min-height: 100svh;
  padding: clamp(18px, 3vw, 34px) var(--ic-container-padding-x);
  color: var(--ic-color-petrol);
}

.not-found-shell {
  --ic-container-wide: 1180px;
  display: grid;
  min-height: calc(100svh - clamp(36px, 6vw, 68px));
  gap: clamp(40px, 6vw, 76px);
  align-content: start;
}

.not-found-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 14px 12px 22px;
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.12);
  border-radius: var(--ic-radius-pill);
  background: rgba(var(--ic-cream-rgb) / 0.84);
  box-shadow: var(--ic-shadow-soft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.not-found-brand {
  display: inline-flex;
  align-items: center;
}

.not-found-brand img {
  width: clamp(126px, 16vw, 166px);
  height: auto;
}

.not-found-links {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  font-family: var(--ic-font-display);
  font-size: 1rem;
  font-weight: 500;
}

.not-found-links a {
  position: relative;
  padding-block: 8px;
  color: rgba(var(--ic-petrol-rgb) / 0.88);
}

.not-found-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 2px;
  border-radius: var(--ic-radius-pill);
  background: var(--ic-color-mustard);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ic-ease-soft);
}

.not-found-links a:hover::after,
.not-found-links a:focus-visible::after {
  transform: scaleX(1);
}

.not-found-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: clamp(36px, 7vw, 96px);
  align-items: center;
}

.not-found-copy {
  max-width: 650px;
}

.not-found-eyebrow {
  --eyebrow-color: var(--ic-color-mustard);
  margin-bottom: clamp(22px, 3vw, 32px);
}

.not-found-code {
  margin: 0 0 clamp(10px, 1.4vw, 16px);
  font-family: var(--ic-font-body);
  font-size: clamp(0.88rem, 1.2vw, 1.04rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  color: rgba(var(--ic-petrol-rgb) / 0.52);
}

.not-found-copy h1 {
  max-width: 9.4ch;
  margin: 0;
  font-family: var(--ic-font-display);
  font-size: clamp(4.25rem, 9vw, 8.25rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: 0;
}

.not-found-copy > p:not(.eyebrow):not(.not-found-code) {
  max-width: 54ch;
  margin: clamp(22px, 3vw, 32px) 0 0;
  color: rgba(var(--ic-petrol-rgb) / 0.84);
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  line-height: 1.65;
}

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 4vw, 42px);
}

.not-found-secondary {
  border-color: rgba(var(--ic-petrol-rgb) / 0.28);
  background: rgba(var(--ic-cream-rgb) / 0.6);
  color: var(--ic-color-petrol);
}

.not-found-secondary:hover,
.not-found-secondary:focus-visible {
  border-color: var(--ic-color-petrol);
  background: rgba(var(--ic-sage-rgb) / 0.34);
  color: var(--ic-color-petrol);
}

.not-found-card {
  position: relative;
  overflow: hidden;
  border-radius: clamp(26px, 4vw, 42px);
  background: rgba(var(--ic-cream-rgb) / 0.9);
}

.not-found-card::before {
  content: "";
  position: absolute;
  inset: auto -16% -16% auto;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(var(--ic-mustard-rgb) / 0.68);
  transform: rotate(-14deg);
}

.not-found-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ic-color-sage);
}

.not-found-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--ic-petrol-rgb) / 0.04), rgba(var(--ic-petrol-rgb) / 0.2));
}

.not-found-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.not-found-card-copy {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 3vw, 34px);
}

.not-found-card-copy p {
  margin: 0 0 16px;
  font-family: var(--ic-font-display);
  font-size: clamp(1.8rem, 2.8vw, 2.45rem);
  line-height: 1.02;
}

.not-found-card-copy ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.not-found-card-copy a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: rgba(var(--ic-petrol-rgb) / 0.84);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(var(--ic-petrol-rgb) / 0.2);
  text-underline-offset: 4px;
  transition:
    color 180ms var(--ic-ease-soft),
    text-decoration-color 180ms var(--ic-ease-soft);
}

.not-found-card-copy a:hover,
.not-found-card-copy a:focus-visible {
  color: var(--ic-color-petrol-900);
  text-decoration-color: var(--ic-color-mustard);
}

.not-found-brand:focus-visible,
.not-found-links a:focus-visible,
.not-found-card-copy a:focus-visible {
  outline: 2px solid var(--ic-color-petrol);
  outline-offset: 3px;
  border-radius: var(--ic-radius-xs);
}

@media (max-width: 820px) {
  .not-found-shell {
    gap: clamp(30px, 7vw, 46px);
  }

  .not-found-nav {
    align-items: flex-start;
    border-radius: var(--ic-radius-2xl);
  }

  .not-found-links {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 16px;
    font-family: var(--ic-font-body);
    font-size: 0.92rem;
  }

  .not-found-hero {
    grid-template-columns: 1fr;
  }

  .not-found-copy h1 {
    max-width: 8.7ch;
  }
}

@media (max-width: 520px) {
  .not-found-page {
    padding-inline: 16px;
  }

  .not-found-nav {
    padding: 14px;
    flex-direction: column;
  }

  .not-found-links {
    justify-content: flex-start;
  }

  .not-found-actions,
  .not-found-actions .button {
    width: 100%;
  }

  .not-found-card-copy {
    padding: 22px;
  }
}

.reveal:not(.reveal--motor) {
  opacity: 0;
  /* --collage-tf (default rotate(0)) permite componer la rotación del collage
     de señales con el transform que gobierna el reveal. */
  transform: translateY(24px) var(--collage-tf, rotate(0deg));
  /* 8: easing por token (entrada suave) en vez de 'ease' plano. */
  transition:
    opacity 600ms var(--ic-ease-soft),
    transform 600ms var(--ic-ease-soft);
}

.reveal:not(.reveal--motor).in-view {
  opacity: 1;
  /* --reveal-lift (default 0px) deja el estado en reposo IDENTICO (translateY(0));
     el hover-lift de las cards lo cambia a -6px y compone con el reveal. */
  transform: translateY(var(--reveal-lift, 0px)) var(--collage-tf, rotate(0deg));
}

/* 11.B: reveals SIMPLES como progressive enhancement con scroll-timeline.
   Solo afecta a los .reveal simples (fade + translateY del bloque de arriba); el
   IntersectionObserver sigue siendo el fallback (estado .in-view) fuera de @supports.
   NO se incluyen hero-content/steps: su transform lo
   gobierna el motor rAF (custom properties) y una animation-timeline lo sobrescribiria. */
@supports (animation-timeline: view()) {
  @keyframes reveal-simple {
    from {
      opacity: 0;
      transform: translateY(24px) var(--collage-tf, rotate(0deg));
    }
    to {
      opacity: 1;
      /* compone --reveal-lift (default 0px) para que el hover-lift de cards
         sobreviva a la animacion de scroll-timeline (que fija el transform). */
      transform: translateY(var(--reveal-lift, 0px)) var(--collage-tf, rotate(0deg));
    }}

  .reveal:not(.reveal--motor) {
    /* arranca oculto sin depender de .in-view; el scroll-timeline lo revela y lo mantiene. */
    opacity: 0;
    transform: translateY(24px);
    animation: reveal-simple linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 18%;
  }

  /* 8: stagger REAL de los grids en navegadores con scroll-timeline.
     animation-delay no aplica con timeline de scroll; se escalona desplazando la
     ventana animation-range por --card-index/--step-index (cada tarjeta se revela
     un poco mas tarde en el scroll). Todas terminan reveladas dentro del primer
     tercio largo del viewport (card 5 cierra en cover 38%). Cosmético: no cambia
     el estado final ni el overflow. */
  .concern-card.reveal:not(.reveal--motor),
  .kibble-card.reveal:not(.reveal--motor) {
    animation-range:
      entry calc(0% + var(--card-index, 0) * 4%)
      cover calc(18% + var(--card-index, 0) * 4%);
  }

  /* señales: ventana más corta — la card 06 completa su reveal mucho antes
     de cruzar el blob petrol y nunca se ve traslúcida sobre él */
  .signal-card.reveal:not(.reveal--motor) {
    animation-range:
      entry calc(0% + var(--card-index, 0) * 3%)
      cover calc(12% + var(--card-index, 0) * 3%);
  }

  .how-step.reveal:not(.reveal--motor),
  .how-feature-card.reveal:not(.reveal--motor) {
    animation-range:
      entry calc(0% + var(--step-index, 0) * 4%)
      cover calc(18% + var(--step-index, 0) * 4%);
  }}

@media (prefers-reduced-motion: reduce) {
  /* 11.B: sin scroll-timeline en reduced-motion; el reveal simple queda fijo y visible. */
  @supports (animation-timeline: view()) {
    .reveal:not(.reveal--motor) {
      opacity: 1;
      transform: none;
      animation: none;
    }}}

/* 8: --reveal-lift tipado para que el hover-lift de las cards transicione suave
   (en vez de saltar) tambien cuando el transform lo gobierna la animacion de
   scroll-timeline. Si @property no esta soportado, el var sigue funcionando (sin
   transicion del propio lift; box-shadow transiciona igual). */
@property --reveal-lift {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* 8: hover-lift sutil en cards nuevas (signal-card).
   Gate @media (hover:hover) -> sin "sticky hover" en tactil. La elevacion se
   compone via --reveal-lift (sobrevive a la animacion de reveal de scroll-timeline,
   que fija el transform) + sombra mayor.
   Especificidad (0,2,0) con .in-view y declarada DESPUES del bloque .reveal -> gana
   el transition (lista transform + box-shadow) sin romper el fade del reveal, que ya
   ocurrio antes de .in-view. El estado en reposo es identico (--reveal-lift:0px). */
.signal-card.in-view,
.concern-card.in-view {
  transition:
    --reveal-lift var(--ic-duration-slow) var(--ic-ease-soft),
    background-color var(--ic-duration-slow) var(--ic-ease-soft),
    border-color var(--ic-duration-slow) var(--ic-ease-soft),
    transform var(--ic-duration-slow) var(--ic-ease-soft),
    box-shadow var(--ic-duration-slow) var(--ic-ease-soft);
}

@media (hover: hover) {
  .signal-card.in-view:hover {
    --reveal-lift: -6px;
    box-shadow: var(--ic-shadow-card-lg);
  }}

.hero .hero-content.reveal {
  opacity: 0;
  transform: translateY(var(--hero-content-shift));
  transition: opacity 600ms ease;
}

.hero .hero-content.reveal.in-view {
  opacity: 1;
  transform: translateY(var(--hero-content-shift));
}

@media (max-width: 1100px) {
  .site-header {
    padding: 0 clamp(18px, 4vw, 48px);
  }

  .nav-shell,
  .site-header.is-scrolled .nav-shell {
    width: 100%;
    max-width: 960px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(16px, 2.5vw, 28px);
    padding-left: 18px;
  }

  .site-header .brand-logo {
    width: 100%;
  }

  .brand {
    width: 132px;
    height: 38px;
  }

  .nav-links {
    gap: clamp(16px, 2.2vw, 26px);
    font-size: 0.96rem;
  }

  .site-header .button {
    min-height: 48px;
    padding-inline: 20px 18px;
    font-size: 0.95rem;
  }

  .hero-title {
    max-width: 640px;
    font-size: 4.35rem;
  }

  .hero-copy {
    margin-top: 30px;
  }

  .concern-finder {
    /* reliquia del diseño que underlapaba el hero (rol que pasó a .criteria):
       el 100svh dejaba un hueco enorme antes del título en tablet/móvil */
    padding-top: 64px;
    padding-bottom: 80px;
  }

  .concern-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how-process {
    padding-top: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .how-timeline {
    display: none;
  }

  .how-step {
    min-height: 286px;
    padding: 28px;
    border: 1px solid rgba(var(--ic-petrol-rgb) / 0.14);
    border-radius: var(--ic-radius-xl);
    background: rgba(var(--ic-cream-rgb) / 0.58);
    box-shadow: 0 1px 0 rgb(var(--ic-white-rgb) / 0.52) inset;
    text-align: left;
  }

  .how-step-number {
    position: static;
    margin-bottom: 28px;
    transform: none;
  }

  .how-step-body {
    justify-items: start;
  }

  .how-step p {
    margin-left: 0;
    margin-right: 0;
  }

  .how-step-arrow {
    display: none;
  }

  .how-feature-card {
    grid-column: 1 / -1;
    min-height: 420px;
    margin-top: 0;
  }

  .how-feature-number {
    top: 26px;
    left: 30px;
  }

  .how-feature-copy {
    width: min(48%, 360px);
    padding-top: 86px;
  }

  .signals-section {
    padding-top: 86px;
    padding-bottom: 96px;
  }

  .signals-shape-petrol {
    width: 64vw;
    height: 64vw;
    right: -34vw;
    top: clamp(280px, 34vw, 420px);
  }

  .signals-cat-outline {
    opacity: 0.26;
  }

  .signals-inner {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .signals-copy {
    max-width: 680px;
  }

  .signals-copy h2 {
    max-width: 680px;
    font-size: clamp(3.25rem, 7vw, 5.2rem);
  }

  .signals-collage {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: none;
    gap: 16px;
  }

  .signal-card {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 210px;
  }

  .signal-card-kidney {
    grid-column: auto;
    grid-row: auto;
    min-height: 210px;
  }

  .signal-card-weight {
    grid-column: auto;
    grid-row: auto;
    min-height: 210px;
  }

  .signal-card-mouth {
    grid-column: auto;
    grid-row: auto;
    width: auto;
  }

  .signal-card-litter,
  .signal-card-vomit,
  .signal-card-food {
    grid-column: auto;
    grid-row: auto;
    min-height: 210px;
  }

  .no-conflict-section {
    min-height: 0;
    padding-top: 104px;
    padding-bottom: 112px;
  }

  .founding-offer-section {
    min-height: 0;
    padding-top: 96px;
    padding-bottom: 92px;
  }

  .founding-inner {
    min-height: 0;
    grid-template-columns: minmax(360px, 0.82fr) minmax(180px, 0.36fr) minmax(430px, 0.96fr);
    column-gap: 18px;
  }

  .founding-cat {
    width: min(28vw, 330px);
    min-width: 240px;
    margin-left: -58px;
  }

  .founding-ribbon {
    min-width: 260px;
    padding-inline: 28px;
  }

  .founding-price strong {
    font-size: clamp(5rem, 8vw, 6.5rem);
  }

  .founding-cta {
    min-height: 72px;
  }

}

/* Header compacto para tablets y ventanas estrechas. El resto de la home conserva
   sus breakpoints, pero el menú no intenta encajar una navegación desktop cuando
   ya no hay aire suficiente para logo, enlaces, idioma y CTA. */
@media (max-width: 960px) {
  .site-header {
    top: 14px;
    padding: 0 16px;
  }

  .nav-shell,
  .site-header.is-scrolled .nav-shell {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    padding: 7px 8px 7px 14px;
    background: var(--ic-bg-glass);
    color: var(--ink);
    border-radius: var(--ic-radius-pill);
    box-shadow: var(--ic-shadow-soft);
  }

  .nav-shell::before,
  .button-secondary,
  .hero-ficha-card,
  .diet-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-header--flat .nav-shell {
    min-height: 72px;
  }

  .site-header--flat.is-scrolled .nav-shell,
  .site-header--flat.is-floating .nav-shell {
    min-height: 56px;
  }

  .site-header.is-dark .nav-shell,
  .site-header.is-dark.is-scrolled .nav-shell {
    background: rgba(var(--ic-petrol-rgb) / 0.94);
    color: var(--ic-text-inverse);
    border-color: rgba(var(--ic-cream-rgb) / 0.24);
    box-shadow: 0 18px 54px rgb(var(--ic-petrol-950-rgb) / 0.34);
  }

  .brand {
    width: clamp(92px, 17vw, 132px);
    height: 38px;
  }

  .menu-toggle {
    display: inline-flex;
    order: 3;
  }

  .nav-end {
    order: 2;
    gap: 8px;
  }

  .nav-links {
    position: fixed;
    z-index: 30;
    inset: 76px 16px auto;
    display: grid;
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
    justify-items: center;
    align-content: start;
    gap: 0;
    padding: 18px;
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink);
    box-shadow: var(--ic-shadow-floating);
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
    transition:
      opacity 220ms var(--ic-ease-soft),
      transform 220ms var(--ic-ease-soft);
  }

  .nav-links a {
    width: min(100%, 520px);
    padding: 18px 4px;
    border-bottom: 1px solid rgba(var(--ic-petrol-rgb) / 0.12);
    font-family: var(--ic-font-body);
    font-size: 1.12rem;
    font-weight: 700;
    transform: none;
  }

  .nav-links a::before,
  .nav-links a::after {
    display: none;
  }

  .nav-links a:last-child {
    border-bottom: 0;
  }

  body.menu-open .nav-links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-header .button {
    padding-inline: 14px;
    background: var(--terracotta);
    border-color: var(--terracotta);
    color: var(--ic-action-button-ink);
  }
}

@media (max-width: 820px) {
  .site-header {
    top: 14px;
    padding: 0 16px;
  }

  .nav-shell,
  .site-header.is-scrolled .nav-shell {
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr auto auto;
    padding: 7px 8px 7px 14px;
    background: var(--ic-bg-glass);
    color: var(--ink);
    border-radius: var(--ic-radius-pill);
    box-shadow: var(--ic-shadow-soft);
  }

  /* en móvil la cápsula flotante también aplica (mismo efecto), solo con un
     radio algo menor acorde a la barra compacta */
  .nav-shell::before { border-radius: 22px; }

  .site-header.is-dark .nav-shell,
  .site-header.is-dark.is-scrolled .nav-shell {
    background: rgba(var(--ic-petrol-rgb) / 0.94);
    color: var(--ic-text-inverse);
    border-color: rgba(var(--ic-cream-rgb) / 0.24);
    box-shadow: 0 18px 54px rgb(var(--ic-petrol-950-rgb) / 0.34);
  }

  .site-header .brand-logo {
    width: 100%;
  }

  /* Logo según la PASTILLA, no el contenido (igual que en escritorio): con la
     cápsula petrol oscura (is-floating, contenido claro) va el lockup reversed
     claro; con la cápsula clara (is-dark) o arriba sobre el crema, el primary
     oscuro. Antes iba por is-dark → logo claro, que sobre la cápsula clara
     invertida quedaba casi invisible. */
  .site-header .brand-logo--light {
    opacity: 0;
  }

  .site-header .brand-logo--dark {
    opacity: 1;
  }

  .site-header.is-floating:not(.is-dark) .brand-logo--light {
    opacity: 1;
  }

  .site-header.is-floating:not(.is-dark) .brand-logo--dark {
    opacity: 0;
  }

  .brand {
    width: 82px;
    height: 32px;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .nav-links {
    position: fixed;
    z-index: 30;
    inset: 76px 16px auto;
    display: grid;
    gap: 0;
    padding: 18px;
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink);
    box-shadow: var(--ic-shadow-floating);
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
    transition:
      opacity 180ms ease,
      transform 180ms ease;
  }

  .nav-links a {
    padding: 18px 4px;
    border-bottom: 1px solid rgba(var(--ic-petrol-rgb) / 0.12);
    font-size: 1.12rem;
    font-family: var(--ic-font-body);
    font-weight: 700;
  }

  .nav-links a::after {
    display: none;
  }

  .nav-links a:last-child {
    border-bottom: 0;
  }

  body.menu-open .nav-links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-header .button {
    padding-inline: 14px;
    background: var(--terracotta);
    border-color: var(--terracotta);
    color: var(--ic-action-button-ink);
  }

  .hero-content {
    padding: 150px 24px 54px;
  }

  /* En estrecho el texto cae SOBRE el gato blanco: velo vertical en vez del
     lateral de desktop (reforzado abajo, donde viven CTAs y proof points). */
  .hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(var(--ic-petrol-rgb) / 0.45),
      rgba(var(--ic-petrol-rgb) / 0.3) 45%,
      rgba(var(--ic-petrol-rgb) / 0.6)
    );
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-title {
    max-width: 680px;
    font-size: 4rem;
  }

  .hero-copy {
    margin: 26px 0 22px;
    max-width: 610px;
    font-size: 1.02rem;
  }

  .hero-tags {
    max-width: 500px;
  }

  .concern-finder {
    padding: 84px var(--ic-container-padding-x) 104px;
  }

  .concern-header {
    margin-bottom: 42px;
  }

  .concern-title,
  .how-overview-header h2,
  .signals-section h2.display {
    font-size: clamp(2.6rem, 12vw, 3.4rem);
  }

  .how-overview {
    padding: 94px 20px 104px;
  }


  .how-process {
    margin-top: 54px;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .how-step {
    min-height: 0;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 20px;
    padding: 22px;
    border-radius: var(--ic-radius-lg);
  }

  .how-step-number {
    width: 48px;
    height: 48px;
    margin: 0;
    font-size: 1.25rem;
  }

  .how-step-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 16px;
  }

  .how-step h3 {
    font-size: clamp(1.72rem, 7vw, 2.28rem);
  }

  .how-feature-card {
    min-height: 440px;
    border-radius: var(--ic-radius-xl);
  }

  .how-feature-card img {
    object-position: center 20%;
  }

  /* una sola capa vertical y más ligera en el tercio medio: el gato asoma
     y el copy sigue anclado abajo sobre la franja .9 */
  .how-feature-scrim {
    background:
      linear-gradient(180deg, rgba(var(--ic-cream-rgb) / 0.92) 0%, rgba(var(--ic-cream-rgb) / 0.28) 48%, rgba(var(--ic-cream-rgb) / 0.9) 100%);
  }

  .how-feature-copy {
    width: auto;
    padding: 92px 24px 28px;
    justify-content: flex-end;
  }

  .how-feature-copy h3 {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }

  .how-overview-cta {
    width: min(100%, 360px);
  }

  .signals-section {
    padding: 76px 20px 86px;
  }

  .signals-shape-petrol {
    width: 76vw;
    height: 76vw;
    right: -42vw;
    top: 280px;
  }

  .signals-shape-sage {
    width: 82vw;
    height: 260px;
    left: -28vw;
    bottom: 8%;
  }

  .signals-cat-outline {
    display: none;
  }

  .signals-copy h2 {
    font-size: clamp(3rem, 10vw, 4.25rem);
  }

  .signals-copy p:not(.eyebrow--slash) {
    margin-top: 22px;
    font-size: 1.02rem;
  }

  .signals-collage {
    grid-template-areas: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .signal-card {
    min-height: 0;
  }

  .signal-card-weight {
    min-height: 0;
  }

  .signal-card-mouth {
    grid-column: auto;
  }

  .signal-card,
  .signal-card-kidney,
  .signal-card-weight,
  .signal-card-litter,
  .signal-card-vomit,
  .signal-card-food {
    min-height: 0;
    grid-column: auto;
    grid-row: auto;
  }

  .signal-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon text";
    column-gap: 16px;
    align-content: start;
    min-height: 0;
    padding: 18px;
  }

  .signal-card-mouth {
    grid-column: auto;
    display: grid;
    min-height: 0;
  }

  .signal-icon,
  .signal-card-mouth .signal-icon {
    grid-area: icon;
    --ds-line-icon-size: 56px;
    align-self: start;
  }

  .signal-card h3,
  .signal-card-mouth h3 {
    grid-area: title;
    margin-top: 9px;
    font-size: clamp(1.45rem, 4vw, 1.85rem);
  }

  .signal-card p,
  .signal-card-mouth p {
    grid-area: text;
    max-width: none;
    margin-top: 8px;
    font-size: 0.92rem;
    line-height: 1.38;
  }

  .signal-plant,
  .signal-rings,
  .signal-dots,
  .signal-dot-grid {
    display: none;
  }

  .no-conflict-section {
    padding: 88px 20px 104px;
  }

  .founding-offer-section {
    padding: 88px 20px 104px;
    scroll-margin-top: 84px;
  }

  .founding-inner {
    width: min(100%, 760px);
    grid-template-columns: minmax(0, 0.92fr) minmax(220px, 0.58fr);
    grid-template-areas:
      "copy copy"
      "cat panel"
      "addon addon"
      "cta cta";
    gap: 24px 18px;
  }

  .founding-cat {
    grid-area: cat;
    justify-self: end;
    align-self: end;
    width: min(100%, 300px);
    min-width: 0;
    margin: 0 -16px -40px 0;
  }

  .founding-ribbon {
    min-width: 230px;
    min-height: 54px;
    font-size: 0.75rem;
  }

  .founding-ribbon span {
    width: 36px;
    height: 36px;
  }

  .founding-price strong {
    font-size: clamp(5rem, 15vw, 6.5rem);
  }

  .founding-cta {
    grid-area: cta;
    grid-column: auto;
    grid-row: auto;
    width: min(100%, 560px);
    justify-self: center;
  }

  .concern-header p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .concern-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .concern-card {
    min-height: 104px;
    grid-template-columns: 58px minmax(0, 1fr) 24px;
    gap: 16px;
    padding: 18px;
    border-radius: var(--ic-radius-lg);
  }

  .concern-card::before {
    border-radius: calc(var(--ic-radius-lg) - 1px);
  }

  .concern-icon {
    width: 58px;
    height: 58px;
  }

  .concern-icon svg {
    width: 35px;
    height: 35px;
  }

  .concern-label {
    font-size: 1.42rem;
  }

  .concern-footer {
    margin-top: 36px;
    gap: 20px;
  }

  .concern-cta {
    width: min(100%, 360px);
  }

}

@media (max-width: 700px) {
  /* El crossfade hero->criteria de -100svh es elegante en desktop pero en
     390x844 son ~2 pantallas de crema vacía: se acorta el underlap A PARES
     (margen y padding juntos) y los stops del gradiente en proporción. */
  .hero-subtitle {
    text-wrap: balance;
  }

  .hero-subtitle br {
    display: none;
  }

  .hero-proof-grid {
    width: min(100%, 360px);
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 28px;
  }

  .hero-proof {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
  }

  .hero-proof + .hero-proof {
    margin-top: 14px;
    padding-top: 14px;
    padding-left: 0;
    border-top: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.26);
    border-left: 0;
  }

  .hero-proof p {
    max-width: 240px;
    font-size: 0.95rem;
    line-height: 1.35;
  }

  .signals-section {
    padding: 72px 20px 82px;
  }

  .signals-shape-petrol {
    width: 92vw;
    height: 92vw;
    right: -62vw;
    top: 300px;
  }

  .signals-shape-sage {
    width: 98vw;
    height: 250px;
    left: -34vw;
    bottom: 4%;
  }

  .signals-copy h2 {
    font-size: clamp(2.72rem, 12vw, 3.65rem);
  }

  .signals-collage {
    grid-template-areas: none;
    grid-template-columns: 1fr;
  }

  .signal-card,
  .signal-card-weight,
  .signal-card-litter,
  .signal-card-vomit,
  .signal-card-food {
    min-height: 0;
  }

  .signal-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon text";
    column-gap: 14px;
    padding: 18px;
  }

  .signal-card-mouth {
    display: grid;
    grid-column: auto;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon text";
    column-gap: 14px;
  }

  .signal-icon,
  .signal-card-mouth .signal-icon {
    grid-area: icon;
    --ds-line-icon-size: 54px;
    align-self: start;
  }

  .signal-card h3,
  .signal-card-mouth h3 {
    grid-area: title;
    margin-top: 8px;
    font-size: clamp(1.42rem, 7vw, 1.8rem);
  }

  .signal-card p,
  .signal-card-mouth p {
    grid-area: text;
    max-width: none;
    margin-top: 8px;
    font-size: 0.9rem;
    line-height: 1.38;
  }














  .founding-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "cat"
      "panel"
      "addon"
      "cta";
    gap: 22px;
  }

  .founding-cat {
    justify-self: center;
    width: min(76vw, 330px);
    margin: 0 0 -18px;
  }

  .founding-cta {
    width: min(100%, 560px);
    justify-self: center;
  }

  .founding-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "cat"
      "panel"
      "addon"
      "cta";
    gap: 22px;
  }

  .founding-cat {
    justify-self: center;
    width: min(72vw, 300px);
    margin: -8px 0 -24px;
  }

  .founding-price span {
    margin-bottom: 7px;
    font-size: 1.7rem;
  }

  .founding-price small {
    font-size: 0.68rem;
  }

  .founding-cta {
    width: min(100%, 540px);
    min-height: 64px;
    padding-left: 24px;
    padding-right: 78px;
    font-size: 1.35rem;
  }

  .founding-cta span {
    width: 48px;
    height: 48px;
    right: 10px;
    font-size: 1.5rem;
  }}

@media (max-width: 520px) {
  .site-header .button {
    display: none;
  }

  /* El CTA del header se esconde en ≤520px: reaparece como último item del
     panel hamburguesa para que el móvil no se quede sin vía de conversión
     hasta pricing. Pisa el estilo plano de .nav-links a (0,2,0 > 0,1,1). */
  .site-header .nav-links .nav-menu-cta {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    margin-top: 12px;
    padding: 15px 18px;
    border-bottom: 0;
    border-radius: 999px;
    background: var(--terracotta);
    border-color: var(--terracotta);
    color: var(--ic-action-button-ink);
    font-family: var(--ic-font-display);
    font-weight: 600;
    font-size: 1.05rem;
  }

  /* CTA oculto: el grupo derecho queda solo con el selector ES|CA. Le damos su
     propia columna (1fr auto auto) para que NO baje a una 2ª fila, y lo
     colocamos a la izquierda del botón de menú. */
  .nav-shell,
  .site-header.is-scrolled .nav-shell {
    grid-template-columns: 1fr auto auto;
  }

  .nav-end {
    order: 2;
    gap: 0;
  }

  .menu-toggle {
    order: 3;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-copy {
    font-size: 0.98rem;
    line-height: 1.5;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions .button {
    width: 100%;
    max-width: 320px;
  }

  /* Compactar el primer viewport: la 1ª proof-row entra completa sobre el
     fold (señal de confianza visible) y la 2ª asoma como cue de scroll. */
  .hero-content {
    padding-top: 116px;
  }

  .hero-actions {
    gap: 14px;
  }

  .hero-proof-grid {
    margin-top: 18px;
  }

  .concern-finder {
    padding-top: 72px;
    padding-left: var(--ic-container-padding-x);
    padding-right: var(--ic-container-padding-x);
  }

  .concern-title span {
    display: block;
  }

  .section-eyebrow {
    margin-bottom: 16px;
    font-size: 0.68rem;
    letter-spacing: 0.28em;
  }

  .how-overview {
    padding-left: var(--ic-container-padding-x);
    padding-right: var(--ic-container-padding-x);
  }

  .how-overview-header > p:last-child {
    margin-top: 18px;
    font-size: 1rem;
  }

  .how-step {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
  }

  .how-step-number {
    width: 42px;
    height: 42px;
    font-size: 1.12rem;
  }

  .how-step-icon {
    width: 56px;
    height: 56px;
  }

  .how-step p,
  .how-feature-copy p {
    font-size: 0.96rem;
  }

  .how-feature-card {
    min-height: 440px;
  }

  .how-feature-number {
    top: 18px;
    left: 18px;
  }

  .how-feature-copy {
    padding: 78px 20px 24px;
  }

  .how-overview-actions p {
    align-items: flex-start;
    font-size: 0.94rem;
  }

  .signals-section {
    padding-left: var(--ic-container-padding-x);
    padding-right: var(--ic-container-padding-x);
  }

  .signals-copy h2 {
    font-size: clamp(2.72rem, 12vw, 3.65rem);
  }

  .signal-card {
    /* mismo token que ds-card: la paridad de radios es contrato del DS */
    border-radius: var(--ic-radius-xl);
  }

  .signal-icon,
  .signal-card-mouth .signal-icon {
    width: 48px;
    height: 48px;
  }

  .signal-plant,
  .signal-rings {
    opacity: 0.52;
  }

  .signal-dot-grid {
    right: 22px;
    bottom: 22px;
  }

  .no-conflict-section {
    padding-left: var(--ic-container-padding-x);
    padding-right: var(--ic-container-padding-x);
  }

  .founding-offer-section {
    padding-left: var(--ic-container-padding-x);
    padding-right: var(--ic-container-padding-x);
  }

  .founding-cat {
    width: min(78vw, 285px);
    /* el min-width:290px base anularia el width de arriba sin esto. */
    min-width: 0;
  }

  .founding-ribbon {
    min-width: 204px;
    min-height: 50px;
    gap: 10px;
    padding-inline: 20px;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
  }

  .founding-ribbon span {
    width: 32px;
    height: 32px;
  }

  .founding-price strong {
    font-size: clamp(4.4rem, 19vw, 5.4rem);
  }

  .founding-cta {
    font-size: 1.18rem;
  }

  .concern-rule {
    margin-top: 20px;
    margin-bottom: 22px;
  }

  .concern-card {
    grid-template-columns: 54px minmax(0, 1fr) 22px;
  }

  .concern-icon {
    width: 54px;
    height: 54px;
  }

  .concern-label {
    font-size: 1.28rem;
  }

  .concern-cta {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .tag {
    min-height: 28px;
    padding-inline: 10px;
    font-size: 0.74rem;
  }
  .final-copy h2 {
    font-size: 3rem;
  }}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  /* 8: draw-in de marcadores siempre trazado (segunda fuente, independiente de
     .in-view): el marcador queda a scaleX(1) aunque la seccion no se haya revelado. */
  .ds-marker-underline,
  .reveal:not(.in-view) .ds-marker-underline {
    --marker-draw: 1;
  }

}

/* ===================== CRITERIO (intro post-hero) =====================
   Seccion editorial entre hero y concern-finder: copy + tarjeta de Eva,
   tres motivos (cards) y un banner de cierre. Reutiliza DS: .ds-container,
   .eyebrow--marker, .ds-marker-underline, .ds-dot-ring, .ds-card, .icon-circle,
   .ds-stroke-icon, tokens --ic-*. Animacion: .reveal (scroll-timeline
   + IO fallback), stagger por --card-index, parallax de la foto via view(). */
.criteria {
  position: relative;
  z-index: 1;
  overflow: clip;
  /* criteria es la 1a seccion tras el hero: hereda el "underlap" que tenia
     concern-finder para fundir la salida sticky del hero (margin negativo +
     padding-top de 100svh + gradiente sage->cream->page). */
  /* La hero enmarcada fluye normal: sin underlap ni aritmética svh. */
  margin-top: 0;
  padding:
    clamp(56px, 7vw, 104px)
    var(--ic-container-padding-x)
    clamp(56px, 7vw, 108px);
  background:
    linear-gradient(180deg, rgba(var(--ic-sage-rgb) / 0.28) 0%, rgba(var(--ic-cream-rgb) / 0.92) 180px, var(--ic-bg-page) 420px),
    var(--ic-bg-page);
  color: var(--ic-text-primary);
}

/* Emergencia con scroll (patrón de la referencia): la primera sección tras el
   hero (la banda de confianza) arranca metida bajo el vídeo (translateY
   negativo + scale) y se libera durante los primeros ~60vh de scroll — el
   vídeo sube y esto aparece por debajo, más lento. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .trustbar {
      animation: criteria-emerge cubic-bezier(0.3, 0.55, 0.35, 1) both;
      animation-timeline: scroll(root);
      animation-range: 0px 60vh;
    }
  }
}

@keyframes criteria-emerge {
  from { transform: translateY(clamp(-220px, -22vh, -120px)) scale(0.97); }
  to { transform: none; }
}

/* --- eyebrow // de la casa (labels de sección estilo editorial) --- */
.eyebrow--slash {
  display: inline-block;
  font-family: var(--ic-font-mono);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eyebrow-color, rgba(var(--ic-petrol-rgb) / 0.72));
}

.eyebrow--slash::before {
  content: "// ";
  color: var(--ic-color-mustard);
  font-weight: 500;
}

/* --- banda de confianza (marquee suave de claims) --- */
.trustbar {
  overflow: clip;
  padding: clamp(22px, 2.6vw, 30px) 0;
  border-bottom: 1px solid rgba(var(--ic-petrol-rgb) / 0.12);
  background: var(--ic-bg-page);
}

.trustbar-track {
  display: flex;
  width: max-content;
}

.trustbar-group {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  flex: none;
}

.trustbar-group li {
  display: inline-flex;
  align-items: center;
  padding-right: clamp(44px, 5vw, 84px);
  font-family: var(--ic-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ic-petrol-rgb) / 0.82);
}

.trustbar-group li::before {
  content: "+";
  margin-right: 12px;
  font-weight: 500;
  font-size: 1.05em;
  color: var(--ic-color-mustard);
}

@media (prefers-reduced-motion: no-preference) {
  .trustbar-track { animation: trustbar-marquee 38s linear infinite; }
  .trustbar:hover .trustbar-track { animation-play-state: paused; }
}

@keyframes trustbar-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Glow superior que funde con la salida del hero (rol antes en concern-finder). */
.criteria::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: clamp(320px, 40vw, 560px);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--ic-sage-rgb) / 0.5) 0%, rgba(var(--ic-sage-rgb) / 0.24) 34%, rgba(var(--ic-cream-rgb) / 0) 72%),
    radial-gradient(ellipse at 50% 20%, rgba(var(--ic-mustard-rgb) / 0.1), rgba(var(--ic-cream-rgb) / 0) 46%);
  pointer-events: none;
}

.criteria-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 92px);
}

/* ---- TOP: copy editorial + tarjeta de Eva ---- */
.criteria-head {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.2fr);
  gap: clamp(36px, 5vw, 82px);
  align-items: center;
}

.criteria-eyebrow {
  --eyebrow-color: var(--ic-color-petrol);
  margin-bottom: clamp(20px, 2vw, 30px);
}

.criteria-context {
  margin: 0 0 clamp(24px, 3vw, 38px);
  max-width: 58ch;
  color: rgba(var(--ic-petrol-rgb) / 0.78);
  font-size: clamp(1.05rem, 1.45vw, 1.32rem);
  line-height: 1.52;
}

.criteria-title {
  margin: 0;
  color: var(--ic-text-primary);
  font-size: var(--ic-type-h2-size);
  font-weight: 500;
  line-height: var(--ic-type-h2-line);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.criteria-dot {
  color: var(--ic-color-mustard);
}

.criteria-underline {
  margin: clamp(20px, 1.9vw, 28px) 0 0;
  --marker-w: min(248px, 62%);
}

.criteria-lede {
  max-width: 460px;
  margin: clamp(22px, 2.2vw, 30px) 0 0;
  color: var(--ic-text-muted);
  font-size: clamp(1.04rem, 1.2vw, 1.22rem);
  line-height: 1.56;
}

/* Eva: foto (blob organico + decoraciones) + caption. */
.criteria-eva {
  display: grid;
  grid-template-columns: clamp(186px, 19vw, 290px) minmax(0, 1fr);
  gap: clamp(24px, 2.6vw, 48px);
  align-items: center;
}

.criteria-eva figcaption .button {
  margin-top: 18px;
}

.criteria-eva-stage {
  position: relative;
  aspect-ratio: 1;
}

.criteria-eva-photo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 47% 53% 46% 54% / 56% 47% 53% 44%;
  box-shadow: var(--ic-shadow-card-md);
}

.criteria-eva-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
}

.criteria-eva-blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.criteria-eva-blob-sage {
  width: 88%;
  aspect-ratio: 1;
  top: -11%;
  left: -15%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--ic-color-sage), rgba(var(--ic-sage-rgb) / 0) 70%);
  opacity: 0.72;
}

.criteria-eva-blob-mustard {
  width: 48%;
  aspect-ratio: 1;
  right: -9%;
  bottom: -7%;
  border-radius: 46% 54% 50% 50% / 56% 44% 56% 44%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--ic-mustard-rgb) / 0.9), rgba(var(--ic-mustard-rgb) / 0) 72%);
}

.criteria-eva-ring {
  --ring-size: clamp(118px, 13vw, 188px);
  --ring-tilt: 30deg;
  z-index: 1;
  left: -11%;
  bottom: -7%;
}

.criteria-eva-arc {
  position: absolute;
  z-index: 1;
  width: 72%;
  aspect-ratio: 1;
  top: -9%;
  right: -11%;
  border: 1.5px solid rgba(var(--ic-petrol-rgb) / 0.22);
  border-radius: 50%;
  pointer-events: none;
}

.criteria-eva-bio {
  margin: 0;
  color: var(--ic-text-muted);
  font-size: clamp(0.98rem, 1.05vw, 1.1rem);
  line-height: 1.58;
}

.criteria-eva-divider {
  display: block;
  width: 100%;
  max-width: 232px;
  height: 1px;
  margin: clamp(18px, 1.8vw, 26px) 0 clamp(10px, 1vw, 16px);
  background: linear-gradient(90deg, rgba(var(--ic-petrol-rgb) / 0.3), rgba(var(--ic-petrol-rgb) / 0));
}

.criteria-eva-sign {
  display: block;
  width: clamp(188px, 17vw, 244px);
  height: auto;
  /* la firma manuscrita ya viene en tinta petrol sobre fondo transparente */
  margin: 4px 0 0 -4px;
  opacity: 0.94;
}

/* ---- MIDDLE: tres motivos ---- */
.criteria-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.criteria-source-note {
  max-width: 78rem;
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid rgba(var(--ic-petrol-rgb) / 0.14);
  color: var(--ic-text-muted);
  font-size: clamp(0.72rem, 0.82vw, 0.8rem);
  line-height: 1.5;
}

.criteria-source-note a {
  color: var(--ic-color-petrol);
  font-weight: 700;
  text-decoration-color: rgba(var(--ic-mustard-rgb) / 0.8);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.criteria-card {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.3vw, 20px);
  padding: clamp(26px, 2.6vw, 40px);
  background: var(--ic-surface-default);
}

.criteria-card-icon {
  --ds-line-icon-size: clamp(54px, 5vw, 66px);
  --ds-line-icon-svg-size: 52%;
  --ds-line-icon-stroke: 1.7;
  --ds-line-icon-border-alpha: 0.32;
  --ds-line-icon-bg: rgb(var(--ic-cream-rgb) / 0.62);
}

.criteria-card-icon svg {
  width: var(--ds-line-icon-svg-size);
  stroke-width: var(--ds-line-icon-stroke);
}

.criteria-card-title {
  margin: 0;
  color: var(--ic-text-primary);
  font-family: var(--ic-font-display);
  font-size: clamp(1.34rem, 1.6vw, 1.64rem);
  font-weight: 600;
  line-height: 1.13;
}

.criteria-card p {
  margin: 0;
  color: var(--ic-text-muted);
  font-size: clamp(0.96rem, 1.02vw, 1.05rem);
  line-height: 1.56;
}

/* ---- BOTTOM: banner de cierre ---- */
.criteria-banner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(22px, 2.4vw, 34px) clamp(28px, 3.4vw, 58px);
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.16);
  border-radius: var(--ic-radius-2xl);
  background:
    radial-gradient(130% 200% at 0% 50%, rgba(var(--ic-sage-rgb) / 0.5), transparent 58%),
    rgba(var(--ic-sage-rgb) / 0.2);
  text-decoration: none;
  transition:
    box-shadow 380ms var(--ic-ease-soft),
    transform 380ms var(--ic-ease-soft);
}

.criteria-banner-leaf {
  flex: 0 0 auto;
  width: clamp(64px, 8vw, 104px);
  color: rgba(var(--ic-petrol-rgb) / 0.5);
}

.criteria-banner-leaf svg {
  display: block;
  width: 100%;
  height: auto;
  stroke-width: 1.6;
}

.criteria-banner-leaf path:not(.criteria-leaf-stem) {
  fill: rgba(var(--ic-sage-rgb) / 0.55);
  stroke: rgba(var(--ic-petrol-rgb) / 0.4);
}

.criteria-banner-text {
  flex: 1 1 auto;
  margin: 0;
  text-align: center;
  color: var(--ic-text-primary);
  font-family: var(--ic-font-display);
  font-size: clamp(1.16rem, 1.7vw, 1.72rem);
  font-weight: 500;
  line-height: 1.3;
}

.criteria-banner-text strong {
  color: var(--ic-color-petrol);
  font-weight: 600;
}

.criteria-banner-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(44px, 4vw, 56px);
  aspect-ratio: 1;
  border: 1.5px dotted var(--ic-color-coral);
  border-radius: 50%;
  color: var(--ic-color-coral);
  transition:
    transform 380ms var(--ic-ease-soft),
    background 380ms var(--ic-ease-soft),
    color 380ms var(--ic-ease-soft);
}

.criteria-banner-arrow svg {
  width: 44%;
  stroke-width: 2;
}

.criteria--bento .bento-head .reveal { transition-delay: calc(var(--card-index, 0) * 120ms); }

/* Stagger de las cards: real con scroll-timeline (ventana por --card-index)... */
@supports (animation-timeline: view()) {
  .criteria-card.reveal:not(.reveal--motor) {
    animation-range:
      entry calc(0% + var(--card-index, 0) * 4%)
      cover calc(18% + var(--card-index, 0) * 4%);
  }

  /* los 4 bloques del bento head entran en cascada (intro→foto→ficha→CTA) */
  .criteria--bento .bento-head .reveal:not(.reveal--motor) {
    animation-range:
      entry calc(0% + var(--card-index, 0) * 6%)
      cover calc(20% + var(--card-index, 0) * 6%);
  }

  /* Parallax sutil de la foto de Eva, sin tocar el motor rAF. */
  @media (prefers-reduced-motion: no-preference) {
    .criteria-eva-photo {
      animation: criteria-eva-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    @keyframes criteria-eva-drift {
      from { transform: translateY(24px); }
      to { transform: translateY(-24px); }}}}

/* ...y fallback IO: stagger por transition-delay. */
.criteria-card.reveal:not(.reveal--motor) {
  transition-delay: calc(var(--card-index, 0) * 80ms);
}

/* Micro-interacciones hover (sin sticky-hover en tactil). */
@media (hover: hover) {
  .criteria-card.in-view {
    transition:
      --reveal-lift var(--ic-duration-slow) var(--ic-ease-soft),
      box-shadow var(--ic-duration-slow) var(--ic-ease-soft);
  }

  .criteria-card.in-view:hover {
    --reveal-lift: -6px;
    box-shadow: var(--ic-shadow-card-lg);
  }

  .criteria-banner:hover {
    transform: translateY(-2px);
    box-shadow: var(--ic-shadow-card);
  }

  .criteria-banner:hover .criteria-banner-arrow {
    transform: translateX(3px);
    background: var(--ic-color-coral);
    color: var(--ic-color-cream);
  }}

/* Responsive. */
@media (max-width: 1080px) {
  .criteria-head {
    grid-template-columns: 1fr;
    gap: clamp(36px, 6vw, 56px);
  }

  .criteria-lede {
    max-width: none;
  }}

@media (max-width: 760px) {
  .criteria-eva {
    grid-template-columns: 1fr;
    gap: 28px;
    justify-items: start;
  }

  .criteria-eva-stage {
    width: min(320px, 76%);
  }

  .criteria-cards {
    grid-template-columns: 1fr;
  }

  .criteria-card-title br {
    display: none;
  }

  .criteria-banner {
    flex-direction: column;
    gap: 18px;
    padding: 30px 26px;
  }}

/* ===================== NO VENDEMOS COMIDA — responsive =====================
   Va al final del archivo a proposito: gana (orden de origen) a los overrides
   .no-conflict-section heredados de los @media anteriores. */
@media (max-width: 900px) {
  .nc-card {
    grid-template-columns: 1fr;
    gap: clamp(30px, 6vw, 46px);
    align-items: stretch;
  }

  .nc-lede {
    max-width: none;
  }}

@media (max-width: 520px) {
  /* el clamp base de .nc-title/.nc-claim tiene un piso alto; en moviles estrechos
     el vw no baja del piso, asi que reducimos el minimo (como criteria-title). */
  .nc-title,
  .criteria-title {
    font-size: clamp(2.1rem, 9.5vw, 2.7rem);
  }

  .nc-claim {
    font-size: clamp(1.7rem, 7vw, 2.4rem);
  }}

@media (max-width: 460px) {
  .nc-card {
    padding: 30px 22px;
  }

  .nc-side {
    padding: 26px 12px;
  }

  /* los <br /> se conservan: quitarlos pegaba las palabras (asu, quénecesita) */

  .nc-versus {
    width: 50px;
  }
}

/* ===================== FAQ (preguntas frecuentes) =====================
   Acordeon nativo con <details>/<summary> (accesible, sin JS, crawleable para
   GEO/FAQPage). Reutiliza DS: .ds-container, .eyebrow--marker, tokens --ic-*. */
.faq {
  position: relative;
  padding: var(--ic-section-padding-y) var(--ic-container-padding-x);
  background: var(--ic-bg-page);
  color: var(--ic-text-primary);
}

.faq-inner {
  --ic-container-wide: 960px;
  display: grid;
  gap: clamp(34px, 4vw, 58px);
}

.faq-head {
  max-width: 760px;
}

.faq-eyebrow {
  --eyebrow-color: var(--ic-color-petrol);
  margin-bottom: clamp(18px, 2vw, 28px);
}

.faq-title {
  margin: 0;
  color: var(--ic-text-primary);
  font-size: var(--ic-type-h2-size);
  font-weight: 500;
  line-height: var(--ic-type-h2-line);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.faq-dot {
  color: var(--ic-color-mustard);
}

.faq-list {
  display: grid;
  gap: clamp(12px, 1.2vw, 16px);
  width: min(100%, 880px);
}

.faq-item {
  border: 1px solid var(--ic-border-default);
  border-radius: var(--ic-radius-card);
  background: var(--ic-surface-default);
  transition: border-color 280ms var(--ic-ease-soft);
}

.faq-item[open] {
  border-color: rgba(var(--ic-petrol-rgb) / 0.28);
}

@keyframes faq-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-item[open] .faq-a {
  animation: faq-in 280ms var(--ic-ease-soft);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.6vw, 34px);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-q {
  font-family: var(--ic-font-display);
  font-size: clamp(1.1rem, 1.4vw, 1.42rem);
  font-weight: 400;
  line-height: 1.22;
  color: var(--ic-text-primary);
}

/* marca +/- (se vuelve – al abrir) */
.faq-mark {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--ic-radius-pill);
  border: 1.5px solid rgba(var(--ic-petrol-rgb) / 0.3);
  transition: background 280ms var(--ic-ease-soft), border-color 280ms var(--ic-ease-soft);
}

.faq-mark::before,
.faq-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 2px;
  border-radius: var(--ic-radius-pill);
  background: var(--ic-color-petrol);
  transform: translate(-50%, -50%);
  transition: transform 280ms var(--ic-ease-soft), opacity 280ms var(--ic-ease-soft);
}

.faq-mark::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-mark {
  background: var(--ic-color-mustard);
  border-color: var(--ic-color-mustard);
}

.faq-item[open] .faq-mark::before {
  background: var(--ic-color-petrol-ink);
}

.faq-item[open] .faq-mark::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-a {
  padding: 0 clamp(22px, 2.6vw, 34px) clamp(22px, 2.4vw, 30px);
}

.faq-a p {
  margin: 0;
  max-width: 64ch;
  color: var(--ic-text-body);
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.62;
}

.faq-a strong {
  color: var(--ic-text-primary);
  font-weight: 700;
}

.faq-a .faq-sources {
  margin-top: 14px;
  color: var(--ic-text-muted);
  font-size: 0.84rem;
}

.faq-a .faq-sources a {
  color: var(--ic-color-petrol);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (hover: hover) {
  .faq-item:has(summary:hover) {
    border-color: rgba(var(--ic-petrol-rgb) / 0.28);
  }
}

@media (max-width: 520px) {
  .faq-title {
    font-size: clamp(2.1rem, 9.5vw, 2.7rem);
  }
}

/* =============================================================================
   HOME SECTIONS v2 — micro-interacciones y motion (jun-2026)
   Capa de efectos para concern / how / signals / founding tras la recompactación:
   hover-lift, icon-pop, accent-grow y "shine" en las CTA. Todo bajo gates de
   (hover: hover) y prefers-reduced-motion para no estorbar en táctil/accesible.
============================================================================= */

/* ---- concern: pop del icono al hover (lift/borde ya existían) ---- */
.concern-icon {
  transition:
    background-color var(--ic-duration-slow) var(--ic-ease-soft),
    transform var(--ic-duration-base) var(--ic-ease-soft);
}
@media (hover: hover) {
  .concern-card:hover .concern-icon { transform: scale(1.07) rotate(-4deg); }
}
.concern-card:focus-visible .concern-icon { transform: scale(1.07) rotate(-4deg); }

/* ---- signals: las tarjetas eran estáticas; ahora reaccionan ---- */
.signal-card {
  transition:
    transform var(--ic-duration-slow) var(--ic-ease-soft),
    box-shadow var(--ic-duration-slow) var(--ic-ease-soft);
}
.signal-icon {
  transition:
    transform var(--ic-duration-base) var(--ic-ease-soft),
    border-color var(--ic-duration-base) var(--ic-ease-soft),
    background-color var(--ic-duration-base) var(--ic-ease-soft);
}
@media (hover: hover) {
  .signal-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--ic-mustard-rgb) / 0.6);
    box-shadow:
      0 26px 60px rgba(var(--ic-petrol-rgb) / 0.16),
      0 0 0 4px rgba(var(--ic-mustard-rgb) / 0.08),
      inset 0 1px 0 rgb(var(--ic-white-rgb) / 0.58);
  }
  .signal-card:hover .signal-icon {
    --ds-line-icon-border-alpha: 0.55;
    background: rgb(var(--ic-cream-rgb) / 0.78);
    transform: scale(1.08) rotate(-4deg);
  }
  .signal-card:hover .signal-num { color: rgba(var(--ic-petrol-rgb) / 0.72); }
}

/* numeración editorial de las señales (01–06) */
.signal-num {
  position: absolute;
  top: clamp(16px, 1.3vw, 20px);
  right: clamp(16px, 1.3vw, 20px);
  font-family: var(--ic-font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(var(--ic-petrol-rgb) / 0.42);
  transition: color var(--ic-duration-base) var(--ic-ease-soft);
}

.signal-num::before {
  content: "// ";
  color: var(--ic-color-mustard);
  font-weight: 500;
}

/* ---- how: pop del icono de cada paso ---- */
.how-step-icon { transition: transform var(--ic-duration-base) var(--ic-ease-soft); }
@media (hover: hover) {
  .how-step:hover .how-step-icon { transform: translateY(-3px) scale(1.06); }
}

/* ---- founding: la flecha de la CTA cobra vida ---- */
.founding-cta span {
  transition:
    transform var(--ic-duration-base) var(--ic-ease-soft),
    background-color var(--ic-duration-base) var(--ic-ease-soft);
}
@media (hover: hover) {
  .founding-cta:hover span { transform: translateX(4px) scale(1.06); }
}

/* ---- "shine": barrido de luz en las CTA principales al hover ---- */
.concern-cta,
.how-overview-cta,
.founding-cta { position: relative; overflow: hidden; }
.concern-cta::after,
.how-overview-cta::after,
.founding-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgb(var(--ic-white-rgb) / 0.3), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
@media (hover: hover) {
  .concern-cta:hover::after,
  .how-overview-cta:hover::after,
  .founding-cta:hover::after {
    animation: cta-shine 720ms var(--ic-ease-standard);
  }
}
@keyframes cta-shine {
  to { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .concern-icon,
  .signal-card,
  .signal-icon,
  .how-step-icon,
  .founding-cta span { transition: none; }
  .concern-cta::after,
  .how-overview-cta::after,
  .founding-cta::after { display: none; }
}

/* ===================== PRICING — tablet cleanup =====================
   The receipt redesign uses `.receipt-*`, but older `.founding-*` responsive
   rules still target the same DOM node. These overrides intentionally live late
   in the cascade so tablet portrait gets one readable column instead of a
   cramped two-column receipt. */
@media (max-width: 1100px) {
  .founding-offer-section {
    padding: clamp(82px, 11vw, 112px) 20px clamp(88px, 12vw, 124px);
  }

  .founding-offer-section .receipt-grid {
    width: min(100%, 680px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    row-gap: clamp(28px, 5vw, 44px);
    align-items: start;
  }

  .founding-offer-section .receipt-lede,
  .founding-offer-section .receipt-ticket {
    grid-column: auto;
    grid-row: auto;
    grid-area: auto;
  }

  .founding-offer-section .receipt-lede {
    max-width: 620px;
  }

  .founding-offer-section .receipt-lede h2 {
    max-width: 14ch;
    font-size: clamp(2.4rem, 6vw, 3.4rem);
  }

  .founding-offer-section .receipt-promise {
    max-width: 38rem;
  }

  .founding-offer-section .receipt-ticket {
    justify-self: stretch;
    width: min(100%, 560px);
    max-width: none;
    margin-inline: auto;
  }

  .founding-offer-section .founding-ribbon.receipt-stamp {
    min-width: 0;
    min-height: 0;
    padding: 3px 8px;
    font-size: 0.62rem;
  }

  .founding-offer-section .founding-ribbon.receipt-stamp span {
    width: auto;
    height: auto;
  }

  .founding-offer-section .founding-price strong {
    font-size: clamp(4.2rem, 12vw, 5.6rem);
  }

  .founding-offer-section .founding-price span {
    margin-bottom: 0;
    font-size: clamp(1.05rem, 3vw, 1.42rem);
  }

  .founding-offer-section .founding-cta {
    grid-column: auto;
    grid-row: auto;
    grid-area: auto;
    justify-self: stretch;
    width: 100%;
    min-height: 60px;
    padding: 0 12px 0 26px;
    font-size: clamp(1.05rem, 2.8vw, 1.24rem);
  }

  .founding-offer-section .founding-cta .icon-circle {
    position: static;
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
  }
}

@media (max-width: 430px) {
  .button {
    min-height: 54px;
    white-space: normal;
    line-height: 1.12;
    text-align: center;
  }

  .button-plus span {
    flex: 0 0 auto;
  }

  .hero-actions .button,
  .how-overview-cta,
  .founding-cta,
  .footer-cta {
    width: 100%;
  }

  .how-overview-cta,
  .founding-cta {
    justify-content: space-between;
  }

  .founding-offer-section .founding-cta {
    padding-left: 20px;
    padding-right: 10px;
  }
}

@media (max-width: 360px) {
  .button {
    padding-inline: 16px;
    font-size: 0.96rem;
  }

  .site-header .nav-links .nav-menu-cta {
    font-size: 0.98rem;
  }

  .how-overview-cta {
    padding-inline: 22px 14px;
    font-size: 1rem;
  }

  .founding-offer-section .founding-cta {
    font-size: 0.98rem;
  }
}

@media (max-width: 640px) {
  .founding-offer-section .receipt-lede h2 {
    max-width: 14ch;
    font-size: clamp(2.1rem, 9.5vw, 2.7rem);
  }

  .founding-offer-section .receipt-ticket {
    width: 100%;
  }

  .founding-offer-section .receipt-total {
    display: grid;
    gap: 10px;
  }

  .founding-offer-section .receipt-total-label {
    max-width: none;
  }
}

/* ===================== CARÁCTER (lote anti-plantilla) =====================
   Grano de papel global, collage real en señales, cuño que se estampa,
   cupones con temblor de papel y el precio rodeado a mano. */

/* Grano de papel: velo fijo de ruido a ~4% que unifica fotos y superficies
   (efecto película). Decorativo puro: sin eventos, fuera de print. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  background-image: url("assets/iron-cat/textures/paper-grain.svg");
}

@media print {
  body::after { content: none; }
}

/* Collage de señales: rotaciones y descuelgues sutiles por posición.
   La rotación viaja por --collage-tf para componer con el transform del
   reveal (que de otro modo la pisaría). */
.signals-collage .signal-card:nth-child(1) { --collage-tf: rotate(-1.1deg); }
.signals-collage .signal-card:nth-child(2) { --collage-tf: rotate(0.7deg); margin-top: 18px; }
.signals-collage .signal-card:nth-child(3) { --collage-tf: rotate(-0.4deg); margin-top: 7px; }
.signals-collage .signal-card:nth-child(4) { --collage-tf: rotate(0.8deg); margin-top: 10px; }
.signals-collage .signal-card:nth-child(5) { --collage-tf: rotate(-0.7deg); }
.signals-collage .signal-card:nth-child(6) { --collage-tf: rotate(0.5deg); margin-top: 16px; }

@media (max-width: 820px) {
  .signals-collage .signal-card:nth-child(n) { --collage-tf: rotate(0deg); margin-top: 0; }
}

/* El cuño "Primeros 100" se estampa al revelarse el ticket. */
@keyframes stamp-in {
  from { opacity: 0; transform: rotate(8deg) scale(1.7); }
  62% { opacity: 1; transform: rotate(8deg) scale(0.94); }
  to { opacity: 1; transform: rotate(8deg) scale(1); }
}

.receipt-ticket.in-view .receipt-stamp {
  animation: stamp-in 420ms var(--ic-ease-soft) 320ms backwards;
}

/* Temblor de papel del cupón al pasar el ratón. */
@keyframes paper-wiggle {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-0.7deg); }
  65% { transform: rotate(0.45deg); }
  100% { transform: rotate(0deg); }
}

@media (hover: hover) {
  .receipt-coupon:hover { animation: paper-wiggle 340ms var(--ic-ease-soft); }
}

/* El precio, rodeado a mano: trazo mostaza que se dibuja al revelar el ticket. */
.founding-price { position: relative; }

.price-circle {
  position: absolute;
  inset: -0.36em -0.5em -0.3em -0.55em;
  width: calc(100% + 1.05em);
  height: calc(100% + 0.66em);
  overflow: visible;
  pointer-events: none;
  color: var(--ic-color-mustard-600);
}

.price-circle path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.receipt-ticket.in-view .price-circle path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 720ms var(--ic-ease-soft) 620ms;
}

@media (prefers-reduced-motion: reduce) {
  .receipt-ticket.in-view .receipt-stamp { animation: none; }
  .receipt-coupon:hover { animation: none; }
  .price-circle path { stroke-dashoffset: 0; transition: none; }
}

/* ===================== HERO ENMARCADA + INTRO (patrón Titan) =====================
   Intro: solo el lockup centrado sobre crema; tira hacia el header y el frame
   del vídeo sube desde abajo. Hero: marco redondeado con márgenes de página,
   borde interior fino, kicker //, titular display claro, CTA y tags inferiores. */

/* --- overlay de intro ---
   Transparente: el "telón" crema es la propia página (header y frame esperan
   ocultos/abajo), así el frame del vídeo puede asomar por debajo del lockup
   mientras este sigue centrado — como en la referencia. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  background: none;
  pointer-events: none;
}

.intro-lockup {
  width: min(340px, 62vw);
  height: auto;
  opacity: 0;
  transform: translateY(16px);
  clip-path: inset(0 100% 0 0);
  will-change: transform, clip-path;
}

.intro.intro--in .intro-lockup {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  transition:
    opacity 220ms linear,
    transform 680ms var(--ic-ease-soft),
    clip-path 680ms var(--ic-ease-soft);
}

.intro.intro--leaving .intro-lockup {
  /* el destino exacto lo fija el JS (FLIP hacia la marca del header) */
  transition: transform 760ms cubic-bezier(0.55, 0, 0.16, 1), opacity 220ms linear 620ms;
  opacity: 0;
}

/* El nav del header está VISIBLE desde el principio (no se esconde durante la
   intro): antes hacía un fundido en cascada y en ese ~1.5-2s se veía fantasma.
   Solo la MARCA espera a que aterrice el lockup (FLIP), abajo. */
html.has-intro body:has(.intro) .site-header--flat .brand { opacity: 0; }
html.has-intro body:has(.intro.intro--leaving) .site-header--flat .brand { opacity: 1; transition: opacity 180ms linear 560ms; }

/* el frame sube desde debajo del viewport con el lockup aún centrado
   (arranca a los 1150ms; el vuelo del logo empieza a los 1450ms) */
@media (prefers-reduced-motion: no-preference) {
  html.has-intro .hero--frame .hero-frame {
    /* arranque lento: con el lockup centrado solo asoma el borde (~50px);
       el grueso del ascenso coincide con el vuelo del logo, sin cruzarse */
    animation: hero-frame-rise 1750ms cubic-bezier(0.45, 0, 0.15, 1) 1150ms both;
  }
}

@keyframes hero-frame-rise {
  from { transform: translateY(100svh); }
  to { transform: translateY(0); }
}


@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

/* --- header plano (variante de la home enmarcada) ---
   Fijo siempre: en reposo es la banda de crema transparente sobre la página;
   con scroll (is-scrolled) se convierte en barra translúcida con blur sutil. */
.site-header--flat {
  --nav-floating-side-gap: clamp(10px, 1.25vw, 18px);
  position: fixed;
  top: 0; /* dentro de la hero la banda empieza en el borde (integrada) */
  left: 0;
  right: 0;
  padding: 0;
  background: rgba(var(--ic-cream-rgb) / 0);
  transition:
    top 460ms var(--ease-emphasized),
    padding-inline 460ms var(--ease-emphasized);
}

.site-header--flat .nav-shell {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  /* fila centrada en la banda de crema: mismo alto que el padding-top
     de .hero--frame (clamp(92px, 10.5vh, 112px)) */
  min-height: clamp(92px, 10.5vh, 112px);
  align-items: center;
  padding: 0 clamp(20px, 2.2vw, 34px);
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    color 420ms var(--ease-emphasized),
    min-height 460ms var(--ease-emphasized),
    max-width 460ms var(--ease-emphasized),
    padding 460ms var(--ease-emphasized);
}

/* al salir de la hero: la banda integrada se condensa en una PASTILLA FLOTANTE
   (más baja, con un pequeño offset superior); el fondo, borde y sombra los pone
   la cápsula ::before (que aparece con .is-floating), sin mover el contenido. */
.site-header--flat.is-floating {
  top: clamp(12px, 1.6vw, 22px);
  padding-inline: var(--nav-floating-side-gap);
}

.site-header--flat.is-floating .nav-shell {
  min-height: 62px;
  max-width: 1000px; /* más estrecha al flotar → más margen lateral */
  padding: 8px 12px 8px 22px;
}

.site-header--flat.is-scrolled .nav-shell {
  min-height: 62px;
}

@media (prefers-reduced-motion: reduce) {
  .site-header--flat,
  .site-header--flat .nav-shell { transition: none; }
}

.site-header--flat .brand-logo--light { opacity: 0; }
.site-header--flat .brand-logo--dark { opacity: 1; }

/* En la variante plana, .is-dark significa "estamos sobre una sección oscura",
   por lo que la cápsula se vuelve clara. En tablet/móvil había reglas antiguas
   que dejaban el selector de idioma y el botón de menú en blanco. */
.site-header.site-header--flat.is-dark .nav-shell,
.site-header.site-header--flat.is-dark.is-scrolled .nav-shell {
  color: var(--ink);
  background: transparent;
  border-color: transparent;
}

/* El "+" decorativo tras cada item del nav es un acento HORIZONTAL de marca:
   solo tiene sentido en el nav de escritorio. En el drawer compacto los items
   van apilados y un "+" colgando de cada uno ensucia; ahí no se pinta (la regla
   del drawer .nav-links a::after { display:none } lo remata). Por eso lo acotamos
   al rango desktop real en vez de dejarlo global y perder la guerra de especificidad. */
@media (min-width: 961px) {
  .site-header--flat .nav-links a:not(.nav-menu-cta)::before {
    content: none;
  }

  /* el "+" es un token inline aparte: sin nowrap el flex-item se encoge al ancho
     del texto y el "+" cae a una 2ª línea debajo del item ("Eva" / "+"). Con
     nowrap, "Eva +" queda junto en una sola línea. */
  .site-header--flat .nav-links a:not(.nav-menu-cta) {
    white-space: nowrap;
  }

  .site-header--flat .nav-links a:not(.nav-menu-cta)::after {
    content: "+";
    display: inline-block;
    width: auto;
    height: auto;
    margin-left: 6px;
    position: static;
    background: none;
    font-size: 0.92em;
    font-weight: 500;
    color: var(--ic-color-coral-700);
    transform: none;
    transition: transform 220ms var(--ic-ease-soft);
  }

  .site-header--flat .nav-links a:hover::after { transform: rotate(90deg); }
}

/* --- hero enmarcada --- */
.hero--frame {
  position: relative;
  /* por encima de .criteria (z-index 1): la sección siguiente arranca metida
     debajo del hero y va emergiendo con el scroll (criteria-emerge) */
  z-index: 2;
  display: block;
  min-height: 0;
  height: auto;
  padding: clamp(92px, 10.5vh, 112px) clamp(14px, 1.7vw, 26px) clamp(14px, 1.7vw, 26px);
  background: var(--ic-color-cream);
}

.hero--frame .hero-frame {
  position: relative;
  overflow: clip;
  border-radius: clamp(20px, 2vw, 30px);
  background: var(--ic-color-petrol-950);
  min-height: calc(100svh - clamp(108px, 12.5vh, 136px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero--frame .hero-media-stage {
  position: absolute;
  inset: 0;
  height: 100%;
  margin: 0;
}

.hero--frame .hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  transform: none;
}

.hero--frame .hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(var(--ic-petrol-950-rgb) / 0.9), rgb(var(--ic-petrol-950-rgb) / 0.55) 42%, rgb(var(--ic-petrol-950-rgb) / 0.06) 72%),
    linear-gradient(0deg, rgb(var(--ic-petrol-950-rgb) / 0.55), transparent 30%);
}

/* borde interior fino, como marco de lámina */
.hero-frame-border {
  position: absolute;
  inset: clamp(14px, 1.6vw, 24px);
  border: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.34);
  border-radius: clamp(12px, 1.2vw, 18px);
  pointer-events: none;
}

/* marcas + decorativas arriba a la derecha (el + es el icono de la casa) */
.hero-marks {
  position: absolute;
  top: clamp(30px, 3.4vw, 52px);
  right: clamp(30px, 3.4vw, 52px);
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  color: var(--ic-color-mustard);
  opacity: 0.9;
  pointer-events: none;
}

.hero-marks svg {
  width: clamp(26px, 2.6vw, 40px);
  height: auto;
  stroke-width: 1.6;
}

.hero--frame .hero-content {
  position: relative;
  z-index: 2;
  min-height: 0;
  margin: 0;
  padding: clamp(40px, 5vw, 72px) clamp(30px, 4.4vw, 72px);
  max-width: 780px;
  transform: none;
}

.hero--frame .hero-eyebrow {
  --eyebrow-color: var(--ic-color-mustard);
  margin: 0 0 22px;
  font-family: var(--ic-font-mono);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.88vw, 0.9rem);
  letter-spacing: 0.18em;
}

.hero--frame .hero-title {
  max-width: none;
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ic-color-cream);
  text-shadow: none;
  opacity: 1;
  transition: none;
}

/* el punto final: mostaza y más gordo (bola, como en la referencia) */
.hero--frame .hero-title span {
  color: var(--ic-color-mustard);
  font-size: 1.3em;
  line-height: 0;
}

/* subclaim: la promesa en dos líneas, en crema, entre el claim y el párrafo */
.hero--frame .hero-subclaim {
  margin: 20px 0 0;
  max-width: 620px;
  color: rgb(var(--ic-cream-dim-rgb) / 0.9);
  font-size: clamp(1.25rem, 1.9vw, 1.8rem);
  line-height: 1.32;
  font-weight: 400;
  text-shadow: none;
}

.hero--frame .hero-divider {
  display: block;
  width: min(520px, 82%);
  height: 1px;
  margin: 26px 0;
  background: rgb(var(--ic-cream-dim-rgb) / 0.32);
}

.hero--frame .hero-copy {
  margin: 0 0 34px;
  max-width: 470px;
  color: rgb(var(--ic-cream-dim-rgb) / 0.94);
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  line-height: 1.6;
  text-shadow: none;
}

.hero--frame .hero-copy,
.hero--frame .hero-actions,
.hero--frame .hero-eyebrow {
  opacity: 1;
  transform: none;
  transition: none;
}

.hero--frame .hero-actions { gap: 18px; }

.hero--frame .hero-actions .button {
  min-height: 54px;
  min-width: 0;
  padding-inline: 30px 24px;
}

/* --- ficha de salud flotante (composición premium sobre el vídeo) --- */
.hero-ficha {
  position: absolute;
  right: clamp(34px, 4.6vw, 84px);
  bottom: clamp(120px, 17vh, 190px);
  z-index: 2;
  width: min(300px, 24vw);
  pointer-events: none;
}

.hero-ficha-card {
  padding: 18px 18px 16px;
  border: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.35);
  border-radius: 18px;
  background: rgb(var(--ic-petrol-950-rgb) / 0.5);
  box-shadow: 0 24px 60px rgb(var(--ic-petrol-950-rgb) / 0.35);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

.hero-ficha-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-ficha-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.5);
  flex: none;
}

.hero-ficha-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-ficha-id { display: grid; gap: 2px; min-width: 0; }

.hero-ficha-name {
  font-family: var(--ic-font-display);
  font-size: 1.18rem;
  line-height: 1;
  color: var(--ic-color-cream);
}

.hero-ficha-meta {
  font-family: var(--ic-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--ic-cream-dim-rgb) / 0.75);
}

.hero-ficha-mark {
  margin-left: auto;
  color: var(--ic-color-mustard);
  width: 18px;
  flex: none;
}

.hero-ficha-mark svg { width: 100%; height: auto; stroke-width: 1.8; }

/* sparkline del peso: se dibuja al aparecer */
.hero-ficha-spark {
  display: block;
  width: 100%;
  height: 44px;
  margin: 14px 0 12px;
}

.hero-ficha-spark-line {
  fill: none;
  stroke: var(--ic-color-mustard);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.hero-ficha-spark-dot { fill: var(--ic-color-mustard); }

/* macros: lo que toma ahora vs lo que debería (marca mostaza = objetivo) */
.hero-ficha-macros {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.hf-macro {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 10px;
}

.hf-macro-label {
  font-family: var(--ic-font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--ic-cream-dim-rgb) / 0.85);
}

.hf-macro-track {
  position: relative;
  height: 5px;
  border-radius: var(--ic-radius-pill);
  background: rgb(var(--ic-cream-dim-rgb) / 0.18);
  overflow: visible;
}

.hf-macro-track .hf-now {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--now, 0%);
  border-radius: inherit;
  background: rgb(var(--ic-cream-dim-rgb) / 0.85);
}

.hf-macro-track .hf-goal {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: var(--goal, 0%);
  width: 2.5px;
  border-radius: var(--ic-radius-pill);
  background: var(--ic-color-mustard);
}

.hf-macro-nums {
  font-family: var(--ic-font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgb(var(--ic-cream-dim-rgb) / 0.75);
  white-space: nowrap;
}

.hf-macro-nums em { font-style: normal; }
.hf-macro-nums strong { color: var(--ic-color-mustard); font-weight: 600; }

.hero-ficha-legend {
  margin: 7px 0 0;
  font-family: var(--ic-font-mono);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--ic-cream-dim-rgb) / 0.55);
}

/* nota de adaptación fisiológica (35/100: baja — en coral) */
.hero-ficha-score {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: 7px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.22);
}

.hf-score-label {
  font-family: var(--ic-font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--ic-cream-dim-rgb) / 0.85);
}

.hf-score-value {
  font-family: var(--ic-font-display);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ic-color-coral);
}

.hf-score-value i {
  font-style: normal;
  font-size: 0.62em;
  color: rgb(var(--ic-cream-dim-rgb) / 0.6);
}

.hf-score-bar {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: var(--ic-radius-pill);
  background: rgb(var(--ic-cream-dim-rgb) / 0.18);
  overflow: hidden;
}

.hf-score-bar i {
  display: block;
  height: 100%;
  width: var(--score, 0%);
  border-radius: inherit;
  background: var(--ic-color-coral);
}

/* --- Diet card / dieta viva -------------------------------------------------
   Componente reusable para el design system y la escena "Cómo funciona".
   La curva de peso baja de izquierda a derecha: pérdida controlada, no subida. */
.diet-card {
  width: min(520px, 100%);
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.34);
  border-radius: clamp(20px, 2.2vw, 30px);
  background:
    radial-gradient(circle at 12% -8%, rgba(var(--ic-cream-rgb) / 0.22), transparent 38%),
    linear-gradient(135deg, rgba(var(--ic-petrol-rgb) / 0.74), rgba(var(--ic-petrol-950-rgb) / 0.76));
  box-shadow:
    0 26px 70px rgb(var(--ic-petrol-950-rgb) / 0.26),
    inset 0 1px 0 rgb(var(--ic-cream-dim-rgb) / 0.2);
  color: var(--ic-color-cream);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
}

.diet-card--compact {
  width: min(360px, 100%);
  padding: clamp(12px, 1.4vw, 16px);
  border-radius: 20px;
  box-shadow: 0 18px 46px rgb(var(--ic-petrol-950-rgb) / 0.18);
}

.diet-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
}

.diet-card__avatar {
  width: clamp(46px, 4.6vw, 62px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.56);
  box-shadow: 0 0 0 4px rgb(var(--ic-cream-rgb) / 0.08);
}

.diet-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diet-card__id {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: left;
}

.diet-card__name {
  font-family: var(--ic-font-display);
  font-size: clamp(1.55rem, 2.4vw, 2.45rem);
  font-weight: 520;
  line-height: 0.92;
  color: var(--ic-color-cream);
}

.diet-card__meta {
  font-family: var(--ic-font-mono);
  font-size: clamp(0.64rem, 0.8vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--ic-cream-dim-rgb) / 0.78);
}

.diet-card__mark {
  display: grid;
  place-items: center;
  width: clamp(22px, 2.2vw, 30px);
  color: var(--ic-color-mustard);
}

.diet-card__mark svg {
  width: 100%;
  height: auto;
  stroke-width: 1.8;
}

.diet-card__spark {
  display: block;
  width: 100%;
  height: clamp(42px, 5vw, 62px);
  margin: clamp(12px, 1.8vw, 20px) 0 clamp(14px, 1.8vw, 22px);
  overflow: visible;
}

.diet-card__spark-line {
  fill: none;
  stroke: var(--ic-color-mustard);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.diet-card__spark-dot {
  fill: var(--ic-color-mustard);
  filter: drop-shadow(0 0 8px rgba(var(--ic-mustard-rgb) / 0.4));
}

.diet-card__macros {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(8px, 1.1vw, 12px);
}

.diet-card__row {
  display: grid;
  grid-template-columns: minmax(88px, 0.72fr) minmax(120px, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
}

.diet-card__label {
  font-family: var(--ic-font-mono);
  font-size: clamp(0.6rem, 0.74vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--ic-cream-dim-rgb) / 0.88);
}

.diet-card__track {
  position: relative;
  height: 7px;
  border-radius: var(--ic-radius-pill);
  background: rgb(var(--ic-cream-dim-rgb) / 0.18);
}

.diet-card__now {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--now, 0%);
  border-radius: inherit;
  background: rgb(var(--ic-cream-dim-rgb) / 0.86);
}

.diet-card__goal {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: var(--goal, 0%);
  width: 3px;
  border-radius: var(--ic-radius-pill);
  background: var(--ic-color-mustard);
}

.diet-card__nums {
  font-family: var(--ic-font-mono);
  font-size: clamp(0.64rem, 0.76vw, 0.76rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgb(var(--ic-cream-dim-rgb) / 0.78);
  white-space: nowrap;
}

.diet-card__nums em { font-style: normal; }
.diet-card__nums strong { color: var(--ic-color-mustard); font-weight: 700; }

.diet-card__legend {
  margin: clamp(10px, 1.2vw, 14px) 0 0;
  font-family: var(--ic-font-mono);
  font-size: clamp(0.58rem, 0.7vw, 0.68rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(var(--ic-cream-dim-rgb) / 0.62);
}

.diet-card__score {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  row-gap: clamp(8px, 1vw, 12px);
  margin-top: clamp(14px, 1.8vw, 20px);
  padding-top: clamp(12px, 1.6vw, 18px);
  border-top: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.22);
}

.diet-card__score-label {
  font-family: var(--ic-font-mono);
  font-size: clamp(0.62rem, 0.78vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--ic-cream-dim-rgb) / 0.88);
}

.diet-card__score-value {
  font-family: var(--ic-font-display);
  font-size: clamp(1.55rem, 3vw, 2.7rem);
  line-height: 0.9;
  color: var(--ic-color-coral);
}

.diet-card__score-value i {
  font-style: normal;
  font-size: 0.58em;
  color: rgb(var(--ic-cream-dim-rgb) / 0.62);
}

.diet-card__score-bar {
  grid-column: 1 / -1;
  height: 7px;
  border-radius: var(--ic-radius-pill);
  background: rgb(var(--ic-cream-dim-rgb) / 0.18);
  overflow: hidden;
}

.diet-card__score-bar i {
  display: block;
  width: var(--score, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--ic-color-coral);
}

.diet-card--compact .diet-card__avatar { width: 42px; }
.diet-card--compact .diet-card__name { font-size: 1.3rem; }
.diet-card--compact .diet-card__meta { font-size: 0.56rem; }
.diet-card--compact .diet-card__spark { height: 32px; margin: 8px 0 10px; }
.diet-card--compact .diet-card__row { grid-template-columns: 78px minmax(92px, 1fr) auto; gap: 9px; }
.diet-card--compact .diet-card__label,
.diet-card--compact .diet-card__nums { font-size: 0.53rem; }
.diet-card--compact .diet-card__track { height: 5px; }
.diet-card--compact .diet-card__legend { margin-top: 8px; font-size: 0.5rem; }
.diet-card--compact .diet-card__score { margin-top: 10px; padding-top: 10px; }
.diet-card--compact .diet-card__score-label { font-size: 0.54rem; }
.diet-card--compact .diet-card__score-value { font-size: 1.5rem; }
.diet-card--compact .diet-card__score-bar { height: 5px; }

.transition-timeline {
  position: relative;
  width: min(680px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 16px);
}

.transition-timeline::before,
.transition-timeline::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 24px;
  height: 1px;
  border-radius: var(--ic-radius-pill);
  pointer-events: none;
}

.transition-timeline::before {
  background: linear-gradient(90deg, transparent, rgba(var(--ic-petrol-rgb) / 0.28), transparent);
}

.transition-timeline::after {
  background: linear-gradient(90deg, transparent, var(--ic-color-mustard) 8%, var(--ic-color-mustard) 92%, transparent);
  transform: scaleX(var(--transition-line-progress, 1));
  transform-origin: left center;
}

.transition-step {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 0 clamp(8px, 1vw, 12px);
  text-align: center;
}

.transition-step__num {
  display: grid;
  place-items: center;
  width: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.28);
  background: var(--ic-color-cream);
  box-shadow: 0 0 0 6px rgba(var(--ic-cream-rgb) / 0.72);
  font-family: var(--ic-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ic-color-petrol);
}

.transition-step strong {
  display: block;
  font-family: var(--ic-font-display);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  font-weight: 540;
  color: var(--ic-text-primary);
}

.transition-step strong small {
  display: block;
  margin-bottom: 5px;
  color: rgba(var(--ic-petrol-rgb) / 0.58);
  font-family: var(--ic-font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.transition-step p {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);
  line-height: 1.4;
  color: rgba(var(--ic-petrol-rgb) / 0.78);
}

.how-alert-stack {
  width: min(620px, 100%);
  display: grid;
  gap: clamp(8px, 1vw, 12px);
}

/* Alerta: tarjeta de aviso sobria. Cabecera con icono + etiqueta de severidad
   (estática, sin punto latiendo), el síntoma en una línea y la acción en una
   frase corta. --sev conmuta coral (urgente) / mostaza (vigilar). */
.how-alert {
  --sev: var(--ic-color-mustard);
  --sev-rgb: var(--ic-mustard-rgb);
  display: grid;
  gap: 9px;
  align-content: start;
  padding: clamp(14px, 1.5vw, 18px);
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.1);
  border-radius: var(--ic-radius-lg);
  background: var(--ic-surface-raised);
  box-shadow: 0 6px 18px rgba(var(--ic-petrol-950-rgb) / 0.05);
  text-align: left;
}

.how-alert--urgent {
  --sev: var(--ic-color-coral);
  --sev-rgb: var(--ic-coral-rgb);
  border-color: rgba(var(--ic-coral-rgb) / 0.26);
}

.how-alert__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.how-alert__icon {
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(var(--sev-rgb) / 0.14);
  color: var(--sev);
}

.how-alert--urgent .how-alert__icon {
  background: var(--ic-color-coral);
  color: var(--ic-color-cream);
}

.how-alert__icon svg {
  width: 52%;
  height: 52%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.how-alert__sev {
  font-family: var(--ic-font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sev);
}

.how-alert__title {
  font-size: clamp(0.96rem, 1vw, 1.06rem);
  font-weight: 600;
  line-height: 1.22;
  color: var(--ic-text-primary);
}

.how-alert__note {
  margin: 0;
  font-size: clamp(0.8rem, 0.9vw, 0.9rem);
  line-height: 1.4;
  color: rgba(var(--ic-petrol-rgb) / 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .diet-card--live {
    animation: diet-card-live 7s ease-in-out infinite alternate;
  }

  .diet-card--live .diet-card__spark-line {
    stroke-dashoffset: 100;
    animation: diet-spark-draw 1100ms var(--ic-ease-soft) 180ms forwards;
  }

  .diet-card--live .diet-card__row,
  .diet-card--live .diet-card__legend,
  .diet-card--live .diet-card__score {
    opacity: 0;
    transform: translateY(8px);
    animation: diet-card-item-in 520ms var(--ic-ease-soft) both;
  }

  .diet-card--live .diet-card__row:nth-child(1) { animation-delay: 420ms; }
  .diet-card--live .diet-card__row:nth-child(2) { animation-delay: 540ms; }
  .diet-card--live .diet-card__row:nth-child(3) { animation-delay: 660ms; }
  .diet-card--live .diet-card__legend { animation-delay: 780ms; }
  .diet-card--live .diet-card__score { animation-delay: 900ms; }

  .diet-card--live .diet-card__now,
  .diet-card--live .diet-card__score-bar i {
    width: 0;
    animation: diet-card-fill 760ms var(--ic-ease-soft) forwards;
  }

  .diet-card--live .diet-card__row:nth-child(1) .diet-card__now { animation-delay: 520ms; }
  .diet-card--live .diet-card__row:nth-child(2) .diet-card__now { animation-delay: 640ms; }
  .diet-card--live .diet-card__row:nth-child(3) .diet-card__now { animation-delay: 760ms; }
  .diet-card--live .diet-card__score-bar i { animation-delay: 1040ms; }
}

@keyframes diet-card-live {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}

@keyframes diet-spark-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes diet-card-item-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes diet-card-fill {
  to { width: var(--now, var(--score, 0%)); }
}

@media (prefers-reduced-motion: no-preference) {
  /* respiración sutil de la tarjeta */
  .hero-ficha-card { animation: ficha-float 7s ease-in-out infinite alternate; }

  /* el pulso del estado "vigilando" */
  .hero-ficha-pill.is-watch i { animation: ficha-pulse 2.6s ease-in-out infinite; }

  /* entrada: la ficha llega después del frame (intro); compone con el float
     en el mismo elemento (lista), dejando .hero-ficha libre para el parallax */
  html.has-intro .hero-ficha-card {
    animation:
      ficha-in 900ms var(--ic-ease-soft) 2550ms both,
      ficha-float 7s ease-in-out 3600ms infinite alternate;
  }

  html.has-intro .hero-ficha .hero-ficha-spark-line {
    stroke-dashoffset: 100;
    animation: spark-draw 1100ms var(--ic-ease-soft) 2900ms forwards;
  }

  html.has-intro .hero-ficha .hf-macro,
  html.has-intro .hero-ficha .hero-ficha-legend,
  html.has-intro .hero-ficha .hero-ficha-score {
    opacity: 0;
    animation: pill-in 480ms var(--ic-ease-soft) both;
  }

  html.has-intro .hero-ficha .hf-macro:nth-child(1) { animation-delay: 3000ms; }
  html.has-intro .hero-ficha .hf-macro:nth-child(2) { animation-delay: 3120ms; }
  html.has-intro .hero-ficha .hf-macro:nth-child(3) { animation-delay: 3240ms; }
  html.has-intro .hero-ficha .hero-ficha-legend { animation-delay: 3360ms; }
  html.has-intro .hero-ficha .hero-ficha-score { animation-delay: 3460ms; }

  /* la barra de la nota se llena al llegar */
  html.has-intro .hero-ficha .hf-score-bar i {
    width: 0;
    animation: score-fill 900ms var(--ic-ease-soft) 3650ms forwards;
  }

  /* el relleno "ahora" de cada macro también crece */
  html.has-intro .hero-ficha .hf-now {
    width: 0;
    animation: now-fill 800ms var(--ic-ease-soft) both;
  }

  html.has-intro .hero-ficha .hf-macro:nth-child(1) .hf-now { animation-delay: 3100ms; }
  html.has-intro .hero-ficha .hf-macro:nth-child(2) .hf-now { animation-delay: 3220ms; }
  html.has-intro .hero-ficha .hf-macro:nth-child(3) .hf-now { animation-delay: 3340ms; }
}

/* parallax de profundidad: la ficha sube un pelín más rápido que el frame */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-ficha {
      animation: ficha-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 100vh;
    }
  }
}

@keyframes ficha-float {
  from { transform: translateY(0); }
  to { transform: translateY(-7px); }
}

@keyframes ficha-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes ficha-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spark-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes pill-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes score-fill {
  from { width: 0; }
  to { width: var(--score, 0%); }
}

@keyframes now-fill {
  from { width: 0; }
  to { width: var(--now, 0%); }
}

@keyframes ficha-parallax {
  from { translate: 0 0; }
  to { translate: 0 -34px; }
}

@media (max-width: 1180px) {
  .hero-ficha { display: none; }
}

/* tags inferiores (las garantías, en pills de contorno) */
.hero--frame .hero-proof-grid {
  position: absolute;
  left: clamp(30px, 4.4vw, 72px);
  bottom: clamp(30px, 3.6vw, 52px);
  z-index: 2;
  width: auto;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  opacity: var(--hero-tags-opacity, 1);
  transform: translateY(var(--hero-tags-y, 0px));
  transition:
    opacity 140ms linear,
    transform 140ms linear;
  will-change: opacity, transform;
}

.hero-tag {
  margin: 0;
  padding: 9px 16px;
  border: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.55);
  border-radius: var(--ic-radius-pill);
  background: rgb(var(--ic-petrol-950-rgb) / 0.3);
  font-family: var(--ic-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--ic-cream-dim-rgb) / 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* móvil */
@media (max-width: 820px) {
  .hero--frame { padding-top: 86px; }
  .site-header--flat .nav-shell { min-height: 86px; }
  .site-header--flat.is-scrolled .nav-shell { min-height: 56px; }
  .hero--frame .hero-content { padding: 34px 22px 172px; max-width: none; }
  .hero--frame .hero-media { object-position: 60% center; }
  .hero--frame .hero-scrim {
    background:
      linear-gradient(180deg, rgb(var(--ic-petrol-950-rgb) / 0.68), rgb(var(--ic-petrol-950-rgb) / 0.42) 46%, rgb(var(--ic-petrol-950-rgb) / 0.72));
  }
  .hero--frame .hero-title { font-size: clamp(2.5rem, 10.5vw, 3.4rem); }
  /* cada frase del subclaim en su línea (sin viudas) */
  .hero--frame .hero-subclaim { font-size: 1.08rem; line-height: 1.45; }
  .hero--frame .hero-divider { margin: 20px 0; }
  .hero--frame .hero-proof-grid { left: 22px; right: 22px; bottom: 22px; }
  .hero-marks { display: none; }
}

body.intro-lock { overflow: hidden; }

/* --- el + como icono de la casa en los CTA ---
   Sustituye a la flecha en los botones de la home: en hover el + gira 90°
   (vuelve a leerse como +, el gesto es el giro). El resto de páginas
   conserva la flecha hasta que se migren. */
@media (hover: hover) {
  .button-plus:hover span { transform: rotate(90deg); }
}

.button-plus:focus-visible span { transform: rotate(90deg); }

/* Pantallas bajas (portátil con dock, ventanas a media altura): el contenido
   se compacta y reserva sitio para la fila de tags — sin colisiones. */
@media (max-height: 720px) and (min-width: 821px) {
  .hero--frame .hero-content {
    padding-top: 30px;
    padding-bottom: 118px;
  }
  .hero--frame .hero-title { font-size: clamp(2.5rem, 4.4vw, 3.9rem); }
  .hero--frame .hero-eyebrow { margin-bottom: 14px; }
  .hero--frame .hero-subclaim { font-size: 1.15rem; margin-top: 12px; }
  .hero--frame .hero-divider { margin: 16px 0; }
  .hero--frame .hero-copy { margin: 0 0 24px; max-width: 440px; }
}

/* ============================================================================
   REDISEÑO TITAN — comparativa, panel de evidencia oscuro y pipeline
   ============================================================================ */

/* --- comparativa no-conflict: lado apagado vs lado activo --- */
.nc-side-brand h3 { color: rgba(var(--ic-petrol-rgb) / 0.55); }
.nc-side-brand p { color: rgba(var(--ic-petrol-rgb) / 0.55); }
.nc-side-brand .nc-rule { background: rgba(var(--ic-petrol-rgb) / 0.22); }

.nc-side-iron {
  position: relative;
  border-radius: 0 clamp(20px, 1.8vw, 28px) clamp(20px, 1.8vw, 28px) 0;
  background:
    radial-gradient(120% 100% at 80% 10%, rgb(var(--ic-petrol-rgb) / 0.92), rgb(var(--ic-petrol-950-rgb) / 0.98)),
    var(--ic-color-petrol);
}

.nc-side-iron h3 { color: var(--ic-color-cream); }
.nc-side-iron p { color: rgb(var(--ic-cream-dim-rgb) / 0.92); }
.nc-side-iron .nc-rule { background: var(--ic-color-mustard); }

/* el "vs." entra con un pop cuando la card se revela */
@media (prefers-reduced-motion: no-preference) {
  .nc-panel.in-view .nc-versus {
    animation: versus-pop 620ms var(--ic-ease-soft) 380ms both;
  }
}

@keyframes versus-pop {
  0% { transform: translate(-50%, -50%) scale(0); }
  70% { transform: translate(-50%, -50%) scale(1.12); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* --- evidencia (#evidencia): panel petrol redondeado tipo lámina --- */
.kibble {
  margin: 0 clamp(14px, 1.7vw, 26px);
  scroll-margin-top: clamp(96px, 12vw, 140px);
  border-radius: clamp(24px, 2.4vw, 36px);
  padding: clamp(64px, 7.5vw, 116px) clamp(24px, 4vw, 72px);
  background:
    radial-gradient(130% 110% at 12% 0%, rgb(var(--ic-petrol-rgb) / 0.55), transparent 52%),
    var(--ic-color-petrol-950);
  color: var(--ic-color-cream);
  isolation: isolate;
}

.kibble::before {
  content: "";
  position: absolute;
  inset: clamp(16px, 2vw, 28px);
  z-index: 0;
  border: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.16);
  border-radius: clamp(18px, 1.9vw, 28px);
  pointer-events: none;
}

.kibble::after {
  content: "";
  position: absolute;
  right: clamp(-120px, -7vw, -60px);
  top: clamp(36px, 5vw, 76px);
  z-index: 0;
  width: clamp(260px, 30vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgb(var(--ic-mustard-rgb) / 0.14), transparent 64%);
  filter: blur(4px);
  pointer-events: none;
}

.kibble .kibble-eyebrow { --eyebrow-color: rgb(var(--ic-cream-dim-rgb) / 0.8); }
.kibble .kibble-title { color: var(--ic-color-cream); }
.kibble .kibble-claim { color: rgb(var(--ic-cream-dim-rgb) / 0.85); }

.kibble .kibble-lede {
  color: rgb(var(--ic-cream-dim-rgb) / 0.9);
}

.kibble .kibble-lede strong { color: var(--ic-color-cream); }

.kibble .kibble-card {
  border-color: rgb(var(--ic-cream-dim-rgb) / 0.22);
  background:
    linear-gradient(160deg, rgb(var(--ic-cream-dim-rgb) / 0.07), rgb(var(--ic-cream-dim-rgb) / 0.02)),
    rgb(var(--ic-petrol-950-rgb) / 0.4);
  box-shadow: 0 18px 46px rgb(var(--ic-petrol-950-rgb) / 0.35);
  color: rgb(var(--ic-cream-dim-rgb) / 0.9);
}

.kibble .kibble-card h3 { color: var(--ic-color-cream); }
.kibble .kibble-card p { color: rgb(var(--ic-cream-dim-rgb) / 0.88); }
.kibble .kibble-card strong { color: var(--ic-color-mustard); }

.kibble .kibble-num {
  color: var(--ic-color-petrol-ink);
  background: var(--ic-color-mustard);
  border-color: transparent;
}

.kibble .kibble-source {
  color: rgb(var(--ic-cream-dim-rgb) / 0.62);
}

.kibble .kibble-close-lead { color: var(--ic-color-cream); }
.kibble .kibble-note { color: rgb(var(--ic-cream-dim-rgb) / 0.66); }

@media (hover: hover) {
  .kibble .kibble-card:hover {
    border-color: rgb(var(--ic-mustard-rgb) / 0.55);
    transform: translateY(-5px);
  }
}

.kibble .kibble-card { transition: transform var(--ic-duration-base) var(--ic-ease-soft), border-color var(--ic-duration-base) var(--ic-ease-soft); }

/* --- cómo funciona: numeración mono y rail que se dibuja con el scroll --- */
.how-step-number {
  font-family: var(--ic-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.how-timeline-draw {
  position: absolute;
  inset: -1px 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--ic-color-mustard) 0%, rgba(var(--ic-mustard-rgb) / 0.35) 92%, transparent);
  border-radius: var(--ic-radius-pill);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .how-timeline-draw {
      animation: rail-draw linear both;
      animation-timeline: view(block);
      animation-range: entry 40% cover 55%;
    }
  }
}

@keyframes rail-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* --- FAQ: apertura con transición de altura real (Chrome/Safari modernos;
   el resto abre al instante, sin romper nada) --- */
.faq-item { interpolate-size: allow-keywords; }

.faq-item::details-content {
  block-size: 0;
  overflow: clip;
  transition:
    block-size 420ms var(--ic-ease-soft),
    content-visibility 420ms allow-discrete;
}

.faq-item[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content { transition: none; }
}

/* --- microcopy del ticket --- */
.receipt-microcopy {
  margin: 14px 0 0;
  text-align: center;
  font-family: var(--ic-font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ic-petrol-rgb) / 0.55);
}

/* --- cierre final: panel petrol de alto contraste --- */
.final-cta {
  position: relative;
  margin: var(--ic-section-padding-y-sm) clamp(14px, 1.7vw, 26px) clamp(14px, 1.7vw, 26px);
  padding: clamp(90px, 11vw, 170px) clamp(24px, 4vw, 72px);
  border-radius: clamp(24px, 2.4vw, 36px);
  overflow: clip;
  text-align: center;
  background:
    radial-gradient(120% 130% at 50% 118%, rgb(var(--ic-petrol-rgb) / 0.65), transparent 60%),
    var(--ic-color-petrol-950);
  color: var(--ic-color-cream);
}

.final-cta-cat {
  position: absolute;
  right: clamp(-40px, -2vw, -10px);
  bottom: -34px;
  width: clamp(220px, 26vw, 380px);
  /* El PNG es 436×510 (0,855) y se renderizaba a 374×510 (0,734): un 14 % de
     achatamiento horizontal. Con solo `width` en CSS, el atributo `height="510"`
     del marcado actúa como pista de presentación y gana a la proporción
     intrínseca. `height: auto` devuelve el control a la imagen. */
  height: auto;
  opacity: 0.16;
  pointer-events: none;
  filter: grayscale(1) brightness(2.2);
}

.final-cta-eyebrow { --eyebrow-color: rgb(var(--ic-cream-dim-rgb) / 0.8); margin: 0 0 26px; }

.final-cta-title {
  margin: 0 auto;
  max-width: 20ch;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ic-color-cream);
}

.final-cta-title span {
  color: var(--ic-color-mustard);
  font-size: 1.2em;
  line-height: 0;
}

.final-cta-sub {
  margin: clamp(20px, 2.6vw, 30px) auto 0;
  max-width: 460px;
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  line-height: 1.55;
  color: rgb(var(--ic-cream-dim-rgb) / 0.9);
}

.final-cta .button {
  margin-top: clamp(30px, 4vw, 46px);
  min-height: 58px;
}

.final-cta-note {
  margin: 18px 0 0;
  font-family: var(--ic-font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--ic-cream-dim-rgb) / 0.55);
}

/* comparativa en móvil: más aire para que el "vs." no pise el texto */
@media (max-width: 640px) {
  .nc-side { padding: 30px 14px 30px 12px; }
  .nc-side-iron { padding-left: 22px; }
  .nc-versus { width: 44px; font-size: 0.95rem; }
}

/* --- evidencia v2: cabecera partida + tarjetas de métrica gigantes --- */
.kibble .kibble-head {
  display: block;
  max-width: none;
}

.kibble .kibble-head-main {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(320px, 0.72fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(28px, 7vw, 112px);
  row-gap: clamp(10px, 1.6vw, 18px);
  align-items: end;
}

.kibble .kibble-eyebrow {
  grid-column: 1;
  grid-row: 1;
}

.kibble .kibble-title {
  grid-column: 1;
  grid-row: 2;
  color: var(--ic-color-mustard);
  font-size: clamp(2.6rem, 4.6vw, 4.4rem);
  letter-spacing: 0;
}

.kibble .kibble-claim {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding-left: clamp(18px, 2vw, 28px);
  border-left: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.2);
}

.kibble .kibble-lede {
  grid-column: 2;
  grid-row: 2;
  max-width: 520px;
  margin: 0;
  padding-left: clamp(18px, 2vw, 28px);
  border-left: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.2);
}

.kibble .kibble-grid {
  counter-reset: kibble-card;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(0.35rem, 1vw, 0.8rem);
}

/* tarjeta de métrica: label arriba, número enorme, lectura y fuente */
.kibble .kibble-card {
  position: relative;
  counter-increment: kibble-card;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.2vw, 32px);
  border-color: rgb(var(--ic-mustard-rgb) / 0.38);
  min-height: clamp(270px, 20vw, 340px);
  overflow: clip;
  transition:
    transform var(--ic-duration-base) var(--ic-ease-soft),
    border-color var(--ic-duration-base) var(--ic-ease-soft),
    background-color var(--ic-duration-base) var(--ic-ease-soft);
}

.kibble .kibble-card::before {
  content: "0" counter(kibble-card);
  position: absolute;
  right: clamp(20px, 2vw, 30px);
  top: clamp(18px, 2vw, 28px);
  font-family: var(--ic-font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgb(var(--ic-mustard-rgb) / 0.78);
}

.kibble .kibble-card::after {
  content: "";
  position: absolute;
  left: clamp(22px, 2.2vw, 32px);
  right: clamp(22px, 2.2vw, 32px);
  bottom: clamp(22px, 2.2vw, 32px);
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--ic-mustard-rgb) / 0.5), transparent);
  opacity: 0.34;
  pointer-events: none;
}

.kibble .kibble-card h3 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  font-weight: 500;
  line-height: 1.14;
}

.kibble .kibble-card .kibble-stat {
  margin: 2px 0 0;
  font-family: var(--ic-font-display);
  font-weight: 400;
  font-size: clamp(2.9rem, 4.4vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: 0;
  color: var(--ic-color-mustard);
}

.kibble .kibble-card .kibble-caption {
  margin: 6px 0 0;
  font-size: clamp(0.92rem, 1vw, 1.02rem);
  line-height: 1.5;
}

.kibble-card-visual {
  display: grid;
  gap: 8px;
  margin-top: clamp(4px, 0.8vw, 12px);
}

.kibble-visual-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: rgb(var(--ic-cream-dim-rgb) / 0.68);
  font-family: var(--ic-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kibble-visual-label small { font: inherit; }
.kibble-visual-label b { color: var(--ic-color-mustard); font-size: 0.7rem; }

.kibble-track {
  position: relative;
  display: block;
  height: 8px;
  overflow: hidden;
  border: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.12);
  border-radius: var(--ic-radius-pill);
  background: rgb(var(--ic-cream-dim-rgb) / 0.08);
}

.kibble-track span {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ic-color-mustard), rgb(var(--ic-mustard-rgb) / 0.58));
  transform-origin: left center;
}

.kibble-track--muted span {
  background: rgb(var(--ic-cream-dim-rgb) / 0.28);
}

.kibble .kibble-source { margin-top: auto; padding-top: 12px; }

.kibble .kibble-close {
  display: block;
  max-width: 54ch;
  margin-top: clamp(0.2rem, 0.8vw, 0.6rem);
  padding-top: clamp(18px, 2vw, 28px);
  border-top: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.16);
}

.kibble .kibble-close-lead {
  max-width: 18ch;
  font-family: var(--ic-font-display);
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.08;
}

.kibble .kibble-note {
  max-width: 54ch;
  margin: 0;
  font-size: clamp(0.78rem, 0.95vw, 0.9rem);
}

@media (max-width: 860px) {
  .kibble .kibble-head-main {
    grid-template-columns: 1fr;
  }

  .kibble .kibble-eyebrow,
  .kibble .kibble-title,
  .kibble .kibble-claim,
  .kibble .kibble-lede {
    grid-column: 1;
    grid-row: auto;
  }

  .kibble .kibble-claim,
  .kibble .kibble-lede {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .kibble .kibble-card {
    min-height: auto;
  }
}

@media (hover: hover) {
  .kibble .kibble-card:hover {
    background:
      linear-gradient(160deg, rgb(var(--ic-cream-dim-rgb) / 0.1), rgb(var(--ic-cream-dim-rgb) / 0.025)),
      rgb(var(--ic-petrol-950-rgb) / 0.48);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kibble .kibble-card {
      animation: kibble-card-enter linear both;
      animation-timeline: view(block);
      animation-range: entry 4% cover 28%;
    }

    .kibble-track span {
      animation: kibble-track-draw linear both;
      animation-timeline: view(block);
      animation-range: entry 12% cover 34%;
    }
  }
}

@keyframes kibble-card-enter {
  from {
    opacity: 0.72;
    translate: 0 18px;
    scale: 0.985;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes kibble-track-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* --- cómo funciona v2: escena clavada con abanico de fuentes → hub → pasos
   que rotan → arco con anillo. Sin scroll-timeline (o en móvil/reduced-motion)
   degrada a columna estática con todo visible. --- */
.how-scene .how-overview-inner {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

.how-scene-inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(20px, 3vh, 34px);
  max-width: 1080px;
  margin-inline: auto;
}

.how-scene-header { max-width: 720px; }

.how-scene-header h2 {
  margin: 14px 0 0;
  font-size: clamp(2.2rem, 3.2vw, 3.3rem);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.04;
}

.how-scene-sub {
  margin: 10px 0 0;
  color: rgba(var(--ic-petrol-rgb) / 0.72);
  font-size: clamp(0.98rem, 1.1vw, 1.1rem);
}

/* fuentes de datos (abanico superior) */
.how-funnel {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(760px, 100%);
}

.how-sources {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
}

.how-source { display: grid; justify-items: center; gap: 8px; }

.how-source-icon {
  --ds-line-icon-size: clamp(38px, 3.4vw, 46px);
  --ds-line-icon-svg-size: 55%;
  --ds-line-icon-stroke: 1.7;
  --ds-line-icon-border-alpha: 0.32;
  --ds-line-icon-bg: rgb(var(--ic-cream-rgb) / 0.6);
  --ds-line-icon-dot-size: clamp(6px, 0.54vw, 8px);
  --ds-line-icon-dot-halo: 2px;
}

.how-source-icon svg { width: var(--ds-line-icon-svg-size); height: var(--ds-line-icon-svg-size); stroke-width: var(--ds-line-icon-stroke); }

.how-source-label {
  font-family: var(--ic-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ic-petrol-rgb) / 0.9);
}

.how-fan {
  width: 100%;
  height: clamp(70px, 13vh, 140px);
  margin-top: 8px;
}

.how-fan path {
  fill: none;
  stroke: rgba(var(--ic-petrol-rgb) / 0.34);
  stroke-width: 1.2;
}

.how-hub {
  display: grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--ic-color-mustard);
  color: var(--ic-color-petrol-ink);
}

.how-hub svg { width: 55%; height: auto; stroke-width: 2; }

/* visuales que viven encima del título/subtítulo de cada paso */
.how-visuals {
  position: relative;
  width: min(760px, 100%);
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.6vw, 28px);
}

.how-visual {
  width: 100%;
  display: grid;
  place-items: center;
}

.how-visual--diet .diet-card {
  margin-inline: auto;
}

.how-visual--transition {
  padding-inline: clamp(4px, 1vw, 14px);
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.8vw, 30px);
}

.transition-case {
  width: min(620px, 100%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 1.8vw, 18px);
  padding: clamp(13px, 1.5vw, 18px);
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.14);
  border-radius: var(--ic-radius-lg);
  background:
    linear-gradient(135deg, rgba(var(--ic-white-rgb) / 0.64), rgba(var(--ic-cream-rgb) / 0.68)),
    var(--ic-surface-raised);
  box-shadow:
    0 1px 0 rgba(var(--ic-white-rgb) / 0.72) inset,
    0 14px 34px rgba(var(--ic-petrol-rgb) / 0.08);
  text-align: left;
}

.transition-case__avatar {
  width: clamp(52px, 5vw, 64px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.16);
  background: rgba(var(--ic-sage-rgb) / 0.18);
}

.transition-case__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.transition-case__body {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.transition-case__body strong {
  font-family: var(--ic-font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  font-weight: 560;
  line-height: 1;
  color: var(--ic-text-primary);
}

.transition-case__body span {
  font-family: var(--ic-font-mono);
  font-size: clamp(0.62rem, 0.75vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
  color: rgba(var(--ic-petrol-rgb) / 0.64);
}

.transition-case__body em {
  margin-top: 2px;
  font-style: normal;
  font-size: clamp(0.86rem, 1vw, 0.98rem);
  line-height: 1.38;
  color: rgba(var(--ic-petrol-rgb) / 0.82);
}

.how-visual--alerts {
  max-width: 660px;
}

/* pasos */
.how-scene-steps { position: relative; width: min(620px, 100%); }

.how-scene-step { padding: 10px 0; }

.how-scene-num {
  margin: 0;
  font-family: var(--ic-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ic-color-mustard);
}

.how-scene-num::before { content: "// "; font-weight: 500; }

.how-scene-total { color: rgba(var(--ic-petrol-rgb) / 0.45); }

.how-scene-step h3 {
  margin: 8px 0 10px;
  font-size: clamp(1.7rem, 2.5vw, 2.5rem);
  font-weight: 500;
  color: var(--ic-text-primary);
}

/* palabra clave del título subrayada con el trazo "rotulador" mostaza
   (versión inline de .ds-marker-underline, ceñida al ancho de la palabra) */
.how-step-mark {
  position: relative;
  z-index: 0;
  isolation: isolate;
  white-space: nowrap;
}

.how-step-mark::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.12em;
  height: 0.16em;
  border-radius: var(--ic-radius-pill);
  background:
    linear-gradient(90deg, transparent, var(--ic-color-mustard) 10%, var(--ic-color-mustard) 90%, transparent),
    repeating-linear-gradient(
      175deg,
      transparent 0 7px,
      rgba(var(--ic-mustard-rgb) / 0.55) 8px 10px,
      transparent 11px 16px
    );
  transform: rotate(-1deg);
  transform-origin: left center;
  z-index: -1;
  pointer-events: none;
}

.how-scene-step p {
  max-width: 500px;
  margin: 0 auto;
  color: var(--ic-text-body);
  line-height: 1.55;
}

/* arco final con anillo punteado y contador */
.how-arc {
  position: relative;
  width: min(780px, 92vw);
  height: clamp(220px, 31vh, 340px);
  --how-plate-size: min(500px, 64%);
  --how-plate-top: clamp(20px, 3.8vh, 38px);
  --how-arc-fade-height: clamp(54px, 8vh, 88px);
  isolation: isolate;
  overflow: visible;
}

.how-arc::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: -8%;
  right: -8%;
  bottom: calc(-0.42 * var(--how-arc-fade-height));
  height: var(--how-arc-fade-height);
  background: linear-gradient(
    180deg,
    rgba(var(--ic-cream-rgb) / 0) 0%,
    rgba(var(--ic-cream-rgb) / 0.82) 66%,
    var(--ic-bg-page) 100%
  );
  pointer-events: none;
}

/* rueda de pasos: gira a golpes entre estaciones (scrubbed por el scroll,
   reversible); los chips viajan por la circunferencia y se mantienen derechos
   con la contra-rotación */
.how-wheel {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: var(--how-plate-top);
  /* propiedad translate (no transform): se aplica ANTES de rotate, así la
     rueda gira sobre su centro en vez de orbitar */
  translate: -50% 0;
  width: var(--how-plate-size);
  aspect-ratio: 1;
}

.how-wheel-ring {
  display: none;
}

.how-wheel-ticks {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0.78;
  pointer-events: none;
}

.how-wheel-tick {
  position: absolute;
  inset: 0;
  rotate: var(--tick-angle);
}

.how-wheel-tick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.35%;
  width: clamp(2px, 0.26vw, 3px);
  height: clamp(6px, 0.75vw, 9px);
  translate: -50% 0;
  border-radius: 999px;
  background: rgba(var(--ic-petrol-rgb) / 0.32);
  box-shadow: none;
  transition:
    background-color 160ms var(--ic-ease-soft),
    box-shadow 160ms var(--ic-ease-soft),
    opacity 160ms var(--ic-ease-soft);
}

.how-wheel-tick.is-active::before {
  background: var(--ic-color-mustard);
  box-shadow: 0 0 0 3px rgb(var(--ic-mustard-rgb) / 0.13);
  opacity: 0.95;
}

.how-spoke {
  position: absolute;
  inset: 0;
  rotate: var(--a, 0deg);
}

/* estación: título + chip montados sobre la llanta; contra-rotación en dos
   capas (estática -a en .how-station, animada +θ en .how-station-in) para
   que las letras viajen con la rueda pero se lean siempre derechas */
.how-station {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  rotate: calc(-1 * var(--a, 0deg));
}

.how-station-in {
  display: grid;
  justify-items: center;
  gap: 9px;
}

.how-chip {
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--ic-color-mustard);
  background: var(--ic-color-cream);
  box-shadow: 0 0 0 5px var(--ic-color-cream);
}

.how-chip b {
  display: block;
  font-family: var(--ic-font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--ic-color-petrol);
}
.how-arc-media {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: var(--how-plate-top);
  translate: -50% 0;
  width: var(--how-plate-size);
  aspect-ratio: 1;
  border-radius: 50%;
  /* el bol es un recorte con fondo transparente: sin overflow-clip circular ni
     scrim (eran para la foto antigua que llenaba el círculo y creaban el
     "gradiente roto" en el anillo). El propio bol aporta su borde oscuro. */
  background: transparent;
  filter: drop-shadow(0 14px 30px rgba(var(--ic-petrol-950-rgb) / 0.18));
}

.how-arc-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}


.how-scene .how-overview-actions { margin-top: 4px; }

/* modo clavado (desktop con soporte y sin reduced-motion) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 821px) and (min-height: 640px) {
    .how-scene {
      view-timeline-name: --how;
      height: 430svh;
      padding: 0;
      /* overflow clip en el ancestro mata position:sticky — aquí, visible */
      overflow: visible;
    }

    /* el padre directo del sticky debe medir los 430svh para que viaje */
    .how-scene .how-overview-inner { height: 100%; }

    .how-pin {
      position: sticky;
      top: 0;
      height: 100svh;
      overflow: clip;
      display: grid;
      background: var(--ic-bg-page);
    }

    .how-scene .how-scene-inner { position: relative; }

    /* el stage entero debe caber en el viewport clavado (bajo el header fijo).
       La fila flexible es la del ABANICO: las curvas se alargan para llenar el
       aire (como la referencia) y el bloque de texto queda anclado al dial. */
    .how-scene .how-scene-inner {
      height: 100svh;
      align-content: start;
      grid-template-rows: auto minmax(0, 1fr) auto auto;
      gap: clamp(14px, 2vh, 24px);
      padding: clamp(74px, 9vh, 92px) var(--ic-container-padding-x) 14px;
    }

    /* el título grande se recorta por altura en el tramo clavado, pero el
       kicker pequeño ("Cómo funciona en 4 pasos") se queda como primera fila
       del stage (en flujo, bajo el header fijo — el padding-top ya lo despeja). */
    .how-scene .how-scene-header {
      margin: 0;
      justify-self: center;
      text-align: center;
    }
    .how-scene .how-scene-header h2,
    .how-scene .how-scene-header .how-scene-sub {
      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;
    }
    .how-scene .how-scene-header .section-eyebrow { margin: 0; }

    .how-scene .how-visuals {
      align-self: stretch;
      display: grid;
      grid-template-areas: "stage";
      justify-items: center;
      align-items: start;
      min-height: clamp(150px, 23vh, 240px);
    }

    .how-scene .how-visual {
      grid-area: stage;
      align-items: start;
      justify-items: center;
      opacity: 0;
      pointer-events: none;
      transform-origin: 50% 520px;
      animation: visual-swap linear both;
      animation-timeline: --how;
    }

    .how-scene .how-visual--sources {
      align-self: stretch;
      animation-name: visual-first;
      animation-range: cover 15% cover 42%;
    }

    .how-scene .how-visual--diet { animation-range: cover 40.5% cover 56%; }
    .how-scene .how-visual--transition { animation-range: cover 54.5% cover 70%; }
    .how-scene .how-visual--alerts {
      animation-name: visual-hold;
      animation-range: cover 68.5% cover 80%;
    }

    /* [12] centradas verticalmente en el hueco del stage: el stage
       (.how-visuals) pone align-items:start y las pegaba arriba; align-self
       centra el visual en la fila alta. Más aire entre bolitas. */
    .how-scene .how-visual--transition,
    .how-scene .how-visual--alerts { align-self: center; }
    .how-scene .how-visual--transition .transition-timeline { gap: clamp(20px, 2.8vw, 34px); }

    .how-scene .how-visual--alerts {
      max-width: min(820px, 100%);
    }

    .how-scene .how-visual--alerts .how-alert-stack {
      width: min(820px, 100%);
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: stretch;
      gap: clamp(14px, 1.8vw, 24px);
    }

    .how-scene .how-visual--alerts .how-alert {
      gap: 7px;
      min-height: 124px;
      padding: 13px 14px;
      border-radius: 18px;
    }

    .how-scene .how-visual--alerts .how-alert__icon { width: 30px; }

    .how-scene .how-visual--alerts .how-alert__sev {
      font-size: 0.52rem;
      letter-spacing: 0.12em;
    }

    .how-scene .how-visual--alerts .how-alert__title {
      font-size: 0.9rem;
      line-height: 1.18;
    }

    .how-scene .how-visual--alerts .how-alert__note {
      font-size: 0.76rem;
      line-height: 1.3;
    }

    .how-scene .how-funnel {
      align-self: stretch;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      justify-items: center;
      width: 100%;
    }

    /* el abanico LLENA su fila para que las 6 líneas bajen hasta tocar el + */
    .how-scene .how-fan { height: 100%; min-height: clamp(46px, 7vh, 76px); }
    .how-scene .how-scene-steps { min-height: 0; }
    .how-scene .how-arc { height: clamp(210px, 30vh, 330px); align-self: end; }

    /* el abanico se dibuja al entrar en el tramo clavado */
    .how-fan path {
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      animation: fan-draw linear both;
      animation-timeline: --how;
      animation-range: cover 16% cover 23%;
    }

    /* cada fuente se enciende cuando su línea empieza a trazarse */
    .how-source-icon {
      animation: source-live linear both;
      animation-timeline: --how;
    }

    .how-source:nth-child(1) .how-source-icon { animation-range: cover 15% cover 19%; }
    .how-source:nth-child(2) .how-source-icon { animation-range: cover 16% cover 20%; }
    .how-source:nth-child(3) .how-source-icon { animation-range: cover 17% cover 21%; }
    .how-source:nth-child(4) .how-source-icon { animation-range: cover 18% cover 22%; }
    .how-source:nth-child(5) .how-source-icon { animation-range: cover 19% cover 23%; }
    .how-source:nth-child(6) .how-source-icon { animation-range: cover 20% cover 24%; }

    /* el hub aparece cuando el abanico converge */
    .how-hub {
      animation: hub-in linear both;
      animation-timeline: --how;
      animation-range: cover 20% cover 24%;
    }

    /* los 4 pasos se anclan al borde INFERIOR (align-end): así el texto queda
       pegado a la rueda del plato en los 4. La banda del CTA se reserva SOLO en
       el paso 04 con margin-bottom (no padding): con align-end eso sube su texto
       para dejar sitio al botón, sin separar del plato a los pasos 01-03. */
    .how-scene-steps {
      display: grid;
      align-items: end;
      min-height: clamp(96px, 13vh, 120px);
    }

    .how-scene-step:nth-child(4) { margin-bottom: clamp(56px, 8vh, 72px); }

    .how-scene-step {
      grid-area: 1 / 1;
      align-self: end;
      opacity: 0;
      animation: step-swap linear both;
      animation-timeline: --how;
      /* pivote en el CENTRO DE LA RUEDA (muy por debajo del texto): al entrar
         y salir, título y descripción GIRAN por el mismo arco que los chips */
      transform-origin: 50% 640px;
    }

    .how-scene .how-scene-num { font-size: 0.66rem; }

    .how-scene .how-scene-step h3 {
      margin: 6px 0 8px;
      font-size: clamp(1.4rem, 1.9vw, 1.9rem);
    }

    .how-scene .how-scene-step p {
      max-width: 54ch;
      font-size: clamp(0.9rem, 1vw, 1rem);
      line-height: 1.45;
    }

    /* el paso 01 es el estado por defecto (el anchor #how aterriza con él ya
       visible); del 02 al 04 hay crossfade real (~1.5% de solape) */
    .how-scene-step:nth-child(1) {
      animation-name: step-first;
      animation-range: cover 22% cover 42%;
    }
    .how-scene-step:nth-child(2) { animation-range: cover 40.5% cover 56%; }
    .how-scene-step:nth-child(3) { animation-range: cover 54.5% cover 70%; }
    .how-scene-step:nth-child(4) {
      animation-name: step-hold;
      animation-range: cover 68.5% cover 80%;
    }

    /* la rueda gira 90° entre pasos, con paradas (keyframes con mesetas);
       el chip contra-rota para quedarse derecho, y el activo se enciende */
    .how-wheel,
    .how-arc-media {
      animation: wheel-turn linear both;
      animation-timeline: --how;
      animation-range: cover 22% cover 80%;
    }

    .how-station-in {
      animation: chip-upright linear both;
      animation-timeline: --how;
      animation-range: cover 22% cover 80%;
    }

    .how-chip {
      animation: chip-active linear both;
      animation-timeline: --how;
    }

    /* la rueda lleva ring + ticks + 4 spokes: los spokes son hijos 3..6 */
    .how-spoke:nth-child(3) .how-chip {
      animation-name: chip-active-first;
      animation-range: cover 22% cover 41%;
    }
    .how-spoke:nth-child(4) .how-chip { animation-range: cover 40.5% cover 56%; }
    .how-spoke:nth-child(5) .how-chip { animation-range: cover 54.5% cover 70%; }
    .how-spoke:nth-child(6) .how-chip {
      animation-name: chip-active-hold;
      animation-range: cover 68.5% cover 80%;
    }

    /* kicker + título + descripción cambian JUNTOS (unidad, como la
       referencia); la rotación la cuentan el aro y los números */
    .how-scene-step p {
      max-width: 560px;
      font-size: clamp(1rem, 1.15vw, 1.14rem);
    }

    /* el CTA llega con el último paso; visibility lo saca del hit-testing
       y del orden de tabulación mientras es invisible. Vive en ABSOLUTO
       (justo sobre el dial): su fila no reserva un hueco fantasma entre el
       texto y el arco durante los pasos 01-03. */
    .how-scene .how-overview-actions {
      position: absolute;
      left: 50%;
      translate: -50% 0;
      bottom: calc(clamp(210px, 30vh, 330px) + 18px);
      margin: 0;
      opacity: 0;
      visibility: hidden;
      animation: cta-hold linear both;
      animation-timeline: --how;
      animation-range: cover 72% cover 80%;
    }

    /* la nota "Seguro, privado…" ya vive en el cierre final: aquí sobra */
    .how-scene .how-overview-actions p { display: none; }

    /* [12] el funnel cede protagonismo cuando arranca el paso 02 */
    .how-funnel {
      animation: funnel-dim linear both;
      animation-timeline: --how;
      animation-range: cover 41% cover 45%;
    }

    /* Timeline y alertas gobernados por el progreso real que escribe el motor:
       el plan muestra los 3 hitos desde el primer frame del visual y solo se
       dibuja la línea; las alertas entran escalonadas y permanecen visibles. */
    @media (scripting: enabled) {
      .how-scene .how-visual--transition .transition-timeline::after {
        transform: scaleX(var(--transition-line-progress, 0));
      }

      .how-scene .how-visual--alerts .how-alert {
        opacity: var(--alert-in, 0);
        transform: translateY(var(--alert-y, 14px));
      }
    }

    /* [12] espina del instrumento: hub → paso → dial ensartados */
    .how-scene .how-scene-steps::before,
    .how-scene .how-scene-steps::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 0;
      height: clamp(10px, 1.6vh, 18px);
      border-left: 1px dashed rgba(var(--ic-petrol-rgb) / 0.3);
    }

    .how-scene .how-scene-steps::before { top: calc(-1 * clamp(10px, 1.6vh, 18px) - 2px); }
    .how-scene .how-scene-steps::after { bottom: calc(-1 * clamp(10px, 1.6vh, 18px) - 2px); }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 821px) and (min-height: 640px) and (max-height: 780px) {
    .how-scene .how-scene-inner {
      gap: clamp(12px, 1.8vh, 18px);
      padding-top: clamp(62px, 8vh, 70px);
    }

    .how-scene .how-visuals {
      min-height: clamp(126px, 22vh, 176px);
    }

    .how-scene .diet-card--compact {
      width: min(320px, 100%);
      padding: 10px 12px;
      border-radius: 18px;
    }

    .how-scene .diet-card--compact .diet-card__avatar { width: 36px; }
    .how-scene .diet-card--compact .diet-card__name { font-size: 1.1rem; }
    .how-scene .diet-card--compact .diet-card__meta { font-size: 0.48rem; }
    .how-scene .diet-card--compact .diet-card__mark { width: 20px; }
    .how-scene .diet-card--compact .diet-card__spark { height: 24px; margin: 6px 0 8px; }
    .how-scene .diet-card--compact .diet-card__row { grid-template-columns: 70px minmax(80px, 1fr) auto; gap: 7px; }
    .how-scene .diet-card--compact .diet-card__label,
    .how-scene .diet-card--compact .diet-card__nums { font-size: 0.48rem; }
    .how-scene .diet-card--compact .diet-card__legend,
    .how-scene .diet-card--compact .diet-card__score { display: none; }

    .how-scene .how-scene-steps {
      min-height: clamp(84px, 13vh, 104px);
    }
    /* en pantalla corta el CTA necesita algo menos de banda */
    .how-scene .how-scene-step:nth-child(4) { margin-bottom: clamp(48px, 7vh, 60px); }

    .how-scene .how-scene-step h3 {
      font-size: clamp(1.2rem, 1.75vw, 1.6rem);
    }

    .how-scene .how-scene-step p {
      font-size: clamp(0.84rem, 1vw, 0.94rem);
      line-height: 1.35;
    }

    .how-scene .how-arc {
      --how-plate-size: min(440px, 58%);
      --how-plate-top: clamp(12px, 3vh, 22px);
      height: clamp(190px, 30vh, 230px);
    }

    .how-scene .how-overview-actions {
      bottom: calc(clamp(190px, 30vh, 230px) + 10px);
    }
  }
}

@keyframes fan-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes visual-swap {
  0% { opacity: 0; transform: rotate(5deg) translateY(16px) scale(0.98); }
  16% { opacity: 1; transform: rotate(0deg) translateY(0) scale(1); }
  82% { opacity: 1; transform: rotate(0deg) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(-5deg) translateY(-16px) scale(0.98); }
}

@keyframes visual-first {
  0% { opacity: 1; transform: rotate(0deg) translateY(0) scale(1); }
  84% { opacity: 1; transform: rotate(0deg) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(-5deg) translateY(-16px) scale(0.98); }
}

@keyframes visual-hold {
  0% { opacity: 0; transform: rotate(5deg) translateY(16px) scale(0.98); }
  18% { opacity: 1; transform: rotate(0deg) translateY(0) scale(1); }
  100% { opacity: 1; transform: rotate(0deg) translateY(0) scale(1); }
}

@keyframes source-live {
  from { border-color: rgba(var(--ic-petrol-rgb) / 0.32); background: rgba(var(--ic-cream-rgb) / 0.6); }
  to { border-color: rgba(var(--ic-petrol-rgb) / 0.7); background: rgba(var(--ic-sage-rgb) / 0.35); }
}

@keyframes hub-in {
  from { scale: 0; }
  60% { scale: 1.15; }
  to { scale: 1; }
}

@keyframes step-swap {
  0% { opacity: 0; transform: rotate(5deg); }
  16% { opacity: 1; transform: rotate(0deg); }
  82% { opacity: 1; transform: rotate(0deg); }
  100% { opacity: 0; transform: rotate(-5deg); }
}

@keyframes step-hold {
  0% { opacity: 0; transform: rotate(5deg); }
  18% { opacity: 1; transform: rotate(0deg); }
  100% { opacity: 1; transform: rotate(0deg); }
}

/* el paso 01: visible por defecto, solo se despide al final de su rango */
@keyframes step-first {
  0% { opacity: 1; transform: rotate(0deg); }
  86% { opacity: 1; transform: rotate(0deg); }
  100% { opacity: 0; transform: rotate(-5deg); }
}

@keyframes cta-hold {
  0% { opacity: 0; visibility: hidden; transform: translateY(20px); }
  18% { opacity: 1; visibility: visible; transform: translateY(0); }
  100% { opacity: 1; visibility: visible; transform: translateY(0); }
}

@keyframes funnel-dim {
  to { opacity: 0.38; }
}

/* el chip 01 arranca encendido (estado por defecto del aterrizaje) */
@keyframes chip-active-first {
  0% { background: var(--ic-color-mustard); box-shadow: 0 0 0 6px rgba(var(--ic-mustard-rgb) / 0.18); }
  88% { background: var(--ic-color-mustard); box-shadow: 0 0 0 6px rgba(var(--ic-mustard-rgb) / 0.18); }
  100% { background: var(--ic-color-cream); box-shadow: none; }
}

/* estaciones: quieta mientras el paso habla, giro de -90° entre pasos */
@keyframes wheel-turn {
  0% { rotate: 0deg; }
  24% { rotate: 0deg; }
  35% { rotate: -90deg; }
  50% { rotate: -90deg; }
  61% { rotate: -180deg; }
  74% { rotate: -180deg; }
  85% { rotate: -270deg; }
  100% { rotate: -270deg; }
}

/* contra-rotación exacta para que el número no se incline */
@keyframes chip-upright {
  0% { rotate: 0deg; }
  24% { rotate: 0deg; }
  35% { rotate: 90deg; }
  50% { rotate: 90deg; }
  61% { rotate: 180deg; }
  74% { rotate: 180deg; }
  85% { rotate: 270deg; }
  100% { rotate: 270deg; }
}

@keyframes chip-active {
  0% { background: var(--ic-color-cream); box-shadow: none; }
  12% { background: var(--ic-color-mustard); box-shadow: 0 0 0 6px rgba(var(--ic-mustard-rgb) / 0.18); }
  88% { background: var(--ic-color-mustard); box-shadow: 0 0 0 6px rgba(var(--ic-mustard-rgb) / 0.18); }
  100% { background: var(--ic-color-cream); box-shadow: none; }
}

@keyframes chip-active-hold {
  0% { background: var(--ic-color-cream); box-shadow: none; }
  16% { background: var(--ic-color-mustard); box-shadow: 0 0 0 6px rgba(var(--ic-mustard-rgb) / 0.18); }
  100% { background: var(--ic-color-mustard); box-shadow: 0 0 0 6px rgba(var(--ic-mustard-rgb) / 0.18); }
}

/* fallback móvil: fuentes en 3 columnas y pasos apilados */
@media (max-width: 820px) {
  .how-visual:not(.how-visual--sources) { display: none; }
  .how-sources { grid-template-columns: repeat(3, 1fr); gap: 16px 8px; }
  .how-fan { display: none; }
  .how-hub { margin: 6px auto 0; }
  .how-scene-total { display: none; }
  .how-scene-num {
    display: inline-grid;
    place-items: center;
    width: 42px;
    aspect-ratio: 1;
    border: 1.5px solid var(--ic-color-mustard);
    border-radius: 50%;
    color: var(--ic-color-petrol);
  }
  .how-scene-num::before { content: none; }
  .how-scene-step { border-top: 1px solid rgba(var(--ic-petrol-rgb) / 0.12); padding: 22px 0 12px; }
  .how-scene-step:first-child { border-top: 0; }

  /* móvil: sin rueda — la historia va en la lista tipográfica */
  .how-arc { display: none; }
}

@media (max-width: 680px) {
  .diet-card__row {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .diet-card__nums {
    justify-self: start;
  }

  .transition-timeline {
    grid-template-columns: 1fr;
  }

  .transition-timeline::before,
  .transition-timeline::after {
    top: 24px;
    bottom: 24px;
    left: 24px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .transition-timeline::before {
    background: linear-gradient(180deg, transparent, rgba(var(--ic-petrol-rgb) / 0.28), transparent);
  }

  .transition-timeline::after {
    background: linear-gradient(180deg, transparent, var(--ic-color-mustard) 8%, var(--ic-color-mustard) 92%, transparent);
    transform: scaleY(var(--transition-line-progress, 1));
    transform-origin: top center;
  }

  .transition-step {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }

  .transition-step p,
  .transition-step strong {
    max-width: none;
  }

  .transition-step__num {
    grid-row: 1 / span 2;
  }
}

/* --- criteria v3: panel bento (referencia del usuario, en crema iron.cat) ---
   Todo vive en un panel redondeado; dentro, bloques perfilados que van
   apareciendo en cascada con el scroll (sistema .reveal + --card-index). */
/* la caja de Eva (bento-head) y las 3 cards de abajo son DOS bloques
   distintos: la caja vive en .bento-head, las cards ya llevan su propio
   chrome (fondo/borde/sombra) y quedan sueltas sobre el fondo de la página. */
.criteria--bento .bento-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.92fr) minmax(0, 0.83fr);
  gap: clamp(18px, 2vw, 30px);
  align-items: stretch;
  padding: clamp(26px, 3vw, 48px);
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.16);
  border-radius: clamp(24px, 2.4vw, 36px);
  background:
    radial-gradient(120% 90% at 12% 8%, rgb(var(--ic-white-rgb) / 0.55), rgba(var(--ic-cream-rgb) / 0) 55%),
    var(--ic-surface-default);
  box-shadow: var(--ic-shadow-card-lg);
}

.criteria--bento .bento-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(8px, 1vw, 16px) clamp(4px, 0.6vw, 10px);
}

.criteria--bento .criteria-title {
  max-width: 15ch;
  font-size: clamp(1.9rem, 2.9vw, 2.9rem);
}

.criteria--bento .criteria-lede {
  max-width: 46ch;
  margin-top: clamp(14px, 1.6vw, 22px);
}

/* chips de método (contorno, mono, como la referencia) */
.bento-chips {
  margin: auto 0 0;
  padding: clamp(18px, 2vw, 26px) 0 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bento-chips li {
  padding: 10px 14px;
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.28);
  border-radius: 12px;
  font-family: var(--ic-font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(var(--ic-petrol-rgb) / 0.78);
  background: rgba(var(--ic-cream-rgb) / 0.5);
}

/* foto central en tarjeta redondeada */
.criteria--bento .bento-photo {
  margin: 0;
  min-height: 100%;
}

.criteria--bento .criteria-eva-photo {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border-radius: clamp(16px, 1.6vw, 22px);
  overflow: hidden;
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.18);
  transform: none;
  box-shadow: none;
}

.criteria--bento .criteria-eva-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transform: none;
}

/* columna derecha: ficha de credenciales + CTA */
.bento-side {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
}

.bento-card {
  flex: 1;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.18);
  border-radius: clamp(16px, 1.6vw, 22px);
  background: rgba(var(--ic-cream-rgb) / 0.55);
}

.bento-name {
  margin: 0;
  font-size: clamp(1.5rem, 1.9vw, 1.9rem);
  font-weight: 500;
  color: var(--ic-text-primary);
}

.bento-role {
  margin: 8px 0 0;
  font-family: var(--ic-font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ic-petrol-rgb) / 0.62);
}

.bento-card-rule {
  display: block;
  height: 1px;
  margin: clamp(14px, 1.6vw, 20px) 0;
  background: rgba(var(--ic-petrol-rgb) / 0.18);
}

.bento-creds {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(12px, 1.3vw, 16px);
}

.bento-creds li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ic-text-body);
  font-size: clamp(0.92rem, 1vw, 1rem);
}

.bento-cred-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.24);
  color: var(--ic-color-petrol);
}

.bento-cred-icon svg { width: 52%; height: auto; stroke-width: 1.7; }

.bento-card .criteria-eva-sign {
  display: block;
  width: min(150px, 46%);
  height: auto;
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  opacity: 0.9;
}

.bento-cta {
  width: 100%;
  justify-content: center;
  min-height: 54px;
}

/* las 3 cards de abajo: icono + titular en fila, filete y cuerpo (referencia) */
.criteria--bento .criteria-cards {
  margin-top: clamp(18px, 2vw, 30px);
  gap: clamp(14px, 1.6vw, 22px);
}

.criteria--bento .criteria-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 16px;
  background: rgba(var(--ic-cream-rgb) / 0.55);
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.18);
  /* elevación mínima: look plano de la referencia sin romper el contrato
     ds-card (los tests @ds exigen sombra real) */
  box-shadow: 0 10px 26px rgba(var(--ic-petrol-rgb) / 0.07);
}

.criteria--bento .criteria-card .criteria-card-icon { grid-row: 1; }

.criteria--bento .criteria-card-title {
  grid-column: 2;
  margin: 0;
}

.criteria--bento .criteria-card p {
  grid-column: 1 / -1;
  margin: clamp(14px, 1.5vw, 18px) 0 0;
  padding-top: clamp(12px, 1.3vw, 16px);
  border-top: 1px solid rgba(var(--ic-petrol-rgb) / 0.16);
}

/* apilado en tablet/móvil: intro → foto → ficha → CTA → cards */
@media (max-width: 1020px) {
  .criteria--bento .bento-head { grid-template-columns: 1fr; }
  .criteria--bento .criteria-title { max-width: none; }
  .criteria--bento .criteria-eva-photo { min-height: 300px; max-height: 380px; }
}


/* --- no-conflict v2: statement editorial con reveal palabra a palabra --- */
.nc--statement .nc-statement {
  margin: clamp(22px, 3vw, 38px) 0 0;
  max-width: 17ch;
  font-weight: 400;
  font-size: clamp(2.5rem, 5.2vw, 4.8rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ic-color-petrol);
}

.nc-statement .mw--coral {
  font-style: italic;
  color: var(--ic-color-coral-700, #c05a45);
}

.nc--statement .nc-lede {
  margin: clamp(24px, 3vw, 40px) 0 0;
  max-width: 440px;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.55;
  color: rgba(var(--ic-petrol-rgb) / 0.78);
}

.nc--statement .nc-panel {
  margin-top: clamp(40px, 5vw, 68px);
  max-width: 820px;
}

/* el scroll "escribe" la frase (sin clavar: la página ya tiene dos escenas) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .nc-statement .mw {
      animation: mw-in linear both;
      animation-timeline: view();
    }
    .nc-statement .mw:nth-child(1) { animation-range: cover 4% cover 22%; }
    .nc-statement .mw:nth-child(2) { animation-range: cover 7% cover 25%; }
    .nc-statement .mw:nth-child(3) { animation-range: cover 10% cover 28%; }
    .nc-statement .mw:nth-child(4) { animation-range: cover 13% cover 31%; }
    .nc-statement .mw:nth-child(5) { animation-range: cover 16% cover 34%; }
    .nc-statement .mw:nth-child(6) { animation-range: cover 19% cover 37%; }
    .nc-statement .mw:nth-child(7) { animation-range: cover 22% cover 40%; }
    .nc-statement .mw:nth-child(8) { animation-range: cover 25% cover 43%; }
    .nc-statement .mw:nth-child(9) { animation-range: cover 28% cover 46%; }
    .nc-statement .mw:nth-child(10) { animation-range: cover 31% cover 49%; }
  }
}

/* --- 49€: subrayado marker de la casa en lugar del círculo --- */
.founding-price strong {
  position: relative;
  z-index: 0;
  display: inline-block;
  isolation: isolate;
}

.founding-price .price-underline {
  position: absolute;
  z-index: -1;
  left: -4%;
  bottom: -0.08em;
  --marker-w: 110%;
  --marker-tilt: -2.4deg;
  height: clamp(10px, 0.18em, 16px);
}

/* el trazo se dibuja PROGRESIVAMENTE con el scroll: enganchado al recorrido
   del ticket entero (bug previo: mezclaba las fases entry/cover del propio
   marker de 9px de alto, así que el scaleX quedaba resuelto en el primer
   instante — ahora bebe del timeline del ticket, con recorrido real). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .founding-price .price-underline {
      animation: marker-view-draw linear both;
      animation-timeline: --receipt-ticket;
      /* rango MÁS LARGO (entra en fase cover): el trazo se dibuja despacio a lo
         largo de mucho más scroll, para que el efecto se aprecie bien */
      animation-range: entry 40% cover 45%;
    }
  }
}

@keyframes marker-view-draw {
  from { transform: scaleX(0) rotate(var(--marker-tilt, -1deg)); }
  to { transform: scaleX(1) rotate(var(--marker-tilt, -1deg)); }
}

/* «tu gato necesita»: el subrayado se DIBUJA con el scroll (scrubbed), no de
   golpe. Cuelga del timeline del panel de no-conflicto (elemento alto: recorrido
   real), en vez del transition one-shot del DS. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .nc-panel-wrap { view-timeline-name: --nc-panel; }
    .nc--panel .nc-underline {
      animation: marker-view-draw linear both;
      animation-timeline: --nc-panel;
      animation-range: cover 42% cover 74%;
      transition: none;
    }
  }
}

/* Ficha de Iron en el hero: se COLAPSA hacia su esquina al empezar a hacer
   scroll (encoge + se desvanece), como un panel que se recoge al salir del hero. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 821px) {
    .hero--frame { view-timeline-name: --hero-view; }
    .hero-ficha {
      transform-origin: bottom right;
      will-change: transform, opacity;
      animation: hero-ficha-collapse linear both;
      animation-timeline: --hero-view;
      animation-range: exit 0% exit 55%;
    }
  }
}

@keyframes hero-ficha-collapse {
  0% { transform: scale(1) translateY(0); opacity: 1; }
  70% { opacity: 0.5; }
  100% { transform: scale(0.55) translateY(28px); opacity: 0; }
}

/* --- contrato fino del + en los CTA ---
   Glifo mono, centrado óptico y tamaño estable en todos los botones; el
   chip del ticket (icon-circle) re-gana su grid (el span genérico de
   .button-arrow lo dejaba en inline-block y el + se iba de sitio). */
.button-plus span {
  display: inline-grid;
  place-items: center;
  min-width: 1em;
  margin-left: 2px;
  font-family: var(--ic-font-mono);
  font-weight: 500;
  font-size: 1.04em;
  line-height: 1;
}

.founding-cta .icon-circle {
  --icon-size: 36px;
  display: grid;
  place-items: center;
  min-width: var(--icon-size);
  margin-left: 12px;
  font-family: var(--ic-font-mono);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ic-color-petrol-ink);
}

/* --- no-conflict v3: dos recorridos enfrentados (embudo vs abanico) --- */
.nc--journeys .nc-split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
}

.nc--journeys .nc-title {
  margin: clamp(20px, 2.6vw, 34px) 0 0;
  font-size: clamp(2.3rem, 3.6vw, 3.6rem);
  line-height: 1.04;
  color: var(--ic-color-petrol);
}

.nc--journeys .nc-dot { color: var(--ic-color-mustard); font-size: 1.2em; line-height: 0; }

.nc--journeys .nc-claim {
  margin: 12px 0 0;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw, 1.8rem);
  color: var(--ic-color-coral-700, #c05a45);
}

.nc--journeys .nc-lede {
  margin: clamp(18px, 2.2vw, 28px) 0 clamp(24px, 3vw, 36px);
  max-width: 40ch;
  color: rgba(var(--ic-petrol-rgb) / 0.78);
  line-height: 1.55;
}

/* tarjetas de recorrido */
.nc-journey {
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.4vw, 34px);
  border-radius: clamp(18px, 1.8vw, 26px);
}

.nc-journey--brand {
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.16);
  background: rgba(var(--ic-cream-rgb) / 0.5);
}

.nc-journey--iron {
  margin-top: clamp(14px, 1.6vw, 20px);
  border: 1px solid rgb(var(--ic-petrol-950-rgb) / 0.5);
  background:
    radial-gradient(120% 100% at 82% 0%, rgb(var(--ic-petrol-rgb) / 0.55), transparent 55%),
    var(--ic-color-petrol-950);
  box-shadow: 0 26px 60px rgba(var(--ic-petrol-rgb) / 0.28);
}

.nc-journey-label {
  margin: 0 0 16px;
  font-family: var(--ic-font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ic-petrol-rgb) / 0.55);
}

.nc-journey-label::before { content: "// "; color: rgba(var(--ic-petrol-rgb) / 0.35); font-weight: 500; }

.nc-journey--iron .nc-journey-label { color: rgb(var(--ic-cream-dim-rgb) / 0.8); }
.nc-journey--iron .nc-journey-label::before { color: var(--ic-color-mustard); }

/* flujo lineal (marca): destino único */
.nc-flow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nc-node {
  flex: none;
  padding: 9px 14px;
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.3);
  border-radius: var(--ic-radius-pill);
  font-family: var(--ic-font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ic-petrol-rgb) / 0.7);
  background: rgba(var(--ic-cream-rgb) / 0.55);
}

.nc-journey--brand .nc-node--end {
  border-style: dashed;
  color: rgba(var(--ic-petrol-rgb) / 0.5);
}

.nc-link {
  flex: 1 1 24px;
  min-width: 18px;
  height: 12px;
}

.nc-link path {
  fill: none;
  stroke: rgba(var(--ic-petrol-rgb) / 0.35);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.nc-journey-note {
  margin: 14px 0 0;
  font-size: 0.86rem;
  color: rgba(var(--ic-petrol-rgb) / 0.55);
}

.nc-journey--iron .nc-journey-note { color: rgb(var(--ic-cream-dim-rgb) / 0.72); }

/* flujo en abanico (iron.cat): cinco destinos posibles */
.nc-flow--fan { align-items: stretch; gap: 0; }

.nc-fan-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  height: 230px;
  padding-top: 56px; /* el par gato→Eva queda con Eva a la altura del origen del abanico */
  box-sizing: border-box;
}

.nc-vlink {
  width: 0;
  height: 16px;
  margin-left: 26px;
  border-left: 1.5px dashed rgb(var(--ic-cream-dim-rgb) / 0.45);
}

.nc-journey--iron .nc-node {
  border-color: rgb(var(--ic-cream-dim-rgb) / 0.4);
  background: rgb(var(--ic-cream-dim-rgb) / 0.08);
  color: rgb(var(--ic-cream-dim-rgb) / 0.9);
}

.nc-node--eva {
  border-color: rgb(var(--ic-mustard-rgb) / 0.7);
  background: rgb(var(--ic-mustard-rgb) / 0.14);
}

.nc-fanout {
  flex: 1 1 90px;
  min-width: 60px;
  height: 230px;
  align-self: center;
}

.nc-fanout path {
  fill: none;
  stroke: rgb(var(--ic-cream-dim-rgb) / 0.45);
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}

.nc-options {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 230px;
  align-self: center;
}

.nc-options li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 7px 13px;
  border: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.4);
  border-radius: var(--ic-radius-pill);
  font-family: var(--ic-font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgb(var(--ic-cream-dim-rgb) / 0.9);
}

.nc-options li.is-fit {
  border-color: var(--ic-color-mustard);
  background: var(--ic-color-mustard);
  color: var(--ic-color-petrol-ink);
}

.nc-options li em {
  font-style: normal;
  font-size: 0.9em;
  letter-spacing: 0.06em;
}

/* coreografía: el embudo se dibuja, luego el abanico y la opción que encaja */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .nc-journey--iron .nc-options li {
    opacity: 0;
    translate: 0 8px;
    transition:
      opacity 480ms var(--ic-ease-soft) calc(300ms + var(--i, 0) * 90ms),
      translate 480ms var(--ic-ease-soft) calc(300ms + var(--i, 0) * 90ms);
  }

  .nc-journey--iron.in-view .nc-options li { opacity: 1; translate: 0 0; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .nc-fanout path {
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      animation: fan-draw linear both;
      animation-timeline: view();
    }
    .nc-fanout path:nth-child(1) { animation-range: entry 30% entry 90%; }
    .nc-fanout path:nth-child(2) { animation-range: entry 35% entry 95%; }
    .nc-fanout path:nth-child(3) { animation-range: entry 40% entry 100%; }
    .nc-fanout path:nth-child(4) { animation-range: entry 45% cover 30%; }
    .nc-fanout path:nth-child(5) { animation-range: entry 50% cover 35%; }
  }
}

/* apilado: la historia se lee en columna */
@media (max-width: 1020px) {
  .nc--journeys .nc-split { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .nc-flow { flex-wrap: wrap; }
  .nc-flow--fan { flex-direction: column; align-items: stretch; gap: 12px; }
  .nc-fan-left {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    padding-top: 0;
  }
  .nc-vlink { display: none; }
  .nc-fanout { display: none; }
  .nc-options {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    height: auto;
    justify-content: flex-start;
  }
}

/* --- no-conflict tipo Titan: card petrol FULL-BLEED que SUBE (entra y sale)
   sobre las secciones fijadas, con la esquina superior redondeada como firma.
   El fondo petrol pasa del wrap flotante a la sección entera; el wrap solo
   centra el contenido. La mecánica de subida (sticky-reveal) está más abajo. */
.nc--panel {
  padding: 0;
  background:
    radial-gradient(130% 110% at 88% 0%, rgb(var(--ic-petrol-rgb) / 0.55), transparent 52%),
    var(--ic-color-petrol-950);
  color: var(--ic-color-cream);
  overflow: visible;
  border-radius: clamp(30px, 3.6vw, 56px) clamp(30px, 3.6vw, 56px) 0 0;
}

.nc-panel-wrap {
  position: relative;
  max-width: 1440px;
  margin-inline: auto;
  padding: clamp(56px, 6.5vw, 100px) clamp(24px, 4vw, 72px);
  color: var(--ic-color-cream);
}

/* Sticky-reveal tipo Titan: señales queda fijada detrás y el panel petrol de
   "No vendemos comida" sube por encima. Como señales suele medir más que el
   viewport, JS escribe --titan-signals-height y el sticky usa un top negativo:
   primero se alcanza a ver el final de señales, luego entra el panel. */
.titan-stack {
  --titan-signals-height: 1040px;
  --titan-sticky-top: min(0px, calc(100svh - var(--titan-signals-height)));
  position: relative;
}

.titan-stack > .no-conflict-section {
  position: relative;
  z-index: 1;
}

@media (min-width: 760px) and (min-height: 700px) {
  .titan-stack > .signals-section {
    position: sticky;
    top: var(--titan-sticky-top);
    z-index: 0;
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }

  .titan-stack > .no-conflict-section {
    z-index: 2;
    box-shadow: 0 -28px 70px rgba(var(--ic-black-rgb) / 0.18);
  }
}

.nc-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.34fr);
  gap: clamp(16px, 2.4vw, 36px);
  align-items: start;
}

.nc--panel .nc-eyebrow { --eyebrow-color: rgb(var(--ic-cream-dim-rgb) / 0.8); }

.nc--panel .nc-title {
  margin: clamp(18px, 2.2vw, 28px) 0 0;
  font-size: clamp(2.4rem, 4.2vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ic-color-mustard);
}

.nc--panel .nc-dot { color: var(--ic-color-coral); font-size: 1.15em; line-height: 0; }

.nc--panel .nc-claim {
  margin: 10px 0 0;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  color: rgb(var(--ic-cream-dim-rgb) / 0.85);
}

.nc--panel .nc-lede {
  margin: 0;
  max-width: 42ch;
  padding-bottom: 6px;
  color: rgb(var(--ic-cream-dim-rgb) / 0.9);
  line-height: 1.55;
}

.nc--panel .nc-lede strong { color: var(--ic-color-cream); }

/* la comparación: doble página editorial — pura tipografía enfrentada a
   través de un filete de columna con el vs. tipográfico; sin cajas (leían
   como tarjetas UI dentro del panel) */
.nc-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(18px, 2.6vw, 42px);
  margin-top: clamp(22px, 2.7vw, 38px);
}

/* los lados son tipografía desnuda, ragged-out especular contra el eje */
.nc--panel .nc-side {
  display: grid;
  gap: clamp(10px, 1.3vw, 16px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.nc--panel .nc-side-brand { justify-items: end; text-align: right; }
.nc--panel .nc-side-iron { justify-items: start; text-align: left; }

/* prefijadas con .nc--panel: las reglas históricas .nc-side-brand p
   (tinta petrol de la v1) tienen más especificidad que una clase suelta */
.nc--panel .nc-side .nc-side-label {
  margin: 0;
  font-family: var(--ic-font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--ic-cream-dim-rgb) / 0.72);
}

.nc--panel .nc-side .nc-side-label::before { content: "// "; font-weight: 500; }

.nc--panel .nc-side .nc-side-copy {
  margin: 0;
  /* guard ancho: los saltos reales los dictan los <br/> del markup (el copy
     CA produce lineas mas largas que el ES) */
  max-width: 24ch;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

/* escalón de jerarquía: la voz de iron.cat va un cuerpo por encima de la de
   la marca — junto al cream vs. apagado y el marker, es lo que decide el
   duelo sin necesitar contenedores */
.nc--panel .nc-side-brand .nc-side-copy {
  font-size: clamp(1.5rem, 2.4vw, 2.15rem);
  color: rgb(var(--ic-cream-dim-rgb) / 0.72);
}

.nc--panel .nc-side-iron .nc-side-copy {
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  color: var(--ic-color-cream);
}

.nc--panel .nc-side-iron .nc-side-label { color: var(--ic-color-mustard); }

/* el remate de la casa: marker mostaza bajo "tu gato necesita." */
.nc--panel .nc-mark {
  position: relative;
  z-index: 0;
  display: inline-block;
  isolation: isolate;
}

.nc--panel .nc-underline {
  position: absolute;
  z-index: -1;
  left: -2%;
  bottom: -7px;
  --marker-w: 104%;
  --marker-tilt: -1.6deg;
}

/* eje central: filete de columna partido en dos por el vs. tipográfico */
.nc-axis {
  align-self: stretch;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  align-items: stretch;
  row-gap: 12px;
}

.nc-axis::before,
.nc-axis::after {
  content: "";
  width: 1px;
  background: rgb(var(--ic-cream-dim-rgb) / 0.26);
}

/* el vs. deja el badge circular: itálica display mostaza colgada del eje */
.nc--panel .nc-versus {
  position: static;
  transform: none;
  align-self: center;
  width: auto;
  aspect-ratio: auto;
  background: none;
  box-shadow: none;
  font-family: var(--ic-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  line-height: 1;
  color: var(--ic-color-mustard);
}

/* coreografía in-view: habla la marca, se dibuja el eje, responde iron.cat
   y el marker firma el final */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .nc-panel-wrap .ncw {
    display: inline-block;
    opacity: 0;
    translate: 0 0.38em;
    transition:
      opacity 480ms var(--ic-ease-soft) calc(var(--ncw-base, 120ms) + var(--wi, 0) * 45ms),
      translate 480ms var(--ic-ease-soft) calc(var(--ncw-base, 120ms) + var(--wi, 0) * 45ms);
  }

  .nc-panel-wrap .nc-side-iron .ncw { --ncw-base: 640ms; }

  .nc-panel-wrap.in-view .ncw {
    opacity: 1;
    translate: 0 0;
  }

  .nc-panel-wrap .nc-axis::before { transform-origin: center bottom; }
  .nc-panel-wrap .nc-axis::after { transform-origin: center top; }

  .nc-panel-wrap .nc-axis::before,
  .nc-panel-wrap .nc-axis::after {
    transform: scaleY(0);
    transition: transform 560ms var(--ic-ease-soft) 420ms;
  }

  .nc-panel-wrap .nc-versus {
    opacity: 0;
    scale: 0.85;
    transition:
      opacity 420ms var(--ic-ease-soft) 480ms,
      scale 420ms var(--ic-ease-soft) 480ms;
  }

  .nc-panel-wrap.in-view .nc-axis::before,
  .nc-panel-wrap.in-view .nc-axis::after { transform: scaleY(1); }

  .nc-panel-wrap.in-view .nc-versus {
    opacity: 1;
    scale: 1;
  }

  /* beat final: el marker (draw del DS via --marker-draw) espera a que
     iron.cat haya terminado de hablar */
  .nc-panel-wrap .nc-underline { transition-delay: 1150ms; }
}

@media (max-width: 780px) {
  .nc-panel-head { grid-template-columns: 1fr; align-items: start; }
  .nc--panel .nc-lede { padding-bottom: 0; }

  /* zigzag editorial: la marca habla desde la derecha, el eje se tumba en
     horizontal y iron.cat responde desde la izquierda */
  .nc-compare { grid-template-columns: minmax(0, 1fr); }

  .nc-axis {
    grid-template-rows: none;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: stretch;
    row-gap: 0;
    column-gap: 14px;
    margin-block: clamp(26px, 7vw, 40px);
  }

  .nc-axis::before,
  .nc-axis::after {
    width: auto;
    height: 1px;
  }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (max-width: 780px) {
  /* el filete tumbado se dibuja hacia el vs. (ejes X, no Y) */
  .nc-panel-wrap .nc-axis::before { transform-origin: right center; }
  .nc-panel-wrap .nc-axis::after { transform-origin: left center; }

  .nc-panel-wrap .nc-axis::before,
  .nc-panel-wrap .nc-axis::after { transform: scaleX(0); }

  .nc-panel-wrap.in-view .nc-axis::before,
  .nc-panel-wrap.in-view .nc-axis::after { transform: scaleX(1); }
}



/* fallback sin scroll-timeline o con reduced-motion: el dial queda como pieza
   decorativa (aro + foto), sin chips clavados en 01 bajo la lista completa */
@supports not (animation-timeline: view()) {
  .how-spoke { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .how-spoke { display: none; }
}


/* focus del accordion siguiendo la curvatura de la card */
.faq-item summary:focus-visible {
  border-radius: var(--ic-radius-xl, 18px);
  outline-offset: -2px;
}

.signal-card .signal-cta:focus-visible { outline-color: var(--ic-color-petrol); }

/* [30] área táctil digna del micro-CTA de señales */
.signal-card .signal-cta {
  width: max-content;
  min-height: 44px;
  align-items: center;
}

/* [58] fuentes del FAQ y [47/57] enlaces del footer con tap targets 44px */
.faq-a .faq-sources a { display: inline-block; padding-block: 8px; margin-block: -8px; }
.footer-legal a, .footer-top-link { display: inline-block; padding-block: 12px; margin-block: -12px; }

/* [56] conmutador de idioma alcanzable con el pulgar */
.lang-switch__opt { padding: 10px 6px; margin: -10px -2px; }

/* [46] legal del footer con contraste AA (fuera la doble transparencia) */
.footer-legal a { color: rgba(var(--ic-cream-rgb) / 0.8); opacity: 1; }
.footer-copy, .footer-legal { color: rgba(var(--ic-cream-rgb) / 0.78); }

/* [20/62] trustbar en AA */
.trustbar-group li { color: rgba(var(--ic-petrol-rgb) / 0.95); }

/* [36/60] microcopy del ticket legible */
.receipt-microcopy { color: rgba(var(--ic-petrol-rgb) / 0.86); font-size: 0.72rem; }

/* [48] nota del cierre legible */
.final-cta-note { font-size: 0.72rem; color: rgb(var(--ic-cream-dim-rgb) / 0.78); }


/* ============ tanda 4: sistema, señales, ticket, footer, móvil ============ */

/* [39] el corte del label del total, siempre semántico */
.receipt-total-label .nowrap { white-space: nowrap; }

/* [41] los rangos numéricos de la evidencia no se parten */
.kibble .kibble-card strong { white-space: nowrap; }

/* [42][43] tinta del ticket legible sin perder el tono desvaído */
.receipt-closing { color: rgba(var(--ic-petrol-rgb) / 0.62); }
.receipt-meta { font-size: 0.72rem; }

/* [28] el dot-grid de Arenero fuera de la caja de texto */
.signal-card-litter .signal-dot-grid { right: 18px; top: 46px; bottom: auto; z-index: -1; }

/* [29] la planta de Riñón, acento de esquina y no fondo del párrafo */
.signal-card-kidney .signal-plant {
  right: -28px;
  top: auto;
  bottom: 6px;
  width: 116px;
  color: rgba(var(--ic-petrol-rgb) / 0.1);
}

/* [34] los anillos de Boca no rozan el CTA */
.signal-card-mouth .signal-rings { bottom: 46px; right: -34px; }

/* [31] cuerpo de las señales alineado con la escala de la página */
.signal-card p { font-size: clamp(0.95rem, 1vw, 1rem); line-height: 1.5; }

/* [32] filetes de las criteria-cards a la misma altura */
.criteria--bento .criteria-card { grid-template-rows: minmax(64px, auto) auto; align-items: start; }
.criteria--bento .criteria-card .criteria-card-icon { align-self: center; }

/* [38] el argumento acompaña al ticket durante todo el scroll */
@media (min-width: 861px) {
  .founding-inner .receipt-lede { position: sticky; top: 108px; align-self: start; }
}

/* [51] la silueta del cierre no ensucia el texto en móvil */
@media (max-width: 640px) {
  .final-cta-cat { opacity: 0.09; right: -90px; width: 200px; }
}

/* [53] el sello del ticket no pisa la línea meta en móvil */
@media (max-width: 480px) {
  .founding-ribbon.receipt-stamp { position: static; align-self: flex-end; margin: 0 0 10px; rotate: -2deg; }
}

/* [54] scrim bajo el menú móvil (cierra el foco visual) */
.site-header:has(.menu-toggle[aria-expanded="true"])::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(28, 48, 50, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* [71] el frame del hero comparte radio con los paneles grandes */
.hero--frame .hero-frame { border-radius: clamp(24px, 2.4vw, 36px); }

/* [72] filete interior compartido por los paneles petrol (como el nc) */
.kibble { position: relative; }
.kibble::after,
.final-cta::after {
  content: "";
  position: absolute;
  inset: clamp(12px, 1.4vw, 20px);
  border: 1px solid rgb(var(--ic-cream-dim-rgb) / 0.16);
  border-radius: clamp(14px, 1.4vw, 22px);
  pointer-events: none;
}

/* [75] un solo color de eyebrow sobre fondo claro (fuera overrides) */
.criteria-eyebrow, .faq-eyebrow { --eyebrow-color: rgba(var(--ic-petrol-rgb) / 0.72); }

/* ===================== BOL EMPOTRADO =======================
   En "El pienso apesta" queda estático con pienso. En "No vendemos comida" la
   comida se monta capa a capa con el scroll para mostrar la transición hacia
   comida natural.
   ========================================================================= */

/* el escenario: caja de proporción fija; cada capa se ancla en % sobre ella */
.bowl-embed {
  --bowl-sparkle-x: 0px;
  --bowl-sparkle-y: 0px;
  --bowl-sparkle-rot: 0deg;
  position: relative;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  aspect-ratio: 604 / 560;
}

.bowl-layer {
  position: absolute;
  left: 50%;
  margin: 0;
  translate: -50% 0;
}

.bowl-layer img {
  display: block;
  width: 100%;
  height: auto;
}

/* composición (estado final): el mantel pone la mesa, el bol encima con su
   sombra propia (las horneadas se eliminaron en el knockout) y la comida
   encajada en la boca del bol */
.bowl-layer--placemat {
  width: 106%;
  bottom: 0;
  filter: drop-shadow(0 10px 16px rgba(var(--ic-black-rgb) / 0.22));
}

.bowl-layer--bowl {
  width: 63%;
  bottom: 9%;
  filter: drop-shadow(0 14px 20px rgba(var(--ic-black-rgb) / 0.30));
}

.bowl-layer--kibble {
  width: 51%;
  bottom: 35%;
  opacity: 0; /* solo aparece durante la coreografía */
}

.bowl-layer--natural {
  width: 54%;
  bottom: 34%;
  filter: drop-shadow(0 6px 12px rgba(var(--ic-black-rgb) / 0.26));
}

.bowl-layer--sparkles {
  width: 92%;
  bottom: 47%;
  pointer-events: none;
  transform: translate3d(var(--bowl-sparkle-x), var(--bowl-sparkle-y), 0) rotate(var(--bowl-sparkle-rot));
  transition: transform 420ms var(--ic-ease-soft);
  will-change: transform, opacity, scale;
}

/* montaje DIRIGIDO POR EL SCROLL: view-timeline sobre el propio stage — las
   capas se añaden al bajar y se quitan al subir (scrub bidireccional). Cada
   sección declara su nombre de timeline. Requisito de la cadena de ancestros:
   ningún scroll container entre el stage y el viewport (por eso .kibble pasa
   de overflow:hidden a clip; con hidden el timeline se ata al panel y se
   congela). El pienso vive en un solo keyframe (entra/asienta/sale = swap). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.no-conflict-section .bowl-embed, .bowl-embed--sequence) { view-timeline-name: --bowl-sequence; }
    :is(.no-conflict-section .bowl-embed, .bowl-embed--sequence) .bowl-layer {
      animation-duration: 1s;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-timeline: --bowl-sequence;
    }

    /* rangos sobre el viaje del embed por el viewport (cover 0 = asoma por
       abajo; 100 = sale por arriba): la pieza debe leerse antes del final
       del scroll, así que el montaje y el cambio a comida natural cierran
       en la primera mitad del recorrido visible. */
    :is(.no-conflict-section .bowl-embed, .bowl-embed--sequence) .bowl-layer--placemat { animation-name: bowl-l-placemat; animation-range: cover 0% cover 18%; }
    :is(.no-conflict-section .bowl-embed, .bowl-embed--sequence) .bowl-layer--bowl { animation-name: bowl-l-bowl; animation-range: cover 14% cover 34%; }
    :is(.no-conflict-section .bowl-embed, .bowl-embed--sequence) .bowl-layer--kibble { animation-name: bowl-l-kibble; animation-range: cover 30% cover 58%; }
    :is(.no-conflict-section .bowl-embed, .bowl-embed--sequence) .bowl-layer--natural { animation-name: bowl-l-natural; animation-range: cover 54% cover 76%; }
    :is(.no-conflict-section .bowl-embed, .bowl-embed--sequence) .bowl-layer--sparkles { transform-origin: 50% 80%; animation-name: bowl-l-sparkles; animation-range: cover 66% cover 84%; }
  }
}

/* La secuencia debe leerse por capas: primero aparece la mesa, luego cae el bol,
   entra el pienso, cambia a comida natural y las estrellitas firman al final. */
@keyframes bowl-l-placemat {
  0% { opacity: 0; translate: -50% 20px; scale: 0.96; }
  42% { opacity: 1; }
  100% { opacity: 1; translate: -50% 0; scale: 1; }
}

@keyframes bowl-l-bowl {
  0% { opacity: 0; translate: -50% -34px; scale: 0.98; }
  36% { opacity: 1; }
  78% { opacity: 1; translate: -50% 2px; scale: 1.01; }
  100% { opacity: 1; translate: -50% 0; scale: 1; }
}

@keyframes bowl-l-kibble {
  0% { opacity: 0; translate: -50% -32px; scale: 0.94; }
  28% { opacity: 1; }
  48% { opacity: 1; translate: -50% 0; scale: 1; }
  72% { opacity: 1; translate: -50% 0; scale: 1; }
  100% { opacity: 0; translate: -50% 18px; scale: 0.98; }
}

@keyframes bowl-l-natural {
  0% { opacity: 0; translate: -50% -30px; scale: 0.92; }
  36% { opacity: 1; }
  72% { opacity: 1; translate: -50% 1px; scale: 1.02; }
  100% { opacity: 1; translate: -50% 0; scale: 1; }
}

@keyframes bowl-l-sparkles {
  0% { opacity: 0; scale: 0.62; rotate: -2deg; }
  58% { opacity: 1; scale: 1.08; rotate: 1.5deg; }
  100% { opacity: 1; scale: 1; }
}

.nc--panel .nc-panel-head { align-items: start; }
.nc--panel .nc-panel-head .bowl-embed {
  width: min(100%, clamp(200px, 19vw, 250px));
  max-width: none;
  justify-self: end;
  margin-top: clamp(18px, 2vw, 32px);
}

/* móvil: el bol de "No vendemos comida" baja bajo el título */
@media (max-width: 780px) {
  .nc--panel .nc-panel-head .bowl-embed {
    width: min(100%, clamp(160px, 44vw, 200px));
    max-width: none;
    justify-self: center;
    margin-top: clamp(8px, 3vw, 18px);
  }
}

/* La variante de salud mantiene el reveal ascendente aunque el panel ya no
   sea hermano inmediato de Señales dentro de .titan-stack. El panel entra
   desde abajo y recupera la sombra de cobertura de la home principal. */
.health-home .no-conflict-section {
  position: relative;
  z-index: 3;
  box-shadow: 0 -28px 70px rgba(var(--ic-black-rgb) / 0.18);
}

@keyframes health-nc-panel-rise {
  from { translate: 0 min(18svh, 180px); }
  to { translate: 0 0; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .health-home .no-conflict-section {
      animation: health-nc-panel-rise 1s linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 82%;
    }
  }
}

/* Variante de posicionamiento: salud y longevidad.
   Todo queda acotado a salud.html para no alterar la home principal. */
.health-home .hero-ficha {
  width: min(330px, 26vw);
}

.health-home .hf-macro {
  grid-template-columns: 64px minmax(48px, 1fr) auto;
  gap: 8px;
}

.health-home .hf-macro-nums,
.health-home .diet-card__nums {
  letter-spacing: 0;
}

.health-home .hf-macro-nums {
  font-size: 0.54rem;
}

.health-home .kibble .kibble-title {
  max-width: 10ch;
}

.health-home .kibble .kibble-card .kibble-stat {
  font-size: clamp(2.6rem, 3.8vw, 4rem);
  white-space: nowrap;
}

.health-home .kibble-source a {
  color: inherit;
  text-decoration-color: rgba(var(--ic-mustard-rgb) / 0.64);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (max-width: 1180px) and (min-width: 821px) {
  .health-home .hero-ficha {
    width: min(290px, 28vw);
    right: clamp(24px, 3vw, 42px);
  }

  .health-home .hf-macro {
    grid-template-columns: 56px minmax(36px, 1fr) auto;
    gap: 6px;
  }

  .health-home .hf-macro-nums {
    font-size: 0.49rem;
  }
}

@media (max-width: 760px) {
  .health-home .kibble .kibble-title {
    max-width: 12ch;
  }

  .health-home .kibble .kibble-card .kibble-stat {
    font-size: clamp(2.45rem, 13vw, 3.6rem);
  }
}

/* Salud: coste y prevención en cifras */
.health-economics {
  position: relative;
  overflow: clip;
  scroll-margin-top: 104px;
  padding: clamp(48px, 5vw, 72px) var(--ic-container-padding-x);
  color: var(--ic-color-petrol);
  background: var(--ic-bg-page);
}

.health-economics-inner { --ic-container-wide: 1360px; }

.health-economics-compare {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(104px, 10vw, 148px) minmax(0, 1fr);
  margin-top: 0;
  overflow: hidden;
  color: var(--ic-color-cream);
  border-radius: var(--ic-radius-sm);
  background: var(--ic-color-petrol);
}

.health-economics-compare::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--ic-color-mustard);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 800ms var(--ic-ease-soft) 120ms;
}

.health-economics-compare.in-view::before { transform: scaleX(1); }

.health-economics-figure {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 3.6vw, 52px);
}

.health-economics-label {
  margin: 0 0 clamp(34px, 4vw, 58px);
  color: rgba(var(--ic-cream-rgb) / 0.66);
  font: 700 0.66rem/1 var(--ic-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.health-economics-figure > strong {
  display: block;
  font: 500 clamp(3.45rem, 6.4vw, 6.9rem)/0.82 var(--ic-font-display);
  letter-spacing: 0;
  white-space: nowrap;
}

.health-economics-figure--average > strong { color: var(--ic-color-cream); }
.health-economics-figure--intervention > strong { color: var(--ic-color-coral); }

.health-economics-figure h3 {
  max-width: 20ch;
  margin: 20px 0 0;
  color: var(--ic-color-cream);
  font-family: var(--ic-font-display);
  font-size: clamp(1.3rem, 1.8vw, 1.72rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0;
}

.health-economics-figure > p:not(.health-economics-label) {
  max-width: 34rem;
  margin: 14px 0 0;
  color: rgba(var(--ic-cream-rgb) / 0.72);
  font-size: 0.82rem;
  line-height: 1.5;
}

.health-economics-gap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 14px;
  border-right: 1px dashed rgba(var(--ic-cream-rgb) / 0.2);
  border-left: 1px dashed rgba(var(--ic-cream-rgb) / 0.2);
  background: rgba(var(--ic-cream-rgb) / 0.045);
}

.health-economics-gap span,
.health-economics-gap small {
  color: rgba(var(--ic-cream-rgb) / 0.58);
  font: 700 0.6rem/1 var(--ic-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.health-economics-gap strong {
  margin: 11px 0 9px;
  color: var(--ic-color-mustard);
  font: 500 clamp(2.35rem, 4.2vw, 4.35rem)/0.85 var(--ic-font-display);
  letter-spacing: 0;
  white-space: nowrap;
}

.health-economics-figure a {
  width: fit-content;
  color: rgba(var(--ic-cream-rgb) / 0.88);
  font: 700 0.58rem/1.2 var(--ic-font-mono);
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-decoration-color: rgba(var(--ic-mustard-rgb) / 0.8);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-transform: uppercase;
}

.health-economics-figure a {
  margin-top: auto;
  padding-top: clamp(24px, 3vw, 38px);
}

.health-economics-figure a:hover { color: var(--ic-color-mustard); }

.health-economics-note {
  max-width: 64rem;
  margin: 14px 0 0;
  color: var(--ic-text-muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

@media (max-width: 1060px) {
  .health-economics-compare {
    grid-template-columns: minmax(0, 1fr) 94px minmax(0, 1fr);
  }

  .health-economics-figure { padding: 30px; }
  .health-economics-figure > strong { font-size: clamp(3.2rem, 7vw, 5.2rem); }
}

@media (max-width: 680px) {
  .health-economics {
    padding: 34px 14px 42px;
  }

  .health-economics-compare {
    grid-template-columns: 1fr;
  }

  .health-economics-figure { padding: 28px 24px 30px; }
  .health-economics-label { margin-bottom: 30px; }
  .health-economics-figure > strong { font-size: clamp(3.6rem, 18vw, 5rem); }
  .health-economics-figure h3 { margin-top: 16px; font-size: 1.28rem; }
  .health-economics-figure > p:not(.health-economics-label) { font-size: 0.8rem; }

  .health-economics-gap {
    flex-direction: row;
    gap: 10px;
    padding: 17px 24px;
    border-top: 1px dashed rgba(var(--ic-cream-rgb) / 0.2);
    border-right: 0;
    border-bottom: 1px dashed rgba(var(--ic-cream-rgb) / 0.2);
    border-left: 0;
  }

  .health-economics-gap strong {
    margin: 0;
    font-size: 2.5rem;
  }

  .health-economics-note { padding-inline: 8px; font-size: 0.64rem; }
}

/* Salud: ficha nutricional del hero */
.health-home .hero-ficha-review {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--ic-cream-rgb) / 0.16);
  color: rgba(var(--ic-cream-rgb) / 0.76);
  font-family: var(--ic-font-mono);
  font-size: 0.5rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: uppercase;
}

.health-home .hero-ficha-review strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ic-color-cream);
  font-size: 0.54rem;
}

.health-home .hero-ficha-review__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ic-color-mustard);
  box-shadow: 0 0 0 5px rgba(var(--ic-mustard-rgb) / 0.12);
}

/* Salud: demostración de producto */
.health-app-section {
  position: relative;
  overflow: clip;
  scroll-margin-top: 104px;
  padding: clamp(76px, 9vw, 132px) var(--ic-container-padding-x);
  color: var(--ic-color-petrol);
  background: var(--ic-color-cream);
}

.health-app-inner {
  --ic-container-wide: 1360px;
}

.health-app-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.65fr);
  align-items: end;
  gap: clamp(28px, 6vw, 96px);
  margin-bottom: clamp(34px, 4vw, 58px);
}

.health-app-head h2 {
  max-width: 15ch;
  margin: 14px 0 0;
  color: var(--ic-color-petrol);
  font-size: clamp(2.7rem, 5vw, 5.3rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

.health-app-head h2 span { color: var(--ic-color-coral); }

.health-app-head > p {
  max-width: 34rem;
  margin: 0;
  color: var(--ic-text-body);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.55;
}

.health-app-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}

.health-app-card {
  position: relative;
  min-width: 0;
  min-height: clamp(650px, 52vw, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(24px, 2.5vw, 36px) clamp(22px, 2.3vw, 32px) 0;
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.14);
  border-radius: var(--ic-radius-sm);
  background: rgba(var(--ic-sage-rgb) / 0.5);
  isolation: isolate;
}

.health-app-card--diet {
  color: var(--ic-color-cream);
  border-color: rgba(var(--ic-cream-rgb) / 0.14);
  background: var(--ic-color-petrol-950);
}

.health-app-card--help { background: var(--ic-surface-tint); }

.health-app-copy { position: relative; z-index: 3; }

.health-app-card--diet .health-app-num { color: var(--ic-color-mustard); }

.health-app-copy h3 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(1.9rem, 2.45vw, 2.7rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0;
  text-wrap: balance;
}

.health-app-copy > p:last-child {
  max-width: 34rem;
  margin: 16px 0 0;
  color: rgba(var(--ic-petrol-rgb) / 0.8);
  font-size: 0.96rem;
  line-height: 1.5;
}

.health-app-card--diet .health-app-copy > p:last-child {
  color: rgba(var(--ic-cream-rgb) / 0.76);
}

.health-app-phone {
  position: relative;
  z-index: 2;
  width: min(76%, 270px);
  max-height: 500px;
  flex: 0 0 auto;
  overflow: hidden;
  margin: auto auto -38px;
  padding: 6px;
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.24);
  border-radius: 28px 28px 0 0;
  background: var(--ic-surface-raised);
  box-shadow: 0 24px 52px rgba(var(--ic-petrol-rgb) / 0.16);
}

/* Las dos formas del mismo hijo, y NO un descendiente suelto.

   Las capturas van envueltas en <picture> para servir el WebP (el PNG de salud
   pesa 1106 KB y su WebP 66), así que entre el contenedor y la <img> hay ahora
   un elemento intermedio y el `>` a secas dejó de casar. Pero abrirlo a
   descendiente tampoco vale: dentro del primer teléfono cuelga también el
   avatar de Eva de la tarjeta flotante, y se le aplicaban el `width: 100%` y el
   radio del marco. */
.health-app-phone > img,
.health-app-phone > picture > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 21px 21px 0 0;
}

.health-app-card--diet .health-app-phone {
  border-color: rgba(var(--ic-cream-rgb) / 0.22);
  box-shadow: 0 24px 52px rgba(var(--ic-black-rgb) / 0.22);
}

.health-app-float {
  position: absolute;
  z-index: 4;
  right: -54px;
  bottom: 90px;
  width: min(270px, 76vw);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 11px 13px;
  color: var(--ic-color-petrol);
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.16);
  border-radius: var(--ic-radius-sm);
  background: rgba(var(--ic-cream-rgb) / 0.96);
  box-shadow: 0 12px 28px rgba(var(--ic-petrol-rgb) / 0.16);
  font-size: 0.68rem;
  line-height: 1.42;
}

.health-app-float strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.73rem;
}

.health-app-avatar {
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
}

.health-app-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
}

.health-app-help-media {
  position: relative;
  min-height: 430px;
  margin-top: auto;
}

.health-app-phone--behavior {
  position: absolute;
  left: 0;
  bottom: -28px;
  z-index: 1;
  width: 70%;
  max-height: 420px;
  margin: 0;
}

.health-app-phone--chat {
  position: absolute;
  right: -16px;
  bottom: -38px;
  z-index: 3;
  width: 45%;
  max-height: 350px;
  margin: 0;
}

.health-app-media-label {
  position: absolute;
  z-index: 5;
  padding: 7px 9px;
  color: var(--ic-color-petrol);
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.18);
  border-radius: var(--ic-radius-xs);
  background: rgba(var(--ic-cream-rgb) / 0.96);
  box-shadow: 0 8px 20px rgba(var(--ic-petrol-rgb) / 0.12);
  font: 700 0.57rem/1 var(--ic-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.health-app-media-label--video { top: 10px; left: 10px; }
.health-app-media-label--help { top: 66px; right: -6px; }

.health-app-showcase {
  --health-app-index: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.18);
  border-radius: 8px;
  background: rgba(var(--ic-sage-rgb) / 0.42);
  box-shadow: 0 28px 70px rgba(var(--ic-petrol-rgb) / 0.1);
}

.health-app-tabs {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid rgba(var(--ic-petrol-rgb) / 0.16);
  background: rgba(var(--ic-cream-rgb) / 0.82);
}

.health-app-tabs button {
  position: relative;
  min-width: 0;
  min-height: 70px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 16px;
  color: rgba(var(--ic-petrol-rgb) / 0.62);
  border: 0;
  border-right: 1px solid rgba(var(--ic-petrol-rgb) / 0.12);
  background: transparent;
  font: 700 0.76rem/1 var(--ic-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 220ms var(--ic-ease-soft), background-color 220ms var(--ic-ease-soft);
}

.health-app-tabs button:last-child { border-right: 0; }

.health-app-tabs button span {
  color: rgba(var(--ic-petrol-rgb) / 0.42);
  font-size: 0.62rem;
  transition: color 220ms var(--ic-ease-soft);
}

.health-app-tabs button::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: -1px;
  left: 16px;
  height: 3px;
  background: var(--ic-color-mustard);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ic-ease-soft);
}

.health-app-tabs button:hover { color: var(--ic-color-petrol); }
.health-app-tabs button:focus-visible { z-index: 2; outline: 2px solid var(--ic-color-coral); outline-offset: -4px; }
.health-app-tabs button.is-active { color: var(--ic-color-cream); background: var(--ic-color-petrol); }
.health-app-tabs button.is-active span { color: var(--ic-color-mustard); }
.health-app-tabs button.is-active::after { transform: scaleX(1); }

.health-app-stage {
  min-height: clamp(510px, 44vw, 620px);
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(260px, 1.1fr);
  align-items: center;
  gap: clamp(34px, 7vw, 96px);
  padding: clamp(34px, 4vw, 54px) clamp(28px, 6vw, 84px) 0;
}

.health-app-copy-stage {
  align-self: center;
  min-width: 0;
  padding-bottom: clamp(36px, 5vw, 68px);
}

.health-app-panel-stack {
  position: relative;
  min-height: 258px;
}

.health-app-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity 260ms var(--ic-ease-soft), transform 320ms var(--ic-ease-soft);
}

.health-app-panel.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.health-app-num {
  margin: 0 0 18px;
  color: var(--ic-color-petrol-700);
  font-family: var(--ic-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.health-app-panel h3 {
  max-width: 12ch;
  margin: 0;
  color: var(--ic-color-petrol);
  font-size: clamp(2.5rem, 4vw, 4.4rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

.health-app-panel > p:last-child {
  max-width: 31rem;
  margin: 22px 0 0;
  color: rgba(var(--ic-petrol-rgb) / 0.8);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.55;
}

.health-app-position {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) auto;
  align-items: center;
  gap: 14px;
  max-width: 430px;
  margin-top: 30px;
  color: rgba(var(--ic-petrol-rgb) / 0.52);
  font: 700 0.58rem/1 var(--ic-font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.health-app-position i {
  position: relative;
  overflow: hidden;
  height: 2px;
  background: rgba(var(--ic-petrol-rgb) / 0.16);
}

.health-app-position b {
  position: absolute;
  inset: 0;
  background: var(--ic-color-mustard);
  transform: scaleX(calc((var(--health-app-index) + 1) / 4));
  transform-origin: left;
  transition: transform 280ms var(--ic-ease-soft);
}

.health-app-position strong {
  color: var(--ic-color-petrol);
  font: inherit;
}

.health-app-device {
  position: relative;
  z-index: 2;
  width: min(100%, 330px);
  aspect-ratio: 9 / 16;
  align-self: end;
  justify-self: center;
  overflow: hidden;
  padding: 10px 9px 0;
  border: 1px solid rgba(var(--ic-cream-rgb) / 0.26);
  border-bottom: 0;
  border-radius: 42px 42px 0 0;
  background: var(--ic-color-petrol-950);
  box-shadow: 0 32px 72px rgba(var(--ic-petrol-rgb) / 0.25);
  isolation: isolate;
}

.health-app-device-speaker {
  position: absolute;
  z-index: 5;
  top: 18px;
  left: 50%;
  width: 52px;
  height: 5px;
  border-radius: 999px;
  background: rgba(var(--ic-petrol-rgb) / 0.48);
  transform: translateX(-50%);
}

.health-app-screen-stack {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 33px 33px 0 0;
  background: var(--ic-color-cream);
}

.health-app-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition: opacity 300ms var(--ic-ease-soft), transform 380ms var(--ic-ease-soft);
}

.health-app-screen.is-active {
  z-index: 2;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.health-app-device-glint {
  position: absolute;
  z-index: 4;
  inset: 10px 9px 0;
  border: 1px solid rgba(var(--ic-cream-rgb) / 0.24);
  border-radius: 33px 33px 0 0;
  pointer-events: none;
}

/* Salud: resultado real del chequeo mensual */
.monthly-check-section {
  position: relative;
  overflow: clip;
  scroll-margin-top: 104px;
  padding: clamp(68px, 7vw, 96px) var(--ic-container-padding-x);
  color: var(--ic-color-petrol);
  background: var(--ic-surface-tint);
}

.monthly-check-inner {
  --ic-container-wide: 1240px;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(42px, 7vw, 96px);
}

.monthly-check-head {
  display: block;
}

.monthly-check-head > div { min-width: 0; }

.monthly-check-head h2 {
  max-width: 14ch;
  margin: 14px 0 0;
  color: var(--ic-color-petrol);
  font-size: clamp(2.65rem, 4.4vw, 4.7rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

.monthly-check-head h2 span { color: var(--ic-color-coral); }

.monthly-check-head > p:last-child {
  max-width: 32rem;
  margin: 24px 0 0;
  color: var(--ic-text-body);
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  line-height: 1.52;
}

.monthly-check-demo {
  width: 100%;
  max-width: 720px;
  justify-self: end;
  margin: 0;
}

.monthly-result-card {
  position: relative;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.18);
  border-radius: 8px;
  background: var(--ic-surface-raised);
  box-shadow: 0 22px 52px rgba(var(--ic-petrol-rgb) / 0.11);
}

.monthly-result-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: clamp(24px, 3vw, 34px);
  left: clamp(24px, 3vw, 34px);
  height: 3px;
  background: var(--ic-color-mustard);
  transform: scaleX(var(--monthly-line-progress, 1));
  transform-origin: left;
}

.monthly-result-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--ic-petrol-rgb) / 0.14);
}

.monthly-result-avatar {
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
}

.monthly-result-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.monthly-result-head small,
.monthly-result-head strong { display: block; }
.monthly-result-head small { margin-bottom: 4px; color: var(--ic-text-muted); font: 700 0.58rem/1 var(--ic-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.monthly-result-head strong { color: var(--ic-color-petrol); font-size: 1rem; }
.monthly-result-head em { display: inline-flex; align-items: center; gap: 5px; color: var(--ic-color-petrol-700); font: normal 700 0.57rem/1 var(--ic-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.monthly-result-head em span { color: var(--ic-color-mustard-700); }

.monthly-result-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.monthly-result-signals li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 27px;
  padding: 0 8px;
  color: var(--ic-color-petrol);
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.14);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
}

.monthly-result-signals li > span { width: 7px; height: 7px; border-radius: 50%; background: var(--ic-color-sage-700); }
.monthly-result-signals li > .is-positive { background: var(--ic-color-petrol); }
.monthly-result-signals li > .is-watch { background: var(--ic-color-mustard); }

.monthly-result-card blockquote {
  margin: 18px 0 0;
  padding: 0 0 0 16px;
  border-left: 3px solid var(--ic-color-mustard);
}

.monthly-result-card blockquote p {
  margin: 0;
  color: var(--ic-color-petrol);
  font-family: var(--ic-font-display);
  font-size: clamp(1.08rem, 1.55vw, 1.42rem);
  line-height: 1.32;
}

.monthly-result-card blockquote p + p { margin-top: 10px; }

.monthly-result-card footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 4px 16px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed rgba(var(--ic-petrol-rgb) / 0.2);
}

.monthly-result-card footer strong,
.monthly-result-card footer span { display: block; }
.monthly-result-card footer strong { color: var(--ic-color-petrol); font-size: 0.8rem; }
.monthly-result-card footer span { color: var(--ic-text-muted); font-size: 0.7rem; }
.monthly-result-card footer time { grid-column: 2; grid-row: 1 / 3; color: var(--ic-text-muted); font: 700 0.58rem/1 var(--ic-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }

@media (prefers-reduced-motion: no-preference) {
  .monthly-result-card {
    opacity: var(--monthly-result-opacity, 1);
    transform: translateY(var(--monthly-result-y, 0px)) scale(var(--monthly-result-scale, 1));
    transform-origin: 50% 55%;
  }
}

/* Salud: suscripción */
.health-home .health-pricing {
  min-height: 0;
  padding: clamp(96px, 9vw, 132px) var(--ic-container-padding-x) clamp(72px, 8vw, 108px);
  scroll-margin-top: 96px;
  background: var(--ic-color-cream);
}

.health-pricing-inner { --ic-container-wide: 1180px; }

.health-pricing-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.62fr);
  align-items: end;
  gap: clamp(28px, 6vw, 88px);
  margin-bottom: clamp(28px, 4vw, 44px);
}

.health-pricing-head h2 {
  max-width: 14ch;
  margin: 14px 0 0;
  color: var(--ic-color-petrol);
  font-size: var(--ic-type-h2-size);
  font-weight: 400;
  line-height: var(--ic-type-h2-line);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.health-pricing-head h2 span { color: var(--ic-color-coral); }

.health-pricing-summary {
  max-width: 32rem;
  margin: 0;
  color: var(--ic-text-body);
  font-size: var(--ic-type-body-lg-size);
  line-height: var(--ic-type-body-lg-line);
}

.health-billing-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.2);
  border-radius: var(--ic-radius-sm);
  background: rgba(var(--ic-sage-rgb) / 0.34);
}

.health-billing-toggle button {
  min-height: 40px;
  padding: 0 16px;
  color: var(--ic-color-petrol);
  border: 0;
  border-radius: var(--ic-radius-xs);
  background: transparent;
  font: 700 0.74rem/1 var(--ic-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms var(--ic-ease-soft), background-color 180ms var(--ic-ease-soft);
}

.health-billing-toggle button span { display: block; margin-top: 4px; font-size: 0.54rem; color: var(--ic-color-coral-900); }
.health-billing-toggle button.is-active { color: var(--ic-color-cream); background: var(--ic-color-petrol); }
.health-billing-toggle button.is-active span { color: var(--ic-color-mustard); }

.health-pricing-eva {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ic-petrol-rgb) / 0.18);
}

.health-pricing-eva > span {
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 50%;
}

.health-pricing-eva img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.health-pricing-eva p { margin: 0; color: var(--ic-text-body); font-size: 0.76rem; line-height: 1.4; }
.health-pricing-eva strong { display: block; margin-bottom: 2px; color: var(--ic-color-petrol); font-size: 0.82rem; }

.health-plan-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.18);
  border-radius: var(--ic-radius-card);
  background: var(--ic-surface-raised);
  box-shadow: 0 22px 54px rgba(var(--ic-petrol-rgb) / 0.1);
}

.health-plan-ticket {
  --health-ticket-cut: 12px;
  padding-bottom: var(--health-ticket-cut);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--health-ticket-cut)) no-repeat,
    radial-gradient(circle at 50% 100%, transparent 0 6px, #000 6.5px) bottom / 20px var(--health-ticket-cut) repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--health-ticket-cut)) no-repeat,
    radial-gradient(circle at 50% 100%, transparent 0 6px, #000 6.5px) bottom / 20px var(--health-ticket-cut) repeat-x;
  box-shadow: none;
  filter: drop-shadow(0 22px 27px rgba(var(--ic-petrol-rgb) / 0.1));
}

.health-plan-ticket::before,
.health-plan-ticket::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 58%;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(var(--ic-petrol-rgb) / 0.16);
  border-radius: 50%;
  background: var(--ic-color-cream);
}

.health-plan-ticket::before { left: -12px; }
.health-plan-ticket::after { right: -12px; }

.health-ticket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(22px, 3vw, 34px);
  border-bottom: 1px dashed rgba(var(--ic-petrol-rgb) / 0.24);
}

.health-ticket-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.health-ticket-logo {
  margin: 0;
  color: var(--ic-color-petrol);
  font: 500 1.45rem/1 var(--ic-font-display);
}

.health-ticket-meta,
.health-ticket-section-label {
  margin: 4px 0 0;
  color: var(--ic-color-petrol-700);
  font: 700 0.61rem/1.25 var(--ic-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.health-plan-label {
  margin: 0 0 8px;
  color: var(--ic-color-petrol-700);
  font: 700 0.72rem/1 var(--ic-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* El importe NO se parte nunca. Es un flex y el `strong` encogía por defecto,
   así que a 72 px «5,33 €» rompía por el espacio y el euro caía a la línea de
   abajo. `flex: 0 0 auto` le quita el encogido y `white-space: nowrap` remata;
   si aun así no cupiera, `flex-wrap` baja el periodo entero en vez de destrozar
   la cifra. */
.health-plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.health-plan-price strong { flex: 0 0 auto; white-space: nowrap; color: var(--ic-color-coral-700); font: 550 clamp(3.3rem, 5vw, 4.7rem)/0.9 var(--ic-font-display); letter-spacing: 0; }
.health-plan-price span { color: var(--ic-color-petrol); font-size: 1rem; font-weight: 700; }

.health-plan-cat {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 2px solid rgba(var(--ic-mustard-rgb) / 0.68);
  border-radius: 50%;
}

.health-plan-cat img { width: 100%; height: 100%; object-fit: cover; }
.health-plan-note { margin: 10px 0 0; color: var(--ic-text-muted); font-size: 0.74rem; }

.health-ticket-body {
  display: grid;
  grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.28fr);
}

.health-ticket-price-block,
.health-ticket-included {
  padding: clamp(24px, 3vw, 34px);
}

.health-ticket-price-block {
  border-right: 1px dashed rgba(var(--ic-petrol-rgb) / 0.24);
}

.health-ticket-included .health-ticket-section-label { margin-top: 0; }

.health-plan-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.health-plan-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid rgba(var(--ic-petrol-rgb) / 0.1);
}

.health-plan-list li:nth-child(-n + 2) { border-top: 0; }
.health-plan-list li > span { color: var(--ic-color-mustard-700); font-weight: 800; }
.health-plan-list p { margin: 0; color: var(--ic-text-muted); font-size: 0.8rem; line-height: 1.4; }
.health-plan-list strong { display: block; margin-bottom: 2px; color: var(--ic-color-petrol); font-size: 0.84rem; }
.health-plan-list small { display: block; color: var(--ic-text-muted); font-size: 0.7rem; line-height: 1.35; }

.health-plan-extras {
  display: grid;
  grid-template-columns: auto repeat(2, minmax(0, 1fr));
  align-items: stretch;
  padding: 0 clamp(22px, 3vw, 34px);
  border-top: 1px dashed rgba(var(--ic-petrol-rgb) / 0.24);
  border-bottom: 1px dashed rgba(var(--ic-petrol-rgb) / 0.24);
}

.health-plan-extras > .health-ticket-section-label {
  align-self: center;
  margin: 0 24px 0 0;
}

.health-plan-extras > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-left: 1px solid rgba(var(--ic-petrol-rgb) / 0.12);
}

.health-plan-extras span, .health-plan-extras strong { display: block; }
.health-plan-extras span { color: var(--ic-text-muted); font-size: 0.75rem; line-height: 1.35; }
.health-plan-extras span strong { color: var(--ic-color-petrol); font-size: 0.84rem; }
.health-plan-extras b { color: var(--ic-color-petrol); font-size: 0.86rem; white-space: nowrap; }

.health-ticket-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  padding: 18px clamp(22px, 3vw, 34px) 14px;
}

.health-plan-cta {
  width: auto;
  min-width: min(100%, 300px);
  margin: 0;
}

.health-ticket-closing {
  margin: 0;
  padding: 12px 24px 14px;
  color: rgba(var(--ic-petrol-rgb) / 0.54);
  border-top: 1px dashed rgba(var(--ic-petrol-rgb) / 0.2);
  font: 700 0.57rem/1 var(--ic-font-mono);
  letter-spacing: 0.09em;
  text-align: center;
}

@media (max-width: 1100px) {
  .health-app-grid { grid-template-columns: 1fr; }
  .health-app-card {
    min-height: 560px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    align-items: center;
    gap: clamp(24px, 6vw, 70px);
    padding: clamp(28px, 5vw, 48px) clamp(26px, 5vw, 54px) 0;
  }
  .health-app-phone { width: min(100%, 260px); max-height: 450px; }
  .health-app-phone--behavior { width: 70%; max-height: 420px; }
  .health-app-phone--chat { right: -6px; width: 45%; max-height: 350px; }
  .health-app-help-media { width: 100%; min-height: 420px; margin-top: 0; }
}

@media (max-width: 900px) {
  .monthly-check-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .monthly-check-head { max-width: 680px; }
  .monthly-check-head > p:last-child { max-width: 42rem; }
  .monthly-check-demo { max-width: 680px; justify-self: start; }

  .health-pricing-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .health-pricing-summary { max-width: 38rem; }
}

@media (max-width: 820px) {
  .health-home .hero--frame .hero-content {
    padding-bottom: 28px;
  }

  .health-home .hero-ficha {
    position: relative;
    right: auto;
    bottom: auto;
    display: block;
    align-self: flex-start;
    width: min(520px, calc(100% - 44px));
    margin: 0 22px 118px;
    animation: none;
    transform: none;
    translate: none;
  }

  .health-home .hero-ficha-card {
    padding: 14px 16px 13px;
    border-radius: var(--ic-radius-sm);
  }

  .health-home .hero-ficha-avatar {
    width: 36px;
    height: 36px;
  }

  .health-home .hero-ficha-name {
    font-size: 1rem;
  }

  .health-home .hero-ficha-spark,
  .health-home .hero-ficha-review {
    display: none;
  }

  .health-home .hero-ficha-macros {
    margin-top: 13px;
    gap: 8px;
  }

  .health-home .hf-macro {
    grid-template-columns: 70px minmax(44px, 1fr) auto;
  }

  .health-app-head { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 680px) {
  .health-home .hero-ficha {
    width: calc(100% - 44px);
    margin-bottom: 156px;
  }
  .health-app-section { padding-inline: 14px; }
  .health-app-head { padding-inline: 8px; }
  .health-app-head h2 { font-size: clamp(2.55rem, 13vw, 3.65rem); }
  .health-app-card {
    min-height: 690px;
    display: flex;
    padding: 26px 22px 0;
  }
  .health-app-copy h3 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .health-app-phone { width: min(72%, 235px); max-height: 410px; }
  .health-app-float { right: -30px; bottom: 58px; width: 240px; }
  .health-app-help-media { min-height: 400px; margin-top: auto; }
  .health-app-phone--behavior { bottom: -18px; width: 70%; max-height: 390px; }
  .health-app-phone--chat { width: 46%; max-height: 320px; }
  .health-app-media-label { font-size: 0.52rem; }
  .health-app-media-label--video { top: 16px; left: 4px; }
  .health-app-media-label--help { top: 74px; right: -4px; }

  .monthly-check-section { padding: 64px 14px 72px; }
  .monthly-check-head { padding-inline: 8px; }
  .monthly-check-head h2 { max-width: 14ch; font-size: clamp(2.25rem, 10.5vw, 3rem); }
  .monthly-check-head > p:last-child { font-size: 0.94rem; line-height: 1.48; }
  .monthly-check-inner { gap: 26px; }
  .monthly-check-demo { margin: 0; }
  .monthly-result-card { padding: 22px 18px; }
  .monthly-result-head { gap: 9px; }
  .monthly-result-head small { font-size: 0.52rem; }
  .monthly-result-head strong { font-size: 0.9rem; }
  .monthly-result-head em { font-size: 0.51rem; }
  .monthly-result-signals { flex-wrap: nowrap; gap: 4px; }
  .monthly-result-signals li { min-height: 25px; padding-inline: 6px; font-size: 0.58rem; }
  .monthly-result-card blockquote { margin-top: 18px; padding-left: 14px; }
  .monthly-result-card blockquote p { font-size: clamp(1.04rem, 4.8vw, 1.2rem); }
  .health-home .health-pricing { padding: 80px var(--ic-container-padding-x) 72px; }
  .health-pricing-head { margin-bottom: 24px; }
  .health-pricing-head h2 { font-size: var(--ic-type-h2-mobile-size); }
  .health-ticket-head { align-items: stretch; flex-direction: column; }
  .health-billing-toggle { width: 100%; }
  .health-billing-toggle button { min-width: 0; padding-inline: 10px; }
  .health-ticket-body { grid-template-columns: 1fr; }
  .health-ticket-price-block {
    display: block;
    padding: 24px 20px;
    border-right: 0;
    border-bottom: 1px dashed rgba(var(--ic-petrol-rgb) / 0.24);
  }
  .health-ticket-price-block .health-pricing-eva {
    margin-top: 20px;
    padding: 17px 0 0;
    border-top: 1px solid rgba(var(--ic-petrol-rgb) / 0.16);
    border-left: 0;
  }
  .health-ticket-included { padding: 24px 20px; }
  .health-plan-price strong { font-size: clamp(3rem, 16vw, 4.2rem); }
  .health-plan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .health-plan-list small { display: none; }
  .health-plan-extras { grid-template-columns: 1fr; padding-inline: 20px; }
  .health-plan-extras > .health-ticket-section-label { grid-column: auto; }
  .health-plan-extras > div,
  .health-plan-extras > div:first-of-type {
    align-items: start;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 13px 0;
    border-top: 1px solid rgba(var(--ic-petrol-rgb) / 0.1);
    border-left: 0;
  }
  .health-ticket-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 13px;
    padding-inline: 20px;
  }
  .health-plan-cta { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .health-billing-toggle button { transition: none; }
}

/* Homepage · CTA de énfasis.
   El contrato se limita a la home para no recolorear botones secundarios,
   acciones petrol ni controles de producto que comparten esta hoja. La
   especificidad cubre también los estados del header y el CTA del drawer. */
.health-home .button.button-primary.button-arrow,
.health-home .site-header .button.button-nav.button-arrow {
  color: var(--ic-color-white);
}

.health-home .button.button-primary.button-arrow:is(:hover, :focus-visible),
.health-home .site-header .button.button-nav.button-arrow:is(:hover, :focus-visible) {
  color: var(--ic-color-sage);
}