/* =================================================================
   MARCA — hoja de estilos
   3 segmentos: HERO · LA HISTORIA · FOOTER
   ================================================================= */

:root {
  --night-1: #101a3a;   /* base del hero / arranque de la historia (divisor) */
  --night-2: #15244c;   /* fondo de la sección historia */
  --night-3: #0b1330;   /* footer (base, casi sin uso) */
  --stage:   #15100f;   /* borde/sombra oscura del escenario — pie de página */

  --cream:     #f6edda;
  --cream-dim: #cfc3a6;
  --red:       #d8412e;
  --gold:      #ecb53f;
  --glow:      #f4a64a;

  --font-marker: 'Patrick Hand', 'Comic Sans MS', cursive;
  --font-brush:  'Patrick Hand', 'Comic Sans MS', cursive;
  --font-script: 'Caveat', cursive;

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* puntero del sitio: un microfonito (número = punto de clic) */
  --cursor-mic: url(../assets/marca/cursor-mic.svg) 12 6;

  /* hoja tipo cómic / menú — papel claro y tinta oscura */
  --paper: #fbf8ef;
  --ink:   #201913;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-width: none;        /* Firefox: sin barra de scroll */
  -ms-overflow-style: none;     /* Edge/IE viejo */
}
/* Chrome/Safari: oculta la barra de scroll (la página igual scrollea) */
::-webkit-scrollbar { width: 0; height: 0; background: transparent; }

body {
  background: var(--night-2);
  color: var(--cream);
  font-family: var(--font-marker);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* snap suave entre los 3 segmentos (no forzado) */
main {
  scroll-snap-type: y proximity;
}
.hero, .story, .invite { scroll-snap-align: start; }

img { display: block; max-width: 100%; }
a   { color: inherit; }

/* puntero microfonito en todo el sitio (con respaldo si el SVG falla) */
html          { cursor: var(--cursor-mic), auto; }
a, button     { cursor: var(--cursor-mic), pointer; }


/* =================================================================
   1 · HERO
   ================================================================= */
.hero {
  position: relative;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
  --mx: 0; --my: 0;            /* alimentados por el parallax del mouse */
}

/* --- fondo blureado --- */
.hero__bg { position: absolute; inset: 0; z-index: 0; }

.hero__bg-fallback {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #3a5b4a 0%, #2c4a5e 42%, var(--night-1) 100%);
}
/* la imagen o el video del fondo — los dos llevan el parallax */
.hero__bg-img,
.hero__bg-video {
  position: absolute; inset: -3%;
  width: 106%; height: 106%;
  max-width: none;          /* anula el img{max-width:100%} global: si no, queda hueco al costado */
  object-fit: cover;
  /* encuadre del fondo — ajustable: 50% = centrado, menos = izquierda */
  object-position: var(--bg-x, 50%) var(--bg-y, 50%);
  transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -14px), 0) scale(1.02);
  transition: transform .5s var(--ease);
}
/* leve oscurecido para que los PNG resalten (sin desenfoque) */
.hero__bg-blur {
  position: absolute; inset: 0;
  background: rgba(10, 16, 38, .12);
}
.hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 38%, rgba(8,12,32,.62) 100%);
}

/* --- título: PNG con el nombre del libro (respaldo de texto) --- */
.hero__title {
  position: absolute; top: 1%; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  text-align: center;
}
.hero__title-img {
  /* tamaño del título — ajustá acá si tapa mucho a la perra */
  width: clamp(300px, 30vw, 920px);
  height: auto;
  /* sombra cortita y pegada a las letras: da legibilidad sin armar
     una "caja" oscura detrás del PNG */
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.55))
          drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
/* respaldo: sólo visible si todavía no está el PNG */
.hero__title-text { display: none; }
.hero__title.is-text .hero__title-text {
  display: block;
  font-family: var(--font-brush);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.04;
  text-shadow: 0 6px 26px rgba(0,0,0,.55);
}
/* dos renglones, como el lettering a mano del libro
   (respaldo de texto — mismo tamaño que ajustás en .hero__title-img) */
.hero__title-line {
  display: block;
  letter-spacing: .04em;
  font-size: clamp(1.65rem, 4.5vw, 3.9rem);
}
.hero__title-line:first-child {
  font-size: clamp(1.5rem, 4vw, 3.5rem);
}

/* --- etiquetas / botones --- */
.tag {
  position: absolute;
  z-index: 6;
  display: block;
  text-decoration: none;
  font-family: var(--font-marker);
  text-transform: uppercase;
  color: var(--cream);
  letter-spacing: .02em;
  line-height: 1.05;
  font-size: clamp(1.4rem, 2.7vw, 2.5rem);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.6));
  transform: rotate(var(--rot, 0deg));
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.tag__text {
  position: relative;
  display: inline-block;
}
.tag__text::after {
  content: "";
  position: absolute; left: -2%; right: -2%; bottom: -.16em;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
  transform: scaleX(.55);
  transform-origin: left;
  transition: transform .35s var(--ease), background-color .3s;
}
/* flechas desactivadas (los botones grandes ya marcan la relación) */
.tag__arrow { display: none; }

/* posición + ligera inclinación "a mano" de cada etiqueta */
.tag--historia { left: 5%;  top: 22%; --rot: -5deg; }
.tag--autora   { right: 7%; top: 12%; --rot: 4deg;  text-align: right; }
.tag--preventa { right: 5%; top: 33%; --rot: -3deg; text-align: right; }
.tag--orlando  { left: 6%;  top: 38%; --rot: 3deg;
                 font-size: clamp(1.15rem, 2.2vw, 2rem); }

/* hover / foco / vínculo con el animalito */
.tag:hover,
.tag:focus-visible,
.tag.is-active {
  color: var(--glow);
  transform: rotate(calc(var(--rot, 0deg) * .35)) scale(1.14);
  outline: none;
}
.tag:hover .tag__text::after,
.tag:focus-visible .tag__text::after,
.tag.is-active .tag__text::after {
  transform: scaleX(1);
}

/* --- escenario de los animalitos --- */
.hero__stage { position: absolute; inset: 0; z-index: 3; }

.critter {
  position: absolute;
  display: block;
  text-decoration: none;
  transition: transform .4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.critter__bob {
  display: block;
  animation: float var(--dur, 6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.critter img {
  width: 100%; height: auto;
  cursor: var(--cursor-mic), pointer;
  transition: transform .4s var(--ease), filter .4s var(--ease);
  /* sombra cortita, pegada al contorno del animalito: lo despega del
     fondo sin dibujar el rectángulo del PNG alrededor */
  filter: drop-shadow(0 9px 11px rgba(0,0,0,.4));
}
.critter:hover img,
.critter:focus-visible img,
.critter.is-active img {
  transform: scale(1.06) rotate(2deg);
  filter: drop-shadow(0 0 22px rgba(244,166,74,.65))
          drop-shadow(0 10px 12px rgba(0,0,0,.4));
}
.critter:focus-visible { outline: none; }

/* gato izquierda — "sobre la historia" */
.critter--cat1 {
  left: 6%;  bottom: 7vh;
  width: clamp(120px, 16vw, 240px);
  --depth: 36px; --dur: 6.4s; --delay: -1.2s;
  z-index: 3;
  transform: translate3d(calc(var(--mx) * var(--depth)), calc(var(--my) * var(--depth)), 0);
}
/* perra centro — "sobre la autora" */
.critter--dog {
  left: 50%; bottom: 3vh;
  width: clamp(230px, 33vw, 470px);
  --depth: 16px; --dur: 7.2s; --delay: 0s;
  z-index: 5;
  transform: translate3d(calc(-50% + var(--mx) * var(--depth)), calc(var(--my) * var(--depth)), 0);
}
/* la perra viene recortada abajo: difuminamos ese borde para que no se note el corte */
.critter--dog img {
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
/* gato derecha — "preventa" (bien grande) */
.critter--cat2 {
  right: 4%; bottom: 2vh;
  width: clamp(320px, 42vw, 640px);
  --depth: 40px; --dur: 5.6s; --delay: -2.6s;
  z-index: 4;
  transform: translate3d(calc(var(--mx) * var(--depth)), calc(var(--my) * var(--depth)), 0);
}

/* placeholder si todavía falta el PNG */
.critter.is-missing .critter__bob {
  display: flex; align-items: center; justify-content: center;
  width: clamp(120px, 22vw, 280px);
  aspect-ratio: 1;
  border: 2.5px dashed rgba(246,237,218,.55);
  border-radius: 50%;
  background: rgba(10,16,38,.4);
}
.critter.is-missing .critter__bob::after {
  content: "PNG";
  font-family: var(--font-marker);
  color: rgba(246,237,218,.7);
  letter-spacing: .12em;
}

/* --- créditos al pie de la perra: autora + ilustrador --- */
.hero__credits {
  position: absolute;
  left: 50%; bottom: 6vh;
  transform: translateX(-50%);
  z-index: 6;                  /* por encima del escenario, sobre el desvanecido de la perra */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  width: max-content;
  max-width: 88vw;
  text-align: center;
  pointer-events: none;        /* deja pasar el clic a la perra (acción "autora") */
}

/* cinta roja con el nombre de la autora */
.ribbon {
  position: relative;
  transform: rotate(-2.4deg);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
.ribbon__text {
  display: block;
  background: var(--red);
  color: var(--gold);
  font-family: var(--font-marker);
  text-transform: uppercase;
  letter-spacing: .045em;
  line-height: 1;
  font-size: clamp(1rem, 2.4vw, 2rem);
  padding: .54em 1.75em;
  /* extremos en cola de pez, recortados a ambos lados */
  clip-path: polygon(
    0 0, 100% 0,
    calc(100% - .82em) 50%, 100% 100%,
    0 100%,
    .82em 50%);
}

/* crédito del ilustrador, debajo de la cinta */
.hero__illus {
  font-family: var(--font-marker);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(.78rem, 1.7vw, 1.2rem);
  color: var(--cream);
  text-shadow: 0 3px 14px rgba(0,0,0,.85);
}


/* --- indicador de scroll --- */
.hero__scroll {
  position: absolute; left: 50%; bottom: 2.4vh;
  transform: translateX(-50%);
  z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none;
  color: var(--cream);
  font-family: var(--font-marker);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .82rem;
  opacity: .85;
  transition: opacity .3s, transform .3s var(--ease);
}
.hero__scroll:hover { opacity: 1; transform: translateX(-50%) translateY(3px); }
.hero__scroll-arrow {
  width: 11px; height: 11px;
  border-right: 2.4px solid currentColor;
  border-bottom: 2.4px solid currentColor;
  transform: rotate(45deg);
  animation: nudge 1.8s ease-in-out infinite;
}


/* =================================================================
   DIVISOR  —  línea dibujada a mano entre el hero y la historia
   ================================================================= */
.divider {
  --divider-h: clamp(46px, 6vw, 80px);
  position: relative;
  z-index: 6;
  height: var(--divider-h);
  /* se monta sobre el hero y la historia para tapar el corte de ambos */
  margin: calc(var(--divider-h) * -0.42) 0;
  pointer-events: none;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.4));
}
.divider__img,
.divider__draw {
  display: block;
  width: 100%;
  height: 100%;
}
/* respaldo dibujado: sólo visible si todavía no está divisor.png */
.divider__draw { display: none; }
.divider.is-draw .divider__draw { display: block; }

.divider__band { fill: var(--cream); }
.divider__line {
  fill: none;
  stroke: var(--stage);
  stroke-width: 2.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}


/* =================================================================
   2 · LA HISTORIA  —  texto gigante sobre video de nubes
   ================================================================= */
.story {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 12vh 4vw;
  overflow: hidden;
  isolation: isolate;
}

.story__bg { position: absolute; inset: 0; z-index: 0; }
.story__sky {
  position: absolute; inset: 0;
  /* hacia el pie, el cielo se apaga en el oscuro del escenario (sin saltar al azul) */
  background: linear-gradient(180deg,
                var(--night-1) 0%,
                var(--night-2) 50%,
                var(--night-2) 76%,
                var(--stage) 100%);
}
.story__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;
  mix-blend-mode: screen;
}
/* nubes extra en CSS para dar profundidad y movimiento */
.story__cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  background: radial-gradient(ellipse, rgba(120,150,210,.5), transparent 70%);
}
.story__cloud--1 { width: 48vw; height: 22vh; top: 14%;  left: -12vw;  animation: drift 38s linear infinite; }
.story__cloud--2 { width: 60vw; height: 26vh; bottom: 8%; right: -18vw; animation: drift 52s linear infinite reverse; opacity: .7; }

.story__stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 28% 68%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 47% 14%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 63% 78%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 78% 33%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 88% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 36% 88%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 70% 8%,  #fff, transparent);
  opacity: .55;
  animation: twinkle 5.5s ease-in-out infinite;
}

/* --- texto gigante --- */
.story__text {
  position: relative; z-index: 2;
  text-align: center;
  font-family: var(--font-brush);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--cream);
  /* el JS ajusta el tamaño exacto para llenar el ancho;
     este clamp es el respaldo si el JS no corre */
  font-size: clamp(1.8rem, 6.4vw, 6rem);
  line-height: 1.1;
  letter-spacing: .005em;
  text-shadow: 0 6px 30px rgba(0,0,0,.5);
}
/* cada renglón va entero en una sola línea (queda ancho, no alto) */
.line { display: block; white-space: nowrap; }

.word {
  display: inline-block;
  position: relative;
  transition: transform .3s var(--ease), color .3s, text-shadow .3s;
}
/* palabras subrayadas — subrayado fijo que sigue el color de la palabra */
.word--mark::after {
  content: "";
  position: absolute; left: -3%; right: -3%; bottom: -.02em;
  height: .1em;
  border-radius: 6px;
  background: currentColor;
  transition: box-shadow .3s;
}

/* hover: la palabra cambia de color y se ilumina */
.word:hover {
  color: var(--gold);
  transform: translateY(-3px);
  text-shadow: 0 0 22px rgba(244,166,74,.6), 0 6px 24px rgba(0,0,0,.5);
}
.word--mark:hover::after {
  box-shadow: 0 0 16px rgba(244,166,74,.7);
}

/* aparición progresiva al hacer scroll (solo con JS) */
.js .word { opacity: 0; }
.story__text.is-in .word {
  animation: wordin .55s var(--ease) both;
  animation-delay: calc(var(--i) * .055s);
}


/* =================================================================
   3 · INVITACIÓN AL QUIZ  —  banner del 4° aniversario que invita
   a jugar "¿Qué personaje de Cielo sos?" (abre la página tipo
   cómic del quiz al hacer clic)
   ================================================================= */
.invite {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 9vh 6vw;
  background: linear-gradient(180deg, var(--night-2) 0%, var(--stage) 100%);
}

/* fondo real: fachada ilustrada del Colón. si el archivo todavía no
   está, queda el degradé nocturno como respaldo (misma técnica que
   .footer__bg-img: la imagen es una capa más, no reemplaza nada). */
.invite__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    url(../assets/marca/teatro-exterior-desktop.png),
    linear-gradient(180deg, var(--night-2) 0%, var(--stage) 100%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
@media (max-width: 620px) {
  .invite__bg { background-image: url(../assets/marca/teatro-exterior-mobile.png), linear-gradient(180deg, var(--night-2) 0%, var(--stage) 100%); }
}

/* oscurece la foto para que el cartel se lea encima, igual criterio
   que .footer__bg-tint sobre el escenario del pie */
.invite__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 68% 62% at 50% 46%, rgba(8,10,24,.38) 0%, rgba(8,10,24,.74) 100%),
    linear-gradient(180deg, rgba(8,10,24,.6) 0%, rgba(8,10,24,.3) 32%, rgba(8,10,24,.3) 68%, rgba(8,10,24,.7) 100%);
}

/* cono de luz suave detrás del cartel — el mismo lenguaje del
   escenario que se ve adentro del quiz */
.invite__spot {
  position: absolute; left: 50%; top: -18%;
  z-index: 1;
  width: 62%; height: 120%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(244,166,74,.32) 0%, transparent 72%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  filter: blur(6px);
}

/* logo de la editorial, en la esquina — mismo tratamiento que el
   logo del footer (imagen + resplandor dorado detrás) */
.invite__brand {
  position: absolute; left: clamp(16px, 3vw, 32px); top: clamp(16px, 3vw, 32px);
  z-index: 2;
  width: clamp(46px, 6vw, 68px);
  display: grid; place-items: center;
}
.invite__brand-glow {
  position: absolute; inset: -55%;
  background: radial-gradient(circle, rgba(244,166,74,.45), transparent 65%);
  z-index: 0;
}
.invite__brand img {
  position: relative; z-index: 1;
  width: 100%;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
}

.invite__inner {
  position: relative; z-index: 2;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.invite__ribbon { margin-bottom: 1.5rem; }

.invite__title {
  font-family: var(--font-brush);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--cream);
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  line-height: 1.08;
  text-shadow: 0 6px 26px rgba(0,0,0,.5);
  margin-bottom: 1.1rem;
}

.invite__text {
  font-family: var(--font-marker);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.6;
  color: var(--cream-dim);
  max-width: 46ch;
  margin-bottom: 2.1rem;
}
.invite__text em { color: var(--cream); font-style: italic; }

/* botón "boleto" — mismo espíritu que la cinta de la autora, pero
   grande y clickeable, con un latido suave que invita al clic */
.invite__cta {
  position: relative;
  display: inline-flex; align-items: center;
  background: var(--red);
  color: var(--gold);
  font-family: var(--font-brush);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(1.1rem, 2.3vw, 1.4rem);
  padding: .8em 2.1em;
  border: none;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1em) 50%, 100% 100%, 0 100%, 1em 50%);
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  animation: invite-glow 2.6s ease-in-out infinite;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.invite__cta:hover, .invite__cta:focus-visible {
  transform: translateY(-4px) scale(1.03);
  background: var(--gold);
  color: var(--ink);
  animation-play-state: paused;
  box-shadow: 0 18px 34px rgba(0,0,0,.5);
  outline: none;
}

@keyframes invite-glow {
  0%, 100% { box-shadow: 0 14px 30px rgba(0,0,0,.45); }
  50%      { box-shadow: 0 14px 34px rgba(236,181,63,.55); }
}

@media (max-width: 620px) {
  .invite { min-height: 60vh; padding: 8vh 7vw; }
}


/* =================================================================
   4 · FOOTER
   ================================================================= */
.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--stage);
  /* arriba con aire, abajo más justo (sacamos el espacio sobrante) */
  padding: clamp(2.4rem, 6vw, 4rem) 6vw clamp(1.1rem, 3vw, 1.7rem);
}
/* borde superior: sombra oscura del escenario que funde la imagen (nada de azul) */
.footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: clamp(90px, 14vh, 180px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
                var(--stage) 0%,
                rgba(21,16,15,.7) 42%,
                transparent 100%);
}

/* fondo: imagen del escenario (con respaldo si falta el archivo) */
.footer__bg { position: absolute; inset: 0; z-index: 0; }
.footer__bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* oscurece un poco la imagen para que el texto se lea + mantiene el spotlight */
.footer__bg-tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 42% 95% at 15% 122%, rgba(244,166,74,.30), transparent 60%),
    linear-gradient(180deg, rgba(21,16,15,.42) 0%, rgba(21,16,15,.72) 100%);
}

.footer__inner {
  position: relative; z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}

.footer__sig { display: flex; align-items: center; gap: .9rem; }
.footer__logo {
  position: relative;
  width: clamp(56px, 8vw, 84px);
  flex-shrink: 0;
  display: grid; place-items: center;
}
.footer__logo-glow {
  position: absolute; inset: -40%;
  background: radial-gradient(circle, rgba(244,166,74,.5), transparent 65%);
  z-index: 0;
}
.footer__logo img { position: relative; z-index: 1; width: 100%; }
.footer__logo.is-missing { width: 64px; height: 64px; }
.footer__logo.is-missing img { display: none; }
.footer__logo.is-missing::after {
  content: "🐾";
  position: relative; z-index: 1; font-size: 1.6rem;
}
/* nombre de la editorial en letra manuscrita, junto a la perrita */
.footer__orlando {
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.05;
  color: var(--cream);
}

.footer__links {
  display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.4rem);
  font-family: var(--font-marker);
  font-size: clamp(1.05rem, 2vw, 1.5rem);
}
.footer__sep { color: var(--cream-dim); opacity: .6; }
.footer__link {
  position: relative;
  text-decoration: none;
  color: var(--cream);
  padding-bottom: 3px;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.footer__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2.5px; border-radius: 3px;
  background: currentColor;
  transform: scaleX(.6);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.footer__link:hover {
  color: var(--gold);
  transform: translateY(-3px) rotate(-2deg);
}
.footer__link:hover::after { transform: scaleX(1); }

/* --- firma de cierre: crédito de diseño --- */
.footer__credit {
  position: relative;
  z-index: 2;
  margin: clamp(1.3rem, 4vw, 2rem) auto 0;
  text-align: center;
  font-family: var(--font-script);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  letter-spacing: .015em;
  color: var(--cream-dim);
}
.footer__credit-link {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.6px solid transparent;
  transition: border-color .2s var(--ease);
}
.footer__credit-link:hover,
.footer__credit-link:focus-visible {
  border-color: var(--gold);
  outline: none;
}
.footer__credit-mark {
  margin-right: .35em;
  color: var(--gold);
  font-family: var(--font-marker);
}


/* =================================================================
   PÁGINAS TIPO CÓMIC  —  se abren sobre el mismo sitio
   estilo: hoja de papel + viñetas con marco de trazo a mano
   ================================================================= */
html.comic-open { overflow: hidden; }

.comic {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(2rem, 5vw, 3.5rem);
}
.comic[hidden] { display: none; }

/* el SVG del filtro no ocupa lugar */
.comic__defs { position: absolute; width: 0; height: 0; }

.comic__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 24, .8);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  animation: comic-fade .3s var(--ease) both;
}

.comic__viewport {
  position: relative;
  z-index: 1;
  width: min(840px, 100%);
  margin: 0 auto;
}

/* botón de cerrar — círculo dibujado a mano, arriba a la derecha */
.comic__close {
  position: absolute;
  top: -16px; right: -16px;
  z-index: 3;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
  transition: transform .25s var(--ease), background-color .25s;
}
.comic__close:hover,
.comic__close:focus-visible {
  transform: rotate(90deg) scale(1.08);
  background: var(--gold);
  outline: none;
}
.comic__close svg { width: 24px; height: 24px; }
.comic__close path {
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: round;
}

/* la hoja de papel */
.comic__page {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(1.8rem, 5vw, 3.6rem);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  animation: comic-in .42s var(--ease) both;
}
.comic__page[hidden] { display: none; }

/* marco exterior de toda la hoja, con el trazo "a mano" */
.comic__page::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 3px solid var(--ink);
  filter: url(#comic-rough);
  pointer-events: none;
}

/* --- encabezado de la página --- */
.comic__head {
  text-align: center;
  margin-bottom: clamp(1.4rem, 4vw, 2.4rem);
}
.comic__kicker {
  display: block;
  font-family: var(--font-marker);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: clamp(.68rem, 1.5vw, .86rem);
  opacity: .55;
  margin-bottom: .4rem;
}
.comic__title {
  display: inline-block;
  font-family: var(--font-brush);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 8vw, 4.4rem);
  line-height: .95;
  letter-spacing: .015em;
  transform: rotate(-2deg);
}

/* --- viñetas --- */
.comic__grid {
  display: grid;
  grid-template-columns: 1fr 1.18fr;
  gap: clamp(1rem, 3vw, 1.7rem);
  margin-bottom: clamp(1rem, 3vw, 1.7rem);
}

.panel {
  position: relative;
  background: #fff;
  padding: clamp(1.1rem, 3.2vw, 1.7rem);
}
/* marco de cada viñeta — línea normal, desplazada para que tiemble "a mano" */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2.6px solid var(--ink);
  filter: url(#comic-rough);
  pointer-events: none;
}
.panel p {
  font-family: var(--font-marker);
  font-size: clamp(1rem, 2.3vw, 1.28rem);
  line-height: 1.5;
}
.panel em { font-style: italic; }

.panel--wide { margin-bottom: clamp(1rem, 3vw, 1.7rem); }
.panel--text {
  display: flex;
  align-items: center;
  transform: rotate(.9deg);
}

/* viñeta con la foto de la autora */
.panel--photo {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  transform: rotate(-1.2deg);
}
.panel__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.panel__cap {
  font-family: var(--font-script);
  font-size: clamp(1.15rem, 2.8vw, 1.6rem);
  text-align: center;
  line-height: 1;
}
/* link al Instagram de la autora, debajo de la foto */
.panel__ig {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: .42em;
  margin-top: .15rem;
  font-family: var(--font-marker);
  font-size: clamp(1rem, 2.3vw, 1.22rem);
  color: var(--ink);
  text-decoration: none;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.panel__ig span {
  border-bottom: 2.4px solid currentColor;
  padding-bottom: 1px;
}
.panel__ig-ico {
  width: 1.15em; height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.panel__ig-dot { fill: currentColor; stroke: none; }
.panel__ig:hover,
.panel__ig:focus-visible {
  color: var(--red);
  transform: rotate(-2deg) scale(1.05);
  outline: none;
}
/* respaldo si todavía no está autora.png */
.panel--photo.is-missing {
  min-height: 260px;
  align-items: center;
  justify-content: center;
}
.panel--photo.is-missing .panel__img,
.panel--photo.is-missing .panel__cap { display: none; }
.panel--photo.is-missing::after {
  content: "FOTO DE LA AUTORA";
  font-family: var(--font-marker);
  letter-spacing: .12em;
  font-size: .9rem;
  opacity: .4;
  text-align: center;
}

/* viñeta con el logo de la editorial (página "La editorial") */
.panel--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.6rem, 5vw, 2.6rem);
  margin-bottom: clamp(1rem, 3vw, 1.7rem);
  transform: rotate(-1deg);
}
.panel__logo {
  width: min(230px, 62%);
  height: auto;
  /* el logo viene en blanco: lo pasamos a negro para que se vea
     sobre el papel y combine con la tinta del cómic */
  filter: brightness(0);
}
/* respaldo si todavía no está orlando-logo.png */
.panel--logo.is-missing { min-height: 130px; }
.panel--logo.is-missing .panel__logo { display: none; }
.panel--logo.is-missing::after {
  content: "THE ORLANDO BOOKS";
  font-family: var(--font-brush);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  text-align: center;
}

/* --- globo de diálogo con la frase --- */
.bubble {
  position: relative;
  width: min(36ch, 100%);
  margin: clamp(1.8rem, 5vw, 2.8rem) auto 0;
  padding: clamp(1.5rem, 4.5vw, 2.3rem) clamp(1.7rem, 5vw, 2.6rem);
  background: #fff;
  border-radius: 47% 53% 58% 42% / 56% 55% 45% 44%;
  text-align: center;
}
.bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2.8px solid var(--ink);
  border-radius: inherit;
  filter: url(#comic-rough);
  pointer-events: none;
}
.bubble__text {
  font-family: var(--font-brush);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 3.4vw, 1.95rem);
  line-height: 1.22;
}
.bubble__text::before { content: "“"; }
.bubble__text::after  { content: "”"; }
.bubble__by {
  display: block;
  margin-top: .55rem;
  font-family: var(--font-script);
  font-size: clamp(1.1rem, 2.8vw, 1.5rem);
  opacity: .75;
}


/* --- página PREVENTA: portada del libro + datos de compra --- */
.comic__grid--buy { align-items: center; }

/* la portada "flota" como un libro sobre el papel (sin marco de viñeta:
   el libro ya trae su propio borde) */
.panel--cover {
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-1.6deg);
}
.panel--cover::before { display: none; }
.panel__cover {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.35));
}
/* respaldo si todavía no está libro.jpg */
.panel--cover.is-missing {
  min-height: 300px;
  border: 2.6px dashed rgba(32,25,19,.4);
}
.panel--cover.is-missing .panel__cover { display: none; }
.panel--cover.is-missing::after {
  content: "PORTADA DEL LIBRO";
  font-family: var(--font-marker);
  letter-spacing: .12em;
  font-size: .9rem;
  opacity: .45;
  text-align: center;
}

/* viñeta con los datos de compra + botón */
.panel--buy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(.7rem, 2.2vw, 1.05rem);
  transform: rotate(.7deg);
}
.panel--buy .buy__lead {
  font-family: var(--font-brush);
  text-transform: uppercase;
  font-size: clamp(1.35rem, 4vw, 2.1rem);
  line-height: 1.05;
}
.buy__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .38rem;
  font-family: var(--font-marker);
  font-size: clamp(1rem, 2.3vw, 1.22rem);
}
.buy__list li {
  position: relative;
  padding-left: 1.5em;
}
.buy__list li::before {
  content: "♪";
  position: absolute; left: 0; top: 0;
  color: var(--red);
}
.buy__list em { font-style: italic; opacity: .8; }
.panel--buy .buy__perk {
  font-family: var(--font-marker);
  font-size: clamp(.92rem, 2vw, 1.08rem);
  line-height: 1.4;
}
.buy__perk-mark { color: var(--red); margin-right: .2em; }
.buy__perk strong { font-weight: 400; border-bottom: 2.2px solid var(--gold); }
.buy__perk em { font-style: italic; opacity: .7; }

/* botón de compra — estilo cómic (tinta roja + trazo a mano) */
.buy__btn {
  position: relative;
  align-self: flex-start;
  margin-top: .3rem;
  display: inline-block;
  background: var(--red);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--font-brush);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(1.2rem, 3.2vw, 1.6rem);
  line-height: 1;
  padding: .62em 1.15em;
  transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s;
}
.buy__btn::before {
  content: "";
  position: absolute; inset: 0;
  border: 2.8px solid var(--ink);
  filter: url(#comic-rough);
  pointer-events: none;
}
.buy__btn:hover,
.buy__btn:focus-visible {
  background: var(--gold);
  color: var(--ink);
  transform: scale(1.05) rotate(-1.6deg);
  outline: none;
}


/* =================================================================
   PÁGINA · QUIZ "¿QUÉ PERSONAJE SOS?"
   la sala del Teatro Colón ilustrada, mirando hacia el telón —
   la misma ilustración del libro. Cada personaje "vive" ahí
   adelante, bajo su propio momento de luz.
   ================================================================= */
.quiz-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(440px, 64vh, 640px);
  margin-bottom: clamp(1rem, 3vw, 1.7rem);
}
/* marco "a mano" del escenario, igual que el resto de las viñetas */
.quiz-stage::after {
  content: "";
  position: absolute; inset: 0;
  border: 2.6px solid var(--ink);
  filter: url(#comic-rough);
  pointer-events: none;
  z-index: 6;
}

/* fondo real: la sala del Colón. si el archivo todavía no está,
   queda el degradé como respaldo (misma técnica que .invite__bg) */
.quiz-stage__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    url(../assets/marca/teatro-interior-desktop.png),
    linear-gradient(180deg, #6d2420 0%, #b5502c 46%, #eda149 78%, #f4c26a 100%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
@media (max-width: 620px) {
  .quiz-stage__bg { background-image: url(../assets/marca/teatro-interior-mobile.png), linear-gradient(180deg, #6d2420 0%, #b5502c 46%, #eda149 78%, #f4c26a 100%); }
}

/* cono de luz — sólo se enciende sobre el resultado */
.quiz-stage__spotlight {
  position: absolute; left: 50%; top: -12%;
  width: 74%; height: 92%;
  transform: translateX(-50%);
  z-index: 3;
  background: linear-gradient(180deg, rgba(244,166,74,.55) 0%, transparent 72%);
  clip-path: polygon(43% 0, 57% 0, 88% 100%, 12% 100%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.quiz-stage.is-result .quiz-stage__spotlight { opacity: 1; }

/* el personaje del momento, parado justo arriba de la hoja.
   ojo: cada PNG (Cielo, Tomkinson, Margaux, Simón) viene recortado
   con una proporción distinta (retrato, cuadrado, primer plano...),
   así que en vez de adivinar un ancho/alto fijo, el personaje es un
   item más del flex del escenario (se apila solo, arriba de la hoja,
   sin superposición manual) y se limita por ALTO máximo con
   width/height:auto — así nunca se recorta, sea cual sea su forma. */
.quiz-stage__character {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  margin: 0 auto -22px;
  transition: opacity .4s var(--ease);
}
.quiz-stage__character img {
  display: block;
  width: auto; height: auto;
  max-width: min(72vw, 260px);
  max-height: clamp(150px, 30vh, 260px);
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.4));
}
/* respaldo: todavía no subieron el PNG de este personaje */
.quiz-stage__character.is-missing {
  width: 150px; height: 150px;
  display: flex; align-items: flex-start; justify-content: center;
  text-align: center;
  border: 2.5px dashed rgba(251,248,239,.75);
  border-radius: 16px;
  background: rgba(20,10,8,.28);
  padding: .9rem .6rem 0;
}
.quiz-stage__character.is-missing img { display: none; }
.quiz-stage__character.is-missing::after {
  content: attr(data-name);
  font-family: var(--font-marker);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .82rem;
  color: var(--cream);
}

/* la hoja donde vive la pregunta / resultado, apoyada sobre el piso */
.quiz-panel {
  position: relative;
  z-index: 5;
  margin: 0 clamp(.6rem, 3vw, 1.7rem) clamp(.9rem, 3vw, 1.4rem);
  background: rgba(251,248,239,.97);
  padding: clamp(1.2rem, 3.6vw, 2rem);
}
.quiz-panel::before {
  content: "";
  position: absolute; inset: 0;
  border: 2.4px solid var(--ink);
  filter: url(#comic-rough);
  pointer-events: none;
}

.quiz-panel__section { display: none; }
.quiz-panel__section.is-active { display: block; animation: comic-in .4s var(--ease) both; }

.quiz-panel__eyebrow {
  font-family: var(--font-marker);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
  color: var(--red);
  margin-bottom: .5rem;
}
.quiz-panel__lead {
  font-family: var(--font-marker);
  font-size: clamp(1.02rem, 2.1vw, 1.24rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 52ch;
  margin-bottom: 1.15rem;
}

.quiz-panel__progress {
  font-family: var(--font-marker);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  color: var(--red);
  margin-bottom: .5rem;
}
.quiz-panel__question {
  font-family: var(--font-brush);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 2.9vw, 1.85rem);
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: 1rem;
}

.quiz-options {
  display: grid;
  gap: .6rem;
}
@media (min-width: 620px) {
  .quiz-options { grid-template-columns: 1fr 1fr; }
}

.quiz-option {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  color: var(--ink);
  border: none;
  padding: .82em 1.1em;
  font-family: var(--font-marker);
  font-size: clamp(.9rem, 1.6vw, 1rem);
  line-height: 1.35;
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), opacity .3s var(--ease);
}
.quiz-option::before {
  content: "";
  position: absolute; inset: 0;
  border: 2.2px solid var(--ink);
  filter: url(#comic-rough);
  pointer-events: none;
}
.quiz-option:hover, .quiz-option:focus-visible {
  transform: scale(1.02) rotate(-.6deg);
  background: var(--gold);
  outline: none;
}
.quiz-options.is-locked .quiz-option { cursor: default; }
.quiz-options.is-locked .quiz-option:not(.is-selected) {
  opacity: .4;
  transform: none !important;
  background: #fff;
}
.quiz-option.is-selected { background: var(--red); color: var(--paper); }

.quiz-panel__result-title {
  font-family: var(--font-brush);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4.2vw, 2.5rem);
  color: var(--ink);
  transform: rotate(-1.2deg);
  margin-bottom: .6rem;
}
.quiz-panel__result-text {
  font-family: var(--font-marker);
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
  margin-bottom: 1.3rem;
}
.quiz-panel__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* botones "tinta" — mismo código visual que el resto de los CTA del cómic */
.btn-ink {
  position: relative;
  display: inline-block;
  background: var(--red);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--font-brush);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1;
  padding: .62em 1.15em;
  border: none;
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s;
}
.btn-ink::before {
  content: "";
  position: absolute; inset: 0;
  border: 2.6px solid var(--ink);
  filter: url(#comic-rough);
  pointer-events: none;
}
.btn-ink:hover, .btn-ink:focus-visible {
  background: var(--gold);
  color: var(--ink);
  transform: scale(1.05) rotate(-1.4deg);
  outline: none;
}
.btn-ink--ghost { background: #fff; color: var(--ink); }
.btn-ink--ghost:hover, .btn-ink--ghost:focus-visible { background: var(--gold); color: var(--ink); }

/* avisito flotante — confirma que se copió el resultado al portapapeles */
.quiz-toast {
  position: absolute; left: 50%; bottom: 14px;
  transform: translateX(-50%) translateY(8px);
  z-index: 7;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-marker);
  font-size: .85rem;
  padding: .6em 1.1em;
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(0,0,0,.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.quiz-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 620px) {
  .quiz-stage { min-height: clamp(540px, 84vh, 780px); }
  .quiz-panel__actions { flex-direction: column; align-items: stretch; }
  .quiz-panel__actions .btn-ink { text-align: center; }
}


/* =================================================================
   VISTA PREVIA PARA COMPARTIR  —  se abre sobre todo (incluso sobre
   el popup del quiz) con la imagen ya armada, lista para compartir,
   descargar, o guardar con una pulsación larga
   ================================================================= */
html.share-open { overflow: hidden; }

.share-preview {
  position: fixed; inset: 0;
  z-index: 55;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.4rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem);
  display: flex; align-items: center; justify-content: center;
}
.share-preview[hidden] { display: none; }

.share-preview__backdrop {
  position: fixed; inset: 0;
  background: rgba(8, 10, 24, .82);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  animation: comic-fade .3s var(--ease) both;
}

.share-preview__card {
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  background: var(--paper);
  color: var(--ink);
  padding: clamp(1.4rem, 4vw, 2rem);
  text-align: center;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  animation: comic-in .35s var(--ease) both;
}
.share-preview__card::before {
  content: "";
  position: absolute; inset: 8px;
  border: 3px solid var(--ink);
  filter: url(#comic-rough);
  pointer-events: none;
}

.share-preview__close {
  position: absolute;
  top: -16px; right: -16px;
  z-index: 3;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
  transition: transform .25s var(--ease), background-color .25s;
}
.share-preview__close:hover, .share-preview__close:focus-visible {
  transform: rotate(90deg) scale(1.08);
  background: var(--gold);
  outline: none;
}
.share-preview__close svg { width: 22px; height: 22px; }
.share-preview__close path {
  stroke: currentColor; stroke-width: 4.5; stroke-linecap: round;
}

.share-preview__status {
  font-family: var(--font-marker);
  font-size: 1.1rem;
  padding: 2.4rem 0;
}

.share-preview__img {
  display: block;
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 14px 30px rgba(0,0,0,.3);
  margin-bottom: 1.2rem;
}

.share-preview__actions {
  display: flex; flex-wrap: wrap; gap: .7rem;
  justify-content: center;
  margin-bottom: .9rem;
}
.share-preview__actions .btn-ink { flex: 1 1 auto; }

.share-preview__hint {
  font-family: var(--font-marker);
  font-size: .88rem;
  opacity: .7;
  line-height: 1.4;
}


/* =================================================================
   MENÚ HAMBURGUESA  —  botón + panel desplegable (estilo cómic)
   el botón sólo aparece en mobile
   ================================================================= */
html.menu-open { overflow: hidden; }

/* --- botón hamburguesa --- */
.burger {
  display: none;                 /* en desktop no se ve (ver media query) */
  position: fixed;
  top: 14px; right: 14px;
  z-index: 49;
  width: 54px; height: 54px;
  place-items: center;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
  transition: background-color .25s var(--ease);
}
.burger:hover,
.burger:focus-visible { background: var(--gold); outline: none; }

.burger__box { position: relative; width: 24px; height: 16px; }
.burger__line {
  position: absolute; left: 0; right: 0;
  height: 3px; border-radius: 3px;
  background: var(--ink);
  transition: transform .25s var(--ease), opacity .2s;
}
.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger__line:nth-child(3) { bottom: 0; }
/* abierto: las tres líneas se cruzan en una X */
.burger.is-open .burger__line:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.burger.is-open .burger__line:nth-child(2) { opacity: 0; }
.burger.is-open .burger__line:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* --- panel desplegable --- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 48;
  overflow-y: auto;
}
.menu[hidden] { display: none; }

.menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 24, .8);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  animation: comic-fade .3s var(--ease) both;
}

/* la hoja de papel del menú */
.menu__panel {
  position: relative;
  width: min(380px, calc(100% - 26px));
  margin: 80px 13px 40px auto;   /* baja debajo del botón, pegado a la derecha */
  background: var(--paper);
  color: var(--ink);
  padding: clamp(1.5rem, 6vw, 2.2rem) clamp(1.3rem, 5vw, 1.8rem);
  box-shadow: 0 26px 60px rgba(0,0,0,.55);
  animation: menu-drop .32s var(--ease) both;
}
/* marco "a mano" de la hoja */
.menu__panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 3px solid var(--ink);
  filter: url(#comic-rough);
  pointer-events: none;
}

.menu__kicker {
  display: block;
  text-align: center;
  font-family: var(--font-marker);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  opacity: .55;
  margin-bottom: 1rem;
}

.menu__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(.7rem, 2.6vw, 1rem);
}

/* cada opción es una viñeta con marco dibujado a mano */
.menu__link {
  position: relative;
  display: block;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  font-family: var(--font-marker);
  text-transform: uppercase;
  font-size: clamp(1.25rem, 6vw, 1.7rem);
  line-height: 1.1;
  padding: .62em .6em;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.menu__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2.6px solid var(--ink);
  filter: url(#comic-rough);
  pointer-events: none;
}
.menu__link:hover,
.menu__link:focus-visible,
.menu__link:active {
  background: var(--gold);
  transform: scale(1.03) rotate(-1.2deg);
  outline: none;
}


/* =================================================================
   MÚSICA DE FONDO  —  botón redondo para encender / apagar
   mismo estilo que el botón hamburguesa (papel + tinta)
   ================================================================= */
.music {
  position: fixed;
  top: 14px; left: 14px;
  z-index: 49;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.music:hover,
.music:focus-visible {
  background: var(--gold);
  transform: scale(1.06) rotate(-6deg);
  outline: none;
}

.music__svg { width: 27px; height: 27px; overflow: visible; }

/* la doble nota musical */
.music__note path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.music__head { fill: var(--ink); }

/* ondas de sonido — visibles y latiendo cuando suena la música */
.music__waves path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.music__waves { transition: opacity .2s var(--ease); }
.music:not(.is-off) .music__waves {
  animation: music-beat 1.4s ease-in-out infinite;
}

/* tachado diagonal — visible sólo con la música apagada */
.music__slash {
  stroke: var(--ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: 0;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset .25s var(--ease), opacity .2s;
}
.music.is-off .music__waves { opacity: 0; }
.music.is-off .music__slash { opacity: 1; stroke-dashoffset: 0; }


/* =================================================================
   RASTRO MUSICAL  —  destellos que deja el puntero al moverse
   ================================================================= */
.cursor-trail {
  position: fixed;
  inset: 0;
  z-index: 60;            /* por encima de todo, incluso del cómic */
  pointer-events: none;
}
.spark {
  position: absolute;
  /* left/top/font-size/--r/--dx los pone el JS */
  color: var(--glow);
  text-shadow: 0 0 8px rgba(244,166,74,.9), 0 0 2px rgba(255,255,255,.85);
  will-change: transform, opacity;
  animation: spark-pop .9s var(--ease) forwards;
}


/* =================================================================
   PANTALLA DE CARGA  —  Cielo bajo un spotlight mientras carga
   ================================================================= */
/* si no hay JS no se muestra (nadie podría ocultarla después) */
html:not(.js) .loader { display: none; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;                 /* por encima de todo */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(.6rem, 3vw, 1.6rem);
  background:
    radial-gradient(ellipse 62% 52% at 50% 40%, #1d2d56 0%, transparent 72%),
    linear-gradient(180deg, #0c1330 0%, #06091c 100%);
  /* respaldo: si el JS no la oculta, se va sola a los 7s */
  animation: loader-failsafe 1ms linear 7s forwards;
}
/* el JS le pone esta clase cuando el sitio terminó de cargar */
.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .7s var(--ease), visibility 0s .7s;
}

.loader__stage {
  position: relative;
  display: grid;
  place-items: center;
  width:  clamp(170px, 42vw, 270px);
  height: clamp(170px, 42vw, 270px);
}

/* cono de luz del spotlight — baja desde arriba sobre Cielo */
.loader__spot {
  position: absolute;
  left: 50%; top: -46%;
  width: 180%; height: 172%;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(244,166,74,.50) 0%,
    rgba(244,166,74,.12) 52%,
    transparent 80%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  filter: blur(8px);
  animation: loader-sway 3.6s ease-in-out infinite;
}

/* la carita de Cielo (el mismo PNG que el favicon) */
.loader__face {
  position: relative;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 28px rgba(244,166,74,.55))
          drop-shadow(0 16px 22px rgba(0,0,0,.6));
  animation: loader-bob 2.6s ease-in-out infinite;
}

/* notitas musicales que suben (la perrita canta) */
.loader__note {
  position: absolute;
  color: var(--glow);
  font-size: clamp(1.1rem, 3vw, 1.7rem);
  text-shadow: 0 0 10px rgba(244,166,74,.85);
  opacity: 0;
  animation: loader-note 2.9s ease-in-out infinite;
}
.loader__note--1 { left: 15%;  bottom: 30%; animation-delay: 0s;   }
.loader__note--2 { right: 13%; bottom: 24%; animation-delay: .95s; }
.loader__note--3 { right: 27%; bottom: 46%; animation-delay: 1.9s; }

.loader__text {
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 4.4vw, 2rem);
  color: var(--cream);
  letter-spacing: .015em;
  animation: loader-pulse 1.9s ease-in-out infinite;
}


/* =================================================================
   ANIMACIONES
   ================================================================= */
@keyframes float {
  0%, 100% { transform: translateY(0)     rotate(0); }
  50%      { transform: translateY(-16px) rotate(1.4deg); }
}
@keyframes nudge {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(3px, 3px); }
}
@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(34vw); }
}
@keyframes twinkle {
  0%, 100% { opacity: .35; }
  50%      { opacity: .7; }
}
@keyframes wordin {
  from { opacity: 0; transform: translateY(20px) rotate(-4deg); }
  to   { opacity: 1; transform: translateY(0)    rotate(0); }
}
@keyframes comic-in {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes comic-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* destellos del puntero — aparecen, suben flotando y se desvanecen */
@keyframes spark-pop {
  0%   { opacity: 0;
         transform: translate(-50%, -50%) scale(.3) rotate(var(--r, 0deg)); }
  25%  { opacity: 1;
         transform: translate(-50%, -50%) scale(1) rotate(var(--r, 0deg)); }
  100% { opacity: 0;
         transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 42px))
                    scale(.6) rotate(calc(var(--r, 0deg) + 55deg)); }
}
@keyframes menu-drop {
  from { opacity: 0; transform: translateY(-14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}
/* ondas de sonido del botón de música — laten suave */
@keyframes music-beat {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}
/* pantalla de carga */
@keyframes loader-bob {
  0%, 100% { transform: translateY(0)     rotate(-1.6deg); }
  50%      { transform: translateY(-12px) rotate(1.6deg); }
}
@keyframes loader-sway {
  0%, 100% { transform: translateX(-50%) rotate(-2.6deg); }
  50%      { transform: translateX(-50%) rotate(2.6deg); }
}
@keyframes loader-note {
  0%   { opacity: 0; transform: translateY(0)     scale(.6) rotate(-12deg); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-92px) scale(1)  rotate(20deg); }
}
@keyframes loader-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@keyframes loader-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}


/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 760px) {
  .hero { min-height: 600px; }

  .hero__title { top: 5%; }
  .hero__title-img {
    width: 78vw;
    /* en mobile el título va chico: sombra mínima para que no se
       arme una "caja" oscura detrás de las letras */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
  }
  .hero__title-line,
  .hero__title-line:first-child { font-size: clamp(1.2rem, 5.2vw, 2.1rem); }

  /* en mobile las etiquetas sueltas se reemplazan por el menú */
  .tag    { display: none; }
  .burger { display: grid; }

  /* animalitos un toque más grandes y subidos: achican el hueco
     entre el título y el perro del medio */
  .critter--cat1 { width: clamp(100px, 28vw, 160px); bottom: 13vh; }
  .critter--dog  { width: clamp(215px, 66vw, 330px); bottom: 7vh; }
  .critter--cat2 { width: clamp(245px, 68vw, 430px); bottom: 5vh; }
  /* sombra cortita también para los animalitos en mobile */
  .critter img { filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }

  /* subimos los créditos para que la cinta + "Ilustraciones de..."
     no se monten con el indicador de "scroll" de abajo */
  .hero__credits { bottom: 10vh; gap: .5rem; }
  .ribbon__text  { padding: .5em 1.4em; }

  .footer__inner { flex-direction: column; text-align: center; }
  .footer__sig { flex-direction: column; }

  /* páginas tipo cómic: una sola columna */
  .comic { padding: clamp(1rem, 4vw, 2rem); }
  .comic__grid { grid-template-columns: 1fr; }
  .comic__close { top: -10px; right: -10px; width: 46px; height: 46px; }
}


/* =================================================================
   ACCESIBILIDAD — respeta "reducir movimiento"
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .critter__bob,
  .hero__scroll-arrow,
  .story__cloud,
  .story__stars,
  .invite__cta,
  .music__waves,
  .loader__face,
  .loader__spot,
  .loader__note,
  .loader__text { animation: none !important; }
  .hero__bg-img,
  .critter { transition: none; }
  .js .word { opacity: 1; }
  .story__text.is-in .word { animation: none; }
  .comic__page,
  .comic__backdrop,
  .menu__panel,
  .menu__backdrop { animation: none !important; }
}