/* ═══════════════════════════════════════════════════════════════════
   Propuesta C · La Carta, versión rápida
   Vídeo, día, hora, entradas y pago. La piel de la carta (papel crema,
   lacre granate, matasellos, la entrada como sello de correos) se queda;
   el texto, a lo justo.
   ═══════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Bricolage'; src: url('fuentes/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage'; src: url('fuentes/bricolage-grotesque-latin-ext-opsz-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; src: url('fuentes/inter-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; src: url('fuentes/inter-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ─────────────── Tokens: todo el color vive aquí ─────────────── */
:root {
  --papel: #F7F1E6;            /* crema de carta: el fondo */
  --papel-hoja: #FFFCF6;       /* tarjetas */
  --papel-sobre: #F1E7D5;      /* el sobre */
  --blanco: #FFFFFF;

  --tinta: #1B2A22;            /* verde abeto muy hondo */
  --tinta-suave: #5A665E;      /* 5,3:1 sobre papel */

  --granate: #8A2232;
  --granate-vivo: #9C2A3D;     /* hover: se aviva, no se oscurece */
  --abeto: #1F4D3A;
  --abeto-velo: #E3EEE7;
  --verde-punto: #2E8B57;      /* el punto de «hay plazas» */
  --rosa: #F4CFD6;
  --rosa-nube: #FBEAEE;
  --oro: #B88A3E;              /* filetes y el botón VIP, nunca letra fina */
  --oro-claro: #E6D3A6;
  --oro-velo: #F7EEDB;
  --oro-tinta: #6E521F;        /* letra sobre el dorado claro · 6,6:1 */

  --lacre-luz: #B4404F;
  --lacre-hondo: #5E1220;
  --lacre-brillo: #EBA9B0;

  --estrella: #EAB308;         /* estrella llena y amarilla */
  --ambar: #F0A02C;            /* relleno y trazo de aviso */
  --ambar-tinta: #8A5A12;      /* el aviso cuando es letra · 5,4:1 */
  --ambar-velo: #FDF2DF;
  --gris-punto: #A9A39A;       /* el punto de «completo» */

  --filete: #E7DDCC;
  --filete-fuerte: #D6C8B0;
  --sombra: #3B2A1D;
  --velo: color-mix(in oklab, var(--tinta) 46%, transparent);
  --velo-video: color-mix(in oklab, var(--tinta) 78%, transparent);
  --som-plano: 0 2px 6px -3px color-mix(in oklab, var(--sombra) 16%, transparent);
  --som-flota: 0 10px 26px -14px color-mix(in oklab, var(--sombra) 26%, transparent);
  --som-alto: 0 24px 60px -26px color-mix(in oklab, var(--sombra) 34%, transparent);
  --som-lente: 0 30px 80px -20px color-mix(in oklab, var(--sombra) 45%, transparent);

  --monedero-tinta: #1D1D1F;
  --monedero-azul: #0A60D0;
  --g-azul: #4285F4; --g-verde: #34A853;
  --bizum: #05B4C8;
  --camara-a: #CDB79C; --camara-b: #8E7560; --camara-c: #E9DCC8;

  --f-serif: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --f-ui: 'Bricolage', 'Inter', system-ui, sans-serif;
  --f-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-campo: 16px;
  --r-pieza: 20px;
  --r-tarjeta: 28px;
  --hueco: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));

  --e-fuerte: cubic-bezier(0.23, 1, 0.32, 1);
  --e-m3: cubic-bezier(0.2, 0, 0, 1);
  --e-cajon: cubic-bezier(0.32, 0.72, 0, 1);
  --e-sale: cubic-bezier(0.3, 0, 0.8, 0.15);
  --e-trazo: cubic-bezier(0.65, 0, 0.35, 1);
  --e-nivel: cubic-bezier(0.45, 0.05, 0.35, 1);
  --d-toque: 130ms;
  --d-elige: 200ms;
  --d-abre: 250ms;
  --d-cierra: 200ms;
  --d-luz: 450ms;
  --d-hoja: 480ms;
  --d-hoja-sale: 250ms;
  --d-rollo: 360ms;
  --d-trazo: 620ms;
  --esc-pulsa: 0.97;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-toque: 1ms; --d-elige: 1ms; --d-abre: 1ms; --d-cierra: 1ms; --d-luz: 120ms; --d-hoja: 1ms; --d-hoja-sale: 1ms; --d-rollo: 1ms; --d-trazo: 1ms; --esc-pulsa: 1; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ─────────────── Base ─────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papel); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--f-texto); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; }
body.hoja-abierta { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--granate); -webkit-tap-highlight-color: transparent; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.oculto, .oculto-svg { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2.5px solid var(--granate); outline-offset: 3px; border-radius: 6px; }
.salto { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--papel-hoja); padding: 10px 16px; border-radius: 12px; box-shadow: var(--som-flota); }
.salto:focus { top: calc(env(safe-area-inset-top) + 10px); }
.contenedor { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--hueco); }
.nw { white-space: nowrap; }
@keyframes aparece { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes traza { to { stroke-dashoffset: 0; } }

/* ─────────────── Botones ─────────────── */
.boton {
  --alto: 48px;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--alto); padding: 0 calc(var(--alto) / 2); border: 0; border-radius: 999px;
  background: var(--granate); color: var(--papel-hoja);
  font-family: var(--f-ui); font-size: 17px; font-weight: 650; letter-spacing: -0.005em; line-height: 1.1; text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--granate) 70%, transparent), inset 0 1px 0 color-mix(in oklab, var(--blanco) 22%, transparent);
  transition: transform var(--d-toque) var(--e-fuerte), background-color var(--d-elige) var(--e-fuerte), box-shadow var(--d-elige) var(--e-fuerte);
}
.boton svg { width: 20px; height: 20px; flex: none; }
.boton:active { transform: scale(var(--esc-pulsa)); }
@media (hover: hover) { .boton:hover { background: var(--granate-vivo); } }
.boton--grande { --alto: 54px; font-size: 17.5px; }
.boton--chico { --alto: 44px; font-size: 15px; }
.boton--bloque { width: 100%; }
.boton--borde { background: transparent; color: var(--granate); box-shadow: inset 0 0 0 1.5px var(--granate); }
@media (hover: hover) { .boton--borde:hover { background: var(--rosa-nube); } }
.enlace { display: inline; padding: 10px 0; border: 0; background: none; color: var(--granate); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--granate) 40%, transparent); position: relative; }
.enlace::after { content: ''; position: absolute; inset: -12px -4px; }
.pie__enlaces .enlace, .correo__pie .enlace, .resumen .enlace { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; }

.tit { display: flex; flex-direction: column; gap: 4px; }
.tit__a { font-family: var(--f-serif); font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; font-size: clamp(0.95rem, 0.86rem + 0.45vw, 1.15rem); line-height: 1.25; color: var(--tinta); }
.tit__b { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(2.1rem, 1.7rem + 2vw, 3.2rem); line-height: 1.02; letter-spacing: -0.012em; color: var(--granate); }
.tit--centro { align-items: center; text-align: center; }
.dato { font-size: 14px; color: var(--tinta-suave); }

.franja-preventa { background: var(--abeto); color: var(--papel-hoja); text-align: center; font-size: 14px; font-weight: 500; padding: calc(env(safe-area-inset-top) + 10px) var(--hueco) 10px; }

/* ─────────────── Cabecera ─────────────── */
.cabecera { padding-top: env(safe-area-inset-top); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; }
.marca { display: inline-flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; text-decoration: none; color: var(--tinta); border-radius: 12px; }
.marca img { width: 40px; height: 40px; object-fit: contain; }
.marca__texto { font-family: var(--f-ui); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
@media (max-width: 439px) { .marca__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
/* 07-11-2026: el selector es un interruptor. La pista, crema y hundida (sombra
   interior, ninguna por fuera); la bola rosa con las letras en burdeos se desliza
   al idioma elegido (colores de la casa). */
.idiomas { --ancho: 48px; position: relative; isolation: isolate; display: flex; align-items: center; padding: 3px; border-radius: 999px; background: var(--papel-hoja);
  box-shadow: inset 0 1px 3px color-mix(in oklab, var(--sombra) 22%, transparent), inset 0 0 0 1px var(--filete); }
.idiomas__bola { position: absolute; z-index: -1; left: 3px; top: 3px; bottom: 3px; width: var(--ancho); border-radius: 999px; background: var(--rosa);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--sombra) 14%, transparent);
  transform: translateX(calc(var(--i, 0) * var(--ancho))); transition: transform 260ms var(--e-fuerte); }
@media (prefers-reduced-motion: reduce) { .idiomas__bola { transition: none; } }
.idiomas .idioma { width: var(--ancho); min-width: 0; padding: 0; }
.idiomas .idioma[aria-current='true'] { background: transparent; }
.idioma { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; font-family: var(--f-ui); font-size: 12.5px; font-weight: 650; letter-spacing: 0.04em; color: var(--granate); text-decoration: none; transition: background-color var(--d-elige) var(--e-fuerte), color var(--d-elige) var(--e-fuerte); }
.idioma[aria-pressed='true'], .idioma[aria-current='true'] { background: var(--rosa); color: var(--granate); }
@media (hover: hover) { .idioma:not([aria-current='true']):hover { background: var(--rosa-nube); } }

/* ─────────────── 1 · Portada: el cartel ───────────────
   El cartel ya lleva el título, los días y el lugar: en el móvil va solo,
   entero, y «Reservar» debajo, a todo el ancho. Nada lo pisa. */
.hero { padding-top: 4px; }
.hero__rejilla { display: grid; grid-template-areas: 'media' 'boton'; gap: 14px; }
.hero__texto { display: contents; }
.hero__cabeza { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.antetitulo { font-size: 13px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--abeto); }
.hero__titulo { margin: 6px 0 0; font-family: var(--f-serif); font-weight: 600; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 4rem); line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; color: var(--tinta); }
.hero__media {
  grid-area: media; position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; width: 100%;
  border-radius: var(--r-tarjeta); background: var(--tinta); box-shadow: var(--som-alto);
}
.hero__foto { width: 100%; height: 100%; object-fit: cover; }
.hero__boton { grid-area: boton; }
.boton.hero__boton { --alto: 58px; width: 100%; }
.hero__precio { display: none; font-size: 15px; color: var(--tinta-suave); }
.hero__precio strong { font-family: var(--f-ui); font-size: 19px; font-weight: 700; color: var(--tinta); }
/* 09-11-2026: el precio de taquilla, debajo y más pequeño. */
.hero__taquilla { display: block; font-size: 13px; color: var(--tinta-suave); }
/* 08-11-2026 · Qué es, en pequeño: un filete dorado con su engranaje en medio y la frase debajo,
   en cursiva y a tres líneas como mucho. En el móvil, centrada entre el cartel y el botón. */
.hero__rejilla { grid-template-areas: 'media' 'lema' 'boton'; }
.hero__lema { grid-area: lema; display: grid; justify-items: center; gap: 8px; max-width: 30em; justify-self: center; margin-top: 2px; text-align: center; }
.hero__accion { grid-area: boton; }
.hero__adorno { display: flex; align-items: center; gap: 10px; width: min(100%, 220px); color: var(--oro); }
.hero__adorno::before, .hero__adorno::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--oro)); }
.hero__adorno::after { background: linear-gradient(270deg, transparent, var(--oro)); }
.hero__adorno svg { flex: none; width: 26px; height: 26px; }
.hero__frase { font-family: var(--f-serif); font-style: italic; font-size: 15.5px; line-height: 1.45; color: var(--tinta-suave); text-wrap: balance; }

/* ─────────────── 1b · Cuatro fichas: cuándo, cuánto dura, para quién, cuánto ─────────────── */
/* 07-11-2026: las cuatro con la misma forma (dibujo · valor en una línea · nota en una línea),
   iguales de alto y alineadas arriba. El valor de los días encoge con el ancho de la ficha
   (unidades de contenedor) dentro de la caja de línea de los demás: la nota cae a la misma altura. */
.datos { padding-top: 26px; }
.datos__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.dato-ficha { --valor: 1.55rem; container-type: inline-size; display: grid; grid-template-rows: auto auto auto; justify-items: start; align-content: start; gap: 2px; padding: 10px 14px 15px; border-radius: var(--r-pieza); background: var(--papel-hoja); box-shadow: var(--som-plano), inset 0 0 0 1px var(--filete); min-width: 0; }
/* 07-11-2026: ilustración de grabado (#ilu-…), cuadrada y del mismo tamaño en las cuatro; su aire
   interior se come con el margen negativo para que el dibujo arranque donde el texto. */
.dato-ficha__dibujo { --lado: min(92px, 64cqi); width: var(--lado); height: var(--lado); max-width: none; margin: 0 0 4px -6px; overflow: visible; }
.dato-ficha__valor { display: block; max-width: 100%; font-family: var(--f-serif); font-weight: 600; font-size: var(--valor); line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: lining-nums proportional-nums; color: var(--tinta); }
.dato-ficha__dias { font-size: min(1em, 13.2cqi); letter-spacing: -0.015em; }
.dato-ficha__dias i { font-style: normal; font-weight: 500; margin-inline: 0.1em; color: var(--granate); }
.dato-ficha__nota { max-width: 100%; font-size: min(13.5px, 12.6cqi); line-height: 1.35; white-space: nowrap; color: var(--tinta-suave); }
/* 07-11-2026: cómo llegar. Una fila entera bajo las cuatro fichas, con su misma piel; la tarjeta es el enlace
   al mapa. Ilustración a la izquierda (el mismo tamaño que las de las fichas), los dos nombres y una flecha. */
.dato-mapa { grid-column: 1 / -1; min-width: 0; }
.dato-mapa__enlace { --valor: 1.55rem; container-type: inline-size; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 44px; padding: 8px 14px 8px 8px; border-radius: var(--r-pieza); background: var(--papel-hoja); box-shadow: var(--som-plano), inset 0 0 0 1px var(--filete); color: var(--tinta); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform var(--d-toque) var(--e-fuerte), box-shadow var(--d-elige) var(--e-fuerte); }
.dato-mapa__enlace .dato-mapa__dibujo { --lado: 91px; margin: 0; }
.dato-mapa__texto { display: grid; gap: 2px; min-width: 0; }
.dato-mapa__texto .dato-ficha__valor, .dato-mapa__texto .dato-ficha__nota { white-space: normal; text-wrap: balance; }
.dato-mapa__texto .dato-ficha__nota { font-size: 13.5px; }
.dato-mapa__flecha { width: 22px; height: 22px; color: var(--granate); transform: rotate(-90deg); transition: transform var(--d-elige) var(--e-fuerte), color var(--d-elige) var(--e-fuerte); }
@media (hover: hover) {
  .dato-mapa__enlace:hover { box-shadow: var(--som-flota), inset 0 0 0 1.5px color-mix(in oklab, var(--granate) 45%, transparent); }
  .dato-mapa__enlace:hover .dato-mapa__flecha { color: var(--granate-vivo); transform: translateX(3px) rotate(-90deg); }
}
.dato-mapa__enlace:active { transform: scale(var(--esc-pulsa)); }
.dato-mapa__enlace:focus-visible { border-radius: var(--r-pieza); }

/* ─────────────── 1c · La historia en tres pasos, cada uno con su imagen ─────────────── */
.pasos { padding-top: 40px; }
.pasos__caja { display: grid; gap: 20px; }
.pasos__titulo { font-family: var(--f-serif); font-weight: 600; font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.2rem); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.pasos__titulo span { display: block; font-style: italic; font-weight: 400; color: var(--granate); }
.pasos__lista { display: grid; gap: 14px; position: relative; }
.paso { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; }
.paso__foto { width: 96px; height: 96px; object-fit: cover; object-position: 50% 25%; border-radius: var(--r-pieza); box-shadow: var(--som-plano); background: var(--papel-sobre); }
.paso__foto--dibujo { position: relative; display: grid; place-items: center; background: var(--oro-velo); box-shadow: var(--som-plano), inset 0 0 0 1px var(--oro-claro); }
.paso__lacre { width: 62px; height: 62px; }
.paso__huella { position: absolute; width: 14px; height: 14px; color: var(--abeto); opacity: 0.55; }
.paso__huella--a { left: 10px; bottom: 12px; transform: rotate(-18deg); }
.paso__huella--b { right: 10px; top: 11px; transform: rotate(24deg); }
.paso p { display: flex; align-items: center; gap: 12px; font-family: var(--f-ui); font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; }
.paso__num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--granate); color: var(--papel-hoja); font-size: 14px; font-weight: 700; }

/* ─────────────── 2 · La reserva: tres bloques que se encienden ─────────────── */
.reserva { padding-top: 34px; scroll-margin-top: 8px; outline: none; }
.reserva__caja { max-width: 760px; display: grid; gap: 30px; }
.bloque { display: grid; gap: 14px; transition: opacity var(--d-luz) var(--e-nivel), filter var(--d-luz) var(--e-nivel); }
.bloque--apagado { opacity: 0.38; filter: saturate(0.4); }
.bloque__titulo { display: flex; align-items: center; gap: 12px; font-family: var(--f-serif); font-weight: 600; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; }
.bloque__num { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--granate); box-shadow: inset 0 0 0 3px var(--papel), inset 0 0 0 4px color-mix(in oklab, var(--granate) 40%, transparent); font-family: var(--f-serif); font-style: italic; font-size: 17px; color: var(--granate); transition: background-color var(--d-luz) var(--e-nivel), color var(--d-luz) var(--e-nivel); }
.bloque--hecho .bloque__num { background: var(--granate); color: var(--papel-hoja); box-shadow: none; }
.bloque__aviso:empty { display: none; }

/* El punto de disponibilidad */
/* 07-11-2026: el cliente lo quiere como un engranaje con su gema. Una rueda de reloj en oro (15 dientes
   finos, llanta calada; ::before con máscara) con un cabujón engastado en el centro (::after) del color
   del estado: verde si hay sitio, ámbar si quedan pocas, gris si está completo. El halo suave, de fondo. */
.punto { --gema: var(--verde-punto); --rueda: var(--oro); position: relative; display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--gema) 20%, transparent) 72%, transparent); }
.punto::before { content: ''; position: absolute; inset: 0; background: var(--rueda);
  -webkit-mask: url("/poblet/ilustraciones/punto-rueda.svg") center / contain no-repeat;
          mask: url("/poblet/ilustraciones/punto-rueda.svg") center / contain no-repeat; }
.punto::after { content: ''; position: absolute; inset: 27%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, color-mix(in oklab, var(--blanco) 78%, var(--gema)) 0 14%, var(--gema) 46%, color-mix(in oklab, var(--gema) 64%, var(--tinta)) 100%);
  box-shadow: 0 0 0 1px var(--oro-tinta); }
.punto--pocas { --gema: var(--ambar); }
/* 09-11-2026 (cliente): «unos ámbar, verde y rojo». Rojo de lacre (el de la casa) para lo que
   no se puede comprar ahora: completo, o una tanda que aún no ha salido («Próximamente»). */
.punto--lleno { --gema: var(--lacre-luz); background: none; }
.punto--cerrado { --gema: var(--lacre-luz); }
.chip--cerrado .chip__sub { color: var(--lacre-hondo); }
.punto--lleno::before { opacity: 0.55; }

/* Chips de día y de hora */
.dias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.chip {
  position: relative; isolation: isolate; display: grid; justify-items: center; align-content: center; gap: 2px;
  min-height: 56px; padding: 8px 6px; border: 0; border-radius: var(--r-campo);
  background: var(--papel-hoja); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--filete-fuerte);
  font-family: var(--f-ui); font-weight: 650; font-size: 17px; line-height: 1.1; text-align: center;
  transition: transform var(--d-toque) var(--e-fuerte), background-color var(--d-elige) var(--e-fuerte), color var(--d-elige) var(--e-fuerte), box-shadow var(--d-elige) var(--e-fuerte);
}
.chip:active { transform: scale(var(--esc-pulsa)); }
@media (hover: hover) { .chip:hover:not([aria-pressed='true']):not(.chip--lleno) { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--granate) 55%, transparent); } }
.chip[aria-pressed='true'] { background: var(--granate); color: var(--papel-hoja); box-shadow: 0 10px 20px -12px color-mix(in oklab, var(--granate) 80%, transparent); }
.chip__sub { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-texto); font-size: 12.5px; font-weight: 600; color: var(--tinta-suave); }
.chip__sub--pocas { color: var(--ambar-tinta); }
.chip[aria-pressed='true'] .chip__sub { color: color-mix(in oklab, var(--papel-hoja) 88%, transparent); }
.chip[aria-pressed='true'] .punto { --rueda: var(--oro-claro); background: none; }
.chip--lleno { background: transparent; box-shadow: inset 0 0 0 1px var(--filete); color: var(--tinta-suave); }
.chip--dia { min-height: 78px; }
.chip__sem { font-family: var(--f-texto); font-size: 13px; font-weight: 600; }
.chip__num { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.chip .punto { position: absolute; right: 5px; top: 5px; }
.chip--hora { min-height: 60px; }
.horas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.comida { display: flex; align-items: center; gap: 12px; margin: 4px 0; font-size: 13px; color: var(--tinta-suave); }
.comida::before, .comida::after { content: ''; flex: 1; height: 1px; background: var(--filete-fuerte); }
/* 07-11-2026 (cliente): sin elegir parecía apagado. Texto en la tinta de las demás horas y filete de oro más grueso. */
.chip--vip { grid-column: 1 / -1; min-height: 60px; background: var(--oro-velo); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--oro), 0 8px 18px -14px color-mix(in oklab, var(--oro) 80%, transparent); }
.chip--vip .chip__sub { color: var(--oro-tinta); font-weight: 650; }
.chip--vip .chip__sub--pocas { color: var(--ambar-tinta); }
.chip--vip[aria-pressed='true'] { background: var(--oro); color: var(--blanco); box-shadow: 0 10px 20px -12px color-mix(in oklab, var(--oro) 90%, transparent); }
.chip--vip[aria-pressed='true'] .chip__sub { color: var(--blanco); }
.chip--vip.chip--lleno { background: transparent; box-shadow: inset 0 0 0 1px var(--filete); color: var(--tinta-suave); }
.brota { animation: brota var(--d-elige) var(--e-fuerte) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes brota { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Tarjetas de entrada */
.tarjetas { display: grid; gap: 10px; }
.tarjeta {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: 'foto texto' 'mando mando'; gap: 8px 14px; align-items: start;
  padding: 12px; border-radius: var(--r-pieza); background: var(--papel-hoja); box-shadow: inset 0 0 0 1px var(--filete-fuerte);
  transition: box-shadow var(--d-luz) var(--e-nivel), background-color var(--d-luz) var(--e-nivel);
}
.tarjeta--elegida { box-shadow: inset 0 0 0 1.75px var(--granate), 0 12px 24px -18px color-mix(in oklab, var(--granate) 70%, transparent); background: color-mix(in oklab, var(--rosa-nube) 60%, var(--papel-hoja)); }
.tarjeta__foto { grid-area: foto; align-self: start; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--papel-sobre); }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__texto { grid-area: texto; align-self: start; display: grid; align-content: start; gap: 2px; min-width: 0; min-height: 64px; padding-right: 30px; padding-top: 2px; }
.tarjeta__nombre { font-family: var(--f-ui); font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: -0.01em; }
.tarjeta__linea { font-size: 13.5px; line-height: 1.35; color: var(--tinta-suave); }
.tarjeta__insignia { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 2px; font-size: 12.5px; font-weight: 650; color: var(--granate); }
.tarjeta__insignia svg { width: 15px; height: 15px; color: var(--estrella); }
/* 07-11-2026: «Ver los talleres» en las tarjetas con taller (el mismo abrir de la casilla, por filas de rejilla). */
.tarjeta__ver { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13.5px; }
.tarjeta__ver svg { width: 14px; height: 14px; transition: transform var(--d-abre) var(--e-m3); }
.tarjeta__ver[aria-expanded='true'] svg { transform: rotate(180deg); }
.tarjeta__talleres { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-abre) var(--e-m3); }
.tarjeta__talleres > ul { overflow: hidden; min-height: 0; display: grid; gap: 2px; font-size: 13.5px; line-height: 1.35; color: var(--tinta); }
.tarjeta__talleres--abierta { grid-template-rows: 1fr; }
.tarjeta__talleres--abierta > ul { padding-top: 6px; }
.tarjeta__talleres li span { font-weight: 650; color: var(--granate); }
.tarjeta__talleres li.es-el-tuyo { font-weight: 600; }
/* Los pases tranquilos de los domingos: una línea bajo las horas de la mañana. */
.nota-tranquila { margin: 6px 2px 2px; font-size: 13.5px; line-height: 1.4; color: var(--tinta-suave); text-wrap: pretty; }
.nota-tranquila strong { color: var(--tinta); font-weight: 650; }
.tarjeta__mando { grid-area: mando; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tarjeta__precio { font-family: var(--f-ui); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tarjeta__precio small { font-size: 13px; font-weight: 600; }
/* 07-11-2026: los céntimos pequeños también en la ficha del precio y en la portada. */
.dato-ficha__valor small, .hero__precio strong small { font-size: 0.55em; font-weight: inherit; letter-spacing: 0; }
.tarjeta__info { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--tinta-suave); }
.tarjeta__info svg { width: 20px; height: 20px; }
.tarjeta--vip { box-shadow: inset 0 0 0 1.5px var(--oro); background: var(--oro-velo); }
.contador { display: flex; align-items: center; gap: 2px; }
.contador__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--papel); color: var(--granate); box-shadow: inset 0 0 0 1.5px var(--filete-fuerte); transition: transform var(--d-toque) var(--e-fuerte), background-color var(--d-elige) var(--e-fuerte), color var(--d-elige); }
.contador__btn svg { width: 20px; height: 20px; }
.contador__btn:active { transform: scale(0.92); }
.contador__btn--mas { background: var(--granate); color: var(--papel-hoja); box-shadow: none; }
.contador__btn[aria-disabled='true'] { background: var(--papel); color: color-mix(in oklab, var(--tinta-suave) 55%, transparent); box-shadow: inset 0 0 0 1.5px var(--filete); }
.contador__num { min-width: 34px; text-align: center; font-family: var(--f-ui); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.contador__num.salta { animation: salta 260ms var(--e-fuerte); }
@keyframes salta { 40% { transform: scale(1.18); } }
.adulto { margin-top: 12px; font-size: 14px; color: var(--tinta-suave); text-align: center; text-wrap: balance; }

/* Globo de «qué incluye» */
.globo { position: absolute; z-index: 70; max-width: min(300px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 14px; background: var(--tinta); color: var(--papel-hoja); font-size: 14px; line-height: 1.45; box-shadow: var(--som-alto); animation: aparece var(--d-abre) var(--e-fuerte) both; }

/* Avisos: ámbar, en positivo, con la salida al lado */
.aviso { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 12px 14px; border-radius: 16px; background: var(--ambar-velo); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ambar) 55%, transparent); color: var(--tinta); font-size: 14.5px; line-height: 1.45; animation: aparece var(--d-elige) var(--e-fuerte) both; }
.aviso > svg { width: 22px; height: 22px; color: var(--ambar-tinta); }
.aviso__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.aviso .boton { --alto: 44px; font-size: 15px; }

/* ─────────────── 3 · ¿Qué es? ─────────────── */
.que { padding-block: 48px 8px; }
.que__caja { max-width: 760px; }
.que__titulo { font-family: var(--f-serif); font-style: italic; font-size: 30px; color: var(--granate); margin-bottom: 8px; }
.acordeon { border-top: 1px solid var(--filete); }
.pregunta { border-bottom: 1px solid var(--filete); }
.pregunta__boton { display: grid; grid-template-columns: 1fr 22px; gap: 14px; align-items: center; width: 100%; min-height: 58px; padding: 10px 0; border: 0; background: none; text-align: left; font-family: var(--f-ui); font-weight: 650; font-size: 17px; line-height: 1.3; color: var(--tinta); border-radius: 12px; }
.pregunta__chev { width: 22px; height: 22px; color: var(--granate); transition: transform var(--d-cierra) var(--e-sale); }
.pregunta__boton[aria-expanded='true'] .pregunta__chev { transform: rotate(180deg); transition: transform var(--d-abre) var(--e-m3); }
.pregunta__hueco { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-cierra) var(--e-sale); }
.pregunta__hueco.abierta { grid-template-rows: 1fr; transition: grid-template-rows var(--d-abre) var(--e-m3); }
.pregunta__panel { overflow: hidden; min-height: 0; }
.pregunta__panel p { padding: 0 30px 16px 0; color: var(--tinta-suave); font-size: 15.5px; opacity: 0; transition: opacity var(--d-cierra) var(--e-sale); }
.pregunta__hueco.abierta .pregunta__panel p { opacity: 1; transition: opacity var(--d-abre) var(--e-m3) 60ms; }

/* ─────────────── Pie ─────────────── */
.pie { margin-top: 36px; padding: 30px 0 calc(130px + env(safe-area-inset-bottom)); border-top: 1px solid var(--filete); }
.pie__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 30px; }
.pie__logos img { height: 48px; width: auto; }
.pie__logos li:nth-child(3) img { height: 38px; }
/* El logo del Poblet de Nadal (la bola, 07-11-2026) lleva mucho detalle: algo más grande. */
.pie__logos .pie__logo-poblet img { height: 76px; }
/* El Anillo de Martina: sus dos logotipos van juntos en un hueco, para que la fila
   no se parta entre ellos (en el móvil, los cuatro arriba y los dos debajo). */
.pie__logos .pie__logo-eadm { display: flex; align-items: center; gap: 18px; }
.pie__logos .pie__logo-eadm img { height: 46px; }
@media (max-width: 420px) {
  .pie__logos { column-gap: 16px; }
  .pie__logos .pie__logo-eadm img { height: 40px; }
}
.pie__enlaces { margin-top: 18px; text-align: center; font-size: 14.5px; }

/* ─────────────── Barra fija ─────────────── */
.barra {
  position: fixed; z-index: 40; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)), 560px);
  transform: translate(-50%, calc(100% + 40px)); opacity: 0; visibility: hidden;
  transition: transform var(--d-hoja-sale) var(--e-sale), opacity var(--d-hoja-sale) var(--e-sale), visibility 0s linear var(--d-hoja-sale);
}
.barra--vista { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform var(--d-luz) var(--e-cajon), opacity var(--d-luz) var(--e-cajon), visibility 0s; }
.barra__caja { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 8px 8px 8px 30px; border-radius: 999px; background: color-mix(in oklab, var(--papel-hoja) 92%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: var(--som-alto), inset 0 0 0 1px var(--filete); }
.barra__texto { display: grid; line-height: 1.2; font-size: 13.5px; color: var(--tinta-suave); }
.barra__total { font-family: var(--f-ui); font-size: 20px; font-weight: 700; color: var(--tinta); letter-spacing: -0.02em; }
.barra .boton { --alto: 52px; }

/* El total que rueda */
.rollo { display: inline-flex; font-variant-numeric: tabular-nums; line-height: 1.15; height: 1.15em; overflow: hidden; vertical-align: bottom; }
.rollo__c { display: inline-block; height: 1.15em; overflow: hidden; }
.rollo__tira { display: flex; flex-direction: column; transition: transform var(--d-rollo) var(--e-fuerte); }
.rollo__tira span { height: 1.15em; }
.rollo--quieto .rollo__tira { transition: none; }

/* ─────────────── El pago: la única hoja ─────────────── */
.hoja { position: fixed; inset: 0; z-index: 60; }
.hoja__velo { position: absolute; inset: 0; background: var(--velo); opacity: 0; transition: opacity var(--d-hoja-sale) var(--e-sale); }
.hoja--abierta .hoja__velo { opacity: 1; transition: opacity var(--d-hoja) var(--e-cajon); }
.hoja__caja { position: absolute; left: 8px; right: 8px; top: calc(env(safe-area-inset-top) + 10px); bottom: calc(env(safe-area-inset-bottom) + 8px); display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-tarjeta); background: var(--papel); box-shadow: var(--som-lente); transform: translate3d(0, calc(100% + 60px), 0); transition: transform var(--d-hoja-sale) var(--e-sale); outline: none; }
.hoja--abierta .hoja__caja { transform: none; transition: transform var(--d-hoja) var(--e-cajon); }
.hoja--arrastra .hoja__caja { transition: none !important; }
.hoja__cab { position: relative; display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 8px; padding: 16px 10px 4px 20px; flex: none; touch-action: none; }
.hoja__asa { position: absolute; left: 50%; top: 6px; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--filete-fuerte); }
.hoja__titulo { font-family: var(--f-serif); font-style: italic; font-size: 27px; line-height: 1.1; color: var(--granate); }
.hoja__icono { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--tinta); }
.hoja__icono svg { width: 22px; height: 22px; }
@media (hover: hover) { .hoja__icono:hover { background: var(--papel-sobre); } }
.hoja__cuerpo { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 20px 24px; scroll-padding-block: 16px 24px; }
.hoja__paso { display: grid; gap: 18px; }
.hoja__paso.entra { animation: aparece 320ms var(--e-fuerte) both; }
.hoja__pie { flex: none; display: grid; gap: 8px; padding: 10px 14px 12px; background: var(--papel-hoja); border-top: 1px solid var(--filete); }
.hoja__pie--oculto { display: none; }
.confianza-corta { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--tinta-suave); text-align: center; }
.confianza-corta svg { width: 16px; height: 16px; flex: none; color: var(--abeto); } /* 07-11: 16 px, el candado afinado se lee con aire */
.confianza-corta { flex-direction: column; gap: 3px; }
.confianza-corta__linea { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; max-width: 100%; }

.resumen { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-pieza); background: var(--papel-hoja); box-shadow: inset 0 0 0 1px var(--filete); }
.resumen__cuando { font-family: var(--f-serif); font-weight: 600; font-size: 19px; line-height: 1.2; }
/* 07-11-2026 (cliente): la hora, debajo del día, para que nunca se parta a media franja. */
.resumen__hora { display: block; font-family: var(--f-ui); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--granate); margin-top: 2px; }

/* ── La piel Gold (07-11-2026): la compra del turno con Cuca va en oro, no con la piel de la entrada general. ── */
.hoja--gold .hoja__titulo { color: var(--oro-tinta); }
.hoja--gold .resumen { background: var(--oro-velo); box-shadow: inset 0 0 0 1.5px var(--oro); }
.hoja--gold .resumen__hora { color: var(--oro-tinta); }
.hoja--gold #hoja-pagar { background: var(--oro-tinta); box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--oro) 90%, transparent), inset 0 1px 0 color-mix(in oklab, var(--blanco) 22%, transparent); }
@media (hover: hover) { .hoja--gold #hoja-pagar:hover { background: color-mix(in oklab, var(--oro-tinta) 85%, var(--oro)); } }
.hoja--gold .casilla input:checked + .casilla__caja { background: var(--oro-tinta); }
.hoja--gold .hoja__pie { background: color-mix(in oklab, var(--oro-velo) 70%, var(--papel-hoja)); border-top-color: var(--oro-claro); }
.ticket--gold { --fondo-ticket: var(--oro-velo); background: var(--oro-velo); box-shadow: var(--som-alto), inset 0 0 0 1px var(--oro), inset 0 0 0 7px var(--oro-velo), inset 0 0 0 8.5px var(--oro); }
.ticket--gold .ticket__marca, .ticket--gold .ticket__hora { color: var(--oro-tinta); }
.tarjeta--vip.tarjeta--elegida { box-shadow: inset 0 0 0 2px var(--oro), 0 12px 24px -18px color-mix(in oklab, var(--oro) 80%, transparent); background: var(--oro-velo); }
.tarjeta--extra-gold { box-shadow: inset 0 0 0 1px var(--oro-claro); }
.tarjeta--extra-gold.tarjeta--elegida { box-shadow: inset 0 0 0 1.75px var(--oro); background: color-mix(in oklab, var(--oro-velo) 70%, var(--papel-hoja)); }
.resumen__que { font-size: 14.5px; }
.resumen__extras { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 14px; color: var(--tinta-suave); }
.resumen__cambio { display: grid; gap: 10px; padding-top: 8px; }
.resumen__rotulo { font-size: 13px; font-weight: 650; color: var(--tinta-suave); }
.franjas { display: flex; flex-wrap: wrap; gap: 8px; }
.franjas .chip { min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 15px; }

/* Botón de pagar: normal · procesando · hecho */
.boton--pie { transition: transform var(--d-toque) var(--e-fuerte), background-color var(--d-luz) var(--e-nivel); }
.boton__txt { transition: opacity 150ms var(--e-fuerte); }
.boton__giro { width: 20px; height: 20px; border-radius: 50%; border: 2.4px solid color-mix(in oklab, var(--papel-hoja) 35%, transparent); border-top-color: var(--papel-hoja); animation: gira 700ms linear infinite; }
.boton--pagando { pointer-events: none; }
.boton--hecho { background: var(--abeto) !important; pointer-events: none; }
.boton--hecho svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: traza 380ms var(--e-trazo) forwards; }

.guarda { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--tinta-suave); }
.guarda svg { width: 20px; height: 20px; color: var(--abeto); flex: none; }
.guarda--ultimos { padding: 10px 14px; border-radius: 14px; background: var(--ambar-velo); color: var(--ambar-tinta); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ambar) 50%, transparent); }
.guarda--ultimos svg { color: var(--ambar-tinta); }

.casilla { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: var(--r-pieza); background: var(--papel-hoja); box-shadow: inset 0 0 0 1px var(--filete-fuerte); cursor: pointer; transition: box-shadow var(--d-luz) var(--e-nivel); }
.casilla input { position: absolute; opacity: 0; width: 28px; height: 28px; margin: 0; left: 16px; top: 16px; cursor: pointer; }
.casilla__caja { width: 28px; height: 28px; border-radius: 9px; box-shadow: inset 0 0 0 2px var(--filete-fuerte); display: grid; place-items: center; background: var(--blanco); transition: background-color var(--d-elige) var(--e-fuerte), box-shadow var(--d-elige) var(--e-fuerte); }
.casilla__caja svg { width: 18px; height: 18px; color: var(--papel-hoja); }
.casilla__caja svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset var(--d-elige) var(--e-fuerte); }
.casilla input:checked + .casilla__caja { background: var(--abeto); box-shadow: none; }
.casilla input:checked + .casilla__caja svg path { stroke-dashoffset: 0; transition-delay: 50ms; }
.casilla input:focus-visible + .casilla__caja { outline: 2.5px solid var(--granate); outline-offset: 3px; }
.casilla__txt { font-weight: 600; font-size: 16px; line-height: 1.4; padding-top: 2px; }
/* 07-11-2026: el cliente quiere la frase de la casilla en UNA línea, en los
   cuatro idiomas. La letra se ajusta al ancho de la casilla (tope 15 px). */
.casilla { container-type: inline-size; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; padding: 14px 14px; }
.casilla__txt { white-space: nowrap; font-size: min(15px, 3.75cqi); padding-top: 0; letter-spacing: -0.005em; }
.casilla .casilla__caja { width: 24px; height: 24px; border-radius: 8px; }
/* Sin el hueco de debajo: la fila de la ayuda solo ocupa sitio cuando sale el aviso. */
.casilla { row-gap: 0; }
.casilla--aviso .casilla__ayuda > span { padding-top: 6px; }
/* La frase de la casilla, en una línea: cada idioma con su tope (el catalán es el más largo). */
html[lang='es'] .casilla__txt { font-size: min(15px, 4.3cqi); }
html[lang='en'] .casilla__txt { font-size: min(15px, 4.6cqi); }
html[lang='fr'] .casilla__txt { font-size: min(15px, 4.1cqi); }
html[lang='ca'] .casilla__txt { font-size: min(15px, 3.65cqi); }
@container (max-width: 300px) { .casilla__txt { white-space: normal; } }
.casilla .casilla__caja svg { width: 16px; height: 16px; }
.casilla__ayuda { grid-column: 2; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-abre) var(--e-m3); }
.casilla__ayuda > span { overflow: hidden; min-height: 0; color: var(--ambar-tinta); font-size: 14px; font-weight: 500; line-height: 1.4; }
.casilla--aviso { box-shadow: inset 0 0 0 1.75px var(--ambar), 0 0 0 4px color-mix(in oklab, var(--ambar) 26%, transparent); }
.casilla--aviso .casilla__ayuda { grid-template-rows: 1fr; }
.casilla--aviso .casilla__caja { box-shadow: inset 0 0 0 2px var(--ambar); }

.metodos { display: grid; gap: 12px; }
.pagar-nativo { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 54px; border: 0; border-radius: 14px; background: var(--blanco); color: var(--monedero-tinta); box-shadow: inset 0 0 0 1.5px var(--monedero-tinta); font-family: -apple-system, 'SF Pro Display', 'Inter', system-ui, sans-serif; font-size: 21px; font-weight: 600; transition: transform var(--d-toque) var(--e-fuerte); }
.pagar-nativo:active { transform: scale(var(--esc-pulsa)); }
.pagar-nativo svg { width: 22px; height: 22px; margin-top: -3px; }
.pagar-nativo .g { font-family: var(--f-texto); font-weight: 700; font-size: 22px; color: var(--g-azul); }
.separador { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--tinta-suave); }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--filete-fuerte); }
/* 07-11-2026: el botón grande de Apple Pay / Google Pay / Amazon Pay, arriba. */
.express { display: grid; gap: 16px; }
.express[hidden] { display: none; }
/* Mientras Stripe no confirma que hay monedero (o si no lo hay), no ocupa sitio,
   pero sigue montado para que Stripe pueda comprobarlo. */
/* Se monta VISIBLE (si no, Stripe no llega a pintar los botones: comprobado en el
   móvil del cliente). Mientras carga no se ve la raya «o paga con tarjeta»; si
   Stripe dice que no hay ningún monedero, el bloque desaparece. */
.express--cargando .separador { display: none; }
.express--vacio { display: none; }
/* Sin huecos: la ayuda vacía de un campo (la del nombre) no ocupa sitio. */
.campo__ayuda:empty { display: none; }
.stripe-express { min-height: 54px; }
.pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pestana { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 54px; border: 0; border-radius: 14px; background: var(--blanco); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--filete-fuerte), var(--som-plano); font-family: var(--f-texto); font-size: 15px; font-weight: 600; text-align: left; transition: box-shadow var(--d-elige) var(--e-fuerte), transform var(--d-toque) var(--e-fuerte); }
.pestana:active { transform: scale(var(--esc-pulsa)); }
.pestana[aria-selected='true'] { box-shadow: inset 0 0 0 1.75px var(--granate), 0 8px 18px -12px color-mix(in oklab, var(--granate) 60%, transparent); color: var(--granate); }
.pestana svg { width: 22px; height: 22px; }
.bizum-marca { font-family: var(--f-ui); font-weight: 800; font-size: 17px; letter-spacing: -0.03em; color: var(--bizum); }
.info { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 12px 14px; border-radius: 16px; background: var(--papel-hoja); box-shadow: inset 0 0 0 1px var(--filete); font-size: 14.5px; }
.info > svg { width: 22px; height: 22px; color: var(--abeto); }
.cargando { display: grid; gap: 12px; }
.cargando__txt { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--tinta-suave); }
.cargando__txt .boton__giro { border-color: color-mix(in oklab, var(--granate) 25%, transparent); border-top-color: var(--granate); }
.esqueleto { height: 56px; border-radius: var(--r-pieza); background: linear-gradient(90deg, var(--papel-sobre) 0%, var(--papel-hoja) 50%, var(--papel-sobre) 100%) 0 0 / 200% 100%; animation: brilla 1.2s linear infinite; }
@keyframes brilla { to { background-position: -200% 0; } }

/* Campos: la caja de la casa (60 px, etiqueta que se encoge, disco a la izquierda) */
.campos { display: grid; gap: 4px; }
.campo { display: grid; }
.cajetin { --alto: 60px; --disco: 36px; position: relative; display: grid; grid-template-columns: var(--disco) 1fr; column-gap: 12px; align-items: center; min-height: var(--alto); padding: 0 calc(var(--alto) / 2) 0 calc((var(--alto) - var(--disco)) / 2); border-radius: calc(var(--alto) / 2); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--filete-fuerte), var(--som-plano); transition: box-shadow var(--d-elige) var(--e-sale); cursor: text; }
.cajetin--sin-disco { grid-template-columns: 1fr; padding-left: calc(var(--alto) / 2); }
.cajetin:focus-within { box-shadow: inset 0 0 0 1.75px var(--granate), 0 0 0 4px color-mix(in oklab, var(--rosa) 75%, transparent), var(--som-plano); }
.cajetin--aviso, .cajetin--aviso:focus-within { box-shadow: inset 0 0 0 1.75px var(--ambar), 0 0 0 4px color-mix(in oklab, var(--ambar) 26%, transparent), var(--som-plano); }
.cajetin__disco { position: relative; width: var(--disco); height: var(--disco); border-radius: 50%; background: var(--rosa); }
.cajetin__disco::after { content: ''; position: absolute; inset: 25%; background: var(--granate); -webkit-mask: var(--dibujo) center / contain no-repeat; mask: var(--dibujo) center / contain no-repeat; }
.cajetin__texto { position: relative; display: block; min-width: 0; height: var(--alto); }
.cajetin__etiqueta { position: absolute; z-index: 1; left: 0; top: 50%; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; font-weight: 500; color: var(--tinta-suave); pointer-events: none; transform-origin: 0 0; translate: 0 -50%; transition: translate var(--d-elige) var(--e-fuerte), scale var(--d-elige) var(--e-fuerte); }
.cajetin:focus-within .cajetin__etiqueta, .cajetin--lleno .cajetin__etiqueta { translate: 0 calc(-50% - 13px); scale: 0.74; font-weight: 650; max-width: calc(100% / 0.74); }
.cajetin__entrada { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 24px 0 10px; border: 0; outline: 0; background: transparent; line-height: 26px; font-family: var(--f-ui); font-size: 17px; font-weight: 600; color: var(--tinta); caret-color: var(--granate); }
.cajetin__entrada::placeholder { color: transparent; }
.cajetin__entrada:-webkit-autofill { box-shadow: inset 0 0 0 100px var(--blanco); -webkit-text-fill-color: var(--tinta); }
.cajetin--movil { grid-template-columns: var(--disco) auto 1fr; }
.prefijo { position: relative; height: 44px; border-radius: 12px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--filete); }
.prefijo select { appearance: none; -webkit-appearance: none; height: 100%; padding: 0 26px 0 10px; border: 0; border-radius: inherit; background: transparent; font-family: var(--f-ui); font-weight: 650; font-size: 16px; color: var(--tinta); cursor: pointer; }
.prefijo svg { position: absolute; right: 6px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; color: var(--tinta-suave); }
.campo__ayuda { min-height: calc(2 * 1.35em + 4px); padding: 4px 30px 0; font-size: 13px; line-height: 1.35; color: var(--tinta-suave); }
/* 07-11-2026: sin reservar dos líneas vacías bajo cada campo (el cliente veía huecos enormes). */
.campos { gap: 12px; }
.campos .campo__ayuda { min-height: 0; padding-top: 5px; }
.campo__ayuda--aviso { color: var(--ambar-tinta); font-weight: 600; }
.campos-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campos-fila .campo__ayuda { padding-inline: 18px 4px; }
.legal { font-size: 13.5px; color: var(--tinta-suave); }
/* 07-11-2026 (cliente, iPhone): en los dos pasos de la compra todo tiene que caber a la
   vista, sin scroll. Cajetines más bajos, huecos más cortos y el aviso vacío sin hueco.
   La letra del campo sigue en 17 px: por debajo de 16, el iPhone hace zoom al escribir. */
#error-pago:empty { display: none; }
.hoja__paso[data-paso="datos"], .hoja__paso[data-paso="pago"] { gap: 12px; }
.hoja__paso[data-paso="datos"] .resumen, .hoja__paso[data-paso="pago"] .resumen { padding: 10px 14px; gap: 2px; }
/* «canviar» sin relleno en el resumen: su ::after ya le da la zona de toque (−12 px por arriba y por abajo). */
.resumen .enlace { padding-block: 0; min-height: 0; }
.hoja__paso[data-paso="datos"] .resumen__hora { margin-top: 0; }
.hoja__paso[data-paso="datos"] .codigo__abre { padding-block: 7px; }
.hoja__paso[data-paso="datos"] .codigo__abre .codigo__disco { --disco: 32px; }
.hoja__paso[data-paso="datos"] .campos { gap: 8px; }
.hoja__paso[data-paso="datos"] .cajetin { --alto: 52px; --disco: 32px; }
.hoja__paso[data-paso="datos"] .cajetin__entrada { padding: 20px 0 6px; }
.hoja__paso[data-paso="datos"] .cajetin:focus-within .cajetin__etiqueta,
.hoja__paso[data-paso="datos"] .cajetin--lleno .cajetin__etiqueta { translate: 0 calc(-50% - 11px); }
.hoja__paso[data-paso="datos"] .prefijo { height: 38px; }
.hoja__paso[data-paso="datos"] .campos .campo__ayuda { padding-top: 3px; font-size: 12.5px; line-height: 1.3; }
.hoja__paso[data-paso="datos"] .casilla { padding-block: 11px; }
.hoja__paso[data-paso="datos"] .codigo__fila .boton { min-height: 52px; }
.hoja__paso[data-paso="datos"] .legal { font-size: 12.5px; line-height: 1.35; }
.hoja__cuerpo:has(.hoja__paso[data-paso="datos"]), .hoja__cuerpo:has(.hoja__paso[data-paso="pago"]) { padding-bottom: 14px; }
@media (max-width: 959px) {
  .hoja__cab { padding-top: 12px; }
  .hoja__titulo { font-size: 25px; }
}

.espera { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 18px; padding: 32px; background: color-mix(in oklab, var(--papel) 94%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-align: center; animation: aparece var(--d-abre) var(--e-fuerte) both; }
.espera p { max-width: 30ch; font-family: var(--f-serif); font-size: 21px; line-height: 1.35; }
.espera .boton__giro { width: 34px; height: 34px; border-width: 3px; border-color: color-mix(in oklab, var(--granate) 22%, transparent); border-top-color: var(--granate); }
.espera__banco { display: grid; gap: 4px; padding: 14px 22px; border-radius: 18px; background: var(--papel-hoja); box-shadow: var(--som-flota); font-size: 14px; color: var(--tinta-suave); }

/* ─────────────── Gracias ─────────────── */
.gracias { display: grid; gap: 18px; }
.gracias__check { width: 60px; height: 60px; color: var(--abeto); }
.gracias__check circle { stroke-dasharray: 176; stroke-dashoffset: 176; animation: traza var(--d-trazo) var(--e-trazo) forwards; }
.gracias__check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: traza 320ms var(--e-trazo) forwards; animation-delay: calc(var(--d-trazo) - 120ms); }
.gracias .tit { animation: aparece 300ms var(--e-fuerte) 200ms both; }
.gracias__txt { font-size: 15.5px; animation: aparece 300ms var(--e-fuerte) 300ms both; }
.gracias__txt strong { font-weight: 650; word-break: break-word; }
.gracias__botones { display: grid; gap: 10px; }
.apunta { display: grid; gap: 10px; }
.apunta .campo__ayuda { min-height: 0; padding-top: 0; }
.apunta .campo__ayuda:empty { display: none; }
.apunta__rotulo { font-weight: 650; font-size: 15.5px; margin-bottom: 6px; }
.apunta .boton { justify-self: start; --alto: 50px; }
#gracias-titulo:focus:not(:focus-visible), #aparte-titulo:focus:not(:focus-visible), #mi-hecho:focus:not(:focus-visible) { outline: none; }
.aparte { display: grid; justify-items: center; gap: 18px; padding: 36px 8px 24px; text-align: center; }
.aparte__lacre { width: 84px; height: 84px; transform: rotate(-8deg); filter: drop-shadow(0 6px 8px color-mix(in oklab, var(--lacre-hondo) 35%, transparent)); }
.aparte__titulo { font-family: var(--f-serif); font-style: italic; font-size: 28px; color: var(--granate); }
.aparte__txt { max-width: 32ch; font-size: 16px; }

/* ─────────────── La entrada: el sello con su QR ─────────────── */
.ticket { --fondo-ticket: var(--papel); position: relative; display: grid; gap: 6px; padding: 24px 22px 20px; border-radius: 24px; background: var(--papel-hoja); box-shadow: var(--som-alto), inset 0 0 0 1px var(--filete), inset 0 0 0 7px var(--papel-hoja), inset 0 0 0 8px var(--oro-claro); }
.ticket__lacre { position: absolute; right: 14px; top: -16px; width: 70px; height: 70px; transform: rotate(-10deg); filter: drop-shadow(0 5px 6px color-mix(in oklab, var(--lacre-hondo) 40%, transparent)); }
.ticket__marca { font-family: var(--f-serif); font-weight: 600; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--granate); padding-right: 64px; text-wrap: balance; }
.ticket__que { display: grid; gap: 1px; font-size: 15px; padding-right: 30px; margin-top: 4px; }
.ticket__que strong { font-family: var(--f-ui); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.ticket__quien { color: var(--tinta-suave); }
.ticket__cuando { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 14px; margin-top: 6px; font-family: var(--f-serif); font-weight: 600; font-size: 22px; line-height: 1.2; }
.ticket__hora { font-family: var(--f-ui); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--granate); }
.ticket__extras { display: grid; gap: 2px; font-size: 14px; color: var(--tinta-suave); }
.ticket__corte { position: relative; height: 1px; margin: 14px -22px; border-top: 1.5px dashed var(--filete-fuerte); }
.ticket__corte::before, .ticket__corte::after { content: ''; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--fondo-ticket); }
.ticket__corte::before { left: -11px; box-shadow: inset -1px 0 0 var(--filete); }
.ticket__corte::after { right: -11px; box-shadow: inset 1px 0 0 var(--filete); }
.ticket__qr-zona { position: relative; display: flex; justify-content: center; margin-inline: -22px; padding: 4px 0 8px; overflow: hidden; }
.sello-qr { position: relative; filter: drop-shadow(0 4px 8px color-mix(in oklab, var(--sombra) 18%, transparent)); }
.sello-qr__papel { width: 196px; height: 196px; padding: 18px; background: var(--blanco); }
.sello-qr__papel svg, .sello-qr__papel img { width: 100%; height: 100%; shape-rendering: crispEdges; image-rendering: pixelated; }
.ticket__matasellos { position: absolute; left: calc(50% + 84px); top: 0; width: 150px; height: 78px; color: var(--granate); opacity: 0.8; mix-blend-mode: multiply; transform: rotate(-9deg); pointer-events: none; }
.ticket__peques { text-align: center; font-family: var(--f-serif); font-style: italic; font-size: 20px; color: var(--granate); line-height: 1.2; }
.ticket__pie { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ticket__codigo { font-family: var(--f-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; color: var(--tinta); }
.ticket__huella { width: 14px; height: 14px; color: var(--granate); opacity: 0.45; transform: rotate(18deg); }
.ticket__donde { font-size: 13px; color: var(--tinta-suave); text-align: center; }
.ticket.estampa { animation: ticket-sube 300ms var(--e-fuerte) both; animation-delay: var(--retraso, 0ms); }
.ticket.estampa .ticket__lacre { animation: lacre-estampa 460ms var(--e-m3) both; animation-delay: calc(var(--retraso, 0ms) + 380ms); }
.ticket.estampa .ticket__matasellos { animation: tinta 380ms var(--e-fuerte) both; animation-delay: calc(var(--retraso, 0ms) + 700ms); }
.ticket.estampa .sello-qr { animation: sello-posa 300ms var(--e-fuerte) both; animation-delay: calc(var(--retraso, 0ms) + 160ms); }
@keyframes ticket-sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lacre-estampa { 0% { opacity: 0; transform: rotate(-22deg) scale(1.55); } 62% { opacity: 1; transform: rotate(-9deg) scale(0.94); } 100% { opacity: 1; transform: rotate(-10deg) scale(1); } }
@keyframes tinta { from { opacity: 0; } to { opacity: 0.8; } }
@keyframes sello-posa { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* ─────────────── Vistas aparte ─────────────── */
.vista--aparte { min-height: 100svh; padding: calc(env(safe-area-inset-top) + 12px) var(--hueco) calc(env(safe-area-inset-bottom) + 48px); }
.volver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-right: 8px; font-weight: 600; font-size: 15px; text-decoration: none; border-radius: 10px; }
.volver svg { width: 20px; height: 20px; }
.correo { max-width: 640px; margin-inline: auto; display: grid; gap: 16px; }
.correo__cliente { display: grid; gap: 10px; }
.correo__meta { display: grid; gap: 6px; margin: 0; padding: 14px 18px; border-radius: 18px; background: var(--papel-hoja); box-shadow: inset 0 0 0 1px var(--filete); font-size: 14px; }
.correo__meta div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
.correo__meta dt { color: var(--tinta-suave); }
.correo__meta dd { margin: 0; font-weight: 600; word-break: break-word; }
.correo__asunto { font-family: var(--f-ui); font-size: 16px; }
.correo__pre { font-size: 14px; color: var(--tinta-suave); padding-inline: 18px; }
.correo__carta { overflow: hidden; border-radius: var(--r-tarjeta); background: var(--papel-hoja); box-shadow: var(--som-alto), inset 0 0 0 1px var(--filete); }
.correo__cab { display: grid; justify-items: center; gap: 14px; padding: 32px 22px 26px; background: var(--papel-sobre); border-bottom: 1px solid var(--filete); }
.correo__lacre { width: 64px; height: 64px; transform: rotate(-8deg); filter: drop-shadow(0 5px 6px color-mix(in oklab, var(--lacre-hondo) 35%, transparent)); }
.correo__cuerpo { display: grid; gap: 14px; padding: 26px 22px; font-size: 16px; }
.correo__entrada { margin: 12px 0 8px; }
.correo__entrada .ticket { --fondo-ticket: var(--papel-hoja); }
[data-r='extras-correo'] { display: grid; gap: 14px; }
[data-r='extras-correo']:empty { display: none; }
.correo__firma { font-family: var(--f-serif); font-style: italic; font-size: 24px; color: var(--granate); }
.correo__pie { padding: 16px 22px 22px; border-top: 1px solid var(--filete); font-size: 13px; color: var(--tinta-suave); text-align: center; }
.mi { max-width: 520px; margin-inline: auto; display: grid; gap: 18px; }
.mi__titulo { font-family: var(--f-serif); font-style: italic; font-size: 34px; color: var(--granate); line-height: 1.1; }
.mi__entrada { margin-top: 14px; }
.mi__acciones { display: grid; gap: 10px; }
.mi__datos { display: grid; gap: 6px; font-size: 14.5px; color: var(--tinta-suave); }
.mi__cambio { display: grid; gap: 12px; padding: 18px; border-radius: var(--r-pieza); background: var(--papel-hoja); box-shadow: inset 0 0 0 1px var(--filete); }
.mi__cambio .boton { justify-self: start; }
.hecho { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--abeto-velo); color: var(--abeto); font-weight: 600; font-size: 15px; animation: aparece var(--d-abre) var(--e-fuerte) both; }
.hecho svg { width: 24px; height: 24px; }
.puerta { max-width: 460px; margin-inline: auto; display: grid; gap: 12px; }
.puerta__movil { position: relative; display: grid; gap: 14px; padding: 16px; border-radius: 32px; background: var(--papel-hoja); box-shadow: var(--som-alto), inset 0 0 0 1px var(--filete); overflow: hidden; }
.puerta__cab { display: grid; gap: 2px; padding: 4px 6px; }
.puerta__rol { font-family: var(--f-ui); font-weight: 700; font-size: 20px; }
.puerta__pase { font-size: 14px; color: var(--tinta-suave); }
.puerta__camara { position: relative; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; background: radial-gradient(120% 80% at 30% 20%, var(--camara-c) 0%, var(--camara-a) 45%, var(--camara-b) 100%); display: grid; place-items: center; }
.puerta__visor { position: relative; width: 58%; aspect-ratio: 1; }
.puerta__visor i { position: absolute; width: 34px; height: 34px; border: 4px solid var(--papel-hoja); }
.puerta__visor i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.puerta__visor i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.puerta__visor i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.puerta__visor i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.puerta__visor b { position: absolute; left: 8%; right: 8%; top: 10%; height: 2px; border-radius: 2px; background: var(--papel-hoja); opacity: 0.8; animation: barre 2.4s var(--e-nivel) infinite alternate; }
@keyframes barre { to { top: 88%; } }
.puerta__ayuda { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--papel-hoja); text-shadow: 0 1px 6px color-mix(in oklab, var(--sombra) 50%, transparent); }
.puerta__simular { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.puerta__simular .boton { white-space: normal; text-align: center; padding: 6px 12px; line-height: 1.2; }
.puerta__otra { grid-column: 1 / -1; }
.ficha { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 10px; padding: 22px 20px 18px; border-radius: 26px; box-shadow: var(--som-lente); animation: ficha-sube 420ms var(--e-cajon) both; }
@keyframes ficha-sube { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.ficha--valida { background: var(--abeto-velo); box-shadow: var(--som-lente), inset 0 0 0 2px var(--abeto); }
.ficha--usada { background: var(--ambar-velo); box-shadow: var(--som-lente), inset 0 0 0 2px var(--ambar); }
.ficha__icono { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; }
.ficha--valida .ficha__icono { background: var(--abeto); color: var(--papel-hoja); }
.ficha--usada .ficha__icono { background: var(--ambar); color: var(--tinta); }
.ficha__icono svg { width: 32px; height: 32px; }
.ficha__titulo { font-family: var(--f-serif); font-weight: 600; font-size: 28px; line-height: 1.1; }
.ficha--valida .ficha__titulo { color: var(--abeto); }
.ficha--usada .ficha__titulo { color: var(--ambar-tinta); }
.ficha__nombre { font-family: var(--f-ui); font-weight: 700; font-size: 22px; }
.ficha__datos { display: grid; gap: 2px; font-size: 15px; }
.ficha .boton { margin-top: 6px; }
.ficha--valida .boton { background: var(--abeto); }

/* ─────────────── Monedero y diálogos ─────────────── */
.monedero, .dialogo { position: fixed; inset: 0; z-index: 90; }
.monedero__velo, .dialogo__velo { position: absolute; inset: 0; background: var(--velo); animation: aparece var(--d-abre) var(--e-fuerte) both; }
.monedero__caja { position: absolute; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 8px); max-width: 440px; margin-inline: auto; display: grid; gap: 14px; padding: 18px 20px 20px; border-radius: 30px; background: var(--blanco); color: var(--monedero-tinta); font-family: -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif; box-shadow: var(--som-lente); animation: hoja-sube var(--d-hoja) var(--e-cajon) both; outline: none; }
@keyframes hoja-sube { from { transform: translateY(110%); } to { transform: none; } }
.monedero__cab { display: flex; align-items: center; justify-content: space-between; }
.monedero__marca { display: inline-flex; align-items: center; gap: 4px; font-size: 22px; font-weight: 600; }
.monedero__marca svg { width: 22px; height: 22px; margin-top: -3px; }
.monedero__marca .g { color: var(--g-azul); font-weight: 700; }
.monedero__cancelar { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--monedero-azul); font-size: 16px; font-weight: 500; }
.monedero__fila { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--filete); font-size: 15px; }
.monedero__fila dt { color: var(--tinta-suave); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; }
.monedero__fila dd { margin: 0; font-weight: 500; }
.monedero__total dd { font-size: 20px; font-weight: 700; }
.monedero__cara { display: grid; justify-items: center; gap: 8px; padding: 10px 0 4px; font-size: 15px; font-weight: 500; }
.monedero__cara svg { width: 54px; height: 54px; color: var(--monedero-azul); }
.monedero__cara.leyendo svg .cara-marco { stroke-dasharray: 8 6; animation: gira 1.2s linear infinite; transform-origin: 50% 50%; }
.monedero__cara.hecho-ok svg { color: var(--g-verde); }
.monedero__ok { width: 100%; min-height: 50px; border: 0; border-radius: 14px; background: var(--monedero-azul); color: var(--blanco); font-size: 17px; font-weight: 600; }
.monedero__ok--google { background: var(--monedero-tinta); }
.dialogo__caja { position: absolute; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 8px); max-height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); max-width: 560px; margin-inline: auto; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 14px; align-content: start; padding: 18px 20px 22px; border-radius: var(--r-tarjeta); background: var(--papel); box-shadow: var(--som-lente); animation: hoja-sube var(--d-hoja) var(--e-cajon) both; outline: none; }
.dialogo__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialogo__titulo { font-family: var(--f-serif); font-style: italic; font-size: 26px; color: var(--granate); line-height: 1.15; }
.dialogo--qr .dialogo__caja { background: var(--blanco); justify-items: center; text-align: center; }
.qr-grande { width: min(78vw, 340px); aspect-ratio: 1; padding: 6px; }
.qr-grande svg, .qr-grande img { width: 100%; height: 100%; shape-rendering: crispEdges; image-rendering: pixelated; }

/* ─────────────── Producción (07-11-2026): Stripe, código de descuento y condiciones ─────────────── */
.stripe-pago { min-height: 1px; }
.cargando[hidden] { display: none; }
/* 07-11-2026 (cliente): el código secreto como un cajón del relojero. Caja de la casilla con
   filete de oro, disco rosa con la llave como los demás campos. */
.codigo { display: grid; gap: 8px; border-radius: var(--r-pieza); background: var(--papel-hoja); box-shadow: inset 0 0 0 1.5px var(--oro-claro); }
.codigo:not(.codigo--abierto):not(.codigo--ok) { background: color-mix(in oklab, var(--oro-velo) 55%, var(--papel-hoja)); }
.codigo__abre { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.codigo__abre:focus-visible { outline: 2.5px solid var(--granate); outline-offset: 3px; }
.codigo__abre .codigo__disco, .codigo--ok .codigo__disco { --disco: 36px; flex: none; }
.codigo__txt { display: grid; gap: 1px; min-width: 0; }
.codigo__pregunta { font-weight: 650; font-size: 15px; line-height: 1.3; color: var(--tinta); }
.codigo__pista { font-size: 13px; line-height: 1.35; color: var(--tinta-suave); }
.codigo__chev { width: 18px; height: 18px; color: var(--oro-tinta); transform: rotate(-90deg); }
.codigo--abierto { padding: 12px 12px 8px; box-shadow: inset 0 0 0 1.75px var(--oro); }
.codigo--abierto .codigo__pregunta { padding-left: 4px; }
.codigo__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.codigo__fila .boton { min-height: 56px; }
.codigo__fila .cajetin__entrada { text-transform: uppercase; letter-spacing: 0.06em; }
.codigo--ok { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; background: var(--abeto-velo); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--abeto) 35%, transparent); }
.codigo--ok .codigo__disco { background: var(--abeto); }
.codigo--ok .codigo__disco::after { background: var(--papel-hoja); }
.codigo__hecho { font-weight: 500; min-width: 0; }
.condiciones { display: grid; gap: 12px; font-size: 15.5px; line-height: 1.5; max-height: min(70vh, 640px); overflow-y: auto; padding-right: 4px; }
.condiciones h3 { margin-top: 6px; font-family: var(--f-serif); font-weight: 600; font-size: 1.15rem; color: var(--granate); }
.condiciones a { color: var(--granate); }

/* ─────────────── La maquinaria: ruedas de calibre de reloj (07-11-2026, rehecha) ───────────────
   El cliente: ruedas quietas en su sitio (nada pasa por encima al hacer scroll) pero girando
   sobre su propio eje, como un mecanismo. Cada rueda vive dentro de su sección, detrás del
   contenido. Laten a un golpe por segundo, como un escape de verdad: la grande (#engranaje,
   60 dientes) avanza 2° por golpe y da la vuelta en 180 s; la de escape (#engranaje8,
   20 dientes) va al revés, 6° por golpe, una vuelta por minuto: 3 a 1, como sus dientes.
   Se paran fuera de pantalla (`.gira--quieta`, IntersectionObserver del Blade) y con
   movimiento reducido. */
@keyframes rueda-gira { to { transform: rotate(360deg); } }
.gira { animation: rueda-gira 180s steps(180) infinite; transform-origin: 50% 50%; transform-box: border-box; }
.gira--al-reves { animation-direction: reverse; animation-duration: 60s; animation-timing-function: steps(60); }
.gira--quieta { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .gira, .maquinaria .rueda { animation: none !important; } }

/* El fondo fijo de antes (el contenido le pasaba por encima) se retira: con las ruedas del
   cartel y de la trama, ancladas a su sección, basta. El marcado de .maquinaria puede irse. */
.maquinaria { display: none; }
.vista { position: relative; z-index: 1; }

.hero { overflow-x: clip; padding-top: 20px; }
.hero__media { overflow: visible; }
.hero__foto { position: relative; z-index: 1; border-radius: var(--r-tarjeta); }
/* Las dos del cartel engranan: la de escape toca la corona de la grande (distancia = suma de radios primitivos). */
.hero__rueda { position: absolute; z-index: 0; color: var(--oro); opacity: 0.6; pointer-events: none; }
.hero__rueda--a { width: 96px; height: 96px; right: -26px; top: -16px; }
.hero__rueda--b { width: 62px; height: 62px; right: 61px; top: -12px; opacity: 0.5; }
/* 07-11-2026: los números de los pasos, en una rueda rosa clarito (--rosa) de 24 dientes finos
   con un anillo fino calado: la versión sencilla de la familia. El número, en granate, encima. */
.bloque__num { position: relative; isolation: isolate; width: 40px; height: 40px; border: 0; box-shadow: none; background: none; color: var(--granate); font-style: normal; font-weight: 600; }
.bloque__num::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--rosa);
  /* 07-11-2026: la rueda en grabado (dientes, anillo calado y cinco tajos de trama), generada por iconos.mjs */
  -webkit-mask: url("/poblet/ilustraciones/rueda-numeros.svg") center / contain no-repeat;
          mask: url("/poblet/ilustraciones/rueda-numeros.svg") center / contain no-repeat;
  transition: transform 900ms var(--e-fuerte); }
.bloque--hecho .bloque__num { background: none; }
.bloque--hecho .bloque__num::before { transform: rotate(45deg); background: var(--granate); }
@media (prefers-reduced-motion: reduce) { .bloque__num::before { transition: none; } }

/* La trama: un cuento con su reloj */
.trama { position: relative; overflow: hidden; margin-top: 44px; padding-block: 56px 60px; background: var(--tinta); color: var(--papel-hoja); }
.trama__caja { position: relative; z-index: 1; max-width: 640px; display: grid; justify-items: center; gap: 22px; text-align: center; }
.trama__esfera { width: 62px; height: 62px; color: var(--oro-claro); }
.trama__esfera .esfera__minutos { transform-origin: 50px 50px; }
.trama__titulo { font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 1.35rem + 1.6vw, 2.5rem); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; color: var(--oro-claro); }
.trama__texto { display: grid; gap: 16px; font-family: var(--f-serif); font-size: clamp(1.12rem, 1.05rem + 0.35vw, 1.3rem); line-height: 1.55; text-wrap: pretty; }
.trama__inicial::first-letter { float: left; font-size: 3.4em; line-height: 0.82; padding: 0.06em 0.1em 0 0; color: var(--oro-claro); font-weight: 600; }
.trama__inicial { text-align: left; }
.trama__engranaje { display: flex; justify-content: center; }
.trama__engranaje svg { width: 26px; height: 26px; color: var(--oro-claro); opacity: 0.8; }
.trama__final { margin-top: 6px; font-weight: 600; font-size: clamp(1.45rem, 1.25rem + 1vw, 2rem); line-height: 1.2; color: var(--oro-claro); text-wrap: balance; }
.trama__rueda { position: absolute; z-index: 0; color: var(--oro); opacity: 0.17; pointer-events: none; }
.trama__rueda--a { width: 260px; height: 260px; left: -110px; top: -90px; }
.trama__rueda--b { width: 170px; height: 170px; right: -60px; bottom: -50px; }

.pie__esfera { display: block; width: 40px; height: 40px; margin: 0 auto 18px; color: var(--oro); opacity: 0.7; }

@media (min-width: 960px) {
  .trama { margin-top: 72px; padding-block: 88px 92px; }
  .trama__rueda--a { width: 420px; height: 420px; left: -140px; top: -140px; }
  .trama__rueda--b { width: 280px; height: 280px; right: -60px; bottom: -80px; }
  .hero__rueda--a { width: 140px; height: 140px; right: -48px; top: -28px; }
  .hero__rueda--b { width: 86px; height: 86px; right: 79px; top: -20px; }
}
.lista-simple { display: grid; gap: 10px; font-size: 15.5px; }
.lista-simple li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.lista-simple svg { width: 20px; height: 20px; color: var(--abeto); margin-top: 2px; }
.nota-maqueta { font-size: 13px; color: var(--tinta-suave); padding: 10px 14px; border-radius: 12px; background: var(--papel-sobre); }
#cambio-cuerpo { display: grid; gap: 12px; }
#cambio-cuerpo .horas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.extra { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--papel-hoja); box-shadow: inset 0 0 0 1px var(--filete); font-size: 14.5px; animation: aparece var(--d-abre) var(--e-fuerte) both; }
.paso__rotulo { font-family: var(--f-ui); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); }

/* ─────────────── Navegación de la maqueta ─────────────── */
.maqueta-boton { --pestana: 15px; position: fixed; z-index: 120; left: 0; top: 42%; width: 44px; height: 84px; padding: 0; border: 0; background: transparent; color: var(--papel-hoja); }
.maqueta-boton::before { content: ''; position: absolute; left: 0; top: 4px; width: var(--pestana); height: 76px; border-radius: 0 10px 10px 0; background: var(--abeto); box-shadow: var(--som-flota); opacity: 0.94; }
.maqueta-boton span { position: absolute; left: 0; top: 4px; width: var(--pestana); height: 76px; display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-ui); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.maqueta { position: fixed; z-index: 121; left: 8px; top: calc(env(safe-area-inset-top) + 8px); bottom: calc(env(safe-area-inset-bottom) + 8px); width: min(300px, calc(100% - 16px)); overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px 18px; border-radius: 24px; background: var(--papel-hoja); box-shadow: var(--som-lente), inset 0 0 0 1px var(--filete); animation: maqueta-entra 320ms var(--e-cajon) both; }
@keyframes maqueta-entra { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.maqueta__cab { display: flex; align-items: center; justify-content: space-between; padding-left: 8px; }
.maqueta__titulo { font-family: var(--f-ui); font-weight: 700; font-size: 15px; }
.maqueta__grupo { margin: 12px 8px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); }
.maqueta ul { display: grid; }
.maqueta li button, .maqueta__monedero button { width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: none; text-align: left; font-size: 15px; font-weight: 500; }
@media (hover: hover) { .maqueta li button:hover { background: var(--papel); } }
.maqueta__monedero { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 4px; }
.maqueta__monedero button { text-align: center; box-shadow: inset 0 0 0 1px var(--filete-fuerte); }
.maqueta__monedero button[aria-pressed='true'] { background: var(--granate); color: var(--papel-hoja); box-shadow: none; }

.aviso-flotante { position: fixed; z-index: 130; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 150px); width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 16px; background: var(--papel-hoja); color: var(--tinta); box-shadow: var(--som-lente), inset 0 0 0 1.5px var(--filete-fuerte); font-size: 14.5px; font-weight: 500; text-align: center; opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity var(--d-cierra) var(--e-sale), transform var(--d-cierra) var(--e-sale); }
.aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); transition: opacity var(--d-abre) var(--e-fuerte), transform var(--d-abre) var(--e-fuerte); }


/* ─────────────── Tablet ─────────────── */
@media (min-width: 700px) {
  .dias { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .horas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gracias__botones, .mi__acciones { grid-template-columns: 1fr 1fr; }
}

/* ─────────────── Escritorio: el texto a la izquierda, el vídeo a la derecha ─────────────── */
@media (min-width: 960px) {
  body { font-size: 17px; }
  .cabecera__fila { min-height: 80px; }
  .hero__rejilla { grid-template-areas: 'texto media'; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 64px; }
  .hero__texto { grid-area: texto; display: grid; justify-items: start; gap: 18px; }
  .hero__texto > * { grid-area: auto; }
  .hero__cabeza { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; display: grid; gap: 14px; }
  .hero__logo { width: min(100%, 460px); height: auto; }
  .hero__titulo { margin: 0; }
  .hero__media { max-height: min(80vh, 680px); max-width: 520px; justify-self: end; }
  .boton.hero__boton { width: auto; padding-inline: 40px; margin: 6px 0 0; }
  .hero__accion { display: flex; align-items: center; gap: 22px; }
  .hero__precio { display: block; }
  /* Bajo el título, a la izquierda: el engranaje abre y el filete sigue hacia la derecha. */
  .hero__lema { justify-self: start; justify-items: start; text-align: left; max-width: 27em; margin-top: -4px; }
  .hero__adorno { width: min(100%, 260px); }
  .hero__adorno::before { display: none; }
  .hero__adorno svg { width: 28px; height: 28px; }
  .hero__frase { font-size: 17px; }
  .antetitulo { font-size: 14px; }
  .datos { padding-top: 56px; }
  .datos__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .dato-ficha { --valor: 1.8rem; padding: 14px 22px 20px; }
  .dato-ficha__dibujo { --lado: 112px; margin: 0 0 6px -8px; }
  .dato-ficha__nota { font-size: min(14.5px, 12.6cqi); }
  .dato-mapa__enlace { --valor: 1.8rem; column-gap: 20px; padding: 10px 26px 10px 14px; }
  .dato-mapa__enlace .dato-mapa__dibujo { --lado: 112px; }
  .dato-mapa__texto .dato-ficha__nota { font-size: 14.5px; }
  .pasos { padding-top: 72px; }
  .pasos__caja { gap: 28px; }
  .pasos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .paso { grid-template-columns: 1fr; gap: 14px; }
  .paso__foto { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .paso__lacre { width: 120px; height: 120px; }
  .paso__huella { width: 22px; height: 22px; }
  .paso__huella--a { left: 22px; bottom: 22px; }
  .paso__huella--b { right: 22px; top: 22px; }
  .reserva { padding-top: 64px; }
  .reserva__caja { gap: 40px; }
  .bloque__titulo { font-size: 27px; }
  .horas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .chip--vip { grid-column: span 3; }
  .que { padding-top: 72px; }
  .hoja__caja { left: auto; right: 16px; top: 16px; bottom: 16px; width: 500px; transform: translate3d(calc(100% + 60px), 0, 0); }
  .hoja__asa { display: none; }
  .hoja__cuerpo { padding: 10px 28px 28px; }
  .hoja__pie { padding: 12px 20px 16px; }
  .monedero__caja, .dialogo__caja { bottom: auto; top: 50%; transform: translateY(-50%); animation-name: dialogo-entra; }
  @keyframes dialogo-entra { from { opacity: 0; transform: translateY(calc(-50% + 16px)); } to { opacity: 1; transform: translateY(-50%); } }
  .maqueta-boton { --pestana: 22px; }
}

/* ═══ 09-11-2026 · «Regala el Secret»: el bloque de la portada y la página del regalo ═══ */
/* 09-11-2026 (cliente): «el fondo lo quiero rojo con engranajes». Como la trama: la sección
   en granate, dos ruedas de oro detrás que laten con el resto, y el formulario encima. */
.regala { position: relative; overflow: hidden; margin-top: 44px; padding-block: 52px 56px; background: var(--granate); color: var(--papel-hoja); }
.regala__caja { position: relative; z-index: 1; max-width: 640px; }
.regala__rueda { position: absolute; z-index: 0; color: var(--oro-claro); opacity: 0.22; pointer-events: none; }
.regala__rueda--a { width: 280px; height: 280px; right: -120px; top: -100px; }
.regala__rueda--b { width: 160px; height: 160px; left: -60px; bottom: -50px; }
.regala__titulo { margin: 0 0 8px; font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 32px; line-height: 1.1; color: var(--papel-hoja); }
.regala__entradilla { margin: 0 0 22px; max-width: 34ch; color: var(--papel-sobre); font-size: 17px; line-height: 1.5; text-wrap: balance; }
.regala__form { max-width: 560px; }
.regala__nota { margin: 4px 0 0; padding-inline: 18px; color: var(--papel-sobre); font-size: 13.5px; line-height: 1.45; text-wrap: pretty; }
.regala__error { margin: 0 0 14px; padding: 10px 16px; border-radius: 16px; background: var(--papel-hoja); color: var(--ambar-tinta); font-weight: 600; }
/* El botón, en crema sobre el granate (el granate sobre granate no se vería). */
.regala .boton.regala__pagar { background: var(--papel-hoja); color: var(--granate); }
.regala .boton.regala__pagar:hover { background: var(--blanco); }
/* 09-11-2026 (cliente): los campos del regalo, en el crema claro de las tarjetas, no en blanco puro. */
.regala .cajetin { background: var(--papel-hoja); }
.regala .cajetin__entrada:-webkit-autofill { box-shadow: inset 0 0 0 100px var(--papel-hoja); }
/* El desplegable propio: el mismo cajetín de la casa, con la foto en su cuadrado redondeado. */
.elige { position: relative; }
.elige__boton { width: 100%; grid-template-columns: 40px 1fr auto 20px; column-gap: 12px; padding: 0 20px 0 10px; border: 0; font: inherit; color: var(--tinta); text-align: left; cursor: pointer; }
.elige__boton:focus-visible { outline: 0; box-shadow: inset 0 0 0 1.75px var(--granate), 0 0 0 4px color-mix(in oklab, var(--rosa) 75%, transparent), var(--som-plano); }
.elige__foto { display: block; width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
.elige__texto { display: grid; min-width: 0; }
.elige__etiqueta { font-size: 12px; font-weight: 650; color: var(--tinta-suave); }
.elige__valor { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--f-ui); font-size: 17px; font-weight: 600; }
.elige__precio { font-family: var(--f-ui); font-weight: 700; font-size: 16px; color: var(--granate); white-space: nowrap; }
.elige__chev { display: block; width: 20px; height: 20px; color: var(--granate); transform-origin: 50% 50%; transition: transform var(--d-elige) var(--e-fuerte); }
.elige__boton[aria-expanded='true'] .elige__chev { transform: scaleY(-1); }
.elige__lista { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 8px; list-style: none; border-radius: 26px; background: var(--papel-hoja); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--filete), 0 18px 40px -18px color-mix(in oklab, var(--sombra) 45%, transparent); outline: 0; }
.elige__opcion { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; column-gap: 12px; min-height: 56px; padding: 8px 14px 8px 8px; border-radius: 18px; cursor: pointer; transition: background-color var(--d-elige) var(--e-fuerte); }
.elige__opcion--activa { background: var(--rosa-nube); }
.elige__opcion[aria-selected='true'] .elige__nombre { color: var(--granate); }
.elige__nombre { font-family: var(--f-ui); font-weight: 600; font-size: 16px; }
/* «Per a quants peques?»: la etiqueta a la izquierda y el contador de la compra a la derecha. */
.cuantos { grid-template-columns: 1fr auto; padding: 0 8px 0 24px; cursor: default; color: var(--tinta); }
.cuantos__etiqueta { font-size: 16px; font-weight: 600; color: var(--tinta); }
@media (min-width: 960px) {
  .regala { margin-top: 72px; padding-block: 80px 84px; }
  .regala__titulo { font-size: 40px; }
  .regala__rueda--a { width: 440px; height: 440px; right: -150px; top: -160px; }
  .regala__rueda--b { width: 260px; height: 260px; left: -80px; bottom: -90px; }
}
.regalo-pagina { background: var(--papel); }
.regalo { max-width: 600px; display: grid; gap: 20px; padding-block: max(28px, env(safe-area-inset-top)) 48px; }
.regalo__logo { justify-self: center; }
.regalo__logo img { display: block; width: 220px; max-width: 70vw; height: auto; }
.regalo__tarjeta { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 28px 24px; border-radius: 28px; background: var(--papel-hoja); box-shadow: inset 0 0 0 1px var(--filete), var(--som-plano); }
.regalo__rotulo { margin: 0; font-family: var(--f-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oro-tinta); }
.regalo__para { margin: 4px 0 0; font-family: var(--f-serif); font-weight: 500; font-size: 30px; line-height: 1.15; color: var(--tinta); text-wrap: balance; }
.regalo__que { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 20px; color: var(--granate); }
.regalo__mensaje { margin: 8px 0 0; font-family: var(--f-serif); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--tinta); }
.regalo__de { margin: 6px 0 0; color: var(--tinta-suave); font-size: 15px; }
.regalo__valido { margin: 6px 0 0; color: var(--tinta-suave); font-size: 13px; }
.regalo__aviso { margin: 0; text-align: center; color: var(--tinta); font-size: 16px; line-height: 1.5; }
.regalo__acciones { margin: 0; display: flex; justify-content: center; }
.regalo__titulo { margin: 0 0 10px; font-family: var(--f-serif); font-style: italic; font-size: 26px; color: var(--granate); }
.regalo__canje .campos { gap: 12px; }
@media print { .regalo__no-imprime { display: none !important; } .regalo-pagina { background: var(--blanco); } }