/* ============================================================
   Minimals · portada «Taller de Ibiza» v8.2 (revisión de textos y visual; solo España) · paleta J · revisión de textos y visual, solo España (v8.2)
   Construido desde src/portada.html con tools/construir.mjs.
   ============================================================ */

/* Fuente propia (solo mayúsculas): logotipo y titulares */
@font-face {
  font-family: "Minimals";
  src: url("medios/Minimals-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Atkinson Hyperlegible 400 y 700. En la web final: dos ficheros .woff2 alojados en el
   dominio. En esta maqueta van incrustados para no depender de Google. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("medios/fuentes/atkinson-hyperlegible-1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("medios/fuentes/atkinson-hyperlegible-2.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fijos en todas las paletas (una paleta puede pisarlos: va después) */
  --tinta: #1F3A34;
  --tinta-marca: #1E2826;    /* contorno exterior del wordmark */
  --crema: #FFF8EE;          /* texto sobre tinta y contorno interior del wordmark */
  --texto-2: #4A6558;        /* secundario: AA sobre menta y sobre crema-melocotón */
  --ok: #2E7D4F;
  --error: #B3261E;

  /* Los ocho colores caramelo del wordmark de la bolsa, medidos */
  --c-coral: #F15B51; --c-naranja: #D7670E; --c-amarillo: #DBB017; --c-verde: #6ABC38;
  --c-turquesa: #05B4B0; --c-azul: #0689D9; --c-morado: #8756CA; --c-rosa: #C94170;

  /* La bolsa es la bolsa: sus colores no cambian con la paleta */
  --bolsa: #D9E5DB; --bolsa-aviso: #F6D5C6; --bolsa-anillo: #FFF8EE;

  /* Superficies por zona (cada paleta puede cambiarlas; por defecto, la v3) */
  --barra-fondo: var(--tinta);      --barra-texto: var(--crema);
  --cabecera-fondo: var(--fondo);
  --hero-fondo: var(--panel);       --hero-borde: var(--panel-borde);
  --banda-fondo: var(--tinta);      --banda-texto: var(--crema);
  --figuras-fondo: var(--fondo);
  --dias-fondo: var(--tarjeta-en-panel);
  --taller-fondo: var(--panel);     --taller-borde: var(--panel-borde);
  --packs-fondo: var(--fondo);
  --confianza-fondo: var(--tarjeta); --confianza-borde: var(--tarjeta-borde);
  --pie-fondo: var(--tinta);        --pie-texto: var(--crema);  --pie-linea: rgba(255, 248, 238, 0.2);
  --bandeja-fondo: var(--tarjeta-en-panel);
  --halo: var(--crema);             /* contorno claro de titulares y wordmark */
  --icono-1: var(--c-coral); --icono-2: var(--c-amarillo); --icono-3: var(--c-turquesa); --icono-4: var(--c-verde); /* iconos de la banda */

  /* Tipo */
  --display: "Minimals", "Atkinson Hyperlegible", sans-serif;
  --texto: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  /* Ritmo */
  --seccion: 88px;
  --gutter: 40px;
  --contenedor: 1200px;
  --hueco-rejilla: 16px;
  --relleno-tarjeta: 20px;
  --radio-tarjeta: 16px;
  --radio-foto: 12px;

  /* Movimiento */
  --dur: 180ms;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rebote: cubic-bezier(0.34, 1.45, 0.64, 1); /* solo para el rebote de pulsar y los saltos */

  /* Capas */
  --z-sticky: 10;
  --z-bandeja: 15;
  --z-panel: 20;
}

/* Paleta (src/paleta-*.css): va después de los fijos para poder pisarlos */
/* Paleta J · «Cielo crema» para la v5.3: la I más el mapa de COLORES.md.
   CTA principal en el coral de la M (#F25B4F) con blanco (19 px 700: texto grande, 3,29:1),
   secundario en contorno coral con marino; verde de la M oscurecido lo justo (#4A9F21,
   3,35:1 sobre blanco) para el paso 2, la banda de confianza y el éxito; foco marino. */
:root {
  --tinta: #1E3A5F;  --texto-2: #3D5A7A;
  --sombra: #12263F;
  --sombra-tarjeta: #E8D5BB;

  --c-coral: #F25B4F; --c-amarillo: #E7BB1B; --c-turquesa: #01B6B4; --c-morado: #8755CB;
  --c-verde: #6CBF3A; --c-naranja: #E66F10; --c-azul: #018ADC; --c-rosa: #C7436F;
  --t-coral: #F25B4F;  --t-naranja: #E66F10;  --t-azul: #018ADC;  --t-morado: #8755CB;  --t-rosa: #C7436F;
  --t-verde: #4A9F21;  --t-turquesa: #018ADC;

  /* Acción */
  --cta: #F25B4F;  --cta-texto: #FFFFFF;  --cta-borde: #1E3A5F;
  --foco: #1E3A5F;
  --acento: #F25B4F;  --acento-texto: #B8362F;
  --exito: #4A9F21;  --error: #B3261E;
  --confianza-icono: #3F9A1F;

  --fondo: #FFF4E4;  --panel: #FFF4E4;  --panel-borde: #F0D9BC;
  --tarjeta: #FFFFFF;  --tarjeta-borde: #EBD6B9;  --tarjeta-en-panel: #FFFFFF;  --hueco: #C9B8A4;
  --pegatina: #FFFFFF;  --pegatina-texto: #1E3A5F;  --pegatina-precio: #F25B4F;
  --lista: #4A9F21;  --lista-texto: #FFFFFF;
  --chip: #F2A98F;
  --paso-1: #F25B4F;  --paso-2: #4A9F21;  --paso-3: #8755CB;
  --icono-banda: #1E3A5F;

  --barra-fondo: #FBE7A6;  --barra-texto: #1E3A5F;
  --cabecera-fondo: #FFFFFF;
  --hero-fondo: #FFF4E4;  --hero-borde: #F0D9BC;
  --banda-fondo: #FBE7A6;  --banda-texto: #1E3A5F;
  --icono-1: #1E3A5F;  --icono-2: #1E3A5F;  --icono-3: #1E3A5F;  --icono-4: #1E3A5F;
  --dias-fondo: #FFFFFF;
  --figuras-fondo: #FFF4E4;
  --taller-fondo: #FFFFFF;  --taller-borde: #EBD6B9;
  --packs-fondo: #FFF4E4;
  --confianza-fondo: #FFFFFF;  --confianza-borde: #EBD6B9;
  --pie-fondo: #D3E8F6;  --pie-texto: #1E3A5F;  --pie-linea: rgba(30, 58, 95, 0.15);
  --bandeja-fondo: #FFFFFF;
  --halo: #FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}
body[data-con-pack="si"] { padding-bottom: 96px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
output { display: inline; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }

.contenedor { max-width: calc(var(--contenedor) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* Titulares: fuente propia, solo mayúsculas */
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.08; text-wrap: balance; }
.display--64 { font-size: 80px; line-height: 1.04; }
.display--40 { font-size: 56px; }
.display--24 { font-size: 30px; line-height: 1.15; }
.texto-2 { color: var(--texto-2); }
.solo-estrecho { display: none; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------
   Wordmark de la bolsa: cada letra de un color caramelo, contorno
   blanco grueso y contorno oscuro fino, un poco abombadas.
   Dos capas de contorno con pseudo-elementos (el trazo va centrado
   en el borde del glifo: la mitad exterior es la que se ve).
   ------------------------------------------------------------ */
.marca {
  font-family: var(--display); text-transform: uppercase; font-weight: 400;
  display: inline-flex; align-items: baseline; gap: 0.34em; line-height: 1;
  font-size: 44px; text-decoration: none; padding: 0.12em 0.2em 0.14em 0.12em; white-space: nowrap;
}
.marca__l {
  position: relative; z-index: 0; display: inline-block; color: var(--c);
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0));
}
.marca__l::before, .marca__l::after { content: none; }
.marca__l { text-shadow: 0.110em 0.000em 0 var(--halo), 0.102em 0.042em 0 var(--halo), 0.078em 0.078em 0 var(--halo), 0.042em 0.102em 0 var(--halo), 0.000em 0.110em 0 var(--halo), -0.042em 0.102em 0 var(--halo), -0.078em 0.078em 0 var(--halo), -0.102em 0.042em 0 var(--halo), -0.110em 0.000em 0 var(--halo), -0.102em -0.042em 0 var(--halo), -0.078em -0.078em 0 var(--halo), -0.042em -0.102em 0 var(--halo), -0.000em -0.110em 0 var(--halo), 0.042em -0.102em 0 var(--halo), 0.078em -0.078em 0 var(--halo), 0.102em -0.042em 0 var(--halo), 0.056em 0.023em 0 var(--halo), 0.023em 0.056em 0 var(--halo), -0.023em 0.056em 0 var(--halo), -0.056em 0.023em 0 var(--halo), -0.056em -0.023em 0 var(--halo), -0.023em -0.056em 0 var(--halo), 0.023em -0.056em 0 var(--halo), 0.056em -0.023em 0 var(--halo), 0.167em 0.033em 0 var(--tinta-marca), 0.141em 0.094em 0 var(--tinta-marca), 0.094em 0.141em 0 var(--tinta-marca), 0.033em 0.167em 0 var(--tinta-marca), -0.033em 0.167em 0 var(--tinta-marca), -0.094em 0.141em 0 var(--tinta-marca), -0.141em 0.094em 0 var(--tinta-marca), -0.167em 0.033em 0 var(--tinta-marca), -0.167em -0.033em 0 var(--tinta-marca), -0.141em -0.094em 0 var(--tinta-marca), -0.094em -0.141em 0 var(--tinta-marca), -0.033em -0.167em 0 var(--tinta-marca), 0.033em -0.167em 0 var(--tinta-marca), 0.094em -0.141em 0 var(--tinta-marca), 0.141em -0.094em 0 var(--tinta-marca), 0.167em -0.033em 0 var(--tinta-marca), 0.140em 0.000em 0 var(--tinta-marca), 0.099em 0.099em 0 var(--tinta-marca), 0.000em 0.140em 0 var(--tinta-marca), -0.099em 0.099em 0 var(--tinta-marca), -0.140em 0.000em 0 var(--tinta-marca), -0.099em -0.099em 0 var(--tinta-marca), -0.000em -0.140em 0 var(--tinta-marca), 0.099em -0.099em 0 var(--tinta-marca); }
.marca { filter: drop-shadow(0.05em 0.07em 0 var(--tinta-marca)); }
.marca__l:nth-child(1) { --i: 0; --c: var(--c-coral);    --r: -4deg; --y: 0.02em; }
.marca__l:nth-child(2) { --i: 1; --c: var(--c-amarillo);  --r: 3deg;  --y: -0.03em; }
.marca__l:nth-child(3) { --i: 2; --c: var(--c-turquesa); --r: -2deg; --y: 0.03em; }
.marca__l:nth-child(4) { --i: 3; --c: var(--c-morado);    --r: 3deg;  --y: -0.02em; }
.marca__l:nth-child(5) { --i: 4; --c: var(--c-verde); --r: -3deg; --y: 0.02em; }
.marca__l:nth-child(6) { --i: 5; --c: var(--c-naranja);     --r: 2deg;  --y: -0.03em; }
.marca__l:nth-child(7) { --i: 6; --c: var(--c-azul);   --r: -2deg; --y: 0.03em; }
.marca__l:nth-child(8) { --i: 7; --c: var(--c-rosa);     --r: 4deg;  --y: -0.01em; }
.marca--26 { font-size: 26px; }

/* Texto "burbuja" de la bolsa: blanco con contorno oscuro (una sola capa) */
.burbuja {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.2em; line-height: 1;
  position: relative; z-index: 0; display: inline-block; color: #fff; white-space: nowrap;
}
.burbuja::before { content: none; }
.burbuja { text-shadow: 0.090em 0.000em 0 var(--tinta-marca), 0.083em 0.034em 0 var(--tinta-marca), 0.064em 0.064em 0 var(--tinta-marca), 0.034em 0.083em 0 var(--tinta-marca), 0.000em 0.090em 0 var(--tinta-marca), -0.034em 0.083em 0 var(--tinta-marca), -0.064em 0.064em 0 var(--tinta-marca), -0.083em 0.034em 0 var(--tinta-marca), -0.090em 0.000em 0 var(--tinta-marca), -0.083em -0.034em 0 var(--tinta-marca), -0.064em -0.064em 0 var(--tinta-marca), -0.034em -0.083em 0 var(--tinta-marca), -0.000em -0.090em 0 var(--tinta-marca), 0.034em -0.083em 0 var(--tinta-marca), 0.064em -0.064em 0 var(--tinta-marca), 0.083em -0.034em 0 var(--tinta-marca), 0.046em 0.019em 0 var(--tinta-marca), 0.019em 0.046em 0 var(--tinta-marca), -0.019em 0.046em 0 var(--tinta-marca), -0.046em 0.019em 0 var(--tinta-marca), -0.046em -0.019em 0 var(--tinta-marca), -0.019em -0.046em 0 var(--tinta-marca), 0.019em -0.046em 0 var(--tinta-marca), 0.046em -0.019em 0 var(--tinta-marca); }

/* ------------------------------------------------------------
   v3 · Titulares de caramelo: cada titular (o cada palabra del h1) con un color del
   wordmark oscurecido y el mismo doble contorno (crema grueso, oscuro fino).
   ------------------------------------------------------------ */
.cara { position: relative; z-index: 0; display: inline-block; color: var(--c, var(--tinta)); }
.cara::before, .cara::after { content: none; }
.cara { letter-spacing: 0.18em; text-shadow: 0.070em 0.000em 0 var(--halo), 0.065em 0.027em 0 var(--halo), 0.049em 0.049em 0 var(--halo), 0.027em 0.065em 0 var(--halo), 0.000em 0.070em 0 var(--halo), -0.027em 0.065em 0 var(--halo), -0.049em 0.049em 0 var(--halo), -0.065em 0.027em 0 var(--halo), -0.070em 0.000em 0 var(--halo), -0.065em -0.027em 0 var(--halo), -0.049em -0.049em 0 var(--halo), -0.027em -0.065em 0 var(--halo), -0.000em -0.070em 0 var(--halo), 0.027em -0.065em 0 var(--halo), 0.049em -0.049em 0 var(--halo), 0.065em -0.027em 0 var(--halo), 0.036em 0.015em 0 var(--halo), 0.015em 0.036em 0 var(--halo), -0.015em 0.036em 0 var(--halo), -0.036em 0.015em 0 var(--halo), -0.036em -0.015em 0 var(--halo), -0.015em -0.036em 0 var(--halo), 0.015em -0.036em 0 var(--halo), 0.036em -0.015em 0 var(--halo), 0.098em 0.020em 0 var(--tinta-marca), 0.083em 0.056em 0 var(--tinta-marca), 0.056em 0.083em 0 var(--tinta-marca), 0.020em 0.098em 0 var(--tinta-marca), -0.020em 0.098em 0 var(--tinta-marca), -0.056em 0.083em 0 var(--tinta-marca), -0.083em 0.056em 0 var(--tinta-marca), -0.098em 0.020em 0 var(--tinta-marca), -0.098em -0.020em 0 var(--tinta-marca), -0.083em -0.056em 0 var(--tinta-marca), -0.056em -0.083em 0 var(--tinta-marca), -0.020em -0.098em 0 var(--tinta-marca), 0.020em -0.098em 0 var(--tinta-marca), 0.056em -0.083em 0 var(--tinta-marca), 0.083em -0.056em 0 var(--tinta-marca), 0.098em -0.020em 0 var(--tinta-marca), 0.085em 0.000em 0 var(--tinta-marca), 0.060em 0.060em 0 var(--tinta-marca), 0.000em 0.085em 0 var(--tinta-marca), -0.060em 0.060em 0 var(--tinta-marca), -0.085em 0.000em 0 var(--tinta-marca), -0.060em -0.060em 0 var(--tinta-marca), -0.000em -0.085em 0 var(--tinta-marca), 0.060em -0.060em 0 var(--tinta-marca); filter: drop-shadow(0.05em 0.07em 0 var(--tinta-marca)); }
.display--24 .cara { filter: drop-shadow(0.06em 0.08em 0 var(--tinta-marca)); }
.display .cara + .cara { margin-left: 0.3em; }
.hero .cara { padding: 0.04em 0; }

/* ------------------------------------------------------------
   v3 · Movimiento: un gesto por sección, corto y con carácter.
   Todo transform/opacity; los flotados lentos son los únicos largos.
   ------------------------------------------------------------ */
@keyframes salto { 0% { transform: translateY(var(--y)) rotate(var(--r)); } 40% { transform: translateY(calc(var(--y) - 0.3em)) rotate(calc(var(--r) * -1)); } 100% { transform: translateY(var(--y)) rotate(var(--r)); } }
.marca--salta .marca__l { animation: salto 560ms var(--rebote) both; animation-delay: calc(var(--i) * 65ms + 120ms); }
@media (hover: hover) { .marca:hover .marca__l { animation: salto 480ms var(--rebote); animation-delay: calc(var(--i) * 45ms); } }

@keyframes aparece { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
.en-vista { animation: aparece 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }
.hero .cara { animation: aparece 560ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
.hero__parrafo, .hero__botones, .hero__nota { animation: aparece 560ms var(--ease-out) both; animation-delay: 420ms; }
.hero__botones { animation-delay: 500ms; }
.hero__nota { animation-delay: 580ms; }

@keyframes flota { from { transform: translateY(0) rotate(var(--g, 0deg)); } to { transform: translateY(-10px) rotate(calc(var(--g, 0deg) * -1)); } }
.escena__satelite { animation: flota 3.4s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.escena__satelite--1 { --d: 0s; --g: -3deg; }
.escena__satelite--2 { --d: -1.4s; --g: 4deg; }
.escena__satelite--3 { --d: -2.3s; --g: -2deg; }
@keyframes pop { from { opacity: 0; transform: scale(0.5) rotate(-12deg); } to { opacity: 1; transform: none; } }
.pegatina { animation: pop 520ms var(--rebote) both; animation-delay: 700ms; transition: transform var(--dur) var(--rebote); }
@media (hover: hover) { .escena:hover .pegatina { transform: rotate(-8deg) scale(1.06); } }

/* Confeti: puntos y píldoras de caramelo, como los de la bolsa, flotando despacio */
.con-confeti { position: relative; }
.con-confeti > .contenedor { position: relative; z-index: 1; }
.confeti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confeti i { position: absolute; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); opacity: 0.9; animation: flota 5.5s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.confeti i.pilla { width: 30px; height: 12px; border-radius: 999px; --g: -22deg; transform: rotate(-22deg); }
.confeti i.anillo { background: transparent; border: 4px solid var(--c); width: 18px; height: 18px; }

/* Banda de hechos: iconos de caramelo */
.hechos__lista li:nth-child(1) .icono { color: var(--icono-1); }
.hechos__lista li:nth-child(2) .icono { color: var(--icono-2); }
.hechos__lista li:nth-child(3) .icono { color: var(--icono-3); }
.hechos__lista li:nth-child(4) .icono { color: var(--icono-4); }
@keyframes menea { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg) scale(1.1); } 70% { transform: rotate(12deg) scale(1.1); } }
@media (hover: hover) { .hechos__lista li:hover .icono, .promesa:hover .icono { animation: menea 480ms var(--ease-out); } }

/* Figuras: la foto gira y se levanta al pasar; brinca al elegirla */
@keyframes brinca { 0% { transform: none; } 40% { transform: translateY(-10px) scale(1.12) rotate(8deg); } 100% { transform: none; } }
.redonda.brinca { animation: brinca 420ms var(--rebote); }
.figura[data-n]:not([data-n="0"]) .redonda { border: 4px solid var(--acento); }

/* Pasos: el número entra girando, la foto se inclina al pasar */
@keyframes gira { from { opacity: 0; transform: rotate(-200deg) scale(0.4); } to { opacity: 1; transform: none; } }
.en-vista .paso__numero { animation: gira 640ms var(--rebote) both; animation-delay: calc(var(--i, 0) * 55ms + 180ms); }
.paso__foto { transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .paso:hover .paso__foto { transform: rotate(-1.5deg) scale(1.02); } }

/* La bolsa se balancea despacio, como colgada */
@keyframes balancea { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
.bolsa { transform-origin: 50% -10%; animation: balancea 3.6s ease-in-out infinite alternate; transition: transform 220ms var(--ease-out); }
@media (hover: hover) { .pack:hover .bolsa { animation-duration: 1.2s; } }

/* Celebración a 6/6: la píldora late y sueltan confeti */
.pildora { position: relative; }
@keyframes late { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }
.pildora.late { animation: late 520ms var(--rebote); }
.fiesta { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.fiesta i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--c); animation: fiesta 760ms var(--ease-out) both; }
.fiesta i:nth-child(odd) { border-radius: 3px; width: 10px; height: 14px; }
@keyframes fiesta { from { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); } to { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.4) rotate(220deg); } }

/* ------------------------------------------------------------
   Píldoras
   ------------------------------------------------------------ */
.pildora {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-weight: 700; font-size: 19px; text-decoration: none; white-space: nowrap;
  border: 2px solid var(--tinta); box-shadow: 0 5px 0 var(--sombra);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 240ms var(--rebote), opacity var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow 120ms var(--ease-out);
}
.pildora--tinta { background: var(--cta); color: var(--cta-texto); border-color: var(--cta-borde); }
.pildora--contorno { background: #fff; color: var(--tinta); border-color: var(--cta); }
/* Grandes: los dos botones que llaman (hero y bajo la cuadrícula) */
.pildora--grande { min-height: 64px; padding: 0 36px; font-size: 20px; box-shadow: 0 7px 0 var(--sombra); }
.pildora--grande:active { transform: translateY(5px) scale(0.98); box-shadow: 0 1px 0 var(--sombra); }
.pildora:active { transform: translateY(4px) scale(0.98); box-shadow: 0 1px 0 var(--sombra); transition-duration: 90ms; }
.pildora[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.pildora--lista { background: var(--lista); color: var(--lista-texto); border-color: var(--tinta); }
@media (hover: hover) {
  .pildora--tinta:hover { background: color-mix(in srgb, var(--cta) 86%, var(--tinta)); }
  .pildora--contorno:hover { background: color-mix(in srgb, var(--cta) 10%, #fff); }
  .pildora:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 7px 0 var(--sombra); }
  .pildora--grande:hover { box-shadow: 0 9px 0 var(--sombra); }
  .pildora--lista:hover { background: color-mix(in srgb, var(--lista) 90%, #fff); }
}

/* Enlaces de texto */
.enlace { color: var(--acento-texto); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--dur) var(--ease); }
@media (hover: hover) { .enlace:hover { text-decoration-color: currentColor; } }

/* Iconos Lucide: línea 1,75 px, esquinas redondas */
.icono { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Fotos de estudio (fondo gris claro): se aclaran y se multiplican para que el fondo se funda con la tarjeta */
.foto-estudio { mix-blend-mode: multiply; filter: brightness(1.08) contrast(1.02); }
/* Foto de figura en círculo: la composición de la bolsa (círculos con anillo crema) */
.redonda { border-radius: 50%; overflow: hidden; aspect-ratio: 1; background: var(--tarjeta-en-panel); }
.redonda img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; }

/* ------------------------------------------------------------
   1. Barra de envío
   ------------------------------------------------------------ */
.barra-envio {
  background: var(--barra-fondo); color: var(--barra-texto);
  text-align: center; padding: 8px var(--gutter);
  font-size: 15px; font-weight: 700; line-height: 1.35;
}

/* ------------------------------------------------------------
   2. Cabecera
   ------------------------------------------------------------ */
.cabecera {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--cabecera-fondo); border-bottom: 1px solid var(--panel-borde);
}
.cabecera__fila { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.menu { display: flex; gap: 8px; }
.menu a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  font-weight: 700; text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
@media (hover: hover) { .menu a:hover { background: var(--tarjeta); } }
.cabecera__acciones { display: flex; align-items: center; gap: 4px; }
.boton-icono {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 999px;
  font-weight: 700; text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
@media (hover: hover) { .boton-icono:hover { background: var(--tarjeta); } }
.boton-icono--menu { display: none; }

/* Panel de móvil */
.panel-menu {
  position: fixed; inset: 0; z-index: var(--z-panel);
  background: var(--cabecera-fondo); padding: 16px;
  display: none; flex-direction: column;
}
.panel-menu[data-abierto="true"] { display: flex; }
.panel-menu__cabecera { height: 56px; display: flex; align-items: center; justify-content: space-between; }
.panel-menu__lista { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.panel-menu__lista a {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 28px;
  text-decoration: none; padding: 12px 8px; border-radius: 12px; display: block;
}
.panel-menu__pie { padding: 16px 8px 8px; border-top: 1px solid var(--panel-borde); color: var(--texto-2); font-size: 15px; }
body[data-menu="abierto"] { overflow: hidden; }

/* ------------------------------------------------------------
   3. Hero: panel menta, escena de círculos como en la bolsa
   ------------------------------------------------------------ */
.hero { background: var(--hero-fondo); border-bottom: 1px solid var(--hero-borde); padding: 64px 0 72px; }
.hero__rejilla { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; }
.hero__texto { max-width: 820px; }
.hero__parrafo { margin-top: 28px; font-size: 19px; max-width: 48ch; }
.hero__botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero__nota { margin-top: 16px; font-size: 15px; color: var(--texto-2); }
.escena { position: relative; padding: 28px 32px 36px 28px; }
.escena__grande {
  border-radius: 50%; overflow: hidden; aspect-ratio: 1;
  border: 6px solid var(--bolsa-anillo); background: var(--tarjeta-en-panel); box-shadow: 8px 10px 0 var(--sombra);
}
.escena__grande img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.12); }
.escena__satelite {
  position: absolute; width: 124px; border: 4px solid var(--bolsa-anillo); box-shadow: 4px 6px 0 var(--sombra); z-index: 1;
}
.escena__satelite--1 { left: -4px; top: 30%; }
.escena__satelite--2 { left: 14%; bottom: -6px; width: 108px; }
.escena__satelite--3 { right: -6px; bottom: 14%; width: 148px; }
.pegatina {
  position: absolute; top: -6px; right: -8px; width: 136px; height: 136px; border-radius: 50%; z-index: 2;
  background: #fff; color: var(--tinta);
  display: grid; place-items: center; align-content: center; text-align: center;
  border: 6px solid var(--acento); box-shadow: 6px 8px 0 var(--sombra);
}
.pegatina__precio { font-family: var(--display); font-size: 40px; line-height: 1; letter-spacing: 0.02em; color: var(--pegatina-precio); }
.pegatina__que { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; margin-top: 4px; }

/* ------------------------------------------------------------
   4. Banda de hechos
   ------------------------------------------------------------ */
.hechos { background: var(--banda-fondo); color: var(--banda-texto); }
.hechos__lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; min-height: 96px; align-items: center; padding-top: 16px; padding-bottom: 16px; }
.hechos__lista li { display: flex; align-items: center; gap: 14px; }
.hechos__lista .icono { color: var(--icono-banda); }
.hechos__lista strong { display: block; font-size: 16px; line-height: 1.3; }
.hechos__lista span { display: block; font-size: 14px; line-height: 1.35; color: var(--banda-texto); }

/* ------------------------------------------------------------
   v5.1 · Para los días de verdad (dolor → escena → cómo lo hace fácil un Minimal)
   ------------------------------------------------------------ */
.dias { background: var(--dias-fondo); padding: 72px 0 80px; }
.dias__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 72px; }
.dias__cabecera p { max-width: 44ch; font-size: 17px; }
.dias__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dia {
  background: #fff; border: 1px solid var(--tarjeta-borde); border-radius: var(--radio-tarjeta); box-shadow: 0 8px 0 var(--sombra-tarjeta);
  padding: 0 24px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; overflow: visible;
  transition: transform 240ms var(--rebote);
}
.dia .redonda { width: 128px; margin-top: -52px; background: #fff; border: 4px solid #fff; box-shadow: 4px 6px 0 var(--sombra); transition: transform 240ms var(--rebote); }
.dia__escena { margin-top: 16px; font-size: 20px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.dia__ayuda { margin-top: 10px; color: var(--texto-2); font-size: 16px; max-width: 30ch; }
.dia__ayuda strong { color: var(--tinta); }
@media (hover: hover) {
  .dia:hover { transform: translateY(-4px); }
  .dia:hover .redonda { transform: rotate(-7deg) scale(1.06); }
}
.dias__nota { text-align: center; margin-top: 40px; font-size: 16px; color: var(--texto-2); max-width: 60ch; margin-left: auto; margin-right: auto; }
@media (max-width: 1023px) { .dias__lista { grid-template-columns: 1fr; gap: 72px; } }
@media (max-width: 767px) {
  .dias { padding: 56px 0; }
  .dias__cabecera { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 64px; }
  .dias__lista { gap: 68px; }
  .dia .redonda { width: 112px; margin-top: -48px; }
  .dia__escena { font-size: 19px; }
}

/* ------------------------------------------------------------
   Secciones
   ------------------------------------------------------------ */
.seccion { padding: var(--seccion) 0; }
.seccion__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.seccion__cabecera p { max-width: 46ch; font-size: 17px; }
.seccion--figuras { background: var(--figuras-fondo); }
.seccion--packs { background: var(--packs-fondo); }
.seccion--panel { background: var(--taller-fondo); border-top: 1px solid var(--taller-borde); border-bottom: 1px solid var(--taller-borde); }

/* ------------------------------------------------------------
   5. Quién está listo hoy: la cuadrícula ES el primer paso de Elige tus 6
   ------------------------------------------------------------ */
.figuras { display: grid; grid-template-columns: repeat(6, 1fr); gap: 64px var(--hueco-rejilla); padding-top: 52px; }
.figura {
  background: #fff; border: 1px solid var(--tarjeta-borde); border-radius: var(--radio-tarjeta);
  padding: 0 12px 12px; display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: 0 6px 0 var(--sombra-tarjeta); overflow: visible;
  transition: border-color var(--dur) var(--ease);
}
.figura .redonda { width: 136px; margin-top: -52px; background: #fff; transition: transform 240ms var(--rebote), border-color var(--dur) var(--ease); border: 4px solid #fff; box-shadow: 4px 6px 0 var(--sombra); }
.figura h3 { font-size: 16px; font-weight: 700; margin-top: 14px; line-height: 1.3; }
.figura p { font-size: 15px; color: var(--texto-2); margin-top: 2px; line-height: 1.4; }
.figura[data-n]:not([data-n="0"]) { border: 2px solid var(--acento); padding: 0 11px 11px; }
@media (hover: hover) {
  .figura:hover { border-color: var(--tinta); }
  .figura[data-n]:not([data-n="0"]):hover { border-color: var(--acento); }
  .figura:hover .redonda { transform: translateY(-4px) rotate(-7deg); }
}
/* Control − 0 + */
.contador { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 2px; }
.contador button {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--tinta); font-weight: 700; font-size: 20px; line-height: 1;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease), transform 220ms var(--rebote);
}
.contador button:not([disabled]):active { transform: scale(0.82); transition-duration: 80ms; }
.contador button[disabled] { opacity: 0.35; cursor: not-allowed; }
@media (hover: hover) { .contador button:not([disabled]):hover { background: var(--tinta); color: var(--crema); } }
.contador output {
  min-width: 40px; height: 32px; padding: 0 10px; border-radius: 999px; display: grid; place-items: center;
  font-weight: 700; font-size: 16px; line-height: 1; color: var(--texto-2);
}
.figura[data-n]:not([data-n="0"]) .contador output { background: var(--acento); color: #fff; }
.figuras__pie { margin-top: 44px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; text-align: center; }

/* v5.2 · Tarjeta que enlaza: la foto es un botón (visor), el nombre un enlace (ficha) */
.figura__foto { padding: 0; cursor: zoom-in; display: block; }
.figura h3 a { text-decoration: none; }
.figura h3 a::after { content: ""; position: absolute; inset: 0; }
.figura { position: relative; }
.figura__foto { position: relative; z-index: 1; }
.figura__ficha { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 700; color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; transition: text-decoration-color var(--dur) var(--ease); }
@media (hover: hover) { .figura:hover .figura__ficha { text-decoration-color: currentColor; } }
.figuras__nota { flex-basis: 100%; }

/* Visor */
.visor { border: 0; padding: 0; background: transparent; max-width: min(92vw, 560px); width: 100%; }
.visor::backdrop { background: rgba(30, 58, 95, 0.55); }
.visor__caja { position: relative; background: #fff; border: 2px solid var(--tinta); border-radius: 24px; box-shadow: 8px 10px 0 var(--sombra); padding: 24px 24px 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.visor__cerrar { position: absolute; top: 10px; right: 10px; background: var(--tarjeta); border: 1.5px solid var(--tinta); }
.visor__foto { width: min(70vw, 360px); aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: var(--tarjeta-en-panel); }
.visor__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }
.visor[open] .visor__caja { animation: pop 320ms var(--rebote); }

/* Sello del taller */
.sello { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; background: #fff; border: 2px solid var(--tinta); border-radius: 999px; padding: 8px 22px 8px 8px; box-shadow: 5px 6px 0 var(--sombra); transform: rotate(-3deg); flex: none; transition: transform 240ms var(--rebote); }
.sello img { width: 72px; height: 72px; border-radius: 50%; flex: none; }
.sello span { display: block; line-height: 1.2; font-size: 14px; color: var(--texto-2); }
.sello strong { display: block; font-size: 17px; color: var(--tinta); }
@media (hover: hover) { .sello:hover { transform: rotate(2deg) scale(1.04); } }
.seccion__cabecera--sello { align-items: center; }

/* Bandeja «Tu pack»: fija abajo cuando hay algo elegido */
.bandeja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bandeja);
  background: var(--bandeja-fondo); border-top: 2px solid var(--tinta); box-shadow: 0 -6px 0 var(--sombra-tarjeta);
  transform: translateY(105%); visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.bandeja[data-visible="true"] { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.bandeja__fila { min-height: 80px; display: flex; align-items: center; gap: 20px; padding-top: 12px; padding-bottom: 12px; }
.bandeja__titulo { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 20px; }
.huecos { display: flex; gap: 6px; }
.huecos li {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden; position: relative;
  border: 2px dashed var(--hueco); display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--texto-2);
  background: var(--tarjeta-en-panel);
}
.huecos li[data-lleno] { border: 2px solid var(--bolsa-anillo); background: var(--tarjeta); }
.huecos li img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; }
.huecos li.entra img { animation: entra var(--dur) var(--ease); }
@keyframes entra { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
.bandeja__estado { font-weight: 700; margin-left: auto; }
.bandeja__vaciar { color: var(--texto-2); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 0 8px; }

/* ------------------------------------------------------------
   6. Del taller a tu casa
   ------------------------------------------------------------ */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.paso__foto { aspect-ratio: 4 / 3; border-radius: var(--radio-foto); overflow: hidden; background: var(--tarjeta-en-panel); border: 3px solid #fff; box-shadow: 6px 8px 0 var(--sombra-tarjeta); }
.paso__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transform: scale(1.25); }
.paso__cuerpo { display: grid; grid-template-columns: 48px 1fr; gap: 16px; margin-top: 20px; align-items: start; }
.paso__numero {
  width: 48px; height: 48px; border-radius: 50%; color: #fff; border: 3px solid #fff; box-shadow: 3px 4px 0 var(--sombra);
  display: grid; place-items: center; font-size: 21px; font-weight: 700; line-height: 1;
}
.paso:nth-child(1) .paso__numero { background: var(--paso-1); }
.paso:nth-child(2) .paso__numero { background: var(--paso-2); }
.paso:nth-child(3) .paso__numero { background: var(--paso-3); }
.paso p { margin-top: 8px; color: var(--texto-2); max-width: 36ch; }

/* ------------------------------------------------------------
   7. Dos packs
   ------------------------------------------------------------ */
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hueco-rejilla); padding-top: 56px; }
.pack {
  background: #fff; border: 1px solid var(--tarjeta-borde); border-radius: var(--radio-tarjeta); box-shadow: 0 8px 0 var(--sombra-tarjeta);
  padding: var(--relleno-tarjeta); display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 24px; align-items: center;
}
.pack .display--24 { font-size: 26px; }
.pack--misteriosa { align-items: start; overflow: visible; }
.pack--misteriosa .pack__visual { margin-top: -76px; }
.pack__visual { display: grid; place-items: center; min-height: 300px; }
.pack__precio { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.pack__precio strong { font-size: 28px; line-height: 1; }
.pack__precio span { font-size: 14px; color: var(--texto-2); }
.pack__texto { margin-top: 12px; color: var(--texto-2); }
.pack .pildora { margin-top: 20px; }
.pack__estado { margin-top: 10px; font-size: 14px; color: var(--texto-2); }
/* Los seis huecos del pack, en dos filas de tres, grandes */
.huecos--pack { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; }
.huecos--pack li { width: 76px; height: 76px; font-size: 16px; }

/* La bolsa de la Misteriosa 6, construida con HTML y fotos reales (nunca el "8" del mockup) */
.bolsa {
  width: 236px; background: var(--bolsa); border-radius: 14px; padding: 22px 16px 18px; position: relative; box-shadow: 8px 10px 0 var(--sombra);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--bolsa) 80%, var(--tinta));
}
.bolsa::before, .bolsa::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: 12px;
  background: repeating-linear-gradient(to bottom, rgba(31, 58, 52, 0.14) 0 2px, transparent 2px 5px);
}
.bolsa::before { top: 5px; }
.bolsa::after { bottom: 5px; }
.bolsa__pildora {
  display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 4px 12px; border-radius: 999px;
  border: 2px solid var(--chip); font-size: 14px;
}
.bolsa__pildora--aviso { background: var(--bolsa-aviso); border-color: var(--bolsa-aviso); font-family: var(--texto); font-weight: 700; font-size: 14px; letter-spacing: 0; line-height: 1.2; padding: 6px 12px; }
.bolsa__circulo { width: 156px; height: 156px; border-radius: 50%; overflow: hidden; border: 5px solid var(--bolsa-anillo); background: var(--tarjeta-en-panel); margin-top: 4px; }
.bolsa__circulo img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 62%; transform: scale(1.35); }
.bolsa .marca { margin-top: -18px; }
.bolsa__que { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.25; }

/* ------------------------------------------------------------
   8. Banda de confianza
   ------------------------------------------------------------ */
.confianza { padding: 64px 0; background: var(--confianza-fondo); border-top: 1px solid var(--confianza-borde); border-bottom: 1px solid var(--confianza-borde); }
.confianza__titulo { text-align: center; margin-bottom: 40px; }
.promesas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.promesa { display: flex; gap: 16px; align-items: flex-start; }
.promesa .icono { width: 28px; height: 28px; margin-top: 2px; color: var(--confianza-icono); }
.promesa strong { display: block; font-size: 17px; line-height: 1.3; }
.promesa span { display: block; font-size: 15px; color: var(--texto-2); margin-top: 4px; }
.confianza__nota { text-align: center; margin-top: 32px; font-size: 14px; color: var(--texto-2); }

/* ------------------------------------------------------------
   9. Pie
   ------------------------------------------------------------ */
.pie { background: var(--pie-fondo); color: var(--pie-texto); padding: 64px 0 32px; }
.pie a { text-decoration: none; }
.pie__rejilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; }
.pie__lema { margin-top: 12px; max-width: 34ch; opacity: 0.85; }
.fabricante { display: flex; align-items: center; gap: 16px; margin-top: 28px; font-size: 15px; }
.fabricante img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid #fff; box-shadow: 4px 5px 0 var(--sombra); }
.fabricante strong { display: block; color: var(--pie-texto); font-size: 18px; line-height: 1.25; }
.pie h3 { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; margin-bottom: 12px; }
.pie ul li { margin: 0; }
.pie ul a { display: inline-flex; align-items: center; min-height: 40px; }
@media (hover: hover) { .pie ul a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.pie__legal {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--pie-linea);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 14px; opacity: 0.8;
}

/* ------------------------------------------------------------
   Tableta y móvil
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  .figuras { grid-template-columns: repeat(4, 1fr); }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .hechos__lista { grid-template-columns: repeat(2, 1fr); }
  .packs { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  :root { --seccion: 56px; --gutter: 16px; }
  body { font-size: 17px; }
  body[data-con-pack="si"] { padding-bottom: 88px; }
  .display--64 { font-size: 44px; }
  .display--40 { font-size: 36px; }
  .display--24 { font-size: 26px; }
  .barra-envio { font-size: 14px; padding: 10px var(--gutter); }
  .menu, .boton-icono--carrito span, .solo-ancho { display: none; }
  .solo-estrecho { display: inline; }
  .boton-icono--menu { display: inline-flex; }
  .marca { font-size: 28px; }
  .cabecera__fila { height: 68px; }

  .hero { padding: 24px 0 48px; }
  .hero__rejilla { grid-template-columns: 1fr; gap: 20px; }
  .hero__texto { display: flex; flex-direction: column; }
  .hero__texto h1 { order: -2; font-size: 38px; }
  .hero .cara { letter-spacing: 0.14em; }
  .display--40 .cara { letter-spacing: 0.14em; }
  .hero__botones { order: -1; flex-direction: column; gap: 10px; margin-top: 20px; }
  .hero__botones .pildora { width: 100%; }
  .pildora--grande { min-height: 58px; font-size: 19px; padding: 0 24px; }
  .hero__parrafo { font-size: 17px; margin-top: 20px; }
  .hero__nota { margin-top: 12px; }
  .escena { order: -1; padding: 14px 22px 28px 18px; max-width: 340px; margin: 0 auto; width: 100%; }
  .escena__satelite { width: 80px; box-shadow: 3px 4px 0 var(--sombra); }
  .escena__satelite--1 { left: -2px; }
  .escena__satelite--2 { width: 72px; bottom: -2px; }
  .escena__satelite--3 { width: 96px; right: -2px; }
  .escena__grande { box-shadow: 5px 6px 0 var(--sombra); }
  .pegatina { width: 104px; height: 104px; top: -4px; right: -4px; border-width: 5px; box-shadow: 4px 6px 0 var(--sombra); }
  .pegatina__precio { font-size: 30px; }
  .pegatina__que { font-size: 14px; }

  .hechos__lista { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; padding-top: 24px; padding-bottom: 24px; }
  .hechos__lista li { flex-direction: column; align-items: flex-start; gap: 8px; }

  .seccion__cabecera { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
  .figuras { grid-template-columns: repeat(2, 1fr); }
  .figura .redonda { width: 112px; margin-top: -44px; }
  .figuras { gap: 56px 12px; padding-top: 44px; }

  .bandeja__fila { min-height: 72px; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .bandeja__titulo, .bandeja__vaciar { display: none; }
  .huecos { gap: 4px; }
  .huecos li { width: 26px; height: 26px; font-size: 14px; border-width: 1.5px; }
  .huecos--pack li { width: 76px; height: 76px; font-size: 16px; border-width: 2px; }
  .bandeja__estado { display: none; }
  .bandeja .pildora { min-height: 44px; padding: 0 14px; font-size: 15px; flex: 1; min-width: 0; }

  .pasos { grid-template-columns: 1fr; gap: 32px; }
  .pack { grid-template-columns: 1fr; gap: 16px; }
  .pack--misteriosa .pack__visual { margin-top: -60px; }
  .packs { padding-top: 40px; gap: 80px 16px; }
  .pack .pildora { width: 100%; }
  .pack__visual { min-height: 0; }

  .promesas { grid-template-columns: 1fr; gap: 24px; }
  .sello { transform: none; }
  .sello img { width: 60px; height: 60px; }
  .figuras__pie .pildora { width: 100%; }
  .pie__rejilla { grid-template-columns: 1fr; gap: 28px; }
  .pie__legal { flex-direction: column; }
}
@media (max-width: 420px) {
  .figura { padding: 0 10px 10px; }
  .figura[data-n]:not([data-n="0"]) { padding: 0 9px 9px; }
}

/* ------------------------------------------------------------
   v5.4 · Lado a lado y tipografía fluida. Las secciones van a sangre; el contenido
   crece hasta 1680 px y todo (tipo, huecos, fotos) escala con el ancho. Solo escritorio:
   las reglas de móvil de arriba siguen mandando por debajo de 768 px.
   ------------------------------------------------------------ */
:root { --contenedor: 1680px; --gutter: clamp(16px, 3vw, 72px); --seccion: clamp(56px, 6vw, 128px); --hueco-rejilla: clamp(16px, 1.4vw, 28px); }
@media (min-width: 768px) {
  body { font-size: clamp(16px, 0.45vw + 12px, 21px); }
  .display--64 { font-size: clamp(52px, 1.6vw + 37px, 84px); line-height: 1.06; }
  .display--40 { font-size: clamp(36px, 1.6vw + 22px, 64px); }
  .display--24 { font-size: clamp(24px, 0.8vw + 18px, 40px); }
  .marca { font-size: clamp(36px, 2.2vw + 12px, 60px); }
  .cabecera__fila { height: clamp(84px, 6vw, 112px); }
  .menu a { font-size: clamp(16px, 0.35vw + 11px, 20px); padding: 0 clamp(10px, 0.9vw, 18px); }
  .barra-envio { font-size: clamp(16px, 0.3vw + 12px, 19px); }
  .pildora { font-size: clamp(19px, 0.4vw + 13px, 22px); min-height: clamp(52px, 3.6vw, 64px); }
  .pildora--grande { font-size: clamp(20px, 0.5vw + 13px, 26px); min-height: clamp(64px, 4.4vw, 80px); padding: 0 clamp(36px, 2.6vw, 52px); }
  .hero__rejilla { grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 3.5vw, 80px); }
  .hero__texto { max-width: none; }
  .hero__parrafo { font-size: clamp(18px, 0.45vw + 12px, 22px); max-width: 62ch; }
  .escena { max-width: clamp(420px, 40vw, 760px); margin-left: auto; }
  .escena__satelite { width: clamp(110px, 8.5vw, 190px); }
  .escena__satelite--2 { width: clamp(96px, 7.5vw, 170px); }
  .escena__satelite--3 { width: clamp(130px, 10vw, 220px); }
  .hechos__lista { grid-template-columns: repeat(4, 1fr); }
  .hechos__lista strong { font-size: clamp(17px, 0.35vw + 12px, 21px); }
  .hechos__lista span { font-size: clamp(16px, 0.3vw + 12px, 19px); }
  .seccion__cabecera, .dias__cabecera { flex-direction: column; align-items: flex-start; gap: clamp(16px, 1.4vw, 24px); }
  .seccion__cabecera p, .dias__cabecera p { max-width: 68ch; font-size: clamp(17px, 0.4vw + 12px, 21px); }
  .seccion__cabecera--sello { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .seccion__cabecera--sello p { flex: 1 1 32ch; }
  .figura .redonda { width: clamp(136px, 10vw, 200px); margin-top: calc(clamp(136px, 10vw, 200px) * -0.38); }
  .figuras { padding-top: clamp(52px, 4vw, 80px); gap: clamp(64px, 5vw, 96px) var(--hueco-rejilla); }
  .figura h3 { font-size: clamp(18px, 0.4vw + 13px, 22px); }
  .figura p { font-size: clamp(16px, 0.35vw + 12px, 19px); }
  .figura__ficha { font-size: clamp(16px, 0.3vw + 12px, 18px); }
  .dia .redonda { width: clamp(128px, 9vw, 180px); margin-top: calc(clamp(128px, 9vw, 180px) * -0.4); }
  .dia__escena { font-size: clamp(20px, 0.45vw + 14px, 24px); }
  .dia__ayuda { font-size: clamp(16px, 0.35vw + 12px, 19px); max-width: 34ch; }
  .dias__nota { font-size: clamp(16px, 0.35vw + 12px, 19px); max-width: 72ch; }
  .paso p { font-size: clamp(16px, 0.35vw + 12px, 19px); max-width: 40ch; }
  .paso__numero { width: clamp(48px, 3.4vw, 64px); height: clamp(48px, 3.4vw, 64px); font-size: clamp(21px, 1.4vw, 28px); }
  .paso__cuerpo { grid-template-columns: clamp(48px, 3.4vw, 64px) 1fr; }
  .sello span { font-size: clamp(16px, 0.3vw + 12px, 18px); }
  .sello strong { font-size: clamp(18px, 0.35vw + 13px, 21px); }
  .sello img { width: clamp(72px, 5vw, 96px); height: clamp(72px, 5vw, 96px); }
  .pack__precio strong { font-size: clamp(28px, 1.8vw, 40px); }
  .pack__precio span { font-size: clamp(16px, 0.3vw + 12px, 18px); }
  .pack__texto { font-size: clamp(16px, 0.35vw + 12px, 19px); }
  .huecos--pack { grid-template-columns: repeat(3, clamp(76px, 5.6vw, 110px)); gap: clamp(10px, 0.8vw, 16px); }
  .huecos--pack li { width: clamp(76px, 5.6vw, 110px); height: clamp(76px, 5.6vw, 110px); }
  .bolsa { width: clamp(236px, 17vw, 320px); }
  .bolsa__circulo { width: clamp(156px, 11vw, 210px); height: clamp(156px, 11vw, 210px); }
  .bolsa .marca { font-size: clamp(26px, 1.9vw, 36px); }
  .bolsa__que, .bolsa__pildora, .bolsa__pildora--aviso { font-size: clamp(14px, 1vw, 18px); }
  .promesa strong { font-size: clamp(18px, 0.35vw + 13px, 21px); }
  .promesa span { font-size: clamp(16px, 0.35vw + 12px, 19px); }
  .promesa .icono { width: clamp(28px, 2vw, 36px); height: clamp(28px, 2vw, 36px); }
  .confianza__texto { max-width: 68ch; margin: 0 auto 40px; text-align: center; font-size: clamp(17px, 0.4vw + 12px, 21px); }
  .confianza__nota { font-size: clamp(16px, 0.3vw + 12px, 18px); }
  .pie h3 { font-size: clamp(16px, 0.3vw + 12px, 18px); }
  .pie__legal, .fabricante { font-size: clamp(16px, 0.3vw + 12px, 18px); }
  .fabricante strong { font-size: clamp(18px, 0.35vw + 13px, 21px); }
  .fabricante img { width: clamp(80px, 5.5vw, 104px); height: clamp(80px, 5.5vw, 104px); }
  .panel-menu__pie, .figuras__nota, .texto-2 { font-size: max(16px, 1em); }
  .visor { max-width: min(92vw, 640px); }
  .visor__foto { width: min(70vw, 420px); }
}
@media (max-width: 1023px) {
  .menu, .boton-icono--carrito span { display: none; }
  .boton-icono--menu { display: inline-flex; }
}
/* Pestaña activa (la portada no marca ninguna) */
.menu a[aria-current="page"], .panel-menu__lista a[aria-current="page"] { background: var(--tarjeta); box-shadow: inset 0 -3px 0 var(--acento); }
/* Sección Qué son */
.seccion--queson { background: #fff; }
.queson { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 4vw, 96px); align-items: center; }
.queson__texto p { max-width: 62ch; margin-top: 16px; font-size: clamp(17px, 0.4vw + 12px, 21px); }
.queson__texto p + p { margin-top: 14px; }
.queson__texto .pildora { margin-top: 12px; }
.queson__fotos { position: relative; aspect-ratio: 1; }
.queson__foto { position: absolute; background: #fff; border: 4px solid #fff; box-shadow: 6px 8px 0 var(--sombra); animation: flota 4s ease-in-out infinite alternate; }
.queson__foto--1 { width: 58%; left: 4%; top: 6%; --g: -3deg; }
.queson__foto--2 { width: 44%; right: 2%; top: 34%; --g: 4deg; animation-delay: -1.5s; }
.queson__foto--3 { width: 38%; left: 22%; bottom: 2%; --g: -2deg; animation-delay: -2.6s; }
/* Alternancia con la sección nueva: hero crema · qué son blanco · días crema · Minimals blanco · taller crema · packs blanco · envío crema */
.dias { background: var(--fondo); }
.seccion--figuras { background: #fff; }
.seccion--panel { background: var(--fondo); }
.seccion--packs { background: #fff; }
.confianza { background: var(--fondo); }
.dia__guia { margin-top: 12px; font-weight: 700; color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; }
.confianza__texto { color: var(--tinta); }
@media (max-width: 767px) {
  .queson { grid-template-columns: 1fr; gap: 24px; }
  .queson__fotos { max-width: 300px; margin: 0 auto; width: 100%; }
  .confianza__texto { margin: 0 0 32px; }
  .seccion__cabecera--sello .sello { transform: none; }
}

/* ------------------------------------------------------------
   v5.5 · Escala grande, pasteles por sección, MINIMALS gigante en el hero, fotos de paso al 80 %
   ------------------------------------------------------------ */
:root {
  --pastel-morado: #EEE6F8;   /* de la I morada #8755CB */
  --pastel-turquesa: #DCF3F2; /* de la N turquesa #01B6B4 */
  --pastel-naranja: #FFE6D3;  /* de la A naranja #E66F10 */
  --pastel-rosa: #FBE3EA;     /* de la S rosa #C7436F */
  --pastel-verde: #E6F4DC;    /* de la M verde #6CBF3A */
  --pastel-azul: #D3E8F6;     /* de la L azul #018ADC (el pie) */
}
.seccion--queson { background: var(--pastel-morado); --sombra-tarjeta: #D4C6EA; }
.seccion--figuras { background: var(--pastel-turquesa); --sombra-tarjeta: #B7E0DE; }
.seccion--packs { background: var(--pastel-naranja); --sombra-tarjeta: #F2CDAF; }
.dias, .seccion--panel, .confianza { background: var(--fondo); }
.hero__titulo { grid-column: 1 / -1; margin: 0; font-weight: 400; line-height: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.1em; }
.marca--hero { font-size: clamp(42px, 6vw + 40px, 160px); padding: 0.1em 0.2em 0.16em 0.06em; }
.hero__resto { display: inline-block; transform: rotate(-2deg); margin-left: 4%; margin-top: -0.35em; }
.hero__resto .cara { padding: 0.04em 0; }
.hero .hero__resto .cara { animation-delay: calc(var(--i, 0) * 90ms + 600ms); }
.hero__rejilla { align-items: center; }
.paso__foto { display: grid; place-items: center; }
.paso__foto img { width: 80%; height: 80%; object-fit: cover; object-position: 50% 55%; transform: none; border-radius: 12px; }
@media (min-width: 768px) {
  body { font-size: clamp(18px, 0.52vw + 12.7px, 26px); }
  .hero__resto { font-size: clamp(44px, 1.63vw + 22px, 68px); }
  .display--40 { font-size: clamp(55px, 1.63vw + 38px, 80px); }
  .display--24 { font-size: clamp(28px, 0.9vw + 15px, 44px); }
  .hero__parrafo { font-size: 1.1em; max-width: 60ch; }
  .menu a, .barra-envio, .panel-menu__pie, .figuras__nota, .texto-2, .hechos__lista span, .figura p, .figura__ficha, .dia__ayuda, .dias__nota, .paso p, .sello span, .pack__precio span, .pack__texto, .promesa span, .confianza__nota, .pie h3, .pie__legal, .fabricante, .pie__lema, .queson__texto p, .seccion__cabecera p, .dias__cabecera p, .confianza__texto, .dia__guia, .pie ul a { font-size: 1em; }
  .figura h3, .sello strong, .promesa strong, .hechos__lista strong, .fabricante strong, .dia__escena { font-size: clamp(24px, 0.26vw + 20.3px, 28px); }
  .pildora { font-size: clamp(20px, 0.4vw + 14px, 26px); min-height: clamp(56px, 3.8vw, 72px); }
  .pildora--grande { font-size: clamp(22px, 0.5vw + 15px, 30px); min-height: clamp(68px, 4.6vw, 88px); }
  .pack__precio strong { font-size: clamp(32px, 2vw, 48px); }
  .bolsa__que, .bolsa__pildora, .bolsa__pildora--aviso { font-size: clamp(16px, 1.1vw, 22px); }
  .bolsa { width: clamp(260px, 18vw, 340px); }
  .figura .redonda { width: clamp(150px, 11vw, 220px); margin-top: calc(clamp(150px, 11vw, 220px) * -0.38); }
  .figuras { grid-template-columns: repeat(auto-fill, minmax(clamp(190px, 13vw, 250px), 1fr)); }
  .paso__numero { width: clamp(56px, 3.6vw, 72px); height: clamp(56px, 3.6vw, 72px); font-size: clamp(24px, 1.5vw, 32px); }
  .paso__cuerpo { grid-template-columns: clamp(56px, 3.6vw, 72px) 1fr; }
  .hero__texto { max-width: 68ch; }
}
@media (max-width: 1279px) { .packs { grid-template-columns: 1fr; gap: 80px 16px; } .pack--misteriosa .pack__visual { margin-top: -60px; } }
.pack .pildora { white-space: normal; text-align: center; line-height: 1.2; padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 1199px) {
  .menu, .boton-icono--carrito span { display: none; }
  .boton-icono--menu { display: inline-flex; }
}
@media (max-width: 767px) {
  .hero__titulo { order: 0; }
  .marca--hero { font-size: 42px; }
  .hero__resto { font-size: 30px; margin-top: -0.2em; }
  .figura h3, .dia__escena { font-size: 20px; }
}

/* v5.6 · H3 grandes y hero compacto */
.pack h3, .paso h3 { text-wrap: balance; overflow-wrap: normal; hyphens: none; }
.pack .display--24 .cara, .paso .display--24 .cara { letter-spacing: 0.1em; }
.pack { grid-template-columns: 0.8fr 1.2fr; }
.pack--misteriosa .pack__visual { justify-self: start; }
.hero__rejilla { row-gap: 8px; }
.hero__texto { align-self: start; padding-top: 12px; }
.hero__resto { margin-top: -0.45em; }
@media (min-width: 768px) {
  .display--24, .pack .display--24 { font-size: clamp(40px, 1.67vw + 16px, 48px); line-height: 1.1; }
}
@media (max-width: 767px) {
  .display--24, .pack .display--24 { font-size: 36px; line-height: 1.1; }
  .pack { grid-template-columns: 1fr; }
}

/* v5.7 · Hero blanco con sol crema detrás de la escena */
.hero { background: #fff; overflow: hidden; }
.escena { position: relative; isolation: isolate; }
.escena::before {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; background: var(--fondo);
  width: 148%; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-42%, -54%);
}
.hero .confeti i { opacity: 0.8; }
@media (max-width: 767px) {
  .escena::before { width: 132%; transform: translate(-46%, -52%); }
  .hero__resto { margin-top: 0.1em; }
}
/* Contornos SVG: grosor constante, uniones redondas; el alto lo fija el script en em */
.svgt { display: block; height: 1.3em; width: auto; overflow: visible; }
.svgt text { font-family: var(--display); font-weight: 400; text-transform: uppercase; }
.marca__l { text-shadow: none; }
.marca { align-items: flex-end; }
.cara { text-shadow: none; display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: 0 0.28em; vertical-align: bottom; }
.display { line-height: 1.15; }
.cara .svgt text { letter-spacing: 0.12em; }
.cara { color: var(--c, var(--tinta)); }
.pack .display--24 .cara .svgt text, .paso .display--24 .cara .svgt text { letter-spacing: 0.08em; }
.burbuja { text-shadow: none; display: inline-flex; gap: 0 0.3em; align-items: flex-end; }
.burbuja .svgt text { letter-spacing: 0.06em; }
.display .cara + .cara { margin-left: 0.28em; }
/* El título del hero por encima del sol (la escena está posicionada y pintaba encima) */
.hero__titulo, .hero__texto { position: relative; z-index: 1; }

/* v5.7 · Una composición por sección: nada de título + párrafo + tarjetas en fila cinco veces */
.seccion, .dias, .confianza { position: relative; overflow: hidden; }
.seccion > .contenedor, .dias > .contenedor, .confianza > .contenedor { position: relative; z-index: 1; }
/* Qué son: mitad izquierda morado pastel, derecha blanca con el montón a sangre por el borde */
.seccion--queson { background: linear-gradient(90deg, var(--pastel-morado) 0 56%, #fff 56%); }
.queson { grid-template-columns: 1.05fr 1fr; align-items: center; }
.queson__fotos { position: relative; aspect-ratio: 1; }
.queson__fotos::before { content: ""; position: absolute; z-index: 0; top: -8%; bottom: -8%; left: 18%; right: -45vw; border-radius: 999px 0 0 999px; background: url('medios/p3t-p-pack-900.webp') 30% 50% / cover no-repeat; border: 6px solid #fff; box-shadow: 8px 10px 0 var(--sombra); }
.queson__foto { z-index: 1; }
.queson__foto--1 { width: 46%; left: -6%; top: 4%; }
.queson__foto--2 { width: 38%; left: 2%; top: 44%; right: auto; }
.queson__foto--3 { width: 32%; left: 30%; bottom: -4%; }
/* Ideas para jugar: fondo partido en diagonal (crema / rosa pastel) y tarjetas escalonadas */
.dias { background: linear-gradient(168deg, var(--fondo) 0 58%, var(--pastel-rosa) 58%); }
.dias__lista { align-items: start; }
.dias__lista li:nth-child(2) { margin-top: 56px; }
.dias__lista li:nth-child(3) { margin-top: 20px; }
/* Disponibles hoy: blanco con un círculo turquesa gigante que sale por la izquierda */
.seccion--figuras { background: #fff; }
.seccion--figuras::before { content: ""; position: absolute; z-index: 0; width: 92vw; aspect-ratio: 1; border-radius: 50%; background: var(--pastel-turquesa); left: -30vw; top: -14%; }
.seccion--figuras::after { content: ""; position: absolute; z-index: 0; width: 34vw; aspect-ratio: 1; border-radius: 50%; background: var(--pastel-turquesa); right: -12vw; bottom: -10vw; }
/* Cómo se hace: zigzag con línea de tiempo y fotos de tres tamaños */
.pasos { grid-template-columns: 1fr 1fr; gap: 0 clamp(48px, 5vw, 96px); position: relative; }
.pasos::before { content: ""; position: absolute; left: 50%; top: 4%; bottom: 4%; border-left: 5px dashed var(--panel-borde); transform: translateX(-50%); }
.paso:nth-child(1) { grid-column: 1; }
.paso:nth-child(2) { grid-column: 2; margin-top: clamp(120px, 12vw, 220px); }
.paso:nth-child(3) { grid-column: 1; margin-top: clamp(-40px, -3vw, -20px); }
.paso:nth-child(1) .paso__foto { width: 100%; }
.paso:nth-child(2) .paso__foto { width: 78%; }
.paso:nth-child(3) .paso__foto { width: 62%; }
.paso:nth-child(2) .paso__foto, .paso:nth-child(2) .paso__cuerpo { margin-left: auto; }
.paso:nth-child(2) .paso__cuerpo { max-width: 78%; }
.paso__foto { transform: rotate(-1.5deg); }
.paso:nth-child(2) .paso__foto { transform: rotate(2deg); }
/* Cómo conseguir: cada tarjeta sobre su color (naranja pastel / amarillo pastel) */
.seccion--packs { background: linear-gradient(90deg, var(--pastel-naranja) 0 50%, #FBE7A6 50%); }
/* Envío y garantía: franja verde pastel inclinada que sale por los lados */
.confianza::before { content: ""; position: absolute; z-index: 0; left: -8%; right: -8%; top: 38%; height: 46%; background: var(--pastel-verde); transform: rotate(-2.5deg); }
@media (max-width: 1023px) {
  .pasos { grid-template-columns: 1fr; }
  .pasos::before { left: 0; transform: none; }
  .paso:nth-child(n) { grid-column: 1; margin-top: 0; padding-left: 28px; }
  .paso:nth-child(n) .paso__foto { width: 100%; margin-left: 0; transform: none; }
  .paso:nth-child(2) .paso__cuerpo { max-width: none; margin-left: 0; }
  .dias__lista li:nth-child(n) { margin-top: 0; }
}
@media (max-width: 767px) {
  .seccion--queson { background: linear-gradient(180deg, var(--pastel-morado) 0 62%, #fff 62%); }
  .queson__fotos::before { left: -20%; right: -20%; top: 6%; bottom: 6%; border-radius: 999px; }
  .queson__foto--1 { left: 0; top: -2%; } .queson__foto--2 { left: 64%; top: 46%; } .queson__foto--3 { left: 20%; bottom: -6%; }
  .dias { background: linear-gradient(172deg, var(--fondo) 0 50%, var(--pastel-rosa) 50%); }
  .seccion--figuras::before { width: 140vw; left: -60vw; top: -6%; }
  .seccion--packs { background: linear-gradient(180deg, var(--pastel-naranja) 0 50%, #FBE7A6 50%); }
}

/* v5.8 · Pasos: cuadros iguales, fotos iguales y centradas */
.paso__foto { aspect-ratio: 4 / 3; display: block; position: relative; overflow: hidden; }
/* El cuadro blanco conserva un padding uniforme (8 %); dentro, la foto es la caja recortada
   (bordes redondeados, object-fit: cover) y object-position lleva el centro REAL de cada figura al
   centro de la caja: con la foto 3:4 dentro de una caja 4:3 solo sobra en vertical, así que
   p = (1,778·cy - 0,5) / 0,778 (juguete cy 52,3 → 55,3 %, erizo 48,6 → 46,8 %, nutria 55,2 → 61,9 %);
   el desvío horizontal (≤ 2,3 %) se compensa con un translateX mínimo sobre el blanco del cuadro. */
.paso__foto { padding: 8%; }
.paso__foto img { position: static; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; transform: none; }
.paso:nth-child(1) .paso__foto img { object-position: 50% 55.3%; transform: translateX(2.3%); }
.paso:nth-child(2) .paso__foto img { object-position: 50% 46.8%; transform: translateX(-0.5%); }
.paso:nth-child(3) .paso__foto img { object-position: 50% 61.9%; transform: translateX(-1.1%); }
/* Menú: a 2560 el cuerpo de 26 px partía las pestañas en dos líneas */
@media (min-width: 768px) { .menu a { font-size: clamp(20px, 0.25vw + 16.4px, 22px); white-space: nowrap; } }
.pack__precio strong span { font-size: inherit; }
/* v5.8 · Fotos sin ampliar por encima de su resolución (el original del montón es 1024×1012) */
.escena__grande img { transform: none; object-position: 50% 50%; }
.queson__fotos::before { background-image: url('medios/p3t-p-pack-1024.webp'); right: max(-45vw, -420px); top: 0; bottom: 0; }
@media (min-width: 768px) {
  .escena { max-width: clamp(420px, 36vw, 560px); }
  .escena::before { width: 156%; }
}
@media (min-width: 1600px) {
  .escena::before { width: 172%; transform: translate(-44%, -56%); }
  .escena__satelite { width: clamp(150px, 9.5vw, 220px); }
  .escena__satelite--3 { width: clamp(170px, 11vw, 250px); }
}
/* v5.8 · Títulos de tarjeta grandes: el H3 del pack ocupa toda la tarjeta en su propia fila */
.pack { grid-template-columns: 0.8fr 1.2fr; grid-auto-rows: auto; align-items: center; row-gap: 12px; }
.pack > div:not(.pack__visual) { display: contents; }
.pack h3.display--24 { grid-column: 1 / -1; grid-row: 1; margin: 0; }
.pack .pack__visual { grid-column: 1; grid-row: 2 / span 3; }
.pack .pack__precio { grid-column: 2; grid-row: 2; margin-top: 0; }
.pack .pack__texto { grid-column: 2; grid-row: 3; margin-top: 0; }
.pack .pildora { grid-column: 2; grid-row: 4; margin-top: 4px; justify-self: start; }
.pack--misteriosa .pack__visual { margin-top: 0; }
.pack--misteriosa { align-items: center; }
@media (min-width: 768px) {
  .pack h3.display--24 { font-size: clamp(52px, 1.67vw + 28px, 60px); line-height: 1.08; }
  .paso h3.display--24 { font-size: clamp(32px, 0.83vw + 20px, 36px); }
  .figura h3 { font-size: clamp(30px, 0.83vw + 18px, 34px); line-height: 1.15; }
  .dia__escena { font-size: clamp(32px, 0.83vw + 20px, 36px); line-height: 1.15; }
  .figuras { grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 14vw, 270px), 1fr)); }
}
@media (max-width: 767px) {
  .pack { grid-template-columns: 1fr; }
  .pack h3.display--24 { font-size: 40px; grid-column: 1; }
  .pack .pack__visual, .pack .pack__precio, .pack .pack__texto, .pack .pildora { grid-column: 1; grid-row: auto; }
  .pack .pildora { justify-self: stretch; }
  .paso h3.display--24 { font-size: 30px; }
  .figura h3 { font-size: 24px; }
  .dia__escena { font-size: 26px; }
}

/* v5.9b · Sin extrusión en las letras: la copia oscura desplazada (drop-shadow) se fundía con el
   anillo y daba masas negras irregulares. El contorno oscuro es un solo trazo fino y uniforme por
   fuera del blanco, como en la bolsa; la sombra dura se queda en botones, pegatina y tarjetas. */
.marca, .cara, .display--24 .cara { filter: none; }
/* Halo blanco suave en el texto corrido sobre pastel o crema (separa la letra sin parecer contorno);
   nada en tarjetas blancas, botones ni titulares de caramelo (que ya llevan su blanco) */
.hechos, .queson__texto, .dias__cabecera, .dias__nota, .seccion__cabecera, .figuras__pie, .paso__cuerpo, .confianza, .pie { text-shadow: 0 0 6px #fff, 0 0 8px #fff; }
.pildora, .figura, .dia, .pack, .bolsa, .sello, .visor, .cabecera, .hero { text-shadow: none; }
/* Elige tus 6: los seis Minimals en 2 columnas × 3 filas, más grandes, para llenar el alto de la tarjeta */
.huecos--pack { grid-template-columns: repeat(2, clamp(88px, 6.4vw, 124px)); gap: clamp(8px, 0.7vw, 14px); }
.huecos--pack li { width: clamp(88px, 6.4vw, 124px); height: clamp(88px, 6.4vw, 124px); }
@media (max-width: 767px) { .huecos--pack { grid-template-columns: repeat(2, 100px); } .huecos--pack li { width: 100px; height: 100px; } }
/* v5.9 · Wordmark casi tocándose (el viewBox ya incluye el trazo), palabras de titular más juntas */
.cara { gap: 0 0.12em; }
.cara .svgt text { letter-spacing: 0.07em; }
.pack .display--24 .cara .svgt text, .paso .display--24 .cara .svgt text { letter-spacing: 0.07em; }
.burbuja .svgt text { letter-spacing: 0.06em; }
.display .cara + .cara { margin-left: 0.12em; }
/* Montón compuesto: recortes HD en multiply sobre el color del círculo; giro y tamaño por pieza */
.escena__grande { position: relative; background: var(--fondo); }
.monton, .queson__monton { position: absolute; inset: 0; overflow: hidden; background: var(--fondo); }
.monton__pieza { position: absolute; height: auto; filter: drop-shadow(0 5px 7px rgba(30, 58, 95, 0.28)); transform: rotate(var(--g)); transform-origin: 50% 50%; }
.escena__grande img.monton__pieza { height: auto; object-fit: fill; object-position: 50% 50%; transform: rotate(var(--g)); border-radius: 0; }
/* La figure del hero ya no tiene imagen en flujo: ancho explícito para que el círculo no colapse en la celda del grid */
@media (min-width: 768px) { .escena { width: 100%; margin-left: 0; justify-self: end; } }
.queson__fotos::before { background-image: none; }
.queson__monton { z-index: 0; top: 6px; bottom: 6px; left: calc(18% + 6px); right: calc(max(-45vw, -420px) + 6px); border-radius: 999px 0 0 999px; }
@media (max-width: 767px) { .queson__monton { left: calc(-20% + 6px); right: calc(-20% + 6px); top: calc(6% + 6px); bottom: calc(6% + 6px); border-radius: 999px; } }
/* Wordmark: letras solapadas como en la bolsa (−0,10em, cada letra por encima de la anterior) */
.marca { gap: 0; }
.marca__l { position: relative; z-index: calc(var(--i, 0) + 1); }
.marca__l + .marca__l { margin-left: -0.12em; }
.pie .marca__l + .marca__l, .bolsa .marca__l + .marca__l { margin-left: -0.08em; }
/* Anillos de caramelo en las burbujas (un color por burbuja) para separarlas de la foto y del fondo */
.queson__foto, .escena__satelite, .figura .redonda, .dia .redonda { border-width: 5px; border-style: solid; }
.queson__foto--1 { border-color: var(--c-coral); } .queson__foto--2 { border-color: var(--c-turquesa); } .queson__foto--3 { border-color: var(--c-morado); }
.escena__satelite--1 { border-color: var(--c-naranja); } .escena__satelite--2 { border-color: var(--c-verde); } .escena__satelite--3 { border-color: var(--c-azul); }
.figura:nth-child(8n+1) .redonda { border-color: var(--c-coral); } .figura:nth-child(8n+2) .redonda { border-color: var(--c-amarillo); } .figura:nth-child(8n+3) .redonda { border-color: var(--c-turquesa); } .figura:nth-child(8n+4) .redonda { border-color: var(--c-morado); }
.figura:nth-child(8n+5) .redonda { border-color: var(--c-verde); } .figura:nth-child(8n+6) .redonda { border-color: var(--c-naranja); } .figura:nth-child(8n+7) .redonda { border-color: var(--c-azul); } .figura:nth-child(8n+8) .redonda { border-color: var(--c-rosa); }
.dia:nth-child(1) .redonda { border-color: var(--c-azul); } .dia:nth-child(2) .redonda { border-color: var(--c-naranja); } .dia:nth-child(3) .redonda { border-color: var(--c-amarillo); }
@media (max-width: 767px) { .queson__foto, .escena__satelite, .figura .redonda, .dia .redonda { border-width: 4px; } }
/* Confeti al doble, tres tamaños */
.confeti i { width: 28px; height: 28px; }
.confeti i.pilla { width: 60px; height: 24px; }
.confeti i.anillo { width: 36px; height: 36px; border-width: 7px; }
.confeti i:nth-child(3n) { width: 20px; height: 20px; }
.confeti i.pilla:nth-child(3n) { width: 44px; height: 18px; }
.confeti i.anillo:nth-child(3n) { width: 26px; height: 26px; border-width: 5px; }
.confeti i:nth-child(4n+1) { width: 36px; height: 36px; }
.confeti i.pilla:nth-child(4n+1) { width: 72px; height: 28px; }
.confeti i.anillo:nth-child(4n+1) { width: 44px; height: 44px; border-width: 8px; }
/* Satélites del hero: 115 / 108 / 130 px a 1440, centro sobre la circunferencia (200°, 125°, 20°) */
@media (min-width: 768px) {
  .escena__satelite { width: clamp(100px, 8vw, 130px); }
  .escena__satelite--1 { left: -3%; top: 23%; bottom: auto; }
  .escena__satelite--2 { width: clamp(96px, 7.5vw, 120px); left: 14%; bottom: 4%; top: auto; }
  .escena__satelite--3 { width: clamp(110px, 9vw, 145px); right: -4%; top: 52%; bottom: auto; }
}
@media (min-width: 1600px) {
  .escena__satelite { width: clamp(110px, 7vw, 150px); }
  .escena__satelite--3 { width: clamp(120px, 8vw, 165px); }
}

/* v6.0 · Titulares con el borde de la v5.7 y las letras lo bastante separadas para que cada
   anillo blanco se lea solo: el hueco de tinta entre letras es letter-spacing + ~0,09em, y
   con 0,30em quedan 0,38em, más que los 0,20em del blanco y los 0,30em de las dos líneas
   oscuras juntas. Nada de puentes blancos ni de uniones oscuras. */
/* La separación de las letras la fija el atributo letter-spacing del <text> (en unidades
   de la fuente). Esto es solo el respaldo por si un navegador no lo respetara. */
.cara, .hero .cara, .display--40 .cara, .pack .display--24 .cara, .paso .display--24 .cara { letter-spacing: 0.30em; }
/* El hueco entre PALABRAS tiene que ganarle claramente al hueco entre letras (0,38em), o
   la frase se lee como una ristra: 1 em del svg son 100 unidades de la letra, así que con
   0,25em de hueco más los 0,17em de margen de cada caja quedan 0,67em entre palabras. */
.cara { gap: 0 0.25em; }
.display .cara + .cara { margin-left: 0.25em; }
/* La extrusión va dentro del svg; el filtro de CSS sigue apagado en letras */
.marca, .cara, .display--24 .cara { filter: none; }

/* v6.0 · «Qué son»: la forma llega al borde derecho de la pantalla (la distancia del
   contenedor al borde es el gutter, o la mitad de lo que sobra cuando la página tope en
   1680) y deja aire arriba y abajo sin perder longitud. */
.queson__fotos::before { top: 15%; bottom: 15%; right: calc(-1 * max(var(--gutter), (100vw - var(--contenedor)) / 2)); }
.queson__monton { top: calc(15% + 6px); bottom: calc(15% + 6px); right: calc(6px - max(var(--gutter), (100vw - var(--contenedor)) / 2)); }
/* Burbujas recolocadas contra la forma nueva */
/* Las figuras del collage se miden por el alto de la forma; el ancho lo pone el recorte */
.queson__monton img.monton__pieza { width: auto; }
.queson__foto--1 { width: 42%; left: -6%; top: 10%; }
.queson__foto--2 { width: 34%; left: 4%; top: 48%; right: auto; bottom: auto; }
.queson__foto--3 { width: 30%; left: 30%; top: 62%; bottom: auto; }

/* v6.0 · «Cómo conseguir»: cada tarjeta sobre el pastel de su propio título (azul para
   Elige tus 6, coral para la Bolsa Misteriosa) y la frontera entre los dos, curva. */
:root { --pastel-coral: #FFE1DB; }
.seccion--packs { background: var(--pastel-azul); --sombra-tarjeta: #B7D5EA; }
.seccion--packs::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--pastel-coral); clip-path: ellipse(58% 78% at 106% 50%); }
.packs > .pack { --sombra-tarjeta: #B7D5EA; }
.packs > .pack--misteriosa { --sombra-tarjeta: #F1C3BA; }
@media (max-width: 767px) {
  .seccion--packs { background: var(--pastel-azul); }
  .seccion--packs::before { clip-path: ellipse(120% 52% at 50% 104%); }
  /* En móvil la sección va en una columna: el bloque de fotos se había quedado en la
     segunda columna de la rejilla de escritorio (v5.7) y salía como una tira diminuta. */
  .queson { grid-template-columns: 1fr; }
  .queson__fotos { max-width: 320px; width: 100%; margin: 8px auto 0; }
  .queson__fotos::before { top: 10%; bottom: 10%; right: calc(-20% + 0px); }
  .queson__monton { top: calc(10% + 6px); bottom: calc(10% + 6px); right: calc(-20% + 6px); }
  .queson__foto--1 { width: 44%; left: 0; top: 4%; }
  .queson__foto--2 { width: 36%; left: 62%; top: 44%; }
  .queson__foto--3 { width: 32%; left: 18%; top: 66%; }
  /* Con las letras más separadas, «MISTERIOSA» a 36 px no cabía en la tarjeta y estiraba
     las dos columnas de packs fuera de la pantalla: a 30 px entra, y «Bolsa Misteriosa 6»
     vuelve a caber en dos líneas. */
  .pack h3.display--24 { font-size: 30px; }
}

/* v6.1 · Letras: trazados de la fuente, una letra encima de otra (tools/letras.mjs). La
   separación entre letras ya viene dentro del svg, así que el letter-spacing no pinta nada;
   entre palabras, el margen, que tiene que ganar claramente al hilo entre letras. */
.cara, .hero .cara, .display--40 .cara, .pack .display--24 .cara, .paso .display--24 .cara { letter-spacing: 0; }
.cara { gap: 0 0.2em; }
.display .cara + .cara { margin-left: 0.2em; }
/* Wordmark: cada letra lleva 0,17em de aire por lado en su caja; con -0,05em las líneas
   negras de dos letras vecinas se tocan (como en la bolsa) y la de delante tapa a la de detrás. */
.marca__l + .marca__l, .pie .marca__l + .marca__l, .bolsa .marca__l + .marca__l { margin-left: -0.05em; }

/* v6.1 · Títulos torcidos: unos sí y otros no, para que no sea un patrón */
#titulo-queson { transform: rotate(-2deg); transform-origin: 0 50%; }
#titulo-figuras { transform: rotate(1.5deg); transform-origin: 0 50%; }
#titulo-packs { transform: rotate(-1.5deg); transform-origin: 0 50%; }
#titulo-confianza { transform: rotate(2deg); }
#titulo-elige { transform: rotate(-2.5deg); transform-origin: 0 50%; }
#titulo-misteriosa { transform: rotate(2deg); transform-origin: 0 50%; }
.paso:nth-child(2) h3 { transform: rotate(-2deg); transform-origin: 0 50%; }

/* v6.1 · Cómo se hace (tableta y escritorio): 1 y 2 a los lados de la línea; el 3 debajo,
   centrado, con su tamaño. En móvil sigue la columna de siempre con la línea a la izquierda. */
@media (min-width: 768px) {
  .pasos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* en un elemento absoluto, la línea final «auto» es el borde del contenedor: hay que cerrar la fila */
  .pasos::before { grid-row: 1 / 2; grid-column: 1 / -1; top: 2%; bottom: 2%; }
  .paso:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc((100% - clamp(48px, 5vw, 96px)) / 2); margin-top: clamp(48px, 5vw, 110px); }
  .paso:nth-child(3) .paso__foto { width: 62%; margin: 0 auto; transform: rotate(-2deg); }
  .paso:nth-child(3) .paso__cuerpo { width: max-content; max-width: 100%; margin: 0 auto; }
  .paso:nth-child(3) .paso__cuerpo p { max-width: 36ch; }
}

/* v6.1 · Envío y garantía: la furgoneta al lado del título */
.confianza__cabeza { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.5vw, 56px); margin-bottom: clamp(24px, 2.5vw, 48px); }
.confianza__cabeza .confianza__titulo { margin: 0; }
.furgo { width: clamp(150px, 15vw, 400px); height: auto; flex: none; overflow: visible; }
.furgo__cuerpo { animation: furgo-bache 700ms ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.furgo__estela { stroke-dasharray: 60 30; animation: furgo-estela 900ms linear infinite; }
.furgo__estela--2 { animation-duration: 700ms; } .furgo__estela--3 { animation-duration: 1100ms; }
@keyframes furgo-bache { from { transform: translateY(0) rotate(0); } to { transform: translateY(-3px) rotate(-1deg); } }
@keyframes furgo-estela { to { stroke-dashoffset: 90; } }
@media (max-width: 767px) { .confianza__cabeza { flex-direction: column; gap: 8px; } .furgo { width: 170px; } }

/* v6.1 · «Qué son» (tableta y escritorio): tres círculos en su columna, a la izquierda, y el
   óvalo a partir del 36 % del bloque. Todo va en % del bloque, así que la separación es la
   misma en cualquier ancho: la que había a pantalla completa. */
@media (min-width: 768px) {
  .queson__fotos::before { left: 36%; }
  .queson__monton { left: calc(36% + 6px); }
  .queson__foto--1 { width: 31%; left: 0; top: 4%; right: auto; bottom: auto; }
  .queson__foto--2 { width: 27%; left: 5%; top: 38%; right: auto; bottom: auto; }
  .queson__foto--3 { width: 25%; left: 1%; top: 69%; right: auto; bottom: auto; }
}
/* En móvil, los tres círculos en fila encima y el óvalo debajo: nada se pisa */
@media (max-width: 767px) {
  .queson__fotos { aspect-ratio: 1 / 1.05; }
  .queson__foto--1, .queson__foto--2, .queson__foto--3 { width: 30%; top: 0; bottom: auto; right: auto; }
  .queson__foto--1 { left: 0; } .queson__foto--2 { left: 35%; top: 5%; } .queson__foto--3 { left: 70%; }
  .queson__fotos::before { top: 40%; bottom: 2%; }
  .queson__monton { top: calc(40% + 6px); bottom: calc(2% + 6px); }
}

/* v6.1 · Escala como Wigglitz: de lado a lado y todo crece con la pantalla. El contenedor ya
   no tiene tope (solo el margen lateral, que también crece); los bloques de texto conservan su
   ancho de línea en ch. Medidas a 1440 / 1920 / 2560. */
@media (min-width: 1200px) {
  :root { --gutter: clamp(40px, calc(4.5 * var(--vw)), 160px); --contenedor: calc(calc(100 * var(--vw)) - 2 * var(--gutter)); --seccion: clamp(72px, calc(7 * var(--vw)), 200px); --hueco-rejilla: clamp(20px, calc(1.6 * var(--vw)), 48px); }
  body { font-size: clamp(19px, calc(0.625 * var(--vw)) + 12px, 30px); }                /* 21 / 24 / 28 */
  .hero__parrafo, .queson__texto p, .seccion__cabecera p, .dias__cabecera p, .confianza__texto { font-size: clamp(20px, calc(0.7 * var(--vw)) + 11px, 32px); max-width: 60ch; }
  .display--40 { font-size: clamp(56px, calc(3.8 * var(--vw)) + 4px, 150px); }         /* 59 / 77 / 101 */
  .hero__resto { font-size: clamp(48px, calc(2.6 * var(--vw)) + 12px, 120px); }         /* 49 / 62 / 79 */
  .display--24, .pack .display--24 { font-size: clamp(40px, calc(1.8 * var(--vw)) + 14px, 84px); }  /* 40 / 49 / 60 */
  .paso h3.display--24 { font-size: clamp(32px, calc(1.4 * var(--vw)) + 12px, 64px); }
  .marca { font-size: clamp(40px, calc(2.3 * var(--vw)) + 12px, 80px); }
  .marca.marca--hero { font-size: clamp(120px, calc(8.4 * var(--vw)), 280px); }                /* 121 / 161 / 215 */
  .cabecera__fila { height: clamp(88px, calc(6.2 * var(--vw)), 160px); }
  .menu a { font-size: clamp(17px, calc(0.55 * var(--vw)) + 10px, 26px); }
  .barra-envio { font-size: clamp(16px, calc(0.45 * var(--vw)) + 10px, 24px); }
  .escena { max-width: clamp(480px, calc(44 * var(--vw)), 1300px); }
  .escena__satelite { width: clamp(110px, calc(8.5 * var(--vw)), 260px); }
  .escena__satelite--2 { width: clamp(96px, calc(7.5 * var(--vw)), 230px); }
  .escena__satelite--3 { width: clamp(130px, calc(10 * var(--vw)), 300px); }
  .pildora { font-size: clamp(20px, calc(0.6 * var(--vw)) + 11px, 30px); min-height: clamp(56px, calc(4 * var(--vw)), 104px); padding: 0 clamp(28px, calc(2 * var(--vw)), 56px); }
  .pildora--grande { font-size: clamp(22px, calc(0.75 * var(--vw)) + 11px, 34px); min-height: clamp(68px, calc(4.8 * var(--vw)), 124px); padding: 0 clamp(36px, calc(2.8 * var(--vw)), 72px); }
  .figura h3, .sello strong, .promesa strong, .hechos__lista strong, .fabricante strong, .dia__escena { font-size: clamp(24px, calc(0.95 * var(--vw)) + 10px, 38px); }
  .menu a, .figuras__nota, .texto-2, .hechos__lista span, .figura p, .figura__ficha, .dia__ayuda, .dias__nota, .paso p, .sello span, .pack__precio span, .pack__texto, .promesa span, .confianza__nota, .pie h3, .pie__legal, .fabricante { font-size: clamp(19px, calc(0.6 * var(--vw)) + 11px, 28px); }
  /* Dos filas de seis */
  .figuras { grid-template-columns: repeat(6, 1fr); padding-top: clamp(60px, calc(5 * var(--vw)), 150px); gap: clamp(72px, calc(6 * var(--vw)), 170px) var(--hueco-rejilla); }
  .figura .redonda { width: clamp(150px, calc(12 * var(--vw)), 340px); margin-top: calc(clamp(150px, calc(12 * var(--vw)), 340px) * -0.38); }
  .dia .redonda { width: clamp(128px, calc(10 * var(--vw)), 290px); margin-top: calc(clamp(128px, calc(10 * var(--vw)), 290px) * -0.4); }
  .paso__numero { width: clamp(56px, calc(3.8 * var(--vw)), 110px); height: clamp(56px, calc(3.8 * var(--vw)), 110px); font-size: clamp(24px, calc(1.6 * var(--vw)), 48px); }
  .paso__cuerpo { grid-template-columns: clamp(56px, calc(3.8 * var(--vw)), 110px) 1fr; }
  .paso p { max-width: 44ch; }
  .sello img { width: clamp(72px, calc(5.5 * var(--vw)), 160px); height: clamp(72px, calc(5.5 * var(--vw)), 160px); }
  .pack__precio strong { font-size: clamp(34px, calc(2.4 * var(--vw)), 72px); }
  .huecos--pack { grid-template-columns: repeat(3, clamp(80px, calc(6.4 * var(--vw)), 180px)); gap: clamp(10px, calc(0.9 * var(--vw)), 24px); }
  .huecos--pack li { width: clamp(80px, calc(6.4 * var(--vw)), 180px); height: clamp(80px, calc(6.4 * var(--vw)), 180px); }
  .bolsa { width: clamp(260px, calc(19 * var(--vw)), 520px); }
  .bolsa__circulo { width: clamp(160px, calc(12 * var(--vw)), 330px); height: clamp(160px, calc(12 * var(--vw)), 330px); }
  .bolsa .marca { font-size: clamp(28px, calc(2.1 * var(--vw)), 58px); }
  .bolsa__que, .bolsa__pildora, .bolsa__pildora--aviso { font-size: clamp(16px, calc(1.15 * var(--vw)), 30px); }
  .promesa .icono { width: clamp(30px, calc(2.2 * var(--vw)), 60px); height: clamp(30px, calc(2.2 * var(--vw)), 60px); }
  .fabricante img { width: clamp(80px, calc(6 * var(--vw)), 170px); height: clamp(80px, calc(6 * var(--vw)), 170px); }
}

/* v6.2 · Escala algo más contenida que la v6.1 */
@media (min-width: 1200px) {
  :root { --gutter: clamp(40px, calc(5 * var(--vw)), 180px); --seccion: clamp(64px, calc(6.2 * var(--vw)), 170px); --hueco-rejilla: clamp(18px, calc(1.4 * var(--vw)), 40px); }
  body { font-size: clamp(18px, calc(0.5 * var(--vw)) + 12px, 26px); }                     /* 19 / 22 / 25 */
  .hero__parrafo, .queson__texto p, .seccion__cabecera p, .dias__cabecera p, .confianza__texto { font-size: clamp(19px, calc(0.55 * var(--vw)) + 11px, 28px); }
  .display--40 { font-size: clamp(52px, calc(3.1 * var(--vw)) + 6px, 120px); }             /* 51 / 66 / 85 */
  .hero__resto { font-size: clamp(44px, calc(2.1 * var(--vw)) + 12px, 100px); }            /* 44 / 52 / 66 */
  .display--24, .pack .display--24 { font-size: clamp(36px, calc(1.5 * var(--vw)) + 12px, 70px); }  /* 36 / 41 / 50 */
  .paso h3.display--24 { font-size: clamp(30px, calc(1.2 * var(--vw)) + 10px, 52px); }
  .marca { font-size: clamp(38px, calc(1.9 * var(--vw)) + 12px, 66px); }
  .marca.marca--hero { font-size: clamp(110px, calc(7.2 * var(--vw)), 230px); }            /* 110 / 138 / 184 */
  .cabecera__fila { height: clamp(84px, calc(5.4 * var(--vw)), 130px); }
  .menu a { font-size: clamp(16px, calc(0.45 * var(--vw)) + 10px, 22px); }
  .barra-envio { font-size: clamp(15px, calc(0.4 * var(--vw)) + 9px, 20px); }
  .escena { max-width: clamp(460px, calc(40 * var(--vw)), 1100px); }
  .escena__satelite { width: clamp(100px, calc(7.5 * var(--vw)), 220px); }
  .escena__satelite--2 { width: clamp(88px, calc(6.5 * var(--vw)), 190px); }
  .escena__satelite--3 { width: clamp(120px, calc(9 * var(--vw)), 260px); }
  .pildora { font-size: clamp(19px, calc(0.5 * var(--vw)) + 10px, 26px); min-height: clamp(54px, calc(3.4 * var(--vw)), 88px); padding: 0 clamp(26px, calc(1.8 * var(--vw)), 48px); }
  .pildora--grande { font-size: clamp(21px, calc(0.6 * var(--vw)) + 10px, 29px); min-height: clamp(64px, calc(4 * var(--vw)), 104px); padding: 0 clamp(34px, calc(2.4 * var(--vw)), 62px); }
  .figura h3, .sello strong, .promesa strong, .hechos__lista strong, .fabricante strong, .dia__escena { font-size: clamp(22px, calc(0.75 * var(--vw)) + 9px, 32px); }
  .menu a, .figuras__nota, .texto-2, .hechos__lista span, .figura p, .figura__ficha, .dia__ayuda, .dias__nota, .paso p, .sello span, .pack__precio span, .pack__texto, .promesa span, .confianza__nota, .pie h3, .pie__legal, .fabricante { font-size: clamp(17px, calc(0.5 * var(--vw)) + 10px, 24px); }
  .figuras { padding-top: clamp(56px, calc(4.4 * var(--vw)), 120px); gap: clamp(64px, calc(5.2 * var(--vw)), 140px) var(--hueco-rejilla); }
  .figura .redonda { width: clamp(140px, calc(10.5 * var(--vw)), 280px); margin-top: calc(clamp(140px, calc(10.5 * var(--vw)), 280px) * -0.38); }
  .dia .redonda { width: clamp(120px, calc(8.8 * var(--vw)), 240px); margin-top: calc(clamp(120px, calc(8.8 * var(--vw)), 240px) * -0.4); }
  .paso__numero { width: clamp(52px, calc(3.3 * var(--vw)), 90px); height: clamp(52px, calc(3.3 * var(--vw)), 90px); font-size: clamp(22px, calc(1.4 * var(--vw)), 40px); }
  .paso__cuerpo { grid-template-columns: clamp(52px, calc(3.3 * var(--vw)), 90px) 1fr; }
  .sello img { width: clamp(70px, calc(5 * var(--vw)), 130px); height: clamp(70px, calc(5 * var(--vw)), 130px); }
  .pack__precio strong { font-size: clamp(32px, calc(2 * var(--vw)), 60px); }
  .huecos--pack { grid-template-columns: repeat(3, clamp(76px, calc(5.6 * var(--vw)), 150px)); gap: clamp(10px, calc(0.8 * var(--vw)), 20px); }
  .huecos--pack li { width: clamp(76px, calc(5.6 * var(--vw)), 150px); height: clamp(76px, calc(5.6 * var(--vw)), 150px); }
  .bolsa { width: clamp(250px, calc(17 * var(--vw)), 440px); }
  .bolsa__circulo { width: clamp(150px, calc(10.5 * var(--vw)), 280px); height: clamp(150px, calc(10.5 * var(--vw)), 280px); }
  .bolsa .marca { font-size: clamp(26px, calc(1.9 * var(--vw)), 50px); }
  .bolsa__que, .bolsa__pildora, .bolsa__pildora--aviso { font-size: clamp(15px, calc(1 * var(--vw)), 26px); }
  .promesa .icono { width: clamp(28px, calc(2 * var(--vw)), 50px); height: clamp(28px, calc(2 * var(--vw)), 50px); }
  .fabricante img { width: clamp(76px, calc(5.2 * var(--vw)), 140px); height: clamp(76px, calc(5.2 * var(--vw)), 140px); }
  .furgo { width: clamp(150px, calc(13 * var(--vw)), 340px); }
}

/* v6.3 · Tope de crecimiento en 2000 px */
:root { --vw: 1vw; }
@media (min-width: 1200px) {
  :root { --vw: min(1vw, 20px); --contenedor: calc(min(100vw, 2000px) - 2 * var(--gutter)); }
}

/* v6.4 · Paso 1 un poco mayor que el 2, no el doble */
@media (min-width: 768px) { .paso:nth-child(1) .paso__foto { width: 88%; } }

/* v6.5 · Cortes de sección */
html, body { overflow-x: clip; }
/* Hechos: cinta inclinada que corre sin fin (se para al pasar el ratón) */
.hechos--cinta { position: relative; z-index: 4; width: 106vw; margin: -34px 0 -34px -3vw; transform: rotate(-1.6deg); border-block: 3px solid var(--tinta-marca); box-shadow: 0 7px 0 var(--sombra); overflow: hidden; }
.hechos__pista { display: flex; width: max-content; animation: cinta-corre 42s linear infinite; }
.hechos--cinta:hover .hechos__pista { animation-play-state: paused; }
.hechos--cinta .hechos__lista { display: flex; flex: none; gap: 0; min-height: 0; padding: clamp(14px, calc(1.1 * var(--vw)), 22px) 0; max-width: none; margin: 0; }
.hechos--cinta .hechos__lista li { flex: none; display: flex; align-items: center; gap: 12px; padding: 0 clamp(28px, calc(2.4 * var(--vw)), 52px); position: relative; }
.hechos--cinta .hechos__lista li::after { content: ""; position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--c-coral); border: 2px solid var(--tinta-marca); }
.hechos--cinta .hechos__lista li:nth-child(2)::after { background: var(--c-turquesa); }
.hechos--cinta .hechos__lista li:nth-child(3)::after { background: var(--c-morado); }
.hechos--cinta .hechos__lista li:nth-child(4)::after { background: var(--c-verde); }
.hechos--cinta .hechos__lista li div { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
@keyframes cinta-corre { to { transform: translateX(-50%); } }
@keyframes cinta-vuelve { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* «Qué son» deja sitio arriba a la cinta, que se come parte de su borde */
.seccion--queson { padding-top: calc(var(--seccion) + 30px); }

/* Ola, loma, zigzag, burbujas, ola ancha */
.dias { margin-top: -36px; border-top: 36px solid transparent;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 36' ><path d='M0 36V18C60-6 60-6 120 18S180 42 240 18V36Z'/></svg>") 0 0 / 240px 36px repeat-x, linear-gradient(#000 0 0) 0 36px / 100% calc(100% - 36px) no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 36' ><path d='M0 36V18C60-6 60-6 120 18S180 42 240 18V36Z'/></svg>") 0 0 / 240px 36px repeat-x, linear-gradient(#000 0 0) 0 36px / 100% calc(100% - 36px) no-repeat; }
.seccion--figuras { margin-top: -72px; border-top: 72px solid transparent;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 72' preserveAspectRatio='none'><path d='M0 72V56Q500-44 1000 56V72Z'/></svg>") 0 0 / 100% 72px repeat-x, linear-gradient(#000 0 0) 0 72px / 100% calc(100% - 72px) no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 72' preserveAspectRatio='none'><path d='M0 72V56Q500-44 1000 56V72Z'/></svg>") 0 0 / 100% 72px repeat-x, linear-gradient(#000 0 0) 0 72px / 100% calc(100% - 72px) no-repeat; }
.seccion--packs { margin-top: -18px; border-top: 18px solid transparent;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 18' ><path d='M0 18L14 1L28 18Z'/></svg>") 0 0 / 28px 18px repeat-x, linear-gradient(#000 0 0) 0 18px / 100% calc(100% - 18px) no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 18' ><path d='M0 18L14 1L28 18Z'/></svg>") 0 0 / 28px 18px repeat-x, linear-gradient(#000 0 0) 0 18px / 100% calc(100% - 18px) no-repeat; }
.confianza { margin-top: -32px; border-top: 32px solid transparent;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32' ><path d='M0 32A32 32 0 0 1 64 32Z'/></svg>") 0 0 / 64px 32px repeat-x, linear-gradient(#000 0 0) 0 32px / 100% calc(100% - 32px) no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32' ><path d='M0 32A32 32 0 0 1 64 32Z'/></svg>") 0 0 / 64px 32px repeat-x, linear-gradient(#000 0 0) 0 32px / 100% calc(100% - 32px) no-repeat; }
.pie { margin-top: -48px; border-top: 48px solid transparent;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 48' ><path d='M0 48V24C130-6 130-6 260 24S390 54 520 24V48Z'/></svg>") 0 0 / 520px 48px repeat-x, linear-gradient(#000 0 0) 0 48px / 100% calc(100% - 48px) no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 48' ><path d='M0 48V24C130-6 130-6 260 24S390 54 520 24V48Z'/></svg>") 0 0 / 520px 48px repeat-x, linear-gradient(#000 0 0) 0 48px / 100% calc(100% - 48px) no-repeat; }
.pie { position: relative; }

/* Minimals asomando por encima de la loma */
.asoman { position: relative; z-index: 5; height: 0; max-width: min(100vw, 2000px); margin: 0 auto; }
.asoman img { position: absolute; bottom: -34px; height: clamp(90px, calc(9 * var(--vw)), 190px); width: auto; transform: rotate(var(--g)); filter: drop-shadow(0 6px 6px rgba(30, 58, 95, 0.25)); animation: asoma 2.6s ease-in-out infinite alternate; }
.asoman img:nth-child(2) { animation-delay: -0.9s; bottom: -12px; } .asoman img:nth-child(3) { animation-delay: -1.7s; bottom: -40px; }
@keyframes asoma { to { transform: rotate(var(--g)) translateY(-8px); } }
.seccion--figuras { padding-top: calc(var(--seccion) + 20px); }
/* hueco libre al final de «Ideas» para que los tres se vean de pie sobre la loma, sin pisar texto */
.dias { padding-bottom: calc(var(--seccion) + clamp(80px, calc(8 * var(--vw)), 170px)); }

/* Dos cintas cruzadas */
.cruce { position: relative; z-index: 5; height: 0; }
.cinta { position: absolute; left: -3vw; width: 106vw; top: 0; overflow: hidden; border-block: 3px solid var(--tinta-marca); box-shadow: 0 6px 0 var(--sombra); }
.cinta--a { background: #fff; transform: translateY(-50%) rotate(-2.6deg); }
.cinta--b { background: #FBE7A6; transform: translateY(-50%) rotate(2.2deg); }
.cinta__pista { display: flex; width: max-content; animation: cinta-corre 36s linear infinite; }
.cinta--b .cinta__pista { animation-name: cinta-vuelve; animation-duration: 44s; }
.cinta ul { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.cinta li { flex: none; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; font-size: clamp(24px, calc(2.1 * var(--vw)), 44px); padding: clamp(12px, calc(0.9 * var(--vw)), 18px) clamp(22px, calc(1.8 * var(--vw)), 40px); position: relative; white-space: nowrap; }
.cinta li::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--tinta-marca); }
.cinta li:nth-child(6n+1) { color: var(--t-coral); } .cinta li:nth-child(6n+2) { color: var(--t-morado); } .cinta li:nth-child(6n+3) { color: var(--t-verde); }
.cinta li:nth-child(6n+4) { color: var(--t-azul); } .cinta li:nth-child(6n+5) { color: var(--t-naranja); } .cinta li:nth-child(6n) { color: var(--t-rosa); }
.cinta--b li { color: var(--tinta-marca) !important; }
.seccion--figuras { padding-bottom: calc(var(--seccion) + 60px); }
.seccion--panel { padding-top: calc(var(--seccion) + 70px); }

/* v6.5 · Pasos: como mucho un 15 % sobre el más pequeño (el 3, 62 %) */
@media (min-width: 768px) {
  .paso:nth-child(1) .paso__foto { width: 71%; }
  .paso:nth-child(2) .paso__foto { width: 66%; }
  .paso:nth-child(2) .paso__cuerpo { max-width: 66%; }
}
@media (max-width: 767px) {
  .hechos--cinta { margin: -20px 0 -20px -3vw; }
  .asoman img { height: 80px; bottom: -30px; }
  .hechos--cinta .hechos__lista li { flex-direction: row; text-align: left; }
  .hechos--cinta .hechos__lista li div { display: flex; }
  .cinta--a { transform: translateY(-85%) rotate(-4deg); }
  .cinta--b { transform: translateY(-15%) rotate(3.5deg); }
  .cinta li { font-size: 22px; }
}

/* v6.7 · «Cómo se hace» más compacto */
@media (min-width: 768px) {
  .seccion--panel { padding-top: calc(var(--seccion) + 44px); padding-bottom: calc(var(--seccion) * 0.8); }
  .seccion--panel .seccion__cabecera { margin-bottom: clamp(24px, calc(2 * var(--vw)), 40px); }
  .paso__foto { aspect-ratio: 16 / 10; padding: 6%; }
  .paso:nth-child(2) { margin-top: clamp(48px, calc(4.5 * var(--vw)), 90px); }
  .paso:nth-child(3) { margin-top: clamp(-40px, calc(-2 * var(--vw)), -12px); }
  .paso__cuerpo { margin-top: 14px; }
}

/* v6.8 · Visor: un círculo grande en vez de una tarjeta */
/* el <dialog> cubre toda la pantalla: cualquier clic fuera del círculo, el nombre o el botón le llega a él */
.visor { max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; inset: 0; overflow: hidden; }
.visor[open] { display: grid; place-items: center; }
.visor::backdrop { background: rgba(20, 38, 64, 0.62); animation: visor-fondo 300ms ease-out; }
@keyframes visor-fondo { from { opacity: 0; } }
.visor[open] .visor__caja { animation: none; }
.visor__caja { background: none; border: 0; box-shadow: none; padding: 0; gap: clamp(14px, 2vh, 22px); overflow: visible; width: min(80vw, 58vh, 540px); }
.visor__foto { width: min(80vw, 58vh, 540px); aspect-ratio: 1; border-radius: 50%; border: clamp(6px, 1vh, 10px) solid var(--c-visor, #fff); background: #fff; box-shadow: 10px 12px 0 rgba(20, 38, 64, 0.55); will-change: transform; }
.visor__foto { isolation: isolate; }
.paso:nth-child(n) .paso__foto img.paso__recorte { object-fit: contain; object-position: 50% 50%; transform: none; border-radius: 0; filter: drop-shadow(4px 6px 0 rgba(30, 58, 95, 0.15)); }
.pie__aviso { margin: 12px 0 0; max-width: 90ch; font-size: 13px; line-height: 1.5; opacity: 0.85; }
.pie__aviso a { color: inherit; }
.visor__foto img { object-position: 50% 50%; }
.visor__foto > img:not(.visor__hd) { transition: opacity 260ms ease-out; }
.visor__foto:has(.visor__hd--lista) > img:not(.visor__hd) { opacity: 0; }
@media (min-width: 1200px) and (max-width: 1399px) { .cabecera .menu a { padding-inline: 8px; } }
.visor__cerrar { top: 0; right: 0; z-index: 2; background: #fff; border: 2px solid var(--tinta-marca); width: 52px; height: 52px; }
.visor__nombre { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; font-size: clamp(28px, 4.2vh, 44px); color: var(--c-visor, var(--tinta)); background: #fff; border: 3px solid var(--tinta-marca); border-radius: 999px; padding: 0.3em 0.8em; box-shadow: 0 5px 0 rgba(20, 38, 64, 0.55); }
.visor__boton { background: var(--acento, #F25B4F); color: #fff; border-color: var(--tinta-marca); }

/* v7.0 · Títulos de los packs que se balancean */
#titulo-elige, #titulo-misteriosa { transform-origin: 30% 90%; animation: balanceo 2.6s ease-in-out infinite alternate; }
#titulo-misteriosa { animation-delay: -1.3s; }
@keyframes balanceo { from { transform: rotate(-3.5deg); } to { transform: rotate(3deg); } }

/* La imagen de cada pack es otro botón del pack */
.pack__visual { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: transform 260ms var(--rebote); }
@media (hover: hover) {
  .pack__visual:hover { transform: rotate(-2deg) scale(1.04); }
  .pack:has(.pack__visual:hover) .pildora--pack { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 0 var(--tinta-marca); }
}
.pack__visual:active { transform: scale(0.96); transition-duration: 90ms; }

/* Botones de pack: grandes, con el precio en su pastilla */
.pildora--pack { gap: 14px; min-height: clamp(66px, calc(4.4 * var(--vw)), 92px); padding: 0 10px 0 clamp(26px, calc(2 * var(--vw)), 40px); font-size: clamp(21px, calc(0.6 * var(--vw) + 10px), 28px); font-weight: 800; border: 3px solid var(--tinta-marca); box-shadow: 0 8px 0 var(--tinta-marca); }
.pildora__precio { display: inline-flex; align-items: center; background: #fff; color: var(--cta); border: 3px solid var(--tinta-marca); border-radius: 999px; padding: 0.12em 0.55em; font-family: var(--display); font-weight: 400; font-size: 1.3em; line-height: 1.1; letter-spacing: 0.02em; transform: rotate(-4deg); }
@media (hover: hover) { .pildora--pack:hover { box-shadow: 0 11px 0 var(--tinta-marca); } .pildora--pack:hover .pildora__precio { transform: rotate(3deg) scale(1.08); } }
.pildora--pack:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--tinta-marca); }
.pildora__precio { transition: transform 240ms var(--rebote); }

/* Precio de la tarjeta: grande, con la letra de la marca y el color del título */
.pack .pack__precio strong { font-family: var(--display); font-weight: 400; letter-spacing: 0.02em; font-size: clamp(44px, calc(3.2 * var(--vw)), 76px); color: var(--t-azul); }
.pack--misteriosa .pack__precio strong { color: var(--t-coral); }
.pack .pack__precio span:not([data-precio]) { font-size: clamp(18px, calc(0.5 * var(--vw) + 10px), 24px); font-weight: 700; }
.pack .pack__precio strong span { color: inherit; font-size: inherit; font-weight: inherit; }
.pack .pack__precio strong, .pildora__precio { word-spacing: -0.25em; }
.pildora--pack > span:first-child { white-space: nowrap; }
/* «Bolsa» / «Misteriosa 6»: dos líneas fijas al mismo tamaño que «Elige tus 6» (el 6 nunca se queda solo) */
#titulo-misteriosa .salto { flex-basis: 100%; height: 0; }
@media (max-width: 767px) { .pildora--pack { width: 100%; justify-content: space-between; font-size: 19px; } }

/* v7.1 · MINIMALS del hero: escritorio +10 %; móvil y tableta, lo que dé el ancho de la columna
   (el wordmark mide 6,94 veces su tamaño de letra) */
@media (min-width: 1200px) { .marca.marca--hero { font-size: clamp(121px, calc(7.9 * var(--vw)), 252px); } }
@media (max-width: 1199px) { .marca.marca--hero { font-size: calc((100vw - 2 * var(--gutter)) * 0.98 / 6.94); } }
@media (max-width: 767px) {
  /* la bolsa centrada, como los seis de Elige tus 6 */
  .pack .pack__visual { display: flex; justify-content: center; justify-self: stretch; width: 100%; }
  /* «Cómo se hace»: fotos más pequeñas, con aire a los lados */
  .paso:nth-child(n) .paso__foto { width: 78%; margin-left: auto; margin-right: auto; }
}

/* v7.2 · Lo que aún no se ha visto empieza invisible (sigue en el HTML para el SEO) y aparece
   una sola vez; la clase .js-revela solo la pone el <head> si hay IntersectionObserver y no se
   pide reducir movimiento */
[data-revela], [data-revela-hijos] > * { animation: aparece 520ms var(--ease-out) both; }
[data-revela-hijos] > :nth-child(2) { animation-delay: 55ms; } [data-revela-hijos] > :nth-child(3) { animation-delay: 110ms; } [data-revela-hijos] > :nth-child(4) { animation-delay: 165ms; } [data-revela-hijos] > :nth-child(5) { animation-delay: 220ms; } [data-revela-hijos] > :nth-child(6) { animation-delay: 275ms; } [data-revela-hijos] > :nth-child(7) { animation-delay: 330ms; } [data-revela-hijos] > :nth-child(8) { animation-delay: 385ms; } [data-revela-hijos] > :nth-child(9) { animation-delay: 440ms; } [data-revela-hijos] > :nth-child(10) { animation-delay: 495ms; } [data-revela-hijos] > :nth-child(11) { animation-delay: 550ms; } [data-revela-hijos] > :nth-child(12) { animation-delay: 605ms; }
.js-revela [data-revela]:not(.en-vista):not(.ya-visto), .js-revela [data-revela-hijos] > :not(.en-vista):not(.ya-visto) { opacity: 0; animation: none; }
@media (prefers-reduced-motion: reduce) { [data-revela], [data-revela-hijos] > * { animation: none; } }
/* capa HD del visor, encima de la miniatura, entra con fundido */
.visor__foto { position: relative; }
.visor__hd { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 260ms ease-out; }
.visor__hd--lista { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #titulo-elige, #titulo-misteriosa { animation: none; }
  .hechos__pista, .cinta__pista, .asoman img { animation: none !important; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; }
  html { scroll-behavior: auto; }
}

/* v7.3 · pantallas pequeñas (y la pestaña del panel en el móvil): nada se sale por la derecha */
@media (max-width: 420px) {
  h2.display--40 { font-size: min(36px, calc((100vw - 2 * var(--gutter)) * 0.105)); }
  .hero .hero__resto { font-size: min(30px, calc((100vw - 2 * var(--gutter)) * 0.0875)); }
  .cabecera .marca { font-size: min(28px, calc((100vw - 2 * var(--gutter) - 104px) * 0.143)); }
  .hero__rejilla > * { min-width: 0; }
  .pack { container-type: inline-size; grid-template-columns: minmax(0, 1fr); }
  .pack > *, .pack > div > * { min-width: 0; }
  .pack h3.display--24 { font-size: min(30px, 9.7cqi); }
  .pack__precio { flex-wrap: wrap; row-gap: 2px; }
  .pack .pack__precio strong { font-size: min(44px, 14cqi); }
  .pildora--pack { font-size: min(19px, 6cqi); padding-left: min(26px, 7cqi); gap: 8px; }
  /* Minimals disponibles: dos columnas que encogen; círculo y textos con el ancho de la ficha
     (el círculo tenía 140 px de mínimo y la columna, a 300 px de pantalla, 134) */
  .figuras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figura { container-type: inline-size; min-width: 0; }
  .figura .redonda { width: min(140px, 88cqi); margin-top: calc(min(140px, 88cqi) * -0.38); }
  .figura h3 { font-size: min(22px, 16cqi); }
  .figura p, .figura__ficha { font-size: min(17px, 12.5cqi); overflow-wrap: anywhere; }
  /* Cómo se hace: la columna del texto también encoge, y su título con ella */
  .pasos { grid-template-columns: minmax(0, 1fr); }
  .paso__cuerpo { grid-template-columns: 52px minmax(0, 1fr); }
  .paso__cuerpo > * { min-width: 0; }
  .paso h3.display--24 { font-size: min(30px, calc((100vw - 2 * var(--gutter) - 96px) * 0.13)); }
  /* Loma: cada Minimal en su tercio exacto, centrado y apoyado abajo: huecos iguales y ninguno
     pisa al de al lado, sea cual sea su forma (salen tres al azar) */
  .asoman img { width: 30%; height: 76px; object-fit: contain; object-position: 50% 100%; bottom: -30px; }
  .asoman img:nth-child(1) { left: 2.5% !important; }
  .asoman img:nth-child(2) { left: 35% !important; bottom: -30px; }
  .asoman img:nth-child(3) { left: 67.5% !important; bottom: -30px; }
}
/* Todos miran a la derecha: si se tocan, el de la izquierda va encima y su cabeza se ve */
.asoman img:nth-child(1) { z-index: 3; }
.asoman img:nth-child(2) { z-index: 2; }
.asoman img:nth-child(3) { z-index: 1; }

/* v7.5 · packs: dos columnas iguales (antes la Misteriosa empujaba fuera del contenedor) */
@media (min-width: 768px) and (max-width: 1439px) { .packs { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1440px) { .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pack { min-width: 0; } }
/* la ilustración de la bolsa, en tarjetas muy estrechas (pestaña del panel en el móvil) */
@container (max-width: 250px) { .pack .bolsa { zoom: 0.88; } }
@container (max-width: 215px) { .pack .bolsa { zoom: 0.78; } }
@container (max-width: 195px) { .pack .bolsa { zoom: 0.72; } }

/* v7.6 · desplegable «Seguir leyendo» (se anima donde el navegador sabe; en el resto abre sin más) */
:root { interpolate-size: allow-keywords; }
.mas { margin: 0.2em 0 0; }
@media (min-width: 768px) { .seccion__cabecera--sello .cabecera__texto { flex: 1 1 32ch; } }
.mas > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; font-weight: 700; color: var(--tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mas > summary::-webkit-details-marker { display: none; }
.mas > summary::after { content: ""; width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15em) rotate(45deg); transition: transform 0.35s ease; }
.mas[open] > summary::after { transform: translateY(0.12em) rotate(-135deg); }
.mas > summary:focus-visible { outline: 3px solid var(--tinta); outline-offset: 4px; border-radius: 6px; }
.mas__cerrar, .mas[open] .mas__abrir { display: none; }
.mas[open] .mas__cerrar { display: inline; }
.mas::details-content { block-size: 0; overflow: hidden; transition: block-size 0.45s ease, content-visibility 0.45s allow-discrete; }
.mas[open]::details-content { block-size: auto; }
.mas__cuerpo { opacity: 0; transform: translateY(-6px); transition: opacity 0.45s ease, transform 0.45s ease; }
.mas[open] .mas__cuerpo { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mas::details-content, .mas__cuerpo, .mas > summary::after { transition: none; }
}

/* v7.7 · logo de Home3DArtifacts a la izquierda de la marca */
.cabecera__marca { display: flex; align-items: center; gap: clamp(8px, 0.8vw, 16px); min-width: 0; }
.cabecera__logo { flex: none; width: clamp(40px, 2.6vw + 22px, 76px); height: auto; aspect-ratio: 1; border-radius: 50%; }
@media (max-width: 420px) {
  .cabecera__logo { width: 36px; }
  /* la marca cede el sitio del logo (36 px + hueco) */
  .cabecera .marca { font-size: min(28px, calc((100vw - 2 * var(--gutter) - 104px - 46px) * 0.143)); }
}

/* v7.7 · Cómo se hace: el conejo entero */
.paso:nth-child(3) .paso__foto img { object-position: 50% 47%; }

/* v7.7 · Cómo se hace en tableta: el 1 y el 2 a los lados de la línea, el 3 debajo */
@media (min-width: 768px) and (max-width: 1023px) {
  .pasos::before { left: 50%; transform: translateX(-50%); }
  .paso:nth-child(n) { padding-left: 0; }
  .paso:nth-child(1) { grid-column: 1; }
  .paso:nth-child(2) { grid-column: 2; margin-top: clamp(64px, 10vw, 110px); }
  /* sin el margen negativo del escritorio: si no, su foto tapa el final del texto del 2 */
  .paso:nth-child(3) { margin-top: clamp(40px, 6vw, 64px); }
}

/* v7.9 · cabecera en 1200-1339 px: logo + MINIMALS + menú + iconos caben sin solaparse */
@media (min-width: 1200px) and (max-width: 1439px) {
  .cabecera__fila { gap: 16px; }
  .cabecera__marca { flex: none; }
  .cabecera__logo { width: 44px; }
  .cabecera .marca { font-size: 32px; }
  .menu { gap: 2px; }
  .menu a { padding: 0 10px; }
}

/* v8.0 · acceso a la cuenta: solo icono (con sesión, la inicial en un círculo) */
.boton-icono--cuenta { position: relative; }
.cuenta-inicial { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c-morado); color: #fff; font-family: var(--display); font-size: 20px; border: 2px solid var(--tinta); box-shadow: 2px 3px 0 var(--tinta); }
/* en móvil la marca cede también el sitio del icono de la cuenta */
@media (max-width: 479px) {
  .cabecera__acciones { gap: 0; }
  .cabecera__acciones .boton-icono { padding: 0 4px; }
  .cabecera__logo { width: 36px; }
  .cabecera .marca { font-size: min(28px, calc((100vw - 2 * var(--gutter) - 150px - 50px) * 0.143)); }
}

/* ---------- v8.2 · revisión visual ---------- */
/* V25: notas a un ancho de lectura */
.dias__nota { max-width: 62ch; }
.confianza__nota { max-width: 62ch; margin-inline: auto; }
.confianza__nota--edad { margin-top: 10px; }
/* V35: mientras cargan las fotos, el hueco se ve intencionado (pastel, no blanco) */
.figura__foto { background: var(--pastel-naranja); }
.paso__foto { background: var(--pastel-verde); }
/* V31: en móvil el confeti no tapa texto */
@media (max-width: 767px) {
  .confeti i { width: 12px; height: 12px; }
  .confeti i.pilla { width: 26px; height: 10px; }
  .confeti i.anillo { width: 16px; height: 16px; border-width: 3px; }
  .confeti i:nth-child(n+5) { display: none; }
  /* en las secciones de texto largo el confeti cae encima de las letras: en móvil, solo en el héroe */
  .seccion .confeti { display: none; }
}
/* V24: con las dos tarjetas de pack lado a lado, el título ocupa lo mismo en las dos y el precio y el
   botón quedan a la misma altura («Bolsa Misteriosa 6» va en dos líneas) */
@media (min-width: 1440px) {
  .pack h3.display--24 { min-height: 3.5em; display: flex; align-items: flex-end; }
  .pack { align-items: start; grid-template-rows: auto auto 1fr auto; }
  .pack .pack__visual { align-self: center; }
  .pack .pildora { align-self: end; }
}
/* los Minimals que asoman sobre la loma no se salen del borde al balancearse */
.asoman { overflow-x: clip; }
/* V5: títulos sin palabra huérfana */
.display--40, .display--24 { text-wrap: balance; }