@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root{
  /* =========================
     PALETA (TOKENS, NO USO)
     ========================= */
  --prussian-blue: #0a1128;
  --deep-navy: #001f54;
  --yale-blue: #034078;
  --cerulean: #1282a2;
  --white: #fefcfb;

  /* =========================
     LAYOUT TOKENS
     ========================= */
  --max: 1120px;
  --radius: 14px;

  /* =========================
     TIPOGRAFÍA
     ========================= */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Mobile (default) */
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-min: 0.75rem;

  --fs-h1: 2rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-h5: 1.125rem;
  --fs-h6: 1rem;

  --fs-btn: 1rem;
  --fs-label: 0.875rem;
  --fs-nav: 1rem;

  --lh-body: 1.5;
}

/* Tablet */
@media (min-width: 768px){
  :root{
    --fs-body: 1.0625rem;
    --fs-small: 0.9375rem;
    --fs-min: 0.875rem;

    --fs-h1: 2.5rem;
    --fs-h2: 2rem;
    --fs-h3: 1.75rem;
    --fs-h4: 1.5rem;
    --fs-h5: 1.25rem;
    --fs-h6: 1.125rem;

    --fs-btn: 1.125rem;
    --fs-label: 0.9375rem;
    --fs-nav: 1.0625rem;

    --lh-body: 1.6;
  }
}

/* Desktop */
@media (min-width: 1024px){
  :root{
    --fs-body: 1.125rem;
    --fs-small: 1rem;
    --fs-min: 0.875rem;

    --fs-h1: 3rem;
    --fs-h2: 2.5rem;
    --fs-h3: 2rem;
    --fs-h4: 1.75rem;
    --fs-h5: 1.5rem;
    --fs-h6: 1.25rem;

    --fs-btn: 1.25rem;
    --fs-label: 1rem;
    --fs-nav: 1.125rem;

    --lh-body: 1.7;
  }
}

/* =========================
   RESET + BASE TYPO
   ========================= */

*,
*::before,
*::after{
  box-sizing: border-box;
}

html:focus-within{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px;
}

h1{ font-size: var(--fs-h1); line-height:1.15; margin:0 0 12px; }
h2{ font-size: var(--fs-h2); line-height:1.2;  margin:0 0 10px; }
h3{ font-size: var(--fs-h3); line-height:1.25; margin:0 0 10px; }
h4{ font-size: var(--fs-h4); line-height:1.3;  margin:0 0 8px; }
h5{ font-size: var(--fs-h5); line-height:1.35; margin:0 0 8px; }
h6{ font-size: var(--fs-h6); line-height:1.4;  margin:0 0 6px; }

.small{ font-size: var(--fs-small); }
.mini{ font-size: var(--fs-min); }

button, .btn{
  font-family: inherit;
  font-size: var(--fs-btn);
}

label{
  font-size: var(--fs-label);
}

/* Accesibilidad */
.skip{
  position:absolute;
  left:-999px;
  top:0;
}
.skip:focus{
  left:16px;
  top:16px;
  z-index:9999;
}