:root {
  --brand-1: #0d1b2a;
  --brand-2: #1b263b;
  --brand-3: #415a77;
  --accent-1: #e63946;
  --accent-2: #ffd166; /* acento calido */
  --bg: #f7fafc;
  --bg-soft: #ffffff;
  --text: #0b132b;
  --muted: #6b7280;
  --radius: 16px;
  --shadow: 0 10px 25px rgba(0,0,0,.07);
  --transition: 220ms cubic-bezier(.2,.8,.2,1);
}

/* Modo oscuro (toggle desde JS cambiando [data-theme]) */
html[data-theme="dark"] {
  --bg: #0b132b;
  --bg-soft: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --shadow: 0 10px 25px rgba(0,0,0,.35);
}

/* Reset moderno */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

/* Accesibilidad */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ position:static; width:auto; height:auto; padding:.5rem 1rem; background:var(--accent-2); border-radius:8px; }

/* Utilidades */
.container { width: min(1100px, 92%); margin-inline: auto; }
.grid { display:grid; gap:1.25rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){ .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.card { background: var(--bg-soft); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; }
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-radius: 999px; border: 1px solid transparent; transition: transform var(--transition), background var(--transition), border-color var(--transition); }
.btn-primary { background: var(--brand-3); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; border-color: rgba(0,0,0,.1); }
.badge { display:inline-block; padding:.35rem .6rem; border-radius:999px; background: rgba(0,0,0,.06); font-size:.8rem; }
.muted { color: var(--muted); }

/* Animaciones suaves */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }