/* ==========================================================================
   Segundo Turno — sistema visual
   Concepto: tablero de planta, no dashboard de startup.
   Regla del acento: el ámbar ocupa como máximo el 5% de la superficie.
   ========================================================================== */

:root{
  /* Grafito de plano */
  --g900:#0B131A; --g800:#152532; --g700:#22323F; --g500:#48606F;
  /* Ámbar de turno noche */
  --a500:#E2571C; --a600:#B8410F; --a400:#FF6A2B; --a100:#FDEDE4;
  /* Papel de plano */
  --papel:#F7F5F2; --blanco:#FFFFFF; --linea:#E3E0DB;
  --tinta:#152532; --tinta2:#6E7781;
  /* Funcionales */
  --ok:#2E9E6B; --aviso:#D98A00; --alerta:#C93A3F;

  --ancho:1120px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Archivo',var(--sans);
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{font-family:var(--display); margin:0 0 .5em; line-height:1.1}
h1{font-weight:700; font-size:clamp(34px,5.4vw,60px); letter-spacing:-.022em}
h2{font-weight:700; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.015em}
h3{font-weight:600; font-size:clamp(20px,2.2vw,25px); letter-spacing:-.01em}
p{margin:0 0 1.1em}
.ojo{
  font-family:var(--display); font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.12em; color:var(--tinta2);
  margin:0 0 14px;
}
.lead{font-size:clamp(18px,2.1vw,21px); line-height:1.55; color:var(--g700)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.chico{font-size:15px; color:var(--tinta2)}
strong{font-weight:600}

/* ---------- layout ---------- */
.wrap{max-width:var(--ancho); margin:0 auto; padding:0 24px}
section{padding:clamp(56px,8vw,104px) 0}
.sec-linea{border-top:1px solid var(--linea)}
.grid{display:grid; gap:clamp(28px,4vw,48px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.g2,.g3{grid-template-columns:1fr}}

/* ---------- marca ---------- */
.lockup{display:flex; align-items:center; gap:13px; text-decoration:none}
.lockup svg{flex:0 0 auto}
.lk{font-family:var(--display); line-height:.94}
.lk .a{display:block; font-weight:500; letter-spacing:.145em; font-size:11px; color:var(--tinta2)}
.lk .b{display:block; font-weight:800; letter-spacing:.012em; font-size:18px; color:var(--tinta)}
.head-dark .lk .a{color:#93A1AC}
.head-dark .lk .b{color:#F7F5F2}

/* ---------- header ---------- */
header{background:var(--g800); position:sticky; top:0; z-index:50}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 24px; max-width:var(--ancho); margin:0 auto; flex-wrap:wrap}
nav{display:flex; gap:26px; align-items:center}
nav a{color:#C6D0D8; text-decoration:none; font-size:15px; font-weight:500; white-space:nowrap}
nav a:hover{color:#fff}

/* En pantalla chica el menú no desaparece: pasa a una fila propia, desplazable
   de costado. Un sitio de una sola página sin forma de saltar a los precios
   obliga a scrollear a ciegas. */
@media(max-width:880px){
  /* Con la fila de menú el encabezado mide ~155px. Pegado arriba se comería
     un tercio de la pantalla de un celular, así que abajo de 880 no es sticky. */
  header{position:static}
  .head-in{padding:12px 0 0}
  .lockup,.head-in > .btn{margin:0 18px}
  nav{
    order:3; width:100%; margin-top:12px; padding:10px 18px;
    gap:20px; overflow-x:auto; border-top:1px solid #22323F;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  nav::-webkit-scrollbar{display:none}
  nav a{font-size:14px}
}

/* ---------- botones ---------- */
.btn{
  display:inline-block; font-family:var(--sans); font-weight:600; font-size:16px;
  letter-spacing:.01em; padding:13px 22px; text-decoration:none; border:1px solid transparent;
  transition:background .15s,color .15s,border-color .15s; cursor:pointer;
}
.btn-primario{background:var(--a500); color:#fff}
.btn-primario:hover{background:var(--a600)}
.btn-linea{border-color:var(--linea); color:var(--tinta); background:transparent}
.btn-linea:hover{border-color:var(--g500)}
.btn-claro{border:1px solid #3A4C5A; color:#E9EDF0}
.btn-claro:hover{border-color:#93A1AC}
.btn-sm{padding:9px 16px; font-size:14px}

/* ---------- hero ---------- */
.hero{padding:clamp(52px,8vw,100px) 0 clamp(44px,6vw,72px)}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,64px); align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}}
.hero h1{margin-bottom:.3em}
.bajada{
  font-family:var(--display); font-weight:600; font-size:15px;
  text-transform:uppercase; letter-spacing:.1em; color:var(--a600); margin:0 0 22px;
}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; align-items:center}
.hero-panel{background:var(--g800); padding:26px; color:#C6D0D8}
.hero-panel .ojo{color:var(--a400)}
.hero-panel .linea-p{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid #22323F; font-size:15px}
.hero-panel .linea-p:last-of-type{border-bottom:0}
.hero-panel .v{font-family:var(--mono); color:#E9EDF0}
.hero-panel .pie{font-size:13px; color:#6E7781; margin:14px 0 0; line-height:1.45}

/* ---------- franja de cifras ---------- */
.franja{background:var(--g800); color:#E9EDF0}
.franja .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding-top:44px; padding-bottom:44px}
@media(max-width:760px){.franja .wrap{grid-template-columns:1fr; gap:26px}}
.cifra .n{font-family:var(--mono); font-weight:600; font-size:clamp(32px,4.2vw,50px); color:var(--a400); line-height:1}
.cifra .t{display:block; margin-top:10px; font-size:15px; color:#93A1AC; line-height:1.4}

/* ---------- tarjetas ---------- */
.card{background:var(--blanco); border:1px solid var(--linea); padding:clamp(22px,3vw,30px)}
.pilar{border-left:2px solid var(--linea); padding-left:24px}
.pilar h3{margin-bottom:.4em}
.testigo{
  font-family:var(--display); font-weight:600; font-size:17px; color:var(--g800);
  border-top:1px solid var(--linea); padding-top:14px; margin-top:18px; line-height:1.35;
}

/* ---------- listas ---------- */
ul.lim{list-style:none; padding:0; margin:0}
ul.lim li{padding:11px 0 11px 26px; border-bottom:1px solid var(--linea); position:relative}
ul.lim li:last-child{border-bottom:0}
ul.lim li::before{content:''; position:absolute; left:0; top:20px; width:10px; height:2px; background:var(--a500)}
ul.no li::before{background:var(--tinta2)}

/* ---------- tabla de precios ---------- */
.tabla{width:100%; border-collapse:collapse; background:var(--blanco); border:1px solid var(--linea); min-width:600px}
.tabla th,.tabla td{text-align:left; padding:15px 18px; border-bottom:1px solid var(--linea); vertical-align:top}
.tabla th{font-family:var(--display); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--tinta2); background:#FBFAF8}
.tabla td:last-child,.tabla th:last-child{text-align:right}
.tabla .plan{font-family:var(--display); font-weight:700; font-size:18px}
.tabla .desc{display:block; color:var(--tinta2); font-size:15px; margin-top:4px; font-weight:400; font-family:var(--sans); line-height:1.5}
.tabla tr:last-child td{border-bottom:0}
.tabla .destacado{background:var(--a100)}
.precio{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; font-size:17px; white-space:nowrap}
.precio small{display:block; font-weight:400; font-size:13px; color:var(--tinta2); margin-top:3px; white-space:nowrap}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---------- bloque destacado ---------- */
.destaque{background:var(--g800); color:#E9EDF0; padding:clamp(30px,5vw,52px)}
.destaque h2{color:#fff}
.destaque .lead{color:#C6D0D8}
.destaque .ojo{color:var(--a400)}
.destaque ul.lim li{border-bottom-color:#22323F}

/* ---------- casos ---------- */
.caso{border-top:2px solid var(--g800); padding-top:22px}
.caso .quien{font-family:var(--display); font-weight:700; font-size:22px; line-height:1.15}
.caso .rubro{color:var(--tinta2); font-size:15px; margin:6px 0 18px}
.dato{border-top:1px solid var(--linea); padding-top:12px; margin-top:12px}
.dato .n{font-family:var(--mono); font-weight:600; font-size:25px; color:var(--g800); line-height:1.1}
.dato .t{display:block; font-size:14px; color:var(--tinta2); line-height:1.45; margin-top:4px}

/* ---------- preguntas ---------- */
details{border-bottom:1px solid var(--linea); padding:4px 0}
details summary{
  cursor:pointer; list-style:none; padding:15px 34px 15px 0; position:relative;
  font-family:var(--display); font-weight:600; font-size:18px; line-height:1.35;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:''; position:absolute; right:6px; top:25px; width:11px; height:2px; background:var(--a500);
}
details summary::before{
  content:''; position:absolute; right:11px; top:20px; width:2px; height:11px;
  background:var(--a500); transition:opacity .18s;
}
details[open] summary::before{opacity:0}
details .resp{padding:0 0 18px; max-width:74ch}
details .resp p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
footer{background:var(--g900); color:#93A1AC; padding:52px 0 36px; font-size:15px}
footer a{color:#C6D0D8; text-decoration:none}
footer a:hover{color:#fff}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:36px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
.foot-desc{font-family:var(--display); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:#6E7781; margin-top:16px; line-height:1.6}
footer ul{list-style:none; padding:0; margin:0}
footer li{padding:5px 0}
.legal{border-top:1px solid #22323F; margin-top:36px; padding-top:20px; font-size:13px; color:#6E7781; line-height:1.6}

/* ---------- utilidades ---------- */
.max70{max-width:70ch}
.max60{max-width:60ch}
.mt0{margin-top:0}
.mb0{margin-bottom:0}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}