/* La Linterna del Abismo — base: colores, tipografía, marco de teléfono en computadora, botones de instrumento,
   escena, inicio, sonar, pista, manita, aviso, "¡El arrecife despierta!", "¡cumple!", final y vitrina.
   Estilo propio: luz de neón suave sobre azul profundo, como los instrumentos de un pequeño submarino de exploración
   (paneles translúcidos con borde que brilla y esquinas de visor, contador de sonar, íconos de línea luminosa).
   Todo cuelga de html.la. Por dentro todo se mide contra el marco (.app es un contenedor de tamaño: cqw/cqh), nunca
   contra la ventana. Sin backdrop-filter sobre el lienzo y sin sombras animadas (rendimiento). */
.la {
  --abismo: #071A3F; --abismo-2: #0D2860; --abismo-3: #14347A;
  --panel: rgba(9, 28, 68, .9); --panel-2: rgba(5, 18, 46, .92);
  --neon: #3FF2E6; --neon-d: #22CFC4; --azul: #4DA8FF; --rosa: #FF6FD8; --violeta: #A57BFF; --oro: #FFD27A;
  --texto: #EAF6FF; --suave: #A9C6EE; --tinta: #04223A; --wa: #25D366;
  --borde: rgba(63, 242, 230, .55); --brillo: 0 0 0 1px rgba(63, 242, 230, .12), 0 0 22px rgba(63, 242, 230, .16);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --f-display: "Exo 2", "Lexend", system-ui, sans-serif; --f-body: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.la *, .la *::before, .la *::after { box-sizing: border-box; }
.la body { margin: 0; font-family: var(--f-body); color: var(--texto); overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
.la button { font: inherit; color: inherit; }
.la :focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.la .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.la .noscript { margin: 24px; font: 500 18px/1.5 var(--f-body); color: var(--texto); background: var(--abismo-2); padding: 16px; border-radius: 14px; }

/* ---------- marco ---------- */
.la .fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 35%, #1B4A9A 0%, #0D2860 45%, #061433 100%); }
.la .fondo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background:
  radial-gradient(14% 30% at 12% 100%, rgba(63, 242, 230, .35), transparent 70%), radial-gradient(12% 26% at 30% 100%, rgba(255, 111, 216, .3), transparent 70%),
  radial-gradient(16% 34% at 72% 100%, rgba(165, 123, 255, .32), transparent 70%), radial-gradient(12% 24% at 90% 100%, rgba(77, 168, 255, .32), transparent 70%); filter: blur(10px); }
.la .app { position: fixed; inset: 0; z-index: 1; overflow: hidden; isolation: isolate; container-type: size; container-name: marco; background: var(--abismo); transition: opacity .5s ease; }
/* computadora y tableta: el mismo marco de teléfono que los demás diseños, con el mar difuminado alrededor */
@media (min-width: 560px) and (min-height: 560px) {
  .la .app { inset: auto; left: 50%; top: 50%; width: min(430px, 100vw - 32px); height: min(932px, 100dvh - 40px); transform: translate(-50%, -50%); border-radius: 38px;
    box-shadow: 0 0 0 2px rgba(63, 242, 230, .55), 0 0 0 7px #0A1F4A, 0 0 0 8px rgba(63, 242, 230, .25), 0 30px 90px rgba(2, 8, 24, .6); }
}
.la:not(.is-showcase) .fondo { filter: blur(4px); }
.la.is-showcase .fondo { display: none; }
.la.is-showcase .app { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; }
.la .stage { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: crosshair; }
.la .gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; }
.la .gl.is-on { opacity: 1; }
.la .sin-gl .stage { background: url("../assets/poster/fondo-abismo.webp") center / cover no-repeat, var(--abismo); }
.la .ui { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.la .ui > * { pointer-events: auto; }
.la .is-reposo *, .la .is-reposo *::before, .la .is-reposo *::after { animation-play-state: paused !important; }

/* esquinas de visor (instrumentos): dos escuadras luminosas en las esquinas de cada panel */
.la .esq { position: absolute; width: 18px; height: 18px; pointer-events: none; border: 0 solid var(--neon); opacity: .95; }
.la .esq.e1 { left: 8px; top: 8px; border-left-width: 2px; border-top-width: 2px; border-top-left-radius: 8px; }
.la .esq.e2 { right: 8px; bottom: 8px; border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: 8px; }

/* ---------- botones de instrumento ---------- */
.la .nbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border: 1.5px solid var(--borde); border-radius: 14px; background: linear-gradient(180deg, rgba(20, 52, 122, .95), rgba(9, 28, 68, .95)); color: var(--texto);
  font: 600 16px/1.15 var(--f-body); text-decoration: none; cursor: pointer; box-shadow: var(--brillo), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform .12s ease, background-color .2s, border-color .2s; touch-action: manipulation; user-select: none;
}
.la .nbtn:active { transform: translateY(2px) scale(.99); }
.la .nbtn .bi { display: inline-flex; color: var(--neon); filter: drop-shadow(0 0 4px rgba(63, 242, 230, .6)); }
.la .nbtn.is-primary { border-color: transparent; background: linear-gradient(180deg, #7BFAF2, var(--neon) 45%, var(--neon-d)); color: var(--tinta); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 0 24px rgba(63, 242, 230, .45); }
.la .nbtn.is-primary .bi { color: var(--tinta); filter: none; }
.la .nbtn.is-wa { border-color: transparent; background: linear-gradient(180deg, #4BE38A, var(--wa)); color: #052A15; box-shadow: 0 0 18px rgba(37, 211, 102, .35); }
.la .nbtn.is-wa .bi { color: #052A15; filter: none; }
.la .nbtn.is-small { min-height: 40px; padding: 0 14px; font-size: 15px; border-radius: 12px; }
.la .nbtn.is-big { min-height: 56px; font-size: 18px; border-radius: 16px; }
.la .nbtn.is-block { width: 100%; }
.la .ibtn { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--borde); border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(26, 66, 140, .95), rgba(7, 24, 60, .96)); color: var(--neon); cursor: pointer; box-shadow: var(--brillo); padding: 0; }
.la .ibtn svg { filter: drop-shadow(0 0 4px rgba(63, 242, 230, .55)); }
.la .ibtn::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed rgba(63, 242, 230, .3); pointer-events: none; }
.la .ibtn:active { transform: scale(.95); }
.la .nb-link { border: 0; background: none; padding: 10px 6px; min-height: 44px; font: 600 15px var(--f-body); color: var(--neon); text-decoration: underline; text-decoration-color: rgba(63, 242, 230, .5); text-underline-offset: 4px; cursor: pointer; }

/* ---------- HUD: sonido, sonar (contador de criaturas) y bitácora ---------- */
.la .hud { position: absolute; left: 12px; right: 12px; top: calc(var(--safe-t) + 12px); display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; pointer-events: none; }
.la .hud > * { pointer-events: auto; }
.la .sonar { position: relative; display: grid; justify-items: center; gap: 3px; margin: 0; }
.la .sn-disco { position: relative; width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, transparent 0 31%, rgba(63, 242, 230, .32) 32% 33%, transparent 34% 63%, rgba(63, 242, 230, .26) 64% 65%, transparent 66%), radial-gradient(circle, #0F3576 0%, #0A2456 60%, #061736 100%);
  box-shadow: 0 0 0 1.5px var(--borde), 0 0 20px rgba(63, 242, 230, .22), inset 0 0 14px rgba(0, 0, 0, .5); }
.la .sn-barrido { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(63, 242, 230, .5), rgba(63, 242, 230, 0) 75deg, transparent 360deg); animation: la-gira 3.6s linear infinite; will-change: transform; }
@keyframes la-gira { to { transform: rotate(1turn); } }
/* rumbo: una marquita en la orilla que apunta a la criatura dormida más cercana a la luz */
.la .sn-rumbo { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transition: opacity .3s; }
.la .sn-rumbo::after { content: ""; position: absolute; left: 27px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 8px 2px rgba(255, 210, 122, .8); }
.la .sn-p { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: rgba(169, 198, 238, .35); transform: rotate(var(--a)) translateX(30px); transition: background-color .3s; }
.la .sn-p.is-on { background: var(--neon); box-shadow: 0 0 8px 2px rgba(63, 242, 230, .8); }
.la .sn-p.is-on:nth-child(4) { background: var(--rosa); box-shadow: 0 0 8px 2px rgba(255, 111, 216, .8); }
.la .sn-p.is-on:nth-child(6) { background: var(--violeta); box-shadow: 0 0 8px 2px rgba(165, 123, 255, .8); }
.la .sn-p.is-on:nth-child(5) { background: var(--azul); box-shadow: 0 0 8px 2px rgba(77, 168, 255, .8); }
.la .sn-txt { position: absolute; top: 0; left: 50%; width: 76px; height: 76px; margin-left: -38px; display: grid; place-items: center; place-content: center; grid-auto-flow: column; align-items: baseline; font: 800 26px/1 var(--f-display); color: #fff; text-shadow: 0 0 10px rgba(63, 242, 230, .8); }
.la .sn-txt small { font-size: 14px; color: var(--suave); text-shadow: none; }
.la .sn-l { padding: 1px 8px; border-radius: 6px; background: rgba(5, 18, 46, .8); font: 700 11px/1.4 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--neon); }
.la .sonar.is-pop .sn-disco { animation: la-pop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes la-pop { 40% { transform: scale(1.18); } }
.la .sonar.is-ping .sn-disco::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--neon); animation: la-ping 1.1s ease-out 2; }
@keyframes la-ping { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.2); opacity: 0; } }
.la .hud.is-intro .sonar, .la [data-fase="onda"] .sonar, .la [data-fase="cumple"] .sonar, .la [data-fase="final"] .sonar { visibility: hidden; }
.la [data-fase="onda"] .hud-datos, .la [data-fase="cumple"] .hud-datos { visibility: hidden; }

/* ---------- avisos breves (arriba, bajo el sonar) ---------- */
.la .aviso { position: absolute; left: 50%; top: calc(var(--safe-t) + 116px); transform: translateX(-50%); width: max-content; max-width: 88cqw; margin: 0; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--borde); background: var(--panel); color: var(--texto); font: 600 15px/1.3 var(--f-body); text-align: center; box-shadow: var(--brillo); opacity: 0; pointer-events: none !important; will-change: opacity, transform; }
.la .aviso.is-on { animation: la-aviso 2.6s ease both; }
@keyframes la-aviso { 0% { opacity: 0; transform: translate(-50%, -8px); } 12%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }
.la .dbg-fps { position: absolute; left: 8px; bottom: calc(var(--safe-b) + 6px); margin: 0; padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; font: 11px ui-monospace, monospace; z-index: 80; pointer-events: none !important; }

/* ---------- INICIO ---------- */
.la .intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(var(--safe-t) + 74px) 16px calc(var(--safe-b) + 18px); text-align: center; pointer-events: none; transition: opacity .45s ease; }
.la .intro > * { pointer-events: auto; }
.la .intro.is-out { opacity: 0; pointer-events: none; }
.la .intro-caja { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(100%, 370px); padding: 16px 18px 18px; border: 1.5px solid var(--borde); border-radius: 22px; background: linear-gradient(180deg, rgba(14, 40, 92, .9), rgba(6, 20, 50, .9)); box-shadow: var(--brillo); animation: la-entra .7s .3s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes la-entra { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
.la .intro-k { margin: 0; font: 700 12px/1.3 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: var(--neon); }
.la .intro-t { margin: 0; text-wrap: balance; font: 800 clamp(24px, 7.4cqw, 30px)/1.12 var(--f-display); color: #fff; text-shadow: 0 0 16px rgba(63, 242, 230, .35); }
.la .intro-sub { margin: 2px 0 0; font: 400 16px/1.4 var(--f-body); color: var(--suave); text-wrap: pretty; }
.la .intro-acciones { display: flex; flex-direction: column; align-items: center; gap: 0; width: min(100%, 360px); animation: la-entra .7s .6s ease both; }
.la .nbtn.is-encender { width: 100%; min-height: 66px; border-radius: 22px; font: 800 22px/1 var(--f-display); letter-spacing: .02em; }
.la .nbtn.is-encender::before { content: ""; position: absolute; inset: -6px; border-radius: 28px; border: 1.5px solid rgba(63, 242, 230, .6); opacity: 0; animation: la-anillo 2.2s ease-out infinite; will-change: transform, opacity; }
@keyframes la-anillo { 0% { opacity: .9; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.08); } }

/* ---------- explorar: pista, manita y "Siguiente criatura" ---------- */
.la .pista { position: absolute; left: 50%; top: calc(var(--safe-t) + 120px); transform: translateX(-50%); width: max-content; max-width: 90cqw; margin: 0; padding: 10px 16px; border: 1.5px solid var(--borde); border-radius: 14px; background: var(--panel); font: 500 15px/1.35 var(--f-body); text-align: center; box-shadow: var(--brillo); opacity: 0; transition: opacity .4s; pointer-events: none !important; }
.la .pista.is-on { opacity: 1; }
.la .manita { position: absolute; left: 50%; top: 52%; width: 0; height: 0; pointer-events: none !important; opacity: 0; transition: opacity .3s; }
.la .manita.is-on { opacity: 1; }
.la .mn-mano { position: absolute; left: -12px; top: -6px; color: #fff; filter: drop-shadow(0 0 6px rgba(63, 242, 230, .9)); animation: la-mano 2.6s ease-in-out infinite; will-change: transform; }
.la .mn-estela { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 233, 189, .95), rgba(255, 210, 122, 0) 70%); animation: la-mano 2.6s ease-in-out infinite; will-change: transform; }
@keyframes la-mano { 0%, 100% { transform: translate(-90px, 40px); } 30% { transform: translate(70px, -30px); } 60% { transform: translate(-30px, -110px); } 80% { transform: translate(40px, 20px); } }
.la .sig-btn { position: absolute; right: 12px; bottom: calc(var(--safe-b) + 14px); min-height: 48px; padding: 0 14px; font-size: 15px; border-radius: 999px; }
.la .con-tarjeta .sig-btn, .la .con-tarjeta .pista { visibility: hidden; }

/* ---------- ¡El arrecife despierta! ---------- */
.la .grito { position: absolute; left: 0; right: 0; top: 26%; margin: 0; padding: 0 16px; text-align: center; font: 800 clamp(30px, 10cqw, 46px)/1.05 var(--f-display); color: #fff; text-shadow: 0 0 12px rgba(63, 242, 230, .9), 0 0 30px rgba(165, 123, 255, .7); pointer-events: none !important; animation: la-grito 2.6s ease both; }
@keyframes la-grito { 0% { opacity: 0; transform: scale(.7); } 15% { opacity: 1; transform: scale(1.04); } 25% { transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }

/* ---------- ¡cumple! ---------- */
.la .cumple { position: absolute; left: 0; right: 0; top: 60cqh; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px; text-align: center; pointer-events: none !important; animation: la-entra .8s cubic-bezier(.2, 1.3, .4, 1) both; }
.la .cumple-t { margin: 0; text-wrap: balance; font: 800 clamp(38px, 12.4cqw, 58px)/1 var(--f-display); color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .6), 0 0 22px rgba(63, 242, 230, .9), 0 0 44px rgba(255, 111, 216, .6); }
.la .cumple-s { margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--panel); border: 1.5px solid var(--borde); font: 600 16px/1.3 var(--f-body); box-shadow: var(--brillo); }
.la .cumple-e { margin: 0; max-width: 300px; font: 500 15px/1.35 var(--f-body); color: var(--texto); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); animation: la-entra .8s 1.2s ease both; }

/* ---------- final: resumen, lugar y confirmación ---------- */
.la .fin { position: absolute; left: 10px; right: 10px; bottom: calc(var(--safe-b) + 10px); max-height: 58cqh; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding: 12px 14px 2px; border: 1.5px solid var(--borde); border-radius: 24px; background: linear-gradient(180deg, rgba(14, 40, 92, .94), rgba(6, 20, 50, .96)); box-shadow: var(--brillo), 0 18px 40px rgba(2, 8, 24, .45); text-align: center; animation: la-sube .7s .1s cubic-bezier(.2, 1.1, .4, 1) both; }
@keyframes la-sube { from { opacity: 0; transform: translateY(40px); } }
.la .fin-k { margin: 0; font: 700 12px var(--f-display); text-transform: uppercase; letter-spacing: .22em; color: var(--neon); }
.la .fin-t { margin: -2px 0 0; font: 800 clamp(26px, 8.4cqw, 34px)/1.05 var(--f-display); color: #fff; text-shadow: 0 0 14px rgba(63, 242, 230, .45); }
.la .fin-linea { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 8px; margin: -2px 0 0; font: 600 15px/1.3 var(--f-body); color: var(--suave); }
.la .fin-sep { color: var(--neon); }
.la .fin-lugar { border: 1px solid rgba(63, 242, 230, .35); border-radius: 16px; padding: 2px 10px; background: rgba(4, 16, 40, .6); text-align: left; }
.la .fin-lugar[open] { padding-bottom: 10px; }
.la .fin-lugar summary { display: flex; align-items: center; gap: 6px; min-height: 44px; font: 600 16px var(--f-body); cursor: pointer; list-style: none; }
.la .fin-lugar summary::-webkit-details-marker { display: none; }
.la .fin-lugar summary .bi { display: inline-flex; flex: none; color: var(--neon); }
.la .fin-salon { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la .fin-vermapa { margin-left: auto; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--borde); color: var(--neon); font: 600 13px var(--f-body); }
.la .fin-lugar[open] .fin-vermapa { display: none; }
.la .fin-lugar .mapa { margin-top: 4px; }
.la .fin-lugar .lugar-dir { margin: 6px 0; }
.la .fin .cf-deadline { margin: -2px 0 0; }
.la .fin-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 16px; margin-top: -4px; }
.la .fin-links .nb-link { min-height: 44px; padding: 6px 4px; }

/* ---------- vitrina ---------- */
.la .is-vitrina .ui > :not(.vitrina-t) { display: none; }
.la .vitrina-t { position: absolute; left: 0; right: 0; top: 6%; margin: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.la .vitrina-t span { font: 800 clamp(30px, 6cqw, 72px)/1 var(--f-display); color: #fff; text-shadow: 0 0 14px rgba(63, 242, 230, .9), 0 0 36px rgba(165, 123, 255, .6); }
.la .vitrina-t small { padding: 4px 18px; border-radius: 999px; background: var(--panel); border: 1.5px solid var(--borde); font: 700 clamp(16px, 2.6cqw, 28px)/1.3 var(--f-display); color: var(--neon); }

@media (prefers-reduced-motion: reduce) {
  .la *, .la *::before, .la *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; }
  .la .manita.is-on .mn-mano, .la .manita.is-on .mn-estela { transform: translate(0, 0); }
}
.la.rm *, .la.rm *::before, .la.rm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }