/* ===========================
   THEME TOKENS (Base)
   =========================== */
:root{
  --bg: #0b1220;
  --bg-soft:#0f1a33;
  --card:#0f1526;
  --txt:#e8eefc;
  --muted:#a7b4d6;
  --pri:#6dd6ff;
  --pri-600:#32b5eb;
  --acc:#ff4d6d;
  --ok:#3ddc97; --warn:#ffd166; --err:#ef476f;

  --shadow-1: 0 8px 24px rgba(24,39,75,.18);
  --shadow-2: 0 10px 30px rgba(0,0,0,.35);

  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1080px;

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 2rem; --sp-8: 3rem;

  --fs-100: .875rem; --fs-200: 1rem; --fs-300: 1.125rem;
  --fs-400: 1.25rem; --fs-500: 1.5rem; --fs-600: 2rem; --fs-700: 2.75rem;
}

/* Light mode (como en el base) */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f8fc; --bg-soft:#eef2f8; --card:#ffffff;
    --txt:#0b1220; --muted:#4b587a;
    --pri:#0077ff; --pri-600:#0062d6; --acc:#e63946;
    --shadow-1: 0 8px 24px rgba(24,39,75,.12);
    --shadow-2: 0 12px 36px rgba(24,39,75,.14);
  }
}

/* ===========================
   RESET + BASE
   =========================== */
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--txt);
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--pri) 18%, transparent), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, color-mix(in srgb, var(--acc) 10%, transparent), transparent 60%),
    var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

a{ color: var(--pri); text-decoration: none; }
a:hover{ color: var(--pri-600); text-decoration: underline; }

img{ max-width:100%; height:auto; display:block; }

.container{ max-width: var(--maxw); margin-inline:auto; padding-inline: var(--sp-4); }
.center{ text-align:center; }

/* ===========================
   HEADER + NAV (Base exacto)
   =========================== */
header{
  position: sticky; top:0; z-index:1000;
  backdrop-filter: saturate(140%) blur(8px);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--txt) 10%, transparent);
}
.wrap{
  max-width: var(--maxw);
  margin-inline: auto;
  padding: .8rem 1rem;
  display: flex; align-items: center; gap: 1rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.3px; color:var(--txt); }
.logo{
  width:28px; height:28px; border-radius:8px;
  background: linear-gradient(135deg, var(--pri), var(--acc));
  box-shadow: var(--shadow-2);
}
nav{ margin-left:auto; }
.menu{
  display:flex; align-items:center; gap:.4rem; list-style:none; padding:0; margin:0; flex-wrap:wrap;
}
.menu a{
  display:inline-block; padding:.48rem .72rem; border-radius:10px; color:var(--txt);
}
.menu a:hover{ background: color-mix(in srgb, var(--pri) 16%, transparent); text-decoration:none; }

/* Selector de idioma con el MISMO look que los links del menú */
.menu select.lang{
  padding:.48rem .72rem;
  border-radius:10px;
  border:none;
  background: transparent;
  color: var(--txt);
  font: inherit;
  cursor: pointer;
  appearance: none;
}
.menu select.lang:hover{
  background: color-mix(in srgb, var(--pri) 16%, transparent);
}
.menu form{ margin:0; }

/* Responsive nav */
@media (max-width: 720px){
  .wrap{ gap:.7rem; }
  .menu{ gap:.2rem; }
}

/* ===========================
   HERO (igual a base)
   =========================== */
.hero{
  padding: clamp(48px, 9vw, 100px) 1rem 28px;
  text-align: center;
  background:
    radial-gradient(600px 300px at 20% -20%, color-mix(in srgb, var(--pri) 40%, transparent), transparent 60%),
    radial-gradient(500px 250px at 110% 0%, color-mix(in srgb, var(--acc) 24%, transparent), transparent 60%);
}
.hero .inner{ max-width: 900px; margin: 0 auto; }
.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.28rem .6rem; border-radius:999px; font-size:.9rem; color:var(--muted);
  border:1px dashed color-mix(in srgb, var(--txt) 18%, transparent);
}
.title{ font-size: clamp(28px, 5vw, 46px); line-height:1.15; margin:.6rem 0 1rem; }
.subtitle{ font-size: clamp(15px, 2.4vw, 18px); color:var(--txt); text-align:justify; text-justify:inter-word; }

/* ===========================
   LAYOUTS (sidebar + content)
   =========================== */
main{ padding: 14px 1rem 70px; }
.grid{
  max-width: var(--maxw); margin: 18px auto; display:grid; gap:16px;
  grid-template-columns: 1fr;
}
@media(min-width:920px){
  .grid{ grid-template-columns: 260px 1fr; }
}

.side{
  position: sticky; top:72px; align-self:start;
  background: var(--card); border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--txt) 10%, transparent);
  padding: 10px;
}
.side h3{ margin:6px 10px 8px; font-size:.95rem; color:var(--muted); }
.toc{ list-style:none; padding:0; margin:0; }
.toc a{
  display:block; padding:.48rem .6rem; border-radius:10px; color:inherit;
}
.toc a:hover, .toc a:focus{
  background: color-mix(in srgb, var(--pri) 14%, transparent);
  outline: none;
}

.content{
  background: var(--card); border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--txt) 10%, transparent);
  padding: 18px; box-shadow: var(--shadow-2);
}
.card{
  background: var(--bg-soft); border-radius: 16px; padding: 16px; margin: 12px 0;
  border: 1px solid color-mix(in srgb, var(--txt) 10%, transparent);
}
.card h2{ margin: 0 0 8px; }
p{ margin:.4rem 0 .8rem; text-align: justify; }

/* ===========================
   BOTONES (como base)
   =========================== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border-radius:12px; border:1px solid transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pri) 30%, transparent), color-mix(in srgb, var(--bg) 92%, transparent));
  box-shadow: var(--shadow-2); font-weight:600; color:var(--txt);
}
.btn:hover{ transform: translateY(-1px); transition: transform .12s ease; }

/* Para <button> nativo si lo usas */
button{
  padding:.6rem .9rem; border-radius:12px; border:1px solid transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pri) 30%, transparent), color-mix(in srgb, var(--bg) 92%, transparent));
  box-shadow: var(--shadow-1); font-weight:600; color:var(--txt); cursor:pointer;
  transition: transform .12s ease;
}
button:hover{ transform: translateY(-1px); }

/* ===========================
   FOOTER (como base)
   =========================== */
footer{
  padding: 28px 1rem; color: var(--muted); text-align:center;
}

/* ===========================
   ACCESIBILIDAD
   =========================== */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}