/* El Candelario: lo común a todas las páginas de la preventa (portada de scroll, reservar y gracias):
   fuentes, colores, medidas, base del texto y botones. Lo propio de cada página va en su hoja. */


@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fuentes/dm-sans.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 900; font-display: swap; src: url(fuentes/fraunces-900.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Letra de las notas: Kalam negrita (OFL). Gaegu no tenía ñ, tildes ni ¿¡ (comentario de Candela, 10 nov). */
@font-face { font-family: 'Kalam'; font-style: normal; font-weight: 700; font-display: swap; src: url(fuentes/kalam-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --papel: #faf7f0;
  --tinta: #26284c;
  --rosa: #f46dbd;
  --rosa-claro: #facbe4;
  --menta: #88d3ae;
  --amarillo: #e7cc75;
  --azul: #a0bee1;
  --naranja: #e98d49;
  --gato: #9999d5;
  --blanco: #fff;

  /* Móvil: las escenas fijas se apoyan abajo y su contenido empieza 84 px del Figma más abajo, siempre por debajo de la cabecera (80 px). */
  --u: calc(min(100vw, (100svh - 80px) * .5132) / 390);
  --uw: calc(min(100vw, 520px) / 390);
  --W: 390;
  --H: 844;

  --cab-alto: 64px;
  --cab-aire: 12px;
  --lado: 20px;
  --sombra: 4px 4px 0 var(--tinta);

  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mano: "Kalam", "DM Sans", cursive;

  --dur-press: 120ms;
  --dur-leave: 180ms;
  --dur-enter: 320ms;
  --dur-hoja: 420ms;
  --dur-aparece: 640ms;
  --ease-enter: cubic-bezier(.05, .7, .1, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
}
@media (min-width: 900px) {
  :root {
    --u: calc(min(100vw, 160svh) / 1440);
    --uw: calc(min(100vw, 1920px) / 1440);
    --W: 1440;
    --H: 900;
    --cab-alto: 64px;
    --cab-aire: 16px;
    --lado: 96px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; color: var(--tinta); font: 400 17px/1.45 var(--sans); background: var(--papel); }
img, svg { display: block; }
img { max-width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
h1, h2, h3, p, ol, ul, figure, fieldset { margin: 0; padding: 0; border: 0; }
ol, ul { list-style: none; }
h1, h2 { font-family: var(--serif); font-weight: 900; line-height: 1.08; text-wrap: balance; }
p { text-wrap: pretty; }
button, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.saltar { position: fixed; left: 16px; top: -80px; z-index: 60; padding: 12px 16px; border-radius: 99px; background: var(--tinta); color: var(--blanco); }
.saltar:focus { top: 80px; }
.solo-d { display: none !important; }
@media (min-width: 900px) { .solo-d { display: revert !important; } .solo-m { display: none !important; } }


/* Botones: la única pieza con esquinas redondas */
.boton { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 32px; border: 2px solid var(--tinta); border-radius: 99px; background: var(--rosa); box-shadow: var(--sombra); color: var(--tinta); font-weight: 600; font-size: 18px; text-decoration: none; cursor: pointer; transition: transform var(--dur-press) var(--ease-out); }
.boton:active { transform: scale(.97); }
.boton-reservar { gap: 12px; white-space: nowrap; }
.precios { display: inline-flex; align-items: baseline; gap: 6px; }
.precios b { font-weight: 600; }
.precios s { font-weight: 400; font-size: .85em; }
/* Agotado: ocupa el sitio del botón, pero no se puede pulsar */
.boton.agotado { background: var(--blanco); box-shadow: none; cursor: default; }
.boton.agotado:active { transform: none; }

/* Aviso de cookies (lo inserta consent.js) */
.cookie-banner { position: fixed; z-index: 90; left: 50%; bottom: 16px; width: min(560px, calc(100% - 24px)); padding: 16px; border: 2px solid var(--tinta); background: var(--blanco); box-shadow: var(--sombra); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity var(--dur-leave) linear, transform var(--dur-enter) var(--ease-enter); }
.cookie-banner.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.cookie-banner__text { margin: 0 0 12px; font-size: 15px; line-height: 1.4; }
.cookie-banner__text a { color: inherit; font-weight: 600; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-banner__button { min-height: 44px; padding: 0 20px; border: 2px solid var(--tinta); border-radius: 99px; background: var(--rosa); font-weight: 600; cursor: pointer; }
.cookie-banner__button.ghost { background: transparent; }
@media (hover: hover) and (pointer: fine) { .cookie-banner__button.ghost:hover { background: var(--rosa-claro); } }

/* Paso entre la portada y las páginas de reservar y gracias: un fundido corto con un pequeño desplazamiento,
   en los navegadores que lo permiten (los demás cambian de página sin más). Con movimiento reducido no hay transición. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-sale var(--dur-leave) var(--ease-in) both; }
  ::view-transition-new(root) { animation: vt-entra var(--dur-enter) var(--ease-enter) both; }
}
@keyframes vt-sale { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(24px); } }