/* ENCUENTRA TU LUZ — interfaz sobre el lienzo 3D */
@import url('/css/estilo.css?v=20260916b');
:root{--etl-oro:#e7bd58;--etl-brillo:#ffe59a;--etl-tinta:#070a14;--etl-panel:rgba(10,14,26,.9);--etl-linea:rgba(231,189,88,.28);--etl-texto:#f5f0e3;--etl-gris:#a8b0c2}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body.etl-body{margin:0;height:100%;background:var(--etl-tinta);color:var(--etl-texto);font-family:'Inter',system-ui,sans-serif;overflow:hidden;overscroll-behavior:none}
body.etl-body{position:fixed;inset:0;touch-action:none;-webkit-user-select:none;user-select:none}
#etl-lienzo{position:fixed;inset:0;width:100%;height:100%;display:block;outline:0}
.etl-saltar{position:absolute;left:-999px;top:0}.etl-saltar:focus{left:12px;top:12px;z-index:50;background:var(--etl-oro);color:#000;padding:8px 12px}
/* Barra superior */
.etl-barra{position:fixed;top:0;left:0;right:0;height:56px;padding:0 14px 0 18px;padding-top:env(safe-area-inset-top,0px);display:flex;align-items:center;gap:16px;z-index:20;background:linear-gradient(rgba(7,10,20,.85),rgba(7,10,20,0));pointer-events:none}
.etl-barra>*{pointer-events:auto}
.etl-marca{color:var(--etl-texto);text-decoration:none;font-family:'Cormorant Garamond',serif;letter-spacing:.14em;font-size:15px;font-weight:400}.etl-marca b{color:var(--etl-oro);font-weight:400}
.etl-capitulo{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.24em;color:var(--etl-oro)}
.etl-barra-der{display:flex;gap:6px;align-items:center}
.etl-icono{width:36px;height:36px;border:1px solid var(--etl-linea);background:rgba(10,14,26,.6);color:var(--etl-texto);display:grid;place-items:center;text-decoration:none;font-size:18px;cursor:pointer;border-radius:2px}
.etl-icono.idioma{width:auto;padding:0 10px;font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--etl-oro)}
.etl-icono.activo{color:var(--etl-oro);border-color:var(--etl-oro)}
/* Capas a pantalla completa */
.etl-capa{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;padding:calc(70px + env(safe-area-inset-top,0px)) 24px 40px;background:radial-gradient(ellipse at 50% 30%,rgba(24,30,52,.85),rgba(7,10,20,.94));text-align:center;overflow:auto;-webkit-overflow-scrolling:touch}
.etl-capa>*{margin:auto}
.etl-capa[hidden],#etl-carga[hidden],#etl-portada[hidden],#etl-sin-webgl[hidden],#etl-final[hidden]{display:none}
.etl-anillo-carga{width:64px;height:64px;border:2px solid var(--etl-linea);border-top-color:var(--etl-oro);border-radius:50%;animation:etl-gira 1.2s linear infinite;margin:0 auto 20px}
@keyframes etl-gira{to{transform:rotate(360deg)}}
#etl-carga p{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--etl-gris)}
#etl-carga>*{margin:0}#etl-carga{justify-content:center}
.etl-portada-caja{max-width:560px;width:100%}
.etl-sobre{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;color:var(--etl-oro);margin:0 0 14px}
#etl-titulo{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2.8rem,9vw,5.2rem);line-height:.95;margin:0 0 26px;letter-spacing:-.01em}
.etl-lineas p{font-family:'Cormorant Garamond',serif;font-size:clamp(1.1rem,2.4vw,1.35rem);line-height:1.6;color:#d6d0c2;margin:0 0 6px;font-weight:300}
.etl-boton{display:inline-block;padding:13px 24px;border:1px solid var(--etl-oro);color:var(--etl-oro);background:transparent;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;text-decoration:none;border-radius:2px;transition:.25s}
.etl-boton:hover{background:rgba(231,189,88,.12)}
.etl-boton.etl-oro{background:var(--etl-oro);color:#1a1408;font-weight:600}.etl-boton.etl-oro:hover{background:var(--etl-brillo)}
.etl-boton.peligro{border-color:#bb6971;color:#e39aa2}
.etl-continuar{margin:26px 0 8px;width:100%}
.etl-form{display:grid;gap:10px;margin:22px auto 0;max-width:420px}
.etl-form label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--etl-gris);text-transform:uppercase}
.etl-form input{background:rgba(255,255,255,.04);border:1px solid var(--etl-linea);color:var(--etl-texto);padding:13px 14px;font-family:'Cormorant Garamond',serif;font-size:1.3rem;text-align:center;outline:0;border-radius:2px}
.etl-form input:focus{border-color:var(--etl-oro)}
.etl-controles{margin:26px 0 0;font-size:12px;color:var(--etl-gris);line-height:1.6}
/* Final */
.etl-final{background:radial-gradient(ellipse at 50% 35%,rgba(70,56,20,.7),rgba(7,10,20,.96));z-index:32;justify-content:flex-start}.etl-final>*{margin:0 auto}
.etl-final .etl-lineas p{font-size:clamp(1rem,2.2vw,1.2rem)}
.etl-final h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2.6rem,8vw,4.6rem);line-height:.95;margin:0 0 10px;color:var(--etl-brillo)}
.etl-final-nombre{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;color:var(--etl-oro);text-transform:uppercase;margin:0 0 22px}
.etl-final-luces{margin:22px 0 6px;font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:#d6d0c2;line-height:1.6}.etl-final-luces b{display:block;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--etl-oro);font-weight:500;letter-spacing:.12em;margin-bottom:6px}
.etl-final-firma{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.24em;color:var(--etl-gris);margin:0 0 4px}
.etl-final-acciones{justify-content:center;margin-top:24px}
/* HUD */
#etl-hud{position:fixed;left:18px;bottom:18px;z-index:15;pointer-events:none;padding-bottom:env(safe-area-inset-bottom,0px);max-width:min(60vw,420px)}
.etl-hud-santuario{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:300;display:flex;align-items:baseline;gap:12px}
.etl-hud-santuario b{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--etl-oro);font-weight:500}
.etl-hud-total{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--etl-gris);margin-top:4px}.etl-hud-total b{color:var(--etl-texto);font-weight:500}
.etl-pista{margin:10px 0 0;font-size:12px;color:#d6d0c2;background:rgba(10,14,26,.6);padding:8px 12px;border-left:2px solid var(--etl-oro);max-width:340px;line-height:1.5}
#etl-hud [hidden]{display:none}
/* Aviso de acción */
#etl-prompt{position:fixed;left:50%;bottom:calc(60px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:16}
.etl-accion{display:flex;align-items:center;gap:12px;background:rgba(10,14,26,.78);border:1px solid var(--etl-oro);color:var(--etl-texto);padding:12px 22px 12px 12px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-radius:40px;box-shadow:0 0 30px rgba(231,189,88,.25);touch-action:manipulation}
.etl-accion i{width:34px;height:34px;border-radius:50%;background:var(--etl-oro);color:#1a1408;display:grid;place-items:center;font-style:normal;font-weight:700}
.etl-tactil .etl-accion i{font-size:0}.etl-tactil .etl-accion i::after{content:"✦";font-size:16px}
/* Enigma */
#etl-enigma{position:fixed;right:18px;top:calc(72px + env(safe-area-inset-top,0px));z-index:16;width:min(300px,calc(100vw - 36px))}
.etl-enigma-caja{background:var(--etl-panel);border:1px solid var(--etl-linea);padding:18px 18px 16px;text-align:center;backdrop-filter:blur(6px)}
.etl-instruccion{font-size:12.5px;line-height:1.55;color:#d6d0c2;margin:0 0 12px}
.etl-anillo{position:relative;width:118px;height:118px;margin:0 auto}
.etl-anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.etl-anillo .fondo{fill:none;stroke:rgba(255,255,255,.1);stroke-width:4}
.etl-anillo .progreso{fill:none;stroke:var(--etl-oro);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .15s linear}
.etl-respiracion{position:absolute;inset:22px;border-radius:50%;background:radial-gradient(circle,rgba(231,189,88,.55),rgba(231,189,88,.08));transform-origin:center;transition:transform .12s linear;border:1px solid rgba(231,189,88,.4)}
.etl-respiracion.bien{box-shadow:0 0 26px rgba(231,189,88,.6)}
.etl-respiracion[hidden]{display:none}
.etl-mensaje{font-family:'Cormorant Garamond',serif;font-size:1.15rem;margin:12px 0 0;min-height:1.4em;color:var(--etl-brillo)}
.etl-ciclos{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--etl-gris);margin:6px 0 0}
/* Diálogos */
.etl-dialogo{width:min(680px,calc(100% - 28px));max-height:86vh;background:#0d1222;color:#e6e0d2;border:1px solid var(--etl-linea);padding:clamp(24px,5vw,48px);box-shadow:0 40px 120px #000;overflow:auto;border-radius:3px}
.etl-dialogo::backdrop{background:rgba(3,4,8,.78);backdrop-filter:blur(6px)}
.etl-dialogo h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.05;margin:0 0 18px;color:var(--etl-texto)}
.etl-dialogo .etl-texto{font-family:'Cormorant Garamond',serif;font-size:1.15rem;line-height:1.8;font-weight:300;margin:0 0 26px;white-space:pre-line}
.etl-dialogo h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.5rem;margin:18px 0 8px}
.etl-menu{width:min(760px,calc(100% - 28px));height:min(640px,86vh);position:relative;padding-top:64px}
.etl-cerrar{position:absolute;right:14px;top:12px;background:none;border:0;color:var(--etl-gris);font-size:28px;cursor:pointer}
.etl-pestanas{position:absolute;left:clamp(24px,5vw,48px);right:60px;top:16px;display:flex;gap:6px;overflow:auto}
.etl-pestana{background:transparent;border:1px solid var(--etl-linea);color:var(--etl-gris);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:9px 12px;cursor:pointer;white-space:nowrap}
.etl-pestana.activa{color:var(--etl-oro);border-color:var(--etl-oro)}
.etl-muted{color:var(--etl-gris);font-size:13px;line-height:1.6}
.etl-diario,.etl-mapa{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.etl-diario button{width:100%;text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--etl-linea);color:var(--etl-texto);padding:12px 14px;font-family:'Cormorant Garamond',serif;font-size:1.15rem;cursor:pointer;display:flex;gap:12px;align-items:baseline}
.etl-diario button span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--etl-oro)}
.etl-volver{background:none;border:0;color:var(--etl-oro);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;cursor:pointer;padding:0;margin-bottom:10px}
.etl-mapa li{display:grid;grid-template-columns:44px 1fr auto auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--etl-linea);background:rgba(255,255,255,.02)}
.etl-viajar{padding:8px 12px;font-size:10px}
.etl-mapa li.cerrado{opacity:.5}.etl-mapa li.actual{border-color:var(--etl-oro)}
.etl-mapa .etl-roman{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--etl-oro)}
.etl-mapa b{display:block;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.2rem}.etl-mapa small{color:var(--etl-gris);font-size:12px}
.etl-mapa em{font-family:'JetBrains Mono',monospace;font-size:11px;font-style:normal;color:var(--etl-oro)}
.etl-ayuda p,.etl-ayuda li{font-size:14px;line-height:1.65;color:#d6d0c2}.etl-ayuda ul{padding-left:18px}.etl-ayuda b{color:var(--etl-oro);font-weight:500}
.etl-ajustes label{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--etl-linea);font-size:14px}
.etl-ajustes select{background:#141a2c;color:var(--etl-texto);border:1px solid var(--etl-linea);padding:8px 10px;font:inherit}
.etl-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
/* Aviso */
#etl-toast{position:fixed;top:calc(70px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%,-12px);background:var(--etl-panel);border:1px solid var(--etl-linea);color:var(--etl-texto);padding:12px 18px;font-family:'Cormorant Garamond',serif;font-size:1.1rem;opacity:0;pointer-events:none;transition:.35s;z-index:25;max-width:min(560px,calc(100% - 32px));text-align:center}
#etl-toast.visible{opacity:1;transform:translate(-50%,0)}
/* Táctil */
#etl-joystick{position:fixed;width:120px;height:120px;border-radius:50%;border:1px solid var(--etl-linea);background:rgba(10,14,26,.35);z-index:14;pointer-events:none}
#etl-joystick span{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(231,189,88,.55)}
#etl-tactil{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:14;pointer-events:none;display:none}
#etl-tactil small{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;color:var(--etl-gris)}
.etl-tactil #etl-tactil:not([hidden]){display:block}
/* En pantallas táctiles el botón de acción queda bajo el pulgar derecho y es más grande */
.etl-tactil #etl-prompt{left:auto;right:16px;bottom:calc(132px + env(safe-area-inset-bottom,0px));transform:none;max-width:62vw}
.etl-tactil .etl-accion{padding:12px 18px 12px 12px;font-size:11px;min-height:60px;letter-spacing:.1em}.etl-tactil .etl-accion i{width:40px;height:40px;flex:none}
.etl-tactil #etl-tactil{text-align:right;max-width:38vw;animation:etl-desvanecer 1.2s 14s forwards}
@keyframes etl-desvanecer{to{opacity:0;visibility:hidden}}
.etl-tactil #etl-hud{max-width:58vw}.etl-tactil .etl-pista{max-width:58vw}
.etl-tactil .etl-icono{width:40px;height:40px}
@media (max-width:480px){.etl-marca{display:none}}
@media (orientation:portrait){.etl-tactil #etl-prompt{bottom:calc(180px + env(safe-area-inset-bottom,0px))}.etl-tactil .etl-hud-santuario{font-size:1.05rem}}
@media (max-height:460px){.etl-capa{padding-top:calc(52px + env(safe-area-inset-top,0px))}#etl-titulo{font-size:2.4rem;margin-bottom:12px}.etl-lineas p{font-size:1rem;margin:0 0 3px}.etl-form{margin-top:12px;gap:6px}.etl-controles{margin-top:12px;font-size:11px}#etl-enigma{top:calc(58px + env(safe-area-inset-top,0px))}.etl-anillo{width:78px;height:78px}.etl-instruccion{margin-bottom:8px}#etl-hud{bottom:10px;left:12px}.etl-pista{margin-top:6px}}
@media (max-width:640px){.etl-capitulo{display:none}.etl-marca{font-size:13px;letter-spacing:.1em}.etl-barra{gap:8px;padding:0 10px 0 12px;padding-top:env(safe-area-inset-top,0px)}#etl-prompt{bottom:calc(150px + env(safe-area-inset-bottom,0px))}#etl-toast{font-size:1rem;padding:10px 14px}.etl-pista{max-width:260px;font-size:11px}#etl-enigma{right:12px;left:12px;width:auto;top:calc(64px + env(safe-area-inset-top,0px))}.etl-enigma-caja{padding:12px}.etl-anillo{width:90px;height:90px}.etl-instruccion{font-size:12px}#etl-hud{max-width:70vw}.etl-hud-santuario{font-size:1.1rem}}
@media (prefers-reduced-motion:reduce){.etl-anillo-carga{animation:none}}