/* ============================================================
   Fran Dibuja Cosas — Hoja de estilos
   Paleta: burdeos + dorado brillante
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Burdeos */
  --burdeos-950: #100309;
  --burdeos-900: #1A0410;
  --burdeos-850: #2A0714;
  --burdeos-800: #40091A;
  --burdeos-700: #630F26;
  --burdeos-600: #8E1734;
  --burdeos-500: #B81F3C;

  /* Rojo de marca (del logotipo) */
  --rojo: #E4211B;

  /* Dorado luminoso */
  --oro-200: #FFF6D8;
  --oro-300: #FFE8A3;
  --oro-400: #FFD25E;
  --oro-500: #F9BE33;
  --oro-600: #DE9E1C;
  --oro-glow: rgba(255, 210, 94, .45);

  /* Dorado con destello. Se anima moviendo background-position con la
     animación `tickerBg` sobre un background-size de 200%. Lo usan la
     marquesina y todo lo marcado como freebie. */
  --grad-oro-brillo: linear-gradient(100deg,
    var(--oro-600) 0%, var(--oro-400) 30%, var(--oro-200) 50%,
    var(--oro-400) 70%, var(--oro-600) 100%);

  /* Neutros */
  --crema: #FFF8EC;
  --crema-2: #F4EADA;
  --hueso: #FFFCF6;
  --gris: #6E6259;

  /* Semánticos */
  --bg-dark: var(--burdeos-950);
  --bg-light: var(--hueso);
  --text-on-dark: #F6EDE3;
  --text-on-dark-soft: #C9B9AE;
  --text-on-light: #2C1218;
  --text-on-light-soft: #6D5A57;

  --radius: 14px;
  --radius-lg: 26px;
  --pill: 999px;
  --shadow-lg: 0 34px 70px -24px rgba(0, 0, 0, .75);
  --shadow-md: 0 18px 40px -18px rgba(0, 0, 0, .55);
  --glow-gold: 0 0 0 1px rgba(255, 210, 94, .28), 0 12px 40px -10px var(--oro-glow);
  --maxw: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  /* Curva suave para hovers: arranca despacio y frena muy poco a poco */
  --ease-soft: cubic-bezier(.25, .8, .35, 1);
  --t-fast: .38s;
  --t-med: .55s;
  --ticker-h: 44px;

  --font-display: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* ---------- Protección de las ilustraciones ----------
   Acompaña a lo que hace site.js: quita el arrastrar-y-soltar y el menú de
   «Guardar imagen» del pulsado largo en móvil. Va SOLO sobre las imágenes:
   poner user-select: none en toda la página impediría copiar la dirección de
   un evento o el correo de contacto, que es justo lo que queremos que la
   gente pueda hacer.

   Ojo: esto no impide las capturas de pantalla. No hay manera. Ver la nota
   larga en site.js. */
img, canvas, picture, svg {
  -webkit-user-drag: none;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ticker-h) + 88px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-on-dark);
  background: var(--bg-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: .01em; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
/* Necesario: varios elementos ocultos con [hidden] declaran display propio */
[hidden] { display: none !important; }

.container { width: min(100% - 3rem, var(--maxw)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--oro-400); color: var(--burdeos-900);
  padding: .7rem 1.2rem; border-radius: var(--pill); font-weight: 600;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--oro-400); outline-offset: 3px; }

/* ---------- 3. TIPOGRAFÍA COMPARTIDA ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display);
  font-size: .74rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--oro-600); margin: 0 0 .9rem;
}
.eyebrow::before {
  content: ''; width: 22px; height: 1px; background: currentColor; opacity: .7;
}
.eyebrow--light { color: var(--oro-300); }

.section__title { font-size: clamp(2.1rem, 4.6vw, 3.3rem); letter-spacing: -.01em; }
.subsection__title { font-size: clamp(1.4rem, 2.5vw, 1.95rem); color: var(--text-on-dark); }
.subsection__title--center { text-align: center; }

/* Texto con brillo dorado animado */
.shine {
  background: linear-gradient(100deg,
    var(--oro-600) 0%, var(--oro-400) 22%, var(--oro-200) 38%,
    var(--oro-400) 54%, var(--oro-500) 78%, var(--oro-600) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 6s linear infinite;
  filter: drop-shadow(0 2px 18px rgba(255, 210, 94, .3));
}
@keyframes shine { to { background-position: -250% 0; } }

.rule { display: flex; align-items: center; gap: .55rem; margin: 1.1rem 0 1.6rem; }
.rule::before {
  content: ''; flex: 0 0 auto; width: 8px; height: 8px;
  background: var(--oro-500); transform: rotate(45deg);
  box-shadow: 0 0 12px var(--oro-glow);
}
.rule span {
  display: block; width: 84px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--oro-500), transparent);
}
.rule--center { justify-content: center; }
.rule--center::before { display: none; }
.rule--center span {
  position: relative; width: 170px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro-500) 45%, var(--oro-500) 55%, transparent);
}
.rule--center span::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: var(--oro-400); transform: rotate(45deg);
  box-shadow: 0 0 14px var(--oro-glow);
}

/* ---------- 4. BOTONES ---------- */
.btn {
  --btn-bg: transparent;
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  /* justify-content centra la línea, pero no el texto dentro de ella: sin esto,
     un <a> hereda text-align:left y se descuadra en cuanto el texto ocupa
     dos líneas (los <button> no se notaba porque el navegador ya los centra). */
  text-align: center;
  padding: .95rem 1.9rem;
  font-family: var(--font-display);
  font-size: .84rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--pill);
  background: var(--btn-bg);
  transition: transform var(--t-med) var(--ease-soft), box-shadow var(--t-med) var(--ease-soft),
              color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft),
              background var(--t-fast) var(--ease-soft);
}
.btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .3) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 1.1s var(--ease-soft);
}
.btn:hover::after { transform: translateX(130%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .12s; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn--lg { padding: 1.1rem 2.4rem; font-size: .92rem; }
.btn--block { width: 100%; }

.btn--primary {
  --btn-bg: linear-gradient(135deg, var(--burdeos-600), var(--burdeos-700) 60%, var(--burdeos-800));
  color: var(--crema);
  border-color: rgba(255, 210, 94, .5);
  box-shadow: 0 12px 30px -14px rgba(184, 31, 60, .9);
}
.btn--primary:hover {
  border-color: var(--oro-400);
  box-shadow: 0 18px 40px -14px rgba(184, 31, 60, 1), 0 0 22px -4px var(--oro-glow);
}

.btn--gold {
  --btn-bg: linear-gradient(135deg, var(--oro-300), var(--oro-400) 45%, var(--oro-500));
  color: #2A0714;
  box-shadow: 0 12px 34px -12px var(--oro-glow), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.btn--gold:hover { box-shadow: 0 18px 46px -12px rgba(255, 210, 94, .7), inset 0 1px 0 rgba(255, 255, 255, .8); }

.btn--ghost { color: var(--text-on-dark); border-color: rgba(246, 237, 227, .3); backdrop-filter: blur(4px); }
.btn--ghost:hover { border-color: var(--oro-400); color: var(--oro-300); box-shadow: 0 0 24px -8px var(--oro-glow); }

.btn--outline { color: var(--burdeos-700); border-color: rgba(99, 15, 38, .35); }
.btn--outline:hover { background: var(--burdeos-700); color: var(--crema); border-color: var(--burdeos-700); }

.icon-btn {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid rgba(255, 210, 94, .3); border-radius: 50%;
  background: rgba(255, 255, 255, .04); color: var(--oro-300);
  transition: background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft),
              color var(--t-fast) var(--ease-soft), box-shadow var(--t-med) var(--ease-soft),
              transform var(--t-med) var(--ease-soft);
}
.icon-btn:hover {
  background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
  color: var(--burdeos-900); border-color: transparent;
  box-shadow: 0 0 26px -6px var(--oro-glow); transform: scale(1.04);
}
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.chip {
  padding: .55rem 1.25rem; border-radius: var(--pill);
  border: 1px solid rgba(99, 15, 38, .22); background: rgba(255, 255, 255, .5);
  color: var(--text-on-light-soft); font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600;
  transition: all var(--t-fast) var(--ease-soft);
}
.chip:hover { border-color: var(--burdeos-600); color: var(--burdeos-700); transform: translateY(-1px); }
.chip.is-active {
  background: linear-gradient(135deg, var(--burdeos-600), var(--burdeos-800));
  border-color: transparent; color: var(--oro-300);
  box-shadow: 0 10px 24px -12px rgba(142, 23, 52, .9);
}

/* Filtro de freebies: dorado con destello. Los demás chips activos son burdeos,
   así que el oro lo separa del resto sin salirse de la paleta. Sobre el crema
   el dorado no contrasta como texto, por eso en reposo el chip lleva el oro en
   el borde y en un fondo tenue, y guarda el degradado para cuando está activo. */
.chip--free {
  border-color: rgba(222, 158, 28, .55);
  background: rgba(255, 210, 94, .18);
  color: var(--burdeos-700);
}
.chip--free:hover {
  border-color: var(--oro-600); color: var(--burdeos-800);
  background: rgba(255, 210, 94, .3);
  box-shadow: 0 8px 20px -12px var(--oro-glow);
}
.chip--free.is-active {
  background: var(--grad-oro-brillo);
  background-size: 200% 100%;
  animation: tickerBg 6s linear infinite;
  border-color: transparent; color: var(--burdeos-850);
  box-shadow: 0 10px 26px -10px var(--oro-glow);
}

/* Chip de «Tienda próximamente». No es un filtro: es un aviso con forma de
   chip, y va deshabilitado. Por eso no se levanta al pasar por encima ni
   cambia el cursor: si se comportara como los demás, invitaría a pulsarlo y
   no pasaría nada. Línea discontinua para que se lea como un hueco por
   rellenar y no como una opción apagada. */
.chip--pronto {
  border-style: dashed;
  border-color: rgba(99, 15, 38, .3);
  background: transparent;
  color: var(--text-on-light-soft);
  cursor: default;
}
.chip--pronto:hover { transform: none; border-color: rgba(99, 15, 38, .3); color: var(--text-on-light-soft); }

/* Trampa para robots del formulario de contacto. Se saca de la pantalla en
   vez de usar `display: none`: hay robots que directamente saltan lo que está
   oculto, y entonces la trampa no atrapa a nadie. Para una persona es
   invisible igual. */
.trampa {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- 5. BARRA ANUNCIO (marquesina) ---------- */
.ticker {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: var(--ticker-h); display: flex; align-items: center; overflow: hidden;
  background: var(--grad-oro-brillo);
  background-size: 200% 100%;
  animation: tickerBg 8s linear infinite;
  box-shadow: 0 2px 24px -6px var(--oro-glow);
}
@keyframes tickerBg { to { background-position: -200% 0; } }
/* La duración de aquí es solo el valor de partida por si el JS no llega a
   correr: site.js la recalcula según lo largo que sea el anuncio, para que la
   velocidad de lectura no dependa de cuánto texto haya. */
.ticker__track { display: flex; width: max-content; animation: marquee 55s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.ticker__item {
  display: inline-flex; align-items: center; gap: 1.2rem;
  padding-right: 1.2rem; white-space: nowrap;
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: #2A0714;
}
.ticker__item::after {
  content: ''; width: 7px; height: 7px; background: #2A0714;
  transform: rotate(45deg); opacity: .55;
}

/* ---------- 6. HEADER ---------- */
.site-header {
  position: fixed; top: var(--ticker-h); left: 0; right: 0; z-index: 100;
  padding: .5rem 0;
  transition: background .35s, box-shadow .35s, padding .35s;
  background: linear-gradient(180deg, rgba(16, 3, 9, .9), rgba(16, 3, 9, 0));
}
.site-header.is-stuck {
  background: rgba(16, 3, 9, .82);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 210, 94, .18), 0 16px 34px -22px rgba(0, 0, 0, .95);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.brand { display: flex; align-items: center; gap: .85rem; padding: .3rem 0; }
.brand__logo {
  width: 56px; height: 56px;
  filter: drop-shadow(0 0 14px rgba(228, 33, 27, .45)) drop-shadow(0 4px 10px rgba(0, 0, 0, .6));
  /* Solo el filtro: el logo NO se mueve ni se gira al pasar por encima. */
  transition: filter var(--t-med) var(--ease-soft);
}
/* Al pasar el ratón se enciende una luz dorada detrás. Son dos halos, uno
   cerrado y otro abierto, para que parezca luz y no un borde. */
.brand:hover .brand__logo,
.brand:focus-visible .brand__logo {
  filter: drop-shadow(0 0 10px rgba(255, 210, 94, .85))
          drop-shadow(0 0 28px rgba(249, 190, 51, .6))
          drop-shadow(0 4px 12px rgba(0, 0, 0, .6));
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  letter-spacing: .09em; color: var(--crema); text-transform: uppercase;
}
.brand__tag { font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--oro-500); }

.nav__list { display: flex; gap: .2rem; }
.nav__link {
  position: relative; display: block; padding: .7rem 1.1rem; border-radius: var(--pill);
  font-family: var(--font-display); font-size: .8rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-dark-soft);
  transition: color var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease-soft);
}
.nav__link::after {
  content: ''; position: absolute; left: 50%; bottom: .42rem;
  width: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--oro-500), var(--oro-300));
  box-shadow: 0 0 10px var(--oro-glow);
  transform: translateX(-50%); transition: width var(--t-med) var(--ease-soft);
}
.nav__link:hover, .nav__link.is-active { color: var(--oro-300); }
.nav__link:hover::after, .nav__link.is-active::after { width: calc(100% - 2.2rem); }

.nav-toggle {
  display: none; width: 46px; height: 46px; border: 1px solid rgba(255, 210, 94, .3);
  border-radius: var(--radius); background: rgba(255, 255, 255, .04); padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle__bar { display: block; width: 20px; height: 1.5px; background: var(--oro-300); transition: transform .3s, opacity .2s; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- 7. HERO ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: calc(var(--ticker-h) + 7rem) 0 5rem; overflow: hidden;
  background:
    radial-gradient(1200px 680px at 76% 14%, rgba(184, 31, 60, .5), transparent 62%),
    radial-gradient(780px 560px at 6% 88%, rgba(249, 190, 51, .2), transparent 62%),
    radial-gradient(600px 400px at 50% 100%, rgba(228, 33, 27, .18), transparent 65%),
    linear-gradient(160deg, var(--burdeos-950) 0%, #2B0714 55%, var(--burdeos-900) 100%);
}
.hero::before {
  content: ''; position: absolute; inset: 0; opacity: .4; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 210, 94, .06) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg, rgba(255, 210, 94, .06) 0 1px, transparent 1px 74px);
  mask-image: radial-gradient(circle at 50% 40%, #000 18%, transparent 76%);
}
.hero__glow {
  position: absolute; width: 660px; height: 660px; right: 4%; top: 10%;
  background: radial-gradient(circle, rgba(255, 210, 94, .22), transparent 66%);
  filter: blur(24px); animation: pulse 9s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.14); opacity: 1; } }

.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 4rem; align-items: center;
}
.hero__title {
  font-size: clamp(2.7rem, 6.2vw, 4.8rem); line-height: 1.03; margin-bottom: 1.4rem;
  color: var(--crema); letter-spacing: -.015em;
  text-shadow: 0 10px 34px rgba(0, 0, 0, .55);
}
.hero__title em { font-style: normal; }
.hero__lead { font-size: 1.12rem; color: var(--text-on-dark-soft); max-width: 46ch; margin-bottom: 2.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }

.hero__stats { display: flex; gap: 2.8rem; }
.stat dt { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-on-dark-soft); }
.stat dd {
  margin: .2rem 0 0; font-family: var(--font-display); font-size: 2.1rem;
  font-weight: 700; color: var(--oro-400);
  text-shadow: 0 0 26px rgba(255, 210, 94, .35);
}

.hero__art { margin: 0; position: relative; }
/* La ilustración va SUELTA, sin marco: es un recorte sin fondo, y meterlo en
   una caja con borde dorado deja un rectángulo vacío alrededor del bicho.
   Por eso la sombra la pone `drop-shadow` y no `box-shadow`: la primera sigue
   la silueta —alas, cola, cuernos— y la segunda dibujaría el rectángulo que
   justamente sobra.
   Y sin hover: la ilustración se queda quieta. */
.hero__art img {
  /* Se sale un poco de su columna hacia los dos lados. El `max-width: none`
     no es opcional: el reset de la §2 topa toda imagen a 100 % y sin quitarlo
     el ancho de aquí no hace nada. El margen negativo es la mitad de lo que
     crece, para que siga centrada. */
  width: 118%; max-width: none; margin-inline: -9%;
  filter:
    drop-shadow(0 26px 34px rgba(0, 0, 0, .55))
    drop-shadow(0 0 46px rgba(255, 210, 94, .22));
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1px solid rgba(255, 210, 94, .45); border-radius: 14px;
  display: grid; place-items: start center; padding-top: 8px; z-index: 2;
  box-shadow: 0 0 20px -6px var(--oro-glow);
}
.scroll-cue span { display: block; width: 3px; height: 8px; border-radius: 2px; background: var(--oro-400); animation: cue 1.8s infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- 8. SECCIONES GENERALES ---------- */
.section { padding: clamp(4.5rem, 9vw, 8.5rem) 0; position: relative; }

.section--about, .section--shop { background: var(--bg-light); color: var(--text-on-light); }
.section--about .section__title, .section--shop .section__title { color: var(--burdeos-800); }
.section--about p, .section--shop p { color: var(--text-on-light-soft); }
.section--shop { background: linear-gradient(180deg, var(--crema-2), var(--hueso)); }
.section--about::before, .section--shop::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(99, 15, 38, .06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.section--about > .container, .section--shop > .container { position: relative; }

.section--events, .section--contact {
  background:
    radial-gradient(1000px 560px at 12% 0%, rgba(99, 15, 38, .55), transparent 62%),
    radial-gradient(700px 420px at 92% 88%, rgba(249, 190, 51, .12), transparent 62%),
    linear-gradient(180deg, var(--burdeos-950), #240612);
}
.section--contact { border-top: 1px solid rgba(255, 210, 94, .12); }

.section__head { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: end; margin-bottom: 3rem; }
.section__head--center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.section__intro { font-size: 1.02rem; max-width: 52ch; }
.section__intro--center { margin-inline: auto; text-align: center; color: var(--text-on-dark-soft); }
.section__cta { margin-top: 3.4rem; text-align: center; }
.section__note { margin-top: .9rem; font-size: .84rem; letter-spacing: .08em; opacity: .7; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-revealed { opacity: 1; transform: none; }

/* ---------- 9. SOBRE MÍ ---------- */
.about { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.about__media { margin: 0; position: relative; }
.about__frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(99, 15, 38, .2);
  box-shadow: var(--shadow-md), 0 0 0 10px rgba(249, 190, 51, .08);
}
.about__frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about__frame::before {
  content: ''; position: absolute; inset: 12px; border: 1px solid rgba(255, 210, 94, .55);
  border-radius: 16px; z-index: 2; pointer-events: none;
}
.about__badge {
  position: absolute; right: -12px; bottom: 26px; z-index: 3;
  display: inline-flex; align-items: center; white-space: nowrap;
  background: linear-gradient(135deg, #4C0B1D, #240711);
  border: 1px solid rgba(255, 210, 94, .55);
  color: var(--oro-300);
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  padding: .85rem 1.5rem; border-radius: var(--pill);
  box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .85), 0 0 26px -10px var(--oro-glow);
}
.about__body .section__title { margin-bottom: 0; }
.about__lead {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.3vw, 1.55rem);
  font-weight: 600; line-height: 1.2;
  color: var(--burdeos-600);
  margin: .55rem 0 0;
}
.section--about .about__lead { color: var(--burdeos-600); }
.about__facts {
  display: flex; flex-wrap: wrap; gap: 2rem; margin: 2rem 0 2.2rem;
  padding-top: 1.6rem; border-top: 1px solid rgba(99, 15, 38, .14);
}
.about__facts li { display: flex; flex-direction: column; }
.about__facts strong {
  font-family: var(--font-display); font-size: .7rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--oro-600);
}
.about__facts span { color: var(--text-on-light); font-weight: 500; }

/* ---------- 10. PRODUCTOS ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.4rem; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }

/* Los destacados de la home reutilizan las tarjetas de la tienda,
   pero sobre fondo claro. */
/* Los destacados de la home van de 3 en fila; la tienda entera, de 4.
   ⚠️ Este selector tiene MÁS especificidad que los `.shop-grid` de los media
   queries del final, así que si se cambia el número aquí hay que repasar que
   allí siga apareciendo `.section--shop .shop-grid` junto a `.shop-grid`. Sin
   eso, la portada se queda clavada en 3 columnas también en el móvil: la
   tarjeta bajaba a 102 px de ancho y el botón de descarga se salía del borde. */
.section--shop .shop-grid { grid-template-columns: repeat(3, 1fr); }
.section--shop .card { background: var(--hueso); border-color: rgba(99, 15, 38, .12); }
.section--shop .card:hover { box-shadow: 0 26px 50px -24px rgba(64, 9, 26, .45), 0 0 30px -16px var(--oro-glow); }
.section--shop .card__media { background: var(--crema-2); }
.section--shop .card__cat { color: var(--oro-600); }
.section--shop .card__name { color: var(--burdeos-800); }
.section--shop .card__short { color: var(--text-on-light-soft); }
.section--shop .card__price { color: var(--burdeos-700); }
/* Aquí el fondo es crema: el dorado no contrastaría como texto, así que el
   «Gratis» de la tarjeta lo destaca la etiqueta dorada, no el precio. */
.section--shop .card__price.is-free { color: var(--burdeos-600); }
.section--shop .card__add {
  background: transparent; border-color: rgba(99, 15, 38, .28); color: var(--burdeos-700);
}
.section--shop .card__add:hover {
  background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
  color: #2A0714; border-color: transparent;
}
.section--shop .card__add[disabled]:hover { background: transparent; color: var(--burdeos-700); }
.section--shop .card__soldout { background: rgba(255, 252, 246, .55); }
.section--shop .card__soldout span { background: var(--burdeos-800); color: var(--crema); border-color: rgba(255, 210, 94, .5); }
.section--shop .card__qty { border-color: rgba(99, 15, 38, .3); background: rgba(99, 15, 38, .06); }
.section--shop .card__qty button { color: var(--burdeos-700); }
.section--shop .card__qty button:hover:not([disabled]) { background: var(--burdeos-700); color: var(--oro-300); }
.section--shop .card__qty-n { color: var(--burdeos-800); }
.section--shop .card__note { color: var(--oro-600); }
.section--shop .card__note.is-max { color: var(--text-on-light-soft); }
.section--shop .flag--low { background: var(--burdeos-800); color: var(--oro-300); }
.section--shop .flag--digital { background: rgba(64, 9, 26, .9); color: var(--crema); border-color: rgba(255, 255, 255, .2); }
/* ---------- 11. ENCARGOS ---------- */
.commissions {
  position: relative; overflow: hidden;
  padding: clamp(4rem, 8vw, 7rem) 0;
  background:
    radial-gradient(760px 440px at 84% 28%, rgba(249, 190, 51, .3), transparent 62%),
    linear-gradient(120deg, var(--burdeos-800), var(--burdeos-700) 45%, var(--burdeos-850));
  border-block: 1px solid rgba(255, 210, 94, .3);
}
.commissions::before {
  content: ''; position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, rgba(255, 210, 94, .4) 0 1px, transparent 1px 16px);
}
.commissions__inner {
  position: relative; display: grid; grid-template-columns: 1.2fr .8fr;
  gap: 3rem; align-items: center;
}
.commissions__title { font-size: clamp(2rem, 4.2vw, 3rem); color: var(--crema); margin-bottom: 1rem; }
.commissions__text p { color: rgba(246, 237, 227, .84); max-width: 52ch; }
.commissions__steps { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1.8rem 0 2.2rem; }
.commissions__steps li {
  display: flex; align-items: center; gap: .65rem;
  font-size: .9rem; letter-spacing: .04em; color: rgba(246, 237, 227, .92);
}
.commissions__steps span {
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  color: #2A0714; background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  box-shadow: 0 0 20px -6px var(--oro-glow);
}
.commissions__deco { justify-self: center; position: relative; }

/* ---- Cofre 3D ----
   El lienzo va sin fondo: el degradado de la sección se ve por detrás.
   El balanceo lo hace WebGL, no CSS, para que no se peleen. */
.cofre {
  display: block; width: min(420px, 68vw); height: min(420px, 68vw);
  cursor: pointer; touch-action: manipulation;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .55));
  transition: filter var(--t-med) var(--ease-soft);
}
.cofre:hover { filter: drop-shadow(0 26px 46px rgba(0, 0, 0, .6)) drop-shadow(0 0 34px rgba(255, 210, 94, .28)); }
.cofre:focus-visible { outline: 2px solid var(--oro-400); outline-offset: 8px; border-radius: var(--radius); }

/* El texto de debajo del cofre cambia a «¡El cofre es un mímico!» y vuelve.
   No se reescribe el nodo: entra un <span> nuevo por abajo mientras el viejo
   sale por arriba, los dos difuminándose. Por eso el <p> es la pista de
   aterrizaje (position: relative) y los <span> son los que se mueven.
   `grid` centra los dos en la misma celda sin sacarlos del flujo, así que el
   alto de la caja lo marca siempre el texto más largo y nada da saltos. */
.cofre__pista {
  margin: .4rem 0 0; text-align: center;
  font-family: var(--font-display); font-size: .7rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--oro-500);
  opacity: .75; transition: opacity var(--t-med) var(--ease-soft), color .45s var(--ease-soft);
  display: grid; position: relative;
}
.cofre__pista > span {
  grid-area: 1 / 1;
  transition: opacity .42s var(--ease-soft), transform .42s var(--ease-soft), filter .42s var(--ease-soft);
}
/* Estado de partida del que entra y de llegada del que sale */
.cofre__pista > span.is-entrando {
  opacity: 0; transform: translateY(.7em) scale(.94); filter: blur(4px);
}
.cofre__pista > span.is-saliendo {
  opacity: 0; transform: translateY(-.7em) scale(.94); filter: blur(4px);
  pointer-events: none;
}
/* Con el bicho fuera, el rótulo se enciende y respira */
.cofre__pista.es-mimico {
  color: #E28BFF; opacity: 1;
  text-shadow: 0 0 14px rgba(198, 88, 255, .55);
  animation: pista-mimico 1.5s var(--ease-soft) infinite;
}
@keyframes pista-mimico {
  0%, 100% { opacity: 1; }
  50% { opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
  .cofre__pista > span { transition-duration: .01ms; }
  .cofre__pista.es-mimico { animation: none; }
}
.commissions__deco:hover .cofre__pista { opacity: 1; }
.cofre[hidden] + .cofre__pista { display: none; }

.commissions__deco img {
  border-radius: var(--radius-lg);
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .55));
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

/* ---------- 12. PRÓXIMOS EVENTOS ---------- */
.upcoming { margin-bottom: clamp(4rem, 8vw, 7rem); }
.upcoming__header {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-bottom: 1.1rem; margin-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 210, 94, .22);
}
.upcoming__nav { display: flex; align-items: center; gap: .8rem; }
.upcoming__counter { font-family: var(--font-display); font-size: .9rem; letter-spacing: .14em; color: var(--oro-400); min-width: 56px; text-align: center; }

.event-card {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(255, 210, 94, .26); border-radius: var(--radius-lg);
  overflow: hidden; background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-lg), 0 0 70px -34px var(--oro-glow);
}
.event-card.is-in { animation: cardIn .5s var(--ease); }
@keyframes cardIn { from { opacity: .25; transform: translateY(12px); } }

.event-card__map { position: relative; min-height: 440px; background: #EFE1C2; }
.map-frame { position: absolute; inset: 0; background: #EFE1C2; }
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.3) contrast(1.05) saturate(.9); }

/* Pátina de mapa antiguo. Suave a propósito: si se carga la mano,
   los nombres de las calles dejan de leerse. */
.map-frame::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(96, 62, 26, .22) 100%),
    linear-gradient(160deg, rgba(255, 240, 205, .16), transparent 45%);
  box-shadow: inset 0 0 70px rgba(88, 55, 20, .28);
  mix-blend-mode: multiply;
}
/* Corte con fundido al saltar entre ciudades lejanas */
.map-frame .maplibregl-canvas-container,
.map-frame .maplibregl-marker { transition: opacity .3s var(--ease-soft); }
.map-frame.is-flying .maplibregl-canvas-container,
.map-frame.is-flying .maplibregl-marker { opacity: 0; }

/* Mientras el mapa no ha cargado, pergamino en vez de un hueco oscuro */
.map-frame:not(.is-ready)::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(45deg,
    rgba(168, 122, 36, .05) 0 12px, transparent 12px 24px);
}

/* Chincheta del evento */
.map-pin { width: 34px; height: 46px; cursor: default; animation: pinDrop .5s var(--ease-soft); }
.map-pin svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 5px 6px rgba(64, 36, 12, .45)); }
.map-pin__cuerpo { fill: var(--burdeos-700); stroke: var(--oro-400); stroke-width: 2.5; }
.map-pin__ojo { fill: var(--oro-400); }
@keyframes pinDrop { from { opacity: 0; transform: translateY(-14px); } }

/* Controles de MapLibre con la piel de la web */
.maplibregl-ctrl-group {
  background: rgba(248, 240, 221, .94) !important;
  border: 1px solid rgba(168, 122, 36, .5) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 6px 16px -8px rgba(64, 36, 12, .6) !important;
}
.maplibregl-ctrl-group button + button { border-top: 1px solid rgba(168, 122, 36, .3) !important; }
.maplibregl-ctrl-group button { width: 32px !important; height: 32px !important; }
.maplibregl-ctrl-group button span { filter: sepia(1) saturate(2.4) hue-rotate(-12deg) brightness(.5); }
.maplibregl-ctrl-group button:hover { background: rgba(168, 122, 36, .18) !important; }
.maplibregl-ctrl-attrib {
  background: rgba(248, 240, 221, .82) !important;
  border-radius: var(--pill) 0 0 0 !important;
  font-size: .66rem !important;
}
.maplibregl-ctrl-attrib a { color: #6B4A31 !important; }
.maplibregl-ctrl-attrib-button { filter: sepia(1) saturate(2) brightness(.6); }

.map-link {
  position: absolute; left: 1.1rem; bottom: 1.1rem; z-index: 5;
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(16, 3, 9, .88); border: 1px solid rgba(255, 210, 94, .4);
  color: var(--oro-300); padding: .62rem 1.1rem; border-radius: var(--pill);
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-display);
  backdrop-filter: blur(6px);
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft),
              box-shadow var(--t-med) var(--ease-soft);
}
.map-link:hover {
  background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
  color: #2A0714; box-shadow: 0 0 26px -6px var(--oro-glow);
}
.map-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.event-card__body { padding: clamp(1.8rem, 3vw, 3rem); }
.event-card__pill {
  display: inline-block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: #2A0714; background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
  padding: .34rem .95rem; border-radius: var(--pill); margin-bottom: 1.1rem; font-weight: 700;
  box-shadow: 0 0 22px -8px var(--oro-glow);
}
.event-card__title { font-size: clamp(1.6rem, 2.9vw, 2.25rem); color: var(--crema); margin-bottom: .4rem; }
.event-card__place { font-size: .9rem; color: var(--text-on-dark-soft); margin-bottom: 1.6rem; }

.event-meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem 1rem;
  padding: 1.3rem 0; margin-bottom: 1.4rem;
  border-block: 1px solid rgba(255, 210, 94, .18);
}
.event-meta dt { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-on-dark-soft); margin-bottom: .3rem; }
.event-meta dd { margin: 0; font-family: var(--font-display); font-size: .95rem; line-height: 1.35; color: var(--crema); }
.event-meta .sched {
  display: block; font-family: var(--font-body); font-size: .88rem;
  line-height: 1.5; color: var(--text-on-dark); white-space: nowrap;
}
.event-meta .sched b {
  display: inline-block; min-width: 4.6em; font-weight: 600;
  color: var(--oro-400); font-size: .78rem; letter-spacing: .04em;
}
.event-meta__item--highlight dd {
  color: var(--oro-400); font-size: 1.2rem; font-weight: 700;
  text-shadow: 0 0 20px rgba(255, 210, 94, .4);
}

.event-card__desc { color: var(--text-on-dark-soft); font-size: .95rem; margin-bottom: 1.8rem; }
.event-card__actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

.save-date { position: relative; }
/* Se abre HACIA ARRIBA. El botón está al final de la tarjeta y la tarjeta lleva
   overflow: hidden, así que hacia abajo el menú quedaba cortado (se salía 116 px).
   Hacia arriba cabe entero dentro de la tarjeta. */
.save-date__menu {
  position: absolute; left: 0; bottom: calc(100% + .6rem); z-index: 10; min-width: 220px;
  /* Opaco del todo: antes era rgba(...,.97) con desenfoque de fondo y, sobre la
     tarjeta (que ya lleva su propio backdrop-filter), se transparentaba y se
     leía el texto de debajo. */
  background: var(--burdeos-900); border: 1px solid rgba(255, 210, 94, .35);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-md), 0 0 30px -12px var(--oro-glow);
  animation: menuIn .22s var(--ease);
}
@keyframes menuIn { from { opacity: 0; transform: translateY(8px); } }
.save-date__menu button {
  display: block; width: 100%; text-align: left; padding: .8rem 1.15rem;
  background: none; border: 0; font-size: .9rem; color: var(--text-on-dark);
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft),
              padding-left var(--t-fast) var(--ease-soft);
}
.save-date__menu button:hover { background: var(--burdeos-700); color: var(--oro-300); padding-left: 1.35rem; }
.save-date__menu li + li { border-top: 1px solid rgba(255, 210, 94, .14); }

.upcoming__dots { display: flex; justify-content: center; gap: .6rem; margin-top: 1.8rem; }
.upcoming__dots button {
  width: 34px; height: 4px; border: 0; padding: 0; border-radius: 2px;
  background: rgba(255, 210, 94, .22);
  transition: background var(--t-med) var(--ease-soft), width var(--t-med) var(--ease-soft),
              box-shadow var(--t-med) var(--ease-soft);
}
.upcoming__dots button:hover { background: rgba(255, 210, 94, .5); }
.upcoming__dots button.is-active {
  background: linear-gradient(90deg, var(--oro-400), var(--oro-200));
  width: 56px; box-shadow: 0 0 16px var(--oro-glow);
}

/* ---------- 13. TIMELINE ---------- */
.timeline { padding-top: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid rgba(255, 210, 94, .16); }
.timeline .section__intro--center { margin-bottom: 2.8rem; }

.timeline__detail {
  display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; margin-bottom: 3rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 210, 94, .22); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  backdrop-filter: blur(6px);
}
.timeline__detail.is-in .timeline__media { animation: detailIn .85s var(--ease-soft) both; }
.timeline__detail.is-in .timeline__year { animation: yearIn .8s var(--ease-soft) both; }
.timeline__detail.is-in .timeline__place { animation: detailIn .7s var(--ease-soft) .5s both; }
@keyframes detailIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes yearIn {
  from { opacity: 0; transform: translateY(24px) scale(.94); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Palabras que asoman desde detrás de una máscara */
.rw {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .16em; margin-bottom: -.16em;
}
.rw > span {
  display: inline-block;
  transform: translateY(115%);
  animation: wordUp .75s var(--ease-soft) both;
}
@keyframes wordUp {
  from { transform: translateY(115%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.timeline__media {
  margin: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(255, 210, 94, .3);
  box-shadow: 0 0 40px -20px var(--oro-glow);
}
.timeline__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.timeline__year {
  display: block; font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 700; line-height: 1; margin-bottom: .4rem;
}
.timeline__title { font-size: clamp(1.35rem, 2.7vw, 2rem); color: var(--crema); margin-bottom: .25rem; }
.timeline__place { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oro-500); margin-bottom: 1rem; }
.timeline__text #tl-desc { color: var(--text-on-dark-soft); margin: 0; }

.timeline__links {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: 1.3rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 210, 94, .14);
}
.timeline__links-label {
  font-family: var(--font-display); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--oro-600); margin-right: .2rem;
}
.timeline__links a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .85rem; border-radius: var(--pill);
  border: 1px solid rgba(255, 210, 94, .28);
  background: rgba(255, 255, 255, .04);
  font-size: .82rem; color: var(--text-on-dark);
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft),
              border-color var(--t-fast) var(--ease-soft), transform var(--t-med) var(--ease-soft);
}
.timeline__links a:hover {
  background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
  color: #2A0714; border-color: transparent; transform: translateY(-2px);
}
.timeline__links svg {
  width: 14px; height: 14px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
}
.timeline__detail.is-in .timeline__links { animation: detailIn .7s var(--ease-soft) .75s both; }

.timeline__railwrap { display: flex; align-items: center; gap: 1rem; }
.icon-btn--rail { flex: 0 0 auto; }

.timeline__rail {
  position: relative; flex: 1; display: flex;
  overflow-x: auto; scrollbar-width: none; padding: 3rem 0 .5rem;
  scroll-snap-type: x proximity;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.timeline__rail::-webkit-scrollbar { display: none; }
.timeline__rail::before {
  content: ''; position: absolute; left: 0; right: 0; top: 3rem; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 210, 94, .6) 10%, rgba(255, 210, 94, .6) 90%, transparent);
}
.tl-node {
  position: relative; flex: 0 0 auto; min-width: 182px; scroll-snap-align: center;
  background: none; border: 0; padding: 0 .8rem; text-align: center;
  color: var(--text-on-dark-soft);
  transition: color var(--t-med) var(--ease-soft);
}
.tl-node__dot {
  display: block; width: 13px; height: 13px; margin: -7px auto 1.5rem;
  background: var(--burdeos-950); border: 2px solid rgba(255, 210, 94, .6);
  transform: rotate(45deg);
  transition: transform .7s var(--ease-soft), background .7s var(--ease-soft),
              border-color .5s var(--ease-soft), box-shadow .7s var(--ease-soft);
}
.tl-node__year {
  display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  transition: color var(--t-med) var(--ease-soft), text-shadow var(--t-med) var(--ease-soft);
}
.tl-node__name {
  display: block; font-size: .74rem; letter-spacing: .05em; opacity: .72;
  transition: opacity var(--t-med) var(--ease-soft);
}
.tl-node:hover { color: var(--oro-300); }
.tl-node:hover .tl-node__name { opacity: 1; }
.tl-node:hover .tl-node__dot { border-color: var(--oro-400); transform: rotate(45deg) scale(1.15); }
.tl-node.is-active { color: var(--oro-300); }
.tl-node.is-active .tl-node__name { opacity: 1; }
.tl-node.is-active .tl-node__dot {
  background: linear-gradient(135deg, var(--oro-200), var(--oro-500));
  border-color: var(--oro-200);
  transform: rotate(45deg) scale(1.4);
  box-shadow: 0 0 0 7px rgba(255, 210, 94, .14), 0 0 28px rgba(255, 210, 94, .65);
}
.tl-node.is-active .tl-node__year { color: var(--oro-300); text-shadow: 0 0 20px rgba(255, 210, 94, .5); }

/* Anillo que se expande al seleccionar un hito */
.tl-node.is-active .tl-node__dot::after {
  content: ''; position: absolute; inset: -4px;
  border: 1px solid var(--oro-300); border-radius: 2px;
  animation: ring 1.4s var(--ease-soft) forwards;
}
.tl-node__dot { position: relative; }
@keyframes ring {
  from { opacity: .9; transform: scale(1); }
  to { opacity: 0; transform: scale(3.2); }
}

/* Línea dorada que avanza hasta el hito elegido */
.tl-progress {
  position: absolute; left: 0; top: 3rem; height: 2px; width: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(255, 210, 94, .35), var(--oro-400) 60%, var(--oro-200));
  box-shadow: 0 0 14px var(--oro-glow);
  border-radius: 2px; pointer-events: none;
  transform: translateY(-.5px);
  transition: width 1s var(--ease-soft);
}

/* ---------- 14. CONTACTO ---------- */
.contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.contact__aside p { color: var(--text-on-dark-soft); max-width: 40ch; }
.contact__list { margin-top: 2rem; display: grid; gap: 1.1rem; }
.contact__list li { display: flex; align-items: center; gap: .9rem; font-size: .95rem; }
.contact__list a { transition: color var(--t-fast) var(--ease-soft); }
.contact__list a:hover { color: var(--oro-300); }
.contact__icon {
  width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid rgba(255, 210, 94, .3); border-radius: 50%; color: var(--oro-400);
  background: rgba(255, 255, 255, .03);
}
.contact__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.form {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 210, 94, .22);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
  display: grid; gap: 1.3rem;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-md), 0 0 60px -34px var(--oro-glow);
}
.field { display: grid; gap: .45rem; }
.field label {
  font-family: var(--font-display); font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--oro-400);
}
.field label span { color: var(--burdeos-500); }
.field input, .field textarea {
  width: 100%; padding: .9rem 1.1rem; font: inherit; font-size: .98rem;
  color: var(--crema); background: rgba(16, 3, 9, .55);
  border: 1px solid rgba(255, 210, 94, .2); border-radius: var(--radius);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(201, 185, 174, .45); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--oro-400); background: rgba(16, 3, 9, .8);
  box-shadow: 0 0 0 3px rgba(249, 190, 51, .16), 0 0 26px -10px var(--oro-glow);
}
.field input.is-invalid, .field textarea.is-invalid { border-color: #E0574F; box-shadow: 0 0 0 3px rgba(224, 87, 79, .12); }
.field__error { margin: 0; font-size: .82rem; color: #F09A93; min-height: 1.1em; }
.field__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.counter { font-size: .78rem; color: var(--text-on-dark-soft); white-space: nowrap; }

.checkbox { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: var(--text-on-dark-soft); }
.checkbox input { width: 18px; height: 18px; margin-top: .25rem; accent-color: var(--oro-500); flex: 0 0 auto; }
.checkbox a { color: var(--oro-400); text-decoration: underline; text-underline-offset: 3px; }

.form__status { margin: 0; font-size: .9rem; min-height: 1.2em; text-align: center; }
.form__status.is-ok { color: var(--oro-300); }
.form__status.is-error { color: #F09A93; }

/* ---------- 15. FOOTER ---------- */
.site-footer { background: #0C0207; border-top: 1px solid rgba(255, 210, 94, .22); position: relative; }
.site-footer::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro-400), transparent);
  box-shadow: 0 0 20px var(--oro-glow);
}
.site-footer__top { padding: clamp(3rem, 6vw, 5rem) 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr 1.2fr; gap: 2.5rem; }

.footer-brand__logo {
  width: 84px; height: 84px; margin-bottom: 1rem;
  filter: drop-shadow(0 0 18px rgba(228, 33, 27, .4));
}
.footer-brand__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--crema); margin: 0 0 .4rem; }
.footer-brand__tag { font-size: .87rem; color: var(--text-on-dark-soft); max-width: 34ch; }

.social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(255, 210, 94, .26); border-radius: 50%; color: var(--oro-400);
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft),
              transform var(--t-med) var(--ease-soft), border-color var(--t-fast) var(--ease-soft),
              box-shadow var(--t-med) var(--ease-soft);
}
.social a:hover {
  background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
  color: #2A0714; transform: translateY(-2px); border-color: transparent;
  box-shadow: 0 0 26px -6px var(--oro-glow);
}
.social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.footer-col h3 {
  font-size: .74rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--oro-500); margin-bottom: 1.2rem;
}
.footer-col ul { display: grid; gap: .65rem; }
.footer-col a {
  font-size: .91rem; color: var(--text-on-dark-soft);
  transition: color var(--t-fast) var(--ease-soft), padding-left var(--t-fast) var(--ease-soft);
}
.footer-col a:hover { color: var(--oro-300); padding-left: 5px; }
.footer-news p { font-size: .87rem; color: var(--text-on-dark-soft); }
.news-form { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.news-form input {
  flex: 1 1 150px; min-width: 0; padding: .8rem 1rem; font: inherit; font-size: .92rem;
  color: var(--crema); background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 210, 94, .24); border-radius: var(--pill);
}
.news-form input:focus { outline: none; border-color: var(--oro-400); box-shadow: 0 0 0 3px rgba(249, 190, 51, .14); }
.news-form .btn { padding: .8rem 1.3rem; font-size: .76rem; }
.footer-news .form__status { text-align: left; margin-top: .6rem; }

.site-footer__bottom { border-top: 1px solid rgba(255, 210, 94, .12); padding: 1.4rem 0; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer-bottom p { margin: 0; font-size: .8rem; color: rgba(201, 185, 174, .68); }
.legal { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.legal a { font-size: .8rem; color: rgba(201, 185, 174, .68); transition: color var(--t-fast) var(--ease-soft); }
.legal a:hover { color: var(--oro-400); }

/* ---------- 16. VOLVER ARRIBA ---------- */
.to-top {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90;
  width: 50px; height: 50px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--burdeos-600), var(--burdeos-800));
  color: var(--oro-300);
  border: 1px solid rgba(255, 210, 94, .4); border-radius: 50%;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all var(--t-med) var(--ease-soft);
  box-shadow: var(--shadow-md), 0 0 26px -10px var(--oro-glow);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover {
  background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
  color: #2A0714; box-shadow: 0 0 34px -6px var(--oro-glow);
}
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 16 bis. LECTOR ONLINE (flipbook) ----------
   El fanzine se monta con transform 3D. Lo importante:

   · .libro lleva la `perspective`. Sin ella el giro sale plano, como si la
     hoja se encogiera en vez de voltearse.
   · .hoja gira sobre su lomo (transform-origin) y sus dos caras llevan
     backface-visibility: hidden, que es lo que hace que al pasar de 90° se
     vea el dorso y no la cara del revés.
   · El ancho de página lo calcula lector.js y lo deja en --ancho-pagina:
     tiene que salir del ALTO disponible, o en portátiles bajos el pliego se
     sale de la pantalla.                                                    */

.lector-body {
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(184, 31, 60, .28), transparent 70%),
    var(--burdeos-950, #16030a);
  min-height: 100svh;
}

.lector {
  min-height: 100svh;
  display: grid;
  /* `minmax(0, 1fr)` y no `1fr` a secas. Una columna de rejilla se ensancha
     hasta el contenido mínimo de sus hijos, y aquí eso hacía que la barra y la
     escena se fueran a 616 px en una pantalla de 390: la página entera se iba
     de lado. Acotando la columna, los hijos se encogen en vez de empujar. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto auto;
  gap: .6rem;
}

/* ---- Barra de arriba ---- */
.lector__barra {
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(.8rem, 3vw, 1.6rem);
  background: rgba(16, 3, 9, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 210, 94, .18);
  position: sticky; top: 0; z-index: 5;
}
.lector__volver {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--oro-400); text-decoration: none;
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .45rem .7rem; border-radius: 999px;
  transition: background var(--t-fast) var(--ease-soft);
}
.lector__volver:hover { background: rgba(255, 210, 94, .12); }
.lector__volver svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.lector__titulo {
  flex: 1; margin: 0; text-align: center;
  font-family: var(--font-display); font-size: clamp(.85rem, 2.2vw, 1.1rem);
  font-weight: 600; color: var(--crema, #FFF8EC);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* `min-width: 0` NO es opcional. Un hijo flex trae `min-width: auto`, que le
     impide encogerse por debajo de su contenido; con `nowrap`, ese contenido
     es el título entero. El resultado: los puntos suspensivos no entraban
     nunca y en el móvil la barra medía 616 px en una pantalla de 375, con lo
     que toda la página se iba de lado. */
  min-width: 0;
}

.lector__acciones { display: flex; gap: .4rem; }
.lector__btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 210, 94, .3);
  background: transparent; color: var(--oro-400); cursor: pointer;
  transition: background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft);
}
.lector__btn:hover { background: rgba(255, 210, 94, .14); border-color: var(--oro-400); }
.lector__btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Avisos ---- */
.lector__cargando, .lector__aviso {
  text-align: center; color: var(--crema, #FFF8EC);
  padding: 3rem 1.5rem; align-self: center;
}
.lector__aviso h2 { font-family: var(--font-display); color: var(--oro-400); margin: 0 0 .6rem; }
.lector__aviso p { margin: 0 0 1rem; opacity: .85; }
.lector.is-listo .lector__cargando { display: none; }

/* ---- El fanzine ---- */
.lector__escena {
  --ancho-pagina: 380px;
  --alto-pagina: 570px;
  display: grid; place-items: center;
  padding: .5rem;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
}
.lector__aviso:not([hidden]) ~ .lector__escena { display: none; }

.libro {
  position: relative;
  width: calc(var(--ancho-pagina) * 2);
  height: var(--alto-pagina);
  perspective: 2600px;
  perspective-origin: 50% 45%;
  /* Tirando de una esquina el dedo se mueve en horizontal y en vertical, y sin
     esto el navegador se queda con el gesto para desplazar la página. */
  touch-action: none;
}
/* Mientras se tira, el cursor manda desde aquí: si lo pusiera el JS en cada
   movimiento, parpadearía al cruzar de una zona a otra. */
.lector.es-arrastrando .lector__escena,
.lector.es-arrastrando .libro { cursor: grabbing; }
.lector.es-una-sola .libro { width: var(--ancho-pagina); }

.pliego { display: flex; height: 100%; }

/* En pantalla estrecha se lee de una en una y la página va en la cara derecha.
   La izquierda hay que QUITARLA del flujo, no solo dejarla vacía: si se queda,
   sigue ocupando su ancho y empuja el fanzine medio cuerpo fuera de la
   pantalla. */
.lector.es-una-sola .cara--izq { display: none; }

.cara {
  width: var(--ancho-pagina); height: var(--alto-pagina);
  background: #fff;
  overflow: hidden;
  position: relative;
}
.cara canvas, .hoja__cara canvas {
  display: block; width: 100%; height: 100%; object-fit: contain;
}
/* Hueco del pliego: la portada no tiene nada a su izquierda ni la
   contraportada a su derecha. Se deja el sitio vacío, no un folio en blanco. */
.cara.is-vacia, .hoja__cara.is-vacia { background: transparent; box-shadow: none; }

/* Relieve: sombra hacia el lomo y un canto claro por fuera */
.cara--izq { border-radius: 3px 0 0 3px; box-shadow: inset -22px 0 34px -26px rgba(0,0,0,.75), -6px 10px 34px -14px rgba(0,0,0,.7); }
.cara--der { border-radius: 0 3px 3px 0; box-shadow: inset 22px 0 34px -26px rgba(0,0,0,.75), 6px 10px 34px -14px rgba(0,0,0,.7); }
.lector.es-portada .cara--der, .lector.es-una-sola .cara--der { border-radius: 3px; }

/* ---- El lienzo del paso realista ----
   Cubre el libro entero y va por encima de las páginas quietas. Con alfa:
   donde no dibuja nada se ve el HTML de debajo, y la sombra que pinta oscurece
   la página que hay detrás. No recibe pulsaciones: los clics son de la escena. */
.curl {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 4; pointer-events: none;
}

/* ---- La hoja que gira ---- */
.hoja {
  position: absolute; top: 0;
  width: var(--ancho-pagina); height: var(--alto-pagina);
  transform-style: preserve-3d;
  z-index: 3;
  pointer-events: none;
}
/* Hacia adelante: la hoja de la derecha gira sobre el lomo, que está a su izquierda */
.hoja--der { left: var(--ancho-pagina); transform-origin: left center; }
.hoja--der.is-girando { animation: pasar-der var(--dur-hoja, 620ms) cubic-bezier(.42, 0, .32, 1) forwards; }
@keyframes pasar-der { to { transform: rotateY(-180deg); } }

/* Hacia atrás: la de la izquierda gira sobre el lomo, que está a su derecha */
.hoja--izq { left: 0; transform-origin: right center; }
.hoja--izq.is-girando { animation: pasar-izq var(--dur-hoja, 620ms) cubic-bezier(.42, 0, .32, 1) forwards; }
@keyframes pasar-izq { to { transform: rotateY(180deg); } }

.hoja__cara {
  position: absolute; inset: 0;
  background: #fff;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.hoja__frente { transform: rotateY(0deg); }
.hoja--der .hoja__dorso { transform: rotateY(180deg); }
.hoja--izq .hoja__dorso { transform: rotateY(-180deg); }

/* Sombra que barre la hoja mientras gira: es lo que le da peso.
   Va en un pseudo-elemento para no tocar el canvas. */
.hoja__cara::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; opacity: 0;
}
.hoja--der .hoja__frente::after { background: linear-gradient(90deg, rgba(0,0,0,.5), transparent 60%); }
.hoja--der .hoja__dorso::after  { background: linear-gradient(270deg, rgba(0,0,0,.5), transparent 60%); }
.hoja--izq .hoja__frente::after { background: linear-gradient(270deg, rgba(0,0,0,.5), transparent 60%); }
.hoja--izq .hoja__dorso::after  { background: linear-gradient(90deg, rgba(0,0,0,.5), transparent 60%); }
.hoja.is-girando .hoja__cara::after { animation: sombra-hoja var(--dur-hoja, 620ms) ease-in-out forwards; }
@keyframes sombra-hoja { 0% { opacity: 0; } 50% { opacity: .55; } 100% { opacity: 0; } }

/* ---- Mandos de abajo ---- */
.lector__mandos {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  padding: .3rem 1rem;
}
.lector__flecha {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 210, 94, .32);
  background: rgba(255, 210, 94, .06); color: var(--oro-400); cursor: pointer;
  transition: background var(--t-fast) var(--ease-soft), opacity var(--t-fast) var(--ease-soft);
}
.lector__flecha:hover:not(:disabled) { background: rgba(255, 210, 94, .18); }
.lector__flecha:disabled { opacity: .25; cursor: default; }
.lector__flecha svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.lector__contador {
  margin: 0; min-width: 9ch; text-align: center;
  font-family: var(--font-display); font-size: .78rem; letter-spacing: .12em;
  color: var(--oro-500);
}
.lector__pista {
  margin: 0 0 1rem; text-align: center;
  font-size: .72rem; letter-spacing: .04em;
  color: rgba(255, 248, 236, .45);
  padding: 0 1rem;
}

/* En pantalla completa el fanzine manda y lo demás se aparta */
.lector.es-pantalla-completa { background: #0d0206; }
.lector.es-pantalla-completa .lector__pista { display: none; }

@media (max-width: 760px) {
  .lector__pista { font-size: .66rem; }
  .lector__titulo { font-size: .8rem; }
  .lector__flecha { width: 44px; height: 44px; }
}

/* Sin animaciones: el giro se corta, pero el lector funciona igual */
@media (prefers-reduced-motion: reduce) {
  .hoja { display: none !important; }
}

/* ---------- 17. PÁGINAS LEGALES ---------- */
.legal-body { --ticker-h: 0px; }

.legal-page {
  padding: 9rem 0 clamp(4rem, 8vw, 7rem);
  background:
    radial-gradient(1000px 560px at 15% 0%, rgba(99, 15, 38, .5), transparent 62%),
    radial-gradient(700px 420px at 95% 70%, rgba(249, 190, 51, .1), transparent 62%),
    linear-gradient(180deg, var(--burdeos-950), #200510);
  min-height: 100svh;
}
.legal-wrap { width: min(100% - 3rem, 900px); }

.legal-head { margin-bottom: 2rem; }
.legal-title { font-size: clamp(2rem, 4.6vw, 3.1rem); color: var(--crema); }
.legal-updated { font-size: .82rem; letter-spacing: .1em; color: var(--text-on-dark-soft); margin: 0; }

.legal-tabs {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-bottom: 2.4rem; margin-bottom: 2.4rem;
  border-bottom: 1px solid rgba(255, 210, 94, .16);
}
.legal-tabs a {
  padding: .55rem 1.2rem; border-radius: var(--pill);
  border: 1px solid rgba(255, 210, 94, .22);
  font-family: var(--font-display); font-size: .76rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-on-dark-soft);
  transition: all var(--t-fast) var(--ease-soft);
}
.legal-tabs a:hover { color: var(--oro-300); border-color: var(--oro-500); }
.legal-tabs a.is-current {
  background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
  border-color: transparent; color: #2A0714; font-weight: 700;
  box-shadow: 0 0 22px -8px var(--oro-glow);
}

.legal-content { font-size: 1rem; }
.legal-content > section { scroll-margin-top: 7rem; }
.legal-content h2 {
  font-size: clamp(1.2rem, 2.4vw, 1.55rem); color: var(--crema);
  margin: 2.8rem 0 .9rem; padding-top: .4rem;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  color: var(--oro-300); margin: 1.8rem 0 .5rem; letter-spacing: .01em;
}
.legal-content p, .legal-content li, .legal-content td { color: var(--text-on-dark-soft); }
.legal-content ul, .legal-content ol { margin: 0 0 1.2rem; display: grid; gap: .55rem; }
.legal-content li { padding-left: 1.5rem; position: relative; }
.legal-content li::before {
  content: ''; position: absolute; left: 2px; top: .68em;
  width: 6px; height: 6px; background: var(--oro-500); transform: rotate(45deg);
}
/* Listas numeradas dentro del texto */
.legal-content ol:not(.legal-toc) { counter-reset: step; }
.legal-content ol:not(.legal-toc) > li::before {
  counter-increment: step; content: counter(step) '.';
  background: none; transform: none; width: auto; height: auto;
  top: 0; left: 0; color: var(--oro-500); font-weight: 700; font-size: .92rem;
}
.legal-content a { color: var(--oro-300); text-decoration: underline; text-underline-offset: 3px; }
.legal-content a:hover { color: var(--oro-200); }
.legal-content strong { color: var(--text-on-dark); font-weight: 600; }

/* Índice numerado */
.legal-toc {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 210, 94, .18);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.8rem; margin-bottom: 2.6rem;
  counter-reset: toc;
}
.legal-toc li { padding-left: 2rem; }
.legal-toc li::before {
  counter-increment: toc; content: counter(toc) '.';
  background: none; transform: none; width: auto; height: auto;
  top: 0; left: 0; color: var(--oro-600); font-weight: 700; font-size: .85rem;
}
.legal-toc a { text-decoration: none; font-size: .94rem; }
.legal-toc a:hover { text-decoration: underline; }

/* Bloque destacado */
.legal-note {
  background: rgba(255, 255, 255, .04);
  border-left: 3px solid var(--oro-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.4rem; margin: 1.4rem 0 1.6rem;
}
.legal-note p:last-child { margin-bottom: 0; }

/* Tablas */
.table-scroll { overflow-x: auto; margin: 0 0 1.6rem; -webkit-overflow-scrolling: touch; }
.legal-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9rem; }
.legal-table th, .legal-table td {
  text-align: left; padding: .8rem 1rem; vertical-align: top;
  border-bottom: 1px solid rgba(255, 210, 94, .14);
}
.legal-table th {
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--oro-400); white-space: nowrap;
}
.legal-table tbody tr:hover { background: rgba(255, 255, 255, .025); }

/* Datos identificativos */
.legal-id { display: grid; gap: 0; margin: 0 0 1.6rem; }
.legal-id div {
  display: grid; grid-template-columns: 220px 1fr; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid rgba(255, 210, 94, .12);
}
.legal-id dt {
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--oro-500);
}
.legal-id dd { margin: 0; color: var(--text-on-dark); }

/* Campos pendientes de rellenar */
mark.fill {
  background: rgba(255, 210, 94, .14);
  border: 1px dashed rgba(255, 210, 94, .6);
  color: var(--oro-200);
  padding: .08em .5em; border-radius: 5px;
  font-size: .93em; font-weight: 600; font-style: normal;
}
.fill-notice {
  display: flex; align-items: flex-start; gap: .9rem;
  background: rgba(249, 190, 51, .08);
  border: 1px solid rgba(255, 210, 94, .4);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 2rem;
  font-size: .9rem; color: var(--oro-200);
}
.fill-notice svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fill-notice p { margin: 0; color: inherit; }

/* Aviso de protección de datos junto al formulario */
.privacy-brief {
  font-size: .78rem; line-height: 1.6; color: rgba(201, 185, 174, .75);
  border-top: 1px solid rgba(255, 210, 94, .12); padding-top: 1rem; margin: 0;
}
.privacy-brief a { color: var(--oro-400); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 18. PÁGINA 404 ----------
   El fondo, la rejilla y el resplandor los comparte con las páginas de
   mantenimiento (§22 bis): de ahí los selectores dobles. Es el mismo telón,
   no dos copias que se separan con el tiempo.                             */
.error-page, .mant-page {
  position: relative; overflow: hidden;
  min-height: 100svh; display: flex; align-items: center;
  padding: 8rem 0 5rem;
  background:
    radial-gradient(1100px 620px at 75% 20%, rgba(184, 31, 60, .45), transparent 62%),
    radial-gradient(700px 500px at 8% 85%, rgba(249, 190, 51, .16), transparent 62%),
    linear-gradient(160deg, var(--burdeos-950) 0%, #2B0714 55%, var(--burdeos-900) 100%);
}
.error-page::before, .mant-page::before {
  content: ''; position: absolute; inset: 0; opacity: .4; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 210, 94, .06) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg, rgba(255, 210, 94, .06) 0 1px, transparent 1px 74px);
  mask-image: radial-gradient(circle at 50% 45%, #000 18%, transparent 76%);
}
.error-glow, .mant__glow {
  position: absolute; width: 620px; height: 620px; right: 6%; top: 14%;
  background: radial-gradient(circle, rgba(255, 210, 94, .2), transparent 66%);
  filter: blur(24px); animation: pulse 9s ease-in-out infinite;
}
.error-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center;
}

.error-title {
  font-size: clamp(3.4rem, 11vw, 7rem); line-height: .95; margin: .2rem 0 .3rem;
  letter-spacing: -.02em;
}
.error-sub {
  font-family: var(--font-display); font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  letter-spacing: .12em; text-transform: uppercase; color: var(--crema);
  margin: 0 0 1.4rem;
}
.error-quip {
  font-size: 1.05rem; color: var(--text-on-dark-soft); max-width: 44ch;
  min-height: 3.4em; margin-bottom: 2rem;
  transition: opacity .3s var(--ease-soft), transform .3s var(--ease-soft);
}
.error-quip.is-out { opacity: 0; transform: translateY(8px); }

.error-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.6rem; }

.error-links { padding-top: 1.6rem; border-top: 1px solid rgba(255, 210, 94, .16); }
.error-links p {
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--oro-600); margin: 0 0 .7rem; font-family: var(--font-display);
}
.error-links ul { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.error-links a {
  font-size: .92rem; color: var(--text-on-dark-soft);
  transition: color var(--t-fast) var(--ease-soft);
}
.error-links a:hover { color: var(--oro-300); }

.error-die { justify-self: center; text-align: center; }

.die-stage {
  position: relative; display: grid; place-items: center;
  width: min(420px, 62vw); aspect-ratio: 1; margin-inline: auto;
}
.die-stage::after {
  content: ''; position: absolute; inset: 12% 12% 4%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 210, 94, .18), transparent 68%);
  filter: blur(18px); z-index: -1; pointer-events: none;
}

/* Lienzo 3D */
.die-canvas {
  width: 100%; height: 100%; display: block;
  cursor: grab; touch-action: none;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .7));
}
.die-canvas.is-grabbing { cursor: grabbing; }

/* Respaldo para navegadores sin WebGL */
.die-img {
  width: min(380px, 58vw); height: auto;
  animation: dieFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .7)) drop-shadow(0 0 34px rgba(255, 210, 94, .25));
}
@keyframes dieFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-16px) rotate(3deg); }
}
.die-img.is-rolling { animation: dieRoll .9s var(--ease-soft); }
@keyframes dieRoll {
  0%   { transform: rotate(0) scale(1); }
  35%  { transform: rotate(280deg) scale(.86); }
  70%  { transform: rotate(620deg) scale(1.06); }
  100% { transform: rotate(720deg) scale(1); }
}

/* Destello del crítico */
.crit-flash {
  position: absolute; inset: -25%; z-index: 3;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 252, 240, .95) 0%,
    rgba(255, 214, 110, .6) 22%,
    rgba(255, 190, 60, .18) 45%,
    transparent 68%);
}
.crit-flash::after {
  content: ''; position: absolute; inset: 27%;
  border: 3px solid var(--oro-200); border-radius: 50%; opacity: 0;
  box-shadow: 0 0 40px var(--oro-glow), inset 0 0 30px rgba(255, 246, 216, .5);
}
.crit-flash.is-on { animation: critFlash 1.05s cubic-bezier(.16, .8, .3, 1) forwards; }
.crit-flash.is-on::after { animation: critRing 1.05s cubic-bezier(.16, .8, .3, 1) forwards; }
@keyframes critFlash {
  0%   { opacity: 0; transform: scale(.55); }
  9%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.45); }
}
@keyframes critRing {
  0%   { opacity: 0; transform: scale(.35); }
  14%  { opacity: .95; }
  100% { opacity: 0; transform: scale(2.1); }
}

/* Pulso suave de toda la página al sacar crítico */
.error-page::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  pointer-events: none; opacity: 0;
  background: radial-gradient(1200px 800px at 76% 45%, rgba(255, 214, 110, .3), transparent 62%);
}
.error-page.is-crit::after { animation: critPage 1.05s cubic-bezier(.16, .8, .3, 1) forwards; }
@keyframes critPage {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  100% { opacity: 0; }
}

.die-roll { margin-top: 1.2rem; }
.die__hint {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin: 1rem 0 0; font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-on-dark-soft);
}
.die__hint span { opacity: .65; }

.sfx-toggle {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  padding: 0; border: 1px solid rgba(255, 210, 94, .25); border-radius: 50%;
  background: none; color: var(--oro-400); opacity: .75;
  transition: opacity var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft),
              border-color var(--t-fast) var(--ease-soft);
}
.sfx-toggle:hover { opacity: 1; border-color: var(--oro-500); }
.sfx-toggle svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sfx-toggle__off { display: none; }
.sfx-toggle.is-muted { color: var(--text-on-dark-soft); }
.sfx-toggle.is-muted .sfx-toggle__on { display: none; }
.sfx-toggle.is-muted .sfx-toggle__off { display: block; }

/* ---------- 19. TIENDA ---------- */
body.no-scroll { overflow: hidden; }

.shop-page {
  padding: 9rem 0 clamp(4rem, 8vw, 7rem);
  background:
    radial-gradient(1000px 560px at 15% 0%, rgba(99, 15, 38, .45), transparent 62%),
    linear-gradient(180deg, var(--burdeos-950) 0%, #22050F 40%, var(--burdeos-950) 100%);
  min-height: 100svh;
}

/* Barra de herramientas: buscador, categorías y orden */
.shop-tools {
  display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: center;
  margin-bottom: 1.6rem;
}
.search {
  position: relative; display: flex; align-items: center;
}
.search svg {
  position: absolute; left: 1.1rem; width: 19px; height: 19px;
  fill: none; stroke: var(--oro-500); stroke-width: 2; stroke-linecap: round;
  pointer-events: none;
}
.search input {
  width: 100%; padding: .95rem 3rem .95rem 3.1rem; font: inherit; font-size: .98rem;
  color: var(--crema); background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 210, 94, .25); border-radius: var(--pill);
  transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft);
}
.search input::placeholder { color: rgba(201, 185, 174, .5); }
.search input:focus {
  outline: none; border-color: var(--oro-400);
  box-shadow: 0 0 0 3px rgba(249, 190, 51, .14), 0 0 26px -10px var(--oro-glow);
}
.search__clear {
  position: absolute; right: .7rem; width: 30px; height: 30px;
  display: none; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: var(--text-on-dark-soft);
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.search__clear.is-visible { display: grid; }
.search__clear:hover { background: var(--burdeos-600); color: var(--oro-300); }
.search__clear svg { position: static; width: 15px; height: 15px; stroke: currentColor; }

.sort {
  display: flex; align-items: center; gap: .6rem;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-on-dark-soft); font-family: var(--font-display); white-space: nowrap;
}
.sort select {
  font: inherit; font-size: .82rem; letter-spacing: .06em; text-transform: none;
  color: var(--crema); background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 210, 94, .25); border-radius: var(--pill);
  padding: .7rem 1rem; cursor: pointer;
}
.sort select:focus { outline: none; border-color: var(--oro-400); }
.sort option { background: #22050F; color: var(--crema); }

.shop-cats { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.4rem; }
.shop-cats .chip {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 210, 94, .22);
  color: var(--text-on-dark-soft);
}
.shop-cats .chip:hover { color: var(--oro-300); border-color: var(--oro-500); }
.shop-cats .chip.is-active {
  background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
  color: #2A0714; border-color: transparent;
}
/* Sobre fondo oscuro sí se puede poner el oro directamente en el texto. Activo,
   lo que lo separa de los demás chips dorados es el destello y el halo. */
.shop-cats .chip--free {
  color: var(--oro-200); border-color: rgba(255, 210, 94, .45);
  background: rgba(255, 210, 94, .1);
}
.shop-cats .chip--free:hover {
  color: var(--oro-200); border-color: var(--oro-400);
  background: rgba(255, 210, 94, .2);
}
.shop-cats .chip--free.is-active {
  background: var(--grad-oro-brillo);
  background-size: 200% 100%;
  animation: tickerBg 6s linear infinite;
  color: var(--burdeos-850); border-color: transparent;
  box-shadow: 0 0 28px -6px var(--oro-glow);
}

/* Hueco reservado para un evento que aún no está confirmado: tapa el mapa sin
   tocarlo, para no destruir el lienzo de MapLibre. */
.map-frame__vacio {
  position: absolute; inset: 0; z-index: 2; margin: 0; padding: 2rem;
  display: grid; place-items: center; text-align: center;
  font-size: .92rem; color: var(--text-on-dark-soft);
  background: var(--burdeos-900);
  border-radius: inherit;
}
.event-card.is-pendiente .event-card__meta { opacity: .75; }

.shop-count {
  font-size: .84rem; color: var(--text-on-dark-soft);
  padding-bottom: 1.6rem; margin-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 210, 94, .14);
}
.shop-count strong { color: var(--oro-400); }

/* Rejilla */
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }

.card {
  position: relative; display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 210, 94, .16);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform var(--t-med) var(--ease-soft), box-shadow var(--t-med) var(--ease-soft),
              border-color var(--t-med) var(--ease-soft);
  animation: fadeUp .45s var(--ease-soft) both;
}
/* La tarjeta NO se levanta al pasar por encima, ni aquí ni en la home: basta
   con el zoom de la imagen y el borde dorado. */
.card:hover {
  border-color: rgba(249, 190, 51, .5);
  box-shadow: var(--shadow-md), 0 0 34px -16px var(--oro-glow);
}
.card.is-sold-out { opacity: .62; }
.card.is-sold-out:hover { opacity: .85; }

.card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--burdeos-850); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-soft); }
.card:hover .card__media img { transform: scale(1.04); }
.card.is-sold-out .card__media img { filter: grayscale(.7) brightness(.75); }

.card__flags { position: absolute; top: .85rem; left: .85rem; z-index: 2; display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.flag {
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  padding: .34rem .8rem; border-radius: var(--pill); white-space: nowrap;
}
.flag--new { background: linear-gradient(135deg, var(--oro-300), var(--oro-500)); color: #2A0714; }
/* «Gratis» es el mismo oro que «Nuevo», pero con destello y halo: así se
   distinguen entre sí aunque compartan paleta. */
.flag--free {
  background: var(--grad-oro-brillo);
  background-size: 200% 100%;
  animation: tickerBg 5s linear infinite;
  color: var(--burdeos-850);
  box-shadow: 0 6px 18px -6px var(--oro-glow);
}
.flag--low { background: rgba(16, 3, 9, .85); color: var(--oro-300); border: 1px solid rgba(255, 210, 94, .5); }
.flag--digital { background: rgba(16, 3, 9, .8); color: var(--text-on-dark); border: 1px solid rgba(255, 255, 255, .18); }

.card__soldout {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background: rgba(16, 3, 9, .55);
}
.card__soldout span {
  font-family: var(--font-display); font-size: .76rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--crema);
  background: rgba(16, 3, 9, .9); border: 1px solid rgba(255, 210, 94, .45);
  padding: .6rem 1.3rem; border-radius: var(--pill);
  transform: rotate(-4deg);
}

.card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.card__cat { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-600); margin: 0 0 .35rem; }
.card__name { font-size: 1.02rem; line-height: 1.25; color: var(--crema); margin-bottom: .3rem; }
.card__name a { display: block; }
.card__name a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card__short { font-size: .82rem; color: var(--text-on-dark-soft); margin: 0 0 1rem; }
.card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.card__price { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--oro-400); margin: 0; }
/* Un punto más claro que el precio normal (--oro-400) y con halo. */
.card__price.is-free { color: var(--oro-200); text-shadow: 0 0 22px var(--oro-glow); }

/* Producto de una sola unidad ya puesto en el carrito: en vez de contador,
   una marca de visto. Se puede pulsar para quitarlo. */
.card__add.is-puesto {
  background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
  border-color: transparent; color: #2A0714;
}
.card__add.is-puesto:hover { box-shadow: 0 0 20px -4px var(--oro-glow); }
.section--shop .card__add.is-puesto {
  background: linear-gradient(135deg, var(--oro-300), var(--oro-500)); color: #2A0714;
}

.cart-line__unico {
  margin: .35rem 0 0; font-size: .82rem; color: var(--text-on-dark-soft);
}

.card__add {
  position: relative; z-index: 2;
  width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid rgba(255, 210, 94, .35); border-radius: 50%;
  background: rgba(255, 255, 255, .05); color: var(--oro-300);
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft),
              border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-med) var(--ease-soft);
}
.card__add:hover {
  background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
  color: #2A0714; border-color: transparent; box-shadow: 0 0 22px -6px var(--oro-glow);
}
.card__add[disabled] { opacity: .35; cursor: not-allowed; }
.card__add[disabled]:hover { background: rgba(255, 255, 255, .05); color: var(--oro-300); box-shadow: none; }
.card__add svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Contador de unidades ya añadidas, en la propia tarjeta */
.card__qty {
  position: relative; z-index: 2; flex: 0 0 auto;
  display: inline-flex; align-items: center; height: 42px;
  border: 1px solid rgba(255, 210, 94, .45); border-radius: var(--pill);
  background: rgba(255, 210, 94, .1); overflow: hidden;
  animation: qtyIn .3s var(--ease-soft);
}
@keyframes qtyIn { from { opacity: 0; transform: scale(.86); } }
.card__qty button {
  width: 34px; height: 100%; padding: 0; border: 0; background: none;
  color: var(--oro-300); font-size: 1.05rem; line-height: 1;
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.card__qty button:hover:not([disabled]) { background: var(--oro-500); color: #2A0714; }
.card__qty button[disabled] { opacity: .3; cursor: not-allowed; }
.card__qty-n {
  min-width: 24px; text-align: center;
  font-family: var(--font-display); font-size: .95rem; font-weight: 700;
  color: var(--oro-300);
}

/* Aviso de stock restante bajo el precio */
.card__note {
  margin: .75rem 0 0; font-size: .74rem; letter-spacing: .03em;
  color: var(--oro-400);
}
.card__note.is-max { color: var(--text-on-dark-soft); }

/* Sin resultados */
.shop-empty { text-align: center; padding: 4rem 1rem; }
.shop-empty svg { width: 54px; height: 54px; margin: 0 auto 1.4rem; fill: none; stroke: var(--oro-500); stroke-width: 1.4; opacity: .7; }
.shop-empty h3 { font-size: 1.3rem; color: var(--crema); margin-bottom: .6rem; }
.shop-empty p { color: var(--text-on-dark-soft); margin-bottom: 1.6rem; }

/* ---------- 20. FICHA DE PRODUCTO ---------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .78rem; color: var(--text-on-dark-soft); margin-bottom: 2rem;
}
.crumbs a { transition: color var(--t-fast) var(--ease-soft); }
.crumbs a:hover { color: var(--oro-300); }
.crumbs span { opacity: .45; }

.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.gallery__main {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255, 210, 94, .25);
  box-shadow: var(--shadow-lg), 0 0 60px -30px var(--oro-glow);
  background: var(--burdeos-850);
}
/* Las fotos van apiladas y se cruzan con un fundido, así que el marco tiene
   que llevar él la proporción: si no, al ser todas absolutas, se hunde. */
.gallery__main { aspect-ratio: 1 / 1; }
.gallery__main img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .9s var(--ease-soft);
}
.gallery__main img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gallery__main img { transition: none; }
}
.gallery__thumbs { display: flex; gap: .7rem; margin-top: .9rem; flex-wrap: wrap; }
.gallery__thumbs button {
  width: 78px; height: 78px; padding: 0; overflow: hidden;
  border: 1px solid rgba(255, 210, 94, .22); border-radius: var(--radius);
  background: none;
  transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-med) var(--ease-soft);
}
.gallery__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs button:hover { border-color: var(--oro-500); }
.gallery__thumbs button.is-active {
  border-color: var(--oro-400); box-shadow: 0 0 20px -6px var(--oro-glow);
}

.pd__cat { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-600); margin: 0 0 .5rem; }
.pd__name { font-size: clamp(1.7rem, 3.6vw, 2.6rem); color: var(--crema); margin-bottom: .7rem; }
.pd__flags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.3rem; }

.pd__price {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  padding-bottom: 1.4rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid rgba(255, 210, 94, .16);
}
.pd__price strong {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  font-weight: 700; color: var(--oro-400); text-shadow: 0 0 26px rgba(255, 210, 94, .3);
}
.pd__price.is-free strong { color: var(--oro-200); text-shadow: 0 0 26px var(--oro-glow); }
.pd__price small { font-size: .78rem; letter-spacing: .1em; color: var(--text-on-dark-soft); }

.pd__desc p { color: var(--text-on-dark-soft); }

.pd__stock {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .84rem; margin-bottom: 1.5rem;
}
.pd__stock::before { content: ''; width: 9px; height: 9px; border-radius: 50%; }
.pd__stock.ok { color: #7BE0A8; }
.pd__stock.ok::before { background: #2FBF71; box-shadow: 0 0 12px rgba(47, 191, 113, .8); }
.pd__stock.low { color: var(--oro-300); }
.pd__stock.low::before { background: var(--oro-400); box-shadow: 0 0 12px var(--oro-glow); }
.pd__stock.out { color: #F09A93; }
.pd__stock.out::before { background: #C9453C; }

/* Cuántas unidades llevas ya de este producto */
.pd__incart {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .85rem; color: var(--oro-300);
  background: rgba(255, 210, 94, .09);
  border: 1px solid rgba(255, 210, 94, .32);
  border-radius: var(--pill);
  padding: .5rem 1.05rem; margin: 0 0 1.2rem;
}
.pd__incart strong { font-family: var(--font-display); font-weight: 700; color: var(--oro-200); }

.pd__buy { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-bottom: 1.8rem; }
.qty {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255, 210, 94, .3); border-radius: var(--pill); overflow: hidden;
  background: rgba(16, 3, 9, .5);
}
.qty button {
  width: 38px; height: 40px; border: 0; background: none; color: var(--oro-300);
  font-size: 1.1rem; line-height: 1;
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.qty button:hover:not([disabled]) { background: var(--burdeos-700); color: var(--oro-200); }
.qty button[disabled] { opacity: .3; cursor: not-allowed; }
.qty input {
  width: 46px; height: 40px; text-align: center; font: inherit; font-size: .95rem;
  color: var(--crema); background: none; border: 0;
  border-inline: 1px solid rgba(255, 210, 94, .18);
  -moz-appearance: textfield; appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; background: rgba(255, 210, 94, .08); }
/* Reparto a partes iguales (basis 0, no 220px) para que los dos botones midan
   lo mismo aunque uno tenga más texto, y `stretch` para que igualen la altura
   cuando uno rompe en más líneas que el otro. El selector de cantidad conviene
   dejarlo centrado, por eso el stretch va en el botón y no en el contenedor. */
.pd__buy .btn { flex: 1 1 0; min-width: 0; align-self: stretch; }

.pd__specs { width: 100%; border-collapse: collapse; margin: 0 0 1.6rem; font-size: .9rem; }
.pd__specs th, .pd__specs td { text-align: left; padding: .7rem 0; border-bottom: 1px solid rgba(255, 210, 94, .12); }
.pd__specs th {
  font-family: var(--font-display); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--oro-500); width: 40%; font-weight: 600;
}
.pd__specs td { color: var(--text-on-dark); }

.pd__note {
  display: flex; gap: .8rem; align-items: flex-start;
  background: rgba(255, 255, 255, .04); border-left: 3px solid var(--oro-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.2rem; font-size: .87rem; color: var(--text-on-dark-soft);
}
.pd__note svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: .15rem; fill: none; stroke: var(--oro-400); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pd__note p { margin: 0; }

.related { margin-top: clamp(4rem, 8vw, 6rem); padding-top: 3rem; border-top: 1px solid rgba(255, 210, 94, .16); }
.related h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--crema); margin-bottom: 2rem; }

/* ---------- 21. CARRITO ---------- */
.cart-btn {
  position: relative; width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center; margin-left: .3rem;
  border: 1px solid rgba(255, 210, 94, .28); border-radius: 50%;
  background: rgba(255, 255, 255, .04); color: var(--oro-300);
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft),
              border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-med) var(--ease-soft);
}
.cart-btn:hover {
  background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
  color: #2A0714; border-color: transparent; box-shadow: 0 0 24px -6px var(--oro-glow);
}
.cart-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cart-btn__badge {
  position: absolute; top: -3px; right: -3px; min-width: 21px; height: 21px;
  display: grid; place-items: center; padding: 0 5px;
  background: linear-gradient(135deg, var(--burdeos-500), var(--burdeos-700));
  color: var(--crema); border: 1px solid rgba(255, 210, 94, .6);
  border-radius: var(--pill); font-size: .68rem; font-weight: 700; line-height: 1;
  animation: badgePop .35s var(--ease-soft);
}
@keyframes badgePop { from { transform: scale(.4); opacity: 0; } }

.cart-backdrop {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(8, 2, 5, .7); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med) var(--ease-soft), visibility var(--t-med);
}
.cart-backdrop.is-open { opacity: 1; visibility: visible; }

.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
  width: min(440px, 100vw);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1E0510, #120309);
  border-left: 1px solid rgba(255, 210, 94, .3);
  box-shadow: -30px 0 70px -30px rgba(0, 0, 0, .9);
  transform: translateX(100%);
  transition: transform .45s var(--ease-soft);
}
.cart.is-open { transform: none; }

.cart__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 1.5rem; border-bottom: 1px solid rgba(255, 210, 94, .2);
}
.cart__title { font-size: 1.15rem; letter-spacing: .06em; color: var(--crema); }
.cart__close {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255, 210, 94, .25); border-radius: 50%;
  background: none; color: var(--oro-300);
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.cart__close:hover { background: var(--burdeos-700); color: var(--oro-200); }
.cart__close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.cart__body { flex: 1; overflow-y: auto; padding: 1.2rem 1.5rem; }
.cart__list { display: grid; gap: 1.2rem; }

.cart-line { display: grid; grid-template-columns: 80px 1fr auto; gap: 1rem; align-items: start; }
.cart-line + .cart-line { padding-top: 1.2rem; border-top: 1px solid rgba(255, 210, 94, .12); }
.cart-line__media {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(255, 210, 94, .2); background: var(--burdeos-850);
}
.cart-line__media img { width: 80px; height: 80px; object-fit: cover; }
.cart-line__name {
  display: block; font-family: var(--font-display); font-size: .95rem; line-height: 1.25;
  color: var(--crema); margin-bottom: .2rem;
  transition: color var(--t-fast) var(--ease-soft);
}
.cart-line__name:hover { color: var(--oro-300); }
.cart-line__meta { font-size: .74rem; letter-spacing: .08em; color: var(--text-on-dark-soft); margin: 0 0 .6rem; }
.cart-line .qty button { width: 30px; height: 32px; font-size: 1rem; }
.cart-line .qty input { width: 38px; height: 32px; font-size: .88rem; }
.cart-line__right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.cart-line__price { font-family: var(--font-display); font-weight: 700; color: var(--oro-400); margin: 0; white-space: nowrap; }
.cart-line__del {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--text-on-dark-soft);
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.cart-line__del:hover { background: rgba(201, 69, 60, .18); color: #F09A93; }
.cart-line__del svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.cart__empty { text-align: center; padding: 3.5rem 1rem; }
.cart__empty svg { width: 52px; height: 52px; margin: 0 auto 1.3rem; fill: none; stroke: var(--oro-500); stroke-width: 1.3; opacity: .6; }
.cart__empty p { color: var(--text-on-dark-soft); margin-bottom: 1.6rem; }

.cart__foot { padding: 1.3rem 1.5rem 1.6rem; border-top: 1px solid rgba(255, 210, 94, .2); display: grid; gap: .7rem; }
.cart__totals { display: grid; gap: .5rem; }
.cart__totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cart__totals dt { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-on-dark-soft); }
.cart__totals dd { margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--oro-400); }
.cart__ship dd { font-family: var(--font-body); font-size: .84rem; font-weight: 400; color: var(--text-on-dark-soft); }
.cart__vat { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-dark-soft); opacity: .7; margin: 0 0 .4rem; }

.toast {
  position: fixed; left: 50%; bottom: 1.6rem; z-index: 210;
  display: flex; align-items: center; gap: .8rem;
  width: min(440px, calc(100vw - 2rem));
  padding: .9rem 1.1rem;
  background: rgba(30, 5, 16, .97); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 210, 94, .4); border-radius: var(--radius);
  box-shadow: var(--shadow-lg), 0 0 34px -14px var(--oro-glow);
  color: var(--text-on-dark); font-size: .88rem;
  transform: translate(-50%, 140%); opacity: 0;
  transition: transform .5s var(--ease-soft), opacity .4s var(--ease-soft);
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.toast > svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: #4FD98B; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Cuando no se ha podido añadir todo lo pedido */
.toast--aviso { border-color: rgba(255, 210, 94, .6); }
.toast--aviso > svg { stroke: var(--oro-400); stroke-width: 2; }
.toast > span { flex: 1; }
.toast > button {
  flex: 0 0 auto; border: 0; background: none; padding: 0;
  font-family: var(--font-display); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--oro-300); text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease-soft);
}
.toast > button:hover { color: var(--oro-200); }

/* ---------- 22. PÁGINA DE GRACIAS ---------- */
.thanks { text-align: center; max-width: 720px; margin-inline: auto; }
.thanks__mark {
  width: 92px; height: 92px; margin: 0 auto 1.8rem;
  display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, rgba(47, 191, 113, .2), rgba(47, 191, 113, .05));
  border: 1px solid rgba(79, 217, 139, .5);
  box-shadow: 0 0 46px -12px rgba(79, 217, 139, .5);
  animation: markIn .7s var(--ease-soft) both;
}
@keyframes markIn { from { opacity: 0; transform: scale(.7); } }
.thanks__mark svg { width: 42px; height: 42px; fill: none; stroke: #4FD98B; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.thanks__mark.is-lost {
  background: linear-gradient(135deg, rgba(255, 210, 94, .16), rgba(255, 210, 94, .04));
  border-color: rgba(255, 210, 94, .45);
  box-shadow: 0 0 46px -12px var(--oro-glow);
}
.thanks__mark.is-lost svg { stroke: var(--oro-400); stroke-width: 2; }
.thanks__title { font-size: clamp(2rem, 4.6vw, 3rem); color: var(--crema); margin-bottom: .8rem; }
.thanks__lead { color: var(--text-on-dark-soft); max-width: 50ch; margin-inline: auto; }

.order-box {
  text-align: left; margin: 2.6rem 0;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 210, 94, .22);
  border-radius: var(--radius-lg); overflow: hidden;
}
.order-box__head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.4rem; border-bottom: 1px solid rgba(255, 210, 94, .18);
  background: rgba(255, 210, 94, .05);
}
.order-box__head h2 { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-400); }
.order-box__ref { font-size: .8rem; color: var(--text-on-dark-soft); font-family: var(--font-body); }
.order-list { padding: .4rem 1.4rem; }
.order-list li {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 1rem; align-items: center;
  padding: 1rem 0;
}
.order-list li + li { border-top: 1px solid rgba(255, 210, 94, .1); }
.order-list img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255, 210, 94, .2); }
.order-list__name { font-family: var(--font-display); font-size: .95rem; color: var(--crema); margin: 0 0 .15rem; }
.order-list__meta { font-size: .76rem; color: var(--text-on-dark-soft); margin: 0; }
.order-list__price { font-family: var(--font-display); font-weight: 700; color: var(--oro-400); white-space: nowrap; }
.order-box__foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.1rem 1.4rem; border-top: 1px solid rgba(255, 210, 94, .18);
}
.order-box__foot dt { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-dark-soft); }
.order-box__foot dd { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--oro-400); }

.dl-list { display: grid; gap: .7rem; text-align: left; margin: 0 0 2.4rem; }
.dl-list a {
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.2rem; text-decoration: none;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 210, 94, .25); border-radius: var(--radius);
  color: var(--text-on-dark); font-size: .92rem;
  transition: border-color var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease-soft),
              transform var(--t-med) var(--ease-soft);
}
.dl-list a:hover { border-color: var(--oro-400); background: rgba(255, 210, 94, .08); transform: translateX(4px); }
.dl-list svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--oro-400); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dl-list strong { flex: 1; font-weight: 500; }
.dl-list a.is-pending { opacity: .6; cursor: default; }
.dl-list a.is-pending:hover { border-color: rgba(255, 210, 94, .25); background: rgba(255, 255, 255, .04); transform: none; }
.dl-list a.is-pending svg { stroke: var(--text-on-dark-soft); }

/* ---------- 22 bis. PÁGINAS DE MANTENIMIENTO ----------
   Dos páginas sueltas —`mantenimiento.html` y `mantenimiento-programado.html`—
   para poner una u otra según toque. Dos cosas a respetar:

   · **No dependen de NINGÚN JavaScript.** Si la web está caída, la página que
     lo anuncia no puede necesitar que algo funcione. Tampoco llevan cabecera
     ni menú: durante el mantenimiento no habría adónde ir.
   · El fondo sale de la §18, no copiado. Si se retoca el telón de la 404,
     estas dos van detrás solas.                                            */

.mant-page {
  padding: clamp(2.5rem, 8vh, 5rem) 0;
  text-align: center;
}

.mant__inner { position: relative; z-index: 1; max-width: 44rem; margin: 0 auto; }

/* El logo, en grande. Sombra con `drop-shadow` y no `box-shadow`: el logo es
   un SVG recortado y la segunda le dibujaría una caja alrededor. */
.mant__logo {
  width: clamp(160px, 30vw, 280px); height: auto;
  margin: 0 auto clamp(1.4rem, 4vw, 2.2rem);
  filter:
    drop-shadow(0 18px 34px rgba(0, 0, 0, .55))
    drop-shadow(0 0 52px rgba(255, 210, 94, .3));
}

.mant__title {
  font-size: clamp(2.1rem, 6.5vw, 3.8rem); line-height: 1.04;
  letter-spacing: -.01em; margin: 0 0 1rem;
}
.mant__lead {
  font-size: clamp(1rem, 2.2vw, 1.18rem); line-height: 1.7;
  color: var(--text-on-dark); max-width: 36ch; margin: 0 auto 1.2rem;
}
.mant__quip {
  font-size: .95rem; color: var(--text-on-dark-soft); font-style: italic;
  max-width: 40ch; margin: 0 auto;
}

/* Las fechas del mantenimiento programado */
.mant__fechas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
  margin: 2rem auto 1.6rem; padding: 1.4rem 1.2rem; max-width: 34rem;
  border: 1px solid rgba(255, 210, 94, .28); border-radius: var(--radius-lg);
  background: rgba(16, 3, 9, .42);
  box-shadow: 0 0 60px -26px var(--oro-glow);
}
.mant__fechas > div { flex: 1 1 12rem; }
.mant__fechas dt {
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--oro-500); margin-bottom: .45rem;
}
.mant__fechas dd {
  margin: 0; font-family: var(--font-display); font-size: 1.05rem;
  line-height: 1.45; color: var(--crema);
}

.mant__pie {
  margin: 2rem 0 0; font-size: .9rem; color: var(--text-on-dark-soft);
}
.mant__pie a { color: var(--oro-400); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 23. RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero__art { max-width: 480px; }
  /* En una sola columna el sangrado no gana nada y sí recorta las puntas de
     las alas: la ilustración ya manda ella sola en su fila. */
  .hero__art img { width: 100%; margin-inline: 0; }
  .about { grid-template-columns: 1fr; }
  .about__media { max-width: 440px; }
  .commissions__inner { grid-template-columns: 1fr; }
  /* La ilustración fija sobra en pantalla estrecha, pero el cofre no: es
     interactivo y se puede pulsar igual. Se queda, más pequeño.
     chest.js pone .has-cofre solo si hay WebGL; si no lo hay, esta sección
     se oculta como siempre y no queda un hueco vacío. */
  .commissions__deco:not(.has-cofre) { display: none; }
  .cofre { width: min(300px, 62vw); height: min(300px, 62vw); }
  .event-card { grid-template-columns: 1fr; }
  .event-card__map { min-height: 300px; }
  .timeline__detail { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section__head { grid-template-columns: 1fr; }
  .shop-grid, .section--shop .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .product-detail { grid-template-columns: 1fr; }
  .gallery { max-width: 520px; }
}

@media (max-width: 860px) {
  .shop-grid, .section--shop .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-tools { grid-template-columns: 1fr; }
  .sort { justify-content: space-between; }
}

@media (max-width: 760px) {
  :root { --ticker-h: 38px; }
  body { font-size: 16px; }
  .container { width: min(100% - 2rem, var(--maxw)); }
  .ticker__item { font-size: .68rem; letter-spacing: .16em; }
  /* Sin `animation-duration` aquí a propósito: la pone site.js midiendo. En
     móvil la letra es más pequeña, la cinta más corta y la duración sale menor
     sola, manteniendo los mismos píxeles por segundo. */

  .brand__logo { width: 46px; height: 46px; }
  .brand__name { font-size: .92rem; letter-spacing: .07em; }
  .brand__tag { font-size: .58rem; letter-spacing: .18em; white-space: nowrap; }

  .nav-toggle { display: flex; }
  /* El menú cerrado NO tiene que pintar nada.
     `max-height: 0` + `overflow: hidden` vacían el contenido, pero el BORDE se
     dibuja FUERA de esa caja: quedaban 2 px de línea dorada sobre fondo casi
     negro cruzando la pantalla entera y, al ser `position: fixed`, la franja
     acompañaba al scroll por media web. Por eso el borde solo existe con el
     menú abierto.

     `visibility` además lo saca del todo cuando está cerrado —ni se pinta ni
     lo lee un lector de pantalla— y se retrasa hasta que acaba de plegarse
     para no cortar la animación de cierre. */
  /* COLGADO DE LA CABECERA, NO DE LA VENTANA.
     Antes era `fixed` con un `top` calculado, y al bajar se descolgaba 38 px
     justos —el alto de la marquesina—. El motivo: al hacer scroll, la cabecera
     recibe `is-stuck`, que trae `backdrop-filter`, y un `backdrop-filter`
     convierte al elemento en BLOQUE CONTENEDOR de sus descendientes `fixed`.
     De golpe el panel dejaba de medirse desde la ventana y pasaba a medirse
     desde la cabecera, con lo que su `top` se sumaba dos veces.

     Con `absolute` + `top: 100 %` cuelga del borde inferior de la cabecera y
     la sigue siempre, esté pegada o no, sin JavaScript que lo recoloque. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(16, 3, 9, .98); backdrop-filter: blur(16px);
    border-block: 0 solid rgba(255, 210, 94, .22);
    max-height: 0; overflow: hidden;
    visibility: hidden;
    transition: max-height .4s var(--ease), visibility 0s linear .4s;
  }
  .nav.is-open {
    max-height: 340px;
    border-block-width: 1px;
    visibility: visible;
    transition: max-height .4s var(--ease), visibility 0s;
  }
  .nav__list { flex-direction: column; gap: 0; padding: .5rem 1.5rem 1.5rem; }
  .nav__link { padding: 1rem 0; font-size: 1rem; border-bottom: 1px solid rgba(255, 210, 94, .1); border-radius: 0; }
  .nav__link::after { display: none; }

  .hero { min-height: auto; padding: calc(var(--ticker-h) + 6rem) 0 4rem; }
  /* Agrupadas a la izquierda. Con `space-between` se iban cada una a un borde
     y quedaban a dos palmos de distancia: aquello estaba pensado para tres
     cifras, y ahora son dos. */
  .hero__stats { gap: 2.2rem; justify-content: flex-start; }
  .stat dd { font-size: 1.55rem; }
  .scroll-cue { display: none; }

  .event-meta { grid-template-columns: 1fr 1fr; }
  .event-card__actions { flex-direction: column; align-items: stretch; }
  .save-date, .save-date .btn, .event-card__actions .btn { width: 100%; }
  .save-date__menu { width: 100%; }
  .timeline__railwrap { gap: .4rem; }
  .tl-node { min-width: 142px; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .to-top { right: 1rem; bottom: 1rem; }

  .legal-page { padding-top: 7rem; }
  .legal-toc { grid-template-columns: 1fr; padding: 1.2rem 1.4rem; }
  .legal-id div { grid-template-columns: 1fr; gap: .2rem; }

  .error-page { padding: 6.5rem 0 4rem; }
  .error-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .error-die { grid-row: 1; }
  .die-stage { width: min(260px, 62vw); }
  .die-img { width: min(240px, 55vw); }
  .die__hint { margin-top: .8rem; }
  .error-quip { min-height: 0; }
  .error-actions { flex-direction: column; align-items: stretch; }

  .shop-page { padding-top: 7rem; }
  .shop-grid, .section--shop .shop-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .cart-btn { width: 42px; height: 42px; }
  .cart { width: 100vw; }
  .cart-line { grid-template-columns: 64px 1fr auto; gap: .8rem; }
  .cart-line__media img { width: 64px; height: 64px; }
  .pd__buy .btn { flex: 1 1 100%; }
  .gallery__thumbs button { width: 62px; height: 62px; }
  .order-list li { grid-template-columns: 44px 1fr auto; }
  .order-list img { width: 44px; height: 44px; }
}

@media (max-width: 430px) {
  /* Con el botón de carrito en la cabecera ya no cabe el lema */
  .brand__name { font-size: .8rem; white-space: nowrap; }
  .brand__tag { display: none; }
  .brand__logo { width: 42px; height: 42px; }
  .about__badge { right: 0; font-size: .72rem; padding: .7rem 1.1rem; }
  .shop-cats .chip { font-size: .74rem; padding: .5rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
}