/* base.css - tipografía, layout, accesibilidad, rendimiento */
:root{
  --bg:#ffffff;
  --card:#f6f7f9;
  --text:#111318;
  --muted:#5a616e;
  --line:#e3e6eb;
  --brand:#111318;

  --radius:14px;
  --shadow:0 8px 24px rgba(17,19,24,.08);

  --max: 860px; /* una columna también en desktop */
  --pad: clamp(14px, 2.6vw, 22px);
  --h1: clamp(26px, 5vw, 40px);
  --h2: clamp(20px, 3.3vw, 28px);
  --h3: clamp(18px, 2.6vw, 22px);
  --p:  clamp(16px, 2.2vw, 18px);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c0f14;
    --card:#141a22;
    --text:#f1f4f9;
    --muted:#b4bdc9;
    --line:#263041;
    --brand:#f1f4f9;
    --shadow:none;
  }
}

body{
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--p);
  line-height: 1.55;
}

.container{
  width: min(var(--max), 100%);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.skip{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{ position:static; width:auto; height:auto; padding:10px; display:inline-block; }

h1,h2,h3{ line-height:1.15; margin: 0 0 .5em; }
h1{ font-size: var(--h1); letter-spacing: -0.02em; }
h2{ font-size: var(--h2); letter-spacing: -0.01em; }
h3{ font-size: var(--h3); }

p{ margin: 0 0 1em; color: var(--text); }
small{ color: var(--muted); }
hr{ border:0; border-top:1px solid var(--line); margin: 22px 0; }

a{ text-decoration: none; }
a:hover{ text-decoration: underline; }

.section{ padding: clamp(18px, 3.2vw, 34px) 0; }


/* Tipografía más grande en móvil */
@media (max-width:520px){
  :root{
    --p: 18px;
    --h1: clamp(30px, 7vw, 44px);
    --h2: clamp(22px, 5.8vw, 32px);
    --h3: clamp(19px, 4.8vw, 24px);
  }
}