/* base.css - tipografía, layout, accesibilidad, rendimiento */
:root{
--bg:#ffffff;
--card:#f6f7f9;
--text:#111318;
--muted:#5a616e;
--line:rgba(17,19,24,.10);
--brand:#111318;
--radius:14px;
--shadow:0 8px 24px rgba(17,19,24,.08);
--max: 860px; /* una columna también en desktop */
--pad: clamp(16px, 3.0vw, 26px);
--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: var(--font);
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; font-family: var(--font);
letter-spacing: -0.3px;
}
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);
}
}
/* Fuente “tipo Exo” (opcional, recomendado solo si te compensa estética vs 1 request extra)
1) En el de cada HTML añade:
2) Luego cambia la variable --font: 'Exo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
*/
/* v1.12 minimal dark skin (base) */
:root{
--bg: #0b0f14;
--card: #0f1620;
--text: #e9eef6;
--muted: rgba(233,238,246,.72);
--line: rgba(233,238,246,.10);
--brand: #22e6a8; /* botón “brillante” */
--radius: 14px;
--maxw: 980px;
}
/* Tipografía: limpia y legible */
body{ font-weight: 500; }
h1{ letter-spacing: -0.6px; }
h2{ letter-spacing: -0.4px; }
/* Sin movimientos */
*{ scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce){
*{ animation: none !important; transition: none !important; }
}