/* Solo tokens del brand kit (public/marca/tokens.css; la versión, en kit.lock.json): nada de hex sueltos ni degradados. Móvil primero.
   Black Friday (campanas#74): la página en negro de verdad con el rosa de marca con fuerza (sin cabecera, W4.1). El fondo lleva
   estrellas y un resplandor rosa (BFW5): el kit pide superficies planas, pero esta página es la excepción de campaña, como el negro.
   El negro no es del kit: «negro de verdad, no marrón» (Manu, 3-nov, campanas#78). Es el mismo de las infografías. */
:root { --bf-negro: #000; }
* { box-sizing: border-box; }
/* Fondo con vida (BFW5, campanas#237: «el negro es demasiado plano»): estrellitas en mosaicos de tamaños distintos (así no se ve
   la repetición) y un resplandor rosa muy suave arriba y abajo. Fijo detrás de todo; con tokens mezclados, sin hex. */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url(/img/cielo/destellos-a.svg),
    url(/img/cielo/destellos-b.svg),
    radial-gradient(1px 1px at 12% 18%, var(--color-sobre-tinta) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%, var(--color-sobre-tinta) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 32%, var(--color-rosa-400) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 46%, var(--color-sobre-tinta-2) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 58%, var(--color-sobre-tinta) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 72%, var(--color-rosa-400) 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 88%, var(--color-sobre-tinta-2) 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 84%, var(--color-sobre-tinta) 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 22% 14%, var(--color-rosa-400) 50%, transparent 51%),
    radial-gradient(12px 12px at 22% 14%, color-mix(in srgb, var(--color-rosa-400) 30%, transparent), transparent 70%),
    radial-gradient(2.5px 2.5px at 81% 38%, var(--color-rosa-400) 50%, transparent 51%),
    radial-gradient(12px 12px at 81% 38%, color-mix(in srgb, var(--color-rosa-400) 30%, transparent), transparent 70%),
    radial-gradient(2.5px 2.5px at 9% 63%, var(--color-rosa-400) 50%, transparent 51%),
    radial-gradient(12px 12px at 9% 63%, color-mix(in srgb, var(--color-rosa-400) 30%, transparent), transparent 70%),
    radial-gradient(60rem 32rem at 50% -8rem, color-mix(in srgb, var(--color-rosa-500) 24%, transparent), transparent 70%),
    radial-gradient(40rem 30rem at 100% 100%, color-mix(in srgb, var(--color-rosa-600) 12%, transparent), transparent 70%);
  background-size: 42rem 58rem, 30rem 46rem, 23rem 23rem, 31rem 31rem, 19rem 19rem, 27rem 27rem, 17rem 17rem, 29rem 29rem, 21rem 21rem, 25rem 25rem, 41rem 41rem, 41rem 41rem, 47rem 47rem, 47rem 47rem, 53rem 53rem, 53rem 53rem, 100% 100%, 100% 100%; }
/* El final de la página es un cielo al anochecer (Manu, 10-nov): manchas rosas desalineadas sobre un degradado que sube desde el pie.
   Bajo el pie, siempre rosa-600 o más claro: ahí el texto va en negro (4,6:1 como mínimo). */
body::after { content: ''; position: absolute; z-index: -2; left: 0; right: 0; bottom: 0; height: 56rem; pointer-events: none;
  background:
    radial-gradient(46% 11% at 74% 47%, color-mix(in srgb, var(--color-rosa-400) 42%, transparent), transparent 72%),
    radial-gradient(38% 7% at 22% 40%, color-mix(in srgb, var(--color-rosa-500) 55%, transparent), transparent 75%),
    radial-gradient(70% 16% at 12% 66%, color-mix(in srgb, var(--color-rosa-400) 62%, transparent), transparent 70%),
    radial-gradient(52% 12% at 90% 76%, color-mix(in srgb, var(--color-sol-100) 46%, transparent), transparent 72%),
    radial-gradient(80% 20% at 42% 92%, color-mix(in srgb, var(--color-rosa-400) 70%, transparent), transparent 74%),
    linear-gradient(to bottom, transparent 0, color-mix(in srgb, var(--color-rosa-800) 45%, transparent) 26%, var(--color-rosa-800) 44%, var(--color-rosa-600) 60%, var(--color-rosa-500) 100%); }
body { position: relative; margin: 0; background: var(--bf-negro); color: var(--color-sobre-tinta); font-family: var(--font-family-body); font-size: var(--font-size-md); line-height: 1.5; }
img { max-width: 100%; display: block; }
main, .pie { max-width: 72rem; margin-inline: auto; padding-inline: var(--space-4); }
main { padding-bottom: var(--space-12); }
h1, h2, h3 { font-family: var(--font-family-display); font-weight: 600; margin: 0 0 var(--space-4); text-wrap: balance; }
h2.seccion { font-size: var(--font-size-xl); margin-top: var(--space-12); text-align: center; }
h3 { font-size: var(--font-size-lg); margin: 0; line-height: 1.2; }
a { color: var(--color-rosa-400); }
select, button, input { font: inherit; }
/* El sol como halo y contorno: se ve sobre negro, sobre rosa y sobre blanco. */
:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 2px; }
/* Sobre las superficies claras el sol no llega a 3:1 (1,4:1 sobre blanco, WCAG 1.4.11): ahí el contorno va en tinta (pasada-bf). */
.pack, .cesta, .espera, .dock, .consent { --color-foco: var(--color-tinta-900); }

/* Pie (Manu, 10-nov): sin línea ni subtítulo, sobre el rosa del cielo y con el texto en negro para que se lea. */
.pie { max-width: none; margin-top: var(--space-12); padding-block: var(--space-8); text-align: center; font-size: var(--font-size-sm); color: var(--bf-negro); }
.pie a { color: var(--bf-negro); display: inline-block; padding-block: .25rem; } /* objetivo táctil de 24 px (WCAG 2.5.8) */
.pie__marca { font-family: var(--font-family-display); font-size: var(--font-size-xl); margin-top: 0; }
.pie__marca a { text-decoration: none; }
.pie__registros { margin-bottom: 0; }

/* Héroe: «Black» grande, el rosa para el antetítulo, la cuenta atrás y la acción. */
.hero { position: relative; text-align: center; padding: var(--space-8) 0; }
/* Dos destellos que centellean junto al título: solo opacidad y escala, y quietos si se pide menos movimiento. */
.hero::before, .hero::after { content: ''; position: absolute; pointer-events: none; background: url(/img/cielo/chispa.svg) center / contain no-repeat; }
.hero::before { width: 2.25rem; height: 2.25rem; top: 13%; left: 7%; }
.hero::after { width: 1.5rem; height: 1.5rem; top: 30%; right: 8%; }
.hero__antetitulo { display: inline-block; margin: 0 0 var(--space-4); padding: .3rem .9rem; border: 1px solid var(--color-rosa-500); border-radius: var(--radius-pill); font-size: var(--font-size-sm); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-rosa-500); }
h1 { font-size: clamp(var(--font-size-2xl), 13vw, 5.5rem); line-height: .95; letter-spacing: -.02em; color: var(--color-blanco); }
.h1__rosa { color: var(--color-rosa-500); }
/* El subrayado arqueado del kit (brand/portal/src/styles/marca.css, «la mancha de la marca»), el mismo en «Black» y en cada título de
   sección (BFW5). Es una máscara: el color sale del token y, si se puede, se dibuja al entrar en pantalla. */
.arco { position: relative; display: inline-block; padding-bottom: .3em; }
.arco::after { content: ''; position: absolute; left: -3%; right: -3%; bottom: 0; height: .3em; background: var(--color-rosa-500);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M3 10 Q100 0 197 8' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M3 10 Q100 0 197 8' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/></svg>") center / 100% 100% no-repeat; }
/* BFW6: el subrayado de «Black», un poco más separado. El hueco lo reserva el h1 desde el HTML del Worker (sin el span): así, al
   llegar app.js con el span, el título no crece y no empuja la página (CLS, pasada-bf). */
.hero h1 { padding-bottom: .26em; }
h1 .arco { padding-bottom: 0; }
h1 .arco::after { bottom: -.26em; }
.ofertas--exclusiva .arco::after { background: var(--color-sol-300); } /* en sol: el contraste del panel */
.hero #subtitulo { text-wrap: balance; font-size: var(--font-size-lg); color: var(--color-sobre-tinta-2); max-width: 36rem; margin: 0 auto; }
/* La cuenta atrás (Manu, 10-nov): un solo panel de cristal sobre el cielo, con los números grandes en la tipografía de marca, en vez de cuatro cajas rosas. */
.cuenta { margin: var(--space-8) 0 0; }
.cuenta[hidden] { display: none; }
/* Hasta que app.js pone la hora, las cajas (en el HTML) guardan su sitio sin verse: la página no salta al llegar (CLS, pasada-bf). */
.cuenta.cargando { visibility: hidden; }
.cuenta__texto { margin: 0 0 var(--space-3); font-size: var(--font-size-sm); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--color-rosa-400); }
/* Sin estrellas pegadas al texto («¿Estás dentro?☆», «Solo quedan…☆», fallo 5 del informe de diseño): detrás del subtítulo y de la
   línea de la cuenta atrás, un velo negro que se funde con la noche. El cielo sigue a los lados. */
.hero #subtitulo, .cuenta__texto { position: relative; }
.hero #subtitulo::before, .cuenta__texto::before { content: ''; position: absolute; inset: -.6em -2.5em; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--bf-negro) 72%, transparent); }
.cuenta__valor { width: fit-content; max-width: 100%; margin: 0 auto; display: flex; justify-content: center; padding: var(--space-3) var(--space-2); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-rosa-800) 62%, var(--bf-negro)), color-mix(in srgb, var(--color-tinta-900) 70%, var(--bf-negro)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-rosa-400) 55%, transparent), 0 0 56px color-mix(in srgb, var(--color-rosa-500) 34%, transparent); }
.cuenta__caja { position: relative; display: grid; justify-items: center; gap: var(--space-1); min-width: clamp(4.1rem, 21vw, 7rem); padding: var(--space-1) var(--space-2); color: var(--color-blanco); }
.cuenta__caja + .cuenta__caja::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: color-mix(in srgb, var(--color-rosa-400) 45%, transparent); }
.cuenta__caja strong { font-family: var(--font-family-display); font-weight: 500; font-size: clamp(2.25rem, 10.5vw, 4rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.cuenta__caja:last-child strong { color: var(--color-rosa-400); }
.cuenta__caja small { font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--color-sobre-tinta-2); }
.secciones { scroll-margin-top: var(--space-4); }
.hero .aviso, .hero .exito { color: var(--color-texto); max-width: 36rem; margin: var(--space-4) auto 0; text-align: left; }

/* Lista de espera. */
.espera { max-width: 32rem; margin: var(--space-8) auto 0; padding: var(--space-6) var(--space-4); border-radius: var(--radius-lg); background: var(--color-superficie); color: var(--color-texto); text-align: left; box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-rosa-500) 35%, transparent); }
.espera[hidden], .espera__ok[hidden], .espera__error[hidden] { display: none; }
/* Antes de abrir, el Worker pone .espera-cargando en el body y app.js la quita al arrancar: el formulario ocupa su sitio sin verse
   (ni foco ni envíos) hasta entonces. Así la página no salta al llegar (CLS, pasada-bf). */
.espera-cargando .espera[hidden] { display: block; visibility: hidden; }
/* Abierta, lo mismo con lo que va debajo de las fichas (src/landing.ts, .catalogo-cargando): espera invisible hasta que llegan, y no
   baja de golpe (CLS 0,26 → < 0,1 en escritorio, informe de diseño del 10-nov). */
.catalogo-cargando .cesta, .catalogo-cargando .hechos, .catalogo-cargando .faq, .catalogo-cargando .legal, .catalogo-cargando .dock, .catalogo-cargando .pie { visibility: hidden; }
.espera__titulo { font-size: var(--font-size-xl); margin-bottom: var(--space-2); text-align: center; }
.espera__texto { margin: 0 0 var(--space-4); color: var(--color-texto-2); text-align: center; }
.espera__fila { display: grid; gap: var(--space-2); }
.espera input[type="email"] { min-height: 48px; padding: .6rem 1rem; border: 1px solid var(--color-texto-3); border-radius: var(--radius-pill); background: var(--color-superficie); color: var(--color-texto); }
.espera__fila button { margin: 0; min-height: 48px; }
.espera__acepto { display: flex; gap: var(--space-3); align-items: start; margin-top: var(--space-4); font-size: var(--font-size-sm); cursor: pointer; }
.espera__acepto input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--color-marca-accion); }
.espera__legal { margin: var(--space-3) 0 0; font-size: var(--font-size-xs); color: var(--color-texto-2); }
.espera a { color: var(--color-marca-texto); }
.espera__error { margin: var(--space-3) 0 0; color: var(--color-peligro); font-weight: 600; font-size: var(--font-size-sm); }
/* BFW5: tres pasos cortos con barra de progreso. */
.espera__progreso { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); font-size: var(--font-size-xs); font-weight: 600; color: var(--color-texto-2); white-space: nowrap; }
.espera__progreso progress { flex: 1; height: 6px; appearance: none; border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-marca-fondo); }
.espera__progreso progress::-webkit-progress-bar { background: var(--color-marca-fondo); }
.espera__progreso progress::-webkit-progress-value { background: var(--color-marca-accion); border-radius: var(--radius-pill); transition: width var(--motion-duration-base) var(--motion-easing-standard); }
.espera__progreso progress::-moz-progress-bar { background: var(--color-marca-accion); }
.espera__paso { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.espera__paso[hidden] { display: none; }
.espera__paso > input, .espera select { min-height: 48px; padding: .6rem 1rem; border: 1px solid var(--color-texto-3); border-radius: var(--radius-pill); background: var(--color-superficie); color: var(--color-texto); }
.espera__paso > button { margin-top: var(--space-2); min-height: 48px; }
.espera__atras { margin: var(--space-3) auto 0; display: block; min-height: 44px; background: transparent; color: var(--color-marca-texto); text-decoration: underline; }
.espera__atras[hidden] { display: none; }
.espera__ok { max-width: 32rem; margin: var(--space-8) auto 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-marca-accion); color: var(--color-blanco); font-weight: 600; }

/* Hasta la apertura (body.sin-abrir, lo pone app.js), el detalle de cada oferta se ve borroso, para todo el mundo: la estructura, los
   títulos y la lista de espera se ven siempre. Apuntarse no desbloquea nada (consentimiento libre). El precio no se difumina (Manu,
   10-nov): el PVP sale tachado y, en vez del de la campaña, la invitación a descubrirlo (.descubre). */
.sin-abrir .pack .detalle, .sin-abrir .pack .descripcion, .sin-abrir .pack .incluye { filter: blur(10px); user-select: none; }

/* Las cuatro claves (W4.5): icono, dato y una línea. Nada inventado. */
.hechos { list-style: none; margin: var(--space-12) 0 0; padding: var(--space-6) 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-4); border-block: 1px solid color-mix(in srgb, var(--color-rosa-400) 30%, transparent); text-align: center; font-size: var(--font-size-sm); color: var(--color-sobre-tinta-2); }
/* BFW5: icono, dato y línea en la misma fila en las cuatro columnas (subgrid): antes cada columna bajaba a su aire y se descuadraba. */
.hechos li { display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: center; align-items: start; row-gap: var(--space-1); }
.hechos__texto { text-wrap: balance; max-width: 14rem; }
.hechos .icono { width: 1.75rem; height: 1.75rem; color: var(--color-rosa-500); stroke-width: 1.5; stroke-linejoin: round; }
.hechos strong { align-self: end; display: block; font-family: var(--font-family-display); font-size: var(--font-size-lg); color: var(--color-blanco); }
/* BFW7b: en el móvil estrecho, los títulos de los hechos un punto más pequeños y con corte equilibrado: «Packs completos» llegaba al borde. */
@media (max-width: 30rem) { .hechos strong { font-size: var(--font-size-md); text-wrap: balance; } }

/* Secciones de ofertas. */
.ofertas { margin-top: var(--space-12); }
.ofertas h2.seccion { margin-top: var(--space-2); margin-bottom: var(--space-6); font-size: clamp(var(--font-size-xl), 8vw, var(--font-size-2xl)); color: var(--color-blanco); }
.ofertas__texto { margin: 0 auto var(--space-6); text-align: center; color: var(--color-sobre-tinta-2); max-width: 36rem; }
.ofertas__texto:empty { display: none; }
/* Exclusivos SkinPass (Manu, 10-nov): en el móvil solo se veían 16 px de rosa a cada lado. Ahora es un trozo de amanecer en mitad de
   la noche: a todo el ancho, con mucho aire arriba y abajo, destellos y un filo de sol que lo separa del negro. */
.ofertas--exclusiva { position: relative; margin-inline: calc(var(--space-4) * -1); padding: var(--space-12) var(--space-6) var(--space-16);
  background: url(/img/cielo/destellos-b.svg) 0 0 / 22rem 34rem, radial-gradient(90% 26% at 86% 0, color-mix(in srgb, var(--color-sol-300) 70%, transparent), transparent 72%), radial-gradient(90% 30% at 8% 100%, var(--color-rosa-400), transparent 74%), linear-gradient(165deg, var(--color-rosa-800), var(--color-rosa-600) 46%, var(--color-rosa-500));
  border-block: 3px solid var(--color-sol-300); box-shadow: 0 0 70px color-mix(in srgb, var(--color-rosa-500) 55%, transparent); }
.ofertas--exclusiva h2.seccion { font-size: clamp(var(--font-size-2xl), 10vw, 3.25rem); }
.ofertas--exclusiva .ofertas__texto { color: var(--color-blanco); font-weight: 600; }
.ofertas--exclusiva .pack { box-shadow: 0 10px 34px color-mix(in srgb, var(--bf-negro) 42%, transparent); }

/* BFW5: una barra fija abajo, en el móvil y en el ordenador, con mucho contraste (clara sobre la página negra). Vacía, el selector
   de socia ocupa todo el ancho; con algo en la cesta se parte en dos: el selector y el carrito (artículos y total). Un solo estado
   cambia todos los precios. Con el SkinPass en la cesta ya es socia: el interruptor se ve encendido (body.es-socia, app.js). */
/* BFW7b: el hueco de abajo es el alto real de la barra (--dock-alto, app.js), y los saltos con ancla tampoco quedan debajo. */
body { padding-bottom: var(--dock-alto, calc(6.5rem + env(safe-area-inset-bottom))); }
html { scroll-padding-bottom: var(--dock-alto, 6.5rem); }
.cesta-a-la-vista .barra { display: none; }
.cesta-a-la-vista .dock.con-cesta .dock__fila { grid-template-columns: 1fr; }
body:has(> .dock[hidden]) { padding-bottom: 0; }
.dock { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom)); background: var(--color-superficie); color: var(--color-texto); box-shadow: 0 -12px 40px color-mix(in srgb, var(--color-rosa-500) 35%, transparent); }
.dock[hidden] { display: none; }
.dock__fila { max-width: 44rem; margin-inline: auto; display: grid; gap: var(--space-2); align-items: center; }
.dock.con-cesta .dock__fila { grid-template-columns: 1fr 1fr; }
.interruptor { display: flex; justify-content: center; }
.interruptor[hidden] { display: none; }
/* BFW7: el estado del interruptor, siempre a la vista bajo él. */
.interruptor { flex-direction: column; align-items: center; }
.interruptor__estado { margin: 0; font-size: var(--font-size-xs); color: var(--color-texto-2); }
.barra { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 48px; padding: .5rem 1rem; border-radius: var(--radius-pill); background: var(--color-marca-accion); color: var(--color-sobre-marca); text-decoration: none; font-size: var(--font-size-sm); font-weight: 600; }
.barra[hidden] { display: none; }
.barra__cuenta { display: inline-flex; align-items: center; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.barra__num { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding-inline: .3rem; border-radius: var(--radius-pill); background: var(--color-sobre-marca); color: var(--color-marca-texto); font-size: var(--font-size-xs); }
.dock.con-cesta .interruptor__control { font-size: var(--font-size-sm); gap: var(--space-2); white-space: nowrap; }
.barra, .barra__cuenta, .barra__ver { white-space: nowrap; }
.barra__ver { display: inline-flex; align-items: center; gap: var(--space-1); }
/* En el móvil estrecho, el carrito solo con icono, número, total y la flecha: el texto entero va en el aria-label. */
@media (max-width: 30rem) { .dock.con-cesta .dock__fila { grid-template-columns: auto 1fr; } }
@media (max-width: 26rem) { .barra__ver { font-size: 0; } }
/* Con el carrito al lado, en el móvil no cabe la línea de estado: se queda solo para los lectores de pantalla. */
@media (max-width: 30rem) { .dock.con-cesta .interruptor__estado { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.interruptor__control { display: inline-flex; gap: var(--space-3); align-items: center; font-weight: 600; cursor: pointer; min-height: 48px; }
/* El selector (Manu, 10-nov): «No / Sí» con el texto a la vista en vez de un interruptor mudo. Un solo estado, #socia; con él encendido
   (o el SkinPass en la cesta), la barra se tiñe, su línea lo confirma y el precio que cambia late una vez en cada ficha. */
.selector { position: relative; flex: none; display: inline-grid; grid-template-columns: 1fr 1fr; width: 6.5rem; height: 2.5rem; border-radius: var(--radius-pill); background: var(--color-crema-100); box-shadow: inset 0 0 0 1px var(--color-crema-200); }
.selector input { appearance: none; position: absolute; inset: 0; z-index: 2; margin: 0; border-radius: inherit; cursor: pointer; }
.selector__bola { position: absolute; z-index: 0; top: .2rem; bottom: .2rem; left: .2rem; width: calc(50% - .2rem); border-radius: var(--radius-pill); background: var(--color-tinta-700); transition: transform var(--motion-duration-fast) var(--motion-easing-standard), background var(--motion-duration-fast) var(--motion-easing-standard); }
.selector__op { position: relative; z-index: 1; display: grid; place-items: center; font-size: var(--font-size-sm); font-weight: 700; transition: color var(--motion-duration-fast) var(--motion-easing-standard); }
.selector__op--no { color: var(--color-blanco); }
.selector__op--si { color: var(--color-texto-2); }
.selector:has(input:checked) .selector__bola, .es-socia .selector__bola { transform: translateX(100%); background: var(--color-marca-accion); }
.selector:has(input:checked) .selector__op--no, .es-socia .selector__op--no { color: var(--color-texto-2); }
.selector:has(input:checked) .selector__op--si, .es-socia .selector__op--si { color: var(--color-blanco); }
.es-socia .dock { background: var(--color-rosa-50); box-shadow: 0 -12px 40px color-mix(in srgb, var(--color-rosa-500) 55%, transparent), inset 0 3px 0 var(--color-marca-accion); }
.es-socia .interruptor__estado { color: var(--color-marca-texto); font-weight: 700; }
.es-socia .interruptor__estado::before { content: '✓ '; }

.packs { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
.pack { background: var(--color-superficie); color: var(--color-texto); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; scroll-margin-top: var(--space-4); }
.pack a { color: var(--color-marca-texto); }
.pack__img { aspect-ratio: 4 / 3; background: var(--color-superficie-2); }
.pack__img img { width: 100%; height: 100%; object-fit: cover; }
/* Ilustraciones (BFW5): las del kit, sol + mancha rosa desplazada + trazo fino en tinta, sobre crema (trazos.js). La maqueta «b»
   (?v=b, al final) solo cambia estas variables. */
.pack__img--trazo { --ilu-fondo: var(--color-crema-50); --ilu-sol: var(--color-sol-100); --ilu-mancha: var(--color-rosa-500); --ilu-trazo: var(--color-tinta-900);
  aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: var(--ilu-fondo); }
.trazo { position: absolute; inset: 6% 0; width: 100%; height: 88%; fill: none; stroke: var(--ilu-trazo); stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ilu__sol { fill: var(--ilu-sol); stroke: none; }
.ilu__mancha { fill: var(--ilu-mancha); stroke: none; }
.ilu--skinpass .ilu__mancha { fill: var(--color-accent-skinpass-mid); }
.ilu__punto { fill: var(--color-rosa-500); stroke: none; }
.ilu__tapa { fill: var(--ilu-fondo); }
/* Sin ilustración (hueco de las infografías de campanas#75): fondo de marca con el nombre. */
.pack__img--marca { display: grid; place-items: center; padding: var(--space-6); text-align: center; font-family: var(--font-family-display); font-size: var(--font-size-2xl); line-height: 1.1; color: var(--color-rosa-400); background: var(--color-tinta-700); }
.exclusiva .pack__img--marca { color: var(--color-tinta-900); background: var(--color-rosa-100); }
.pack__cuerpo { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.pack__sellos { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pack__sellos:empty { display: none; }
.sello { padding: .15rem .6rem; border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 600; background: var(--color-marca-fondo); color: var(--color-marca-texto); }
.sello--top { background: var(--bf-negro); color: var(--color-sobre-tinta); }
/* BFW5: la cinta del SkinPass anual, arriba a la derecha, en salvia (el color de SkinPass en el kit). */
.pack { position: relative; }
/* BFW7 (feedback 4 de Manu: la diagonal se leía mal y se cortaba en móvil): banda a todo el ancho, arriba de la tarjeta, en rosa
   oscuro con blanco (contraste AA de sobra), más grande y en negrita. La del SkinPass anual y la de los exclusivos. */
.cinta { margin: 0; padding: .55rem var(--space-4); text-align: center; background: var(--color-marca-texto); color: var(--color-sobre-marca);
  font-size: var(--font-size-sm); font-weight: 700; letter-spacing: .02em; line-height: 1.3; }
.detalle, .descripcion { margin: 0; color: var(--color-texto-2); font-size: var(--font-size-sm); }
.detalle { font-weight: 600; }
.detalle:empty, .descripcion:empty { display: none; }
/* Tres niveles (campanas#78): PVP tachado, el de la campaña (Black Friday, Navidad…) y Consentidas SkinPass; el que le toca, grande y en rosa. */
.precio { margin: auto 0 0; padding-top: var(--space-2); display: grid; gap: var(--space-1); }
.precio p { margin: 0; }
.precio [hidden] { display: none; }
.pvp { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-texto-2); }
/* El PVP tachado, en negrita y en un recuadro (Manu, 10-nov), para que se lea de un vistazo contra el precio de la campaña. */
.pvp s { display: inline-block; margin-left: var(--space-1); padding: .05rem .5rem; border: 1.5px solid var(--color-tinta-700); border-radius: var(--radius-sm); font-weight: 800; color: var(--color-texto); font-variant-numeric: tabular-nums; }
.nivel { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); color: var(--color-texto-2); font-size: var(--font-size-sm); }
.nivel__etq { font-weight: 600; }
.nivel__importe { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nivel--destacado { color: var(--color-texto); }
.nivel--destacado .nivel__importe { font-family: var(--font-family-display); font-size: var(--font-size-2xl); line-height: 1; color: var(--color-marca-accion); }
.nivel--consentida { padding: .3rem .6rem; border-radius: var(--radius-sm); background: var(--color-marca-fondo); align-items: center; }
.nivel--consentida .nivel__etq { color: var(--color-marca-texto); }
.nivel--consentida .nivel__importe { color: var(--color-marca-texto); font-weight: 700; }
.nivel--consentida.nivel--destacado { box-shadow: inset 0 0 0 2px var(--color-marca-accion); }
.nivel--consentida.nivel--destacado .nivel__importe { color: var(--color-marca-accion); }
.nivel--consentida.nivel--destacado .nivel__etq::before { content: '✓ '; }
/* La etiqueta no se parte («✓ Consentidas / SkinPass» en los exclusivos de escritorio, fallo 3): si no cabe con el importe, el importe
   baja de línea, alineado a la derecha. */
.nivel { flex-wrap: wrap; }
.nivel__etq { white-space: nowrap; }
.nivel__importe { margin-left: auto; }
/* Antes de abrir (Manu, 10-nov): en el sitio del precio de la campaña, una invitación a descubrirlo el día que abre. */
.descubre { display: grid; gap: .1rem; padding: .45rem .7rem; border: 1.5px dashed var(--color-marca-accion); border-radius: var(--radius-sm); background: var(--color-marca-fondo); }
.descubre__etq { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-marca-texto); }
.descubre__cta { font-family: var(--font-family-display); font-size: var(--font-size-lg); line-height: 1.15; color: var(--color-marca-accion); }
/* En los exclusivos (más estrechos, con la cinta), un paso más pequeño para que «Lo descubres el 20 de noviembre» quepa en una línea,
   también en el móvil de 360 px (Manu, 11-nov, campanas#294). */
.exclusiva .descubre__cta { font-size: var(--font-size-md); white-space: nowrap; }
.es-socia .nivel--bf { color: var(--color-texto-3); }
@keyframes latido { 40% { transform: scale(1.14); } }
@media (prefers-reduced-motion: no-preference) { .cambia-precio .nivel--destacado .nivel__importe { display: inline-block; animation: latido 520ms var(--motion-easing-standard); } }
/* Lo que incluye (W4.8): tres viñetas bajo el precio. */
.incluye { list-style: none; margin: 0; padding: var(--space-2) 0 0; display: grid; gap: var(--space-1); border-top: 1px solid var(--color-linea); font-size: var(--font-size-sm); }
.incluye:empty { display: none; }
/* Con fichas en fila, lo que incluye guarda sitio para cuatro líneas: así el precio empieza a la misma altura en toda la fila
   (fallo 6 del informe de diseño). En el móvil, una ficha por fila, no hace falta. */
@media (min-width: 40rem) { .incluye { min-height: calc(4lh + 2 * var(--space-1) + var(--space-2)); } }
.incluye li { display: flex; gap: var(--space-2); }
.incluye li::before { content: '✓'; color: var(--color-marca-accion); font-weight: 600; }
.icono { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bloqueada .pack__img:not(.pack__img--trazo) { opacity: .6; } /* el trazo no se apaga: el sello «Requiere SkinPass» ya lo dice */
button { margin-top: var(--space-2); min-height: 44px; padding: .75rem 1rem; border: 0; border-radius: var(--radius-pill); background: var(--color-marca-accion); color: var(--color-sobre-marca); font-weight: 600; cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
/* BFW7: antes de abrir, «Próximamente...» es un sello legible (tinta sobre crema), no un botón apagado al 50 %. */
button.proximamente:disabled { opacity: 1; cursor: default; background: var(--color-crema-100); color: var(--color-tinta-900); box-shadow: inset 0 0 0 1px var(--color-crema-200); }
button[hidden] { display: none; }
.pack.en-cesta { box-shadow: 0 0 0 3px var(--color-marca-accion); }
.en-cesta button { background: var(--color-superficie); color: var(--color-marca-texto); box-shadow: inset 0 0 0 2px var(--color-marca-accion); }

.nota { color: var(--color-sobre-tinta-2); font-size: var(--font-size-sm); margin: var(--space-2) 0 0; }
.legal { text-align: center; margin-top: var(--space-8); color: var(--color-blanco); }
.aviso, .exito, .peligro { border-left: 4px solid; padding: .75rem 1rem; background: var(--color-superficie); color: var(--color-texto); }
.aviso { border-color: var(--color-aviso); }
.exito { border-color: var(--color-exito); }
.peligro { border-color: var(--color-peligro); }

.faq { max-width: 36rem; margin: var(--space-12) auto 0; }
.faq h2.seccion { margin-top: 0; }
.faq details { border-bottom: 1px solid color-mix(in srgb, var(--color-rosa-400) 30%, transparent); }
.faq summary { cursor: pointer; padding: var(--space-3) 0; min-height: 44px; font-weight: 600; }
.faq details p { margin: 0 0 var(--space-4); color: var(--color-sobre-tinta-2); }
.cesta, .condiciones { max-width: 36rem; margin: var(--space-12) auto 0; }
.cesta { background: var(--color-superficie); color: var(--color-texto); border-radius: var(--radius-md); padding: var(--space-6) var(--space-4); display: grid; gap: var(--space-3); scroll-margin-top: var(--space-4); }
.cesta[hidden] { display: none; }
.cesta .nota { color: var(--color-texto-2); }
.cesta h2.seccion, .condiciones h2.seccion { margin-top: 0; }
.pagina-condiciones main { padding-top: var(--space-8); }
.volver { display: inline-block; margin-bottom: var(--space-6); font-weight: 600; }
.condiciones h1 { font-size: var(--font-size-2xl); text-align: center; margin-bottom: var(--space-8); }
.condiciones h2 { font-size: var(--font-size-xl); margin: var(--space-8) 0 var(--space-3); }
.condiciones p, .condiciones li { color: var(--color-sobre-tinta); }
.modelo { padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--color-rosa-400) 40%, transparent); border-radius: var(--radius-md); }
.cesta__condiciones { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); color: var(--color-texto-2); text-align: center; }
.cesta__condiciones a { color: var(--color-marca-texto); font-weight: 600; }
#cesta { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
#cesta li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-linea); }
.cesta__nombre { font-weight: 600; }
.cesta__cita { margin: 0; font-size: var(--font-size-sm); color: var(--color-texto-2); }
.cesta__cita[hidden] { display: none; }
.cesta__nota { grid-column: 1 / -1; color: var(--color-texto-2); font-size: var(--font-size-sm); }
/* Tarjetas regalo (campanas#57): solo si la campaña trae `regalos`. */
.regalos__texto { max-width: 36rem; margin: 0 auto var(--space-6); text-align: center; color: var(--color-sobre-tinta-2); }
#cesta li.cesta__vacia { display: block; color: var(--color-texto-2); border: 0; padding: 0; }
/* El obsequio (OBQ1): el PVP tachado y «GRATIS», sin botón de quitar. */
#cesta .cesta__obsequio .cesta__precio { white-space: nowrap; }
#cesta .cesta__obsequio .pvp { color: var(--color-texto-2); font-size: var(--font-size-sm); }
#cesta .cesta__obsequio strong { color: var(--color-marca-accion); letter-spacing: .04em; }
/* BFW7: el bloque de pago (feedback 4): total grande, botón a todo el ancho y los logos de los métodos. */
.pago { display: grid; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-crema-50); box-shadow: inset 0 0 0 1px var(--color-linea); }
.total { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); font-weight: 600; }
.total small { display: block; font-size: var(--font-size-xs); font-weight: 400; color: var(--color-texto-2); }
.total strong { font-family: var(--font-family-display); font-size: var(--font-size-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.pagar { width: 100%; min-height: 52px; margin-top: 0; font-size: var(--font-size-lg); }
.pago__seguro { margin: 0; display: flex; justify-content: center; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-texto-2); }
.pago__seguro .icono { width: 1rem; height: 1rem; }
.pago__metodos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.pago__metodos li { display: grid; place-items: center; min-width: 4rem; height: 2.75rem; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--color-superficie); box-shadow: inset 0 0 0 1px var(--color-linea); }
.pago__metodos img { height: 1.5rem; width: auto; }
.lista { margin: 0; padding-left: 1.2rem; }
.lista li { margin-bottom: var(--space-2); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (min-width: 48rem) {
  .hero { padding: var(--space-16) 0 var(--space-12); }
  .hechos { grid-template-columns: repeat(4, 1fr); }
  .espera { padding: var(--space-8); }
  .espera__fila { grid-template-columns: 1fr auto; }
  .ofertas--exclusiva { margin-inline: 0; border-radius: var(--radius-lg); border: 3px solid var(--color-sol-300); padding: var(--space-16) var(--space-8); }
  .cesta { padding: var(--space-6); }
}

/* Animaciones sobrias, solo si la persona no pide menos movimiento. */
@keyframes subir { from { opacity: 0; transform: translateY(12px); } }
@keyframes centelleo { 0%, 100% { opacity: .35; transform: scale(.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(18deg); } }
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: centelleo 4.2s ease-in-out infinite; }
  .hero::after { animation: centelleo 5.6s ease-in-out 1.3s infinite; }
  html { scroll-behavior: smooth; }
  /* Entradas con @starting-style (R2): solo opacity y transform, 250 ms. El hero al cargar y la barra al aparecer. El título y
     el subtítulo, quietos: son el LCP y Chrome no cuenta lo que nace con opacidad 0. */
  .hero > :not(h1, #subtitulo) { transition: opacity var(--motion-duration-base) var(--motion-easing-standard), transform var(--motion-duration-base) var(--motion-easing-standard), display var(--motion-duration-base) allow-discrete; }
  @starting-style { .hero > :not(h1, #subtitulo) { opacity: 0; transform: translateY(8px); } }
  .pack { transition: transform var(--motion-duration-base) var(--motion-easing-standard); }
  .pack:hover { transform: translateY(calc(var(--motion-distance-lift) * -1)); }
  @supports (animation-timeline: view()) {
    .pack, .hechos li { animation: subir linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    /* El trazo se dibuja al entrar en pantalla (el «draw» del kit, pathLength = 1). */
    /* Una línea de tiempo por ilustración (no una por trazo): menos trabajo de estilo en móviles lentos. */
    .trazo { view-timeline: --trazo; }
    .ilu__trazo { stroke-dasharray: 1; animation: trazar linear both; animation-timeline: --trazo; animation-range: entry 10% cover 40%; }
  }
}
@keyframes trazar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .arco::after { animation: arco linear both; animation-timeline: view(); animation-range: entry 30% cover 30%; }
  }
}
@keyframes arco { from { clip-path: inset(0 100% 0 0); } }
@media (prefers-reduced-motion: reduce) { .selector__bola, .selector__op { transition: none; } }

/* Banner de cookies (campanas#20): el de www adaptado a estos tokens. Los tres botones en la primera capa con el mismo acceso
   (misma fila, tamaño, forma y tipografía); Aceptar destacado en color de acción (decisión de Manu del 7-nov, ecosistema#1012;
   campanas#222, como web#657). Rechazar y Configurar: contorno de 2 px y texto en tinta. Contraste AA en los tres. */
.consent { position: fixed; z-index: 50; inset: auto var(--space-4) 5.5rem var(--space-4); max-width: 30rem; margin-inline: auto;
  background: var(--color-superficie); color: var(--color-texto); border: 1px solid var(--color-linea); border-radius: var(--radius-md);
  box-shadow: 0 18px 60px color-mix(in srgb, var(--color-tinta-900) 18%, transparent); padding: var(--space-6); max-height: calc(100dvh - 2rem); overflow: auto; }
.consent a { color: var(--color-marca-texto); }
@media (min-width: 768px) { .consent { inset: auto auto 5.5rem var(--space-6); margin: 0; } }
.consent[hidden], .consent__panel[hidden] { display: none; }
html.needs-consent .consent { display: block; } /* visible desde el primer render (lo marca medicion.js) */
.consent__title { font-family: var(--font-family-display); font-size: var(--font-size-lg); margin: 0 0 var(--space-2); }
.consent__text { font-size: var(--font-size-sm); color: var(--color-texto-2); margin: 0 0 var(--space-2); }
.consent__text + .consent__text { margin-bottom: var(--space-4); }
.consent fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-3); }
.consent__opt { display: flex; gap: var(--space-3); align-items: start; font-size: var(--font-size-sm); }
.consent__opt input { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.consent__panel { margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-linea); }
.consent__save { width: 100%; }
.consent__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.consent__btn { margin: 0; min-height: 44px; padding: 0 var(--space-3); font-size: var(--font-size-sm); border: 2px solid var(--color-tinta-900); background: var(--color-superficie); color: var(--color-texto); }
.consent__btn[data-action="accept"] { border-color: var(--color-marca-accion); background: var(--color-marca-accion); color: var(--color-blanco); }
@media (max-width: 767px) {
  .consent { inset-inline: var(--space-3); bottom: 5rem; padding: var(--space-4); } /* por encima de la barra fija */
  .consent__btn { padding: 0 var(--space-2); }
}

/* Checkout para convertir (campanas#77): upsells, order bump, ahorro y confianza. Solo salen con CAMPANAS_CHECKOUT_UPSELLS. */
.extra { display: grid; gap: var(--space-2); margin-block: var(--space-4); }
.extra[hidden] { display: none; } /* como .bump: el display: grid pisaba el hidden y dejaba un hueco en la cesta (pasada-bf) */
.sugerencia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-accent-skinpass-soft); }
.sugerencia__boton, .cesta__subir, .aviso__recargar { min-height: 44px; padding-inline: var(--space-3); border: 1px solid currentColor; border-radius: var(--radius-pill); background: transparent; color: var(--color-marca-texto); font: inherit; font-weight: 600; cursor: pointer; }
.cesta__subir { grid-column: 1 / -1; justify-self: start; }
.bump { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); margin-block: var(--space-4); border: 2px dashed var(--color-marca-texto); border-radius: var(--radius-md); cursor: pointer; }
.bump[hidden] { display: none; } /* el display: flex pisaba el hidden: salía la casilla vacía sin bump */
.bump input { width: 1.5rem; height: 1.5rem; flex: none; margin: 0; }
/* La casilla de novedades (Manu, 10-nov): toda la fila se pulsa, con su check de marca y sin premarcar. Opcional: el texto lo fija TEXTO_PROMOCIONES_PAGO. */
.promociones { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-linea); font-size: var(--font-size-sm); cursor: pointer; transition: background var(--motion-duration-fast) var(--motion-easing-standard), box-shadow var(--motion-duration-fast) var(--motion-easing-standard); }
.promociones:has(input:checked) { background: var(--color-marca-fondo); box-shadow: inset 0 0 0 2px var(--color-marca-accion); }
.promociones input { appearance: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none; margin: 0; border: 2px solid var(--color-texto-3); border-radius: var(--radius-sm); background: var(--color-superficie); cursor: pointer; }
.promociones input:checked { border-color: var(--color-marca-accion); background: var(--color-marca-accion); }
.promociones input:checked::after { content: '✓'; color: var(--color-blanco); font-size: .95rem; font-weight: 800; line-height: 1; }
.ahorro { margin: 0; font-weight: 600; color: var(--color-marca-texto); text-align: right; }
.confianza { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-1); font-size: var(--font-size-sm); }
.confianza li::before { content: "✓ "; color: var(--color-marca-texto); font-weight: 600; }

/* Maqueta para que elija Manu (BFW5; body.v-a/b, app.js; la «c», «Neón», se descartó el 8-nov). ponytail: al elegir, se queda
   una y se borra el resto. b · «Rosa»: la paleta de la antigua B, fondo rosa claro, sol rosa y la mancha en rosa vivo. */
.v-b .pack__img--trazo { --ilu-fondo: var(--color-rosa-50); --ilu-sol: var(--color-rosa-100); --ilu-mancha: var(--color-rosa-400); }