/* ==========================================================================
   Serenata al corazón · Sonia — estilos de la experiencia
   Bloque 3.1: base, sobre 3D, estados y controles.
   ========================================================================== */

:root {
  /* Paleta (Fase 2, §1.1) */
  --noche-0: #07050d;
  --noche-1: #0e0818;
  --ciruela: #1a0b1e;
  --ciruela-luz: #3a1538;
  --oro: #f3d28e;
  --champan: #fff1c9;
  --rosa: #f4b8c5;
  --crema: #fff5e8;
  --granate: #7a1f35;

  /* Tipografía */
  --f-script: "Pinyon Script", "Segoe Script", cursive;
  --f-serif: "Cormorant Garamond", Georgia, serif;
  --f-sans: "Montserrat", system-ui, sans-serif;

  /* Movimiento */
  --ease-entrada: cubic-bezier(.16, 1, .3, 1);
  --ease-salida: cubic-bezier(.7, 0, .84, 0);

  /* Zonas seguras */
  --seg-arr: env(safe-area-inset-top, 0px);
  --seg-abj: env(safe-area-inset-bottom, 0px);
  --seg-der: env(safe-area-inset-right, 0px);

  /* Sobre */
  --sobre-w: min(78vw, 340px);
  --sobre-h: calc(var(--sobre-w) * 2 / 3);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--noche-1);
  color: var(--crema);
  font-family: var(--f-serif);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}

body {
  height: 100dvh;
  /* Cielo nocturno base. El cielo vivo (canvas) llega en el Bloque 3.2. */
  background:
    radial-gradient(ellipse 120% 60% at 50% 105%, #3a153899 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 42%, #f3d28e0d 0%, transparent 70%),
    linear-gradient(180deg, var(--noche-1) 0%, var(--ciruela) 55%, var(--ciruela-luz) 100%);
}

button { font: inherit; color: inherit; }

/* ---------- Capas de escena (z0–z3) ---------- */
#escena, #escena canvas, #fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#textos { position: fixed; inset: 0; pointer-events: none; z-index: 2; }

/* 3.2-R · resplandor (se amplía con suavizado y se suma como luz) */
#brillo { mix-blend-mode: screen; opacity: .6; image-rendering: auto; }
/* 3.2-R · viñeta cinematográfica */
#vineta {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 70% at 50% 46%, transparent 55%, rgba(6, 2, 10, .38) 82%, rgba(4, 1, 8, .7) 100%);
}
/* 3.2-R · grano fino de película (casi imperceptible) */
#grano {
  position: fixed;
  inset: -50%;
  z-index: 5;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grano .5s steps(4) infinite;
}
@keyframes grano {
  0% { transform: translate(0, 0) } 25% { transform: translate(-3%, 2%) }
  50% { transform: translate(2%, -3%) } 75% { transform: translate(-2%, -1%) } 100% { transform: translate(0, 0) }
}
@media (prefers-reduced-motion: reduce) { #grano { animation: none; } }
#fx { z-index: 3; }

/* ---------- Portada (z4) ---------- */
#portada {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
  padding: calc(24px + var(--seg-arr)) 16px calc(24px + var(--seg-abj));
  text-align: center;
}

.kicker {
  margin: 0;
  font: 500 .7rem/1 var(--f-sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--oro);
}
.portada-kicker { align-self: end; margin-bottom: clamp(28px, 6vh, 56px); }

.portada-pie { align-self: start; margin-top: clamp(30px, 6vh, 60px); min-height: 5.5em; }
.indicacion {
  margin: 0 0 10px;
  font: 500 .66rem/1.4 var(--f-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #eadbc8;
}
.indicacion.volumen { opacity: .72; }
.preparando {
  margin: 14px 0 0;
  font: italic 500 1rem var(--f-serif);
  color: #d9c7cf;
  opacity: 0;
  transition: opacity .6s;
}
body.audio-sin-datos .preparando { opacity: 1; }
.puntos i {
  display: inline-block;
  width: 4px; height: 4px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--oro);
  animation: punto 1.2s ease-in-out infinite;
}
.puntos i:nth-child(2) { animation-delay: .2s; }
.puntos i:nth-child(3) { animation-delay: .4s; }

/* Aparición inicial de la portada */
body.estado-cargando #portada { opacity: 0; }
#portada { transition: opacity 1.2s var(--ease-entrada); }

/* ---------- Sobre 3D ---------- */
.sobre-flotar {
  animation: flotar 4.2s ease-in-out infinite;
  will-change: transform;
}

.sobre {
  position: relative;
  display: block;
  width: var(--sobre-w);
  height: var(--sobre-h);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 1200px;
  border-radius: 8px;
  transform: rotate(-1.5deg);
  filter: drop-shadow(0 22px 34px #0009) drop-shadow(0 0 40px #f3d28e26);
}
.sobre:focus-visible { outline: 2px solid var(--oro); outline-offset: 10px; }

.sobre > span { position: absolute; display: block; }

/* Textura de papel: grano sutil con SVG en línea (<1 KB) */
.sobre-dorso, .sobre-bolsillo, .solapa-cara, .carta {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--papel, linear-gradient(160deg, #f8eee2, #e9d8c3));
}

.sobre-dorso {
  inset: 0;
  z-index: 0;
  border-radius: 8px;
  --papel: linear-gradient(170deg, #e2cfb6, #cdb596);
  box-shadow: inset 0 0 30px #8a6a4433;
}

.carta {
  z-index: 1;
  left: 6%; right: 6%; top: 7%;
  height: 86%;
  border-radius: 4px;
  --papel: linear-gradient(175deg, #fffaf2, #f3e6d3);
  box-shadow: 0 -2px 10px #5a3d2033;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 9%;
  color: #7a4b3a;
  transform-origin: 50% 40%;
  will-change: transform, filter, opacity;
}
.carta-filo { position: absolute; inset: 6px; border: 1px solid #d9b46e99; border-radius: 3px; }
.carta-para { font: 500 .52rem var(--f-sans); letter-spacing: .3em; color: #b08a55; }
.carta-nombre { font: 400 calc(var(--sobre-w) * .17)/1.1 var(--f-script); color: #8c5a2c; margin-top: 2px; }
.carta-linea { width: 34%; height: 1px; margin-top: 4px; background: linear-gradient(90deg, transparent, #c99a4b, transparent); }

.sobre-bolsillo {
  inset: 0;
  z-index: 2;
  border-radius: 8px;
  --papel: linear-gradient(165deg, #f6ebde, #e6d3bb);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}
/* Pliegues del bolsillo */
.sobre-bolsillo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), #b8996f88 50%, transparent calc(50% + .6px)) left bottom / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - .6px), #b8996f88 50%, transparent calc(50% + .6px)) right bottom / 50% 100% no-repeat;
  opacity: .55;
}

.solapa {
  z-index: 4;
  inset: 0 0 auto 0;
  height: 60%;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.solapa-cara {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 8px 8px 0 0;
}
.solapa-exterior { --papel: linear-gradient(180deg, #fcf5ea, #ecdcc6); }
.solapa-exterior::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 70%, #a8875c22);
}
.solapa-interior {
  transform: rotateX(180deg);
  --papel: linear-gradient(0deg, #e8d6bd, #d6bf9f);
}

/* Filo de lámina dorada con brillo que recorre el contorno */
.filo-oro {
  inset: 5px;
  z-index: 5;
  border-radius: 5px;
  pointer-events: none;
  border: 1px solid transparent;
  background: linear-gradient(115deg, #c99a4b, #fff1c9 30%, #d8ab5c 50%, #b7863c 70%, #f3d28e) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  opacity: .85;
}
.filo-oro::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(115deg, transparent 40%, #ffffffcc 50%, transparent 60%) 0 0 / 300% 100%;
  animation: brillo-filo 4s ease-in-out infinite;
}

/* Sello de lacre */
.sello {
  z-index: 6;
  left: 50%;
  top: 60%;
  width: 26%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.sello-mitad {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 3px 4px #3a0a1666);
  will-change: transform, opacity;
}
.sello-izq { clip-path: polygon(0 0, 54% 0, 47% 38%, 53% 62%, 46% 100%, 0 100%); }
.sello-der { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%, 53% 62%, 47% 38%); }
/* Latido del sello en espera (en el contenedor, para no chocar con la apertura) */
body.estado-espera .sello { animation: latido 1.6s ease-in-out infinite; }
.sello::before {
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #f3d28e55, transparent);
  opacity: 0;
}
body.estado-espera .sello::before { animation: halo 1.6s ease-in-out infinite; }

/* Chispas del sello (se generan por JS) */
.chispas { z-index: 7; left: 50%; top: 60%; width: 0; height: 0; }
.chispa {
  position: absolute;
  left: -3px; top: -3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--oro) 45%, transparent 70%);
  opacity: 0;
  will-change: transform, opacity;
}

/* Destello carta → luz */
#destello {
  position: fixed;
  inset: -10%;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, #fffaf0 0%, #ffe9c2 22%, #f6cf8acc 42%, #f3d28e44 60%, transparent 78%);
  mix-blend-mode: screen;
  opacity: 0;
}

/* Al abrir, la portada deja de capturar toques fuera del sobre */
body.estado-abriendo #portada,
body.estado-reproduciendo #portada,
body.estado-pausado #portada,
body.estado-terminado #portada { pointer-events: none; }
body.estado-abriendo .sobre { cursor: default; }
body.portada-oculta #portada { display: none; }

/* ---------- Controles (z5) ---------- */
#controles {
  position: fixed;
  z-index: 6;
  right: calc(14px + var(--seg-der));
  bottom: calc(14px + var(--seg-abj));
  display: flex;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .5s var(--ease-entrada), transform .5s var(--ease-entrada);
}
body.controles-visibles #controles { opacity: 1; transform: none; }
/* Durante la reproducción los controles responden aunque estén ocultos: un toque actúa y los muestra */
body.estado-reproduciendo #controles,
body.estado-pausado #controles,
body.estado-terminado #controles { pointer-events: auto; }

.control {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #f3d28e55;
  border-radius: 50%;
  background: #1a0b1e99;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.control:hover { background: #2a1430cc; border-color: #f3d28e99; }
.control:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.ico { width: 20px; height: 20px; fill: var(--crema); stroke: var(--crema); }
.ico-play, .ico-mudo { display: none; }
body.estado-pausado .ico-pausa, body.estado-terminado .ico-pausa { display: none; }
body.estado-pausado .ico-play, body.estado-terminado .ico-play { display: block; }
body.silenciado .ico-sonido { display: none; }
body.silenciado .ico-mudo { display: block; }

/* Indicador de carga durante la reproducción */
#cargando {
  position: fixed;
  z-index: 6;
  left: 50%;
  bottom: calc(26px + var(--seg-abj));
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
#cargando i { width: 5px; height: 5px; border-radius: 50%; background: var(--oro); animation: punto 1.2s ease-in-out infinite; }
#cargando i:nth-child(2) { animation-delay: .2s; }
#cargando i:nth-child(3) { animation-delay: .4s; }
body.estado-reproduciendo.audio-sin-datos #cargando { opacity: .8; }

/* ---------- Botones dorados (respaldo y final) ---------- */
#respaldo, #fin {
  position: fixed;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  pointer-events: none;
}
#fin { align-items: end; padding-bottom: calc(15vh + var(--seg-abj)); }
#respaldo[hidden], #fin[hidden] { display: none; }
.boton-dorado {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid #f3d28eaa;
  border-radius: 999px;
  background: #1a0b1ecc;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--crema);
  font: 500 .74rem var(--f-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 34px #f3d28e26;
  animation: aparecer 1.2s var(--ease-entrada) both;
}
.boton-dorado:hover { background: #2a1430e6; }
.boton-dorado:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }

/* ---------- Panel de depuración (?debug=1) ---------- */
#depuracion {
  position: fixed;
  z-index: 9;
  left: 8px;
  top: calc(8px + var(--seg-arr));
  max-width: min(94vw, 360px);
  padding: 10px 12px;
  border: 1px solid #f3d28e44;
  border-radius: 10px;
  background: #0b0610e6;
  color: #e9dfe6;
  font: 12px/1.45 ui-monospace, Consolas, monospace;
}
#depuracion b { color: var(--oro); font-weight: 600; }
#depuracion .saltos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#depuracion button {
  padding: 3px 7px;
  border: 1px solid #f3d28e55;
  border-radius: 6px;
  background: #1a0b1e;
  color: var(--crema);
  font: 11px ui-monospace, Consolas, monospace;
  cursor: pointer;
}

/* ---------- Frases (Bloque 3.2 · Fase 2, §6) ---------- */
.frase {
  position: absolute;
  left: 50%;
  top: 53%;                       /* centro de la franja de lectura 44–62 % */
  width: min(88vw, 640px);
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  font: italic 500 clamp(1.55rem, 6.4vw, 2.6rem)/1.22 var(--f-serif);
  color: var(--crema);
  /* el contraste lo da sobre todo la sombra del propio texto; la elipse de abajo solo acompaña */
  text-shadow: 0 1px 3px rgba(10, 4, 14, .7), 0 2px 18px rgba(10, 4, 14, .65), 0 0 2px #0006;
  will-change: opacity, transform;
  --vineta: 0;
}
/* Viñeta de lectura: elipse oscura muy suave detrás de la frase */
.frase::before {
  content: "";
  position: absolute;
  /* caja alta y degradado sin meseta: en frases de una línea la elipse plana anterior
     se leía como una banda oscura horizontal */
  inset: -95% -14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11, 6, 16, .6) 0%, rgba(11, 6, 16, .28) 45%, rgba(11, 6, 16, .08) 75%, rgba(11, 6, 16, 0) 100%);
  opacity: calc(var(--vineta) * 1.7);
  pointer-events: none;
}
.frase-linea { white-space: nowrap; }
.palabra {
  display: inline-block;
  opacity: 0;
  will-change: opacity, transform, filter;
}
.palabra.clave {
  --destello: 0;
  color: var(--oro);
  color: color-mix(in srgb, var(--oro) calc(55% + var(--destello) * 45%), var(--crema));
  text-shadow:
    0 2px 18px #000a,
    0 0 calc(4px + var(--destello) * 22px) rgb(243 210 142 / calc(.25 + var(--destello) * .65));
}
@media (max-width: 360px) { .frase-linea { white-space: normal; } }

/* ==========================================================================
   Nueva dirección visual · escena fotográfica
   ========================================================================== */
#escenario { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #07050d; pointer-events: none; }
.placa { position: absolute; inset: 0; visibility: hidden; }
.lienzo { position: absolute; will-change: transform; }
.foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.foto.borrosa { opacity: 0; }
.oscuro { position: absolute; inset: 0; background: #05030a; opacity: 0; }
/* faroles del sendero que se encienden (luz sobre la foto) */
.farol {
  position: absolute;
  aspect-ratio: 1;
  height: auto !important;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 232, 180, .95), rgba(255, 196, 120, .5) 32%, rgba(255, 160, 90, .12) 65%, rgba(255, 160, 90, 0) 100%);
  mix-blend-mode: screen;
  opacity: 0;
}
.tinte { position: absolute; inset: 0; mix-blend-mode: soft-light; }
.velo-luz {
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse 62% 46% at 53% 44%, #fff9ef 0%, #ffe6bd 28%, rgba(246, 196, 140, .65) 52%, rgba(240, 180, 130, 0) 80%);
  opacity: 0;
}
#fuegos { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* Retrato de Sonia: solo encuadre, fundido de bordes, gradación uniforme y luz de borde */
#retratos { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* La gradación y la luz de borde van en el contenedor (no en la imagen): así el halo
   se calcula sobre la silueta ya fundida y la máscara no lo corta en línea recta. */
.retrato {
  position: absolute; left: 50%; top: 4%; margin: 0; visibility: hidden;
  transform-origin: 50% 32%; will-change: transform, opacity;
  filter: sepia(.06) saturate(1.03) drop-shadow(0 0 16px rgba(255, 205, 140, .5));
}
.retrato img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 56%, transparent 90%), linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 56%, transparent 90%), linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-composite: intersect;
  /* sin repetición y al tamaño exacto: con una altura fraccionaria la máscara repetía
     una fila del borde y dibujaba una línea recta sobre el halo */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  /* Al escalar la capa, el compositor dejaba visible la última fila de la imagen (línea
     recta bajo el retrato en el Coro 2). Ese 1 % del borde ya es transparente por la
     máscara y por el PNG original, así que recortarlo no cambia el retrato. */
  clip-path: inset(1%);
}
/* doble exposición entre las flores: el rostro nítido, los bordes se funden */
.retrato.doble { filter: sepia(.05) saturate(1.02); }
.retrato.doble img {
  -webkit-mask-image: radial-gradient(ellipse 46% 50% at 50% 42%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 50% at 50% 42%, #000 52%, transparent 100%);
}
.retrato.radiante { filter: sepia(.08) saturate(1.05) brightness(1.04) drop-shadow(0 0 26px rgba(255, 210, 150, .62)); }
.retrato-luz {
  position: absolute;
  inset: -12%;
  /* closest-side: la luz se apaga antes de llegar a los bordes de su caja (sin cortes rectos) */
  background: radial-gradient(closest-side at 50% 42%, #fffaf0 0%, #ffe8c4 40%, rgba(255, 220, 170, 0) 100%);
  opacity: 0;
  pointer-events: none;
}

/* Primer plano: rosas desenfocadas (fotografía) y destellos de luz */
/* La mezcla "screen" se aplica al contenedor completo: así el negro de las fotos de
   las rosas desaparece contra la escena (dentro de un grupo aislado no funcionaría). */
#primerPlano { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.rosa-frente { position: absolute; left: 0; top: 0; width: min(64vw, 400px); opacity: 0; will-change: transform, opacity; transform-origin: 50% 50%; }
.destello-luz {
  position: absolute;
  top: -35%;
  left: -15%;
  width: 130%;
  height: 170%;
  background: linear-gradient(90deg, transparent 22%, rgba(255, 206, 150, .35) 40%, rgba(255, 238, 210, .7) 50%, rgba(255, 196, 140, .35) 60%, transparent 78%);
  opacity: 0;
  will-change: transform, opacity;
}

/* SONIA en caligrafía dorada (Coro 1) y dorado metálico (Coro 2) */
.frase.nombre {
  width: auto;
  white-space: nowrap;
  font: 400 clamp(4.4rem, 24vw, 8.5rem)/1.05 var(--f-script);
  text-shadow: none;
}
.frase.nombre::before { display: none; }
/* Frases bajas: sobre fondos claros una elipse ancha y plana se leía como franja oscura.
   Se usa una sombra más amplia y difusa (sin borde perceptible) y el contraste lo da el text-shadow. */
.frase.baja { text-shadow: 0 1px 3px rgba(10, 4, 14, .75), 0 2px 16px rgba(10, 4, 14, .7), 0 0 34px rgba(10, 4, 14, .45); }
.frase.baja::before {
  inset: -110% -22%;
  background: radial-gradient(closest-side, rgba(11, 6, 16, .5) 0%, rgba(11, 6, 16, .22) 50%, rgba(11, 6, 16, 0) 100%);
  opacity: calc(var(--vineta) * 1.6);
}
/* Coro 2: el fondo es bokeh dorado, así que SONIA necesita una viñeta oscura para leerse */
.frase.joya::before { display: block; inset: -10% -18%; opacity: calc(var(--vineta) * 2.8); }
/* SONIA de los coros = imagen PNG HD original (image/SONIA_DORADO_3D_HD.png).
   Solo se adapta tamaño y posición; proporción original (1774×887), transparencia intacta,
   sin filtros. El ancho se limita también por la altura para escritorio apaisado. */
.frase.nombre { line-height: 0; }
.sonia-png {
  display: block;
  width: min(76vw, 540px, 52vh);
  height: auto;
  aspect-ratio: 1774 / 887;
  margin: 0 auto;
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: auto;
  will-change: opacity, transform;
}
/* Pantallas horizontales (escritorio): SONIA un poco más pequeña y más alta para no rozar
   la frase inferior. En móvil vertical no cambia nada. */
@media (min-aspect-ratio: 1/1) {
  .frase.nombre { top: 63% !important; }
  .sonia-png { width: min(76vw, 540px, 40vh); }
}
/* Coro 2 (oro metálico): un destello de luz recorre el oro. Es una capa aparte, recortada
   con la propia silueta del PNG; la imagen original no se toca. */
.sonia-brillo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: url("../../image/SONIA_DORADO_3D_HD.png?v=hd20261007") center / contain no-repeat;
  mask: url("../../image/SONIA_DORADO_3D_HD.png?v=hd20261007") center / contain no-repeat;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 250, 230, .55) 48%, rgba(255, 255, 255, .8) 50%, rgba(255, 250, 230, .55) 52%, transparent 65%) 0 0 / 300% 100% no-repeat;
  mix-blend-mode: screen;
  animation: brillo-joya 6s ease-in-out infinite;
}
@keyframes brillo-joya { 0%, 100% { background-position: 110% 0 } 50% { background-position: -10% 0 } }
/* Cierre */
.frase.grande {
  font: italic 500 clamp(2.4rem, 11vw, 4.6rem)/1.1 var(--f-serif);
  color: var(--champan);
  text-shadow: 0 0 26px rgba(255, 214, 150, .55), 0 2px 18px #000b;
}
.frase.firma { font: italic 400 clamp(1.15rem, 5vw, 1.6rem)/1.3 var(--f-serif); color: #f3e6da; }
@media (prefers-reduced-motion: reduce) { .sonia-brillo { animation: none; opacity: 0; } }

/* ---------- Animaciones de espera ---------- */
@keyframes flotar { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes latido { 0%, 100% { transform: translate(-50%, -50%) scale(1) } 50% { transform: translate(-50%, -50%) scale(1.045) } }
@keyframes halo { 0%, 100% { opacity: .15 } 50% { opacity: .75 } }
@keyframes brillo-filo { 0% { background-position: 100% 0 } 60%, 100% { background-position: -50% 0 } }
@keyframes punto { 0%, 100% { opacity: .25; transform: translateY(0) } 50% { opacity: 1; transform: translateY(-3px) } }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .sobre-flotar, .filo-oro::after, body.estado-espera .sello, body.estado-espera .sello::before { animation: none !important; }
  .boton-dorado { animation-duration: .01ms; }
}

/* Pantallas bajas (celular en horizontal) */
@media (max-height: 480px) {
  :root { --sobre-w: min(46vh * 1.5, 300px); }
  .portada-kicker { margin-bottom: 14px; }
  .portada-pie { margin-top: 14px; }
}