/* ============================================================
   ALGOMYTH · Sistema de diseño v3
   Editorial y rompedor: wordmark centrado, menú overlay,
   portada con el terminal a pantalla completa detrás de
   tipografía gigante. Cuerpo claro premium; el gráfico y los
   cierres viven en navy profundo.
   ============================================================ */

:root{
  /* Claros */
  --bg:        #f7f9fd;
  --panel:     #ffffff;
  --panel-2:   #fbfcff;

  /* Navy (terminal, overlay, footer) */
  --navy:      #070d1f;
  --navy-2:    #0b1430;

  /* Líneas */
  --line:      #e3e9f6;
  --line-2:    #c9d6ef;

  /* Marca */
  --blue:      #2457e6;
  --blue-2:    #2f6bff;
  --cyan:      #41d8ff;
  --soft:      rgba(36,87,230,.07);

  /* Texto */
  --txt:       #0c1733;
  --txt-2:     #46526f;
  --txt-3:     #7d89a8;

  /* Mercado */
  --long:      #19cf9b;
  --short:     #ff5470;

  --grad:      linear-gradient(135deg, var(--blue) 0%, #38a8ff 100%);
  --shadow:    0 10px 34px rgba(18,48,120,.08);
  --shadow-lg: 0 24px 70px rgba(18,48,120,.13);
  --radius:    14px;
  --radius-lg: 22px;

  --font-disp: "Clash Display", "Inter", system-ui, sans-serif;
  --font-brand: "Syne", "Clash Display", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --top-h: 84px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{ font-family: var(--font-disp); font-weight:600; line-height:1.08; letter-spacing:-.02em; color: var(--txt); }
h1{ font-size: clamp(2.4rem, 5.6vw, 4.2rem); }
h2{ font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3{ font-size: 1.3rem; }
p{ color: var(--txt-2); }
a{ color: var(--blue); text-decoration:none; }
a:hover{ color: var(--blue-2); }
img{ max-width:100%; display:block; }
::selection{ background: rgba(47,107,255,.18); }

.wrap{ width:min(1180px, 92vw); margin:0 auto; }

.grad{
  background: var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Trazo hueco, para la línea central del titular gigante */
.hollow{
  color:transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.8);
}

/* ---------- Wordmark: sin símbolo, la A lleva el acento ---------- */
.wordmark{
  font-family: var(--font-brand); font-weight:700; font-size:1.55rem;
  letter-spacing:-.02em; color: var(--txt); white-space:nowrap;
}
.wordmark b{
  font-weight:700; position:relative;
  background: var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.wordmark b::after{           /* el detalle: un tick bajo la A */
  content:""; position:absolute; left:8%; bottom:-.12em; width:84%; height:3px;
  background: var(--grad); border-radius:2px;
  transform: skewX(-18deg);
}
.wordmark:hover{ color: var(--txt); }

/* ---------- Barra superior: live · wordmark centrado · MENU ---------- */
.top{
  position:sticky; top:0; z-index:60; height:var(--top-h);
  background: rgba(255,255,255,.86); backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.top-in{
  width:min(1380px,94vw); margin:0 auto; height:100%;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
.top-live{
  justify-self:start; display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; color:var(--txt-3);
}
.top-live .dot{ width:8px; height:8px; border-radius:50%; background:var(--long); box-shadow:0 0 10px var(--long); animation:pulse 1.6s infinite; }
.menu-btn{
  justify-self:end; display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.22em;
  background:none; border:1px solid var(--line-2); border-radius:999px;
  color:var(--txt); padding:.62rem 1.2rem; cursor:pointer; transition:all .2s;
}
.menu-btn span{ width:16px; height:2px; background:currentColor; position:relative; }
.menu-btn span::before{ content:""; position:absolute; left:0; top:-5px; width:16px; height:2px; background:currentColor; }
.menu-btn:hover{ border-color:var(--blue); color:var(--blue); }

/* Variante sobre la portada oscura: flota, transparente */
.top-cine{
  position:fixed; left:0; right:0; background:transparent; border-bottom:0; backdrop-filter:none;
}
.top-cine .wordmark{ color:#fff; }
.top-cine .top-live{ color:rgba(255,255,255,.65); }
.top-cine .menu-btn{ color:#fff; border-color:rgba(255,255,255,.35); }
.top-cine .menu-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
.top.scrolled{
  position:fixed; background:rgba(7,13,31,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(96,140,255,.15);
}
body.has-cine{ --top-pad:0px; }
body:not(.has-cine) .top{ position:sticky; }

/* ---------- Menú overlay a pantalla completa ---------- */
.overlay{
  position:fixed; inset:0; z-index:70; background:
    radial-gradient(ellipse 70% 60% at 80% 10%, rgba(47,107,255,.22), transparent 65%),
    var(--navy);
  opacity:0; pointer-events:none; transition:opacity .28s ease;
  overflow:auto;
}
.overlay.open{ opacity:1; pointer-events:auto; }
.ov-in{
  width:min(1180px,92vw); margin:0 auto; min-height:100%;
  display:grid; grid-template-columns:1.3fr 1fr; gap:3rem;
  align-items:center; padding:7rem 0 3rem;
}
.ov-nav a{
  display:flex; align-items:baseline; gap:1.2rem;
  font-family:var(--font-disp); font-weight:600;
  font-size:clamp(2.2rem,5.2vw,4rem); letter-spacing:-.02em;
  color:#fff; padding:.35rem 0; line-height:1.1;
  transition:color .18s, transform .18s;
}
.ov-nav a i{ font-style:normal; font-family:var(--font-mono); font-size:.8rem; color:var(--cyan); letter-spacing:.2em; }
.ov-nav a:hover{ color:var(--cyan); transform:translateX(10px); }
.ov-side{ display:flex; flex-direction:column; gap:1.6rem; align-items:flex-start; }
.ov-links{ display:flex; flex-direction:column; gap:.3rem; }
.ov-links a{ color:#9fb0d4; font-size:1rem; padding:.22rem 0; }
.ov-links a:hover{ color:#fff; }
.ov-foot{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; color:#5b6b95; text-transform:uppercase; }
body.menu-open{ overflow:hidden; }
.overlay .menu-close{ position:fixed; top:26px; right:3vw; color:#fff; border-color:rgba(255,255,255,.35); }
.overlay .menu-close:hover{ color:var(--cyan); border-color:var(--cyan); }

/* ---------- PORTADA: el terminal detrás de todo ---------- */
.cine{
  position:relative; height:100svh; min-height:640px;
  background:var(--navy); overflow:hidden; color:#fff;
}
.cine canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.cine::after{   /* viñeta para que la tipografía respire */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 52% 46% at 50% 52%, rgba(7,13,31,.66) 0%, rgba(7,13,31,.28) 60%, transparent 100%),
    linear-gradient(180deg, rgba(7,13,31,.6) 0%, transparent 24%, transparent 64%, rgba(7,13,31,.85) 100%);
}
.cine-mid{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  text-align:center; pointer-events:none; padding:var(--top-h) 4vw 4rem;
}
.cine-mid h1{
  font-family:var(--font-brand); font-weight:700; color:#fff;
  font-size:clamp(2rem, 4.6vw, 4.4rem); line-height:1.07; letter-spacing:.005em;
  text-wrap:balance; text-shadow:0 14px 70px rgba(4,8,20,.85), 0 2px 18px rgba(4,8,20,.6);
}
.cine-mid .sub{
  margin-top:1.3rem; color:#9fb0d4; font-size:clamp(.92rem,1.2vw,1.05rem);
  max-width:34rem; margin-left:auto; margin-right:auto;
  text-shadow:0 2px 14px rgba(4,8,20,.8);
}
.cine-mid .cta{ margin-top:2rem; pointer-events:auto; display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }

/* lectura de precio en vivo, esquina */
.cine-price{
  position:absolute; z-index:3; right:3vw; top:calc(var(--top-h) + 1.2rem);
  font-family:var(--font-mono); text-align:right; pointer-events:none;
}
.cine-price b{ display:block; font-size:1.15rem; color:var(--cyan); text-shadow:0 0 14px rgba(65,216,255,.35); }
.cine-price span{ font-size:.62rem; letter-spacing:.2em; color:rgba(255,255,255,.45); }

/* pie de la portada: nav editorial + scroll */
.cine-foot{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between;
  width:min(1380px,94vw); margin:0 auto; padding:1.4rem 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.cine-foot nav{ display:flex; gap:2.2rem; }
.cine-foot nav a{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.75);
}
.cine-foot nav a:hover{ color:var(--cyan); }
.cine-foot .scroll{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.55); display:flex; align-items:center; gap:.6rem;
}
.cine-foot .scroll::after{ content:"↓"; animation:bob 1.6s infinite; }
@keyframes bob{ 50%{ transform:translateY(4px); } }
@keyframes pulse{ 50%{ opacity:.35; } }

/* ---------- Secciones editoriales ---------- */
section{ padding: 5.5rem 0; }
.sec-head{ max-width:50rem; margin-bottom:3rem; }
.sec-head h2{ margin:.6rem 0 .8rem; }
.sec-n{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.3em;
  color:var(--blue); text-transform:uppercase;
  display:flex; align-items:center; gap:1rem;
}
.sec-n::after{ content:""; height:1px; width:70px; background:var(--line-2); }
.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color: var(--blue);
  padding:.42rem .9rem; border:1px solid var(--line-2); border-radius:999px;
  background: var(--soft);
}
.kicker::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--blue-2); box-shadow:0 0 8px rgba(47,107,255,.6); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family: var(--font-disp); font-weight:600; font-size:.98rem; letter-spacing:.01em;
  padding:.85rem 1.7rem; border-radius:12px; cursor:pointer;
  border:1px solid transparent; transition: all .22s ease; white-space:nowrap;
}
.btn-pri{
  background: var(--grad); color:#fff;
  box-shadow: 0 8px 22px rgba(36,87,230,.32), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-pri:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(36,87,230,.4); color:#fff; }
.btn-ghost{
  background: var(--panel); color: var(--txt);
  border-color: var(--line-2); box-shadow: 0 2px 8px rgba(18,48,120,.05);
}
.btn-ghost:hover{ border-color: var(--blue); color: var(--blue); }
.btn-dark{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.4);
}
.btn-dark:hover{ border-color:var(--cyan); color:var(--cyan); }
.btn-lg{ padding:1.05rem 2.2rem; font-size:1.05rem; }

/* ---------- Tira de datos ---------- */
.strip{
  margin-top:0; display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background: var(--panel); box-shadow: var(--shadow); overflow:hidden;
}
.strip > div{ padding:1.4rem 1.6rem; border-left:1px solid var(--line); }
.strip > div:first-child{ border-left:0; }
.strip b{ display:block; font-family:var(--font-disp); font-weight:600; font-size:1.7rem; color:var(--txt); }
.strip span{ font-size:.8rem; color:var(--txt-3); letter-spacing:.04em; }

/* ---------- Panel del gráfico (páginas interiores) ---------- */
.chartbox{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid #1c2c58;
  background: linear-gradient(180deg, #0d1736, #081024);
  box-shadow: var(--shadow-lg);
}
.chartbox .bar{
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem 1rem; border-bottom:1px solid rgba(96,140,255,.16);
  font-family:var(--font-mono); font-size:.74rem; color:#9fb0d4;
}
.chartbox .bar .dot{ width:8px; height:8px; border-radius:50%; background:var(--long); box-shadow:0 0 8px var(--long); animation: pulse 1.6s infinite; }
.chartbox .bar .sym{ color:#fff; font-weight:600; }
.chartbox .bar .tag{ margin-left:auto; padding:.2rem .6rem; border-radius:6px; border:1px solid rgba(96,140,255,.3); color:var(--cyan); letter-spacing:.12em; }
.chartbox canvas{ display:block; width:100%; height:360px; }

/* ---------- Hero claro de páginas interiores ---------- */
.hero{ position:relative; padding: 5rem 0 4rem; }
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto; height:600px; z-index:-1;
  background: radial-gradient(ellipse 55% 60% at 50% 20%, rgba(47,107,255,.10), transparent 70%);
}
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:3.5rem; align-items:center; }
.hero h1{ margin:1.2rem 0 1.1rem; }
.hero .sub{ font-size:1.12rem; max-width:34rem; }
.hero-cta{ display:flex; gap:.9rem; margin-top:1.9rem; flex-wrap:wrap; }
.hero-note{ margin-top:1rem; font-size:.82rem; color:var(--txt-3); }

/* ---------- Tarjetas ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.card{
  position:relative; padding:1.9rem; border-radius:var(--radius);
  background: var(--panel); border:1px solid var(--line);
  transition: all .25s ease; box-shadow: 0 2px 10px rgba(18,48,120,.04);
}
.card:hover{ border-color: var(--line-2); transform: translateY(-4px); box-shadow: var(--shadow); }
.card .ico{
  width:46px; height:46px; display:grid; place-items:center; margin-bottom:1.1rem;
  border-radius:12px; background: var(--soft); border:1px solid var(--line-2);
  color: var(--blue); font-size:1.2rem;
}
.card h3{ margin-bottom:.6rem; }
.card p{ font-size:.94rem; }

/* ---------- Productos ---------- */
.prods{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; }
.prod{
  position:relative; padding:2.3rem; border-radius:var(--radius-lg);
  background: var(--panel); border:1px solid var(--line); overflow:hidden;
  box-shadow: var(--shadow);
}
.prod.star{ border-color: rgba(47,107,255,.45); box-shadow: 0 18px 50px rgba(36,87,230,.14); }
.prod.star::before{ content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--grad); }
.prod .pill{
  position:absolute; top:1.4rem; right:1.4rem;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em;
  color:var(--blue); border:1px solid var(--line-2); border-radius:999px; padding:.3rem .7rem;
  background: var(--soft);
}
.prod h3{ font-size:1.7rem; margin-bottom:.4rem; }
.prod .tagline{ color:var(--txt-3); font-size:.92rem; margin-bottom:1.3rem; }
.prod .price{ font-family:var(--font-disp); font-weight:600; font-size:2.4rem; color:var(--txt); margin:1rem 0 .2rem; }
.prod .price small{ font-size:.95rem; color:var(--txt-3); font-weight:400; }
.prod ul{ list-style:none; margin:1.3rem 0 1.7rem; }
.prod li{ padding:.45rem 0 .45rem 1.7rem; position:relative; color:var(--txt-2); font-size:.95rem; }
.prod li::before{ content:"→"; position:absolute; left:0; color:var(--blue); font-family:var(--font-mono); }

/* ---------- Pasos ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; counter-reset: paso; }
.step{ padding:1.9rem; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel); position:relative; box-shadow: 0 2px 10px rgba(18,48,120,.04); }
.step::before{
  counter-increment: paso; content:"0" counter(paso);
  font-family:var(--font-mono); font-size:.8rem; color:var(--blue);
  display:block; margin-bottom:.9rem; letter-spacing:.2em;
}

/* ---------- Tablas ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow: var(--shadow); }
table{ width:100%; border-collapse:collapse; font-size:.93rem; }
th{ text-align:left; font-family:var(--font-disp); font-weight:600; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-3); padding:.9rem 1.1rem; border-bottom:1px solid var(--line-2); background:var(--panel-2); }
td{ padding:.85rem 1.1rem; border-bottom:1px solid var(--line); color:var(--txt-2); }
tr:last-child td{ border-bottom:0; }

/* ---------- CTA final (navy) ---------- */
.cta-end{
  text-align:center; padding:4.5rem 2rem; border-radius:var(--radius-lg);
  border:1px solid #1c2c58;
  background:
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(47,107,255,.25), transparent 70%),
    linear-gradient(180deg, var(--navy-2), var(--navy));
  box-shadow: var(--shadow-lg);
}
.cta-end h2{ margin-bottom:.8rem; color:#fff; }
.cta-end p{ max-width:34rem; margin:0 auto 1.8rem; color:#9fb0d4; }
.cta-end .kicker{ border-color:rgba(96,140,255,.35); color:var(--cyan); background:rgba(47,107,255,.12); }

/* ---------- Blog ---------- */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.post{
  display:block; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--panel); transition:all .25s ease;
  box-shadow: 0 2px 10px rgba(18,48,120,.04);
}
.post:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow: var(--shadow); }
.post .ph{ aspect-ratio:16/9; background:linear-gradient(135deg,#e7eefc,#d6e2f8); display:grid; place-items:center; color:var(--blue); font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; }
.post img.ph{ object-fit:cover; width:100%; }
.post .tx{ padding:1.2rem 1.4rem 1.5rem; }
.post .meta{ font-family:var(--font-mono); font-size:.72rem; color:var(--txt-3); letter-spacing:.08em; }
.post h3{ color:var(--txt); font-size:1.05rem; margin:.5rem 0 .4rem; }
.post p{ font-size:.88rem; }

/* ---------- Artículo ---------- */
.article{ max-width:46rem; margin:0 auto; }
.article h1{ font-size:clamp(2rem,4.2vw,2.9rem); margin:1rem 0 1rem; }
.article .meta{ font-family:var(--font-mono); font-size:.78rem; color:var(--txt-3); letter-spacing:.08em; margin-bottom:2.2rem; }
.article h2{ font-size:1.55rem; margin:2.4rem 0 .9rem; }
.article h3{ margin:1.8rem 0 .7rem; }
.article p{ margin-bottom:1.1rem; }
.article ul,.article ol{ margin:0 0 1.2rem 1.4rem; color:var(--txt-2); }
.article li{ margin-bottom:.45rem; }
.article blockquote{
  margin:1.6rem 0; padding:1.1rem 1.5rem; border-left:3px solid var(--blue);
  background:var(--soft); border-radius:0 10px 10px 0; color:var(--txt);
  font-family:var(--font-disp); font-weight:500; font-size:1.08rem;
}
.article .key{
  margin:1.6rem 0; padding:1.3rem 1.5rem; border:1px solid var(--line-2);
  border-radius:var(--radius); background:var(--soft);
}
.article .key b{ color:var(--blue); display:block; margin-bottom:.4rem; }
.article img{ border-radius:var(--radius); margin:1.5rem 0; }
.article .table-wrap{ margin:1.5rem 0; box-shadow:none; }

/* ---------- Página interior genérica ---------- */
.page-head{ padding:4.5rem 0 1rem; }
.page-head h1{ margin:1rem 0 .8rem; }
.page-head p{ max-width:40rem; font-size:1.08rem; }

/* ---------- FAQ ---------- */
.faq details{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); margin-bottom:.8rem; overflow:hidden;
  box-shadow: 0 2px 10px rgba(18,48,120,.04);
}
.faq summary{
  cursor:pointer; padding:1.1rem 1.4rem; font-family:var(--font-disp);
  font-weight:600; color:var(--txt); list-style:none; position:relative; padding-right:3rem;
}
.faq summary::after{ content:"+"; position:absolute; right:1.4rem; color:var(--blue); font-size:1.3rem; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 1.4rem 1.2rem; font-size:.95rem; }

/* ---------- Riesgo (sobre pie navy) ---------- */
.risk{
  margin-top:3rem; padding:1.1rem 1.4rem; border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius); font-size:.78rem; color:#8794b5; background:rgba(255,255,255,.04);
}

/* ---------- Pie ---------- */
footer{
  margin-top:4rem;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  padding:3.5rem 0 2.5rem;
}
footer .wordmark{ color:#fff; font-size:1.5rem; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }
.foot-grid h4{ font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:#8794b5; margin-bottom:1rem; font-family:var(--font-mono); font-weight:400; }
.foot-grid a{ display:block; color:#b6c2e0; font-size:.92rem; padding:.28rem 0; }
.foot-grid a:hover{ color:#fff; }
.foot-brand p{ font-size:.88rem; max-width:20rem; margin-top:.8rem; color:#8794b5; }
.foot-low{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.1);
  font-size:.78rem; color:#8794b5;
}
.foot-low a{ color:#b6c2e0; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .cards,.steps,.posts{ grid-template-columns:1fr 1fr; }
  .strip{ grid-template-columns:1fr 1fr; }
  .strip > div:nth-child(3){ border-left:0; border-top:1px solid var(--line); }
  .strip > div:nth-child(4){ border-top:1px solid var(--line); }
  .prods{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .ov-in{ grid-template-columns:1fr; gap:2rem; padding-top:6rem; }
  .cine-foot nav{ gap:1.2rem; flex-wrap:wrap; }
}
@media (max-width: 680px){
  .top-live{ display:none; }
  .top-in{ grid-template-columns:auto 1fr auto; }
  .wordmark{ justify-self:start; }
  .cards,.steps,.posts{ grid-template-columns:1fr !important; }
  .cine-foot nav{ display:none; }
  .cine-price{ display:none; }
}

/* ---- Promo film ---- */
.film{ max-width:980px; margin:0 auto; }
.film video{ display:block; width:100%; border-radius:14px; border:1px solid var(--line);
  box-shadow:0 30px 80px -20px rgba(7,13,31,.45); background:#070d1f; }

/* ---- Claim en el pie ---- */
.foot-claim{ font-family:'Syne',sans-serif; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:.78rem; color:var(--txt-2); margin:.9rem 0 .35rem; }

/* ---- Performance ---- */
.cfg{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.6rem 1.8rem; }
.cfg-row{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; margin-bottom:1.2rem; }
.cfg-lab{ font-family:'JetBrains Mono',monospace; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-2); }
.cfg select{ font:600 1rem Inter,sans-serif; padding:.55rem .9rem; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--txt); }
.cfg-mkts{ display:flex; gap:1.1rem; flex-wrap:wrap; }
.cfg-mkts label{ display:flex; align-items:center; gap:.45rem; font-size:.95rem; color:var(--txt); cursor:pointer; }
.cfg-note{ margin-top:1rem; font-size:.85rem; color:var(--txt-3); }
.perf-engine{ margin-top:3.4rem; }
.perf-chart{ position:relative; }
.perf-chart canvas, .perf-years canvas{ display:block; width:100%; border-radius:12px; }
.perf-tabs{ position:absolute; top:10px; right:12px; z-index:2; display:flex; gap:6px; }
.perf-tabs button{ font:600 .72rem 'JetBrains Mono',monospace; letter-spacing:.06em; padding:.35rem .7rem;
  border-radius:999px; border:1px solid rgba(255,255,255,.18); background:transparent; color:rgba(255,255,255,.65); cursor:pointer; }
.perf-tabs button.on{ background:#2457e6; border-color:#2457e6; color:#fff; }
.perf-years{ margin-top:.8rem; }

/* ---- Inside a week ---- */
.wk-block{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.4rem 1.6rem; margin-top:1.4rem; }
.wk-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.wk-head h3{ margin:0; font-family:'Clash Display',sans-serif; font-size:1.15rem; }
.wk-head span{ font-family:'JetBrains Mono',monospace; font-size:.75rem; color:var(--txt-3); }
.wk-grid{ display:grid; grid-template-columns:repeat(20,1fr); gap:5px; }
.wk-tile{ aspect-ratio:1; border-radius:4px; }
.wk-tile.g{ background:#1fa06a; }
.wk-tile.r{ background:#e05252; opacity:.75; }
.wk-row{ display:grid; grid-template-columns:110px 1fr 240px; align-items:center; gap:1rem; padding:.45rem 0; border-bottom:1px solid var(--line); }
.wk-row:last-child{ border-bottom:0; }
.wk-day{ font-family:'JetBrains Mono',monospace; font-size:.82rem; color:var(--txt-2); }
.wk-barbox{ background:#eef2f9; border-radius:999px; height:12px; overflow:hidden; }
.wk-bar{ display:block; height:100%; border-radius:999px; }
.wk-bar.g{ background:linear-gradient(90deg,#2457e6,#38a8ff); }
.wk-bar.r{ background:#e05252; }
.wk-val{ font-size:.9rem; font-variant-numeric:tabular-nums; color:var(--txt); }
.wk-val small{ color:var(--txt-3); }
@media (max-width:720px){ .wk-grid{ grid-template-columns:repeat(12,1fr); } .wk-row{ grid-template-columns:84px 1fr; } .wk-val{ grid-column:2; } }

/* ---- Escalera del configurador ---- */
.cfg input[type=number]{ font:600 1rem Inter,sans-serif; padding:.55rem .9rem; width:9.5rem;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--txt); }
.wrapt{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.cfg-table{ width:100%; border-collapse:collapse; font-size:.9rem; font-variant-numeric:tabular-nums; background:#fff; }
.cfg-table th, .cfg-table td{ padding:.6rem .9rem; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
.cfg-table thead th{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-2); }
.cfg-table tr:last-child td{ border-bottom:0; }
.cfg-table tr.on td{ background:#eef4ff; }

/* ---- Terminal live ---- */
.term{ background:#070d1f; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.term-bar{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; padding:.9rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.07); }
.term-tabs{ display:flex; gap:6px; }
.term-tabs button{ font:600 .75rem 'JetBrains Mono',monospace; letter-spacing:.08em; padding:.45rem .9rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); background:transparent; color:rgba(255,255,255,.65); cursor:pointer; }
.term-tabs button.on{ background:#2457e6; border-color:#2457e6; color:#fff; }
.term-cfg{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.term-cfg label{ font:500 .75rem 'JetBrains Mono',monospace; color:rgba(255,255,255,.55); display:flex; align-items:center; gap:.45rem; }
.term-cfg input{ width:6.2rem; font:600 .9rem Inter,sans-serif; padding:.35rem .6rem; border-radius:7px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; }
.term-live{ font:700 .72rem 'JetBrains Mono',monospace; letter-spacing:.12em; color:rgba(255,255,255,.5); }
.term-live.ok{ color:#1fa06a; }
.term canvas{ display:block; width:100%; cursor:grab; touch-action:pan-y; }
.term-foot{ padding:0 1.1rem; }
.term .strip{ border-color:rgba(255,255,255,.08); }
.term .strip > div{ border-color:rgba(255,255,255,.08); }
.term .strip b{ color:#fff; }
.term .strip span{ color:rgba(255,255,255,.45); }
.term-log{ padding:.6rem 1.1rem 1rem; max-height:230px; overflow-y:auto; }
.tl-row{ display:flex; justify-content:space-between; gap:1rem; font:500 .82rem 'JetBrains Mono',monospace;
  color:rgba(255,255,255,.75); padding:.4rem .2rem; border-bottom:1px solid rgba(255,255,255,.05); }
.tl-row.g span:last-child{ color:#1fa06a; font-weight:700; }
.tl-row.r span:last-child{ color:#e05252; font-weight:700; }
.tl-row.open span:last-child{ color:#38a8ff; font-weight:700; }
@media (max-width:720px){ .term-bar{ justify-content:flex-start; } .term canvas{ height:380px; } }

/* ---- Formularios de cuenta ---- */
.form-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.6rem 1.8rem; }
.form-card label{ display:block; font-family:'JetBrains Mono',monospace; font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--txt-2); margin:1rem 0 .4rem; }
.form-card label:first-of-type{ margin-top:0; }
.form-card input[type=email], .form-card input[type=text], .form-card input[type=password]{
  width:100%; font:500 1rem Inter,sans-serif; padding:.65rem .9rem; border:1px solid var(--line);
  border-radius:9px; background:#fff; color:var(--txt); }
.form-card button{ margin-top:1.2rem; }
.form-card h3{ font-family:'Clash Display',sans-serif; margin:1.6rem 0 .4rem; }
.form-hint{ font-size:.85rem; color:var(--txt-3); margin-top:.8rem; }
.form-error{ background:#fdecec; border:1px solid #e05252; color:#8f1f1f; padding:.8rem 1rem; border-radius:10px; margin-bottom:1rem; }
.form-ok{ background:#e9f7f0; border:1px solid #1fa06a; color:#135f40; padding:.8rem 1rem; border-radius:10px; margin-bottom:1rem; }