/* ==========================================================================
   Detrás de la Etiqueta — landing de venta
   Mobile first. Sin frameworks. Dos tipografías: Cormorant Garamond + Inter.
   ========================================================================== */

:root {
  --noche:     #050607;   /* el fondo: negro con un punto de verde */
  --carbon:    #0C0D0E;   /* bloques alternos */
  --carbon-2:  #121314;   /* celdas dentro de esos bloques */
  --verde-900: #0B1A12;
  --verde-800: #12291D;
  --verde-700: #1D3A2E;
  --verde-600: #2C5745;
  --salvia:    #AFC9A8;
  --crema:     #F4F1E8;
  --dorado:    #C8A75B;

  --ok:     #2E7D52;
  --medio:  #B98E24;
  --mal:    #C0392F;

  --texto:       rgba(244, 241, 232, .97);
  --texto-medio: rgba(244, 241, 232, .72);
  --texto-tenue: rgba(244, 241, 232, .46);
  --linea:       rgba(200, 167, 91, .22);
  --linea-suave: rgba(244, 241, 232, .10);

  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --texto-ff: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --marco: 1240px;
  --aire: 22px;
  --bloque: 72px;

  --curva:  cubic-bezier(.22, .61, .36, 1);   /* reveals largos, editorial */
  --salida: cubic-bezier(.23, 1, .32, 1);     /* interfaz: arranca rápido y frena */
}

@media (min-width: 768px)  { :root { --aire: 40px; --bloque: 92px; } }
@media (min-width: 1200px) { :root { --aire: 52px; --bloque: 108px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
  /* Sin esto, el móvil pinta un rectángulo gris sobre lo que tocas. */
  -webkit-tap-highlight-color: transparent;
}

/* Lo pulsable: sin espera de doble toque y sin que un pulsado largo
   seleccione la etiqueta del botón. El texto normal sigue seleccionable. */
.boton, .enlace-boton, .faq__p, .control, .cookies__boton, .pie__ajuste,
.acuerdo, .barra a, button {
  touch-action: manipulation;
}
.boton, .enlace-boton, .faq__p, .control, .cookies__boton, .pie__ajuste, button {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body {
  margin: 0;
  background: var(--noche);
  color: var(--texto);
  font-family: var(--texto-ff);
  font-size: 16.5px;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
dd, dt { margin: 0; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--dorado); outline-offset: 4px; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--crema); color: var(--noche);
  padding: 12px 20px; font-size: 14px; font-weight: 500; text-decoration: none;
}
.saltar:focus { left: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.marco {
  width: 100%;
  max-width: var(--marco);
  margin-inline: auto;
  padding-inline: var(--aire);
}

/* ---------- Tipografía ---------- */

.titular {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.016em;
  font-size: clamp(36px, 8.4vw, 76px);
}
/* En tamaños medianos el peso 300 se queda flojo sobre negro. */
.titular--medio { font-size: clamp(31px, 7vw, 54px); font-weight: 400; letter-spacing: -.01em; }

.antetitulo,
.indice-seccion {
  font-family: var(--texto-ff);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin: 0;
}
.indice-seccion {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--linea);
}
.indice-seccion span { color: var(--dorado); font-variant-numeric: lining-nums tabular-nums; }

.columna-texto p { color: var(--texto-medio); font-size: clamp(15.5px, 4vw, 17.5px); line-height: 1.68; max-width: 52ch; }
.destacado {
  color: var(--texto);
  border-left: 1px solid var(--dorado);
  padding-left: 18px;
  margin-top: 22px;
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 34px;
  background: var(--crema);
  color: var(--noche);
  border: 1px solid var(--crema);
  border-radius: 999px;
  font-family: var(--texto-ff);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--salida), color .18s var(--salida),
              border-color .18s var(--salida), transform .14s var(--salida);
}
.boton--ancho { width: 100%; }

.enlace-boton {
  display: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--crema);
  padding: 10px 22px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  transition: background-color .18s var(--salida), color .18s var(--salida), transform .14s var(--salida);
}

/* ---------- Cabecera ---------- */

.cabecera {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  padding-block: 12px;
  background: linear-gradient(to bottom, rgba(5, 6, 7, .94), rgba(5, 6, 7, 0));
  transition: transform .32s var(--salida), background-color .32s var(--salida);
}
.cabecera.fija { background: rgba(5, 6, 7, .96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea-suave); }
.cabecera.oculta { transform: translateY(-100%); }
.cabecera__caja { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.marca { text-decoration: none; display: block; line-height: 1.1; }
.marca__1 { display: block; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--texto-tenue); }
.marca__2 { display: block; font-family: var(--display); font-size: 21px; color: var(--crema); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-top: 104px;
  padding-bottom: 32px;
  background:
    radial-gradient(85% 68% at 74% 16%, rgba(44, 87, 69, .40) 0%, rgba(5, 6, 7, 0) 62%),
    radial-gradient(70% 60% at 4% 96%, rgba(29, 58, 46, .26) 0%, rgba(5, 6, 7, 0) 70%),
    var(--noche);
  overflow: hidden;
}
.hero__caja { display: grid; gap: 36px; }
.hero__titular { margin: 18px 0 20px; font-size: clamp(36px, 8.6vw, 74px); }
.hero__sub {
  color: var(--texto-medio);
  font-size: clamp(15px, 4vw, 18px);
  max-width: 44ch;
  margin-bottom: 28px;
}
.hero__acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hero__acciones .boton { width: 100%; }
.hero__nota { margin: 18px 0 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-tenue); }

/* ---------- El destello de detrás del libro ----------

   Había tres <span class="destello"> en el HTML y ni una regla para ellos:
   el resplandor que se pidió no se estaba dibujando. El ambiente que se ve
   venía sólo de los degradados de fondo de cada sección.

   Es un degradado radial en verde blanquecino, detrás de la portada y por
   delante del fondo negro, que es lo que hace que el libro se despegue en
   lugar de quedarse pegado al fondo. Respira muy despacio —nueve segundos por
   ciclo— porque un brillo completamente quieto se lee como una mancha y uno
   rápido, como un anuncio. */

.destello {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 132%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 46%,
    rgba(175, 201, 168, .30) 0%,
    rgba(120, 160, 128, .16) 32%,
    rgba(44, 87, 69, .10) 52%,
    rgba(5, 6, 7, 0) 72%
  );
  animation: respira 9s ease-in-out infinite;
}

/* Las dos portadas planas son más pequeñas y van sobre fondos ya cargados,
   así que su destello es más contenido. */
.destello--oferta,
.destello--final {
  width: 175%;
  background: radial-gradient(
    circle at 50% 48%,
    rgba(175, 201, 168, .22) 0%,
    rgba(120, 160, 128, .12) 34%,
    rgba(5, 6, 7, 0) 68%
  );
}
.destello--final { animation-delay: -4.5s; }

@keyframes respira {
  0%, 100% { opacity: .82; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.055); }
}

@media (prefers-reduced-motion: reduce) {
  .destello { animation: none; opacity: .9; }
}

.hero__figura {
  position: relative;
  margin: 0;
  justify-self: center;
  width: min(400px, 96vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__figura .visor-caja { position: relative; z-index: 1; }
.hero__figura img { width: 100%; }

.hero__pie { margin-top: 40px; }
.tira {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--linea-suave);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea-suave);
}
.tira__dato { background: var(--noche); padding: 20px 4px 18px; text-align: center; }
.tira__dato dd {
  font-family: var(--texto-ff);
  font-weight: 500;
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--crema);
  font-variant-numeric: lining-nums tabular-nums;
  margin-bottom: 8px;
}
.tira__dato dt { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dorado); }

/* ---------- Bloques ---------- */

.bloque { padding-block: var(--bloque); }
.bloque--fondo { background: var(--carbon); }
.bloque__cuerpo { display: grid; gap: 24px; }

/* ---------- Veredictos ---------- */

.veredictos { display: grid; gap: 1px; margin-top: 48px; background: var(--linea-suave); }
.veredicto { padding: 24px 22px; background: var(--noche); }
.bloque--fondo .veredicto { background: var(--carbon); }
.punto { display: block; width: 10px; height: 10px; border-radius: 50%; margin-bottom: 14px; }
.punto--verde { background: var(--ok);    box-shadow: 0 0 0 5px rgba(46, 125, 82, .18); }
.punto--ambar { background: var(--medio); box-shadow: 0 0 0 5px rgba(185, 142, 36, .18); }
.punto--rojo  { background: var(--mal);   box-shadow: 0 0 0 5px rgba(192, 57, 47, .18); }
.veredicto h3 { font-family: var(--display); font-size: 26px; line-height: 1.1; margin-bottom: 4px; }
.veredicto p { margin: 0; color: var(--texto-medio); font-size: 15.5px; }

/* ---------- Ruta ---------- */

.ruta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--linea-suave);
}
.ruta li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--texto-medio);
}
.ruta span { font-family: var(--texto-ff); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--dorado); font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Producto y muestras ---------- */

.producto__caja { display: grid; gap: 40px; }
.producto__media { position: relative; margin: 0; justify-self: center; width: min(320px, 80vw); }
.producto__video { width: 100%; filter: drop-shadow(0 30px 45px rgba(0, 0, 0, .55)); }
.producto__texto > p { color: var(--texto-medio); max-width: 46ch; margin: 18px 0 0; }

.muestras { display: grid; gap: 34px; margin-top: 52px; }
.muestras__pieza { margin: 0; }
.muestras__pieza img { width: 100%; }
.muestras__pieza--corte img {
  -webkit-mask-image: linear-gradient(to bottom, #000 56%, rgba(0, 0, 0, 0) 95%);
          mask-image: linear-gradient(to bottom, #000 56%, rgba(0, 0, 0, 0) 95%);
}
.muestras figcaption {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  line-height: 1.5;
}
.muestras figcaption span { display: block; color: var(--dorado); margin-bottom: 2px; }

.control {
  position: absolute;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 20px;
  border: 1px solid rgba(244, 241, 232, .3);
  border-radius: 999px;
  background: rgba(5, 6, 7, .74);
  color: var(--crema);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.control__icono {
  width: 0; height: 0;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.control[aria-pressed="true"] .control__icono {
  width: 8px; height: 10px;
  border: 0;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

/* ---------- Rejilla "qué incluye" ---------- */

.rejilla { display: grid; gap: 1px; margin-top: 44px; background: var(--linea-suave); }
.rejilla li { background: var(--carbon-2); padding: 22px 20px; }
.rejilla h3 { font-family: var(--display); font-size: 25px; line-height: 1.12; margin-bottom: 4px; }
.rejilla p { margin: 0; color: var(--texto-medio); font-size: 15px; line-height: 1.55; }

/* ---------- Las secciones del súper ---------- */

.secciones { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--linea); }
.secciones__titulo {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 16px;
}
.fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.fichas li {
  padding: 8px 16px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--texto);
}

/* ---------- Pasos ---------- */

.pasos { display: grid; gap: 1px; background: var(--linea-suave); }
.paso {
  background: var(--carbon);
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: baseline;
  padding: 22px 20px;
}
.paso__n { font-family: var(--texto-ff); font-weight: 500; font-size: 22px; letter-spacing: -.01em; color: var(--dorado); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.paso p { margin: 0; font-family: var(--display); font-size: clamp(19px, 5vw, 24px); line-height: 1.2; }

.nota-ancha {
  margin: 40px 0 0;
  padding: 24px 26px;
  border: 1px solid var(--linea);
  color: var(--texto-medio);
  font-size: 15px;
  line-height: 1.6;
}
.nota-ancha strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  color: var(--crema);
  margin-bottom: 6px;
}

/* ---------- El libro en 3D ---------- */

/* En pantallas sin retina el libro se dibuja al doble y se reduce a la mitad:
   es la única forma de que el texto de la portada no salga con dientes. */
.visor-caja {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.visor {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: rgba(200, 167, 91, .8);
  --progress-mask: transparent;
  cursor: grab;
}
.visor:active { cursor: grabbing; }

.js--nitido .visor {
  width: 200%;
  height: 200%;
  transform: scale(.5);
  transform-origin: top left;
}
.visor__respaldo { display: block; width: 100%; height: 100%; }
.visor__respaldo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 45px rgba(0, 0, 0, .55));
}

.girar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 8px auto 0;
  min-height: 44px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 999px;
  color: var(--texto-medio);
  font-family: var(--texto-ff);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s var(--curva), border-color .3s var(--curva);
}
/* La pista se desvanece en cuanto la persona gira el libro: ya ha hecho su
   trabajo y a partir de ahí es ruido debajo de la portada. */
.girar__pista {
  position: relative;
  z-index: 1;
  margin: 4px 0 0;
  transition: opacity .5s var(--salida);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.js--girado .girar__pista { opacity: 0; }

/* ---------- Precio ---------- */

.hero__precio {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}
.precio-antes {
  font-family: var(--texto-ff);
  font-size: 16px;
  color: var(--texto-tenue);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-variant-numeric: lining-nums tabular-nums;
}
.precio-ahora {
  font-family: var(--texto-ff);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--crema);
  font-variant-numeric: lining-nums tabular-nums;
}
.oferta__precio { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.oferta__precio .precio-antes { font-size: clamp(17px, 4.4vw, 22px); }
.oferta__precio .precio-ahora { font-size: clamp(40px, 10vw, 58px); font-weight: 500; }

/* ---------- Cuenta atrás de la oferta ---------- */

.cuenta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  padding: 7px 15px 7px 12px;
  border: 1px solid rgba(200, 167, 91, .3);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--texto-medio);
}
.cuenta[hidden] { display: none !important; }
.cuenta__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dorado);
  box-shadow: 0 0 0 4px rgba(200, 167, 91, .16);
  animation: pulso 2.4s ease-in-out infinite;
}
@keyframes pulso {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) { .cuenta__punto { animation: none; } }
.cuenta strong {
  color: var(--crema);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.oferta .cuenta { margin: 0 0 18px; }

/* ---------- Valoraciones ---------- */

.resenas { display: grid; gap: 16px; margin-top: 44px; }
.resena {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea-suave);
  padding: 26px 24px 24px;
  background: var(--carbon);
  transition: border-color .2s var(--salida);
}
.resena__estrellas { display: flex; gap: 3px; margin: 0 0 14px; }
.resena__estrellas svg { width: 15px; height: 15px; color: var(--dorado); }
.resena__texto {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(17px, 4.2vw, 19px);
  line-height: 1.45;
  color: var(--texto);
}
.resena__firma {
  margin: auto 0 0;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.resena__aviso {
  margin: 20px 0 0;
  padding: 12px 16px;
  border: 1px dashed rgba(200, 167, 91, .45);
  color: var(--dorado);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- Oferta ---------- */

.oferta__caja {
  display: grid;
  gap: 34px;
  border: 1px solid var(--linea);
  padding: 30px 22px 34px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 22% 50%, rgba(44, 87, 69, .30) 0%, rgba(5, 6, 7, 0) 62%),
    radial-gradient(90% 80% at 88% 4%, rgba(29, 58, 46, .26) 0%, rgba(5, 6, 7, 0) 66%),
    linear-gradient(160deg, #101918 0%, #0A0D0E 52%, #070809 100%);
}
.oferta__caja::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(200, 167, 91, .16), rgba(200, 167, 91, 0) 34%);
  mix-blend-mode: screen;
}
.oferta__media { position: relative; margin: 0; justify-self: center; width: min(280px, 72vw); }
.oferta__media .revela { position: relative; z-index: 1; }
.oferta__media img { width: 100%; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55)); }
.oferta__nombre { font-family: var(--display); font-size: clamp(31px, 7.6vw, 44px); line-height: 1.04; margin: 10px 0 20px; }
.oferta__lista { display: grid; margin-bottom: 26px; border-top: 1px solid var(--linea-suave); }
.oferta__lista li {
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--linea-suave);
  position: relative;
  font-size: 15px;
  color: var(--texto-medio);
}
.oferta__lista li::before {
  content: "";
  position: absolute; left: 0; top: 20px;
  width: 12px; height: 1px;
  background: var(--dorado);
}
.oferta__precio { font-family: var(--display); font-size: clamp(38px, 10vw, 56px); line-height: 1; margin: 0 0 6px; color: var(--crema); }
.oferta__pago { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-tenue); margin-bottom: 22px; }
.oferta__seguro { font-size: 12px; color: var(--texto-tenue); margin: 14px 0 0; text-align: center; }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--linea-suave); }
.faq__item { border-bottom: 1px solid var(--linea-suave); }
.faq h3 { margin: 0; }
.faq__p {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--texto);
  font-family: var(--display);
  font-size: clamp(19px, 4.8vw, 23px);
  line-height: 1.2;
  text-align: left;
  transition: color .3s var(--curva);
}
.faq__signo { position: relative; width: 14px; height: 14px; flex: none; }
.faq__signo::before, .faq__signo::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform .26s var(--salida), opacity .26s var(--salida);
}
.faq__signo::before { top: 6.5px; left: 0; width: 14px; height: 1px; }
.faq__signo::after  { top: 0; left: 6.5px; width: 1px; height: 14px; }
.faq__p[aria-expanded="true"] .faq__signo::after { transform: scaleY(0); opacity: 0; }
/* El panel se despliega en vez de aparecer de golpe. Un elemento que surge de
   la nada se lee como un fallo, no como una respuesta.

   El truco del grid de 0fr a 1fr anima la altura sin tener que saber de
   antemano cuánto mide el texto, que es lo que hacía imposible animarlo antes.
   Sin JavaScript no se despliega nada, así que el atributo hidden se queda
   como estaba y sólo lo sustituye este mecanismo cuando hay JS. */
.js .faq__r {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .34s var(--salida), opacity .22s var(--salida);
}
.js .faq__r > * { overflow: hidden; }
.js .faq__r.abierto { grid-template-rows: 1fr; opacity: 1; }

.faq__r { padding: 0 0 22px; }
.js .faq__r { padding-bottom: 0; }
.js .faq__r.abierto { padding-bottom: 22px; }
.faq__r p { margin: 0; color: var(--texto-medio); font-size: 16px; line-height: 1.65; max-width: 58ch; }

/* ---------- Cierre ---------- */

.final {
  padding-block: var(--bloque);
  background:
    radial-gradient(80% 70% at 18% 20%, rgba(44, 87, 69, .34) 0%, rgba(5, 6, 7, 0) 68%),
    var(--noche);
  overflow: hidden;
}
.final__caja { display: grid; gap: 40px; }
.final .titular { margin-bottom: 28px; max-width: 15ch; }
.final .boton { width: 100%; }
.final__nota { margin: 16px 0 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-tenue); }
.final__media { position: relative; margin: 0; justify-self: center; width: min(270px, 70vw); }
.final__media .revela { position: relative; z-index: 1; }
.final__media img { width: 100%; filter: drop-shadow(0 30px 45px rgba(0, 0, 0, .55)); }

/* ---------- Pie ---------- */

.pie { padding-block: 34px; border-top: 1px solid var(--linea-suave); background: var(--noche); }
.pie__caja { display: grid; gap: 18px; text-align: center; }
.pie__marca { font-family: var(--display); font-size: 20px; margin: 0; color: var(--crema); }
.pie__enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; }
.pie__enlaces a { font-size: 13px; color: var(--texto-tenue); text-decoration: none; padding: 6px 0; transition: color .3s var(--curva); }
.pie__copy { margin: 0; font-size: 12px; color: var(--texto-tenue); }

/* ---------- Páginas legales ---------- */

.doc { padding: 130px 0 var(--bloque); }
.doc__marco { max-width: 780px; }
.doc .titular { margin-top: 14px; }
.doc__fecha {
  margin: 18px 0 44px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--linea);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.doc h2 {
  font-family: var(--display);
  font-variant-numeric: lining-nums;
  font-size: clamp(23px, 5.4vw, 30px);
  line-height: 1.2;
  margin: 42px 0 14px;
  color: var(--crema);
}
.doc p, .doc li { color: var(--texto-medio); font-size: 16px; line-height: 1.7; }
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 18px; }
.doc ul li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.doc ul li::before {
  content: "";
  position: absolute; left: 0; top: 13px;
  width: 10px; height: 1px;
  background: var(--dorado);
}
.doc strong { color: var(--texto); font-weight: 500; }
.doc a { color: var(--dorado); }

.doc__datos { margin: 0 0 20px; border-top: 1px solid var(--linea-suave); }
.doc__datos li {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linea-suave);
}
.doc__datos li::before { display: none; }
.doc__datos li { padding-left: 0; }
.doc__datos span {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.doc__pendiente {
  margin-bottom: 36px;
  padding: 16px 20px;
  border: 1px dashed rgba(200, 167, 91, .45);
  color: var(--dorado);
  font-size: 14px;
  line-height: 1.6;
}
.doc__pendiente strong { color: var(--dorado); }

.doc__volver { margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--linea-suave); }
.doc__volver a { text-decoration: none; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }

@media (min-width: 720px) {
  .doc__datos li { grid-template-columns: 200px 1fr; align-items: baseline; gap: 16px; }
}

/* ---------- Barra fija de móvil ---------- */

.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 12px var(--aire) calc(12px + env(safe-area-inset-bottom));
  background: rgba(5, 6, 7, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linea-suave);
  transform: translateY(110%);
  transition: transform .34s var(--salida);
}
.barra.visible { transform: translateY(0); }
.barra .boton { min-height: 52px; }
@media (min-width: 900px) { .barra { display: none !important; } }

/* ---------- Aviso ---------- */

.aviso {
  position: fixed;
  left: 50%; bottom: 96px;
  z-index: 120;
  transform: translate(-50%, 10px);
  max-width: calc(100vw - 32px);
  padding: 14px 24px;
  background: var(--crema);
  color: var(--noche);
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transition: opacity .3s var(--curva), transform .3s var(--curva);
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Animaciones
   ========================================================================== */

.js .rev { opacity: 0; transform: translateY(14px); transition: opacity .62s var(--salida), transform .62s var(--salida); }
.js .rev.dentro { opacity: 1; transform: none; }

.js [data-lineas] .linea { display: block; overflow: hidden; }
.js [data-lineas] .linea > span {
  display: block;
  transform: translateY(105%);
  transition: transform .78s var(--curva);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js [data-lineas].dentro .linea > span { transform: none; }

.js .revela { overflow: hidden; }
.js .revela > img,
.js .revela > video,
.js .revela > .libro3d {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.05);
  transition: clip-path .95s var(--curva), transform 1.2s var(--curva);
}
.js .revela.dentro > img,
.js .revela.dentro > video,
.js .revela.dentro > .libro3d { clip-path: inset(0 0 0 0); transform: none; }
.js .revela--lento > img,
.js .revela--lento > video,
.js .revela--lento > .libro3d { transition-duration: 1.2s, 1.5s; }

/* Cuando varias piezas entran a la vez, entran una detrás de otra. Aparecer
   todas de golpe se lee como un salto; escalonarlas, como una cascada.
   55 ms: por debajo no se nota, por encima se hace lento. */
.js [data-escalonado] > .rev:nth-child(2),
.js [data-escalonado] > .revela:nth-child(2) { transition-delay: 55ms; }
.js [data-escalonado] > .rev:nth-child(3),
.js [data-escalonado] > .revela:nth-child(3) { transition-delay: 110ms; }
.js [data-escalonado] > .rev:nth-child(4) { transition-delay: 165ms; }
.js [data-escalonado] > .rev:nth-child(5) { transition-delay: 220ms; }
.js [data-escalonado] > .rev:nth-child(6) { transition-delay: 275ms; }
.js [data-escalonado] > .rev:nth-child(7) { transition-delay: 330ms; }
.js [data-escalonado] > .rev:nth-child(8) { transition-delay: 385ms; }

/* ---------- Respuesta al dedo ----------
   Funciona en ratón y en táctil, y es lo que hace que la interfaz parezca que
   te está escuchando. 140 ms: por encima se nota el retardo. */
.boton:active,
.enlace-boton:active { transform: scale(.975); }
.faq__p:active .faq__signo { transform: scale(.9); }
.cookies__boton:active { transform: scale(.98); }
.acuerdo:active { transform: scale(.995); }
.control:active { transform: translateX(-50%) scale(.96); }

/* ---------- Hover ----------
   Todo el hover vive aquí dentro. En una pantalla táctil el primer toque deja
   el :hover pegado hasta que tocas en otro sitio, y un botón que se queda
   iluminado después de pulsarlo parece roto. */
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: transparent; color: var(--crema); border-color: var(--crema); }
  .enlace-boton:hover { background: var(--crema); color: var(--noche); }
  .control:hover { background: rgba(5, 6, 7, .95); }
  .girar:hover { color: var(--crema); border-color: var(--crema); }
  .resena:hover { border-color: var(--linea); }
  .faq__p:hover { color: var(--dorado); }
  .pie__enlaces a:hover { color: var(--crema); }
  .pie__ajuste:hover { color: var(--crema); }
  .doc__volver a:hover { text-decoration: underline; }
  .acuerdo:hover { border-color: var(--linea); }
  .cookies__boton:hover { background: transparent; color: var(--crema); }
  .cookies__boton--tenue:hover { background: transparent; color: var(--crema); border-color: var(--crema); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-escalonado] > .rev,
  .js [data-escalonado] > .revela { transition-delay: 0ms !important; }
  .js .rev,
  .js [data-lineas] .linea > span,
  .js .revela > img,
  .js .revela > video,
  .js .revela > .libro3d { opacity: 1; transform: none; clip-path: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (min-width: 720px) {
  body { font-size: 17.5px; }
  .hero__acciones { flex-direction: row; align-items: center; gap: 24px; }
  .hero__acciones .boton { width: auto; }
  .tira { grid-template-columns: repeat(4, 1fr); }
  .veredictos { grid-template-columns: repeat(3, 1fr); }
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .paso { grid-template-columns: 1fr; gap: 10px; padding: 26px 24px; }
  .muestras { grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
  .final .boton { width: auto; }
  .oferta__caja { padding: 44px; }
}

/* ==========================================================================
   Escritorio
   ========================================================================== */
@media (min-width: 900px) {
  .enlace-boton { display: inline-flex; }

  .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 124px; padding-bottom: 24px; }
  .hero__caja { grid-template-columns: 1.08fr .92fr; align-items: center; gap: 56px; }
  .hero__figura { width: min(560px, 100%); justify-self: end; }
  .hero__pie { margin-top: auto; padding-top: 44px; }

  .bloque__cuerpo { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
  .ruta { gap: 10px 44px; }

  .producto__caja { grid-template-columns: .72fr 1.28fr; align-items: center; gap: 56px; }
  .producto__media { width: 100%; max-width: 300px; justify-self: start; }

  .rejilla { grid-template-columns: repeat(4, 1fr); }

  .oferta__caja { grid-template-columns: .74fr 1.26fr; align-items: center; gap: 56px; padding: 56px; }
  .oferta__media { width: 100%; max-width: 270px; justify-self: center; }

  .final__caja { grid-template-columns: 1.2fr .8fr; align-items: center; gap: 64px; }
  .final__media { width: 100%; max-width: 340px; justify-self: end; }

  .pie__caja { grid-template-columns: auto 1fr auto; align-items: center; text-align: left; gap: 36px; }
  .pie__enlaces { justify-content: center; }

  .faq { max-width: 860px; }
  .resenas { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* ==========================================================================
   Compra, confirmación y cookies
   ========================================================================== */

/* La nota que sustituye al precio tachado */
.oferta-nota {
  margin: 10px 0 0;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--dorado);
}

/* ---------- Bloques de la página de compra ---------- */

.compra {
  margin: 34px 0;
  padding: 26px 22px;
  border: 1px solid var(--linea-suave);
  background: var(--carbon);
}
.compra h2 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: 22px;
  color: var(--crema);
}
.compra h3 {
  margin: 22px 0 6px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dorado);
  font-weight: 500;
}
.compra h3:first-of-type { margin-top: 0; }
.compra p { color: var(--texto-medio); font-size: 15.5px; line-height: 1.65; margin: 0 0 12px; }
.compra p:last-child { margin-bottom: 0; }
.compra a { color: var(--dorado); }
.compra strong { color: var(--texto); font-weight: 500; }

.compra__linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--linea-suave);
}
.compra__nombre {
  margin: 0 0 4px !important;
  font-family: var(--display);
  font-size: 21px;
  color: var(--crema) !important;
}
.compra__detalle { margin: 0 !important; font-size: 14px !important; }
.compra__precio {
  margin: 0 !important;
  font-size: 22px;
  color: var(--crema) !important;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

.compra__cuentas { margin: 18px 0 0; }
.compra__cuentas > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linea-suave);
  font-size: 14.5px;
}
.compra__cuentas dt { color: var(--texto-tenue); flex: 0 0 auto; }
.compra__cuentas dd { color: var(--texto-medio); text-align: right; }
.compra__cuentas .compra__total {
  border-bottom: 0;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
}
.compra__total dt { color: var(--texto) !important; }
.compra__total dd {
  color: var(--crema) !important;
  font-size: 19px;
  font-variant-numeric: lining-nums tabular-nums;
}

.compra__nota { margin: 14px 0 0 !important; font-size: 13px !important; color: var(--dorado) !important; }
.compra--info { background: transparent; }
.compra--form { background: var(--carbon-2); }

/* ---------- Las casillas ---------- */

.acuerdo {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 15px 16px;
  border: 1px solid var(--linea-suave);
  background: rgba(244, 241, 232, .02);
  cursor: pointer;
  transition: border-color .2s var(--salida), transform .14s var(--salida);
}
.acuerdo input {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  margin: 1px 0 0;
  accent-color: var(--dorado);
  cursor: pointer;
}
.acuerdo span { font-size: 14.5px; line-height: 1.6; color: var(--texto-medio); }
.acuerdo strong { color: var(--texto); font-weight: 500; }
.acuerdo a { color: var(--dorado); }
.acuerdo:focus-within { border-color: var(--dorado); }

.compra__error {
  margin: 0 0 16px !important;
  padding: 12px 14px;
  border-left: 2px solid var(--mal);
  background: rgba(192, 57, 47, .09);
  color: var(--texto) !important;
  font-size: 14.5px !important;
}
.compra__seguro { margin-top: 14px !important; font-size: 13px !important; color: var(--texto-tenue) !important; }

#boton-pagar[disabled] { opacity: .6; cursor: progress; }

.gracias__descarga { margin: 26px 0 8px; }

@media (min-width: 768px) {
  .compra { padding: 32px 30px; }
}

/* ---------- Enlace de ajustes de cookies en el pie ---------- */

.pie__ajuste {
  appearance: none;
  border: 0;
  background: none;
  padding: 6px 0;
  font: inherit;
  font-size: 13px;
  color: var(--texto-tenue);
  cursor: pointer;
  transition: color .3s var(--curva);
}

/* ---------- Cartel de cookies ----------
   Sólo aparece si hay algo que consentir; ver cookies.js. */

.cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 400;
  padding: var(--aire);
  padding-bottom: calc(var(--aire) + env(safe-area-inset-bottom, 0px));
  background: rgba(5, 6, 7, .97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linea);
  transform: translateY(100%);
  transition: transform .34s var(--salida);
}
.cookies.visible { transform: translateY(0); }
.cookies__caja { width: 100%; max-width: 780px; margin-inline: auto; }
.cookies__titulo { margin: 0 0 8px; font-family: var(--display); font-size: 22px; color: var(--crema); }
.cookies__texto { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--texto-medio); }
.cookies__texto a { color: var(--dorado); }

.cookies__panel {
  margin: 0 0 18px;
  max-height: 34dvh;
  overflow-y: auto;
  /* Al llegar al final del panel, que no arrastre la página de detrás. */
  overscroll-behavior: contain;
  border-top: 1px solid var(--linea-suave);
}
.cookies__fila {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 2px;
  border-bottom: 1px solid var(--linea-suave);
  cursor: pointer;
}
.cookies__fila--fija { cursor: default; opacity: .62; margin: 0; }
.cookies__fila input { flex: 0 0 auto; width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--dorado); }
.cookies__fila span { font-size: 13.5px; line-height: 1.55; color: var(--texto-medio); }
.cookies__fila strong { display: block; color: var(--texto); font-weight: 500; font-size: 14px; }

.cookies__botones { display: flex; flex-wrap: wrap; gap: 10px; }
/* Aceptar y Rechazar comparten tamaño, color y peso a propósito. */
.cookies__boton {
  flex: 1 1 auto;
  min-width: 150px;
  appearance: none;
  padding: 13px 20px;
  border: 1px solid var(--crema);
  background: var(--crema);
  color: var(--noche);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .3s var(--curva), color .3s var(--curva);
}
.cookies__boton--tenue {
  background: transparent;
  color: var(--texto-medio);
  border-color: var(--linea-suave);
  flex: 0 1 auto;
}

@media (min-width: 620px) {
  .cookies__boton { flex: 0 1 auto; }
}

/* ---------- Tablas, listas numeradas y formularios de las páginas legales ---------- */

.doc__tabla {
  width: 100%;
  margin: 0 0 22px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.doc__tabla caption {
  text-align: left;
  padding-bottom: 10px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dorado);
}
.doc__tabla th,
.doc__tabla td {
  padding: 11px 12px;
  text-align: left;
  border-bottom: 1px solid var(--linea-suave);
  color: var(--texto-medio);
  vertical-align: top;
}
.doc__tabla th {
  color: var(--texto);
  font-weight: 500;
  border-bottom-color: var(--linea);
  white-space: nowrap;
}
.doc__tabla-vacia { text-align: center !important; color: var(--texto-tenue) !important; font-style: italic; }

/* En móvil la tabla se desplaza en horizontal en lugar de romper la página */
@media (max-width: 719px) {
  .doc__tabla { display: block; overflow-x: auto; white-space: nowrap; }
}

.doc__pasos {
  counter-reset: paso;
  margin: 0 0 20px;
}
.doc__pasos li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 12px;
  color: var(--texto-medio);
  font-size: 16px;
  line-height: 1.7;
}
.doc__pasos li::before {
  counter-increment: paso;
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  text-align: center;
  font-size: 12px;
  line-height: 1.95;
  color: var(--dorado);
  border: 1px solid var(--linea);
  font-variant-numeric: lining-nums tabular-nums;
}

.doc__formulario {
  margin: 0 0 22px;
  padding: 24px 22px;
  border: 1px solid var(--linea-suave);
  background: var(--carbon);
}
.doc__formulario p { font-size: 15px; color: var(--texto-medio); }
.doc__formulario p:last-child { margin-bottom: 0; }

/* Entradilla de la página de compra: frase normal, no la línea en versalitas
   que llevan las páginas legales para la fecha de actualización. */
.doc__entradilla {
  margin: 16px 0 6px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto-medio);
  max-width: 58ch;
}