:root{
  color-scheme: dark;
  --night:#121212;
  --gray:#8A8C8E;
  --smoke:#F3F3F3;
  --white:#FFFFFF;
  --cyan: rgba(45,212,191,0.85);   /* el orbe — la única otra excepción de color */
  --green:#1D9E75;                 /* ganancia — mismo verde que "app real" del resto de la campaña */
  --red:#c0392b;                   /* pérdida / confidencial / error */
  --line-1: rgba(243,243,243,0.09);
  --line-2: rgba(243,243,243,0.18);
  --font-display: 'Cormorant Garamond', serif;
  --font-ui: 'Montserrat', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{
  min-height:100vh; min-height:100dvh;
  background:var(--night); color:var(--smoke);
  font-family:var(--font-ui); overflow-x:hidden;
  overscroll-behavior:none; -webkit-text-size-adjust:100%;
}
body{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.mono{ font-family:var(--font-mono); }

#app{ position:relative; width:100%; min-height:100vh; min-height:100dvh; }

.screen{
  display:none; min-height:100vh; min-height:100dvh; width:100%;
  flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:56px 22px 40px; text-align:center;
}
.screen.active{ display:flex; }

.brand-tag{
  position:fixed; top:0; left:0; right:0; padding:14px 16px 12px;
  background:linear-gradient(180deg, rgba(18,18,18,0.96) 0%, rgba(18,18,18,0) 100%);
  text-align:center; font-size:10px; font-weight:200; letter-spacing:0.35em;
  color:rgba(45,212,191,0.55); text-transform:uppercase; z-index:5; pointer-events:none;
  transition:opacity .2s ease;
}
/* oculto solo durante el juego — el HUD ya ocupa esa franja superior */
body.hide-brand .brand-tag{ opacity:0; }

/* ---- tipografía narrativa ---- */
.headline{ font-family:var(--font-display); font-weight:300; font-size:26px; line-height:1.4; color:var(--white); }
.headline em{ font-style:italic; color:var(--cyan); }
.headline .dim{ color:rgba(243,243,243,0.4); }
.hl-signature{ color:var(--cyan); font-weight:600; }
.hl-danger{ color:rgba(220,70,70,0.95); font-weight:700; }
.hidden{ display:none !important; }

/* ---- párrafos largos de la Voz (razones / quiz / codicia) ---- */
.body-text{ display:flex; flex-direction:column; gap:14px; max-width:380px; text-align:left; }
.body-text p{ font-family:var(--font-display); font-size:17.5px; line-height:1.65; color:rgba(255,255,255,0.8); }
.body-text em{ font-style:italic; color:var(--smoke); }
.body-text b{ color:var(--smoke); font-weight:700; }
.reason-list{ display:flex; flex-direction:column; gap:8px; list-style:none; }
.reason-list li{ font-family:var(--font-ui); font-size:13.5px; line-height:1.5; color:rgba(255,255,255,0.7); padding:10px 12px; border:1px solid var(--line-1); border-radius:8px; background:rgba(255,255,255,0.02); }
.sub{ font-family:var(--font-display); font-style:italic; font-weight:300; font-size:14px; color:rgba(255,255,255,0.5); line-height:1.6; max-width:320px; }
.moraleja{ font-family:var(--font-display); font-style:italic; font-size:15px; color:rgba(255,255,255,0.55); max-width:320px; line-height:1.6; }
.classified-title{
  font-family:var(--font-mono); font-size:14px; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:rgba(220,70,70,0.9); max-width:320px; line-height:1.5;
}

/* ---- orbe "Voz de la Verdad" — idéntico al resto de la campaña ---- */
.voice-orb{ position:relative; margin:0 auto; }
.voice-orb .orb-ring{ position:absolute; inset:-12.5%; border-radius:50%; border:1px solid rgba(45,212,191,0.35); animation:orb-pulse 3s ease-in-out infinite; }
.voice-orb .orb-ring:nth-child(2){ inset:-25%; animation-delay:1s; }
@keyframes orb-pulse{ 0%,100%{ transform:scale(0.94); opacity:.6; } 50%{ transform:scale(1.04); opacity:.15; } }
.voice-orb .orb-circle{ position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; border:1.5px solid rgba(45,212,191,0.4); z-index:2; }
.voice-orb .orb-video{ width:100%; height:100%; object-fit:cover; display:block; }
.voice-orb.pre-speak{ animation:orbPreSpeak 650ms ease-in-out; }
@keyframes orbPreSpeak{ 0%{filter:brightness(1); transform:scale(1);} 40%{filter:brightness(0.72); transform:scale(0.97);} 100%{filter:brightness(1); transform:scale(1);} }
.voice-lines-wrap{ min-height:110px; display:flex; align-items:center; justify-content:center; }
.voice-line{ font-family:var(--font-display); font-weight:400; font-size:clamp(19px,4.6vw,25px); line-height:1.5; color:var(--smoke); max-width:340px; margin:0; opacity:0; }
.voice-line.show{ animation:lineIn 900ms cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes lineIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

/* ---- botones ---- */
.btn{
  padding:15px 36px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.4);
  border-radius:3px; font-family:var(--font-ui); font-size:11px; font-weight:500;
  letter-spacing:0.3em; text-transform:uppercase; color:rgba(255,255,255,0.9);
  cursor:pointer; transition:all .25s ease;
}
.btn:hover{ background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.7); color:#fff; }
.btn:active{ transform:scale(0.98); }
.btn-primary{ margin-top:10px; }
.btn-primary:disabled{ opacity:.35; cursor:not-allowed; }
.btn-primary:disabled:hover{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.4); color:rgba(255,255,255,0.9); }
/* CTA principal más resaltado que el resto — usado donde hay una opción
   secundaria de menor peso al lado (ej. "Quiero saber por qué" vs "obstinado") */
.btn-glow{ border-color:rgba(45,212,191,0.6); box-shadow:0 0 22px -4px rgba(45,212,191,0.4); animation:btn-glow-pulse 2.6s ease-in-out infinite; }
@keyframes btn-glow-pulse{ 0%,100%{ box-shadow:0 0 18px -4px rgba(45,212,191,0.35); } 50%{ box-shadow:0 0 28px -2px rgba(45,212,191,0.55); } }
/* botón de texto, sin caja — para la opción de menor peso ("intentarlo otra vez") */
.btn-text{
  background:none; border:none; margin-top:2px; cursor:pointer; font-family:var(--font-ui);
  font-size:11px; letter-spacing:.08em; color:rgba(255,255,255,0.4); text-decoration:underline;
  text-decoration-color:rgba(255,255,255,0.25); text-underline-offset:3px; padding:6px; transition:color .2s ease;
}
@media (hover:hover){ .btn-text:hover{ color:rgba(255,255,255,0.75); } }

/* ---- opciones seleccionables (quiz) ---- */
.option-list{ display:flex; flex-direction:column; gap:10px; width:100%; max-width:380px; }
.option-row{ display:flex; flex-direction:column; gap:6px; }
.option-box{
  width:100%; text-align:left; padding:14px 16px; border-radius:8px; border:1px solid var(--line-2);
  background:rgba(255,255,255,0.02); color:rgba(255,255,255,0.8); font-family:var(--font-ui);
  font-size:13.5px; line-height:1.45; cursor:pointer; transition:all .2s ease;
}
@media (hover:hover){ .option-box:not(:disabled):hover{ border-color:rgba(255,255,255,0.4); background:rgba(255,255,255,0.05); } }
.option-box.selected{ border-color:rgba(45,212,191,0.6); background:rgba(45,212,191,0.08); color:var(--smoke); }
.option-box:disabled{ opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.option-note{ font-family:var(--font-display); font-style:italic; font-size:12px; color:rgba(255,255,255,0.45); padding-left:4px; }

/* ---- reglas ---- */
.rules-list{ display:flex; flex-direction:column; gap:14px; width:100%; max-width:340px; text-align:left; }
.rule-row{ display:flex; align-items:flex-start; gap:14px; padding:12px 14px; border:1px solid var(--line-1); border-radius:10px; background:rgba(255,255,255,0.02); }
.rule-ico{ font-size:20px; flex:0 0 auto; width:26px; text-align:center; }
.rule-txt{ font-size:13.5px; line-height:1.5; color:rgba(255,255,255,0.65); }
.rule-txt b{ color:var(--smoke); font-weight:600; }
.rule-txt b.c-tp{ color:var(--green); }
.rule-txt b.c-sl{ color:var(--red); }

/* ================= PANTALLA DE JUEGO ================= */
.game-screen{ padding:calc(env(safe-area-inset-top,0px) + 12px) 14px calc(env(safe-area-inset-bottom,0px) + 14px); justify-content:flex-start; gap:10px; }
#hud{ width:100%; max-width:420px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
#scoreBox{
  flex:1; text-align:center; font-family:var(--font-ui); font-size:10px; letter-spacing:0.14em;
  color:rgba(255,255,255,0.45); text-transform:uppercase; background:rgba(255,255,255,0.03);
  border:1px solid var(--line-1); border-radius:10px; padding:9px 8px;
}
#scoreVal{ display:block; font-family:var(--font-mono); font-size:19px; font-weight:700; color:var(--smoke); margin-top:2px; }
#scoreVal.pos{ color:var(--green); }
#scoreVal.neg{ color:var(--red); }
#scoreVal.bump{ animation:scoreBump .35s ease; }
@keyframes scoreBump{ 0%{transform:scale(1);} 35%{transform:scale(1.28);} 100%{transform:scale(1);} }
#attemptsDots{ flex:0 0 auto; display:flex; gap:7px; align-items:center; background:rgba(255,255,255,0.03); border:1px solid var(--line-1); border-radius:10px; padding:10px 12px; height:38px; }
#attemptsDots .dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.16); transition:background .2s ease; }
#attemptsDots .dot.used{ background:var(--red); }

#boardWrap{ position:relative; flex:1 1 auto; width:100%; max-width:420px; margin-top:26px; display:flex; align-items:flex-start; justify-content:center; min-height:0; touch-action:none; }
#board{ touch-action:none; border-radius:4px; }
#exitLabel{
  position:absolute; pointer-events:none; background:rgba(18,18,18,0.92); border:1px solid rgba(45,212,191,0.55);
  color:var(--cyan); font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:0.06em;
  padding:6px 9px; border-radius:6px; white-space:nowrap; opacity:0; transition:opacity .25s ease; z-index:5; top:0; left:50%; transform:translate(-50%,-140%);
}
#exitLabel.show{ opacity:1; }
#swipeHint{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-family:var(--font-ui);
  font-size:10px; letter-spacing:0.1em; color:rgba(255,255,255,0.35); background:rgba(18,18,18,0.7);
  padding:7px 13px; border-radius:999px; border:1px solid var(--line-1); pointer-events:none; transition:opacity .5s ease; z-index:5;
}
#swipeHint.hidden{ opacity:0; }

/* ---- D-pad: control por flechas, alternativa al deslizar con el dedo ---- */
#dpad{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; padding:4px 0 2px; }
.dpad-mid-row{ display:flex; gap:56px; }
.dpad-btn{
  width:46px; height:46px; border-radius:10px; border:1px solid var(--line-2);
  background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.6); display:flex;
  align-items:center; justify-content:center; touch-action:manipulation; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.dpad-btn:active{ background:rgba(45,212,191,0.12); border-color:rgba(45,212,191,0.5); color:var(--cyan); transform:scale(0.94); }
@media (hover:hover){ .dpad-btn:hover{ border-color:rgba(255,255,255,0.35); color:var(--smoke); } }

/* ---- tarjeta de excusa: modal centrado, documento filtrado — no desaparece
   sola, se queda hasta que el usuario le da "Continuar" ---- */
#excuseOverlay{
  position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(0,0,0,0); opacity:0; pointer-events:none; transition:opacity .3s ease, background .3s ease;
}
#excuseOverlay.show{ opacity:1; pointer-events:auto; background:rgba(0,0,0,0.75); }
#excuseCard{
  width:100%; max-width:340px; display:flex; flex-direction:column; align-items:center; gap:10px;
  background:#161616; border:1px solid rgba(220,70,70,0.4); border-radius:12px; padding:26px 22px;
  box-shadow:0 20px 50px rgba(0,0,0,0.55); text-align:center;
}
.excuse-badge{ font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:rgba(220,70,70,0.85); margin-bottom:2px; }
#excuseEmoji{ font-size:34px; line-height:1; margin:4px 0; }
#excuseText{ font-size:15px; line-height:1.55; color:rgba(255,255,255,0.9); margin-bottom:8px; }
#excuse-continue-btn{ width:100%; }

.screenFlash{ position:fixed; inset:0; background:radial-gradient(circle, rgba(220,70,70,0) 0%, rgba(220,70,70,0.35) 100%); pointer-events:none; opacity:0; z-index:55; }
.screenFlash.flash{ animation:screenFlashPulse .5s ease-out forwards; }
@keyframes screenFlashPulse{ 0%{opacity:1;} 100%{opacity:0;} }

/* ================= FORMULARIO DE CONTACTO ================= */
.form-fields{ width:100%; max-width:380px; display:flex; flex-direction:column; gap:12px; }
.field-wrap{ display:flex; flex-direction:column; gap:5px; text-align:left; }
.field-label{ font-size:9px; font-weight:400; letter-spacing:0.25em; color:rgba(255,255,255,0.5); text-transform:uppercase; padding-left:2px; }
.field-input, .field-select{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--line-1); border-radius:4px;
  padding:13px 14px; font-family:var(--font-ui); font-size:13px; font-weight:300; color:rgba(255,255,255,0.9);
  outline:none; transition:all .2s ease; -webkit-appearance:none; color-scheme:dark;
}
/* iOS Safari a veces ignora `color` en inputs y los pinta con su propio
   texto oscuro por defecto sobre nuestro fondo oscuro (texto invisible) —
   -webkit-text-fill-color fuerza el color real, y el :-webkit-autofill
   evita que el autocompletado imponga su propio fondo claro. */
.field-input{ -webkit-text-fill-color:rgba(255,255,255,0.9); caret-color:rgba(255,255,255,0.9); }
.field-input:-webkit-autofill{
  -webkit-text-fill-color:rgba(255,255,255,0.9) !important;
  -webkit-box-shadow:0 0 0px 1000px rgba(255,255,255,0.03) inset !important;
  transition:background-color 9999s ease-in-out 0s;
}
.field-input::placeholder{ color:rgba(255,255,255,0.32); }
.field-input:focus, .field-select:focus{ border-color:rgba(45,212,191,0.5); background:rgba(255,255,255,0.04); }
.field-input.error{ border-color:rgba(192,57,43,0.6); }
.field-input.valid{ border-color:rgba(45,212,191,0.4); }
.field-error{ font-size:10px; font-weight:300; color:rgba(200,80,80,0.75); letter-spacing:0.05em; padding-left:2px; height:0; overflow:hidden; transition:height .2s ease; }
.field-error.show{ height:16px; }
.field-select option{ background:#1a1a1a; color:rgba(255,255,255,0.85); }
.submit-btn{ position:relative; overflow:hidden; width:100%; }
.submit-btn.loading{ color:transparent; pointer-events:none; }
.submit-btn.loading::after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:16px; height:16px; border:1.5px solid rgba(255,255,255,0.3); border-top-color:rgba(255,255,255,0.9); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* ================= CONFIRMACIÓN (idéntico al resto de la campaña) ================= */
.final-check{ width:64px; height:64px; flex-shrink:0; border-radius:50%; border:1px solid rgba(29,158,117,0.35); display:flex; align-items:center; justify-content:center; }
.final-eye{ font-size:26px; animation:eyePulse 3s ease-in-out infinite; }
@keyframes eyePulse{ 0%,100%{ opacity:.45; } 50%{ opacity:.9; } }
.channel-eyebrow{ font-size:10px; font-weight:300; letter-spacing:.2em; color:rgba(255,255,255,0.5); text-transform:uppercase; }
.channel-list{ display:flex; flex-direction:column; gap:10px; width:100%; max-width:360px; }
.channel-card{ display:flex; align-items:center; gap:12px; padding:13px 18px; border-radius:8px; flex-shrink:0; border:1px solid var(--line-2); text-decoration:none; color:var(--smoke); transition:transform .2s ease, border-color .2s ease; }
.channel-card.tg{ background:rgba(41,182,246,0.08); border-color:rgba(41,182,246,0.25); }
.channel-card.wa{ background:rgba(37,211,102,0.08); border-color:rgba(37,211,102,0.25); }
.channel-card.ig{ background:rgba(225,48,108,0.08); border-color:rgba(225,48,108,0.25); }
.channel-icon{ width:32px; height:32px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.channel-card.tg .channel-icon{ background:rgba(41,182,246,0.15); }
.channel-card.wa .channel-icon{ background:rgba(37,211,102,0.15); }
.channel-card.ig .channel-icon{ background:rgba(225,48,108,0.15); }
.channel-info{ flex:1; text-align:left; min-width:0; }
.channel-name{ font-family:var(--font-ui); font-weight:500; font-size:13.5px; color:var(--white); }
.channel-handle{ font-family:var(--font-ui); font-weight:400; font-size:11.5px; color:rgba(255,255,255,0.5); margin-top:2px; }
.channel-chevron{ opacity:.4; flex:none; }
.share-divider{ display:flex; align-items:center; gap:12px; width:100%; max-width:360px; }
.share-divider::before, .share-divider::after{ content:""; flex:1; height:1px; background:var(--line-2); }
.share-divider span{ font-size:9.5px; font-weight:700; letter-spacing:.2em; color:rgba(255,255,255,0.5); text-transform:uppercase; white-space:nowrap; }
.share-card{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:360px;
  padding:16px; border:1px solid rgba(255,255,255,0.5); border-radius:4px; margin:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 100%);
  font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--smoke);
  animation:cta-breathe 3s ease-in-out infinite;
}
@keyframes cta-breathe{ 0%,100%{ box-shadow:0 0 24px rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.5); } 50%{ box-shadow:0 0 36px rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.75); } }
.quick-actions{ display:flex; gap:10px; width:100%; max-width:360px; }
.quick-btn{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 8px; border:1px solid rgba(255,255,255,0.07); border-radius:4px; cursor:pointer; background:rgba(255,255,255,0.02); color:rgba(255,255,255,0.5); font-family:var(--font-ui); font-size:9px; font-weight:300; letter-spacing:.15em; text-transform:uppercase; transition:all .2s ease; }

@media (hover:hover){
  .channel-card:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,0.35); }
  .quick-btn:hover{ border-color:rgba(255,255,255,0.35); color:var(--smoke); }
}
@media (max-width:380px){
  .screen{ padding:48px 16px 32px; gap:16px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}