/* =============================================================================
   MI CUEVA — hoja de estilos única
   -----------------------------------------------------------------------------
   Idea rectora: "el color del sello APROBADO es el color del botón de comprar".
   El lima #C9F24D SOLO aparece en: sello aprobado, CTA primario, precio final y
   acento del titular. Nada más. Si el lima está en todas partes, deja de
   significar "aprobado".

   Escena: habitación pequeña, de noche, con la luz buena encendida.
   Base = negro marrón cálido (#141210), nunca #000. Calor por neutros (arena),
   frío/eléctrico solo en el acento.

   Orden del archivo:
     00. Tokens (:root)
     01. Reset y base
     02. Utilidades y accesibilidad
     03. Tipografía y secciones
     04. Botones (CTA) y el sello
     05. Header / navegación
     06. Hero (home)
     07. Pasos del sello
     08. Barra de confianza + logos de pago
     09. Grid de productos y LOS TRES ESTADOS
     10. Preventa (contador + barra)
     11. Roto en el test (teaser + página)
     12. Envío 24h
     13. Cuarto pequeño
     14. FAQ
     15. Formularios de lead
     16. Ficha de producto
     17. CTA sticky (solo móvil)
     18. Página de gracias
     19. Páginas legales
     20. Aviso de cookies
     21. Footer
     22. Reduced motion e impresión
   ========================================================================== */


/* =============================================================================
   00. TOKENS
   ========================================================================== */
:root {
  /* --- Color: superficies (brief §4, HEX exactos) --- */
  --c-fondo:            #141210; /* negro marrón cálido, fondo global */
  --c-fondo-profundo:   #0D0B0A; /* hero, vídeo, footer: el contenido "flota" */
  --c-superficie:       #1E1A16; /* cards, acordeón, modales */
  --c-superficie-alta:  #282218; /* hover de card, chips, tablas de datos */
  --c-borde:            #332C24; /* bordes 1px y separadores */
  --c-borde-fuerte:     #4A4034; /* borde de card en hover / inputs con foco */

  /* --- Color: texto --- */
  --c-texto:            #F4EFE7; /* blanco cálido roto, nunca #FFF */
  --c-texto-2:          #A79E92; /* subtítulos, specs, metadatos */
  --c-arena:            #D9C7A7; /* detalle editorial, numeración de pasos */

  /* --- Color: acento = APROBADO = CTA (la idea de marca) --- */
  --c-acento:           #C9F24D;
  --c-acento-claro:     #DFFF8A;
  --c-acento-apagado:   #7E9330;

  /* --- Color: estados de producto (no se mezclan nunca) --- */
  --c-estado-stock:     var(--c-acento);   /* lima  = en stock */
  --c-estado-preventa:  #F2C94C;           /* ámbar = preventa */
  --c-estado-espera:    var(--c-texto-2);  /* gris  = lista de espera */
  --c-suspendido:       #E5484D;           /* rojo  = suspendido / error */
  --c-suspendido-texto: #FF6B6B;

  /* --- Alias semánticos: sello y CTA comparten token a propósito --- */
  --c-aprobado:         var(--c-acento);
  --c-cta-fondo:        var(--c-acento);
  --c-cta-texto:        var(--c-fondo);   /* 14,5:1 AAA. Nunca blanco sobre lima */
  --c-cta-fondo-hover:  var(--c-acento-claro);

  /* --- Tipografía --- */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero:    clamp(2.5rem, 11vw, 5.5rem);
  --fs-h1:      clamp(2.1rem, 8.5vw, 4rem);
  --fs-h2:      clamp(1.7rem, 6.5vw, 2.9rem);
  --fs-h3:      clamp(1.15rem, 4.4vw, 1.5rem);
  --fs-cifra:   clamp(2.6rem, 13vw, 5rem);   /* contador de € ahorrados */
  --fs-precio:  clamp(1.6rem, 6vw, 2.2rem);
  --fs-body:    1rem;
  --fs-body-lg: clamp(1.05rem, 3.6vw, 1.2rem);
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  --lh-display: 1.06;  /* nunca por debajo de 1.05 */
  --lh-body:    1.6;
  --ls-display: -0.02em;
  --ls-sello:   0.12em;

  /* --- Espaciado --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
  --space-9: 4.5rem;
  --space-10: 6rem;

  --pad-x: 1.25rem;      /* gutter lateral, crece en breakpoints */
  --ancho-max: 75rem;    /* 1200px */
  --ancho-texto: 42rem;  /* medida de lectura cómoda */

  /* --- Radios --- */
  --radio-xs: 4px;
  --radio-sm: 8px;
  --radio-md: 14px;
  --radio-lg: 20px;
  --radio-pill: 999px;

  /* --- Bordes y sombras --- */
  --borde-1: 1px solid var(--c-borde);
  --borde-sello: 2px solid currentColor;

  --sombra-card: 0 1px 0 rgba(244, 239, 231, 0.03) inset,
                 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --sombra-flotante: 0 -12px 32px -18px rgba(0, 0, 0, 0.95);
  --glow-lima: 0 0 0 1px rgba(201, 242, 77, 0.28),
               0 10px 34px -16px rgba(201, 242, 77, 0.45);
  --glow-preventa: 0 0 0 1px rgba(242, 201, 76, 0.28),
                   0 10px 34px -18px rgba(242, 201, 76, 0.35);

  /* --- Movimiento --- */
  --t-rapida: 140ms ease-out;
  --t-media: 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --tilt-sello: -3deg;   /* inclinación de tampón, compartida con los vídeos */

  /* --- Capas --- */
  --z-sticky: 60;
  --z-header: 80;
  --z-cookie: 120;

  color-scheme: dark;
}

@media (min-width: 768px) { :root { --pad-x: 2rem; } }
@media (min-width: 1024px) { :root { --pad-x: 2.5rem; } }
@media (min-width: 1280px) { :root { --pad-x: 3rem; } }


/* =============================================================================
   01. RESET Y BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* el header es sticky */
}

body {
  background-color: var(--c-fondo);      /* background explícito, regla dura */
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(201, 242, 77, 0.05), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, rgba(217, 199, 167, 0.035), transparent 70%);
  background-attachment: fixed;
  color: var(--c-texto);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100%;
  overflow-x: hidden;
}

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

a {
  color: var(--c-texto);
  text-decoration-color: var(--c-borde-fuerte);
  text-underline-offset: 0.22em;
  transition: color var(--t-rapida), text-decoration-color var(--t-rapida);
}
a:hover { color: var(--c-acento); text-decoration-color: var(--c-acento); }

button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { padding: 0; list-style: none; }

table { border-collapse: collapse; }

/* Foco visible en toda la web (accesibilidad, regla dura) */
:focus-visible {
  outline: 3px solid var(--c-acento-claro);
  outline-offset: 3px;
  border-radius: var(--radio-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--c-acento); color: var(--c-fondo); }

/* !important justificado: [hidden] lo pone web-js para conmutar las variantes de
   /gracias y el contador de preventa. Debe ganar a cualquier display de layout. */
[hidden] { display: none !important; }


/* =============================================================================
   02. UTILIDADES Y ACCESIBILIDAD
   ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 999;
  transform: translateY(-200%);
  background: var(--c-acento);
  color: var(--c-fondo);
  font-family: var(--font-display);
  font-weight: 700;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radio-sm);
  text-decoration: none;
  transition: transform var(--t-media);
}
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--c-fondo);
}


/* =============================================================================
   03. TIPOGRAFÍA Y SECCIONES
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-style: normal;      /* nunca italic en display */
  text-wrap: balance;
}

/* Los números son el argumento: siempre alineados */
.card-price, .product-price, .contador-cifra, .preventa-contador,
.test-data-table, .specs-list, .roto-datos, .legal-table,
.cta-sticky-precio, .envio-paso-hora, .card-sello, .preventa-fecha-valor,
.roto-precio, .roto-ahorro, .dato-medido {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Ritmo vertical y gutter comunes a todas las secciones de todas las páginas */
main > section {
  padding: var(--space-8) var(--pad-x);
}
main > section > * {
  max-width: var(--ancho-max);
  margin-inline: auto;
}

.section-title {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-4);
}

.section-sub {
  color: var(--c-texto-2);
  font-size: var(--fs-body-lg);
  max-width: var(--ancho-texto);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  main > section { padding-block: var(--space-9); }
}
@media (min-width: 1024px) {
  main > section { padding-block: var(--space-10); }
}


/* =============================================================================
   04. BOTONES (CTA) Y EL SELLO
   -----------------------------------------------------------------------------
   AQUÍ VIVE LA IDEA DE MARCA: el CTA y el sello APROBADO comparten el mismo
   token de color (--c-aprobado / --c-cta-fondo) y el mismo lenguaje de borde de
   2px. Comprar es, literalmente, apretar el sello.
   ========================================================================== */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-6);
  background: var(--c-cta-fondo);
  color: var(--c-cta-texto);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: var(--radio-sm);
  cursor: pointer;
  /* La línea interior de 2px es el eco del borde del tampón APROBADO */
  box-shadow: inset 0 0 0 2px rgba(20, 18, 16, 0.16), var(--glow-lima);
  transition: background-color var(--t-rapida), transform var(--t-rapida),
              box-shadow var(--t-media);
}
.cta-button:hover {
  background: var(--c-cta-fondo-hover);
  color: var(--c-cta-texto);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 2px rgba(20, 18, 16, 0.2),
              0 0 0 1px rgba(223, 255, 138, 0.4),
              0 16px 40px -14px rgba(201, 242, 77, 0.55);
}
.cta-button:active { transform: translateY(0); }

/* Secundario: nunca compite con el lima. Jerarquía clara. */
.cta-secondary {
  background: transparent;
  color: var(--c-texto);
  box-shadow: inset 0 0 0 1px var(--c-borde-fuerte);
}
.cta-secondary:hover {
  background: var(--c-superficie-alta);
  color: var(--c-texto);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--c-acento);
}

/* --- Glow lima pulsante del CTA principal -----------------------------------
   Solo en los CTA de compra (hero, bloque de estado y barra sticky). Es la luz
   del gadget encendido en el cuarto a oscuras: muy leve, nunca un neón.
   Se anima opacidad de una capa aparte, no el box-shadow del botón.          */
@keyframes pulso-lima {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%      { opacity: 0.7;  transform: scale(1.035); }
}

.hero-cta,
.bloque-estado-cta,
.cta-sticky-boton { position: relative; }

.hero-cta::after,
.bloque-estado-cta::after,
.cta-sticky-boton::after {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 70% at 50% 50%, rgba(201, 242, 77, 0.55), rgba(201, 242, 77, 0) 72%);
  opacity: 0.25;
  pointer-events: none;
  animation: pulso-lima 3.4s ease-in-out infinite;
}
/* El CTA secundario nunca pulsa: la jerarquía es innegociable */
.cta-secondary::after { display: none; }

/* --- EL SELLO (tampón) ------------------------------------------------------
   Rectangular, mayúsculas, borde grueso, ligera rotación y cifra de fecha.
   Mismo activo gráfico que en los vídeos del Probador.                       */
.card-sello {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xs);
  line-height: 1.15;
  letter-spacing: var(--ls-sello);
  text-transform: uppercase;
  white-space: nowrap;
  border: var(--borde-sello);
  border-radius: var(--radio-xs);
  background: rgba(13, 11, 10, 0.72);
  backdrop-filter: blur(4px);
  transform: rotate(var(--tilt-sello));
  transform-origin: center;
}

.card-sello--aprobado {
  color: var(--c-aprobado);
  border-color: var(--c-aprobado);
  box-shadow: 0 0 24px -8px rgba(201, 242, 77, 0.55);
}

.card-sello--suspendido {
  color: var(--c-suspendido-texto);
  border-color: var(--c-suspendido);
  background: rgba(229, 72, 77, 0.12);
  box-shadow: none;
  transform: rotate(calc(var(--tilt-sello) * -1.3));
  position: relative;
  opacity: 0.92;
}
/* Tachado de tampón anulado: línea fina, no debe comerse la lectura */
.card-sello--suspendido::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  height: 2px;
  background: var(--c-suspendido);
  opacity: 0.45;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Sello dentro de una media: siempre esquina superior derecha */
.card-media .card-sello {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
}


/* =============================================================================
   05. HEADER / NAVEGACIÓN
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--pad-x);
  background: rgba(13, 11, 10, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: var(--borde-1);
}

.site-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: var(--c-texto);
  text-decoration: none;
  white-space: nowrap;
}
.site-logo:hover { color: var(--c-acento); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-link {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-texto-2);
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--c-texto); border-bottom-color: var(--c-acento); }
.nav-link[aria-current="page"] { color: var(--c-texto); border-bottom-color: var(--c-acento); }

/* "Roto en el test" es el contrapeso honesto: se marca en rojo, no en lima */
.nav-link-roto:hover,
.nav-link-roto[aria-current="page"] {
  color: var(--c-suspendido-texto);
  border-bottom-color: var(--c-suspendido);
}

@media (min-width: 768px) {
  .site-header { padding-block: var(--space-4); }
  .site-logo { font-size: 1.4rem; }
  .site-nav { gap: var(--space-6); }
  .nav-link { font-size: 1rem; }
}


/* =============================================================================
   06. HERO (home)
   ========================================================================== */
.hero-section {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-5);
  min-height: 82svh;
  padding: var(--space-9) var(--pad-x) var(--space-7);
  background-color: var(--c-fondo-profundo);
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.55;
  will-change: transform; /* WILL-CHANGE 1/3 (parallax GSAP del hero) */
}

/* Cortina cálida: la escena es un cuarto de noche, no un sótano */
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(13, 11, 10, 0.75) 0%, rgba(13, 11, 10, 0.35) 38%, rgba(13, 11, 10, 0.96) 100%),
    radial-gradient(80% 55% at 50% 100%, rgba(201, 242, 77, 0.10), transparent 70%);
  pointer-events: none;
}

.hero-content {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
}

.hero-title {
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: -0.035em;
  margin-bottom: var(--space-4);
}
.hero-title-accent {
  display: block;
  color: var(--c-acento);          /* el mismo lima del sello y del botón */
  text-shadow: 0 0 42px rgba(201, 242, 77, 0.25);
}

.hero-sub {
  max-width: 34rem;
  color: var(--c-texto-2);
  font-size: var(--fs-body-lg);
  margin-bottom: var(--space-6);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}
.hero-cta { width: 100%; }

.hero-link-secundario {
  align-self: center;
  color: var(--c-texto-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--c-borde-fuerte);
}
.hero-link-secundario:hover { color: var(--c-suspendido-texto); text-decoration-color: currentColor; }

.hero-badge {
  position: relative;
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  background: rgba(20, 18, 16, 0.8);
  border: 1px solid rgba(201, 242, 77, 0.35);
  border-radius: var(--radio-sm);
  color: var(--c-texto);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  backdrop-filter: blur(6px);
}

@media (min-width: 768px) {
  .hero-section { min-height: 88svh; gap: var(--space-6); }
  .hero-actions { flex-direction: row; align-items: center; gap: var(--space-6); }
  .hero-cta { width: auto; }
  .hero-link-secundario { align-self: auto; font-size: 1rem; }
  .hero-badge { font-size: 1rem; padding: var(--space-4) var(--space-5); }
}
@media (min-width: 1024px) {
  .hero-video { opacity: 0.6; }
  .hero-sub { max-width: 40rem; }
}


/* =============================================================================
   07. PASOS DEL SELLO (documental de taller: numeración grande, rejilla visible)
   ========================================================================== */
.pasos-section { border-top: var(--borde-1); }

.pasos-list {
  display: grid;
  gap: var(--space-5);
  counter-reset: paso;
}

.paso-item {
  position: relative;
  padding: var(--space-5);
  padding-top: var(--space-6);
  background: var(--c-superficie);
  border: var(--borde-1);
  border-radius: var(--radio-md);
}

.paso-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1.05;
  color: var(--c-arena);
  opacity: 0.55;
  margin-bottom: var(--space-2);
}

.paso-title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

.paso-text {
  color: var(--c-texto-2);
  font-size: var(--fs-sm);
}

.paso-link {
  color: var(--c-acento);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(201, 242, 77, 0.4);
}
.paso-link:hover { text-decoration-color: currentColor; }

/* El paso 3 es el sello: se marca con el color de marca */
.paso-item:last-child {
  border-color: rgba(201, 242, 77, 0.32);
  background:
    linear-gradient(180deg, rgba(201, 242, 77, 0.06), transparent 60%),
    var(--c-superficie);
}
.paso-item:last-child .paso-num { color: var(--c-acento); opacity: 0.8; }

@media (min-width: 768px) {
  .pasos-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .paso-num { font-size: 3rem; }
  .paso-text { font-size: 1rem; }
}


/* =============================================================================
   08. BARRA DE CONFIANZA + LOGOS DE PAGO
   -----------------------------------------------------------------------------
   Los iconos van por CSS (::before con máscara SVG) porque el copy no lleva
   emojis. Se tiñen con currentColor -> el color lo decide el contexto.
   ========================================================================== */
.trust-bar {
  background: var(--c-fondo-profundo);
  border-block: var(--borde-1);
}

.trust-list {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.trust-item {
  position: relative;
  padding-left: 2.25rem;
  color: var(--c-texto-2);
  font-size: var(--fs-sm);
}
.trust-item strong {
  display: block;
  color: var(--c-texto);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: var(--space-1);
}

.trust-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--c-acento-apagado);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* 1. Camión (envío 24h) */
.trust-item:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h11v11H2z'/%3E%3Cpath d='M13 9h4l4 4v3h-8z'/%3E%3Ccircle cx='6.5' cy='18.5' r='2'/%3E%3Ccircle cx='17.5' cy='18.5' r='2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h11v11H2z'/%3E%3Cpath d='M13 9h4l4 4v3h-8z'/%3E%3Ccircle cx='6.5' cy='18.5' r='2'/%3E%3Ccircle cx='17.5' cy='18.5' r='2'/%3E%3C/svg%3E");
}
/* 2. Play (testado en vídeo) — el único en lima pleno: es el diferencial */
.trust-item:nth-child(2)::before {
  background-color: var(--c-acento);
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.2l6 3.8-6 3.8z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.2l6 3.8-6 3.8z'/%3E%3C/svg%3E");
}
/* 3. Flecha de vuelta (14 días para devolver) */
.trust-item:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.9-6.4'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.9-6.4'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E");
}
/* 4. Regla (specs medidas de verdad) */
.trust-item:nth-child(4)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14.6 14.6 3 21 9.4 9.4 21z'/%3E%3Cpath d='M7 10l2 2M10 7l2 2M13.4 13.4l2 2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14.6 14.6 3 21 9.4 9.4 21z'/%3E%3Cpath d='M7 10l2 2M10 7l2 2M13.4 13.4l2 2'/%3E%3C/svg%3E");
}
/* 5. Candado (pago seguro) */
.trust-item:nth-child(5)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

/* Fila de logos de pago (patrón de la casa) */
.pay-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.pay-logo img {
  height: 1.75rem;
  width: auto;
  opacity: 0.6;
  filter: grayscale(1);
  transition: opacity var(--t-rapida), filter var(--t-rapida);
}
.pay-logos:hover .pay-logo img { opacity: 0.85; filter: grayscale(0.4); }

@media (min-width: 480px) {
  .trust-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (min-width: 1024px) {
  .trust-list { grid-template-columns: repeat(5, 1fr); }
  .trust-item { font-size: var(--fs-sm); }
}


/* =============================================================================
   09. GRID DE PRODUCTOS — LOS TRES ESTADOS
   -----------------------------------------------------------------------------
   Cada card lee su estado de una única variable local (--c-estado) que pintan
   los modificadores. Distinguirlos de un vistazo es el corazón del diseño:
     --stock    lima, viva, badge de 24h destacado  -> es la que queremos vender
     --preventa ámbar, con barra y contador         -> "esto está pasando ahora"
     --espera   gris, apagada pero digna            -> promesa, no fracaso
   ========================================================================== */
.grid-section { border-top: var(--borde-1); }

.product-grid {
  display: grid;
  gap: var(--space-5);
}

.product-card {
  --c-estado: var(--c-texto-2);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-md);
  overflow: hidden;
  box-shadow: var(--sombra-card);
  transition: transform var(--t-media), border-color var(--t-media),
              background-color var(--t-media);
}
.product-card:hover {
  transform: translateY(-4px);
  background: var(--c-superficie-alta);
  border-color: var(--c-estado);
}
/* Filo superior del color del estado: identifica la card antes de leerla */
.product-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--c-estado);
  z-index: 3;
}

.card-media-link {
  display: block;
  text-decoration: none;
}

.card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--c-fondo-profundo);
  overflow: hidden;
}
.card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-media), opacity var(--t-media);
}
.product-card:hover .card-video { transform: scale(1.03); }
/* Viñeta cálida para que el sello siempre se lea sobre cualquier frame */
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 11, 10, 0.5) 0%, transparent 40%, rgba(13, 11, 10, 0.55) 100%);
  pointer-events: none;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  flex: 1;
}

.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.card-badge {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radio-pill);
  border: 1px solid currentColor;
  color: var(--c-estado);
  background: color-mix(in srgb, var(--c-estado) 12%, transparent);
}

.card-name {
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
}
.card-name a { text-decoration: none; }
.card-name a:hover { color: var(--c-acento); }

.card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}
.card-price-final {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-precio);
  line-height: 1.1;
  color: var(--c-acento);   /* el precio también es lima: es lo aprobado */
  letter-spacing: -0.02em;
}
.card-price-base {
  font-size: var(--fs-xs);
  color: var(--c-texto-2);
}
.card-price-antes {
  font-size: var(--fs-xs);
  color: var(--c-texto-2);
  text-decoration: line-through;
  text-decoration-color: var(--c-suspendido);
}

.card-accion {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}
.card-cta { width: 100%; }

.card-nota {
  font-size: var(--fs-xs);
  color: var(--c-texto-2);
  text-align: center;
}

.grid-nota {
  margin-top: var(--space-6);
  color: var(--c-texto-2);
  font-size: var(--fs-sm);
  text-align: center;
}

.grid-empty {
  padding: var(--space-8) var(--space-5);
  text-align: center;
  color: var(--c-texto-2);
  border: 1px dashed var(--c-borde);
  border-radius: var(--radio-md);
}

/* ---------- ESTADO 1: EN STOCK (la que convierte) ---------- */
.product-card--stock {
  --c-estado: var(--c-estado-stock);
  border-color: rgba(201, 242, 77, 0.35);
  background:
    linear-gradient(180deg, rgba(201, 242, 77, 0.07), transparent 45%),
    var(--c-superficie);
}
.product-card--stock:hover { box-shadow: var(--sombra-card), var(--glow-lima); }
/* El badge de 24h manda: relleno lima sólido, no contorno */
.product-card--stock .card-badge--stock {
  background: var(--c-acento);
  color: var(--c-fondo);
  border-color: var(--c-acento);
  font-weight: 700;
  box-shadow: 0 6px 22px -10px rgba(201, 242, 77, 0.8);
}

/* ---------- ESTADO 2: EN PREVENTA (está pasando ahora) ---------- */
.product-card--preventa {
  --c-estado: var(--c-estado-preventa);
  border-color: rgba(242, 201, 76, 0.32);
  background:
    linear-gradient(180deg, rgba(242, 201, 76, 0.06), transparent 45%),
    var(--c-superficie);
}
.product-card--preventa:hover { box-shadow: var(--sombra-card), var(--glow-preventa); }
.product-card--preventa .card-price-final { color: var(--c-estado-preventa); }
/* El CTA sigue siendo lima: comprar es siempre el mismo gesto */

/* ---------- ESTADO 3: LISTA DE ESPERA (promesa, no fracaso) ---------- */
.product-card--espera {
  --c-estado: var(--c-estado-espera);
  border-color: var(--c-borde);
  background: var(--c-superficie);
}
.product-card--espera .card-media { filter: saturate(0.72) brightness(0.86); }
.product-card--espera:hover .card-media { filter: saturate(0.9) brightness(0.95); }
.product-card--espera .card-price-final {
  color: var(--c-texto);          /* sin lima: todavía no se puede comprar */
  font-size: calc(var(--fs-precio) * 0.82);
}
.product-card--espera .card-name { color: var(--c-texto); }
.product-card--espera:hover { box-shadow: var(--sombra-card), 0 0 0 1px var(--c-borde-fuerte); }

@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (min-width: 1280px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}


/* =============================================================================
   10. PREVENTA — CONTADOR Y BARRA
   -----------------------------------------------------------------------------
   web-js escribe el dato REAL y fija la custom property --preventa-progreso
   (porcentaje, ej. "72%") sobre .preventa-contador o .preventa-barra-fill.
   Si el dato falla, se oculta el bloque entero con [hidden]: nunca se pinta un
   número inventado.
   ========================================================================== */
.preventa-contador {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--c-superficie-alta);
  border: 1px solid rgba(242, 201, 76, 0.25);
  border-radius: var(--radio-sm);
}

.preventa-contador-texto {
  font-size: var(--fs-sm);
  color: var(--c-texto-2);
}
.preventa-contador-cifra,
.preventa-contador-objetivo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--c-estado-preventa);
}

.preventa-barra {
  position: relative;
  height: 8px;
  border-radius: var(--radio-pill);
  background: rgba(126, 147, 48, 0.22);
  border: 1px solid var(--c-borde);
  overflow: hidden;
}
/* web-js pasa el porcentaje como custom property --preventa-progreso (ej. "72%").
   Sin dato => 0% y el bloque entero va con [hidden]. Nunca una cifra inventada. */
.preventa-barra-fill {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--preventa-progreso, 0%);
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-estado-preventa), #FFE08A);
  will-change: width;  /* WILL-CHANGE 2/3 (animación del contador) */
  transition: width 900ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Bloque de preventa en la ficha */
.preventa-fecha {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block: var(--space-4);
}
.preventa-fecha-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-sello);
  color: var(--c-texto-2);
}
.preventa-fecha-valor {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  line-height: 1.08;
  color: var(--c-estado-preventa);
}

.preventa-microcopy {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid rgba(242, 201, 76, 0.45);
  color: var(--c-texto-2);
  font-size: var(--fs-sm);
}


/* =============================================================================
   11. ROTO EN EL TEST (teaser en home + página /roto)
   ========================================================================== */
.roto-teaser {
  background: var(--c-fondo-profundo);
  border-block: var(--borde-1);
  text-align: center;
}
.roto-teaser .section-title { color: var(--c-suspendido-texto); }
.roto-teaser-text {
  max-width: var(--ancho-texto);
  margin-inline: auto;
  margin-bottom: var(--space-6);
  color: var(--c-texto-2);
  font-size: var(--fs-body-lg);
}

/* Contador de euros ahorrados: la prueba social de la marca */
.contador-ahorrado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-block: var(--space-5) var(--space-6);
}
.contador-cifra {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-cifra);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--c-arena);
}
.contador-label {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-sello);
  color: var(--c-texto-2);
}

/* --- Página /roto --- */
.roto-hero {
  text-align: center;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(229, 72, 77, 0.10), transparent 65%),
    var(--c-fondo-profundo);
  border-bottom: var(--borde-1);
}
.roto-title {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-4);
  color: var(--c-texto);
}
.roto-intro,
.roto-manifiesto {
  max-width: var(--ancho-texto);
  margin-inline: auto;
  color: var(--c-texto-2);
}
.roto-intro { font-size: var(--fs-body-lg); }
.roto-manifiesto {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--borde-1);
  font-size: var(--fs-sm);
}

.roto-grid {
  display: grid;
  gap: var(--space-5);
}
.roto-grid:empty { display: none; }

.roto-card {
  display: flex;
  flex-direction: column;
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-left: 3px solid var(--c-suspendido);
  border-radius: var(--radio-md);
  overflow: hidden;
}
.roto-card .card-media { aspect-ratio: 4 / 5; }
.roto-card .card-video { filter: saturate(0.6) brightness(0.8); }
.roto-card .card-body { gap: var(--space-4); }
.roto-card .card-name { font-size: 1.2rem; }

.roto-motivo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: var(--c-suspendido-texto);
}

.roto-datos {
  display: grid;
  gap: 0;
  border-top: var(--borde-1);
}
.roto-dato {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: var(--borde-1);
}
.roto-dato dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-texto-2);
}
.roto-dato dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: right;
}
.roto-precio { color: var(--c-texto); text-decoration: line-through; text-decoration-color: var(--c-suspendido); }
.roto-ahorro { color: var(--c-arena); font-weight: 600; }

.roto-link {
  align-self: flex-start;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-texto);
  text-decoration: underline;
  text-decoration-color: var(--c-suspendido);
}
.roto-link:hover { color: var(--c-suspendido-texto); }

@media (min-width: 768px) {
  .roto-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (min-width: 1280px) {
  .roto-grid { grid-template-columns: repeat(3, 1fr); }
}


/* =============================================================================
   12. ENVÍO 24H
   ========================================================================== */
.envio-section { border-top: var(--borde-1); }
.envio-text {
  max-width: var(--ancho-texto);
  color: var(--c-texto-2);
  font-size: var(--fs-body-lg);
  margin-bottom: var(--space-6);
}

.envio-timeline {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.envio-paso {
  position: relative;
  padding: var(--space-4) var(--space-5);
  background: var(--c-superficie);
  border: var(--borde-1);
  border-radius: var(--radio-sm);
}
.envio-paso-hora {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--c-arena);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-1);
}
.envio-paso-text { color: var(--c-texto-2); font-size: var(--fs-sm); }
/* El último paso es la promesa cumplida: se enciende */
.envio-timeline .envio-paso:last-child { border-color: rgba(201, 242, 77, 0.35); }
.envio-timeline .envio-paso:last-child .envio-paso-hora { color: var(--c-acento); }

.envio-nota {
  max-width: var(--ancho-texto);
  color: var(--c-texto-2);
  font-size: var(--fs-sm);
}

/* Resumen de envío en la ficha */
.envio-resumen {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.envio-resumen-item {
  padding: var(--space-3) var(--space-4);
  background: var(--c-superficie);
  border: var(--borde-1);
  border-radius: var(--radio-sm);
  color: var(--c-texto-2);
  font-size: var(--fs-sm);
}
.envio-resumen-item strong { color: var(--c-texto); font-weight: 600; }

@media (min-width: 768px) {
  .envio-timeline { grid-template-columns: repeat(3, 1fr); }
  .envio-resumen { grid-template-columns: repeat(3, 1fr); }
}


/* =============================================================================
   13. CUARTO PEQUEÑO (posicionamiento)
   ========================================================================== */
.cuarto-section { border-top: var(--borde-1); }

.cuarto-figura {
  margin: var(--space-5) 0;
  border-radius: var(--radio-md);
  overflow: hidden;
  border: var(--borde-1);
  background: var(--c-fondo-profundo);
}
.cuarto-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.cuarto-caption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
  color: var(--c-texto-2);
  border-top: var(--borde-1);
}
.cuarto-text {
  max-width: var(--ancho-texto);
  color: var(--c-texto-2);
  font-size: var(--fs-body-lg);
}

@media (min-width: 1024px) {
  .cuarto-section > .cuarto-figura { max-width: var(--ancho-max); }
  .cuarto-img { aspect-ratio: 16 / 9; }
}


/* =============================================================================
   14. FAQ
   ========================================================================== */
.faq-section { border-top: var(--borde-1); }

.faq-item {
  border: var(--borde-1);
  border-radius: var(--radio-sm);
  background: var(--c-superficie);
  margin-bottom: var(--space-3);
  overflow: hidden;
  transition: border-color var(--t-rapida), background-color var(--t-rapida);
}
.faq-item[open] { border-color: var(--c-borde-fuerte); background: var(--c-superficie-alta); }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid var(--c-acento);
  border-bottom: 2px solid var(--c-acento);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-media);
}
.faq-item[open] .faq-question::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq-question:hover { color: var(--c-acento); }

.faq-answer {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--c-texto-2);
  font-size: var(--fs-sm);
  max-width: var(--ancho-texto);
}
.faq-answer a { color: var(--c-acento); }


/* =============================================================================
   15. FORMULARIOS DE LEAD
   ========================================================================== */
.lead-section {
  background: var(--c-fondo-profundo);
  border-top: var(--borde-1);
}
.lead-text {
  max-width: var(--ancho-texto);
  color: var(--c-texto-2);
  font-size: var(--fs-body-lg);
  margin-bottom: var(--space-6);
}

.lead-form {
  display: grid;
  gap: var(--space-4);
  max-width: 32rem;
  padding: var(--space-5);
  background: var(--c-superficie);
  border: var(--borde-1);
  border-radius: var(--radio-md);
}
/* El formulario de lead vive dentro de una sección centrada: no lo centramos
   a la fuerza, se alinea a la izquierda con el texto. */

.form-row { display: grid; gap: var(--space-2); }

.lead-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-texto-2);
}

.lead-input {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  background: var(--c-fondo);
  color: var(--c-texto);
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--radio-sm);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.lead-input::placeholder { color: #6E6559; }
.lead-input:hover { border-color: var(--c-acento-apagado); }
.lead-input:focus-visible {
  border-color: var(--c-acento);
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 242, 77, 0.25);
}
.lead-input[aria-invalid="true"],
.lead-input.is-error {
  border-color: var(--c-suspendido);
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.2);
}

.form-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-3);
}
.lead-checkbox {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--c-acento);
  cursor: pointer;
}
.lead-consent-label {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-texto-2);
  cursor: pointer;
}
.lead-consent-label a { color: var(--c-acento); }

.lead-submit { width: 100%; }

/* Feedback: web-js añade .is-ok o .is-error. Vacío = invisible. */
.lead-feedback {
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.5;
  min-height: 0;
}
.lead-feedback:empty { display: none; }
.lead-feedback.is-ok,
.lead-feedback.is-error {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radio-sm);
  border: 1px solid currentColor;
}
.lead-feedback.is-ok {
  color: var(--c-acento);
  background: rgba(201, 242, 77, 0.1);
}
.lead-feedback.is-error {
  color: var(--c-suspendido-texto);
  background: rgba(229, 72, 77, 0.12);
}

/* Formulario dentro de la ficha (lista de espera): ocupa el ancho del bloque */
.lead-form--producto { max-width: none; background: transparent; border: 0; padding: 0; }


/* =============================================================================
   16. FICHA DE PRODUCTO
   ========================================================================== */
.breadcrumb { padding: var(--space-4) var(--pad-x) 0; }
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: var(--ancho-max);
  margin-inline: auto;
  font-size: var(--fs-xs);
  color: var(--c-texto-2);
}
.breadcrumb-item { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb-item:not(:last-child)::after { content: "/"; color: var(--c-borde-fuerte); }
.breadcrumb-item a { color: var(--c-texto-2); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--c-acento); }
.breadcrumb-item[aria-current="page"] { color: var(--c-texto); }

/* --- Vídeo del test + sello --- */
.product-hero { padding-top: var(--space-5) !important; } /* pega el vídeo al breadcrumb */
.product-hero-media {
  position: relative;
  border-radius: var(--radio-md);
  overflow: hidden;
  background: var(--c-fondo-profundo);
  border: var(--borde-1);
  box-shadow: var(--sombra-card);
}
.product-hero-video {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 78svh;
  object-fit: cover;
}
.product-sello {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  font-size: var(--fs-sm);
  padding: 0.45rem 0.9rem;
}
.product-hero-link { margin-top: var(--space-3); text-align: center; }
.link-test {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-texto);
  text-decoration: underline;
  text-decoration-color: var(--c-acento);
}
.link-test:hover { color: var(--c-acento); }

/* --- Nombre, precio, estado --- */
.product-name {
  font-size: var(--fs-h1);
  margin-block: var(--space-3);
}
.product-claim {
  color: var(--c-texto-2);
  font-size: var(--fs-body-lg);
  margin-bottom: var(--space-5);
  max-width: var(--ancho-texto);
}
.product-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}
.product-price-final {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--c-acento);
}
.product-price-base { font-size: var(--fs-sm); color: var(--c-texto-2); }

.product-envio-coste {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--c-superficie);
  border: var(--borde-1);
  border-radius: var(--radio-sm);
  font-size: var(--fs-sm);
  color: var(--c-texto-2);
}
.product-envio-coste strong { color: var(--c-texto); }
.product-envio-coste a { color: var(--c-acento); }

/* --- Bloque de estado: la pieza más importante de la ficha --- */
.bloque-estado {
  --c-estado: var(--c-texto-2);
  position: relative;
  padding: var(--space-6) var(--space-5) !important;
  background: var(--c-superficie);
  border: 1px solid var(--c-estado);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-card);
}
.bloque-estado::before {
  content: "";
  position: absolute;
  inset-inline: -1px;
  top: -1px;
  height: 4px;
  border-radius: var(--radio-md) var(--radio-md) 0 0;
  background: var(--c-estado);
}
.bloque-estado-title { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.bloque-estado-text { color: var(--c-texto-2); font-size: var(--fs-sm); margin-bottom: var(--space-5); }
.bloque-estado-cta { width: 100%; }
.bloque-estado-nota {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--c-texto-2);
  text-align: center;
}
.bloque-estado-nota a { color: var(--c-acento); }

.bloque-estado--stock {
  --c-estado: var(--c-estado-stock);
  background: linear-gradient(180deg, rgba(201, 242, 77, 0.08), transparent 50%), var(--c-superficie);
}
.bloque-estado--stock .bloque-estado-title { color: var(--c-acento); }

.bloque-estado--preventa {
  --c-estado: var(--c-estado-preventa);
  background: linear-gradient(180deg, rgba(242, 201, 76, 0.08), transparent 50%), var(--c-superficie);
}
.bloque-estado--preventa .bloque-estado-title { color: var(--c-estado-preventa); }

.bloque-estado--espera {
  --c-estado: var(--c-borde-fuerte);
  background: var(--c-superficie);
}
.bloque-estado--espera .bloque-estado-title { color: var(--c-texto); }

/* --- Tabla de datos del test ------------------------------------------------
   Sin wrapper en el HTML: la propia tabla scrollea en horizontal en móvil.
   (Si web-front añade algún día un div .table-scroll, este bloque se simplifica.)
*/
.test-data-section { border-top: var(--borde-1); }
.test-data-intro { color: var(--c-texto-2); font-size: var(--fs-sm); margin-bottom: var(--space-5); }

.test-data-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--borde-1);
  border-radius: var(--radio-sm);
  background: var(--c-superficie);
  font-size: var(--fs-sm);
}
.test-data-table th,
.test-data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  white-space: nowrap;
  border-bottom: var(--borde-1);
  vertical-align: top;
}
.test-data-table thead th {
  background: var(--c-superficie-alta);
  color: var(--c-texto-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.test-data-table tbody th {
  color: var(--c-texto);
  font-weight: 600;
}
.test-data-table td { color: var(--c-texto-2); }
.test-data-table tbody tr:last-child th,
.test-data-table tbody tr:last-child td { border-bottom: 0; }
.test-data-table tbody tr:hover th,
.test-data-table tbody tr:hover td { background: var(--c-superficie-alta); }

/* La cifra medida por nosotros es el dato que importa: se destaca */
.dato-medido { color: var(--c-texto); font-weight: 600; }

.veredicto {
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.veredicto--ok { color: var(--c-acento); }
.veredicto--regular { color: var(--c-estado-preventa); }
.veredicto--ko { color: var(--c-suspendido-texto); }

.test-data-nota { margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--c-texto-2); }

/* --- Specs --- */
.specs-section { border-top: var(--borde-1); }
.specs-list {
  border-top: var(--borde-1);
  font-size: var(--fs-sm);
}
.spec-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: var(--borde-1);
}
.spec-key {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-texto-2);
}
.spec-value { margin: 0; color: var(--c-texto); font-weight: 500; }
.spec-tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.15rem 0.45rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-arena);
  border: 1px solid rgba(217, 199, 167, 0.35);
  border-radius: var(--radio-xs);
  white-space: nowrap;
}

@media (min-width: 480px) {
  .spec-row { grid-template-columns: 11rem 1fr; align-items: baseline; gap: var(--space-4); }
}

/* --- Garantía y cross-sell --- */
.garantia-section { border-top: var(--borde-1); }
.garantia-text {
  display: grid;
  gap: var(--space-3);
  max-width: var(--ancho-texto);
  color: var(--c-texto-2);
  font-size: var(--fs-body-lg);
}
.cross-sell-section { border-top: var(--borde-1); }
.cross-sell-grid:empty { display: none; }

/* --- Layout de ficha en escritorio: media sticky + compra a la derecha --- */
@media (min-width: 1024px) {
  .product-page {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: var(--space-8);
    align-items: start;
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding-inline: var(--pad-x);
  }
  .product-page > section { padding-inline: 0 !important; } /* el gutter lo pone el grid */
  .product-page > section > * { max-width: none; }
  .breadcrumb { grid-column: 1 / -1; padding-inline: 0; }
  .product-hero {
    grid-column: 1;
    grid-row: 2 / span 2;
    position: sticky;
    top: 5.5rem;
  }
  .product-summary { grid-column: 2; grid-row: 2; }
  .bloque-estado { grid-column: 2; grid-row: 3; }
  .product-page > section:not(.product-hero):not(.product-summary):not(.bloque-estado) {
    grid-column: 1 / -1;
  }
  .product-hero-video { max-height: none; }
}


/* =============================================================================
   17. CTA STICKY — SOLO MÓVIL
   -----------------------------------------------------------------------------
   CLASE DE JS: la barra está OCULTA por defecto y solo se muestra cuando web-js
   le añade la clase .is-visible al <aside class="cta-sticky"> (al salir del
   viewport el CTA principal .bloque-estado-cta). Se oculta quitando la clase.
   A partir de 768px no existe: display:none.
   Si además se muestra el aviso de cookies, web-js puede poner .has-cookie-notice
   en <body> para que la barra suba y no se solapen (opcional).
   ========================================================================== */
.cta-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--pad-x);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(13, 11, 10, 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(201, 242, 77, 0.28);
  box-shadow: var(--sombra-flotante);
  /* Estado por defecto: fuera de pantalla */
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  will-change: transform;  /* WILL-CHANGE 3/3 (entra y sale con scroll) */
  transition: transform var(--t-media), opacity var(--t-media),
              visibility 0s linear var(--t-media);
}
.cta-sticky.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: transform var(--t-media), opacity var(--t-media), visibility 0s;
}
body.has-cookie-notice .cta-sticky { bottom: 5rem; }

.cta-sticky-precio {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}
.cta-sticky-nombre {
  font-size: var(--fs-xs);
  color: var(--c-texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cta-sticky .product-price-final { font-size: 1.35rem; }

.cta-sticky-boton {
  flex: none;
  min-height: 3rem;
  padding-inline: var(--space-5);
  font-size: 0.9375rem;
}

/* Colchón para que la barra no tape el final del contenido en móvil.
   Solo cuando la barra está realmente visible. */
body:has(.cta-sticky.is-visible) .site-footer {
  padding-bottom: calc(var(--space-8) + 5rem);
}

/* En escritorio no existe: el CTA del bloque de estado está siempre a mano */
@media (min-width: 768px) {
  .cta-sticky,
  .cta-sticky.is-visible { display: none; }
  body:has(.cta-sticky.is-visible) .site-footer { padding-bottom: var(--space-8); }
}


/* =============================================================================
   18. PÁGINA DE GRACIAS
   ========================================================================== */
.gracias-page { min-height: 60svh; }

.gracias-hero {
  text-align: center;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(201, 242, 77, 0.10), transparent 65%),
    var(--c-fondo-profundo);
  border-bottom: var(--borde-1);
}
.gracias-sello {
  display: inline-block;
  font-size: var(--fs-sm);
  padding: 0.5rem 1rem;
  margin-bottom: var(--space-5);
}
.gracias-title { font-size: var(--fs-h1); margin-bottom: var(--space-5); }
.gracias-bloque { display: grid; gap: var(--space-3); }
.gracias-text {
  max-width: var(--ancho-texto);
  margin-inline: auto;
  color: var(--c-texto-2);
  font-size: var(--fs-body-lg);
}
.gracias-nota {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--borde-1);
  font-size: var(--fs-sm);
  color: var(--c-texto-2);
}

.gracias-siguiente { text-align: center; }
.gracias-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 26rem;
  margin: var(--space-6) auto var(--space-5);
}
.gracias-links { font-size: var(--fs-sm); color: var(--c-texto-2); }
.gracias-links a { color: var(--c-texto-2); }
.gracias-links a:hover { color: var(--c-acento); }

@media (min-width: 480px) {
  .gracias-acciones { flex-direction: row; justify-content: center; max-width: none; }
}


/* =============================================================================
   19. PÁGINAS LEGALES (las creará web-seo: aviso legal, privacidad, cookies,
       devoluciones, envíos, condiciones de compra)
   ========================================================================== */
.legal-page {
  padding: var(--space-8) var(--pad-x) var(--space-10);
}
.legal-content {
  max-width: 46rem;
  margin-inline: auto;
  color: var(--c-texto-2);
  font-size: var(--fs-body);
}
.legal-headline {
  font-size: var(--fs-h2);
  color: var(--c-texto);
  margin-bottom: var(--space-3);
}
.legal-updated {
  display: inline-block;
  margin-bottom: var(--space-7);
  padding: 0.25rem 0.6rem;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-arena);
  border: 1px solid rgba(217, 199, 167, 0.3);
  border-radius: var(--radio-xs);
  font-variant-numeric: tabular-nums;
}
.legal-section {
  margin-bottom: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--borde-1);
}
.legal-section:first-of-type { border-top: 0; padding-top: 0; }
.legal-section h2 {
  font-size: var(--fs-h3);
  color: var(--c-texto);
  margin-bottom: var(--space-3);
}
.legal-section h3 {
  font-size: 1.0625rem;
  color: var(--c-texto);
  margin-block: var(--space-4) var(--space-2);
}
.legal-section p { margin-bottom: var(--space-3); }
.legal-section ul,
.legal-section ol {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-left: var(--space-5);
  list-style: disc;
}
.legal-section ol { list-style: decimal; }
.legal-section li::marker { color: var(--c-acento-apagado); }
.legal-section a { color: var(--c-acento); }
.legal-section strong { color: var(--c-texto); font-weight: 600; }

.legal-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-5);
  border: var(--borde-1);
  border-radius: var(--radio-sm);
  background: var(--c-superficie);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.legal-table th,
.legal-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  white-space: nowrap;
  border-bottom: var(--borde-1);
}
.legal-table thead th {
  background: var(--c-superficie-alta);
  color: var(--c-texto-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td { border-bottom: 0; }


/* =============================================================================
   20. AVISO DE COOKIES (lo inyecta web-js)
   -----------------------------------------------------------------------------
   Rechazar debe ser tan fácil como aceptar (RGPD): si web-front/web-js añaden un
   botón de rechazo, que use .cta-secondary junto al .cookie-notice-ok.
   ========================================================================== */
.cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-cookie);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-4) var(--pad-x);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background: rgba(30, 26, 22, 0.97);
  backdrop-filter: blur(12px);
  border-top: var(--borde-1);
  box-shadow: var(--sombra-flotante);
  color: var(--c-texto-2);
  font-size: var(--fs-sm);
}

.cookie-notice-text {
  margin: 0;
  max-width: 46rem;
  line-height: 1.5;
}

.cookie-notice-link {
  color: var(--c-acento);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(201, 242, 77, 0.45);
}
.cookie-notice-link:hover { text-decoration-color: currentColor; }

/* Botón discreto: el aviso NO debe competir con el CTA de compra.
   Por eso no lleva el glow lima, solo el relleno plano. */
.cookie-notice-ok {
  align-self: stretch;
  min-height: 2.75rem;
  padding-inline: var(--space-5);
  font-size: 0.9375rem;
  box-shadow: inset 0 0 0 2px rgba(20, 18, 16, 0.16);
}
.cookie-notice-ok:hover { box-shadow: inset 0 0 0 2px rgba(20, 18, 16, 0.2); }

@media (min-width: 768px) {
  .cookie-notice {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }
  .cookie-notice-ok { align-self: auto; flex: none; }
}


/* =============================================================================
   21. FOOTER
   -----------------------------------------------------------------------------
   Móvil (regla de la casa): marca full-width arriba + links en 2 columnas.
   ========================================================================== */
.site-footer {
  padding: var(--space-8) var(--pad-x) var(--space-6);
  background: var(--c-fondo-profundo);
  border-top: var(--borde-1);
}
.site-footer > * {
  max-width: var(--ancho-max);
  margin-inline: auto;
}

.footer-brand {
  width: 100%;
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: var(--borde-1);
}
.footer-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--c-texto);
}
.footer-tagline {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--c-acento);   /* firma del sello */
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.footer-col-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-texto-2);
  margin-bottom: var(--space-3);
}
.footer-links {
  display: grid;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}
.footer-links a {
  color: var(--c-texto-2);
  text-decoration: none;
}
.footer-links a:hover { color: var(--c-texto); text-decoration: underline; }

.footer-pay {
  justify-content: flex-start;
  margin-bottom: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--borde-1);
}
.footer-pay .pay-logo img { height: 1.4rem; }

.footer-legal,
.footer-copy {
  font-size: var(--fs-xs);
  color: var(--c-texto-2);
}
.footer-legal { margin-bottom: var(--space-2); }

@media (min-width: 768px) {
  .site-footer { padding-top: var(--space-9); }
  .footer-columns { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
@media (min-width: 1024px) {
  .site-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    column-gap: var(--space-8);
    max-width: none;
  }
  .site-footer > * { max-width: none; margin-inline: 0; }
  .site-footer { padding-inline: calc(var(--pad-x) + (100vw - var(--ancho-max) - 2 * var(--pad-x)) / 2); }
  .footer-brand { grid-column: 1; grid-row: 1; border-bottom: 0; padding-bottom: 0; }
  .footer-columns { grid-column: 2; grid-row: 1; grid-template-columns: repeat(2, 1fr); }
  .footer-pay { grid-column: 1 / -1; }
  .footer-legal, .footer-copy { grid-column: 1 / -1; }
}


/* =============================================================================
   22. REDUCED MOTION E IMPRESIÓN
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;   /* !important: anula animaciones
                                                 inline que pueda poner GSAP */
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-video,
  .preventa-barra-fill,
  .cta-sticky { will-change: auto; }
  .product-card:hover { transform: none; }
  .cta-button:hover { transform: none; }
  .preventa-barra-fill { transition: none; }
  /* Glow del CTA: se queda fijo y tenue, sin pulso */
  .hero-cta::after,
  .bloque-estado-cta::after,
  .cta-sticky-boton::after {
    animation: none !important;   /* !important: anula el infinite del keyframe */
    opacity: 0.3;
    transform: none;
  }
  /* La barra sticky aparece y desaparece sin deslizamiento */
  .cta-sticky { transform: none; }
  .cta-sticky:not(.is-visible) { display: none; }
}

@media print {
  .site-header, .cta-sticky, .cookie-notice, .hero-video, .card-video, .pay-logos { display: none !important; }
  body { background: #fff; color: #000; }
}