/* =============================================================
   tokens.css — Sistema de diseño central de MiPerfilWeb.com
   Fuente única de color, tipografía, espacios y componentes base.
   Mantener la paleta sincronizada con config/entorno.php.
   ============================================================= */

/* ---- Tipografía Inter (local cuando existan los woff2; si no, respaldo del sistema) ----
   Los @font-face se activan solo cuando /assets/fonts/*.woff2 estén presentes.
   Mientras tanto la pila de respaldo mantiene una lectura muy similar. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;              /* fuente variable, eje de peso */
  font-display: swap;
  src: url('../fonts/Inter-Variable.woff2') format('woff2');
}

:root {
  /* ---------- Paleta de marca ---------- */
  --mpw-azul:        #0F2D3D;   /* azul profundo  */
  --mpw-turquesa:    #00c6dd;   /* turquesa       */
  --mpw-gris:        #EEF3F6;   /* gris claro     */

  /* ---------- Derivados (sistema coherente) ---------- */
  --mpw-azul-900:    #0A1F2A;
  --mpw-azul-800:    #0F2D3D;
  --mpw-azul-700:    #16404F;
  --mpw-azul-600:    #1E5566;
  --mpw-turquesa-600:#1FB4BB;
  --mpw-turquesa-400:#5BDCE1;
  --mpw-cian-400:    #38E1D6;

  /* Superficies y texto (tema claro, mobile-first) */
  --mpw-bg:          #FFFFFF;
  --mpw-bg-soft:     var(--mpw-gris);
  --mpw-surface:     #FFFFFF;
  --mpw-border:      #D8E2E8;
  --mpw-text:        #0F2D3D;      /* texto principal = azul profundo */
  --mpw-text-soft:   #45606E;      /* texto secundario, contraste AA sobre blanco */
  --mpw-text-inv:    #FFFFFF;      /* texto sobre azul */
  --mpw-text-inv-soft:#B9D2DC;

  /* Acentos / degradado (SOLO en botones, detalles de marca) */
  --mpw-gradient:    linear-gradient(120deg, #00c6dd 0%, #2FD6DC 100%);
  --mpw-gradient-azul:linear-gradient(160deg, var(--mpw-azul-700) 0%, var(--mpw-azul-900) 100%);
  --mpw-focus:       #00c6dd;

  /* Estados */
  --mpw-ok:          #1F9D6B;
  --mpw-warn:        #C77700;
  --mpw-error:       #C23934;

  /* ---------- Tipografía ---------- */
  --mpw-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
              'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

  --mpw-fs-300: .8125rem;   /* 13 */
  --mpw-fs-400: .9375rem;   /* 15 */
  --mpw-fs-500: 1rem;       /* 16 */
  --mpw-fs-600: 1.125rem;   /* 18 */
  --mpw-fs-700: 1.375rem;   /* 22 */
  --mpw-fs-800: 1.75rem;    /* 28 */
  --mpw-fs-900: clamp(2rem, 6vw, 3.25rem); /* hero title, fluido */
  --mpw-lh-tight: 1.12;
  --mpw-lh:       1.6;

  /* ---------- Espacio / radios / sombra ---------- */
  --mpw-space-1: .25rem;  --mpw-space-2: .5rem;   --mpw-space-3: .75rem;
  --mpw-space-4: 1rem;    --mpw-space-5: 1.5rem;  --mpw-space-6: 2rem;
  --mpw-space-7: 3rem;    --mpw-space-8: 4rem;    --mpw-space-9: 6rem;

  --mpw-radius:    14px;
  --mpw-radius-sm: 10px;
  --mpw-radius-lg: 22px;
  --mpw-radius-pill: 999px;

  --mpw-shadow-sm: 0 1px 2px rgba(15,45,61,.06), 0 1px 3px rgba(15,45,61,.08);
  --mpw-shadow:    0 6px 20px rgba(15,45,61,.10);
  --mpw-shadow-lg: 0 18px 50px rgba(15,45,61,.16);

  --mpw-container: 1120px;
  --mpw-header-h:  64px;
}

/* ============================= Reset ligero ============================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--mpw-font);
  font-size: var(--mpw-fs-500);
  line-height: var(--mpw-lh);
  color: var(--mpw-text);
  background: var(--mpw-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { line-height: var(--mpw-lh-tight); color: var(--mpw-azul); margin: 0 0 var(--mpw-space-3); font-weight: 800; letter-spacing: -.01em; }
p { margin: 0 0 var(--mpw-space-4); }
a { color: var(--mpw-turquesa-600); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { margin: 0; padding: 0; list-style: none; }

/* ============================= Accesibilidad ============================= */
:focus-visible {
  outline: 3px solid var(--mpw-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
.mpw-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--mpw-azul); color: #fff; padding: .75rem 1rem;
  border-radius: 0 0 var(--mpw-radius-sm) 0; z-index: 200;
}
.mpw-skip:focus { left: 0; }
.mpw-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================= Layout ============================= */
.mpw-container {
  width: 100%;
  max-width: var(--mpw-container);
  margin-inline: auto;
  padding-inline: var(--mpw-space-4);
}
.mpw-section { padding-block: var(--mpw-space-8); }
@media (min-width: 768px) {
  .mpw-container { padding-inline: var(--mpw-space-6); }
  .mpw-section { padding-block: var(--mpw-space-9); }
}

/* ============================= Botones ============================= */
.mpw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-weight: 700; font-size: var(--mpw-fs-500);
  padding: .85rem 1.4rem; border-radius: var(--mpw-radius-pill);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  min-height: 48px; /* objetivo táctil accesible */
}
.mpw-btn:hover { text-decoration: none; }
.mpw-btn:active { transform: translateY(1px); }

/* Primaria: acento de marca (único lugar del degradado principal) */
.mpw-btn--primary {
  background: var(--mpw-gradient); color: var(--mpw-azul-900);
  box-shadow: var(--mpw-shadow);
}
.mpw-btn--primary:hover { box-shadow: var(--mpw-shadow-lg); transform: translateY(-1px); }

/* Secundaria sobre claro */
.mpw-btn--ghost {
  background: transparent; color: var(--mpw-azul); border-color: var(--mpw-border);
}
.mpw-btn--ghost:hover { border-color: var(--mpw-azul); background: var(--mpw-gris); }

/* Sobre fondo oscuro */
.mpw-btn--onDark { background: #fff; color: var(--mpw-azul-900); }
.mpw-btn--ghostDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.mpw-btn--ghostDark:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ============================= Utilidades de marca ============================= */
.mpw-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--mpw-fs-300); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mpw-turquesa-600);
}
.mpw-card {
  background: var(--mpw-surface); border: 1px solid var(--mpw-border);
  border-radius: var(--mpw-radius); box-shadow: var(--mpw-shadow-sm);
}
.mpw-on-dark { background: var(--mpw-gradient-azul); color: var(--mpw-text-inv); }
.mpw-on-dark h1, .mpw-on-dark h2, .mpw-on-dark h3 { color: #fff; }