:root{
  --bg:#0b0f19; --card:#11182a; --text:#e8ecf1; --muted:#9fb0c3;
  --brand:#4f8cff; --brand-600:#3977ef;
  --radius:14px; --maxw:1120px;
  --space-1:.5rem; --space-2:.75rem; --space-3:1rem; --space-4:1.5rem; --space-6:2rem;
}

*{ box-sizing:border-box }

html,body{ height:100% }

body{
  margin:0; color:var(--text);
  background:linear-gradient(180deg,#0b0f19 0%,#183883 100%);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  letter-spacing:.01em;
}

/* Enlaces */
a{ color:var(--brand); text-decoration:none }
a:hover{ color:var(--brand-600) }

/* Contenedor base */
.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:20px }

/* Header / Nav */
header{
  position:sticky; top:0;
  backdrop-filter:saturate(160%) blur(6px);
  background:rgba(11,15,25,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:10;
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}

.brand{
  display:flex; gap:10px; align-items:center; font-weight:700;
}
.brand img{
  width:28px; height:28px; border-radius:8px; display:block;
}

.nav a{ color:var(--text) }

.links{
  display:flex; align-items:center; gap:18px;
  list-style:none; margin:0; padding:0;
  flex-wrap:wrap; /* evita overflow en pantallas chicas */
}
.links li{ display:flex }
.links a{
  display:inline-flex; align-items:center; line-height:1;
  padding:10px 8px;
}

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px;
  border-radius:12px; font-weight:600;
  border:1px solid transparent; transition:.2s;
}
.btn.primary{ background:var(--brand); color:#fff }
.btn.primary:hover{ background:var(--brand-600) }
.btn.ghost{ border-color:rgba(255,255,255,.16); color:var(--text) }
.btn.ghost:hover{ background:rgba(255,255,255,.06) }

/* Main */
main{ padding-block:48px }

/* Hero / Acerca */
.hero{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--space-3);
  text-align:left;
  max-width:900px;           /* columna de lectura óptima */
  margin-inline:auto;
}
.hero h1{
  font-size:clamp(28px,4vw,40px);
  line-height:1.1;
  margin:0 0 var(--space-2);
  text-align: center;
  align-self: center; /* centra dentro del flex container */
}
.hero h2{
  font-size:clamp(20px,2.6vw,26px);
  line-height:1.2;
  margin:var(--space-6) 0 var(--space-2);
}
.hero p{
  color:var(--muted);
  margin:0;
}
.hero p + p{ margin-top:var(--space-2) }
.lead{
  color:var(--text);
  font-size:clamp(16px,1.9vw,18px);
  line-height:1.65;
}

/* Lista con checkmarks (Qué hacemos) */
.feature-list{
  list-style:none;
  margin:var(--space-3) 0 0;
  padding:0;
  display:grid; gap:var(--space-2);
}
.feature-list li{
  position:relative;
  padding-left:1.8rem;
  color:var(--text);
  line-height:1.55;
}
.feature-list li::before{
  content:"✓";
  position:absolute; left:0; top:.1rem;
  width:1.2rem; height:1.2rem;
  display:inline-grid; place-items:center;
  border-radius:999px;
  background:rgba(79,140,255,.15);
  border:1px solid rgba(79,140,255,.35);
  color:var(--brand);
  font-size:.9rem; font-weight:700;
}

/* Status (si lo usás) */
.status{
  font-size:.9rem; opacity:.75;
  justify-self:start; align-self:center;
}

/* Chart controls (por si los reusás en /acerca) */
.chart-controls{
  display:flex; align-self: center; gap:.5rem; align-items:center; margin-bottom:.75rem;
}
.chart-controls select{
  background:#11182a; color:#e8ecf1; border:1px solid #23314e;
  border-radius:8px; padding:.4rem .6rem;
}
.chart-wrap{ width:100%; max-width:1100px; aspect-ratio:16/9 }
.chart-wrap canvas{
  width:100% !important; height:100% !important; display:block;
}

/* Footer */
footer{
  padding:28px 0; color:#a9b6c6;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-grid{ display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap }
.footer-links{ display:flex; gap:14px; flex-wrap:wrap }
.muted{ margin:0 0 12px; color:var(--muted) }

/* Anti-overflow + medios fluidos */
img, svg, video, canvas{ max-width:100%; height:auto; display:block }
main, .container{ overflow-x:clip }
:where(p, li){ overflow-wrap:anywhere }

/* Focus accesible */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:8px;
}

/* Transiciones seguras (sin layout shift) */
a, .btn{ transition:color .2s, background .2s, border-color .2s, box-shadow .2s }

/* Responsivo */
@media (max-width:900px){
  .hero{ max-width:100% }
}
@media (max-width:600px){
  main{ padding-block:36px }
  .hero{ padding-inline:4px }
  .feature-list li{ padding-left:1.6rem }
  .chart-wrap{ aspect-ratio:4/3 }
}

/* Opcional: tarjeta sutil del bloque /acerca */
/*
#acerca{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:clamp(16px,3vw,28px);
}
*/

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}