/* ============================================================
   FAKE O REAL — Estilos
   Colección EL TÍO IA · eltioia.cl
   Estética: centro de análisis digital. Sobrio, claro y calmado.
   A propósito NO es alarmista: el rojo se usa poco y nunca domina.
   ============================================================ */

:root{
  --bg:        #eef2f8;
  --card:      #ffffff;
  --ink:       #16263a;
  --ink-soft:  #61748c;
  --line:      #dbe3ee;
  --blue:      #2563c9;   /* color principal */
  --blue-dark: #1a4a9c;
  --mint:      #12a37a;   /* acierto */
  --amber:     #d98324;   /* "investigar" */
  --rose:      #cf5a5a;   /* alerta, con moderación */
  --violet:    #6d4fd4;
  --radius:    18px;
  --shadow:    0 12px 30px rgba(22,38,58,.10);
  --font:      "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  min-height:100dvh;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(37,99,201,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,201,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 75%);
}

/* ---------- Pantallas ---------- */
#app{ position:relative; z-index:1; }

.screen{ display:none; min-height:100dvh; padding:clamp(14px,3.4vw,34px); place-items:center; }
.screen.is-active{ display:grid; animation:screenIn .38s ease both; }
@keyframes screenIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

.card{
  width:min(800px,100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(20px,4.4vw,40px);
  text-align:center;
  position:relative;
}

/* ---------- Inicio ---------- */
.badge-lab{
  display:inline-block; font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.16em; color:var(--blue);
  background:#eaf1fd; border:1px solid #d3e2fa;
  padding:6px 14px; border-radius:99px; margin-bottom:18px;
}

.hero-icon{ font-size:clamp(52px,13vw,84px); line-height:1; animation:tilt 5s ease-in-out infinite; display:inline-block; }
.hero-icon.small{ font-size:clamp(38px,9vw,56px); }
@keyframes tilt{
  0%,100%{ transform:rotate(-6deg) translateY(0); }
  50%    { transform:rotate(6deg) translateY(-8px); }
}

.title{
  font-size:clamp(30px,8vw,58px); font-weight:800; letter-spacing:-.02em;
  margin:.08em 0 .14em; color:var(--ink);
}
.tagline{ font-size:clamp(15px,3.5vw,19px); color:var(--ink-soft); line-height:1.65; margin:0 auto 24px; max-width:46ch; }
.tagline strong{ color:var(--blue-dark); }

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:26px; }
.pillar{
  background:#f6f9fd; border:1px solid var(--line); border-radius:14px;
  padding:14px 8px; display:grid; gap:6px; justify-items:center;
}
.pillar span{ font-size:26px; }
.pillar b{ font-size:12.5px; color:var(--ink-soft); font-weight:600; }

.home-links{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px; }

.brand{
  margin:22px 0 10px; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft);
}
.brand strong{ color:var(--blue); }

/* ---------- Botones ---------- */
.btn{
  font-family:var(--font); font-weight:700; cursor:pointer;
  border:none; border-radius:12px; padding:13px 24px; font-size:15.5px;
  text-decoration:none; display:inline-block;
  transition:transform .12s ease, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:3px solid var(--violet); outline-offset:3px; }

.btn-primary{
  background:linear-gradient(180deg, #3479e0 0%, var(--blue-dark) 100%);
  color:#fff; box-shadow:0 5px 0 #143c80, 0 10px 22px rgba(26,74,156,.25);
}
.btn-primary:hover{ filter:brightness(1.07); }
.btn-primary:active{ box-shadow:0 2px 0 #143c80; }
.btn-xl{ font-size:clamp(16px,4vw,20px); padding:16px 32px; width:100%; }

.btn-ghost{
  background:#fff; color:var(--ink-soft); border:1.5px solid var(--line);
  font-size:14px; padding:10px 18px; font-weight:600;
}
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue-dark); }

.btn-back{ background:#eef2f8; color:var(--ink-soft); font-size:13.5px; padding:8px 15px; font-weight:600; }
.btn-back:hover{ background:#e2e9f3; }

/* ---------- Instrucciones y reglas ---------- */
#screen-howto .btn-back,
#screen-rules .btn-back{ position:absolute; top:clamp(14px,3vw,22px); left:clamp(14px,3vw,22px); }
#screen-howto .card,
#screen-rules .card{ padding-top:clamp(60px,12vw,70px); }

.panel-title{ font-size:clamp(23px,5.6vw,34px); font-weight:800; margin:0 0 8px; letter-spacing:-.01em; }
.panel-sub{ color:var(--ink-soft); margin:0 0 24px; font-size:15px; }

.steps{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:12px; text-align:left; }
.steps li{ display:flex; gap:14px; align-items:flex-start; background:#f6f9fd; border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.step-n{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:var(--blue); color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:15px;
}
.steps b{ display:block; margin-bottom:2px; font-size:15.5px; }
.steps p{ margin:0; font-size:14px; color:var(--ink-soft); line-height:1.55; }

.note{
  text-align:left; background:#fff8ec; border:1px solid #f0dfc2;
  border-radius:14px; padding:14px 16px; font-size:14.5px; line-height:1.6;
  color:#6b5533; margin-bottom:20px;
}
.note b{ color:#4d3c22; }

.rules{ list-style:none; counter-reset:r; margin:0 0 22px; padding:0; display:grid; gap:12px; text-align:left; }
.rules li{
  counter-increment:r;
  display:flex; gap:14px; align-items:flex-start;
  background:#f6f9fd; border:1px solid var(--line); border-radius:14px; padding:16px;
}
.rules li::before{
  content:counter(r);
  flex:0 0 auto; width:32px; height:32px; border-radius:10px;
  background:var(--violet); color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:16px;
}
.rules b{ display:block; font-size:16px; margin-bottom:3px; }
.rules p{ margin:0; font-size:14.5px; color:var(--ink-soft); line-height:1.6; }
.rule-icon{ font-size:20px; margin-right:6px; }

/* ---------- HUD ---------- */
#screen-game{ align-content:start; gap:12px; }

.hud{
  width:min(880px,100%);
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:9px 14px;
}
.hud-item{ display:flex; flex-direction:column; align-items:center; min-width:74px; }
.hud-label{ font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); }
.hud-value{ font-family:var(--font-mono); font-weight:500; font-size:clamp(18px,4.4vw,24px); color:var(--blue-dark); }
.hud-value.pop{ animation:pop .4s ease; }
@keyframes pop{ 0%{transform:scale(1);} 45%{transform:scale(1.28); color:var(--violet);} 100%{transform:scale(1);} }

.progress-bar{ width:min(880px,100%); height:8px; border-radius:99px; background:#dde5f0; overflow:hidden; }
.progress-fill{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg, var(--blue), #4fb0e8);
  transition:width .45s cubic-bezier(.4,1.4,.5,1);
}

/* ---------- Etapas ---------- */
.stage{ width:min(880px,100%); animation:stageIn .35s ease both; }
@keyframes stageIn{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none;} }

/* ---------- La publicación ---------- */
.post{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(18px,3.6vw,28px); text-align:left;
  border-left:5px solid var(--blue);
}
.post-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.cat-tag{
  background:#eaf1fd; border:1px solid #d3e2fa; color:var(--blue-dark);
  border-radius:99px; padding:5px 13px; font-size:12.5px; font-weight:700;
}
.post-kind{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }

.post-title{ font-size:clamp(19px,4.6vw,28px); line-height:1.32; margin:0 0 12px; font-weight:800; letter-spacing:-.01em; }
.post-body{ font-size:clamp(14.5px,3.4vw,17px); line-height:1.65; color:#3c4d61; margin:0 0 18px; }

.meta{ margin:0; display:grid; gap:6px; border-top:1px dashed var(--line); padding-top:14px; }
.meta-row{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.meta dt{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); min-width:74px;
}
.meta dd{ margin:0; font-size:14.5px; color:var(--ink); font-weight:600; }

.question{
  text-align:center; font-size:clamp(16px,4vw,20px); font-weight:700;
  margin:22px 0 12px;
}

/* ---------- Las tres decisiones ---------- */
.choices{ display:grid; gap:10px; }
@media (min-width:760px){ .choices{ grid-template-columns:repeat(3,1fr); } }

.choice{
  font-family:var(--font); font-weight:700; font-size:16px; cursor:pointer;
  background:var(--card); border:2px solid var(--line); border-radius:14px;
  padding:16px 14px; color:var(--ink); text-align:center;
  display:grid; gap:6px; justify-items:center;
  transition:transform .12s, border-color .2s, box-shadow .2s, background .2s;
}
.choice span{ font-size:26px; line-height:1; }
.choice:hover:not(:disabled){ transform:translateY(-3px); box-shadow:0 10px 20px rgba(22,38,58,.12); }
.choice:focus-visible{ outline:3px solid var(--violet); outline-offset:3px; }
.choice:disabled{ cursor:default; }
.choice[data-choice="confiable"]:hover:not(:disabled){ border-color:var(--mint); }
.choice[data-choice="investigar"]:hover:not(:disabled){ border-color:var(--amber); }
.choice[data-choice="dudoso"]:hover:not(:disabled){ border-color:var(--rose); }

.choice.chosen{ box-shadow:0 0 0 3px rgba(109,79,212,.25); border-color:var(--violet); }
.choice.is-answer{ background:#eefaf5; border-color:var(--mint); }
.choice.dim{ opacity:.45; }

/* ---------- Pregunta de verificación ---------- */
.verify-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(18px,3.6vw,28px); text-align:left;
  border-left:5px solid var(--violet);
}
.verify-kicker{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--violet); margin:0 0 6px;
}
.verify-title{ font-size:clamp(19px,4.6vw,26px); margin:0 0 18px; font-weight:800; letter-spacing:-.01em; }
.verify-options{ display:grid; gap:10px; }

.vopt{
  display:flex; gap:12px; align-items:center; text-align:left; width:100%;
  font-family:var(--font); font-size:clamp(14.5px,3.4vw,16.5px); font-weight:600;
  background:#f8fafd; border:2px solid var(--line); border-radius:13px;
  padding:14px 16px; color:var(--ink); cursor:pointer;
  transition:transform .12s, border-color .2s, background .2s;
}
.vopt:hover:not(:disabled){ border-color:var(--blue); background:#fff; transform:translateX(3px); }
.vopt:focus-visible{ outline:3px solid var(--violet); outline-offset:2px; }
.vopt:disabled{ cursor:default; }
.vopt .letter{
  flex:0 0 auto; width:30px; height:30px; border-radius:8px;
  background:#e7edf7; color:var(--blue-dark);
  display:grid; place-items:center; font-family:var(--font-mono); font-size:14px; font-weight:500;
}
.vopt.good{ background:#eefaf5; border-color:var(--mint); }
.vopt.good .letter{ background:var(--mint); color:#fff; }
.vopt.bad{ background:#fdf1f1; border-color:var(--rose); }
.vopt.bad .letter{ background:var(--rose); color:#fff; }
.vopt.dim{ opacity:.5; }

/* ---------- Explicación ---------- */
.explain-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(18px,3.6vw,28px); text-align:left;
}
.explain-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.explain-icon{ font-size:34px; line-height:1; }
.explain-title{ font-size:clamp(19px,4.6vw,26px); margin:0 0 4px; font-weight:800; }
.explain-sub{ margin:0; font-size:14.5px; color:var(--ink-soft); }
.explain-points{
  margin-left:auto; font-family:var(--font-mono); font-size:clamp(16px,4vw,22px);
  font-weight:500; color:var(--mint); white-space:nowrap;
}

.clues, .lesson{
  background:#f6f9fd; border:1px solid var(--line);
  border-radius:14px; padding:16px 18px; margin-bottom:14px;
}
.clues h3, .lesson h3{ font-size:14px; margin:0 0 10px; letter-spacing:.02em; color:var(--blue-dark); }
.clues ul{ margin:0; padding-left:20px; display:grid; gap:7px; }
.clues li{ font-size:14.5px; line-height:1.55; color:#3c4d61; }
.lesson p{ margin:0; font-size:15px; line-height:1.7; color:#3c4d61; }
.lesson p strong{ color:var(--ink); }

/* ---------- Resultado ---------- */
.rank-icon{ font-size:clamp(50px,12vw,80px); line-height:1; animation:pop2 .7s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pop2{ 0%{ transform:scale(0) rotate(-25deg); opacity:0;} 100%{ transform:none; opacity:1;} }
.rank-name{ font-size:clamp(23px,6vw,38px); font-weight:800; margin:8px 0 4px; color:var(--blue-dark); letter-spacing:-.01em; }
.rank-msg{ color:var(--ink-soft); margin:0 0 22px; font-size:15px; line-height:1.6; }

.final-score{ background:#f6f9fd; border:1px solid var(--line); border-radius:16px; padding:14px; margin-bottom:20px; }
.fs-num{ display:block; font-family:var(--font-mono); font-weight:500; font-size:clamp(38px,11vw,64px); color:var(--blue-dark); line-height:1; }
.fs-lbl{ display:block; font-size:11.5px; letter-spacing:.22em; color:var(--ink-soft); margin-top:6px; }

.bars{ display:grid; gap:16px; margin-bottom:24px; text-align:left; }
.bar-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:14.5px; font-weight:700; margin-bottom:6px; }
.bar-head b{ font-family:var(--font-mono); font-weight:500; color:var(--blue-dark); }
.bar{ height:12px; border-radius:99px; background:#dde5f0; overflow:hidden; }
.bar-fill{ height:100%; width:0%; border-radius:99px; background:linear-gradient(90deg,var(--blue),#4fb0e8); transition:width .9s cubic-bezier(.3,1.2,.4,1); }
.bars small{ display:block; margin-top:5px; font-size:12.5px; color:var(--ink-soft); line-height:1.45; }

.review{ text-align:left; margin-bottom:22px; }
.review h3{ font-size:15px; margin:0 0 10px; color:var(--blue-dark); }
.review-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.review-list li{
  display:flex; gap:10px; align-items:flex-start;
  background:#f8fafd; border:1px solid var(--line); border-left-width:4px;
  border-radius:12px; padding:10px 12px; font-size:13.5px; line-height:1.45;
}
.review-list li.full { border-left-color:var(--mint); }
.review-list li.half { border-left-color:var(--amber); }
.review-list li.zero { border-left-color:var(--rose); }
.rv-text b{ display:block; font-size:13.5px; }
.rv-text small{ display:block; color:var(--ink-soft); margin-top:2px; }

.result-actions{ display:grid; gap:10px; justify-items:center; }
@media (min-width:520px){ .result-actions{ grid-auto-flow:column; justify-content:center; align-items:center; } }
.result-actions .btn-xl{ width:auto; }

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- Móvil ---------- */
@media (max-width:520px){
  .hud{ padding:8px 10px; gap:6px; }
  .hud-item{ min-width:62px; }
  .btn-quit{ order:-1; width:100%; }
  .pillars{ gap:6px; }
  .pillar span{ font-size:22px; }
  .pillar b{ font-size:11px; }
  .explain-points{ font-size:16px; }
  .meta dt{ min-width:66px; }
}