/* Gravity · Diagnóstico FICTI — hoja de estilos (negro con acentos azules) */
:root{
  --bg:#111447; --bg-2:#1A1F63; --ink:#FFFFFF; --muted:#A9B0D0; --soft:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.16); --accent:#2F9BFF; --accent-2:#1E5BFF; --on-accent:#111447;
  --hot:#FF6A3D; --hot-soft:rgba(255,106,61,.12); --warm:#F2B01E; --cold:#4A8CFF;
  --rock:#7C879F; --moon:#C3CBE0; --header:transparent;
  --glow-1:rgba(47,155,255,.40); --glow-2:rgba(30,91,255,.34); --glow-3:rgba(120,90,255,.18);
  --display:"Outfit", "Segoe UI", system-ui, sans-serif;
  --body:"Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#111447; --bg-2:#1A1F63; --ink:#FFFFFF; --muted:#A9B0D0; --soft:rgba(255,255,255,.05); --line:rgba(255,255,255,.16);
  }
}
:root[data-theme="light"], :root[data-theme="dark"]{
  --bg:#111447; --bg-2:#1A1F63; --ink:#FFFFFF; --muted:#A9B0D0; --soft:rgba(255,255,255,.05); --line:rgba(255,255,255,.16);
  --accent:#2F9BFF; --on-accent:#111447; --header:transparent;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; min-height:100%; color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.55;
  background:var(--bg); -webkit-font-smoothing:antialiased; position:relative;
}
/* El resplandor azul de la parte superior, como el degradado de la marca */
body::before{
  content:""; position:fixed; inset:0 0 auto 0; height:620px; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 78% at 50% -6%, var(--glow-1), transparent 62%),
    radial-gradient(90% 60% at 22% -2%, var(--glow-3), transparent 60%),
    radial-gradient(90% 62% at 82% 2%, var(--glow-2), transparent 60%);
  filter:blur(6px);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 45%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 45%, transparent 78%);
}
.top, main{position:relative; z-index:1}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px}

/* Barra superior azul marino, como el sitio */
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; background:transparent;
  padding:calc(16px + env(safe-area-inset-top,0px)) 22px 10px}
.logo{height:24px; width:auto; filter:none}
.linkbtn{background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.22); color:#FFFFFF; font-size:14px;
  font-weight:500; letter-spacing:.02em; padding:9px 18px; border-radius:999px; text-decoration:none; display:inline-block}
.linkbtn:hover{border-color:#FFFFFF; background:rgba(255,255,255,.1)}

main{max-width:560px; margin:0 auto; padding:26px 22px 48px}
main.wide{max-width:1160px}
h1,h2,.display{font-family:var(--display); font-weight:700; letter-spacing:-.02em; margin:0; color:var(--ink)}
h1{font-size:clamp(34px,8.6vw,48px); line-height:1.08}
h2{font-size:clamp(23px,5.4vw,30px); line-height:1.2; font-weight:600}
p{margin:0}
.lead{color:var(--muted); font-size:18px; max-width:36ch}
.stack>*+*{margin-top:18px}
.btn{display:flex; text-align:center; align-items:center; justify-content:center; width:100%; min-height:58px;
  padding:14px 24px; border-radius:999px; border:0; background:#FFFFFF; color:#111447;
  font-family:var(--display); font-weight:600; font-size:18px; transition:transform .12s ease, filter .12s ease}
.btn:active{transform:scale(.985)}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:rgba(255,255,255,.04); color:var(--ink); border:1.5px solid rgba(255,255,255,.22)}
.btn.ghost:hover{border-color:#FFFFFF}
.btn[disabled]{opacity:.45; cursor:not-allowed}

.orbit{display:block; margin:0 auto}
.mini .orbit{margin:0; flex:none}
.orbit .ring{fill:none; stroke:var(--line); stroke-width:2; stroke-dasharray:2 7}
.orbit .arc{fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; transition:stroke-dashoffset .5s ease}
.orbit .sat{fill:var(--accent)}
.orbit .core{fill:var(--accent)}
.q-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.count{color:var(--muted); font-size:15px; font-variant-numeric:tabular-nums}
.axis{color:var(--accent); font-weight:600; font-size:14px; letter-spacing:.12em; text-transform:uppercase}
.opts{display:grid; gap:10px; margin-top:22px}
.opt{text-align:left; width:100%; min-height:60px; padding:16px 20px; border-radius:16px; border:1.5px solid var(--line);
  background:rgba(255,255,255,.03); font-size:17px; transition:border-color .12s, background .12s, transform .12s}
.opt:hover{border-color:var(--accent)}
.opt.on{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); transform:scale(.995)}
.selfnum{font-family:var(--display); font-size:92px; line-height:1; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; color:var(--accent)}
.selfnum small{font-size:26px; color:var(--muted); font-weight:500}
input[type=range]{width:100%; accent-color:var(--accent); height:40px}
.scale{display:flex; justify-content:space-between; color:var(--muted); font-size:14px}

.reveal{text-align:center}
.reveal .kicker{color:var(--muted); font-size:17px; margin-top:8px; letter-spacing:.08em; text-transform:uppercase}
.reveal .name{font-family:var(--display); font-weight:700; font-size:clamp(52px,15vw,78px); line-height:1; margin-top:6px; color:var(--ink)}
.reveal .desc{font-size:19px; color:var(--muted); max-width:30ch; margin:14px auto 0}
.reveal .score{color:var(--accent); margin-top:12px; font-weight:600; font-variant-numeric:tabular-nums}
@keyframes grow{0%{transform:scale(.15); opacity:0} 60%{transform:scale(1.1); opacity:1} 100%{transform:scale(1)}}
@keyframes spin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
.body-grow{transform-origin:100px 100px; animation:grow 1.1s cubic-bezier(.2,.8,.2,1) both .35s}
.sat-spin{transform-origin:100px 100px; animation:spin 9s linear infinite}
@media (prefers-reduced-motion: reduce){.body-grow,.sat-spin{animation:none}.orbit .arc{transition:none}}

label.f{display:block; font-weight:500; font-size:15px; margin-bottom:6px; color:var(--muted)}
.field{width:100%; min-height:54px; padding:12px 18px; border-radius:14px; border:1.5px solid var(--line); background:rgba(255,255,255,.03); font-size:18px}
.field:focus{border-color:var(--accent); outline:none}
select.field{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%; background-size:6px 6px; background-repeat:no-repeat}
select.field option{color:#111447}
textarea.field{min-height:220px; resize:vertical; font-family:var(--body)}
.check{display:flex; gap:12px; align-items:flex-start; color:var(--muted); font-size:15px}
.check input{width:22px; height:22px; margin-top:2px; accent-color:var(--accent); flex:none}
.err{color:var(--hot); font-size:15px; min-height:1.4em}

.gap{display:grid; grid-template-columns:1fr 1fr; border:1.5px solid var(--line); border-radius:20px; overflow:hidden}
.gap>div{padding:20px}
.gap>div+div{border-left:1.5px solid var(--line); background:rgba(47,155,255,.08)}
.gap .n{font-family:var(--display); font-size:46px; line-height:1.05; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink)}
.gap>div+div .n{color:var(--accent)}
.gap .l{color:var(--muted); font-size:15px}
.bars{display:grid; gap:14px}
.bar-top{display:flex; justify-content:space-between; gap:10px; font-size:16px; margin-bottom:6px}
.bar-top b{font-weight:600}
.track{height:10px; border-radius:99px; background:var(--soft); border:1px solid var(--line); overflow:hidden}
.fill{height:100%; border-radius:99px; background:var(--accent); width:0; transition:width .9s cubic-bezier(.2,.8,.2,1)}
.fill.low{background:var(--hot)}
.block h3{font-family:var(--display); font-weight:600; font-size:20px; margin:0 0 8px; color:var(--ink)}
.block p{color:var(--muted)}
.findings{list-style:none; margin:0; padding:0; display:grid; gap:10px; counter-reset:f}
.findings li{counter-increment:f; display:grid; grid-template-columns:34px 1fr; gap:10px; padding:18px; border-radius:16px; background:var(--hot-soft); border:1px solid rgba(255,106,61,.28)}
.findings li::before{content:counter(f); font-family:var(--display); font-weight:700; color:var(--hot); font-size:22px; line-height:1.1}
.findings .ax{font-size:13px; color:var(--muted); display:block; margin-bottom:3px; letter-spacing:.08em; text-transform:uppercase}
.stage{display:inline-flex; gap:8px; align-items:center; font-size:14px; color:var(--muted); padding:7px 14px; border:1.5px solid var(--line); border-radius:999px}
.stage b{color:var(--accent); font-weight:600}
.defines{font-size:14px; color:var(--muted)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:420px){.two{grid-template-columns:1fr}}
.card{padding:20px; border-radius:20px; border:1.5px solid var(--line); background:rgba(255,255,255,.03)}
.card .k{font-size:14px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.card .v{font-family:var(--display); font-size:26px; font-weight:700; line-height:1.15; margin-top:4px; color:var(--ink)}
.card .d{font-size:15px; color:var(--muted); margin-top:8px}
.mtg{display:grid; gap:14px; margin-top:14px}
.seg{display:flex; flex-wrap:wrap; gap:8px}
.seg button{min-height:44px; padding:8px 16px; border-radius:999px; border:1.5px solid var(--line); background:rgba(255,255,255,.03); font-size:15px}
.seg button.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.flag{display:inline-block; font-size:13px; padding:4px 12px; border-radius:999px; background:var(--hot-soft); color:var(--hot); margin-top:6px}
.team{margin-top:34px; padding-top:24px; border-top:1.5px solid var(--line)}
.team .t{color:var(--muted); font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px}
.temps{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.temp{min-height:50px; border-radius:14px; border:1.5px solid var(--line); background:rgba(255,255,255,.03); font-weight:600}
.temp[data-v=caliente].on{background:var(--hot); border-color:var(--hot); color:#FFFFFF}
.temp[data-v=tibio].on{background:var(--warm); border-color:var(--warm); color:#111447}
.temp[data-v=frio].on{background:var(--cold); border-color:var(--cold); color:#FFFFFF}
.note{font-size:14px; color:var(--muted); margin-top:10px}
.done{padding:16px 20px; border-radius:16px; background:color-mix(in srgb, var(--accent) 12%, transparent); font-weight:500; color:var(--ink)}
.back{background:none; border:0; color:var(--muted); padding:8px 0; font-size:15px}
.back:hover{color:var(--accent)}
.hero-orbit{margin:8px auto 4px}
.fade{animation:fade .28s ease both}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){.fade{animation:none}}

/* Tablero */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.stat{padding:18px; border-radius:18px; background:rgba(255,255,255,.03); border:1.5px solid var(--line)}
.stat .n{font-family:var(--display); font-size:34px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--accent)}
.stat .l{color:var(--muted); font-size:14px}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
.dist{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:8px 16px; border-radius:999px; border:1.5px solid var(--line); font-size:15px; color:var(--muted)}
.chip b{font-variant-numeric:tabular-nums; color:var(--ink)}
.tablewrap{overflow-x:auto; border:1.5px solid var(--line); border-radius:18px}
table{border-collapse:collapse; width:100%; min-width:1040px; font-size:15px}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--muted); font-weight:600; background:rgba(255,255,255,.05); position:sticky; top:0; font-size:14px; letter-spacing:.04em; text-transform:uppercase}
tr:last-child td{border-bottom:0}
td .sub{color:var(--muted); font-size:14px}
td select{min-height:38px; border-radius:99px; border:1.5px solid var(--line); background:#1A1F63; color:#FFFFFF; padding:4px 12px}
.row-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between}
.row-actions .btn{width:auto}
.status{color:var(--muted); font-size:14px}
.empty{padding:30px; text-align:center; color:var(--muted); border:1.5px dashed var(--line); border-radius:18px}

/* Portada: juego de tamaños */
.hero{position:relative; z-index:1; display:flex; flex-direction:column; gap:6px; margin-top:6px}
.hero .l1{font-family:var(--body); font-size:clamp(19px,5vw,24px); color:var(--muted); line-height:1.35}
.hero .l2{font-family:var(--display); font-weight:700; font-size:clamp(38px,11vw,58px); line-height:1.02;
  letter-spacing:-.03em; color:var(--ink); margin-top:8px}
.hero .l2 em{font-style:normal; color:var(--accent)}
.hero .l3{font-family:var(--body); font-size:clamp(16px,4.2vw,19px); color:var(--muted); line-height:1.5; margin-top:14px; max-width:34ch}
.hero .l3 b{color:var(--ink); font-weight:600}

/* Resplandor de las palabras clave al entrar a la pantalla */
.glow{color:var(--accent); font-weight:600; animation:glowin 1.8s ease-out both}
@keyframes glowin{
  0%{text-shadow:none}
  30%{text-shadow:0 0 12px rgba(47,155,255,.95), 0 0 30px rgba(47,155,255,.6)}
  100%{text-shadow:none}
}
.hero .l2 em{font-style:normal; color:var(--accent); animation:glowin 1.8s ease-out both}
@media (prefers-reduced-motion: reduce){
  .glow,.hero .l2 em{animation:none; text-shadow:none}
}

/* Estilo editorial: mayúsculas pesadas, bloques azules y trazos de marcador */
.hero .l2{text-transform:uppercase; letter-spacing:-.035em; font-size:clamp(42px,12.5vw,64px); line-height:.95}
.hero .l2 em{position:relative}
.marker{display:block; width:100%; max-width:330px; height:22px; margin:-6px 0 2px}
.marker path{fill:none; stroke:var(--accent); stroke-width:7; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:420;
  animation:draw 1s cubic-bezier(.2,.8,.2,1) .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.arrowdoodle{display:block; width:62px; height:38px; margin:0 auto 6px}
.arrowdoodle path{fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; stroke-linejoin:round}
.chip-axis{display:inline-block; background:var(--accent); color:#111447; font-family:var(--display); font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; font-size:14px; padding:6px 14px; border-radius:8px}
.axis{display:block}
.opt{border-width:2px; font-weight:500}
.opt.on{background:var(--accent); border-color:var(--accent); color:#111447; font-weight:600}
.btn{border:2px solid #FFFFFF}
.reveal .name{text-transform:uppercase; letter-spacing:-.045em; font-size:clamp(40px,12.5vw,72px); overflow-wrap:anywhere}
.reveal .kicker{display:inline-block; background:var(--accent); color:#111447; padding:5px 14px; border-radius:8px;
  font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.06em}
.block h3, .card .v, .stat .n{text-transform:none}
.block h3{text-transform:uppercase; letter-spacing:-.01em; font-weight:700}
.findings li::before{font-size:26px}
.card{border-width:2px}

/* Preguntas y resultado en el mismo estilo editorial */
.q-head{text-transform:uppercase; letter-spacing:.08em; font-size:13px}
.q-head .count{font-weight:700; color:var(--ink); font-size:13px; letter-spacing:.08em}
.back{text-transform:uppercase; letter-spacing:.08em; font-size:13px; font-weight:600}
.bloques{display:flex; gap:5px; margin:14px 0 18px}
.bloques span{flex:1; height:8px; border-radius:3px; background:rgba(255,255,255,.12)}
.bloques span.on{background:var(--accent)}
.opts h2, .qtext{font-family:var(--display)}
.qtext{font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:clamp(23px,6.2vw,30px); line-height:1.12; margin:10px 0 0}
.opt{display:flex; align-items:center; gap:14px; padding:14px 18px}
.opt .letra{flex:none; width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.08); color:var(--accent);
  font-family:var(--display); font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center}
.opt.on .letra{background:#111447; color:var(--accent)}
.bar-top{font-family:var(--display); text-transform:uppercase; letter-spacing:.02em; font-size:15px; font-weight:700}
.bar-top .count{text-transform:none; letter-spacing:0; font-weight:400; font-family:var(--body)}
.track{height:14px; border-radius:4px; border:2px solid var(--line)}
.fill{border-radius:2px}
.fill.low{background:#FFFFFF}
.findings li{background:rgba(47,155,255,.10); border:2px solid rgba(47,155,255,.45); grid-template-columns:40px 1fr}
.findings li::before{width:34px; height:34px; border-radius:8px; background:var(--accent); color:#111447;
  display:flex; align-items:center; justify-content:center; font-size:20px}
.findings .ax{color:var(--accent); font-weight:700}
.gap{border:2px solid var(--line); border-radius:16px}
.gap>div+div{background:var(--accent)}
.gap>div+div .l{color:rgba(17,20,71,.72)}
.gap>div+div .n{color:#111447}
.card.blockazul{background:var(--accent); border-color:var(--accent)}
.card.blockazul .k{color:rgba(17,20,71,.72)}
.card.blockazul .v,.card.blockazul .d{color:#111447}
.block h3{font-size:22px}