:root {
  /* Colores: ajusta a tu paleta real */
  --bg: #ffffff;
  --fg: #0f172a;              /* texto principal */
  --fg-muted: #334155;        /* texto secundario (debe pasar 4.5:1 sobre bg) */
  --primary: #6d28d9;         /* marca */
  --primary-contrast: #ffffff;/* texto sobre primary (≥4.5:1) */
  --surface: #f8fafc;         /* tarjetas */
  --border: #e5e7eb;

  /* Tipografía básica - integrada con responsive.css */
  --font-body: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  /* Usar variables del sistema responsive */
  --fs-body: var(--fs-base, clamp(1rem, 0.98rem + 0.2vw, 1.0625rem));
  --lh-body: 1.55;
  /* Escala fluida (móvil→desktop) - usar sistema responsive */
  --fs-h1: var(--fs-4xl, clamp(1.875rem, 1.1rem + 3vw, 2.5rem));
  --fs-h2: var(--fs-3xl, clamp(1.5rem, 1.0rem + 2vw, 2rem));
  --fs-h3: var(--fs-2xl, clamp(1.25rem, 0.9rem + 1.5vw, 1.5rem));
  --fs-small: var(--fs-sm, clamp(0.9375rem, 0.9rem + 0.2vw, 1rem));
}
html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { color: var(--fg); background: var(--bg); font: 400 var(--fs-body)/var(--lh-body) var(--font-body); }
h1{font-size:var(--fs-h1);line-height:1.2;font-weight:700}
h2{font-size:var(--fs-h2);line-height:1.25;font-weight:700}
h3{font-size:var(--fs-h3);line-height:1.3;font-weight:600}
.small, small{font-size:var(--fs-small);line-height:1.6}
.muted{color:var(--fg-muted)}
.btn{min-height:44px; padding:.625rem 1rem; font-size:var(--fs-small); line-height:1.2}
.form-control{min-height:44px; font-size:var(--fs-small)}
a:focus, button:focus{outline:2px solid var(--primary); outline-offset:2px}

.hero {
  position:relative; color:#fff; /* usar blanco si pasan 4.5:1 con overlay */
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
}
.hero > *{ position:relative; }

/* Ajustes móviles específicos */
@media (max-width: 414px) {
  body { font-size: 15px; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  .btn, .form-control { font-size: 0.9375rem; }
  .btn { padding: 0.5rem 0.75rem; }
  a:focus, button:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
}