/* =================== RESET & BASE =================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --font-primary: "Archivo", system-ui, sans-serif;
  --font-secondary: "DM Sans", system-ui, sans-serif;

  --color-bg: #050509;
  --color-surface: #050711;
  --color-surface-soft: #050711f0;
  --color-border-soft: rgba(255, 255, 255, 0.1);
  --color-text: #f9f9ff;
  --color-text-muted: rgba(242, 242, 255, 0.82);
  --color-accent: #314097;
  --color-accent-2: #59c6ba;

  --radius-lg: 22px;
  --radius-md: 16px;

  --header-height: 72px;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 0 -20%, rgba(89, 198, 186, 0.08), transparent 60%),
    radial-gradient(circle at 120% 120%, rgba(49, 64, 151, 0.12), transparent 65%),
    var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-secondary);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Media sane defaults (evita "imagen gigante" si falta una regla puntual) */
:where(img, svg, video, canvas) {
  max-width: 100%;
}

:where(img, video) {
  height: auto;
}

:where(img) {
  display: block;
}

/* TIPOGRAFÍA GLOBAL */
h1,
h2,
h3,
h4 {
  font-family: var(--font-primary);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

p,
span,
a,
li,
strong {
  font-family: var(--font-secondary);
}


/* =========================
   Manu Pavez — Design Tokens
   (Escalable + accesible)
   ========================= */

:root{
  /* mp- = Manu Pavez (tokens “de sistema”) */

  /* Mapeo a tu identidad actual (turquesa + azul), sin romper el look */
  --mp-bg: var(--color-bg);
  --mp-surface: var(--color-surface);
  --mp-surface-2: var(--color-surface-soft);
  --mp-text: var(--color-text);
  --mp-muted: var(--color-text-muted);
  --mp-border: var(--color-border-soft);

  --mp-accent: var(--color-accent);
  --mp-accent-2: var(--color-accent-2);
  --mp-danger: hsl(0 84% 64%);

  /* Subtle gradients (moderación o te queda “boliche flyer”) */
  --mp-grad-accent: linear-gradient(
    120deg,
    color-mix(in oklab, var(--mp-accent) 80%, white 20%),
    color-mix(in oklab, var(--mp-accent-2) 85%, white 15%)
  );

  /* Typography */
  --mp-font-sans: var(--font-secondary);
  --mp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Type scale (fluid con clamp) */
  --mp-text-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --mp-text-sm: clamp(0.90rem, 0.86rem + 0.18vw, 0.98rem);
  --mp-text-md: clamp(1.00rem, 0.96rem + 0.22vw, 1.10rem);
  --mp-text-lg: clamp(1.15rem, 1.05rem + 0.55vw, 1.35rem);
  --mp-text-xl: clamp(1.35rem, 1.15rem + 0.95vw, 1.85rem);
  --mp-text-2xl: clamp(1.65rem, 1.25rem + 1.55vw, 2.35rem);

  --mp-leading: 1.55;
  --mp-tracking: 0.01em;

  /* Spacing scale */
  --mp-space-1: 0.25rem;
  --mp-space-2: 0.5rem;
  --mp-space-3: 0.75rem;
  --mp-space-4: 1rem;
  --mp-space-5: 1.25rem;
  --mp-space-6: 1.5rem;
  --mp-space-8: 2rem;
  --mp-space-10: 2.5rem;
  --mp-space-12: 3rem;
  --mp-space-16: 4rem;

  /* Radius */
  --mp-r-1: 10px;
  --mp-r-2: var(--radius-md);
  --mp-r-3: var(--radius-lg);
  --mp-r-pill: 999px;

  /* Shadows (contenidas; no “GPU barbecue”) */
  --mp-shadow-1: 0 1px 0 hsl(0 0% 100% / 0.04), 0 10px 30px hsl(0 0% 0% / 0.25);
  --mp-shadow-2: 0 1px 0 hsl(0 0% 100% / 0.05), 0 18px 50px hsl(0 0% 0% / 0.35);

  /* Stroke / borders */
  --mp-stroke: 1px;

  /* Motion tokens (groove, no rebote infantil) */
  --mp-ease-out: cubic-bezier(.16, 1, .3, 1);
  --mp-ease-in: cubic-bezier(.7, 0, .84, 0);
  --mp-ease-groove: cubic-bezier(.2, .9, .2, 1);

  --mp-dur-1: 120ms;
  --mp-dur-2: 220ms;
  --mp-dur-3: 420ms;

  /* Reduce motion multiplier (se ajusta abajo) */
  --mp-motion-mult: 1;

  /* Focus ring */
  --mp-ring: 0 0 0 3px color-mix(in oklab, var(--mp-accent) 30%, transparent);
  --mp-ring-strong: 0 0 0 4px color-mix(in oklab, var(--mp-accent-2) 22%, transparent);
}

html{
  color-scheme: dark;
  text-rendering: optimizeLegibility;
}

body{
  line-height: var(--mp-leading);
  letter-spacing: var(--mp-tracking);
}

/* Links: elegantes y legibles (con fallback) */
:where(a){
  color: var(--mp-accent-2);
  color: color-mix(in oklab, var(--mp-accent-2) 85%, white 15%);
  text-decoration-color: color-mix(in oklab, var(--mp-accent-2) 45%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}
:where(a:hover){
  text-decoration-color: color-mix(in oklab, var(--mp-accent) 55%, transparent);
}

/* Focus visible: global pero de baja especificidad */
:where(a, button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):focus-visible{
  outline: none;
  box-shadow: var(--mp-ring);
  border-radius: var(--mp-r-1);
}

/* Selection: sutil */
::selection{
  background: color-mix(in oklab, var(--mp-accent) 25%, transparent);
}

/* Reduced motion: apaga lo “decorativo” sin romper UI */
@media (prefers-reduced-motion: reduce){
  :root{ --mp-motion-mult: 0.01; }
  :where(html:focus-within){ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}
/* --- Fix crítico: hidden debe ganar SIEMPRE --- */
:where([hidden]){ display: none !important; }

/* --- Lists: sin bullets por defecto (reset seguro) --- */
:where(ul, ol){ list-style: none; }

/* --- Skip link usable (accesibilidad real, no adorno) --- */
.skip-link{
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(5, 7, 17, 0.92);
  border: 1px solid color-mix(in oklab, var(--mp-border) 75%, white 10%);
  color: var(--mp-text);
  transform: translateY(-140%);
  transition: transform calc(var(--mp-dur-2) * var(--mp-motion-mult)) var(--mp-ease-out);
}
.skip-link:focus-visible{ transform: translateY(0); box-shadow: var(--mp-ring-strong); }

/* ===== Pro polish: type + anti horizontal overflow ===== */

:root{
  --mp-reading: 72ch; /* ancho cómodo de lectura */
  --mp-text: clamp(16px, 0.95rem + 0.25vw, 18px);
  --mp-h2: clamp(1.35rem, 1.05rem + 1.2vw, 2rem);
  --mp-lead: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
}

/* Evita “la página se fue para la derecha” por iframes, tracks, 100vw, etc */
html{ overflow-x: clip; }
@supports not (overflow: clip){
  html{ overflow-x: hidden; }
}

body{
  font-size: var(--mp-text);
  line-height: 1.65;
}

/* Medios nunca empujan el layout */
img, video, iframe{
  max-width: 100%;
  height: auto;
}

/* Headings con jerarquía real */
.section h2{
  font-size: var(--mp-h2);
}
.section .muted{
  font-size: var(--mp-lead);
  line-height: 1.7;
}