/* ── GOOGLE FONTS ─────────────────────────────────────────── */
/* Fuentes cargadas como <link> en el HTML para no bloquear este CSS */

/* ── RESET & BOX MODEL ────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── TOKENS DE DISEÑO ─────────────────────────────────────── */
:root {
  /* ── Vars configurables desde el admin (con fallback dark luxury) ── */
  --primary-color:    #c9a84c;
  --secondary-color:  #007bff;
  --accent-color:     #c9a84c;
  --background-color: #0a0a0a;
  --text-color:       #f0ebe0;

  /* ── Paleta dark luxury anclada a las vars configurables ── */
  --bg-base:    var(--background-color);
  --gold:       var(--primary-color);
  --gold-light: var(--accent-color);
  --cream:      var(--text-color);

  /* ── El resto se deriva del gold y del bg ── */
  --bg-layer1:     color-mix(in srgb, var(--background-color) 85%, white);
  --bg-layer2:     color-mix(in srgb, var(--background-color) 70%, white);
  --bg-layer3:     color-mix(in srgb, var(--background-color) 55%, white);
  --bg-card:       rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.07);

  --gold-dim:    color-mix(in srgb, var(--primary-color) 15%, transparent);
  --gold-border: color-mix(in srgb, var(--primary-color) 30%, transparent);
  --cream-dim:   color-mix(in srgb, var(--text-color) 60%, transparent);
  /* 35% daba ~2.8:1 de contraste: por debajo del mínimo legible (4.5:1) y
     literalmente invisible en un celular a pleno sol. 50% deja ~4.6:1 y
     sigue leyéndose como texto secundario. */
  --cream-muted: color-mix(in srgb, var(--text-color) 50%, transparent);

  /* ── Alias usados por el CSS que nunca se habían definido ──────
     Sin estas tres, `var(--text-muted)` y `var(--border)` eran valores
     inválidos: el color heredaba (los placeholders y las ayudas salían
     a todo color, iguales que un valor escrito) y los bordes no se
     dibujaban. Se declaran aquí, encima de los temas, para que cada
     tema las resuelva con su propia paleta sin repetirlas. */
  --text-muted:   var(--cream-dim);
  --border:       var(--gold-border);
  --font-heading: var(--font-display);

  /* Iconos que el CSS pinta en ::before. Van como máscara y no como emoji
     para que hereden el color del tema y midan siempre lo mismo — un
     emoji lo dibuja cada sistema a su manera y a su tamaño. */
  --ico-estrella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.26 6.85.72-5.1 4.6 1.42 6.72L12 16.9l-6.07 3.4L7.35 13.6 2.25 9l6.85-.72z'/%3E%3C/svg%3E");
  --ico-carrito: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6'/%3E%3C/svg%3E");

  /* ── Resto de tokens (no cambian con el admin) ── */
  --white:   #ffffff;
  --error:   #e05c5c;
  --success: #4caf7d;
  --btn-text: #0a0a0a;

  /* Un solo tipo para todo. --font-body era Lora, una serif, y bastaba
     ella sola para que la página se leyera como periódico: remates en el
     texto corrido + párrafos centrados = columna editorial. Se mantiene
     el nombre de la variable para no tocar los 15 sitios que la usan. */
  /* Oswald titula, Montserrat cuenta.
     Oswald es una condensada de trazo vertical: ocupa menos ancho por
     letra, así que un titular que en Montserrat 800 se parte en cuatro
     líneas en un móvil, aquí cabe en dos. Ese es todo el efecto de los
     titulares que se ven "compactos" en los anuncios.
     Ojo al tocar pesos: Oswald llega hasta 700, no tiene 800 ni 900. Un
     font-weight mayor no da más grosor, lo sintetiza el navegador y sale
     sucio — por eso los titulares se fijaron en 700. */
  --font-display: 'Oswald', 'Montserrat', system-ui, sans-serif;
  --font-body:    'Montserrat', system-ui, sans-serif;

  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-pill:100px;

  /* ── SISTEMA DE TARJETAS ────────────────────────────────────
     La sensación de "elegante y ordenado" de una landing no sale de
     los colores: sale de que doce tarjetas seguidas midan exactamente
     lo mismo. Aquí había 14 tarjetas con 5 fondos, 3 radios y 8
     paddings distintos, y por eso al bajar parecía una maqueta de
     periódico — cada bloque con su propia caja.
     Estos cuatro tokens son la medida única. Cualquier tarjeta nueva
     debe salir de aquí y no inventarse la suya. */
  --card-bg:      var(--bg-layer2);
  /* Sin borde: la tarjeta se despega del fondo por la sombra, no por una
     línea. Es la receta del price-box, que es la que mejor funciona de
     toda la landing. Una línea clara de 1px alrededor de cada bloque
     dibuja la cuadrícula de la maqueta en vez de disimularla — se ven
     las cajas antes que el contenido. */
  --card-border:  none;
  --card-shadow:  0 2px 16px rgba(0,0,0,0.13);
  --card-radius:  16px;
  --card-pad:     20px;
  --card-gap:     12px;

  /* El chip que envuelve cada icono. En la referencia visual es lo que
     convierte un SVG suelto en un elemento de interfaz: cuadrado
     redondeado, fondo propio, icono en color de acento. */
  --chip-size:    40px;
  --chip-radius:  11px;
  --chip-bg:      color-mix(in srgb, var(--gold) 13%, transparent);

  /* Acento de acción — sólo los botones de compra. Ver la explicación
     larga en el bloque "EL ACENTO DE ACCIÓN" al final del archivo.
     Vive aquí arriba, antes de los temas, para que cada tema pueda
     definir el suyo: en la cascada :root y [data-theme] pesan igual, así
     que gana el que esté más abajo. Por defecto es el mismo dorado, y
     por eso los ocho temas anteriores no cambian nada. */
  --cta:      var(--gold);
  --cta-soft: var(--gold-light);
  --cta-text: var(--btn-text);

  --shadow-gold: 0 0 24px color-mix(in srgb, var(--primary-color) 20%, transparent);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-deep: 0 20px 60px rgba(0,0,0,0.7);

  --transition:      0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s ease;

  /* logos de transportadoras: 1 = blanco (temas oscuros), 0 = negro (temas claros) */
  --carrier-invert: 1;
}

/* ============================================================
   SISTEMA DE TEMAS — cinco temas, uno por nicho
   ============================================================
   Cada tema sobreescribe las vars estructurales. Las vars de
   personalización del admin se aplican encima via el <style> inline
   en el <head> del template.

   ── LA RECETA ────────────────────────────────────────────────
   Aquí había nueve temas. Cuatro eran variaciones del mismo sitio
   (tres rosas y un negro sin dorado) y, salvo midnight-amber, ninguno
   estaba diseñado: estaban parcheados. Cada tema claro arrastraba unos
   cincuenta selectores propios repintando componente a componente
   —.benefit-item, .step-card, .porque-card, .garantia-card…— y varios
   con !important, peleando contra el sistema de tarjetas del final del
   archivo y volviendo a dibujar el borde que ese sistema quita a
   propósito.

   midnight-amber necesitaba DOS selectores. Esa es toda la diferencia,
   y no es de gusto: un tema que necesita cincuenta parches es un tema
   cuyos tokens están mal puestos.

   Los cinco siguen ahora la misma receta:

     1. Capas de fondo en hex SÓLIDO. Nada de rgba sobre un fondo que
        no controlas: la tarjeta de natural-sage era
        rgba(45,106,79,0.05) sobre #f4f7f4 — eso no es sutil, es
        invisible, y por eso hacía falta el parche que la repintaba de
        blanco.
     2. El borde, teñido con el color del propio tema. Ni blanco ni
        negro con alfa: un blanco al 8% sobre un fondo azul no es
        "sutil", es gris frío, y recorta la caja en vez de disimularla.
     3. --cream-dim y --cream-muted en hex MEDIDO. En color-mix con
        transparente el resultado depende del fondo, así que el mismo
        token cumplía sobre una tarjeta y fallaba sobre otra.
     4. --cta propio, distinto del acento decorativo. Ver "EL ACENTO DE
        ACCIÓN" al final del archivo.

   ── LOS DOS ACENTOS EN TEMA CLARO ────────────────────────────
   --accent-color alimenta --gold-light, y --gold-light se usa como
   COLOR DE TEXTO en treinta sitios de este archivo. En un tema oscuro
   el acento "light" es el más claro de los dos y contrasta de sobra.
   En un tema CLARO es al revés: el que contrasta es el OSCURO.

   natural-sage tenía --accent-color: #52b788, un verde pastel: 1,99:1
   sobre su propia tarjeta. blanc-luxe tenía #e8a4b8: 1,81:1. Ese es
   literalmente el texto que no se leía.

   Así que en salud y belleza el par va invertido —el "light" es el tono
   PROFUNDO— y está comentado en cada bloque para que no se "arregle"
   por error.

   ── COMPROBADO, NO ESTIMADO ──────────────────────────────────
   Los cinco pasan 4,5:1 (WCAG AA, texto normal) en: texto sobre
   tarjeta, texto sobre fondo, --cream-dim, --cream-muted, --gold-light,
   --gold, texto del botón sobre --gold, y --cta-text sobre los DOS
   extremos del degradado del botón. Ese último es el que más se escapa:
   el blanco aguanta sobre el extremo oscuro y se cae sobre el claro.

   La separación entre --cta y el acento se mide por distancia
   perceptual (ΔE en Lab), no por contraste: el par de midnight-amber
   (ámbar #f0a83c / naranja #f4621e) da 1,57:1 de contraste —parecería
   fallar— y sin embargo son inconfundibles, porque lo que los separa es
   el tono, no la luminosidad. Su ΔE = 38,6 es el listón; los cuatro
   temas nuevos lo superan.

   Para volver a medirlo: php contraste_temas.php
   ============================================================ */


/* ── GENÉRICO · MIDNIGHT AMBER (Azul noche · Ámbar) ────────
   El tema de referencia, intacto salvo --cream-muted.
   El fondo no es negro sino azul noche: sobre negro puro, una tarjeta
   apenas más clara se lee como una mancha gris y todo se aplana. Con
   base azulada la tarjeta tiene de dónde despegarse y aparece la
   sensación de capas que da el aspecto "de producto".
   El ámbar es más cálido y menos amarillo que un dorado, así que
   aguanta bloques grandes de texto en mayúscula sin cansar. */
[data-theme="generico"] {
  --primary-color:    #f0a83c;
  --secondary-color:  #23304d;
  --accent-color:     #ffc46b;
  --background-color: #0f1729;
  --text-color:       #e8eefc;

  --bg-base:       #0f1729;
  --bg-layer1:     #141d33;
  --bg-layer2:     #1a2338;
  --bg-layer3:     #232e49;
  --bg-card:       #1a2338;
  --bg-card-hover: #202b45;

  --gold:          var(--primary-color);
  --gold-light:    var(--accent-color);
  --gold-dim:      color-mix(in srgb, var(--primary-color) 14%, transparent);
  /* Era blanco puro al 8% — el único de los nueve temas sin teñir. Un
     blanco sobre un fondo azul no es "sutil", es otro color: se ve gris
     frío y recorta la caja. Teñido con el propio azul del tema, la línea
     se lee como un escalón de luz y no como un contorno. */
  --gold-border:   #2b3550;

  --cream:         var(--text-color);
  --cream-dim:     #93a4c4;
  /* Subido desde #6e7f9e, que daba 3,87:1 sobre la tarjeta. Es el token
     de la hora en los testimonios de WhatsApp y del aviso "desliza":
     texto de 11-12px, justo donde un contraste flojo no perdona. */
  --cream-muted:   #8494b3;

  --success:       #3ecf8e;
  --error:         #f2685f;
  --countdown-color: var(--gold-light);

  --shadow-gold:   0 0 26px color-mix(in srgb, var(--primary-color) 22%, transparent);
  --shadow-card:   0 4px 18px rgba(0,0,0,0.35);
  --shadow-deep:   0 18px 48px rgba(0,0,0,0.5);
  --card-shadow:   0 2px 16px rgba(0,0,0,0.30);

  --announcement-bg:     linear-gradient(90deg, #0c1322 0%, #16203a 50%, #0c1322 100%);
  --announcement-text:   var(--gold-light);
  --announcement-sep:    var(--cream-dim);
  --announcement-border: var(--gold-border);

  --hero-radial:     radial-gradient(ellipse 80% 60% at 50% 0%, rgba(240,168,60,0.10) 0%, transparent 70%);
  --input-bg:        #141d33;
  --input-border:    rgba(255,255,255,0.10);
  --form-bg:         #141d33;
  --price-box-bg:    #1a2338;

  --btn-text: #10182b;
  --carrier-invert: 1;

  /* Píldora sobre foto: cristal casi negro con el acento encima. */
  --pill-photo-bg:     rgba(10,10,10,0.85);
  --pill-photo-text:   var(--gold-light);
  --pill-photo-border: var(--gold-border);

  /* El acento de acción. El ámbar decora toda la página — títulos,
     iconos, estrellas, eyebrows — así que el botón necesita un color
     que no aparezca en ningún otro sitio. Este naranja es el único
     de la landing: por eso no hay forma de perderlo de vista.
     Es el mismo salto de tono que separa "mira" de "toca". */
  --cta:      #f4621e;
  --cta-soft: #ff8340;
  /* Texto oscuro, no blanco. Sobre este naranja el blanco se queda en
     3,2:1 — por debajo del mínimo legible, y este es justo el texto que
     alguien tiene que poder leer con el móvil al sol. El oscuro da
     5,6:1 en la parte baja del degradado y 7,2:1 en la alta. */
  --cta-text: #10182b;
}


/* ── RELOJES · NOIR OR (Negro carbón · Oro) ────────────────
   Negro carbón, no negro puro, por la misma razón que el genérico es
   azul noche: sobre #000 la tarjeta no tiene de dónde despegarse.
   El oro es el de un reloj, no el de un marco dorado — menos amarillo y
   algo apagado, para que aguante titulares grandes en mayúscula.
   Sustituye a dark-luxury y a obsidian, que eran el mismo tema con y
   sin color. */
[data-theme="relojes"] {
  --primary-color:    #d9b061;
  --secondary-color:  #3a3226;
  --accent-color:     #f0cd8e;
  --background-color: #0d0d0f;
  --text-color:       #f2efe9;

  --bg-base:       #0d0d0f;
  --bg-layer1:     #141416;
  --bg-layer2:     #1a1a1d;
  --bg-layer3:     #24242a;
  --bg-card:       #1a1a1d;
  --bg-card-hover: #212127;

  --gold:          var(--primary-color);
  --gold-light:    var(--accent-color);
  --gold-dim:      color-mix(in srgb, var(--primary-color) 14%, transparent);
  /* Teñido en gris cálido, no blanco con alfa: sobre carbón el blanco
     translúcido se ve azulado y delata el contorno de cada caja. */
  --gold-border:   #2e2e34;

  --cream:         var(--text-color);
  --cream-dim:     #aaa298;
  --cream-muted:   #948c81;

  --success:       #46c98a;
  --error:         #ef6b62;
  --countdown-color: var(--gold-light);

  --shadow-gold:   0 0 26px color-mix(in srgb, var(--primary-color) 20%, transparent);
  --shadow-card:   0 4px 18px rgba(0,0,0,0.45);
  --shadow-deep:   0 18px 48px rgba(0,0,0,0.6);
  --card-shadow:   0 2px 16px rgba(0,0,0,0.38);

  --announcement-bg:     linear-gradient(90deg, #0a0a0c 0%, #1c1710 50%, #0a0a0c 100%);
  --announcement-text:   var(--gold-light);
  --announcement-sep:    var(--cream-dim);
  --announcement-border: var(--gold-border);

  --hero-radial:     radial-gradient(ellipse 80% 60% at 50% 0%, rgba(217,176,97,0.09) 0%, transparent 70%);
  --input-bg:        #141416;
  --input-border:    rgba(255,255,255,0.10);
  --form-bg:         #141416;
  --price-box-bg:    #1a1a1d;

  --btn-text: #14120e;
  --carrier-invert: 1;

  /* Píldora sobre foto: cristal casi negro con el acento encima. */
  --pill-photo-bg:     rgba(10,10,10,0.85);
  --pill-photo-text:   var(--gold-light);
  --pill-photo-border: var(--gold-border);

  /* Rojo vino. El oro decora toda la página, así que la acción necesita
     un color exclusivo. Se descartó un naranja: en una página de reloj
     grita y abarata. El vino es igual de inconfundible (ΔE 64 contra el
     oro, muy por encima del listón de 38,6) y no rompe el registro.
     Aquí el texto sí va en blanco: 7,4:1 sobre el extremo oscuro del
     degradado y 5,8:1 sobre el claro. */
  --cta:      #a51e2d;
  --cta-soft: #c22638;
  --cta-text: #ffffff;
}


/* ── TECNOLOGÍA · STEEL CYAN (Acero · Cian) ────────────────
   Acero azul-verdoso con cian. Sustituye a minimal-clean, que era azul
   marino sobre blanco: el azul chocaba con el del genérico y dos temas
   que se parecen no son dos temas.
   El verde-azulado de la base separa este tema del genérico sin salirse
   del registro "producto técnico". */
[data-theme="tecnologia"] {
  --primary-color:    #38bdf8;
  --secondary-color:  #1e3a4d;
  --accent-color:     #7dd3fc;
  --background-color: #0d1418;
  --text-color:       #e8f2f7;

  --bg-base:       #0d1418;
  --bg-layer1:     #121b21;
  --bg-layer2:     #17222a;
  --bg-layer3:     #203039;
  --bg-card:       #17222a;
  --bg-card-hover: #1d2b35;

  --gold:          var(--primary-color);
  --gold-light:    var(--accent-color);
  --gold-dim:      color-mix(in srgb, var(--primary-color) 14%, transparent);
  --gold-border:   #24333d;

  --cream:         var(--text-color);
  --cream-dim:     #a3b8c5;
  --cream-muted:   #8ba1af;

  --success:       #34d399;
  --error:         #f87171;
  --countdown-color: var(--gold-light);

  --shadow-gold:   0 0 26px color-mix(in srgb, var(--primary-color) 20%, transparent);
  --shadow-card:   0 4px 18px rgba(0,0,0,0.40);
  --shadow-deep:   0 18px 48px rgba(0,0,0,0.55);
  --card-shadow:   0 2px 16px rgba(0,0,0,0.32);

  --announcement-bg:     linear-gradient(90deg, #0a1015 0%, #10222c 50%, #0a1015 100%);
  --announcement-text:   var(--gold-light);
  --announcement-sep:    var(--cream-dim);
  --announcement-border: var(--gold-border);

  --hero-radial:     radial-gradient(ellipse 80% 60% at 50% 0%, rgba(56,189,248,0.10) 0%, transparent 70%);
  --input-bg:        #121b21;
  --input-border:    rgba(255,255,255,0.10);
  --form-bg:         #121b21;
  --price-box-bg:    #17222a;

  --btn-text: #08131a;
  --carrier-invert: 1;

  /* Píldora sobre foto: cristal casi negro con el acento encima. */
  --pill-photo-bg:     rgba(10,10,10,0.85);
  --pill-photo-text:   var(--gold-light);
  --pill-photo-border: var(--gold-border);

  /* Índigo. El cian decora, y el índigo está lo bastante lejos (ΔE 87)
     para que nadie confunda un título con un botón, sin salirse de la
     familia fría del tema. Se descartó un naranja: la distancia era aún
     mayor pero el blanco no aguantaba el extremo claro del degradado
     (3,3:1) y en un tema oscuro un botón con texto oscuro se apaga.
     Con el índigo el blanco da 7,2:1 y 5,6:1. */
  --cta:      #4f39d9;
  --cta-soft: #6249f0;
  --cta-text: #ffffff;
}


/* ── SALUD · CLINIC SAGE (Blanco · Verde clínico) ──────────
   Primero de los dos temas CLAROS. Sustituye a natural-sage.

   En claro cambia QUÉ capa es la tarjeta, no la receta: la tarjeta es
   blanco puro (--bg-layer2) y el fondo un blanco con un punto de verde.
   Se separan solo 1,03:1, y está bien — la profundidad la lleva la
   sombra, no un borde, igual que en los oscuros. --bg-layer1 es el
   tinte suave de los paneles que agrupan tarjetas, y --bg-layer3 el
   tono hundido (puntos inactivos del carrusel, hueco de imagen).

   OJO al par de acentos: aquí --accent-color es el verde PROFUNDO, no
   uno claro. Alimenta --gold-light, que es color de TEXTO en treinta
   sitios; natural-sage lo tenía en #52b788 y sobre blanco daba 1,99:1.
   Si alguien "corrige" esto poniendo un verde claro porque se llama
   light, vuelve el fallo entero. */
[data-theme="salud"] {
  --primary-color:    #0d6b51;
  --secondary-color:  #094a39;
  --accent-color:     #094a39;
  --background-color: #f5f8f6;
  --text-color:       #16241d;

  --bg-base:       #f5f8f6;
  --bg-layer1:     #ecf3ef;
  --bg-layer2:     #ffffff;
  --bg-layer3:     #dfe9e3;
  --bg-card:       #ffffff;
  --bg-card-hover: #f7fbf9;

  --gold:          var(--primary-color);
  --gold-light:    var(--accent-color);
  --gold-dim:      color-mix(in srgb, var(--primary-color) 10%, transparent);
  /* Hex sólido teñido de verde, no rgba(0,0,0,.07). El negro con alfa
     sobre un fondo con color da un gris sucio que se ve como suciedad,
     no como una línea. */
  --gold-border:   #d8e4dd;

  --cream:         var(--text-color);
  --cream-dim:     #4a5c53;
  --cream-muted:   #5a6b62;

  --success:       #15803d;
  --error:         #b91c1c;
  --countdown-color: var(--primary-color);

  --shadow-gold:   0 0 24px color-mix(in srgb, var(--primary-color) 14%, transparent);
  /* Sombras teñidas de verde oscuro en vez de negro puro: sobre un
     fondo claro el negro se ve como hollín y ensucia el blanco. */
  --shadow-card:   0 4px 18px rgba(20,45,35,0.10);
  --shadow-deep:   0 16px 44px rgba(20,45,35,0.14);
  --card-shadow:   0 2px 14px rgba(20,45,35,0.10);

  /* La barra sigue siendo oscura sobre una página clara: es el ancla
     superior y lo que separa la landing del navegador. Por eso el texto
     va en blanco y el borde inferior desaparece — una línea clara bajo
     una barra oscura es un subrayado, no una separación. */
  --announcement-bg:     linear-gradient(90deg, #094a39 0%, #0d6b51 50%, #094a39 100%);
  --announcement-text:   #ffffff;
  --announcement-sep:    rgba(255,255,255,0.72);
  --announcement-border: transparent;

  --hero-radial:     radial-gradient(ellipse 80% 60% at 50% 0%, rgba(13,107,81,0.07) 0%, transparent 70%);
  --input-bg:        #ffffff;
  --input-border:    #cfded6;
  --form-bg:         #ffffff;
  --price-box-bg:    #ffffff;

  --btn-text: #ffffff;
  --carrier-invert: 0;

  /* Píldora sobre foto: aquí en sólido con texto blanco. El cristal
     negro de los temas oscuros dejaría el acento profundo de este
     tema en 1,5:1 sobre él — ilegible. */
  --pill-photo-bg:     var(--gold);
  --pill-photo-text:   #ffffff;
  --pill-photo-border: transparent;

  /* Azul clínico. El verde no puede ser también el color de la acción:
     además de decorar, aquí significa "correcto" —es el color de los ✓ y
     de --positivo—, y un botón del mismo verde se lee como una
     confirmación más, no como algo que hay que tocar.
     Antes iba un teja, que contra el verde separaba de sobra (ΔE 92)
     pero chocaba con los botones de OTROS temas: ΔE 22 contra el naranja
     del genérico y 24 contra el vino de relojes — a ojo, el mismo botón.
     Es un choque que ninguna medida dentro de un tema puede ver, porque
     compara colores de la misma página; hay que comparar los cinco temas
     entre sí, y eso lo hace ahora contraste_temas.php.
     El azul se separa de los cuatro (mínimo ΔE 80), del verde propio
     (43) y del verde de "correcto" (68). Y de paso es el color de la
     confianza médica, que en este nicho no sobra.
     Blanco a 7,5:1 y 5,6:1 sobre los dos extremos del degradado. */
  --cta:      #0b5a80;
  --cta-soft: #0e6f9c;
  --cta-text: #ffffff;
}


/* ── BELLEZA · ROSE NUDE (Nude · Rosa profundo) ────────────
   Segundo tema CLARO, misma receta que salud.
   Sustituye a los tres rosas que había —light-luxury, femme-rose y
   blanc-luxe—, que se diferenciaban en poco más que el tono del fondo.

   Igual que en salud, el acento "light" es el rosa PROFUNDO. Sobre
   blanco, el #e8a4b8 de blanc-luxe daba 1,81:1. */
[data-theme="belleza"] {
  --primary-color:    #a8305a;
  --secondary-color:  #7d1f42;
  --accent-color:     #7d1f42;
  --background-color: #fdf7f6;
  --text-color:       #2a161d;

  --bg-base:       #fdf7f6;
  --bg-layer1:     #faeeec;
  --bg-layer2:     #ffffff;
  --bg-layer3:     #f2dedb;
  --bg-card:       #ffffff;
  --bg-card-hover: #fffafa;

  --gold:          var(--primary-color);
  --gold-light:    var(--accent-color);
  --gold-dim:      color-mix(in srgb, var(--primary-color) 10%, transparent);
  --gold-border:   #ecd9dc;

  --cream:         var(--text-color);
  --cream-dim:     #5f4a51;
  --cream-muted:   #6d565e;

  --success:       #15803d;
  --error:         #b91c1c;
  --countdown-color: var(--primary-color);

  --shadow-gold:   0 0 24px color-mix(in srgb, var(--primary-color) 14%, transparent);
  --shadow-card:   0 4px 18px rgba(60,25,35,0.10);
  --shadow-deep:   0 16px 44px rgba(60,25,35,0.14);
  --card-shadow:   0 2px 14px rgba(60,25,35,0.10);

  --announcement-bg:     linear-gradient(90deg, #7d1f42 0%, #a8305a 50%, #7d1f42 100%);
  --announcement-text:   #ffffff;
  --announcement-sep:    rgba(255,255,255,0.72);
  --announcement-border: transparent;

  --hero-radial:     radial-gradient(ellipse 80% 60% at 50% 0%, rgba(168,48,90,0.07) 0%, transparent 70%);
  --input-bg:        #ffffff;
  --input-border:    #e6cfd4;
  --form-bg:         #ffffff;
  --price-box-bg:    #ffffff;

  --btn-text: #ffffff;
  --carrier-invert: 0;

  /* Píldora sobre foto: aquí en sólido con texto blanco. El cristal
     negro de los temas oscuros dejaría el acento profundo de este
     tema en 1,5:1 sobre él — ilegible. */
  --pill-photo-bg:     var(--gold);
  --pill-photo-text:   #ffffff;
  --pill-photo-border: transparent;

  /* Bronce. Rosa y oro es el par de toda la vida en cosmética.
     Se descartaron dos antes, y por motivos distintos:
       · Terracota, que es lo que pide el instinto junto a un rosa: ΔE 35,
         por debajo del listón. Al lado del rosa parecía el mismo color
         mal impreso.
       · Violeta, que sí pasaba de sobra (ΔE 82) — pero puesto uno al
         lado del otro en el navegador era casi el mismo botón que el
         índigo de tecnología. Dos de cinco temas con el mismo botón no
         son dos temas, y eso sólo se ve mirando: ninguna medida de
         contraste lo detecta, porque compara colores DENTRO de un tema
         y este es un choque ENTRE temas.
     El bronce queda a ΔE 56 del rosa, 65 del verde de "correcto" y 132
     del índigo. Blanco a 5,9:1 y 4,7:1. */
  --cta:      #8f5709;
  --cta-soft: #a4650a;
  --cta-text: #ffffff;
}

/* ============================================================
   CAPA DE PERSONALIZACIÓN DEL ADMIN
   Estas vars se sobreescriben desde el <style> inline del
   <head> cuando el admin configura colores específicos.
   El orden de cascada garantiza que ganen sobre el tema base.

   En el template PHP, el <style> inline debe incluir
   SOLO las vars que el admin haya configurado (no nulas):

   [data-theme] {
     --primary-color:  <?= $colorGold ?? 'inherit' ?>;
     --accent-color:   <?= $colorGoldLight ?? 'inherit' ?>;
     --success:        <?= $colorSuccess ?? 'inherit' ?>;
     --countdown-color:<?= $colorCountdown ?? 'inherit' ?>;
     --bg-card:        <?= $colorBgCard ?? 'inherit' ?>;
     --gold-border:    <?= $colorBorder ?? 'inherit' ?>;
   }
   ============================================================ */


/* ── BASE ─────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--cream);
  background-color: var(--bg-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

ul, ol { list-style: none; }

/* ── CONTENEDOR ───────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--space-md);
  padding-block: var(--space-xl);
}

/* ── SEPARADORES DE SECCIÓN (clip-path diagonal) ──────────── */
.section-divider {
  width: 100%;
  height: 48px;
  background: var(--bg-layer1);
  clip-path: polygon(0 0, 100% 40%, 100% 100%, 0 100%);
  margin-top: -2px;
}

/* ── ANNOUNCEMENT BAR ─────────────────────────────────────── */
.announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* Sale del token del tema, no de un negro escrito a mano. El respaldo
     se construye con los colores del propio tema, así que si algún día
     se añade un tema que no defina --announcement-bg, la barra seguirá
     siendo de su color y no negra. */
  background: var(--announcement-bg, linear-gradient(90deg, var(--bg-base) 0%, var(--bg-layer2) 50%, var(--bg-base) 100%));
  /* En los temas claros la barra sigue siendo oscura —es el ancla de
     arriba— así que el borde inferior se apaga desde el tema: una línea
     clara justo debajo de una barra oscura no separa, subraya. */
  border-bottom: 1px solid var(--announcement-border, var(--gold-border));
  padding: 20px var(--space-md);
  overflow: hidden;
  transform: translateZ(0);
}

/* Spacer para que el contenido no quede tapado por la barra fixed */
.announcement-bar + * {
  margin-top: 55px;
}

@media (max-width: 767px) {
  .announcement-bar + * {
    margin-top: 62px;
  }
}

.announcement-bar__track {
  display: flex;
  gap: var(--space-2xl);
  width: max-content;
  animation: marquee 22s linear infinite;
  white-space: nowrap;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.announcement-bar__item {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* La barra es oscura en los cinco temas, también en los claros, así
     que el texto no puede salir de --gold-light: en salud eso es un
     verde profundo, y verde profundo sobre verde profundo no se lee.
     Cada tema declara con qué color se escribe sobre su propia barra. */
  color: var(--announcement-text, var(--gold-light));
}

@media (max-width: 768px) {
  .announcement-bar {
    padding: 21px var(--space-md);
  }
  .announcement-bar__item {
    font-size: 14.5px;
    letter-spacing: 0.1em;
  }
}

.announcement-bar__item span {
  color: var(--announcement-sep, var(--cream-dim));
  margin-inline: 6px;
}

@keyframes marquee {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* ── TIPOGRAFÍA ───────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--cream);
}

h1 {
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

h2 {
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  letter-spacing: 0;
  line-height: 1.2;
}

h3 {
  font-size: clamp(1.1rem, 3.5vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0;
}

/* Definición única del título de sección. Antes vivía repartida en tres
   bloques del archivo que se pisaban entre sí con !important — el
   tamaño de 4.4rem de aquí no llegaba a verse nunca. */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.15;
  text-align: center;
  margin-bottom: var(--space-lg);
  position: relative;
  color: var(--cream);
  text-wrap: balance;
}

/* La línea dorada bajo un título centrado es el gesto de cabecera de
   revista, y era de lo que más contribuía al aire de periódico. En su
   lugar el ritmo lo marca el eyebrow de arriba, que es lo que hace la
   referencia visual. */
.section-eyebrow {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  /* Red de seguridad: si un antetítulo se pasa de largo pese al recorte
     del render, se queda en 2 líneas y no le roba el protagonismo al h2. */
  max-width: 100%;
  overflow: hidden;
}
/* En la tarjeta "Por qué" el contenido va alineado a la izquierda. */
.section-eyebrow--left {
  text-align: left;
  margin-bottom: 2px;
}

/* ── ANIMACIONES DE ENTRADA ───────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.animate-fadeup {
  opacity: 0;
  animation: fadeUp 0.7s ease forwards;
}
.animate-fadeup:nth-child(1) { animation-delay: 0.05s; }
.animate-fadeup:nth-child(2) { animation-delay: 0.15s; }
.animate-fadeup:nth-child(3) { animation-delay: 0.25s; }
.animate-fadeup:nth-child(4) { animation-delay: 0.35s; }
.animate-fadeup:nth-child(5) { animation-delay: 0.45s; }

/* ── BOTONES ──────────────────────────────────────────────── */
/* Shimmer periódico: visible en reposo → funciona en móvil */
@keyframes btn-shimmer-loop {
  0%           { transform: translateX(-120%) skewX(-20deg); }
  18%, 100%    { transform: translateX(220%)  skewX(-20deg); }
}

/* El halo iba con el dorado del tema por defecto escrito a mano
   (201,168,76). En los temas de salud, belleza o tecnología el botón
   es teja, violeta o índigo pero el resplandor que late seguía siendo
   dorado. Ahora sale del color del propio tema. */
@keyframes btn-glow-pulse {
  0%, 100% { box-shadow: 0 4px 20px color-mix(in srgb, var(--cta) 30%, transparent), 0 1px 0 rgba(255,255,255,0.18) inset; }
  50%      { box-shadow: 0 6px 32px color-mix(in srgb, var(--cta) 55%, transparent), 0 0 0 6px color-mix(in srgb, var(--cta) 10%, transparent), 0 1px 0 rgba(255,255,255,0.18) inset; }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 17px 36px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  /* Un texto largo que se cuele pese al recorte del render se parte por
     palabra dentro de la píldora en vez de desbordarla. */
  overflow-wrap: break-word;
  /* El acento de acción, no el decorativo — ver --cta arriba. */
  color: var(--cta-text, #0a0a0a);
  background: linear-gradient(160deg, var(--cta-soft) 0%, var(--cta) 60%, color-mix(in srgb, var(--cta) 70%, #000) 100%);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 56px;
  animation: btn-glow-pulse 2.6s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

/* Shimmer periódico — visible sin hover, pasa cada ~4s */
.btn-primary::before {
  content: '';
  position: absolute;
  top: -10%; bottom: -10%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: btn-shimmer-loop 4s ease-in-out infinite;
  pointer-events: none;
}

/* ── Solo en dispositivos con hover real (desktop) ── */
@media (hover: hover) {
  .btn-primary:hover {
    transform: translateY(-3px) scale(1.025);
    box-shadow: 0 12px 38px color-mix(in srgb, var(--cta) 55%, transparent), 0 2px 0 rgba(255,255,255,0.2) inset;
    filter: brightness(1.07);
    animation: none;
  }
  .btn-primary:hover::before {
    animation: none;
  }
}

/* Feedback táctil — el ":active" es lo que siente el dedo */
.btn-primary:active {
  transform: scale(0.96);
  filter: brightness(1.12);
  box-shadow: 0 2px 16px color-mix(in srgb, var(--cta) 40%, transparent);
  animation: none;
  transition: transform 0.08s ease, filter 0.08s ease;
}

.btn-full {
  width: 100%;
  font-size: 17px;
  padding: 20px 32px;
  min-height: 60px;
}

/* #heroCta */
#heroCta:focus-visible { animation: none; }
@media (hover: hover) { #heroCta:hover { animation: none; } }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
  min-height: 44px;
}

.btn-ghost:hover {
  background: var(--gold-dim);
  border-color: var(--gold);
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,168,76,0.07) 0%, transparent 70%),
              var(--bg-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Creativo primero en mobile: el cliente ve el producto antes del precio */
.hero .hero-text  { order: 2; }
.hero .hero-media { order: 1; }

/* Imagen/video hero */
.hero-media {
  width: 100%;
  position: relative;
}

.hero-media img,
.hero-media video {
  width: 100%;
  aspect-ratio: 8.5 / 11;
  object-fit: cover;
  /* Sin contorno: el creativo del hero se apoya en la sombra, igual que
     las tarjetas. Una linea alrededor de la foto la convierte en una
     ilustracion enmarcada en vez de en el producto. */
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-deep);
  border: none;
}

/* En mobile la imagen en portrait llenaría toda la pantalla —
   la limitamos para que el usuario vea texto+CTA sin scroll */
@media (max-width: 767px) {
  .hero-media img {
    aspect-ratio: 16 / 9;
    max-height: 55vw;
    min-height: 180px;
    object-position: center top;
  }
  .hero-media video {
    aspect-ratio: 9 / 16;
    max-height: none;
    min-height: unset;
    width: 100%;
    object-position: center;
  }
}

/* El video del hero reutiliza los controles (.caract-video-wrap) de
   Características, pero ese wrapper usa height:100% asumiendo un
   contenedor padre con alto fijo — el hero no lo tiene, así que se
   sobreescribe para que el video conserve su aspect-ratio real. */
.hero-media .caract-video-wrap {
  height: auto;
}

.hero-media .caract-video-wrap video {
  height: auto;
  aspect-ratio: 8.5 / 11;
  object-fit: cover;
  /* Sin contorno: el creativo del hero se apoya en la sombra, igual que
     las tarjetas. Una linea alrededor de la foto la convierte en una
     ilustracion enmarcada en vez de en el producto. */
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-deep);
  border: none;
}

@media (max-width: 767px) {
  .hero-media .caract-video-wrap video {
    aspect-ratio: 9 / 16;
    object-position: center;
  }
}

/* Badge de confianza sobre la imagen */
/* Píldora sobre la foto. Va apoyada en una imagen, no en el fondo del
   tema, así que su superficie la fija el tema aparte: en los oscuros es
   un cristal casi negro con el acento encima; en los claros, el acento
   en sólido con texto blanco, porque un verde profundo sobre un cristal
   negro no se lee (1,5:1) y eso es exactamente lo que pasaba antes de
   que cada tema claro llevara su propio parche. */
.hero-trust-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--pill-photo-bg, rgba(10,10,10,0.85));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--pill-photo-border, var(--gold-border));
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pill-photo-text, var(--gold-light));
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  animation: fadeIn 0.8s ease 0.6s both;
}

/* Era un emoji de estrella en content: cada teléfono lo pintaba de otro
   color y otro tamaño. Ahora es una estrella dibujada que hereda el color
   del tema. */
.hero-trust-badge::before {
  content: '';
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--ico-estrella) center / contain no-repeat;
  mask: var(--ico-estrella) center / contain no-repeat;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: center;
  align-items: center;
}

.hero-text h1 {
  animation: fadeUp 0.8s ease 0.1s both;
}

.hero-subtitle {
  font-size: 16px;
  font-weight: 400;
  color: var(--cream-dim);
  line-height: 1.65;
  letter-spacing: 0.01em;
  animation: fadeUp 0.8s ease 0.2s both;
}

/* ── HERO SUBTITLE ROTATIVO ───────────────────────────────── */
/*
  Ciclo de 12s, 3 frases de 4s cada una.
  Cada frase ocupa exactamente 0%-33% de su propio ciclo de 12s.
  Con delay 0s / 4s / 8s nunca coinciden dos frases visibles.
*/
/* 3 frases: ciclo 12s, cada frase ocupa 4s (33%) */
@keyframes subtitlePhrase {
  0%    { opacity: 0; transform: translateY(9px); }
  7%    { opacity: 1; transform: translateY(0);   }
  26%   { opacity: 1; transform: translateY(0);   }
  33%   { opacity: 0; transform: translateY(-7px);}
  100%  { opacity: 0; transform: translateY(-7px);}
}

/* 2 frases: ciclo 8s, cada frase ocupa 4s (50%) — sin dead zone */
@keyframes subtitlePhrase2 {
  0%    { opacity: 0; transform: translateY(9px); }
  10%   { opacity: 1; transform: translateY(0);   }
  40%   { opacity: 1; transform: translateY(0);   }
  50%   { opacity: 0; transform: translateY(-7px);}
  100%  { opacity: 0; transform: translateY(-7px);}
}

.hero-subtitle--rotate {
  width: 100%;
  position: relative;
  min-height: 2.8em;
  display: block;
  overflow: hidden;
  animation: fadeUp 0.8s ease 0.2s both;
}

.hero-subtitle__phrase {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
  animation: subtitlePhrase 12s ease-in-out infinite;
  animation-delay: calc(var(--i) * 4s);
}

/* Con 2 frases usa el keyframe ajustado y ciclo de 8s */
[data-count="2"] .hero-subtitle__phrase {
  animation-name: subtitlePhrase2;
  animation-duration: 8s;
}

.hero-note {
  font-size: 12px;
  color: var(--cream-muted);
  letter-spacing: 0.04em;
  margin-top: var(--space-xs);
}

/* ── PRICE BOX ────────────────────────────────────────────── */
.price-box-section {
  padding: var(--space-lg) 0;
}
.price-box-section .price-box {
  max-width: 480px;
  margin-inline: auto;
  animation: none;
}

.price-box {
  background: var(--bg-layer2);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.8s ease 0.3s both;
}

.price-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.price-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.price-box .old {
  font-size: 14px;
  color: var(--cream-muted);
  text-decoration: line-through;
  font-weight: 300;
}

.price-box .new {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 2.8rem);
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
  letter-spacing: -0.02em;
}

.price-box .save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bg-base);
  background: var(--positivo);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  width: fit-content;
  margin-top: 4px;
}

/* Badge "pedidos recientes" */
.recent-orders-badge {
  font-size: 12px;
  color: var(--cream-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

/* Mismo caso: el carrito era un emoji del sistema. */
.recent-orders-badge::before {
  content: '';
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--ico-carrito) center / contain no-repeat;
  mask: var(--ico-carrito) center / contain no-repeat;
}

/* La .trust-strip y su .carrier-logo se retiraron: las transportadoras
   viven en el pie del formulario (.form-carriers) y se muestran siempre.
   El interruptor show_trust_strip que las controlaba tambien se quito. */
/* ── BENEFICIOS ───────────────────────────────────────────── */
.benefits-section {
  background: var(--bg-layer1);
  position: relative;
}

.benefits-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
}

.two-columns {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Creativo primero en beneficios (mobile: arriba, desktop: izquierda) */
.benefits-section .col-media           { order: 1; }
.benefits-section .col:not(.col-media) { order: 2; }

.col-media img,
.col-media video {
  width: 100%;
  aspect-ratio: 8.5 / 11;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: none;
  box-shadow: 0 2px 16px rgba(0,0,0,0.13);
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--cream) 6%, transparent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  font-size: 14px;
  line-height: 1.55;
  color: var(--cream-dim);
  transition: var(--transition);
  backdrop-filter: blur(4px);
}

.benefit-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--gold-border);
  transform: translateX(4px);
}

.benefit-item::before {
  content: '✦';
  color: var(--gold);
  font-size: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ── CTA DE SECCIÓN ───────────────────────────────────────── */
.section-cta {
  text-align: center;
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid color-mix(in srgb, var(--cream) 6%, transparent);
}

.section-cta p {
  font-size: 14px;
  color: var(--cream-dim);
  margin-bottom: var(--space-md);
  max-width: 480px;
  margin-inline: auto;
}

.btn-cta-section {
  font-size: 14px;
  padding: 14px 28px;
}

/* ── GALERÍA ──────────────────────────────────────────────── */
.product-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.product-gallery__main {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: none;
  box-shadow: 0 2px 16px rgba(0,0,0,0.13);
  position: relative;
}

.product-gallery__main-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* El display:block de img/video ganaría al atributo hidden */
.product-gallery [hidden] { display: none !important; }

.product-gallery__main-video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #000;
}

.product-gallery__thumb { position: relative; }

.product-gallery__thumb video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Insignia de "play" sobre las miniaturas de video */
.product-gallery__thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,.55) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='9 6 18 12 9 18' fill='white'/></svg>") center / 70% no-repeat;
  pointer-events: none;
}

.product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.product-gallery__thumb {
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 6px rgba(0,0,0,0.10);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: var(--transition);
}

.product-gallery__thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.product-gallery__thumb:hover,
.product-gallery__thumb.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

.product-gallery__thumb:hover img {
  transform: scale(1.06);
}

.product-gallery__thumb.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold);
}

/* --gold-rgb no existe en ningún tema, así que siempre caía en el dorado
   escrito a mano del respaldo: la miniatura activa latía en dorado aunque
   el tema fuera verde o rosa. color-mix trabaja con el color del tema
   directamente y no necesita los canales por separado. */
@keyframes thumb-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--gold) 70%, transparent); }
  60%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0   transparent; }
}

.product-gallery__thumb.thumb-pulse {
  animation: thumb-pulse 1.4s ease-out infinite;
}
.product-gallery__thumb.thumb-pulse:nth-child(2) { animation-delay: 0.2s; }
.product-gallery__thumb.thumb-pulse:nth-child(3) { animation-delay: 0.4s; }

/* ── PILLS DE COLOR (galería) ─────────────────────────────── */
.gallery-color-pills {
  margin-bottom: 16px;
}

.gallery-color-pills__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 10px;
}

.gallery-color-pills__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Pastilla de texto plana con radio button real para indicar selección */
.gallery-color-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 10px;
  border: 1.5px solid var(--gold-border);
  border-radius: 999px;
  background: var(--bg-layer2, rgba(255,255,255,0.06));
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.15s;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cream-dim);
}

.gallery-color-pill:hover {
  border-color: var(--gold);
}

.gallery-color-pill.is-active {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--cream);
}

/* El radio button de las pastillas se sustituyo por una muestra con el
   color real de la variante — ver CAPA VISUAL al final del archivo. */
/* ── Miniaturas fijas de colores con una sola foto ───────────
   Funcionan como selector rápido adicional a las pastillas.  */
.gallery-color-thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.gallery-color-thumb {
  position: relative;
  width: 64px;
  padding: 0;
  border: 1.5px solid var(--gold-border);
  border-radius: var(--radius-sm, 8px);
  background: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}

.gallery-color-thumb img,
.gallery-color-thumb video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.gallery-color-thumb:hover {
  border-color: var(--cv-color, var(--gold));
  transform: translateY(-1px);
}

.gallery-color-thumb.is-active {
  border-color: var(--cv-color, var(--gold));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cv-color, var(--gold)) 35%, transparent);
}

.gallery-color-thumb.is-active::after {
  content: '✓';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: var(--cv-color, var(--gold));
  border: 2px solid var(--bg-base, #0a0a0a);
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* ── COUNTDOWN ────────────────────────────────────────────── */
.countdown {
  background: var(--bg-layer2);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 16px rgba(0,0,0,0.13);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.countdown::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(201,168,76,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.countdown h2 {
  font-size: 14px;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-muted);
  margin-bottom: var(--space-md);
}

#countdown-timer {
  display: block;
  /* Courier era un tercer tipo de letra en una pagina que ya se unifico
     a Montserrat, y ademas se ve anticuado. Las cifras tabulares dan la
     misma ventaja que buscaba el monospace: que los digitos no bailen al
     cambiar el segundo. */
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.8rem, 14vw, 5rem);
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.08em;
  line-height: 1;
  text-shadow: 0 0 40px rgba(201,168,76,0.4);
  margin-bottom: var(--space-md);
}

.countdown p {
  font-size: 13px;
  color: var(--cream-muted);
  max-width: 320px;
  margin-inline: auto;
}

/* ── REGALO INCLUIDO ──────────────────────────────────────── */
.regalo-section {
    padding: var(--space-xl) 0;
}

.regalo-card {
    position: relative;
    max-width: 380px;
    margin-inline: auto;
    margin-top: 18px;
    background: var(--bg-layer2);
    border-radius: 20px;
    box-shadow:
        0 12px 48px rgba(0,0,0,0.28),
        0 0 80px color-mix(in srgb, var(--gold) 7%, transparent);
}

/* Glow sweep superior */
.regalo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 70% 40% at 50% 0%,
        color-mix(in srgb, var(--gold) 14%, transparent) 0%,
        transparent 70%);
    pointer-events: none;
}

/* Badge flotante tipo ribbon */
.regalo-ribbon {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
    color: var(--btn-text, #0a0a0a);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 999px;
    box-shadow:
        0 3px 14px color-mix(in srgb, var(--gold) 45%, transparent),
        0 1px 0 rgba(255,255,255,0.25) inset;
}
.regalo-ribbon svg {
    flex-shrink: 0;
    opacity: .8;
}

/* Marco de la imagen */
.regalo-img-frame {
    padding: 28px 20px 0;
}

.regalo-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    display: block;
    box-shadow:
        0 2px 0 color-mix(in srgb, var(--gold) 20%, transparent),
        0 8px 24px rgba(0,0,0,0.35);
}

/* Pie de tarjeta */
.regalo-footer {
    padding: 18px 24px 28px;
    text-align: center;
}

.regalo-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.regalo-divider::before,
.regalo-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 35%, transparent), transparent);
}
.regalo-divider span {
    font-size: 11px;
    color: var(--gold);
    opacity: .7;
}

.regalo-label {
    font-size: 14px;
    color: var(--cream-dim);
    line-height: 1.55;
    margin: 0;
    font-style: italic;
    letter-spacing: .01em;
}

/* ── POR QUÉ TE ENCANTARÁ ─────────────────────────────────── */
.why-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.why-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--cream-dim);
  line-height: 1.55;
}

.why-list li::before {
  content: '◆';
  color: var(--gold);
  font-size: 10px;
  margin-top: 4px;
  flex-shrink: 0;
}

/* ── TESTIMONIOS ──────────────────────────────────────────── */
.testimonials {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.testimonial {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  padding: var(--space-md);
  transition: var(--transition);
}

.testimonial:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  box-shadow: 0 0 0 1px var(--gold-border), var(--shadow-gold);
  transform: translateY(-2px);
}

.testimonial-photo {
  flex-shrink: 0;
}

.testimonial-photo img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-border);
}

.testimonial-content h3 {
  font-size: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: 4px;
}

.testimonial-content p {
  font-size: 13px;
  color: var(--cream-dim);
  font-style: italic;
  line-height: 1.55;
}

/* ── TESTIMONIOS TICKER ───────────────────────────────────── */
.testimonios-ticker-section {
  padding-block: var(--space-xl);
  overflow: hidden;
}

.testimonios-ticker {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  transform: translateZ(0);
}

.testimonios-ticker__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee 36s linear infinite;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (hover: hover) {
  .testimonios-ticker:hover .testimonios-ticker__track {
    animation-play-state: paused;
  }
}

/* Estado "el usuario quiere leer": lo activa initTickerLectura() en
   main.js al primer toque. La animación se detiene del todo y el
   contenedor pasa a arrastrarse a mano, igual que el ticker de
   WhatsApp. Sin esto, en móvil el testimonio no se puede leer. */
.testimonios-ticker.is-leyendo {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.testimonios-ticker.is-leyendo::-webkit-scrollbar { display: none; }

.testimonios-ticker.is-leyendo .testimonios-ticker__track {
  animation: none;
}

.testimonios-ticker.is-leyendo .testimonios-ticker__card {
  scroll-snap-align: center;
}

.testimonios-ticker__card {
  flex: 0 0 260px;
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: 16px;
  padding: 20px 20px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}

/* decorative quotation mark */
.testimonios-ticker__qmark {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 64px;
  line-height: 1;
  color: var(--gold-light);
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
}

.testimonios-ticker__stars {
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
}

/* El testimonio es prosa, no un titular: iba en 700 y a 13px, que lo
   hacía gritar y costar de leer a la vez. El peso lo lleva el nombre
   de quien lo firma, que es lo que da credibilidad. */
.testimonios-ticker__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--cream);
  margin: 0;
  flex: 1;
}

.testimonios-ticker__author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.testimonios-ticker__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--gold-border);
}

.testimonios-ticker__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--cream);
}

/* ── WA TESTIMONIOS TICKER ────────────────────────────────── */
.wa-testimonios-section {
  padding-block: var(--space-xl);
  overflow: hidden;
}

.wa-testimonios-section .container {
  padding-block: 0;
}

/* El título de FAQ llevaba font-body y era el único de toda la página en
   serif — rompía la fila de doce títulos que van en Montserrat. Hereda
   .section-title como todos los demás.

   El título de testimonios traía además un style="" en el HTML que le
   cambiaba el padding; se recoge aquí para que la separación sea la
   misma que en el resto de secciones. */
.testimonios-ticker-section .section-title {
  text-align: center;
  padding-inline: var(--space-md);
}

.wa-ticker {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, black 78%, rgba(0,0,0,0.3) 93%, transparent 100%);
  mask-image: linear-gradient(to right, black 78%, rgba(0,0,0,0.3) 93%, transparent 100%);
}

.wa-ticker::-webkit-scrollbar { display: none; }

.wa-ticker:active { cursor: grabbing; }

.wa-ticker__track {
  display: flex;
  gap: 16px;
  padding-inline: 20px;
  width: max-content;
}

.wa-ticker__card {
  /* 80vw da el ancho justo en móvil — deja asomar la siguiente tarjeta,
     que es lo que invita a deslizar. Sin tope, en escritorio se convertía
     en una tarjeta de más de 1000px con una captura de WhatsApp estirada
     dentro.
     min() en vez de una media query a propósito: la hoja ya arrastra
     quince breakpoints distintos y añadir el dieciseisavo por un ancho
     máximo no compensa. Así el valor se lee de un vistazo y no hay otra
     regla que mantener sincronizada. */
  flex: 0 0 min(80vw, 330px);
  scroll-snap-align: start;
  background: var(--bg-layer2);
  border: 1px solid var(--gold-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

.wa-ticker__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--cream-muted);
  user-select: none;
}


.wa-ticker__imgwrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-layer3);
}

.wa-ticker__screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wa-ticker__content {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.wa-ticker__stars {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 2px;
}

.wa-ticker__text {
  font-size: 13px;
  font-weight: 500;
  color: var(--cream-dim);
  margin: 0;
  line-height: 1.55;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wa-ticker__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 4px;
}

.wa-ticker__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--cream);
}

.wa-ticker__time {
  font-size: 11px;
  color: var(--cream-muted);
}

.wa-ticker__check {
  font-size: 10px;
  font-weight: 600;
  color: var(--positivo);
  background: color-mix(in srgb, var(--positivo) 12%, transparent);
  padding: 2px 6px;
  border-radius: 20px;
}

.slider-footer-note {
  text-align: center;
  margin-top: var(--space-md);
  font-size: 12px;
  color: var(--cream-muted);
}

.social-proof-counter {
  display: inline-block;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}

.wa-testimonios-cta {
  text-align: center;
  margin-top: 24px;
}

.btn-wa-cta {
  display: inline-block;
  background: var(--gold);
  color: var(--btn-text, #0a0a0a);
  font-weight: 800;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 18px rgba(230,156,70,.35);
  transition: transform .15s, box-shadow .15s;
}

.btn-wa-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(230,156,70,.5);
}

/* ── FAQ ACCORDION ────────────────────────────────────────── */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.accordion-item {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 6px rgba(0,0,0,0.10);
  overflow: hidden;
  transition: var(--transition);
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
  text-align: left;
  transition: var(--transition-fast);
  min-height: 52px;
}

.accordion-header::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  margin-top: -4px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  line-height: 1;
}

.accordion-item.open .accordion-header::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}

.accordion-header:hover {
  color: var(--gold-light);
}

.accordion-body {
  padding: 0 var(--space-md) var(--space-md);
  display: none;
}

.accordion-body.active {
  display: block;
  animation: fadeUp 0.3s ease;
}

.accordion-body p {
  font-size: 14px;
  color: var(--cream-dim);
  line-height: 1.65;
}

/* ── FORMULARIO ───────────────────────────────────────────── */
#form-pedido {
  background: var(--bg-layer1);
  position: relative;
}

#form-pedido::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
}

.form-box {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-xl) var(--space-lg);
  max-width: 640px;
  margin-inline: auto;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-md);
}

.form-group label,
.form-group span {
  font-size: 13px;
  font-weight: 500;
  color: var(--cream-dim);
  letter-spacing: 0.03em;
}

input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
  width: 100%;
  background: var(--bg-layer3);
  border: 1px solid color-mix(in srgb, var(--cream) 10%, transparent);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: var(--font-body);
  /* 16px es el mínimo: por debajo, Safari y el WebView de Facebook hacen
     zoom al enfocar el campo y ya no vuelven atrás — la página se queda
     ampliada y descuadrada. Afectaba al textarea de indicaciones para el
     mensajero, que es el único campo sin .input-lg. */
  font-size: 16px;
  color: var(--cream);
  transition: var(--transition);
  outline: none;
  min-height: 52px;
  -webkit-appearance: none;
  appearance: none;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  background: rgba(201,168,76,0.05);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}

input::placeholder {
  color: var(--cream-muted);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a84c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

select option {
  background: var(--bg-layer2);
  color: var(--cream);
}

/* Color + cantidad rows */
.colors-qty-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.color-qty-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-sm);
  align-items: center;
}

.color-select { flex: 1; }

.qty-select {
  width: 80px;
  min-width: 80px;
}

/* Encabezado de columnas color/cantidad */
.color-qty-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-sm);
  padding: 0 2px 6px;
  margin-bottom: 2px;
}
.color-qty-header span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.color-qty-header span:nth-child(2) {
  width: 92px;
  text-align: center;
}

/* Stepper +/− inline dentro de la fila de colores */
.qty-stepper-inline {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 92px;
  flex-shrink: 0;
  transition: border-color 0.2s;
}
.qty-stepper-inline:focus-within { border-color: var(--gold); }

.qty-btn-inline {
  width: 28px;
  height: 38px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.qty-btn-inline:hover { color: var(--cream); background: color-mix(in srgb, var(--gold) 12%, transparent); }

.qty-val {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--cream);
  user-select: none;
  pointer-events: none;
}

.qty-select-hidden {
  display: none !important;
}

.remove-color-qty {
  background: none;
  border: 1px solid rgba(224,92,92,0.3);
  border-radius: var(--radius-sm);
  color: var(--error);
  cursor: pointer;
  padding: 0 10px;
  height: 52px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  min-width: 44px;
}

.remove-color-qty:hover {
  background: rgba(224,92,92,0.1);
  border-color: var(--error);
}

.remove-text { display: none; }

.help {
  font-size: 12px;
  color: var(--cream-muted);
}

.total-units-note {
  font-size: 13px;
  color: var(--cream-dim);
}

.total-units-note strong {
  color: var(--gold-light);
}

/* Radio group */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px var(--space-md);
  background: var(--bg-layer3);
  border: 1px solid color-mix(in srgb, var(--cream) 8%, transparent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  color: var(--cream-dim);
  transition: var(--transition);
  min-height: 52px;
}

.radio-group label:hover {
  border-color: var(--gold-border);
  color: var(--cream);
}

.radio-group input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  flex-shrink: 0;
  min-height: unset;
}

.radio-group input[type="radio"]:checked + span,
.radio-group label:has(input:checked) {
  border-color: var(--gold);
  color: var(--cream);
}

/* ── ORDER SUMMARY ────────────────────────────────────────── */
.order-summary {
  background: var(--bg-base);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-block: var(--space-lg);
  position: relative;
  overflow: hidden;
}

.order-summary::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
}

.order-summary__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: var(--space-md);
}

.order-summary__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--cream-dim);
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 5%, transparent);
}

.order-summary__row:last-child {
  border-bottom: none;
}

.order-summary__row--total {
  font-size: 16px;
  font-weight: 600;
  color: var(--cream);
  padding-top: 10px;
  border-top: 1px solid var(--gold-border) !important;
  border-bottom: none !important;
  margin-top: 4px;
}

.order-summary__row--total strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold-light);
}

.summary-free {
  color: var(--positivo);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.summary-save {
  color: var(--positivo);
}

.order-summary__question {
  font-size: 13px;
  font-weight: 600;
  color: var(--cream);
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

.order-summary__confirm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--cream-dim);
  cursor: pointer;
  padding: var(--space-sm) 0;
  line-height: 1.5;
}

.order-summary__confirm input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: unset;
  accent-color: var(--gold);
  margin-top: 1px;
  flex-shrink: 0;
  cursor: pointer;
}

.order-summary__note {
  display: block;
  font-size: 11px;
  color: var(--cream-muted);
  margin-top: var(--space-sm);
  line-height: 1.5;
}

.form-note {
  font-size: 12px;
  color: var(--cream-muted);
  text-align: center;
  margin-top: var(--space-sm);
  line-height: 1.6;
}

/* ── SUCCESS / ERROR ──────────────────────────────────────── */
.success {
  background: rgba(76,175,125,0.1);
  border: 1px solid rgba(76,175,125,0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  color: var(--positivo);
  font-size: 14px;
  margin-bottom: var(--space-md);
  text-align: center;
}

.error {
  background: rgba(224,92,92,0.1);
  border: 1px solid rgba(224,92,92,0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  color: var(--error);
  font-size: 14px;
  margin-bottom: var(--space-md);
}

.error ul {
  list-style: disc;
  padding-left: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── FOOTER ───────────────────────────────────────────────── */
.footer-text {
  text-align: center;
  font-size: 12px;
  color: var(--cream-muted);
  padding: var(--space-xl) var(--space-md);
  border-top: 1px solid color-mix(in srgb, var(--cream) 5%, transparent);
  background: var(--bg-base);
}

@keyframes ctaStickyPulse {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.14) saturate(1.1); }
}

/* ── CTA STICKY MOBILE ────────────────────────────────────── */
.cta-sticky-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* El padding inferior suma el área segura del iPhone: sin ella, en
     los modelos con indicador de inicio la barra queda pegada al borde
     y parte del botón cae bajo una zona que el sistema se reserva. */
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-layer2);
  border-top: 1px solid color-mix(in srgb, var(--cream) 7%, transparent);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
  min-height: 66px;
  text-decoration: none;
}


/* ── CSM sub-components ───────────────────────────────────── */
.csm-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.csm-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--cream) 8%, transparent);
}
.csm-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.csm-name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--cream);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csm-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  margin-top: 2px;
}
.csm-current {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  color: var(--gold-light);
  line-height: 1;
}
.csm-was {
  font-size: 12px;
  color: var(--cream-dim);
  text-decoration: line-through;
}
.csm-cta {
  flex-shrink: 0;
  max-width: 55%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  text-align: center;
  padding: 12px 20px !important;
  font-size: 14px !important;
  line-height: 1.3;
  max-height: calc(1.3em * 3 + 24px);
  overflow: hidden;
}

/* Espaciador físico para que la barra sticky no tape contenido en móvil.
   Colapsa cuando la barra se esconde — que es justo al llegar al
   formulario, al final de la página: ahí los 88px reservados quedaban
   como un hueco vacío debajo del footer. Por defecto se mantiene, porque
   sin JavaScript la barra se muestra igual y sí necesita el espacio. */
.sticky-spacer {
  display: none;
}
@media (max-width: 1023px) {
  .sticky-spacer {
    display: block;
    height: calc(88px + env(safe-area-inset-bottom, 0px));
    transition: height 0.3s ease;
  }
  body.sticky-cta-oculto .sticky-spacer { height: 0; }
}

/* ── SKELETON LOADERS (lazy img placeholder) ──────────────── */
img[loading="lazy"] {
  background: linear-gradient(90deg, var(--bg-layer2) 25%, var(--bg-layer3) 50%, var(--bg-layer2) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
}

img[loading="lazy"].loaded {
  background: none;
  animation: none;
}

@keyframes skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── SCROLLBAR PERSONALIZADA ──────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
  background: var(--gold-border);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── SELECTION ────────────────────────────────────────────── */
::selection {
  background: var(--gold-dim);
  color: var(--gold-light);
}

/* ============================================================
   TABLET (≥ 640px)
   ============================================================ */
@media (min-width: 640px) {
  .two-columns {
    flex-direction: row;
    align-items: flex-start;
  }

  .two-columns .col {
    flex: 1;
  }

  .testimonials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  .testimonial:last-child {
    grid-column: span 2;
  }

  .testimonials-slider-container {
    padding-inline: 60px;
  }

  .testimonial-slide {
    flex: 0 0 50%;
  }
}

/* ============================================================
   DESKTOP (≥ 900px)
   ============================================================ */
@media (min-width: 900px) {
  :root {
    --space-xl: 56px;
    --space-2xl: 80px;
  }

  /* Ocultar sticky en desktop */
  .cta-sticky-mobile {
    display: none;
  }

  /* Hero en dos columnas desktop */
  .hero {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
    padding-block: var(--space-2xl);
  }

  .hero-text {
    flex: 1;
    order: 1;
  }

  .hero-media {
    flex: 1;
    order: 2;
    max-width: 520px;
  }

  .two-columns {
    gap: var(--space-2xl);
    align-items: center;
  }

  .two-columns .col-media {
    flex: 0 0 45%;
  }

  .testimonials {
    grid-template-columns: repeat(3, 1fr);
  }

  .testimonial:last-child {
    grid-column: auto;
  }

  .testimonial-slide {
    flex: 0 0 33.333%;
  }

  .form-box {
    padding: var(--space-2xl);
  }

  .color-qty-row {
    grid-template-columns: 1fr 100px 52px;
  }

  .announcement-bar__track {
    animation-duration: 30s;
  }
}

/* ============================================================
   LARGE DESKTOP (≥ 1200px)
   ============================================================ */
@media (min-width: 1200px) {
  .hero-media {
    max-width: 560px;
  }
}

/* ============================================================
   ACCESIBILIDAD — reduce motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .announcement-bar__track,
  .testimonios-ticker__track,
  .form-carriers__track {
    animation: none;
  }
}

/* ── TRANSPORTADORAS TICKER BAJO EL FORM ─────────────────── */
.form-carriers {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--cream) 7%, transparent);
    text-align: center;
}

.form-carriers__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cream-muted, #888);
    font-weight: 500;
    margin-bottom: 12px;
}

.form-carriers__ticker {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
    transform: translateZ(0);
}

.form-carriers__track {
    display: flex;
    align-items: center;
    gap: 36px;
    width: max-content;
    animation: marquee 10s linear infinite;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.form-carriers__track img {
    height: 26px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;

    /* Los logos vienen en PNG de un solo color, así que se recolorean:
       brightness(0) los deja negros e invert() los pasa a blanco.
       Quién los invierte lo decide --carrier-invert, que cada tema ya
       define (1 = fondo oscuro, logo blanco; 0 = fondo claro, negro).

       Antes esto se resolvía enumerando los temas oscuros a mano, y el
       propio comentario avisaba de que la lista se quedaba corta. Volvió
       a pasar: al añadir midnight-amber los logos siguieron saliendo
       negros sobre azul noche y desaparecían. Con el token no hay lista
       que mantener — un tema nuevo hereda el valor correcto o lo declara
       una vez, y esto funciona solo.

       La opacidad se calcula del mismo token: 0,45 sobre fondo claro y
       0,65 sobre oscuro, porque un logo blanco sobre negro necesita algo
       más de cuerpo para pesar lo mismo. */
    filter: brightness(0) invert(var(--carrier-invert, 1));
    opacity: calc(0.45 + var(--carrier-invert, 1) * 0.2);
}

/* ── ORDER SUCCESS ────────────────────────────────────────── */
.order-success {
  background: var(--bg-layer2);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  max-width: 520px;
  margin-inline: auto;
  text-align: center;
  animation: scaleIn 0.5s ease;
}

.order-success__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(76,175,125,0.12);
  border: 2px solid rgba(76,175,125,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  color: var(--positivo);
}

.order-success__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--positivo);
  margin-bottom: 6px;
}

.order-success__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 700;
  color: var(--cream);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}

.order-success__subtitle {
  font-size: 14px;
  color: var(--cream-dim);
  line-height: 1.65;
  max-width: 380px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.order-success__steps {
  background: var(--bg-layer3);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: left;
  margin-bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.order-success__steps-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-muted);
  margin-bottom: var(--space-sm);
}

.order-success__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.order-success__step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(201,168,76,0.15);
  border: 1px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-light);
  flex-shrink: 0;
  margin-top: 2px;
}

.order-success__step strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 3px;
}

.order-success__step p {
  font-size: 13px;
  color: var(--cream-dim);
  line-height: 1.5;
  margin: 0;
}

.order-success__wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25d366;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  width: 100%;
  margin-bottom: var(--space-sm);
  transition: var(--transition);
}

/* Verde de WhatsApp, no el acento: es un logo de marca y la gente lo
   reconoce por el color. Es la única excepción a la paleta. */
.order-success__wa-btn:hover {
  background: #1ebe5d;
  transform: translateY(-1px);
}

.order-success__note {
  font-size: 12px;
  color: var(--cream-muted);
  line-height: 1.5;
}

.order-success__num {
  display: inline-block;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  font-size: 13px;
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}

.order-success__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  border: 1.5px solid var(--gold-border);
  color: var(--gold);
  transition: var(--transition);
  margin-bottom: var(--space-sm);
}

.order-success__share-btn:hover {
  background: color-mix(in srgb, var(--gold) 25%, transparent);
}


/* actualizacion v2 */

/* ============================================================
   MEJORA #1 — Hero urgencia, countdown inline, trust row
   ============================================================ */

/* Banda de urgencia */
.hero-urgency-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--text-color, #222);
}
.urgency-stock { color: var(--error); font-weight: 500; }
.urgency-sep   { color: var(--gold-border, #aaa); }
.urgency-viewers { color: var(--text-color, #444); }

/* Stock: animación de pulso cuando baja a ≤3 */
.urgency-stock.critical { color: var(--error); }
.urgency-stock.critical #stockCount {
    animation: stockPulse 1s ease-in-out infinite;
}
@keyframes stockPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* Countdown inline en el price-box */
.hero-countdown-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.06);
    border-radius: 6px;
    font-size: 13px;
}
.countdown-label { color: var(--text-color, #555); }
.countdown-digits {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--countdown-color, var(--primary-color, var(--error)));
    letter-spacing: 1px;
}

/* Trust row debajo del CTA */

/* Badge flotante sobre la imagen del hero */
.hero-media { position: relative; }
.hero-image-badge {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.72);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .hero-urgency-bar { font-size: 12px; padding: 7px 12px; }
    .countdown-digits  { font-size: 16px; }
    
}

/* ============================================================
   FORMULARIO DIRECTO — form-block + CTA hero
   ============================================================ */

/* Cabecera de la sección */
.form-section__header {
    text-align: center;
    margin-bottom: 20px;
}
.form-section__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--gold);
    margin-bottom: 6px;
}
.form-section__sub {
    font-size: 14px;
    color: var(--cream-dim);
    margin-bottom: 10px;
}

/* Bloques del formulario */
.form-block {
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 16px;
    background: var(--bg-card);
}
.form-block__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
    color: var(--cream);
    margin-bottom: 16px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.form-block__num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--bg-base);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Fila de dos columnas en el form */
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 500px) {
    .form-row-2 { grid-template-columns: 1fr; }
}

/* Radio cards para tipo entrega */
.radio-group--cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
}
.radio-group--cards .radio-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 2px solid var(--gold-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    text-align: center;
    background: var(--bg-layer2);
    min-height: unset;
}
.radio-group--cards .radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.radio-group--cards .radio-card:has(input:checked) {
    border-color: var(--gold);
    background: var(--gold-dim);
}
.radio-card__icon { display:flex; color: var(--cream-dim); }
.radio-card__text { font-size: 13px; font-weight: 500; color: var(--cream-dim); }
.radio-group--cards .radio-card:has(input:checked) .radio-card__text { color: var(--gold); }
@media (max-width: 400px) {
    .radio-group--cards { grid-template-columns: 1fr; }
}

/* Bloque confirmar + CTA */
.form-confirm-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}
.confirm-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: var(--cream);
    padding: 14px 16px;
    border: 2px solid var(--gold-border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    transition: border-color var(--transition);
}
.confirm-label:has(input:checked) { border-color: var(--positivo); }
.confirm-label input[type="checkbox"] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    accent-color: var(--positivo);
    margin-top: 1px;
}

/* Botón CTA principal del form de pedido */
@keyframes submitPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(76,175,125,.35), 0 1px 0 rgba(255,255,255,0.25) inset; }
  50%       { box-shadow: 0 6px 42px rgba(76,175,125,.6), 0 0 0 6px rgba(76,175,125,.1), 0 1px 0 rgba(255,255,255,0.25) inset; }
}

@keyframes submitShimmer {
  0%   { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(220%)  skewX(-20deg); }
}

.btn-submit-hero {
    width: 100%;
    padding: 20px 24px;
    background: linear-gradient(160deg, var(--positivo) 0%, var(--positivo) 55%, var(--positivo) 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 24px rgba(76,175,125,0.4), 0 1px 0 rgba(255,255,255,0.25) inset;
    position: relative;
    overflow: hidden;
    animation: submitPulse 2.4s ease-in-out infinite;
    min-height: 60px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
/* Shimmer periódico en el botón verde */
.btn-submit-hero::before {
    content: '';
    position: absolute;
    top: -10%; bottom: -10%;
    width: 28%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    animation: btn-shimmer-loop 3.8s ease-in-out infinite;
    pointer-events: none;
}
@media (hover: hover) {
  .btn-submit-hero:hover {
    transform: translateY(-3px) scale(1.015);
    filter: brightness(1.07);
    box-shadow: 0 14px 44px rgba(76,175,125,0.55), 0 2px 0 rgba(255,255,255,0.2) inset;
    animation: none;
  }
  .btn-submit-hero:hover::before { animation: none; }
}
.btn-submit-hero:active {
    transform: scale(0.96);
    filter: brightness(1.1);
    animation: none;
    transition: transform 0.08s ease, filter 0.08s ease;
}
.btn-submit-hero:disabled { opacity: 0.65; cursor: not-allowed; transform: none; animation: none; filter: none; }

.btn-submit-hero--step:not(:disabled) {
  animation: submitPulse 2.4s ease-in-out infinite;
}

/* Trust row debajo del botón */
.form-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;
    font-size: 12px;
    color: var(--cream-dim);
    padding-top: 4px;
}
.form-trust-row span {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Errores */
#stepperErrors {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
}
#stepperErrors ul { margin: 6px 0 0 16px; }

/* ============================================================
   MEJORA #3 — Cómo funciona, Garantía, Stars, FOMO, WA float
   ============================================================ */

/* ── CÓMO FUNCIONA ────────────────────────────────────────── */
.como-funciona-section {
    background: var(--bg-layer1);
    position: relative;
}

.como-funciona-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
}

.steps-grid {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
}

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

.step-card {
    flex: 1;
    min-width: 0;
    background: var(--bg-card);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    padding: var(--space-lg);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

/* Compact mobile — descripción oculta, tipografía reducida */
@media (max-width: 639px) {
    .step-card {
        padding: 14px 10px 16px;
    }
    .step-num {
        font-size: 2.2rem;
        top: 4px;
        right: 8px;
    }
    .step-icon-wrap {
        margin-bottom: 6px;
    }
    .step-icon-wrap svg {
        width: 22px;
        height: 22px;
    }
    .step-card h3 {
        font-size: 0.72rem;
        line-height: 1.3;
        margin-bottom: 0;
    }
    .step-card p {
        display: none;
    }
}

.step-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    transform: translateY(-3px);
    box-shadow: var(--shadow-gold);
}

.step-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.step-card:hover::after {
    opacity: 1;
}

.step-num {
    font-family: var(--font-display);
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--gold-dim);
    letter-spacing: -0.05em;
    position: absolute;
    top: 6px;
    right: 14px;
    pointer-events: none;
    user-select: none;
}

.step-icon-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: var(--space-sm);
    color: var(--gold);
    filter: drop-shadow(0 0 10px rgba(201,168,76,0.25));
}

.step-card h3 {
    font-size: 1.05rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--cream);
    margin-bottom: 8px;
}

.step-card p {
    font-size: 14px;
    color: var(--cream-dim);
    line-height: 1.65;
}

@media (min-width: 640px) {
    .steps-grid {
        gap: var(--space-sm);
    }

    .step-arrow-sep {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gold-light);
        font-size: 1.6rem;
        flex-shrink: 0;
        padding-bottom: 20px;
        user-select: none;
    }
}

/* ── TESTIMONIAL STARS ────────────────────────────────────── */
.testimonial-stars {
    color: var(--gold-light);
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.testimonial-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--positivo);
    margin-top: 6px;
    font-style: normal;
}

.testimonial-city {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted, rgba(255,255,255,0.5));
}

/* ── GARANTÍA BANNER ──────────────────────────────────────── */
/* Sin fondo: la sección se apoya en el de la página, como la mayoría.
   Llevaba un velo dorado translúcido (un degradado entre --positivo al
   6% y --gold al 5% que, siendo --positivo el propio --gold, era un
   color plano). Se probó cambiarlo por la banda neutra --bg-layer1 que
   usan benefits y para-quien, pero seguía sobrando: aquí lo que tiene
   que destacar es la tarjeta de dentro, y una banda detrás le come el
   contraste — el salto de página a tarjeta es mayor que el de banda a
   tarjeta, así que sin banda el panel se despega más.
   Si algún día se quiere volver a marcar la sección, el camino es
   --bg-layer1, nunca un tinte de color: sería la única de la landing. */
.garantia-banner {
    padding: var(--space-xl) 0;
}

.garantia-container {
    padding-block: 0;
}

.garantia-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    text-align: center;
    max-width: 680px;
    margin-inline: auto;
}

.garantia-seal {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--positivo) 10%, transparent);
    border: 2px solid color-mix(in srgb, var(--positivo) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--positivo);
    flex-shrink: 0;
    animation: garantiaPulse 3s ease-in-out infinite;
}

@keyframes garantiaPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--positivo) 25%, transparent); }
    50%       { box-shadow: 0 0 0 14px color-mix(in srgb, var(--positivo) 0%, transparent); }
}

.garantia-body {
    text-align: center;
    width: 100%;
}

/* El título pasó de h3 a h2 para no saltarse un nivel del esquema; el
   tamaño se mantiene, porque aquí va dentro de una tarjeta y no compite
   con los títulos de sección. */
.garantia-body h2 {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    color: var(--cream);
    margin-bottom: var(--space-sm);
}

.garantia-body p {
    font-size: 14px;
    color: var(--cream-dim);
    line-height: 1.7;
    margin-bottom: var(--space-md);
    max-width: 480px;
    margin-inline: auto;
}

.garantia-list {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--cream-dim);
    text-align: left;
    padding: 0;
    list-style: none;
    margin-inline: auto;
}

.garantia-list li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.5;
}

/* ── SOCIAL PROOF NEAR FORM ───────────────────────────────── */
.form-social-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--cream-muted);
    margin-top: -20px;
    margin-bottom: var(--space-lg);
}

.form-social-proof__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--positivo);
    flex-shrink: 0;
    animation: fspDotPulse 2s ease-in-out infinite;
}

@keyframes fspDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.55; transform: scale(1.3); }
}

/* ── FOMO TOAST ───────────────────────────────────────────── */
.fomo-toast {
    position: fixed;
    top: 72px;
    left: 16px;
    bottom: auto;
    z-index: 80;
    background: var(--bg-layer2);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    max-width: 270px;
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: fomoIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: none;
}

.fomo-toast.hiding {
    animation: fomoOut 0.35s ease forwards;
}

.fomo-toast__icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.fomo-toast__text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--cream-dim);
}

.fomo-toast__text strong {
    color: var(--cream);
    font-weight: 600;
}

.fomo-toast__time {
    display: block;
    font-size: 11px;
    color: var(--cream-muted);
    margin-top: 3px;
}

@keyframes fomoIn {
    from { opacity: 0; transform: translateX(-24px) scale(0.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes fomoOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-20px); }
}

@media (min-width: 900px) {
    .fomo-toast {
        bottom: 28px;
    }
}

/* ── WHATSAPP FLOTANTE ────────────────────────────────────── */
.wa-float-btn {
    position: fixed;
    /* Va por encima de la barra sticky, que ahora crece con el área
       segura del iPhone: si no se suma aquí también, en esos modelos el
       botón se monta sobre el CTA de compra. */
    bottom: calc(110px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    z-index: 80;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(37,211,102,0.45);
    transition: var(--transition);
    text-decoration: none;
}

/* Igual que arriba: el botón flotante conserva el verde de WhatsApp. */
.wa-float-btn:hover {
    background: #1ebe5d;
    transform: scale(1.1);
    box-shadow: 0 6px 26px rgba(37,211,102,0.55);
}

.wa-float-btn svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

@media (min-width: 1024px) {
    .wa-float-btn {
        bottom: 28px;
        width: 56px;
        height: 56px;
    }
    .wa-float-btn svg {
        width: 28px;
        height: 28px;
    }
}

/* ============================================================
   MEJORA #4 — Sticky Bar, Para quién es, Antes/Después,
               Form countdown, Exit Popup
   ============================================================ */

/* ── STICKY PRICE BAR ─────────────────────────────────────── */
.sticky-price-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
    background: var(--bg-layer2);
    border-bottom: 1px solid var(--gold-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    transform: translateY(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.sticky-price-bar.is-visible {
    transform: translateY(0);
}

.sticky-price-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    max-width: 1100px;
    margin-inline: auto;
    padding: 10px var(--space-md);
    flex-wrap: wrap;
}

.sticky-price-bar__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--cream);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.sticky-price-bar__prices {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sticky-price-bar__old {
    font-size: 12px;
    color: var(--cream-muted);
    text-decoration: line-through;
}

.sticky-price-bar__new {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: -0.02em;
}

.sticky-price-bar__cta {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: var(--btn-text, #0a0a0a);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    transition: var(--transition);
    text-decoration: none;
}

.sticky-price-bar__cta:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

@media (max-width: 500px) {
    .sticky-price-bar__name { display: none; }
}

/* ── PARA QUIÉN ES ────────────────────────────────────────── */
.para-quien-section {
    background: var(--bg-layer1);
    position: relative;
}

.para-quien-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
}

.para-quien-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-items: start;
}

.para-quien-card {
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border: 1px solid transparent;
    transition: var(--transition);
}

.para-quien-card--yes {
    background: color-mix(in srgb, var(--positivo) 6%, var(--bg-card));
    border-color: color-mix(in srgb, var(--positivo) 20%, transparent);
}

.para-quien-card--no {
    background: var(--bg-card);
    border-color: rgba(255,255,255,0.06);
}

.para-quien-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.para-quien-card__icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.para-quien-card__header h3 {
    font-size: 1rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--cream);
}

.para-quien-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: var(--space-lg);
}

.para-quien-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--cream-dim);
    line-height: 1.55;
}

.para-quien-card--yes .para-quien-list li::before {
    content: '✓';
    color: var(--positivo);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.para-quien-card--no .para-quien-list li::before {
    content: '✗';
    color: var(--error);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.para-quien-cta {
    display: inline-flex;
}

@media (min-width: 640px) {
    .para-quien-grid {
        flex-direction: row;
        align-items: stretch;
    }
    .para-quien-card {
        flex: 1;
    }
}

/* ── ANTES Y DESPUÉS — overlay reveal slider ──────────────── */
.antes-despues-section {
    background: var(--bg-layer1);
}

.antes-despues-static {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 640px;
    margin-inline: auto;
}

.antes-despues-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 2px solid var(--gold-border);
    box-shadow: var(--shadow-deep);
    aspect-ratio: 8.5/11;
}

.antes-despues-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.antes-despues-badge {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.antes-despues-badge--antes {
    background: rgba(0,0,0,0.55);
    color: rgba(255,255,255,0.9);
    border: 1px solid color-mix(in srgb, var(--cream) 15%, transparent);
}

.antes-despues-badge--despues {
    background: var(--gold);
    color: var(--btn-text, #0a0a0a);
}

/* ── FORM URGENCY STRIP ───────────────────────────────────── */
.form-urgency-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: color-mix(in srgb, var(--gold) 8%, transparent);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: 13px;
    color: var(--cream-dim);
    margin-bottom: var(--space-md);
    text-align: center;
}

.form-urgency-strip strong {
    font-variant-numeric: tabular-nums;
    color: var(--gold-light);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* ── EXIT INTENT POPUP ────────────────────────────────────── */
.exit-popup {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.exit-popup[hidden] {
    display: none;
}

.exit-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

.exit-popup__box {
    position: relative;
    background: var(--bg-layer2);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-deep);
    animation: exitPopupIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
    overflow: hidden;
}

.exit-popup__box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
}

@keyframes exitPopupIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.exit-popup__close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--cream-muted);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color 0.2s;
}

.exit-popup__close:hover {
    color: var(--cream);
}

.exit-popup__badge {
    display: inline-block;
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--gold-light);
    padding: 4px 14px;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-md);
}

.exit-popup__box h3 {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
    color: var(--cream);
    margin-bottom: var(--space-sm);
    line-height: 1.25;
}

.exit-popup__box p {
    font-size: 13px;
    color: var(--cream-dim);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.exit-popup__timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--space-lg);
    background: var(--bg-layer3);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.exit-popup__timer-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cream-muted);
}

.exit-popup__timer-digits {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-size: clamp(2rem, 10vw, 2.8rem);
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 0.08em;
    text-shadow: 0 0 24px color-mix(in srgb, var(--gold) 30%, transparent);
    line-height: 1;
}

.exit-popup__prices {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.exit-popup__old {
    font-size: 13px;
    color: var(--cream-muted);
    text-decoration: line-through;
}

.exit-popup__now {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: -0.02em;
}

.exit-popup__save {
    font-size: 12px;
    font-weight: 600;
    color: var(--bg-base);
    background: var(--positivo);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
}

.exit-popup__cta {
    width: 100%;
    font-size: 15px;
    margin-bottom: var(--space-md);
    min-height: 52px;
}

.exit-popup__dismiss {
    background: none;
    border: none;
    font-size: 11px;
    color: var(--cream-muted);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 4px;
    transition: color 0.2s;
    display: block;
    margin-inline: auto;
}

.exit-popup__dismiss:hover {
    color: var(--cream-dim);
}

/* ================================================
   MEJORA #5 — Tabla comparativa (Con / Sin)
================================================ */
.comparison-section {
    padding: 56px 0 40px;
}

.comparison-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr; /* header | imagen | lista */
    column-gap: 14px;
    border: none;
    margin: 32px 0 28px;
}

.comparison-col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / 4;
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    border: none;
}

.comparison-col--without {
    box-shadow: 0 2px 16px rgba(0,0,0,0.13);
}

.comparison-col--with {
    box-shadow: 0 2px 16px rgba(0,0,0,0.13);
}

.comparison-col__img {
    width: 100%;
    aspect-ratio: 8.5 / 11;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
}

/* Header debajo de la imagen: título alineado a la izquierda */
.comparison-header {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    text-align: left;
}

.comparison-header strong {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.comparison-header--without {
    border-top: none;
}

.comparison-header--without strong {
    color: var(--error);
}

.comparison-header--with {
    border-top: none;
}

.comparison-header--with strong {
    color: var(--positivo);
}

.comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.comparison-list li {
    padding: 12px 16px;
    font-size: .85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--cream) 4%, transparent);
    line-height: 1.45;
    display: flex;
    gap: 8px;
}

.comparison-col--without .comparison-list {
    background: rgba(230,57,70,.03);
}
.comparison-col--without .comparison-list li {
    opacity: .78;
}
.comparison-col--without .comparison-list li::before {
    content: none;
}

.comparison-col--with .comparison-list {
    background: rgba(76,175,125,.03);
}
.comparison-col--with .comparison-list li::before {
    content: none;
}

.comparison-cta {
    text-align: center;
    margin-top: 24px;
}

@media (max-width: 580px) {
    .comparison-table {
        gap: 8px;
    }

    .comparison-header {
        padding: 12px 8px 10px;
        font-size: .75rem;
    }

    .comparison-header span[aria-hidden="true"] {
        font-size: 1.3rem;
    }

    .comparison-list li {
        padding: 9px 10px;
        font-size: .76rem;
        gap: 6px;
    }
}

/* ================================================
   MEJORA #5 — Sección de autoridad / credibilidad
================================================ */
/* Mismo criterio que la banda de garantía: sin fondo y sin líneas.
   Tenía tres problemas a la vez.

   1. El fondo era --bg-card, o sea EXACTAMENTE el mismo color que sus
      propias tarjetas .authority-stat en los cinco temas. Las fichas
      quedaban invisibles sobre su propia banda, sostenidas sólo por la
      sombra. Ahora se apoyan en el fondo de la página y se despegan.

   2. Arrastraba un respaldo #1a1a1a escrito a mano: si --bg-card
      faltara, los dos temas claros se comerían una banda casi negra.

   3. El ritmo vertical. Sumaba 52px de padding MÁS 40px de margen, así
      que antes de esta sección había ~132px de aire cuando entre dos
      secciones normales hay 80. Se nota al bajar. Con --space-xl queda
      igual que el resto.

   Las dos hairlines que la delimitaban se van con el fondo: sin banda no
   hay nada que delimitar, y una línea clara cruzando la página es justo
   lo que se retiró del resto del diseño. */
.authority-section {
    padding: var(--space-xl) 0;
}

.authority-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Misma separación y aire que el resto de rejillas de tarjetas
       (beneficios, ¿por qué?, para quién): antes iba con gap 20px y un
       margen superior de 28px que ninguna otra sección tiene, y eso la
       hacía leerse aparte del sistema. */
    gap: var(--card-gap);
    margin-top: var(--space-sm);
    text-align: center;
}

.authority-stat {
    /* Chip arriba · cifra · etiqueta, con el mismo hueco entre piezas.
       Los chips arrancan a la misma altura en las cuatro (flex-start);
       la 4ª —solo icono + etiqueta— reparte su hueco arriba y abajo de
       la etiqueta para no quedar descolgada. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 24px 12px;
    border-radius: var(--radius-md);
    border: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    /* --bg-main no existe: caía siempre en el negro del respaldo, también
       en los temas claros. --bg-base sí lo define cada tema. */
    background: var(--bg-base);
    transition: transform .2s ease, box-shadow .2s ease;
}

.authority-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}

.authority-stat__num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--gold-light);
    line-height: 1.1;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.authority-stat__label {
    font-size: .82rem;
    color: var(--cream-dim);
    line-height: 1.35;
}

/* La ficha sin cifra (garantía): su etiqueta se centra en el hueco que
   dejan las otras tres con su número, así el bloque no queda pegado al
   chip con un vacío debajo. */
.authority-stat:not(:has(.authority-stat__num)) .authority-stat__label {
    margin-block: auto;
}

@media (max-width: 768px) {
    .authority-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
    .authority-stat__num { font-size: 1.6rem; }
}

/* ================================================
   MEJORA #6A — Sticky mobile CTA: visibilidad
================================================ */
.cta-sticky-mobile {
    transform: translateY(0);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease;
}

.cta-sticky-mobile.is-hidden {
    transform: translateY(115%);
    pointer-events: none;
}

/* ================================================
   MEJORA #6B — Badges de confianza en el formulario
================================================ */
.trust-badges-form {
    background: rgba(76,175,125,.07);
    border: 1px solid rgba(76,175,125,.25);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin: 20px 0 18px;
    text-align: center;
}

.trust-badges-form__row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 10px;
}

.trust-badge-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .82rem;
    font-weight: 600;
    opacity: .9;
}

.trust-badge-item__icon { font-size: 1.1rem; }

.trust-badges-form__note {
    font-size: .78rem;
    opacity: .7;
    margin: 0;
    line-height: 1.4;
}

/* ================================================
   MEJORA #6C — Scroll reveal animations
================================================ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }
.reveal[data-delay="4"] { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}
/* ============================================================
   MÁQUINA DE VENTAS — overrides visuales de conversión
   ============================================================ */

/* ── CTA PRINCIPAL DEL HERO — tamaño y layout, sin override de color ── */
#heroCta {
    width: 100%;
    display: flex;
    font-size: 17px;
    padding: 20px 32px;
}

/* ── CTAs DE SECCIÓN — tamaño, sin override de color ─────── */
.btn-cta-section {
    font-size: 15px !important;
    padding: 16px 28px !important;
    min-width: 240px;
    display: inline-flex;
}

/* ── PRICE BOX — más impacto visual ──────────────────────── */
.price-box {
    box-shadow: 0 2px 16px rgba(0,0,0,0.13) !important;
}
.price-box .new {
    font-size: clamp(2.4rem, 10vw, 3.2rem);
    color: var(--gold-light);
    filter: drop-shadow(0 0 12px rgba(201,168,76,0.35));
}
.price-box .save {
    font-size: 14px;
    padding: 5px 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    animation: savePulse 2.5s ease-in-out infinite;
}
@keyframes savePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,125,0); }
    50%       { box-shadow: 0 0 0 6px rgba(76,175,125,0.18); }
}

/* ── URGENCY BAR — más agresiva ───────────────────────────── */
.hero-urgency-bar {
    background: rgba(220,38,38,0.14) !important;
    border-color: rgba(220,38,38,0.4) !important;
    font-weight: 500;
}
.urgency-stock {
    font-weight: 700;
    font-size: 14px;
}

/* ── COUNTDOWN — pulso vivo ───────────────────────────────── */
@keyframes countdownGlow {
    0%, 100% { text-shadow: 0 0 30px rgba(201,168,76,0.35); }
    50%       { text-shadow: 0 0 60px rgba(201,168,76,0.75); }
}
#countdown-timer {
    animation: countdownGlow 2s ease-in-out infinite;
}

/* ── COUNTDOWN INLINE HERO — más visible ─────────────────── */
.hero-countdown-inline {
    background: rgba(201,168,76,0.1) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 16px !important;
}
.countdown-digits {
    font-size: 20px !important;
    font-weight: 800 !important;
}

/* ── HERO IMAGE BADGE — reposicionado ─────────────────────── */
.hero-image-badge {
    bottom: 16px !important;
    left: auto !important;
    right: 12px !important;
    transform: none !important;
    /* Misma superficie que .hero-trust-badge: va sobre la foto, no sobre
       el fondo del tema. Ver el comentario allí. */
    background: var(--pill-photo-bg, rgba(10,10,10,0.82)) !important;
    border: 1px solid var(--pill-photo-border, var(--gold-border)) !important;
    color: var(--pill-photo-text, var(--gold-light)) !important;
    font-size: 11px !important;
    padding: 6px 12px !important;
}

/* ── ICONOS QUE SUSTITUYEN A LOS EMOJI ────────────────────────
   Los emoji que quedaban sueltos por la página (⭐ 🛡️ ✅ 💳 🔄 🔥 ⚠️ 📲)
   pasaron a SVG de trazo, el mismo juego que ya usaban el formulario y
   la garantía. Estas reglas sólo los alinean con el texto: sin esto un
   SVG en línea se apoya en la base de la línea y queda descolgado. */
.hero-image-badge__ico,
.exit-popup__badge-ico {
    display: inline-flex;
    align-items: center;
    vertical-align: -0.12em;
    margin-right: 4px;
}

.offer-anchor__perks span,
.offer-anchor__scarcity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.offer-anchor__perks svg,
.offer-anchor__scarcity svg {
    flex-shrink: 0;
    opacity: 0.9;
}

.exit-popup__cta svg,
.order-success__share-btn svg {
    flex-shrink: 0;
    vertical-align: -0.15em;
}

/* ── HERO TRUST ROW — más visible ────────────────────────── */

/* ── SECTION TITLES — línea dorada más larga ─────────────── */
/* (Aquí había un ::after que alargaba la línea dorada del título. La
   línea se retiró entera — ver .section-eyebrow.) */

/* ── BENEFIT ITEMS — hover más notable ───────────────────── */
.benefit-item {
    padding: var(--space-md) var(--space-lg);
    font-size: 15px;
}
.benefit-item::before {
    content: '✦';
    font-size: 14px;
}

/* ── FORM SECTION — fondo diferenciado ───────────────────── */
#form-pedido {
    background: var(--bg-layer2) !important;
    /* Sin esto el salto nativo a #form-pedido (clic en CTA sin JS, o el
       redirect tras el POST nativo) deja la cabecera de "pedido registrado"
       tapada bajo la barra fija de 66px. El JS inline ya lo compensaba,
       pero solo cuando corría. */
    scroll-margin-top: 74px;
}
#form-pedido::before {
    background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
    height: 2px !important;
}

/* ── FORM BOX — la tarjeta destacada ──────────────────────────
   Lleva la misma caja que las demás más el halo del acento: es la pieza
   donde termina todo el recorrido y tiene que pesar más que el resto.
   La sombra combina las dos capas — sin la primera, el formulario
   flotaba con brillo pero sin apoyo, y se despegaba del fondo. */
.form-box {
    border: var(--card-border) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow), 0 0 60px color-mix(in srgb, var(--gold) 10%, transparent) !important;
}

/* ── GARANTÍA BANNER — sin bordes ────────────────────────── */
.garantia-banner {
    border: none;
}

/* ── GARANTÍA INNER — la misma tarjeta que todas ──────────────
   Decía "misma card que price-box" pero copiaba los valores a mano en
   vez de usar los tokens, así que se quedó atrás cuando cada tema pasó
   a definir su propia --card-shadow. El resultado medido: este panel
   llevaba una sombra de 0,13 en los cinco temas mientras el resto de
   tarjetas llevaba 0,30 / 0,38 / 0,32 en los oscuros — menos de la
   mitad de profundidad — y una sombra negra dura en los dos claros,
   donde las demás usan una teñida y suave.
   El relleno sí se queda propio: es un panel contenedor y necesita más
   aire que una tarjeta normal. */
.garantia-inner {
    background: var(--card-bg) !important;
    border: var(--card-border) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    padding: 28px 20px 24px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ── MOBILE: CTA de sección full-width ───────────────────── */
@media (max-width: 640px) {
    #heroCta { font-size: 15px; padding: 17px 24px; }
    .btn-cta-section { width: 100% !important; min-width: unset !important; }
    .price-box .new { font-size: clamp(2rem, 11vw, 2.8rem); }
    .countdown-digits { font-size: 17px !important; }
}

/* ── DESKTOP: CTA sección centrado con width controlado ──── */
@media (min-width: 640px) {
    .section-cta { display: flex; flex-direction: column; align-items: center; }
}

/* ============================================================
   MÁQUINA DE VENTAS — secciones intermedias y CTAs verdes
   ============================================================ */

/* ── Botones secundarios: heredan btn-primary, sin overrides de color ─── */
.sticky-price-bar__cta {
    border-radius: var(--radius-md);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    font-size: 14px;
    padding: 10px 20px;
}

/* ── PARA QUIÉN — tarjeta SI más llamativa ────────────────── */
.para-quien-card--yes {
    background: color-mix(in srgb, var(--positivo) 9%, var(--bg-card)) !important;
    border-color: color-mix(in srgb, var(--positivo) 35%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--positivo) 15%, transparent),
                0 4px 20px color-mix(in srgb, var(--positivo) 10%, transparent);
}
.para-quien-card--yes .para-quien-list li {
    font-size: 15px;
}

/* ── AUTHORITY — números grandes, pero dentro del sistema ──
   Se quitó el drop-shadow dorado: era el único texto de toda la página
   con halo, y la profundidad en este diseño la lleva la sombra de la
   CAJA, no un glow. El peso baja de 900 a 800 —el mismo de las demás
   cifras (price save, viñeta de ¿por qué?)— y el interletrado se
   suaviza. */
.authority-stat__num {
    font-size: clamp(1.8rem, 5vw, 2.6rem) !important;
    font-weight: 800 !important;
    color: var(--gold-light) !important;
    letter-spacing: -0.01em;
}
.authority-stat {
    padding: 28px 16px !important;
}
/* Misma pinta que el pie de las step-card (.step-card p): Montserrat,
   14px, --cream-dim. Antes iba con opacity 0.85 encima del color, que
   sobra. */
.authority-stat__label {
    font-size: 0.875rem !important;
    font-weight: 400;
}

/* ── COMPARISON TABLE — headers sin fondo ─────────────────── */
.comparison-header--with,
.comparison-header--without {
    background: none !important;
    border: none !important;
}
.comparison-table {
    box-shadow: var(--shadow-card);
}

/* ── SOCIAL PROOF NEAR FORM — más compacto ───────────────── */
.form-social-proof {
    margin-top: 0 !important;
    margin-bottom: var(--space-sm) !important;
    font-size: 14px;
    font-weight: 500;
    color: var(--cream-dim);
}

/* ── FORM URGENCY STRIP — sticky en mobile ───────────────── */
.form-urgency-strip {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--gold) 12%, var(--bg-base)) !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin-bottom: 0 !important;
    padding: 10px var(--space-md) !important;
    font-size: 14px;
    font-weight: 500;
}

/* ── STEPS — on mobile texto más visible ─────────────────── */
.step-card h3 {
    font-size: 1.1rem;
    color: var(--gold-light) !important;
}
.step-num {
    color: color-mix(in srgb, var(--gold) 20%, transparent) !important;
    font-size: 5rem !important;
}

/* ── TESTIMONIALS — grid en mobile también ───────────────── */
@media (max-width: 639px) {
    .testimonials {
        display: flex !important;
        flex-direction: column;
    }
}

/* ── ACCORDION — header más grande ───────────────────────── */
.accordion-header {
    font-size: 15px !important;
    padding: var(--space-md) var(--space-lg) !important;
}

/* ── ANUNCIO BAR ──────────────────────────────────────────────
   Aquí había un degradado casi negro con !important, y al llevar
   !important ganaba a los NUEVE temas: la barra salía negra sobre un
   fondo crema, azul o borgoña según el tema, sin relación con nada.
   Cada tema ya define su propia --announcement-bg; sólo había que
   dejarla pasar. */
.announcement-bar {
    background: var(--announcement-bg);
}

/* ── EXIT POPUP — CTA mayor ──────────────────────────────── */
.exit-popup__cta {
    font-size: 16px !important;
    min-height: 56px !important;
    border-radius: var(--radius-md) !important;
}

/* ── DESKTOP — para quién full width container ───────────── */
@media (min-width: 640px) {
    .para-quien-cta { width: 100%; justify-content: center; }
}

/* ============================================================
   MÁQUINA DE VENTAS — pulido final tipografía + mobile
   ============================================================ */

/* ── HERO H1 — más grande, más peso, más drama ───────────── */
.hero-text h1 {
    font-size: clamp(2.2rem, 9vw, 4.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
}

/* ── HERO SUBTITLE — más legible, más confianza ──────────── */
.hero-subtitle {
    font-size: clamp(15px, 2.5vw, 18px) !important;
    font-weight: 400 !important;
    color: var(--cream) !important;
    opacity: 0.85;
    line-height: 1.55 !important;
}

/* ── SECTION CTA — texto de persuasión más grande ────────── */
.section-cta p {
    font-size: 16px !important;
    color: var(--cream) !important;
    opacity: 0.88;
    font-weight: 400;
    line-height: 1.5;
}

/* (Este bloque era el que de verdad fijaba el tamaño del título, con
   !important y a 900 líneas de distancia de la regla original. Todo se
   consolidó arriba: ahora .section-title se define en un solo sitio y
   sin !important, y se puede tocar sin pelearse con la cascada.) */

/* ── GALLERY THUMB — glow más visible al seleccionar ─────── */
.product-gallery__thumb.active {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(201,168,76,0.3) !important;
}

/* ── ORDER SUMMARY TOTAL — precio de cierre más grande ───── */
.order-summary__row--total strong {
    font-size: clamp(1.5rem, 5vw, 1.9rem) !important;
    letter-spacing: -0.02em;
}

/* ── FORM URGENCY STRIP — countdown en negrita ───────────── */
.form-urgency-strip strong {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--gold-light);
}

/* ── SUCCESS SCREEN — ícono verde más vivo ───────────────── */
.order-success__icon {
    background: var(--positivo) !important;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--positivo) 18%, transparent) !important;
}
.order-success__wa-btn {
    background: #25d366 !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 18px rgba(37,211,102,0.4) !important;
}
.order-success__wa-btn:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-2px) !important;
}

/* ── MOBILE FINAL PASS ───────────────────────────────────── */
@media (max-width: 639px) {
    /* Hero: menos espacio vertical, texto más ajustado */
    .hero { padding-top: 12px !important; gap: 20px !important; }
    .hero-text h1 { font-size: clamp(1.9rem, 10vw, 2.8rem) !important; }
    .hero-subtitle { font-size: 15px !important; }

    /* Price box: precio principal más dominante */
    .price-box .new { font-size: clamp(2rem, 11vw, 2.8rem) !important; }

    /* Section CTAs: full-width, altura cómoda */
    .btn-cta-section {
        width: 100% !important;
        min-width: unset !important;
        padding: 17px 20px !important;
    }

    /* Section CTA container: sin flex innecesario */
    .section-cta { text-align: center; }

    /* Form block: más espacio entre bloques en mobile */
    .form-block { padding: 16px 14px !important; }
    .form-block__label { font-size: 13px !important; }

    /* Confirm block más compacto */
    .confirm-label { font-size: 13px !important; padding: 10px 12px !important; }

    /* Submit button: texto un poco menor para caber */
    .btn-submit-hero { font-size: 15px !important; padding: 17px 18px !important; }

    /* Countdown section digits en mobile */
    #countdown-timer { font-size: clamp(2.4rem, 12vw, 4rem) !important; }

    /* Authority stats: 2 columnas en vez de 4 */
    .authority-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Steps: menos padding */
    .step-card { padding: var(--space-md) !important; }
}

/* ── TABLET (640-1023px) — ajustes medios ────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {
    .hero-text h1 { font-size: clamp(2.2rem, 6vw, 3.2rem) !important; }
    .form-box { max-width: 680px; }
}

/* ── WHATSAPP FALLBACK LINK ───────────────────────────────── */
.form-wa-fallback {
    text-align: center;
    font-size: 13px;
    color: var(--cream-muted);
    padding-top: 4px;
}
.form-wa-fallback a {
    color: #25d366;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    /* El texto mide 16px de alto — difícil de acertar y es una salida a
       WhatsApp. El padding agranda el área de toque a 44px sin mover el
       layout de alrededor (el margen negativo lo compensa). */
    display: inline-block;
    padding: 14px 6px;
    margin: -14px -6px;
}
.form-wa-fallback a:hover {
    text-decoration: underline;
}

/* ============================================================
   SOCIAL PROOF STRIP — micro-testimonios bajo el hero
   ============================================================ */
.social-proof-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-md) var(--space-lg);
    background: var(--bg-layer1);
    border-top: 1px solid var(--gold-border);
    border-bottom: 1px solid var(--gold-border);
}

.sp-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: var(--cream-dim);
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: var(--space-xs) var(--space-sm);
}

.sp-stars {
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.sp-quote {
    font-style: italic;
    color: var(--cream-dim);
}

.sp-name {
    font-weight: 600;
    color: var(--gold);
    white-space: nowrap;
}

@media (min-width: 640px) {
    .social-proof-strip {
        gap: var(--space-xl);
        flex-wrap: nowrap;
    }

    .sp-item {
        flex-wrap: nowrap;
        text-align: left;
    }
}

/* ============================================================
   OFFER ANCHOR — resumen de oferta pre-formulario
   ============================================================ */
.offer-anchor {
    background: var(--bg-layer2);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg) var(--space-xl);
    margin-block: var(--space-xl);
    text-align: center;
    max-width: 680px;
    margin-inline: auto;
}

.offer-anchor__product {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-weight: 700;
    color: var(--cream);
    margin-bottom: var(--space-sm);
}

.offer-anchor__pricing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.offer-anchor__old {
    font-size: 1rem;
    color: var(--cream-muted);
    text-decoration: line-through;
}

.offer-anchor__new {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
}

.offer-anchor__save {
    display: inline-block;
    background: color-mix(in srgb, var(--positivo) 15%, transparent);
    color: var(--positivo);
    border: 1px solid color-mix(in srgb, var(--positivo) 30%, transparent);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
}

.offer-anchor__perks {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--cream-dim);
    margin-bottom: var(--space-sm);
}

.offer-anchor__scarcity {
    font-size: 13px;
    color: var(--error);
    font-weight: 600;
    margin-top: var(--space-sm);
    animation: pulse 2s ease infinite;
}


/* ============================================================
   DELIVERY ETA — fecha estimada de entrega en formulario
   ============================================================ */
.delivery-eta-badge {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: color-mix(in srgb, var(--positivo) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--positivo) 25%, transparent);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    color: var(--positivo);
    font-weight: 500;
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
    animation: fadeInDown 0.3s ease;
}

.delivery-eta-badge strong {
    font-weight: 700;
    color: var(--cream);
}

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

/* ══════════════════════════════════════════════════════════════
   STEPPER DE FORMULARIO
   ══════════════════════════════════════════════════════════════ */

/* Indicador de pasos */
.form-stepper-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 28px auto 24px;
    max-width: 360px;
}

.stepper-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.stepper-node__circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--gold) 35%, transparent);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, border-color 0.25s;
    position: relative;
}

.stepper-node__num  { font-size: 14px; font-weight: 700; color: var(--text-muted); transition: opacity 0.2s; }
.stepper-node__check {
    width: 16px; height: 16px;
    position: absolute;
    opacity: 0;
    transition: opacity 0.2s;
    color: #fff;
}

.stepper-node__label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.25s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Estado activo */
.stepper-node.is-active .stepper-node__circle {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent);
}
.stepper-node.is-active .stepper-node__num  { color: #fff; }
.stepper-node.is-active .stepper-node__label { color: var(--gold); font-weight: 700; }

/* Estado completado */
.stepper-node.is-done .stepper-node__circle {
    background: var(--positivo);
    border-color: var(--positivo);
}
.stepper-node.is-done .stepper-node__num   { opacity: 0; }
.stepper-node.is-done .stepper-node__check { opacity: 1; color: #fff; }
.stepper-node.is-done .stepper-node__label { color: var(--positivo); }

/* Conector entre pasos */
.stepper-connector {
    flex: 1;
    height: 2px;
    background: color-mix(in srgb, var(--gold) 20%, transparent);
    margin: 0 4px;
    margin-bottom: 20px;
    transition: background 0.3s;
    min-width: 24px;
}
.stepper-connector.is-done { background: var(--positivo); }

/* Pasos del formulario */
.form-step { display: none; }
.form-step.is-active { display: block; animation: stepIn 0.28s ease; }

@keyframes stepIn {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Cabecera de cada paso */
.form-step__head {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.form-step__badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 6px;
}

.form-step__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--cream);
    margin: 0 0 4px;
    line-height: 1.3;
}

.form-step__sub {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* Navegación entre pasos */
.form-step__nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.form-step__nav--end { justify-content: flex-end; }

.btn-step-next {
    flex: 1;
    padding: 14px 20px;
    background: var(--gold);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    letter-spacing: 0.01em;
}
.btn-step-next:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-step-prev {
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--cream);
    border: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}
.btn-step-prev:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

/* Submit dentro del stepper */
.btn-submit-hero--step {
    flex: 1;
    font-size: 15px;
    padding: 14px 16px;
}

/* Selector +/− de cantidad */
.form-qty-group { margin-top: 8px; }

.qty-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    width: fit-content;
    border: 2px solid var(--gold);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 8px 0 4px;
}

.qty-btn {
    width: 44px;
    height: 44px;
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    border: none;
    color: var(--cream);
    font-size: 22px;
    font-weight: 300;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1;
    flex-shrink: 0;
}
.qty-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--gold) 25%, transparent); }
.qty-btn:disabled { opacity: 0.35; cursor: default; }

.qty-display {
    min-width: 52px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--cream);
    background: transparent;
    padding: 0 8px;
    line-height: 44px;
}

/* ============================================================
   FASE 2 — CONVERSIÓN MOBILE: CTA ABOVE THE FOLD
   Objetivo: en un teléfono estándar (390×844px) el H1,
   precio y botón CTA sean visibles sin hacer scroll.
   ============================================================ */
@media (max-width: 767px) {

  /* Announcement bar — tamaño mobile */
  .announcement-bar {
    padding: 21px var(--space-md);
  }
  .announcement-bar__item {
    font-size: 14px;
  }

  /* Testimonios ticker — tarjetas en móvil */
  .testimonios-ticker__card {
    flex: 0 0 220px;
  }
  .testimonios-ticker__track {
    animation-duration: 28s;
  }


  /* Hero: menos padding vertical, elementos más juntos */
  .hero {
    padding-top: 16px !important;
    padding-bottom: 20px !important;
    gap: 16px !important;
  }

  /* Texto del hero: gaps reducidos para compactar */
  .hero-text {
    gap: 10px !important;
  }

  /* H1 más compacto — Playfair a 8.5vw ≈ 33px en 390px */
  .hero-text h1 {
    font-size: clamp(1.65rem, 8.5vw, 2.4rem) !important;
    line-height: 1.13 !important;
    letter-spacing: -0.01em !important;
  }

  /* Subtítulo: Inter 400 muy legible incluso en 14px */
  .hero-subtitle {
    font-size: 14px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.01em !important;
  }

  /* Urgency bar: compacto */
  .hero-urgency-bar {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  /* Price box: reducir padding interno */
  .price-box {
    padding: 10px 14px !important;
    gap: 4px !important;
  }
  .price-box .new {
    font-size: clamp(2rem, 9vw, 2.6rem) !important;
  }
  .price-box .old,
  .price-box .save {
    font-size: 12px !important;
  }

  /* Countdown inline: compacto */
  .hero-countdown-inline {
    padding: 7px 12px !important;
    font-size: 13px !important;
  }
  .countdown-digits {
    font-size: 17px !important;
  }

  /* Trust row debajo del CTA — menos padding */

  /* Imagen hero en mobile: teaser recortado.
     Mismo problema que tenía el vídeo (ver nota abajo): con max-height y
     el ancho fijo en 100%, el 16:9 se rompía un poco en viewports anchos
     (hasta ~3.7% de más recorte cerca de 767px). Con height fijo + width
     auto, aspect-ratio calcula el ancho correcto y centra. */
  .hero-media img {
    height: 52vw !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 180px !important;
    object-position: center 15% !important;
    margin: 0 auto !important;
  }
  /* Video hero en mobile: portrait 9/16, con tope — sin él se come casi
     toda la primera pantalla y el titular, precio y CTA quedan bajo el
     pliegue. Esta es la regla que de verdad manda (!important + más
     tarde en la cascada que la de la línea ~1461).
     OJO: el ancho NO puede quedarse en 100% aquí. Con width:100% fijo +
     max-height, el alto se recorta pero el ancho no lo sigue: la caja
     dejaba de ser 9:16 (verticaly) y quedaba casi cuadrada — el vídeo se
     veía "achatado" hacia lo horizontal en vez de vertical. Fijando el
     ALTO y dejando el ancho en auto, aspect-ratio calcula el ancho
     correcto (9/16 del alto) y el vídeo queda centrado, más angosto que
     el contenedor pero con la proporción real. */
  .hero-media video {
    aspect-ratio: 9 / 16 !important;
    height: 52svh !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: unset !important;
    object-position: center !important;
    margin: 0 auto !important;
  }
}

/* Phones muy pequeños (≤360px): recortar aún más */
@media (max-width: 360px) {
  .hero-text h1 {
    font-size: 1.5rem !important;
  }
  .announcement-bar {
    display: none; /* En pantallas de 360px el espacio es demasiado crítico */
  }
  .para-quien-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   FORMULARIO 3 PASOS — DISEÑO CAMPO (público rural)
   ═══════════════════════════════════════════════════════════ */

/* Icono grande sobre el título de cada paso */
.step-emoji {
    line-height: 1;
    margin-bottom: 8px;
    color: var(--gold);
    display: flex;
    justify-content: center;
    align-items: center;
}
.step-emoji svg { width: 36px; height: 36px; }

/* Labels más grandes y legibles */
.form-label-lg {
    font-size: 16px;
    font-weight: 600;
    color: var(--cream);
    display: block;
    margin-bottom: 8px;
}

/* Inputs más altos y con fuente grande */
.input-lg {
    width: 100%;
    padding: 14px 16px;
    font-size: 17px;
    border-radius: 10px;
    border: 1.5px solid var(--gold-border);
    background: var(--bg-base);
    color: var(--cream);
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.input-lg:focus {
    outline: none;
    border-color: var(--gold);
}
.input-lg::placeholder { color: var(--text-muted); }

/* Selects igual de grandes */
.select-lg {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 10px;
    border: 1.5px solid var(--gold-border);
    background: var(--bg-base);
    color: var(--cream);
    box-sizing: border-box;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}
.select-lg:focus { outline: none; border-color: var(--gold); }

/* Texto de ayuda pequeño debajo de campos */
.field-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.4;
}

/* Botón "Siguiente" más grande y llamativo */
.btn-next-lg {
    width: 100%;
    padding: 16px 24px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 12px;
    background: var(--gold);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    letter-spacing: 0.2px;
}
.btn-next-lg:hover  { opacity: 0.9; }
.btn-next-lg:active { transform: scale(0.98); }

/* Botón submit final — mismo estilo que btn-primary */
.btn-submit-final {
    width: 100%;
    padding: 18px 24px;
    font-size: 17px;
    font-weight: 800;
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, var(--cta-soft) 0%, var(--cta) 60%, color-mix(in srgb, var(--cta) 70%, #000) 100%);
    color: var(--cta-text, #0a0a0a);
    border: none;
    cursor: pointer;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    animation: btn-glow-pulse 2.6s ease-in-out infinite;
    transition: transform 0.1s, opacity 0.2s;
}
.btn-submit-final:hover  { animation-play-state: paused; opacity: 0.92; transform: scale(1.03); }
.btn-submit-final:active { animation-play-state: paused; transform: scale(0.97); }
.btn-submit-final:disabled { animation: none; opacity: 0.6; cursor: default; }

/* ── Color pills ──────────────────────────────────────────── */
.color-row { margin-bottom: 16px; }

/* El grupo "¿Cómo quieres recibirlo?" pasó de <p> + <div> a fieldset/legend
   para que tenga nombre accesible. El navegador le pone borde y padding
   propios: se le quitan para que se vea exactamente igual que antes. */
.form-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-md);
    min-width: 0;
}
.form-fieldset > legend {
    padding: 0;
    display: block;
}

/* La fila ya no lleva un "ELIGE EL COLOR:" encima: el título del bloque
   ("¿Cuál color te gusta?") lo dice y no hace falta repetirlo. Las filas
   extra — las que salen de "quiero otro color diferente" — se separan con
   una línea en vez de con otra etiqueta. */
.color-row + .color-row {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gold-border);
}

.color-pills-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.color-pill {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    border: 2px solid var(--gold-border);
    background: var(--bg-layer2);
    color: var(--cream-dim);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s;
    min-width: 0;
    text-align: center;
    border-radius: 10px;
    position: relative;
    /* 44px es el mínimo recomendado para el dedo — este es el paso donde el
       comprador elige lo que va a pedir, sin margen para toques fallidos. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.color-pill:hover { border-color: var(--gold); color: var(--cream); }
.color-pill.is-selected {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 15%, transparent);
    color: var(--gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent);
}
.color-pill.is-selected::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 7px;
    font-size: 11px;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
}

/* Color y cantidad nativos — es lo que ve quien no tiene JavaScript.
   Nacen visibles desde PHP; initColorRow() los esconde al montar las
   pastillas. Sin esto, un producto con colores era imposible de pedir
   con el JS caído: el servidor exige color y no había control alguno. */
.color-row__nativo {
    display: grid;
    grid-template-columns: 1fr 96px;
    gap: 10px;
    align-items: end;
}
.color-row__nativo-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--cream-dim);
}
.color-row__nativo-campo .select-lg { width: 100%; }

/* Sección de cantidad por color (aparece al seleccionar pill) */
.color-row__qty-wrap {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-base);
    border: 1px solid var(--gold-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.color-row__qty-lbl {
    font-size: 14px;
    font-weight: 600;
    color: var(--cream-dim);
    margin-bottom: 0;
    margin-bottom: 12px;
}

/* ── Cantidad grande (con colores) ───────────────────────── */
.qty-stepper--big {
    display: flex;
    align-items: center;
    gap: 10px;
}
.qty-btn--big {
    width: 42px;
    height: 42px;
    font-size: 22px;
    font-weight: 700;
    border-radius: 50%;
    border: 2px solid var(--gold-border);
    background: var(--bg-layer2);
    color: var(--cream);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.qty-btn--big:hover:not(:disabled) {
    background: color-mix(in srgb, var(--gold) 20%, transparent);
    border-color: var(--gold);
}
.qty-btn--big:disabled { opacity: 0.3; cursor: default; }

.qty-val-big {
    font-size: 26px;
    font-weight: 800;
    color: var(--cream);
    min-width: 32px;
    text-align: center;
}

/* ── Cantidad héroe (sin colores) ────────────────────────── */
.qty-hero-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 0 16px;
}
.qty-stepper--hero {
    display: flex;
    align-items: center;
    gap: 24px;
}
.qty-btn--hero {
    width: 68px;
    height: 68px;
    font-size: 34px;
    font-weight: 700;
    border-radius: 50%;
    border: 2.5px solid var(--gold);
    background: var(--bg-layer2);
    color: var(--gold);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    display: flex; align-items: center; justify-content: center;
}
.qty-btn--hero:hover:not(:disabled) {
    background: color-mix(in srgb, var(--gold) 22%, transparent);
    transform: scale(1.06);
}
.qty-btn--hero:disabled { opacity: 0.3; cursor: default; }

.qty-disp-hero {
    font-size: 56px;
    font-weight: 900;
    color: var(--cream);
    min-width: 72px;
    text-align: center;
    line-height: 1;
    font-family: var(--font-display, serif);
}
.qty-unit-lbl {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ── Resumen de colores seleccionados ────────────────────── */
.btn-add-color-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: 1.5px dashed var(--gold-border);
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    margin-top: 8px;
    transition: border-color 0.15s, background 0.15s;
}
.btn-add-color-row:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }

.btn-remove-color-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
    border: none;
    background: color-mix(in srgb, var(--error) 12%, transparent);
    color: var(--error);
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.15s;
}
.btn-remove-color-row:hover { background: rgba(220, 60, 60, 0.22); }

.color-sel-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--gold) 10%, transparent);
    font-size: 13px;
    color: var(--cream-dim);
    border: 1px solid var(--gold-border);
}

/* ── Preview de precio (paso 2) ──────────────────────────── */
.price-preview-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    border: 1.5px solid var(--gold-border);
    margin: 14px 0 4px;
}
.price-preview-strip__lbl { font-size: 13px; color: var(--cream-dim); }
.price-preview-strip__amt {
    font-size: 20px;
    font-weight: 800;
    color: var(--gold);
    font-family: var(--font-display, serif);
}

/* ── Tarjetas de entrega más grandes (público rural) ─────── */
.radio-group--cards-lg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.radio-card--lg {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 16px 16px;
    gap: 5px;
    border-radius: 14px;
    border: 2.5px solid var(--input-border);
    min-height: 110px;
    position: relative;
    cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s, transform .12s;
    background: var(--input-bg);
}
.radio-card--lg:hover {
    border-color: var(--gold-border);
}

/* ── Checkmark en esquina — oculto por defecto ── */
.radio-card--lg::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--input-border);
    background: transparent;
    transition: background .18s, border-color .18s;
}

/* ── Estado SELECCIONADO ── */
.radio-group--cards-lg .radio-card--lg:has(input:checked),
.radio-group--cards-lg .radio-card--lg.is-checked {
    border-color: var(--gold);
    border-width: 3px;
    background: rgba(230,156,70,.13);
    box-shadow: 0 0 0 4px rgba(230,156,70,.18);
    transform: scale(1.02);
}
.radio-group--cards-lg .radio-card--lg:has(input:checked)::after,
.radio-group--cards-lg .radio-card--lg.is-checked::after {
    background: var(--gold);
    border-color: var(--gold);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpolyline points='2 7 6 11 12 3' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
}

.radio-card--lg .radio-card__icon {
    line-height: 1;
    margin-bottom: 2px;
    color: var(--gold);
}
.radio-card__main {
    font-size: 15px;
    font-weight: 700;
    color: var(--cream);
    line-height: 1.25;
    letter-spacing: -.01em;
}
.radio-card__note {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.3;
}
.radio-group--cards-lg .radio-card--lg:has(input:checked) .radio-card__main,
.radio-group--cards-lg .radio-card--lg.is-checked .radio-card__main {
    color: var(--gold);
    font-weight: 800;
}
.radio-group--cards-lg .radio-card--lg:has(input:checked) .radio-card__note,
.radio-group--cards-lg .radio-card--lg.is-checked .radio-card__note {
    /* --gold-border es para bordes: en la mayoría de temas es un tinte
       semitransparente y se nota poco como texto, pero en Midnight Amber
       es un azul oscuro sólido casi idéntico al fondo de la tarjeta
       seleccionada — el texto quedaba invisible. --gold-light (el acento
       del tema) sí está pensado para ser un color visible. */
    color: var(--gold-light);
    font-weight: 600;
}

/* Tag "opcional" en labels */
.tag-optional {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

/* Nav del paso de submit: botón atrás + submit en columna */
.form-step__nav--submit {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.form-step__nav--submit .btn-step-prev {
    align-self: flex-start;
    font-size: 14px;
}

/* Mobile: radio cards de entrega en columna en pantallas muy pequeñas */
@media (max-width: 360px) {
    .radio-group--cards-lg { grid-template-columns: 1fr; }
    .qty-btn--hero  { width: 58px; height: 58px; font-size: 28px; }
    .qty-disp-hero  { font-size: 46px; }
    .btn-next-lg    { font-size: 16px; padding: 14px 20px; }
    .btn-submit-final { font-size: 15px; padding: 16px 20px; }
}

/* ============================================================
   VISUAL REFRESH — tipografía fuerte, checkmarks verdes
   Inspirado en tarjetas de referencia, Mayo 2026
   ============================================================ */

/* ── BENEFIT ITEMS: checkmark verde en lugar de diamante ───── */
.benefit-item::before {
    content: '✓' !important;
    color: var(--positivo) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.35;
    margin-top: 0 !important;
}

/* Benefit text: más legible, un toque más grande */
.benefit-item {
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: var(--cream) !important;
}

/* ── SECTION TITLE: 800, letra ajustada, underline sólido ─── */
/* (El peso y el letter-spacing que había aquí, y la tercera versión de
   la línea dorada, se consolidaron en la definición única de
   .section-title más arriba.) */

/* El bloque `.price-box .old` que vivía aquí lo pisaba entero otro más
   abajo ("Precio viejo: tachado, solo, encima del precio grande"), que
   es el que manda. Se quita para no dejar dos reglas peleando por lo
   mismo. */

/* ── PRICE SAVE BADGE: más gordo, más impacto ─────────────── */
.price-box .save {
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 5px 16px !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── STEP NUM: tamaño más contenido para que no sature ─────── */
.step-num {
    font-size: 3.2rem !important;
}

/* ── STEP CARD H3: más peso ─────────────────────────────────── */
.step-card h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

/* ============================================================
   PRICE BOX REDESIGN — limpio, directo, sin ambigüedad
   ============================================================ */

/* El price-box ya era la receta buena antes de que existiera el sistema:
   sin borde y con la sombra llevando la profundidad. Ahora sale de los
   mismos tokens que el resto, para que un cambio en la medida única lo
   arrastre a él también y no se quede descolgado. */
.price-box {
    background: var(--card-bg) !important;
    border: var(--card-border) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    padding: 18px 20px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    position: relative !important;
    overflow: visible !important;
    width: 100% !important;
    text-align: center !important;
}

/* Quitar la línea decorativa superior */
.price-box::before { display: none !important; }

/* CTA dentro del price-box ocupa todo el ancho */
.price-box .btn-primary {
    align-self: stretch !important;
    width: 100% !important;
}

/* Label: pill pequeño de acento arriba */
.price-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--gold) !important;
    margin-bottom: 2px !important;
}

/* Badge "Ahorras": pill prominente debajo del label */
.price-box .save {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    /* Sobre verde el blanco pasaba justo; sobre el ámbar del acento se
       queda en ~2:1 y la pastilla se lee como una mancha. El texto va en
       el color del fondo de la página, que es lo que contrasta. */
    color: var(--bg-base) !important;
    background: var(--positivo) !important;
    border-radius: 999px !important;
    padding: 4px 14px !important;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center !important;
    margin-bottom: 2px !important;
}

/* Precio viejo: tachado, solo, encima del precio grande.
   Es el precio ancla — el que sostiene todo el argumento del descuento —
   así que tiene que LEERSE. Antes llevaba --cream-muted y encima un
   opacity 0.65, que multiplicaban hasta dejarlo en ~3:1 de contraste:
   invisible en un celular a la luz del día. Un solo nivel de atenuación
   con --cream-dim basta para que se lea como secundario sin desaparecer. */
.price-box .old {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--cream-dim) !important;
    text-decoration: line-through !important;
    line-height: 1 !important;
}

/* Precio nuevo: enorme, sin prefijo */
.price-box .new {
    font-family: var(--font-body) !important;
    font-size: clamp(2.4rem, 10vw, 3.2rem) !important;
    font-weight: 900 !important;
    color: var(--cream) !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
    margin: 2px 0 8px !important;
}

/* Countdown: compacto, dígitos urgentes en rojo/naranja */
.hero-countdown-inline {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 7px 12px !important;
    margin-top: 0 !important;
}

.countdown-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--cream-dim) !important;
    white-space: nowrap;
}

/* El contador iba en rojo fijo, que era un quinto color en pantalla sin
   ningún papel — no marca un error, marca urgencia. Cada tema ya define
   --countdown-color para eso. */
.countdown-digits {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--countdown-color, var(--gold-light)) !important;
    letter-spacing: 0.04em !important;
    font-variant-numeric: tabular-nums !important;
}

@media (max-width: 480px) {
    .price-box { padding: 16px 16px 12px !important; }
    .price-box .new { font-size: clamp(2.2rem, 12vw, 2.8rem) !important; }
}

/* ============================================================
   PORQUE CARD — imagen arriba, contenido abajo (estilo reveal)
   ============================================================ */

.porque-section {
    display: flex;
    justify-content: center;
}

.porque-card {
    background: var(--bg-layer2);
    border: none;
    border-radius: 20px;
    overflow: hidden;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 2px 16px rgba(0,0,0,0.13);
}

/* Imagen / video arriba — full width, sin bordes */
.porque-card__media {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--bg-layer3);
}

.porque-card__media img,
.porque-card__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Cuerpo: padding generoso, limpio */
.porque-card__body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Título: bold, grande */
.porque-card__title {
    font-family: var(--font-body);
    font-size: clamp(1.15rem, 4vw, 1.45rem);
    font-weight: 800;
    color: var(--cream);
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Descripción: pequeña y gris */
.porque-card__desc {
    font-size: 14px;
    color: var(--cream-dim);
    line-height: 1.55;
    margin: 0;
}

/* Lista: ✓ verde, sin viñetas */
.porque-card__list {
    list-style: none;
    padding: 0;
    margin: 2px 0 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.porque-card__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cream);
    line-height: 1.3;
}

.porque-card__list li::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--positivo);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 8px;
}

@media (min-width: 640px) {
    .porque-card { max-width: 520px; }
}

/* ============================================================
   BENEFIT CARDS — layout de tarjetas horizontales con foto
   ============================================================ */

/* Contenedor exterior: fondo sutil + padding generoso */
.benefit-cards-outer {
    background: var(--bg-layer1);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    box-shadow: 0 2px 16px rgba(0,0,0,0.13);
}

/* Título dentro del outer */
.benefit-cards-outer .section-title {
    margin-bottom: var(--space-md) !important;
}

/* Grilla 2×2 */
.benefit-cards-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Tarjeta vertical: imagen arriba, texto abajo */
.benefit-card-h {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-layer2);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 8px rgba(0,0,0,0.10);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.benefit-card-h:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    transform: translateY(-2px);
}

/* Imagen: ocupa todo el ancho, ratio cuadrado */
.benefit-card-h__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    overflow: hidden;
}

.benefit-card-h__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.benefit-card-h:hover .benefit-card-h__img img {
    transform: scale(1.05);
}

/* Texto: debajo de la imagen */
.benefit-card-h__text {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--cream);
    line-height: 1.45;
    padding: 10px 12px 14px;
    text-align: center;
}

/* Sin foto: texto centrado con altura mínima */
.benefit-card-h:not(:has(.benefit-card-h__img)) {
    justify-content: center;
    min-height: 110px;
    padding: 18px 14px;
}

.benefit-card-h .benefit-item::before { display: none; }

@media (max-width: 480px) {
    .benefit-cards-outer { padding: var(--space-md) 10px; }
    .benefit-card-h__text { font-size: 12px; padding: 8px 10px 12px; }
}

/* ============================================================
   PORQUE — tagline + benefit cards grid
   ============================================================ */

/* Tagline corto — reemplaza el párrafo libre multilinea */
.porque-card__tagline {
    font-size: 14px;
    color: var(--cream-dim);
    line-height: 1.5;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Grid de mini-cards: 1 columna en mobile, 3 en desktop */
.porque-benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 8px 0 12px;
}

@media (min-width: 480px) {
    .porque-benefits-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* Tarjeta individual de beneficio */
.porque-benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    background: var(--bg-layer3);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 8px rgba(0,0,0,0.10);
    padding: 16px 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.porque-benefit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

.porque-benefit-card__num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--btn-text, #0a0a0a);
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.porque-benefit-card__text {
    font-size: 13px;
    font-weight: 700;
    color: var(--cream);
    line-height: 1.35;
}

/* En mobile: horizontal (icono izq, texto der) */
@media (max-width: 479px) {
    .porque-benefit-card {
        flex-direction: row;
        text-align: left;
        padding: 12px 14px;
    }
    .porque-benefit-card__num { width: 28px; height: 28px; font-size: 13px; }
}

/* ============================================================
   GARANTÍA — grid de cards, sin párrafo
   ============================================================ */

/* Una columna en móvil. Como rejilla de dos, cada frase se quedaba con
   unos 120px de ancho útil una vez descontado el chip del icono, y
   "Pagas solo cuando recibes el producto en tus manos" se partía en
   cuatro o cinco líneas. Desde tablet sí caben dos. */
.garantia-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin-top: 4px;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}

@media (min-width: 640px) {
    .garantia-cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 18px;
    }
}

@media (max-width: 400px) {
    .garantia-cards-grid { grid-template-columns: 1fr; }
}

/* Fila de lista, no tarjeta.
   Estos cuatro ítems vivían dentro de .garantia-inner, que ya es una
   tarjeta — y como ambos usaban --card-bg, eran cuatro cajas del mismo
   color dentro de una caja del mismo color, separadas sólo por su
   sombra. En los temas claros, con sombra al 10%, quedaban planas del
   todo.
   Cuatro viñetas de una línea no necesitan ser tarjetas: el panel ya es
   la tarjeta. Lo que las ancla visualmente es el chip del icono, que se
   conserva. Sin fondo, sin borde y sin sombra propias. */
.garantia-card {
    display: flex;
    align-items: center;
    gap: 11px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 4px 0;
    font-size: 13.5px;
    font-weight: 500;
    /* Color pleno, no atenuado: con --cream-dim el tema "salud" se
       quedaba en 4,3:1, por debajo del mínimo legible. Y son argumentos
       de venta — lo que convence de pagar contraentrega —, no texto
       secundario. El peso 500 ya basta para que se lean como lista. */
    color: var(--cream);
    line-height: 1.4;
    text-align: left;
}
.garantia-card__icon {
    display: flex;
    flex-shrink: 0;
    color: var(--gold);
}

/* ============================================================
   COMPARISON — icono por fila individual
   ============================================================ */

.comparison-row-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}

/* ============================================================
   PRICE BOX — CTA dentro del box, countdown debajo
   ============================================================ */

/* El btn-primary dentro del price-box ocupa todo el ancho */
.price-box .btn-primary {
    display: block;
    width: 100%;
    margin: 12px 0 4px;
    box-sizing: border-box;
}

/* ============================================================
   ANTES Y DESPUÉS — pill flotante sobre la imagen
   ============================================================ */

.ayd-wrap {
    max-width: 440px;
    margin-inline: auto;
}

/* Contenedor de imagen: ambas fotos apiladas */
.ayd-media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: 0 8px 36px rgba(0,0,0,0.25);
}

.ayd-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.32s ease;
    pointer-events: none;
}

.ayd-img--visible { opacity: 1; }

/* Pill flotante centrada sobre el borde inferior de la foto */
.ayd-pills {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
    white-space: nowrap;
}

/* Cada botón dentro del pill */
.ayd-pill {
    padding: 9px 22px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1;
}

/* Activo: usa el color primario del tema — cero hardcode */
.ayd-pill.is-active {
    background: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════════════════════════════
   CARACTERÍSTICAS — CAROUSEL
══════════════════════════════════════════════════════════ */
.caract-section {
    padding-block: var(--space-2xl);
}

.caract-slider {
    position: relative;
    max-width: 500px;
    margin-inline: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    -webkit-mask-image: linear-gradient(to right, black 80%, rgba(0,0,0,0.35) 95%, transparent 100%);
    mask-image: linear-gradient(to right, black 80%, rgba(0,0,0,0.35) 95%, transparent 100%);
}

.caract-slider::-webkit-scrollbar { display: none; }

.caract-slider:active { cursor: grabbing; }

.caract-track {
    display: flex;
    gap: 14px;
    width: max-content;
    padding-inline: 8px;
}

.caract-slide {
    flex: 0 0 78vw;
    max-width: 380px;
    scroll-snap-align: start;
    background: var(--bg-card, rgba(255,255,255,0.05));
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--gold-border);
}

.caract-media {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--bg-layer2);
    display: block;
    position: relative;
}

.caract-media img,
.caract-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Wrapper de video con controles ── */
.caract-video-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.caract-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Área invisible de tap para pause/play */
.caract-video-tap {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
}

/* Overlay de pausa — círculo con triángulo */
.caract-play-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.28);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.caract-play-overlay svg {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.caract-video-wrap.is-paused .caract-play-overlay {
    opacity: 1;
}

/* Botón de volumen — frosted glass, esquina superior derecha */
.caract-vol-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
    padding: 0;
}

.caract-vol-btn:hover {
    background: rgba(0, 0, 0, 0.65);
    transform: scale(1.1);
}

.caract-vol-btn:active {
    transform: scale(0.95);
}

/* Estado muted (default): mostrar X, ocultar ondas */
.caract-vol-icon--sound { display: none; }
.caract-vol-icon--muted { display: flex; }

.caract-vol-btn.is-unmuted .caract-vol-icon--sound { display: flex; }
.caract-vol-btn.is-unmuted .caract-vol-icon--muted  { display: none; }

.caract-body {
    padding: 20px 20px 24px;
}

.caract-title {
    font-family: var(--font-display);
    font-size: clamp(1rem, 3.5vw, 1.1rem);
    font-weight: 700;
    color: var(--cream);
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    line-height: 1.25;
}

.caract-text {
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 400;
    color: var(--cream-dim);
    line-height: 1.7;
    margin: 0;
    opacity: 0.9;
}

/* ── Hint de deslizar ─────────────────────────────────────── */
.caract-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 0 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--cream-muted);
    user-select: none;
}


/* Zona pulsable mínima de 44px sin agrandar el icono.
   OJO: aquí había un position:relative que pisaba el position:absolute
   de arriba y sacaba el botón de encima del video — en el hero caía
   abajo a la izquierda y en "por qué te encantará" desaparecía, porque
   ese contenedor recorta lo que se sale. El ::after no lo necesita: el
   propio botón ya es un ancestro posicionado. */
.caract-vol-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* Pantallas muy estrechas: las etiquetas del stepper (white-space:nowrap)
   se salían del modal y quedaban cortadas contra el borde. */
@media (max-width: 360px) {
    .stepper-node__label {
        font-size: 10px;
        gap: 2px;
    }
    .stepper-node__label svg,
    .stepper-node__label i {
        display: none;
    }
}

/* El pie iba en #575757 sobre #050505 (2.8:1) */
.footer-text { color: #9AA3A6; }

/* ══════════════════════════════════════════════════════════════
   BOTÓN DE VOLUMEN — descubrible, no adivinable
   Los videos arrancan mudos (autoplay con sonido lo bloquean los
   navegadores, y sonido sorpresa espanta al que llega desde Facebook).
   El problema es que un icono gris de 34px no le dice a nadie que ese
   video TIENE audio: el argumento de venta se pierde. Mientras está
   mudo el botón se abre en pastilla con texto; al activar el sonido se
   recoge al icono redondo de siempre.
   ══════════════════════════════════════════════════════════════ */
.caract-vol-btn {
    width: auto;
    min-width: 40px;
    height: 40px;
    padding: 0 12px 0 9px;
    gap: 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
}

/* El círculo se ve de 40px, pero el dedo necesita 44 y este botón es el
   que enciende el audio del video del hero — el creativo por el que se
   paga el anuncio. Se agranda el área táctil sin tocar el diseño. */
.caract-vol-btn::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
}

.caract-vol-btn__txt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: #fff;
}

/* Con el sonido ya activado sobra el texto: vuelve al círculo */
.caract-vol-btn.is-unmuted {
    width: 40px;
    min-width: 0;
    padding: 0;
    gap: 0;
    background: rgba(0, 0, 0, 0.42);
}

.caract-vol-btn.is-unmuted .caract-vol-btn__txt {
    display: none;
}

/* En el carrusel de características hay varios videos a la vez y el
   espacio es corto: ahí basta el icono. */
.caract-section .caract-vol-btn {
    width: 40px;
    min-width: 0;
    padding: 0;
    gap: 0;
}

.caract-section .caract-vol-btn__txt {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .caract-vol-btn:not(.is-unmuted) {
        animation: vol-llamada 4s ease-in-out 1.5s 3;
    }
    @keyframes vol-llamada {
        0%, 82%, 100% { transform: scale(1); }
        88%           { transform: scale(1.08); }
        94%           { transform: scale(0.98); }
    }
}


/* ══════════════════════════════════════════════════════════════
   CAPA VISUAL — SISTEMA DE TARJETAS
   ══════════════════════════════════════════════════════════════
   Qué problema resuelve
   ---------------------
   La landing tenía 14 tarjetas con 5 fondos, 3 radios y 8 paddings
   distintos. Al bajar por la página cada bloque traía su propia caja,
   su propio margen y su propia alineación, y el conjunto se leía como
   una maqueta de periódico en vez de como un producto.
   La referencia visual que perseguimos no usa colores más bonitos:
   usa UNA medida para todo. Eso es lo que se monta aquí.

   Cómo está montado
   -----------------
   Dos niveles, y la distinción importa:

   1. LA CAJA — fondo, borde, radio y sombra. Esto sí es medida única:
      idéntico en las catorce tarjetas, sin excepción. Es lo que hace
      que al bajar por la página todo parezca la misma familia.

   2. EL RELLENO — depende de cuánto contenido lleva cada tarjeta. Una
      ficha de estadística necesita respirar; una viñeta de garantía de
      una línea, no. Forzar el mismo padding a las dos no da unidad, da
      huecos raros. La referencia hace lo mismo: p-4, p-5 y p-6 según
      densidad, pero un solo borde y un solo fondo.

   Las tarjetas con estructura interna propia — el carrusel, el
   acordeón, las capturas de WhatsApp, el regalo — no reciben padding
   aquí: lo reparten sus propias partes. Sí reciben la caja.
   ══════════════════════════════════════════════════════════════ */

/* ── NIVEL 1 · LA CAJA — las catorce, sin excepción ───────── */
.benefit-card-h,
.testimonios-ticker__card,
.step-card,
.caract-slide,
.wa-ticker__card,
.accordion-item,
.offer-anchor,
.para-quien-card,
.regalo-card,
.authority-stat,
.porque-benefit-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

/* ── NIVEL 2 · EL RELLENO, por densidad ───────────────────── */

/* Estándar: texto de párrafo dentro de la caja.
   Beneficios queda fuera a propósito: su foto va a sangre, hasta el
   borde de la tarjeta, así que el relleno lo pone el texto y no la
   caja. Ver el bloque BENEFICIOS más abajo. */
.testimonios-ticker__card,
.step-card,
.para-quien-card,
.offer-anchor {
    padding: var(--card-pad);
}

/* Holgado: la ficha de estadística ya trae su propio relleno con
   !important más arriba (28px 16px) porque una cifra grande sola
   necesita aire. No se repite aquí para no dejar dos reglas peleando
   por lo mismo — que es justo el problema del que venimos. */

/* Denso: viñetas de una o dos líneas */
.porque-benefit-card {
    padding: 13px 15px;
}

/* ── Excepciones deliberadas ──────────────────────────────── */

/* "Es para ti" conserva su tinte: aquí el color no decora, informa —
   es una comparación y el lado bueno tiene que distinguirse. El lado
   malo se queda con la caja neutra. Va después del nivel 1 porque si
   no, el fondo de la medida única le borraría el tinte. */
.para-quien-card--yes {
    background: color-mix(in srgb, var(--positivo) 7%, var(--card-bg));
}

/* El regalo y el formulario son las dos piezas que deben destacar sobre
   el resto, así que además de la caja llevan el halo del acento. Es la
   variante "destacada" del sistema, no una tarjeta distinta. */
.regalo-card,
.form-box {
    box-shadow: var(--card-shadow), 0 0 60px color-mix(in srgb, var(--gold) 8%, transparent);
}

/* Dentro de una tarjeta el texto va a la izquierda: el texto centrado
   dentro de una caja es lo que hace que un bloque parezca una columna
   de periódico y no una ficha de producto.
   El pie de foto de beneficios es la excepción — son una o dos líneas
   bajo una imagen a sangre, y ahí centrado equilibra la tarjeta en vez
   de descolgarse a un lado. */
.testimonios-ticker__text {
    text-align: left;
}


/* ── BENEFICIOS ───────────────────────────────────────────────
   Rejilla 2×2 con la foto grande arriba y el pie de foto debajo, en
   todos los tamaños. Se probó la disposición horizontal — miniatura de
   56px a la izquierda, texto a la derecha — y aunque encaja mejor con
   la referencia visual, esa referencia usa ICONOS y esta sección usa
   FOTOS de producto. Una foto reducida a un chip de 56px no se ve, y
   aquí la foto es el argumento: enseña el producto en uso.
   Así que la caja sí sale del sistema (fondo, radio y sombra), pero la
   disposición la manda el contenido.

   La tarjeta no lleva padding a propósito: la foto tiene que llegar
   hasta el borde. El relleno lo pone el texto. */
.benefit-card-h {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
}

.benefit-card-h__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 0;
    overflow: hidden;
}

.benefit-card-h__text {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--cream);
    padding: 11px 12px 14px;
    text-align: center;
}

/* Sin foto no hay nada que enmarcar: la tarjeta se centra y recupera un
   alto mínimo para que no quede una pastilla aplastada junto a las que
   sí llevan imagen. */
.benefit-card-h:not(:has(.benefit-card-h__img)) {
    justify-content: center;
    min-height: 110px;
    padding: 16px 14px;
}

.benefit-cards-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--card-gap);
}


/* ── TESTIMONIOS ──────────────────────────────────────────────
   Se retira la comilla decorativa de 64px: es un recurso de revista y
   además chocaba con las comillas rectas que el texto ya lleva.
   La firma se separa con una línea fina, como en la referencia. */
.testimonios-ticker__qmark {
    display: none;
}

.testimonios-ticker__card {
    gap: 8px;
}

.testimonios-ticker__stars {
    color: var(--gold);
    font-size: 13px;
}

.testimonios-ticker__text {
    color: var(--cream-dim);
    font-size: 13.5px;
    font-weight: 400;
}

/* El separador de la firma sale del color del texto, no del borde de la
   tarjeta: dentro de una caja sin contorno, una línea a tono se lee como
   una pausa; una línea clara vuelve a dibujar una caja. */
.testimonios-ticker__author {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--cream) 10%, transparent);
}

/* Sin anillo alrededor de la foto: era otro contorno claro más, y a 32px
   el aro se come parte de la cara. */
.testimonios-ticker__avatar {
    width: 32px;
    height: 32px;
    border: none;
}

.testimonios-ticker__name {
    color: var(--gold);
    font-size: 12.5px;
    font-weight: 600;
}


/* ── CHIP DE ICONO ────────────────────────────────────────────
   Envuelve un SVG suelto en un cuadrado redondeado con fondo propio.
   Es el gesto que más separa "interfaz de producto" de "documento":
   sin él los iconos flotan pegados al texto sin peso visual.
   Se declara aquí para toda la página aunque de momento sólo lo usen
   las secciones de la muestra. */
.chip-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--chip-size);
    height: var(--chip-size);
    flex-shrink: 0;
    border-radius: var(--chip-radius);
    background: var(--chip-bg);
    color: var(--gold);
}

.chip-ico svg {
    width: 20px;
    height: 20px;
}


/* ══════════════════════════════════════════════════════════════
   CAPA VISUAL — PALETA SEMÁNTICA
   ══════════════════════════════════════════════════════════════
   Qué problema resuelve
   ---------------------
   Había 37 colores escritos a mano fuera de los temas: siete verdes
   distintos, cinco rojos y dos ámbares casi idénticos conviviendo en
   la misma pantalla. Nadie los eligió juntos — se fueron acumulando
   uno por parche. El ojo no los distingue como intención, los lee como
   desorden.
   A partir de aquí el color tiene tres papeles y uno solo por papel:

     var(--positivo) todo lo que confirma o tranquiliza
     var(--error)    contraste: sólo la columna negativa de comparación

   Cualquier color nuevo debe entrar por uno de estos dos. Si no encaja
   en ninguno, casi siempre significa que no hacía falta.
   ══════════════════════════════════════════════════════════════ */

/* ── EL ACENTO ÚNICO ──────────────────────────────────────────
   --positivo es un papel, no un color: "esto confirma, esto está
   bien, esto te conviene". Apunta al acento del tema porque la paleta
   se colapsó a un solo acento, como en la referencia visual.

   Antes este papel lo hacía el verde, y convivía con el ámbar en la
   misma pantalla: la pastilla de "Envío GRATIS" verde justo al lado de
   la de "Pagas al recibir" ámbar, los ✓ verdes bajo un título ámbar.
   Dos acentos compitiendo no dan el doble de énfasis — dan la mitad,
   porque ya no hay un solo sitio donde mire el ojo.

   Para recuperar el verde basta cambiar esta línea por
   var(--positivo), que cada tema sigue definiendo. Nada más. */
:root {
  --positivo: var(--gold);

  /* ── EL ACENTO DE ACCIÓN ────────────────────────────────────
     --gold decora: títulos, iconos, estrellas, eyebrows.
     --cta acciona: existe SÓLO en los botones de compra.

     Es la diferencia entre "mira aquí" y "toca aquí". Cuando el botón
     lleva el mismo color que los títulos, las estrellas y los chips, el
     ojo deja de distinguirlo del decorado — hay ámbar por todas partes
     y ninguno manda. Reservar un color exclusivo para el botón lo hace
     imposible de no ver, sin subir el tamaño ni añadir animación.

     Por defecto vale lo mismo que --gold, así que los ocho temas que ya
     estaban no cambian ni un píxel. Un tema activa el acento de acción
     definiendo su propio --cta, como hace midnight-amber.

     Los valores por defecto NO viven aquí, sino en el bloque de tokens
     del principio del archivo, porque tienen que ir ANTES que los temas:
     este :root está al final y en la cascada pesa lo mismo que un
     [data-theme], así que ganaría por orden y anularía el naranja. */
}

/* Los círculos de los SVG (✓ y ✗) llevaban #4caf7d y #e05c5c escritos
   dentro del marcado, así que ignoraban el tema por completo. Ahora
   heredan con currentColor y el color se decide aquí. */
.para-quien-card--yes .para-quien-card__icon,
.comparison-col--with .comparison-row-icon {
    color: var(--positivo);
}

.para-quien-card--no .para-quien-card__icon,
.comparison-col--without .comparison-row-icon {
    color: var(--error);
}

/* Las estrellas iban en var(--gold), un ámbar distinto del ámbar del tema.
   Dos naranjas casi iguales a diez píxeles de distancia es exactamente
   lo que hace que una paleta se vea sucia. */
.testimonios-ticker__stars,
.wa-ticker__stars {
    color: var(--gold);
}


/* ══════════════════════════════════════════════════════════════
   CAPA VISUAL — CHIPS DE ICONO
   ══════════════════════════════════════════════════════════════
   Los iconos de "cómo funciona", "garantía" y "para quién es" flotaban
   sueltos pegados al texto, sin tamaño ni fondo definidos. Un SVG suelto
   no tiene peso visual: se lee como un adorno del párrafo, no como un
   elemento de la interfaz.
   Envolverlo en un cuadrado redondeado con fondo propio es lo que separa
   "documento" de "producto", y es el gesto que más se repite en la
   referencia. Reutiliza los tokens --chip-* del principio del archivo.
   ══════════════════════════════════════════════════════════════ */
.step-icon-wrap,
.garantia-card__icon,
.para-quien-card__icon,
.authority-stat__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--chip-size);
    height: var(--chip-size);
    flex-shrink: 0;
    border-radius: var(--chip-radius);
    background: var(--chip-bg);
    color: var(--gold);
}

.step-icon-wrap svg,
.garantia-card__icon svg,
.para-quien-card__icon svg,
.authority-stat__ico svg {
    width: 20px;
    height: 20px;
}

/* Los círculos ✓ y ✗ de "para quién es" ya traen su propio color de
   fondo dentro del SVG, así que el chip iría de más: se quedan a tamaño
   completo y sin cuadrado detrás. */
.para-quien-card__icon {
    background: transparent;
    width: auto;
    height: auto;
}

.para-quien-card__icon svg {
    width: 26px;
    height: 26px;
}

/* Los pasos son la única sección con el icono centrado sobre el texto:
   ahí el chip necesita separarse del título. */
.step-icon-wrap {
    margin-bottom: 10px;
}


/* ══════════════════════════════════════════════════════════════
   CAPA VISUAL — TEXTO A LA IZQUIERDA DENTRO DE LA TARJETA
   ══════════════════════════════════════════════════════════════
   Se centra la CABECERA de sección; el contenido de una tarjeta va
   pegado a la izquierda. Un párrafo centrado dentro de una caja obliga
   al ojo a buscar dónde empieza cada línea, y es lo que da el aire de
   columna de periódico que queríamos quitar.
   Las excepciones son deliberadas: la ficha de estadística (una cifra
   sola), el price-box y el bloque de oferta se quedan centrados, porque
   ahí el contenido es un dato único y no un texto que se lee.
   ══════════════════════════════════════════════════════════════ */
.step-card,
.porque-benefit-card,
.para-quien-card,
.caract-body,
.wa-ticker__content {
    text-align: left;
}


/* ══════════════════════════════════════════════════════════════
   CAPA VISUAL — CABECERA DE SECCIÓN
   ══════════════════════════════════════════════════════════════
   .section-header y .subtitle se usaban en el marcado pero no tenían
   una sola línea de CSS. El resultado: el subtítulo de la sección de
   WhatsApp era un párrafo desnudo — a todo color, del tamaño del texto
   corrido y alineado a la izquierda mientras el título iba centrado.
   Competía con el título en vez de acompañarlo.
   Aquí queda la cabecera completa en un solo patrón: eyebrow, título y
   subtítulo. Cualquier sección puede usarla.
   ══════════════════════════════════════════════════════════════ */
.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--space-lg);
}

/* Dentro de la cabecera el título ya no necesita su margen propio: la
   separación la reparte el flex, y así el subtítulo queda pegado a su
   título y no flotando a medio camino del siguiente bloque. */
.section-header .section-title {
    margin-bottom: 0;
}

.section-header .section-eyebrow {
    margin-bottom: 8px;
}

.subtitle {
    max-width: 46ch;
    margin: 10px auto 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--cream-dim);
    text-align: center;
}


/* ══════════════════════════════════════════════════════════════
   CAPA VISUAL — PASTILLAS DE COLOR DE LA GALERÍA
   ══════════════════════════════════════════════════════════════
   Estaban montadas como un radio button de formulario: un aro hueco
   que se rellenaba de ámbar al seleccionarlo, más el nombre al lado,
   todo dentro de una pastilla con borde de 1,5px. Tres formas anidadas
   para decir una cosa — y el ámbar era el mismo en las cuatro, así que
   el comprador leía "Vino tinto" pero no veía nada vino tinto, teniendo
   el dato guardado a mano en color_variants.
   Ahora el punto lleva el color real y la pastilla se apoya en el mismo
   lenguaje que el resto: sin borde, el estado activo por anillo de
   acento y fondo teñido.
   ══════════════════════════════════════════════════════════════ */
.gallery-color-pills__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    opacity: 1;
    color: var(--cream-muted);
}

.gallery-color-pill {
    gap: 9px;
    padding: 8px 15px 8px 9px;
    border: none;
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cream-dim);
    transition: color 0.18s, box-shadow 0.18s, background 0.18s;
}

/* El estado activo se marca con un anillo, no con un borde: así la
   pastilla no cambia de tamaño al seleccionarla y la fila no baila. */
.gallery-color-pill.is-active {
    background: color-mix(in srgb, var(--gold) 12%, var(--card-bg));
    color: var(--cream);
    box-shadow: inset 0 0 0 1.5px var(--gold), var(--card-shadow);
}

@media (hover: hover) {
    .gallery-color-pill:hover {
        box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 45%, transparent), var(--card-shadow);
    }
}

/* La muestra: el color de la variante, con un aro tenue para que un
   color casi negro o casi blanco no desaparezca sobre la pastilla. */
.gallery-color-pill__swatch {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--cv-color, var(--gold));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream) 22%, transparent);
}

.gallery-color-pill.is-active .gallery-color-pill__swatch {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--cream) 22%, transparent),
        0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent);
}


/* ══════════════════════════════════════════════════════════════
   CAPA VISUAL — SEÑALES DE CONFIANZA DEL HERO
   ══════════════════════════════════════════════════════════════
   "Pago al recibir · Envío gratis · Cambios sin problema" vivían al pie
   del price-box, apretadas en una pastilla fina de una sola línea con
   fondo translúcido y borde: los tres argumentos que sostienen una venta
   contraentrega compitiendo por el mismo renglón, en letra de 11px.

   Suben al hero, debajo del titular, y adoptan el MISMO formato que las
   tarjetas de "por qué te encantará" — de ahí que estos valores sean los
   de .porque-benefit-card y no unos nuevos. Si algún día cambia aquella,
   esta tiene que cambiar con ella.

   La diferencia deliberada: allí el círculo lleva un número de orden;
   aquí lleva el icono. Estas tres no son pasos de una secuencia, así que
   numerarlas mentiría sobre lo que son.
   ══════════════════════════════════════════════════════════════ */
.hero-trust-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 4px 0 0;
    width: 100%;
}

.hero-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 13px 15px;
}

/* El círculo del icono ocupa el lugar del número en la otra sección, con
   su mismo tamaño y su mismo relleno de acento. */
.hero-trust-item__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--btn-text, #0a0a0a);
    flex-shrink: 0;
}

.hero-trust-item__ico svg {
    width: 16px;
    height: 16px;
}

.hero-trust-item__text {
    font-size: 13px;
    font-weight: 700;
    color: var(--cream);
    line-height: 1.35;
}

/* Bajo 480px la tarjeta se tumba: icono a la izquierda, texto a la
   derecha. Es el mismo corte y el mismo comportamiento que usa
   .porque-benefit-card, para que las dos secciones respiren igual. */
@media (max-width: 479px) {
    .hero-trust-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hero-trust-item {
        flex-direction: row;
        text-align: left;
        padding: 12px 14px;
    }

    .hero-trust-item__ico {
        width: 28px;
        height: 28px;
    }

    .hero-trust-item__ico svg {
        width: 14px;
        height: 14px;
    }
}