/* ------------------------------------------------------------------
   Estilos de las páginas estáticas de Enciende
   (páginas de zona y páginas de servicio)

   Las usa scripts/generar-paginas.py. No lleva hash en el nombre, así
   que Netlify la revalida en cada visita: un cambio acá se ve al
   instante y no hay que regenerar las páginas.
   ------------------------------------------------------------------ */

:root{
  --navy-950:#07050e; --navy-900:#0e0b1f; --navy-800:#1a1533;
  --cyan:#a78bfa; --blue:#3b82f6; --ok:#25d366;
  --txt:#e8eefc; --muted:#93a4c4; --line:rgba(255,255,255,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(160deg,var(--navy-950),var(--navy-900) 45%,#0d1f4a);
  color:var(--txt);line-height:1.65;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}

header{border-bottom:1px solid var(--line);position:sticky;top:0;
  background:rgba(5,13,31,.92);backdrop-filter:blur(12px);z-index:10}
header .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;height:64px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800}
.logo{width:36px;height:36px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  display:grid;place-items:center;color:var(--navy-950);font-size:13px;font-weight:900}
.tel{font-size:14px;font-weight:700;color:var(--cyan);text-decoration:none}

.hero{padding:56px 0 40px}
.kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
h1{font-size:clamp(1.9rem,5vw,2.9rem);line-height:1.15;font-weight:900;
  letter-spacing:-.02em;margin-bottom:18px}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--cyan),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.05rem;color:#c3cee6;max-width:62ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;
  border-radius:12px;font-weight:800;font-size:15px;text-decoration:none;
  transition:transform .15s}
.btn:active{transform:scale(.98)}
.btn-primary{background:linear-gradient(90deg,var(--cyan),var(--blue));
  color:var(--navy-950)}
.btn-ghost{border:1px solid rgba(255,255,255,.2);color:var(--txt)}
.btn-wa{background:var(--ok);color:#04240f}

section{padding:34px 0;border-top:1px solid var(--line)}
h2{font-size:1.45rem;font-weight:800;margin-bottom:6px;letter-spacing:-.01em}
.sub{color:var(--muted);font-size:.95rem;margin-bottom:20px}

/* ---- respuesta directa de precio ---- */
.respuesta{background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.22);
  border-radius:16px;padding:22px 24px;margin-bottom:8px}
.respuesta .etiqueta{font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.respuesta .cifra{font-size:clamp(1.8rem,5vw,2.4rem);font-weight:900;
  letter-spacing:-.02em;line-height:1.1;margin-bottom:8px}
.respuesta .cifra small{font-size:.42em;font-weight:700;color:var(--muted);
  letter-spacing:0}
.respuesta p{color:#c3cee6;font-size:.95rem}

/* ---- listas incluye / no incluye ---- */
.columnas{display:grid;gap:16px;margin-top:8px}
@media(min-width:640px){ .columnas{grid-template-columns:1fr 1fr} }
.lista{background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-radius:14px;padding:18px 20px}
.lista h3{font-size:.95rem;font-weight:800;margin-bottom:10px}
.lista ul{list-style:none;display:grid;gap:7px}
.lista li{font-size:.9rem;color:#c3cee6;padding-left:22px;position:relative}
.lista li::before{position:absolute;left:0;top:0;font-weight:900}
.lista.si li::before{content:"✓";color:#7ee2a8}
.lista.no li::before{content:"×";color:#f9a8a8}
.lista.no li{color:#9fadc7}

/* ---- tabla de precios ---- */
.precios{display:grid;gap:2px}
.fila{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:11px 14px;background:rgba(255,255,255,.035);border-radius:8px}
.fila:nth-child(odd){background:rgba(255,255,255,.02)}
.fila .n{font-size:.94rem;color:#d3dcf0}
.fila .p{font-weight:800;color:var(--cyan);white-space:nowrap}
.fila.gratis .p{color:#7ee2a8}

/* ---- pasos ---- */
.pasos{display:grid;gap:10px;counter-reset:paso;margin-top:8px}
.paso{display:flex;gap:14px;background:rgba(255,255,255,.035);
  border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.paso::before{counter-increment:paso;content:counter(paso,decimal-leading-zero);
  font-weight:900;color:rgba(34,211,238,.5);font-size:1.1rem;flex:0 0 auto}
.paso div b{display:block;font-size:.95rem;margin-bottom:2px}
.paso div span{font-size:.88rem;color:#b9c6de}

/* ---- chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 13px;border-radius:999px;font-size:.86rem;
  background:rgba(34,211,238,.10);border:1px solid rgba(34,211,238,.22);color:#ddd6fe;
  text-decoration:none;display:inline-block}
a.chip:hover{background:rgba(34,211,238,.18);border-color:rgba(34,211,238,.45)}

/* ---- FAQ ---- */
details{background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:12px;margin-bottom:8px}
summary{cursor:pointer;padding:14px 16px;font-weight:700;font-size:.95rem;
  list-style:none}
summary::-webkit-details-marker{display:none}
details p{padding:0 16px 15px;color:#b9c6de;font-size:.92rem}

/* ---- bloque de cierre ---- */
.nota{background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.2);
  border-radius:14px;padding:20px;margin-top:8px}
.nota h2{font-size:1.2rem;margin-bottom:8px}
.nota p{color:#c3cee6;font-size:.95rem}
.nota a{color:var(--cyan);text-decoration:underline}

/* ---- pie ---- */
footer{border-top:1px solid var(--line);padding:36px 0 48px;margin-top:20px}
footer .wrap{display:grid;gap:22px}
footer p{color:var(--muted);font-size:.88rem}
footer strong{color:var(--txt)}
.otras{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.9rem}
.otras a{color:var(--cyan);text-decoration:none}
.otras a:hover{text-decoration:underline}
.finas{color:#6b7a99;font-size:.8rem;display:grid;gap:6px}