/* ¿Cuándo vas a morir? · estilos */
:root {
  --negro: #000;
  --hueso: #e4dac3;
  --hueso-2: #b5aa92;
  --hueso-3: #7d7461;
  --sangre: #b3261e;
  --borde: rgba(228, 218, 195, .16);
  --ui: 'Cinzel', Georgia, serif;
  --titulo: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --texto: 'Spectral', Georgia, serif;
  --lvl: 0;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; background: #000; }
html, body { margin: 0; height: 100%; }
body { background: #000; color: var(--hueso); font-family: var(--texto); font-size: 18px; line-height: 1.5;
  overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body.fin { overflow-y: auto; overflow-x: hidden; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Escena: foto + ojos + vela + humo ---------- */
.escena { position: fixed; z-index: 0; left: 0; top: 0; width: 100vw; aspect-ratio: 1080 / 1920; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); mask-image: linear-gradient(to bottom, #000 62%, transparent 98%);
  transition: opacity 1.2s ease; transform-origin: 50% 25%; will-change: transform;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--zoom, 1)); }
.escena picture, .escena img { display: block; width: 100%; height: 100%; }
.escena img { object-fit: cover; }
.vela { position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: .55;
  background: radial-gradient(60% 40% at 45% 32%, rgba(255, 176, 96, .55), rgba(255, 120, 40, .12) 55%, transparent 80%); }
.ojo { position: absolute; width: 8%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 70, 40, .95) 0, rgba(200, 20, 10, .55) 22%, rgba(120, 0, 0, .18) 48%, transparent 70%);
  opacity: calc(.12 + var(--lvl) * 1.1); filter: blur(1px); }
.ojo-i { left: 39.4%; top: 20.4%; }
.ojo-d { left: 61%; top: 20.4%; }
#humo, #humoAtras { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
/* Capas de la Muerte: ocultas hasta que cargan las tres; los ojos viven dentro del cráneo y lo siguen. */
.vela { z-index: 1; }
.ojo { z-index: 2; }
#humo { z-index: 3; }
.craneo, .escena .capa-p { position: absolute; inset: 0; }
.escena .capa-p, .luz { visibility: hidden; }
.escena.con-capas .capa-p, .escena.con-capas.luz-on .luz { visibility: visible; }
.escena.con-capas .craneo, .escena.con-capas .capa-manos { will-change: transform; }
.craneo { transform-origin: 49% 31%; }
.capa-manos { transform-origin: 50% 40%; }
/* Las luces solo se muestran (y son capa aparte) mientras dura su micro-evento (clase luz-on desde destino.js): antes
   eran dos capas de pantalla completa con máscara y mezcla vivas en la GPU todo el tiempo, casi siempre con opacidad 0. */
.luz { position: absolute; inset: 0; opacity: 0; mix-blend-mode: soft-light; }
.escena.luz-on .luz { will-change: opacity; }
html[data-p="muerte"] .luz { -webkit-mask: url(calavera-v-craneo.webp) center / 100% 100% no-repeat; mask: url(calavera-v-craneo.webp) center / 100% 100% no-repeat; }
.luz-a { background: radial-gradient(34% 22% at 36% 18%, rgba(255, 196, 120, .9), rgba(255, 150, 70, .25) 55%, transparent 80%); }
.luz-b { background: radial-gradient(34% 22% at 64% 24%, rgba(255, 190, 110, .85), rgba(255, 140, 60, .22) 55%, transparent 80%); }
.sombra { position: fixed; z-index: 1; left: 0; right: 0; bottom: 0; height: 62vh; pointer-events: none;
  background: linear-gradient(to top, #000 0%, rgba(0,0,0,.92) 45%, rgba(0,0,0,.6) 70%, transparent 100%); transition: opacity 1s; }

/* Horizontal solo con 600 px o más de ancho: en Android (interactive-widget=resizes-content) el teclado encoge la
   pantalla y un celular pequeño quedaba «horizontal» en cada respuesta; eso cargaba y decodificaba las 4 imágenes
   horizontales y luego otra vez las verticales (mucha memoria). El mismo corte está en los <source> de index.html. */
@media (min-aspect-ratio: 1/1) and (min-width: 600px) {
  .escena { left: 50%; width: min(100vw, calc(80vh * 16 / 9)); aspect-ratio: 1920 / 1080; transform: translateX(-50%) translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--zoom, 1)); transform-origin: 50% 40%;
    -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 42%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 58% 62% at 50% 42%, #000 55%, transparent 100%); }
  .ojo { width: 4.6%; }
  .ojo-i { left: 43.1%; top: 39.6%; }
  .ojo-d { left: 56.6%; top: 39.6%; }
  .craneo { transform-origin: 50% 46%; }
  .capa-manos { transform-origin: 50% 70%; }
  html[data-p="muerte"] .luz { -webkit-mask-image: url(calavera-h-craneo.webp); mask-image: url(calavera-h-craneo.webp); }
  .luz-a { background: radial-gradient(18% 30% at 44% 16%, rgba(255, 196, 120, .9), rgba(255, 150, 70, .25) 55%, transparent 80%); }
  .luz-b { background: radial-gradient(18% 30% at 57% 28%, rgba(255, 190, 110, .85), rgba(255, 140, 60, .22) 55%, transparent 80%); }
  .sombra { height: 42vh; }
}

/* ---------- Silencio ---------- */
.silencio { position: fixed; z-index: 20; top: max(10px, env(safe-area-inset-top)); right: 10px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(228,218,195,.12); background: rgba(0,0,0,.35); display: grid; place-items: center; cursor: pointer; opacity: .55; transition: opacity .3s; }
.silencio:hover, .silencio:focus-visible { opacity: 1; }
.silencio svg { width: 18px; height: 18px; fill: none; stroke: var(--hueso-2); stroke-width: 1.6; stroke-linecap: round; }
.silencio .parlante { fill: var(--hueso-2); stroke: none; }
.silencio .mute { display: none; }
.silencio[aria-pressed="true"] .mute { display: block; }
.silencio[aria-pressed="true"] .ondas { display: none; }

/* ---------- Diálogo ---------- */
main { position: fixed; z-index: 5; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 0 16px calc(28px + env(safe-area-inset-bottom)); }
.dialogo { width: 100%; max-width: 560px; min-height: 9.5em; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; margin-bottom: 18px; }
.eco { margin: 0 0 14px; min-height: 1.4em; font-style: italic; font-size: .95rem; color: var(--hueso-3); opacity: 0; transition: opacity 2.2s ease, transform 2.2s ease; }
.eco.ve { opacity: .7; }
.eco.va { opacity: 0; transform: translateY(-10px); }
.voz { margin: 0; font-family: var(--ui); font-weight: 400; font-size: clamp(1.18rem, 5.3vw, 1.65rem); line-height: 1.38; letter-spacing: .015em;
  color: #ddd2ba; max-width: 24ch; text-shadow: 0 0 18px #000, 0 0 4px #000; opacity: 0; filter: blur(8px); transform: translateY(6px);
  transition: opacity 1.4s ease, filter 1.4s ease, transform 1.4s ease; }
.voz.ve { opacity: 1; filter: none; transform: none; }
.voz .reto-n { color: #e8a596; }
.tocar { margin-top: 26px; background: none; border: 0; padding: 14px 22px; cursor: pointer; font-family: var(--ui); font-size: .76rem;
  letter-spacing: .34em; text-transform: uppercase; color: var(--hueso-2); animation: latir 2.8s ease-in-out infinite; }
@keyframes latir { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

/* ---------- Respuesta ---------- */
.composer { width: 100%; max-width: 520px; opacity: 0; transform: translateY(8px); transition: opacity .9s ease, transform .9s ease; }
.composer.ve { opacity: 1; transform: none; }
.campo-fila { display: flex; gap: 8px; }
.campo { flex: 1; min-width: 0; height: 52px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--borde); background: rgba(10, 9, 7, .78);
  color: var(--hueso); font-size: 1.05rem; outline: none; transition: border-color .3s, box-shadow .3s; }
.campo::placeholder { color: #6a6253; font-style: italic; }
.campo:focus { border-color: rgba(228,218,195,.38); box-shadow: 0 0 24px rgba(179,38,30,.15); }
.enviar { flex: 0 0 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(179,38,30,.55); background: rgba(70, 10, 8, .55); cursor: pointer;
  display: grid; place-items: center; transition: background .3s, transform .15s; }
.enviar:active { transform: scale(.94); }
.enviar svg { width: 22px; height: 22px; fill: none; stroke: #f0c9bd; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; min-height: 34px; }
.chip { border: 1px solid rgba(228,218,195,.14); background: rgba(0,0,0,.45); color: var(--hueso-2); border-radius: 999px; padding: 6px 14px;
  min-height: 34px; font-size: .86rem; cursor: pointer; transition: border-color .25s, color .25s; touch-action: manipulation; }
.chip:hover, .chip:focus-visible { border-color: rgba(228,218,195,.4); color: var(--hueso); }
.campo:focus-visible, .enviar:focus-visible, .icono:focus-visible, .chip:focus-visible, .tocar:focus-visible, .sh:focus-visible, .burlar:focus-visible { outline: 2px solid rgba(242,182,92,.7); outline-offset: 3px; }

/* ---------- Pie ---------- */
.pie { position: fixed; z-index: 6; left: 0; right: 0; bottom: max(6px, env(safe-area-inset-bottom)); text-align: center;
  font-family: var(--ui); font-size: 9.5px; letter-spacing: .14em; color: rgba(228,218,195,.26); pointer-events: none; }
.pie a { pointer-events: auto; text-decoration: none; }
.pie a:hover { color: var(--hueso-2); }

/* ---------- Final ---------- */
/* Sin filter: sobre la escena animada obligaba a otra superficie de pantalla completa justo en el final, cuando
   además se genera la imagen para compartir. Con opacidad .32 la diferencia no se ve. */
body.fin .escena { opacity: .32; }
body.fin main { position: relative; inset: auto; min-height: 100%; justify-content: flex-start; padding-top: min(38vh, 300px); }
body.fin .pie { position: relative; padding: 18px 0 22px; }
body.fin .dialogo, body.fin .composer { display: none; }
.final { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.engano { font-family: var(--ui); color: #e8968a; letter-spacing: .08em; margin: 0 0 10px; }
.dictamen { font-family: var(--ui); font-size: clamp(1.15rem, 5vw, 1.5rem); line-height: 1.4; margin: 0 0 22px; color: #ece2cb; text-shadow: 0 0 20px #000;
  opacity: 0; transition: opacity 1.6s; }
.dictamen.ve { opacity: 1; }
.dictamen strong { color: #f0b2a6; font-weight: 500; }
.relato { width: 100%; text-align: left; }
.relato p { margin: 0 0 .8em; font-size: 1.06rem; line-height: 1.6; color: #d8cdb5; opacity: 0; transform: translateY(6px); transition: opacity 1.2s, transform 1.2s; }
.relato p.ve { opacity: 1; transform: none; }
.relato p:last-child { color: #e7c39c; font-style: italic; }
.lapida { position: relative; width: 100%; max-width: 380px; margin: 26px auto 30px; padding: 40px 22px 28px; text-align: center;
  border-radius: 180px 180px 12px 12px / 140px 140px 12px 12px;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 3px, rgba(0,0,0,.03) 3px 7px),
    linear-gradient(180deg, #3c3d38 0%, #2a2b27 55%, #1b1c19 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -18px 40px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.9);
  animation: surgir 1.4s ease both; }
@keyframes surgir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.l-yace { font-family: var(--ui); letter-spacing: .34em; text-transform: uppercase; font-size: .7rem; color: #b9b19c; margin: 0 0 4px; }
.l-nombre { font-family: var(--titulo); font-weight: 900; font-size: clamp(1.6rem, 7.5vw, 2.2rem); line-height: 1.1; margin: 0 0 14px; word-break: break-word; color: #efe7d4; }
.l-datos { margin: 0; display: grid; gap: 10px; }
.l-datos dt { font-family: var(--ui); font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: #a69e89; }
.l-datos dd { margin: 2px 0 0; font-size: 1.05rem; line-height: 1.35; color: #efe8d6; }
.l-epitafio { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); font-style: italic; color: #ddd3b9; }
.compartir { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; animation: surgir 1.2s .2s ease both; }
.sh { -webkit-appearance: none; appearance: none; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 8px 12px;
  border-radius: 14px; border: 1px solid var(--borde); background: rgba(14, 13, 11, .9); color: var(--hueso); text-decoration: none;
  font-family: var(--ui); font-size: .82rem; font-weight: 500; letter-spacing: .03em; cursor: pointer; touch-action: manipulation; }
.sh svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sh svg .relleno { fill: currentColor; stroke: none; }
#shImg { grid-column: 1 / -1; }
.sh-ig { grid-column: 1 / -1; border-color: rgba(179,38,30,.55); background: rgba(70, 12, 10, .65); }
.sh:hover { border-color: rgba(228,218,195,.35); }
.burlar { grid-column: 1 / -1; margin-top: 16px; min-height: 54px; border-radius: 999px; border: 1px solid rgba(179,38,30,.6);
  background: linear-gradient(180deg, #8f1d17, #4a0c09); color: #fbeee6; font-family: var(--ui); font-weight: 700; letter-spacing: .06em; cursor: pointer; }

.toast { position: fixed; left: 16px; right: 16px; margin: 0 auto; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 30; max-width: 420px;
  padding: 14px 18px; border-radius: 14px; background: rgba(12,12,10,.97); border: 1px solid rgba(242,182,92,.35); color: var(--hueso);
  font-size: .95rem; line-height: 1.4; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,.8); }

/* ---------- Botones de micrófono y repetir ---------- */
.icono { flex: 0 0 44px; height: 52px; border-radius: 50%; border: 1px solid var(--borde); background: rgba(10, 9, 7, .7); cursor: pointer;
  display: grid; place-items: center; transition: border-color .3s, opacity .3s, box-shadow .3s; touch-action: manipulation; }
.icono svg { width: 20px; height: 20px; fill: none; stroke: var(--hueso-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icono:focus-visible { outline: 2px solid rgba(242,182,92,.7); outline-offset: 3px; }
#mic[aria-pressed="true"] { border-color: rgba(179,38,30,.8); box-shadow: 0 0 18px rgba(179,38,30,.45); animation: latir 1.2s ease-in-out infinite; }
#mic[aria-pressed="true"] svg { stroke: #f0b2a6; }
html.hablando #mic { opacity: .35; pointer-events: none; }
@media (max-width: 380px) { .campo-fila { gap: 6px; } .icono { flex-basis: 40px; } .enviar { flex-basis: 48px; } .campo { padding: 0 14px; } }

/* ---------- Espantos colombianos (solo foto vertical): figura arriba, ojos y luz calibrados sobre la foto ---------- */
html[data-p="silbon"] .escena, html[data-p="llorona"] .escena, html[data-p="patasola"] .escena { top: 6vh; }
@media (min-aspect-ratio: 1/1) and (min-width: 600px) {
  html[data-p="silbon"] .escena, html[data-p="llorona"] .escena, html[data-p="patasola"] .escena {
    top: 0; left: 50%; height: 100vh; width: auto; aspect-ratio: 1080 / 1920;
    transform: translateX(-50%) translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--zoom, 1)); transform-origin: 50% 20%;
    -webkit-mask-image: radial-gradient(ellipse 50% 58% at 50% 34%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 58% at 50% 34%, #000 62%, transparent 100%); }
}
/* El Silbón: luna fría y ojos que brillan bajo el sombrero */
html[data-p="silbon"] .ojo { width: 2.2%; background: radial-gradient(circle, rgba(220, 235, 255, .95) 0, rgba(150, 190, 255, .55) 30%, transparent 70%); }
html[data-p="silbon"] .ojo-i { left: 42.7%; top: 8%; }
html[data-p="silbon"] .ojo-d { left: 45.3%; top: 8%; }
html[data-p="silbon"] .vela { mix-blend-mode: screen; background: radial-gradient(14% 8% at 35.2% 7.1%, rgba(210, 225, 255, .55), transparent 75%), radial-gradient(60% 30% at 40% 30%, rgba(120, 150, 200, .14), transparent 80%); }
/* La Llorona: brillo pálido y niebla que se mueve */
html[data-p="llorona"] .ojo { width: 2.4%; background: radial-gradient(circle, rgba(235, 240, 245, .9) 0, rgba(190, 205, 220, .45) 32%, transparent 70%); }
html[data-p="llorona"] .ojo-i { left: 44%; top: 9.6%; }
html[data-p="llorona"] .ojo-d { left: 47.8%; top: 9.6%; }
html[data-p="llorona"] .vela { mix-blend-mode: screen; background: radial-gradient(30% 22% at 45% 16%, rgba(220, 230, 240, .32), transparent 75%), radial-gradient(12% 7% at 69.4% 7.8%, rgba(225, 235, 245, .45), transparent 75%); }
/* La Patasola: ojos que brillan entre la maleza */
html[data-p="patasola"] .ojo { width: 2.6%; background: radial-gradient(circle, rgba(250, 245, 190, .95) 0, rgba(200, 220, 90, .55) 30%, transparent 70%); }
html[data-p="patasola"] .ojo-i { left: 46.4%; top: 9.4%; }
html[data-p="patasola"] .ojo-d { left: 50%; top: 9.4%; }
html[data-p="patasola"] .vela { mix-blend-mode: screen; background: radial-gradient(45% 25% at 50% 8%, rgba(170, 210, 160, .22), transparent 75%); }

@media (prefers-reduced-motion: reduce) {
  .voz, .eco, .composer, .relato p, .dictamen { transition-duration: .01ms !important; filter: none !important; }
  .tocar { animation: none; opacity: .8; }
  .lapida, .compartir { animation: none; }
}

/* ---------- Manos libres: punto rojo que late mientras escucha; el micrófono late si hay que tocarlo ---------- */
.campo-fila { position: relative; }
.campo-fila::before { content: ''; position: absolute; left: 14px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: #d8352a; box-shadow: 0 0 10px rgba(216,53,42,.8); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 1; }
html.escuchando .campo-fila::before { opacity: 1; animation: latir 1.1s ease-in-out infinite; }
html.escuchando .campo { padding-left: 32px; }
#mic.pide { border-color: rgba(179,38,30,.8); animation: latir 1.4s ease-in-out infinite; }
#mic.pide svg { stroke: #f0b2a6; }
#mic[aria-pressed="true"] { animation: none; box-shadow: 0 0 12px rgba(179,38,30,.35); }