/* ==================================================================
   Héroes Anónimos — "Consola de despacho"
   ================================================================== */
:root{
  --bg:        #0a0b0d;
  --bg-panel:  #111316;
  --bg-panel2: #17191d;
  --line:      rgba(232,230,225,0.09);
  --line-strong: rgba(232,230,225,0.16);
  --ink:       #e8e6e1;
  --ink-dim:   #8b8f94;
  --ink-faint: #55585c;

  --red:    #ff3b30;
  --red-dim:#d1281f;
  --cyan:   #2dd4ff;
  --amber:  #ffb020;

  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --rail-w: 260px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--red); color:#0a0b0d; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

.mono{ font-family:var(--mono); }

.shell{ display:grid; grid-template-columns:var(--rail-w) 1fr; min-height:100vh; }

/* ================= status rail ================= */
.rail{
  position:sticky; top:0; height:100vh;
  border-right:1px solid var(--line);
  background:var(--bg-panel);
  padding:26px 22px;
  display:flex; flex-direction:column;
}
.rail-brand{ display:flex; align-items:center; gap:10px; margin-bottom:44px; }
.rail-brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px rgba(255,59,48,0.18); animation:blink 2.4s ease infinite; }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }
.rail-brand span{ font-family:var(--mono); font-size:13.5px; letter-spacing:0.03em; }

.rail-stats{ display:flex; flex-direction:column; gap:26px; margin-bottom:auto; }
.stat-label{ font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:6px; }
.stat-value{ font-family:var(--mono); font-size:26px; color:var(--cyan); }
.stat-value.red{ color:var(--red); }
.stat-value.amber{ color:var(--amber); }
.stat-sub{ font-size:11.5px; color:var(--ink-faint); margin-top:3px; }

.rail-nav{ display:flex; flex-direction:column; gap:14px; margin-top:40px; padding-top:24px; border-top:1px solid var(--line); }
.rail-nav a{ font-size:13px; text-decoration:none; color:var(--ink-dim); transition:color 0.15s; }
.rail-nav a:hover{ color:var(--ink); }

@media (max-width:960px){
  .shell{ grid-template-columns:1fr; }
  .rail{ position:relative; height:auto; flex-direction:row; flex-wrap:wrap; gap:20px 34px; align-items:center; }
  .rail-brand{ margin-bottom:0; width:100%; }
  .rail-stats{ flex-direction:row; gap:30px; margin-bottom:0; }
  .rail-nav{ display:none; }
}

/* ================= main ================= */
.main{ min-width:0; }
.tx{ padding:64px 6vw; border-bottom:1px solid var(--line); }
.tx-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:30px; font-family:var(--mono); font-size:12px; color:var(--ink-faint); }
.tx-head .code{ color:var(--red); }
.tx-head .rule{ flex:1; height:1px; background:var(--line); }

/* hero */
.tx-hero{ padding-top:52px; }
.hero-copy{ max-width:640px; }
.hero-copy h1{
  font-family:var(--mono); font-weight:600; font-size:clamp(30px,4.2vw,48px);
  line-height:1.18; margin:0 0 24px; letter-spacing:-0.01em;
}
.hero-copy h1 .accent{ color:var(--cyan); }
.hero-copy p{ color:var(--ink-dim); font-size:17px; max-width:480px; margin-bottom:34px; }
.ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  padding:14px 24px; border-radius:4px; font-size:14px; font-family:var(--mono);
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  border:1px solid transparent; transition:transform 0.15s, border-color 0.15s, background 0.15s;
}
.btn-primary{ background:var(--red); color:#0a0b0d; font-weight:600; }
.btn-primary:hover{ transform:translateY(-2px); background:#ff5347; }
.btn-ghost{ border-color:var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--ink-dim); }

/* incoming transmission visual */
.decode{
  margin-top:56px; border:1px solid var(--line); border-radius:6px; background:var(--bg-panel);
  padding:22px 24px; max-width:640px;
}
.decode-row{ display:flex; gap:14px; align-items:center; font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); padding:7px 0; border-bottom:1px dashed var(--line); }
.decode-row:last-child{ border-bottom:none; }
.decode-row .k{ width:120px; color:var(--ink-faint); flex-shrink:0; }
.decode-row .v{ color:var(--ink); }
.decode-row .v.live{ color:var(--cyan); }
.bar{ flex:1; height:4px; background:var(--line); border-radius:2px; overflow:hidden; }
.bar i{ display:block; height:100%; background:var(--cyan); width:0%; animation:fill 2.6s ease forwards 0.3s; }
@keyframes fill{ to{ width:88%; } }

/* transmission sections generic */
.tx h2{ font-family:var(--mono); font-size:clamp(22px,2.8vw,30px); font-weight:600; max-width:560px; margin:0 0 14px; }
.tx > p.desc{ color:var(--ink-dim); max-width:480px; margin-bottom:44px; }

/* log-style feature list */
.log{ border-top:1px solid var(--line); }
.log-row{
  display:grid; grid-template-columns:90px 1fr 1fr; gap:24px; padding:22px 0;
  border-bottom:1px solid var(--line); align-items:start;
}
.log-row .tag{ font-family:var(--mono); font-size:11px; color:var(--amber); }
.log-row h4{ font-size:16px; margin:0 0 4px; font-family:var(--sans); font-weight:600; }
.log-row p{ color:var(--ink-dim); font-size:14px; margin:0; }

@media (max-width:760px){
  .log-row{ grid-template-columns:1fr; gap:6px; }
}

/* extortion spotlight */
.spot{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.spot-phones{ display:flex; gap:14px; align-items:flex-end; }
.phone{ border:1px solid var(--line-strong); border-radius:16px; overflow:hidden; background:var(--bg-panel2); }
.phone.a{ width:38%; }
.phone.b{ width:46%; }
@media (max-width:860px){ .spot{ grid-template-columns:1fr; } }

/* steps as radio checklist */
.checklist{ display:flex; flex-direction:column; }
.check-row{
  display:flex; gap:20px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line);
}
.check-row:first-child{ border-top:1px solid var(--line); }
.check-box{
  width:20px; height:20px; border:1px solid var(--ink-faint); border-radius:3px; flex-shrink:0; margin-top:2px;
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; color:var(--cyan);
}
.check-row.done .check-box{ background:var(--cyan); border-color:var(--cyan); color:#0a0b0d; }
.check-row h4{ font-size:15.5px; margin:0 0 4px; }
.check-row p{ color:var(--ink-dim); font-size:14px; margin:0; }

/* pricing panel */
.price-panel{
  border:1px solid var(--line-strong); border-radius:8px; padding:36px; max-width:420px; background:var(--bg-panel);
  position:relative;
}
.price-panel .amount{ font-family:var(--mono); font-size:44px; margin:16px 0 6px; color:var(--cyan); }
.price-panel .amount span{ font-size:13px; color:var(--ink-faint); font-family:var(--sans); }
.price-list{ list-style:none; padding:0; margin:24px 0; display:flex; flex-direction:column; gap:10px; }
.price-list li{ font-size:13.5px; color:var(--ink-dim); font-family:var(--mono); }
.price-list li::before{ content:"> "; color:var(--red); }

/* testimonial transcript style */
.transcript{ display:flex; flex-direction:column; gap:0; max-width:720px; }
.line{ display:grid; grid-template-columns:130px 1fr; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); }
.line .who{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); }
.line p{ margin:0; font-size:15px; color:var(--ink); }

/* faq */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:20px 0; display:flex; justify-content:space-between; gap:20px;
  font-size:15.5px; font-weight:500;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"[+]"; font-family:var(--mono); font-size:12px; color:var(--ink-faint); }
.faq-item[open] summary::after{ content:"[–]"; color:var(--red); }
.faq-item p{ color:var(--ink-dim); font-size:14px; max-width:600px; padding-bottom:20px; margin:0; }

/* footer / contact */
.foot-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.05em; }
.field input, .field textarea{
  width:100%; background:var(--bg-panel); border:1px solid var(--line-strong); border-radius:4px;
  padding:12px 14px; color:var(--ink); font-family:var(--sans); font-size:14px;
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:2px solid var(--cyan); outline-offset:1px; }

.contact-block h5{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); text-transform:uppercase; margin-bottom:4px; }
.contact-block p{ margin:0 0 22px; }

.bottom-bar{
  display:flex; justify-content:space-between; padding:26px 6vw; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); flex-wrap:wrap; gap:12px;
}
.bottom-bar a{ color:var(--ink-faint); text-decoration:none; margin-right:16px; }
.bottom-bar a:hover{ color:var(--ink-dim); }

@media (max-width:860px){
  .foot-grid{ grid-template-columns:1fr; gap:36px; }
}