/* =========================================================
   BASE.CSS
   Reset mínimo + variables globales + tipografía base
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap");

:root{
  /* Colores base */
  --bg: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;

  --primary: #1B396A;
  --primary-2: #1B396A;
  --surface: #f8fafc;
  --surface-2: #f1f5f9;

  /* Tipografía */
  --font-body: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Patria", "Noto Sans", Georgia, serif;

  /* Medidas globales */
  --radius: 14px;
  --shadow: 0 10px 24px rgba(0,0,0,.08);
  --container: 1120px;

  /* Escala tipográfica */
  --fs-hero: clamp(2.2rem, 4vw, 3.4rem);
  --fs-h1: clamp(2rem, 3.2vw, 2.8rem);
  --fs-h2: clamp(1.7rem, 2.6vw, 2.2rem);
  --fs-h3: clamp(1.35rem, 2vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.95rem;
  --fs-xs: 0.85rem;

  /* Interlineado */
  --lh-tight: 1.2;
  --lh-body: 1.6;
}

/* =========================================================
   Reset básico
   ========================================================= */

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

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--text);
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video,
canvas{
  display: block;
  max-width: 100%;
  height: auto;
}

iframe{
  max-width: 100%;
  border: 0;
}

a{
  color: inherit;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

button,
input,
select,
textarea{
  font: inherit;
  color: inherit;
}

button{
  cursor: pointer;
}

ul,
ol{
  padding-left: 1.25rem;
}

p,
ul,
ol,
blockquote{
  margin-top: 0;
  margin-bottom: 1rem;
}

/* =========================================================
   Tipografía global
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6{
  margin-top: 0;
  margin-bottom: 0.65em;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--primary);
  text-wrap: balance;
}

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

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

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

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

h5,
h6{
  font-size: 1rem;
}

p{
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

small{
  font-size: var(--fs-xs);
}

/* =========================================================
   Elementos comunes de contenido
   ========================================================= */

strong,
b{
  font-weight: 700;
}

em,
i{
  font-style: italic;
}

mark{
  background: #fff3a3;
  color: inherit;
  padding: 0 0.1em;
}

blockquote{
  margin-left: 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--primary);
  background: var(--surface);
  color: var(--text);
  border-radius: 0 var(--radius) var(--radius) 0;
}

hr{
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

/* =========================================================
   Formularios
   ========================================================= */

input,
select,
textarea{
  width: 100%;
}

input:focus,
select:focus,
textarea:focus,
button:focus,
a:focus{
  outline: 2px solid rgba(27, 57, 106, 0.35);
  outline-offset: 2px;
}

/* =========================================================
   Utilidades base
   ========================================================= */

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link{
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 3000;
  padding: 10px 12px;
  background: var(--text);
  color: #ffffff;
  border-radius: 10px;
  transform: translateY(-200%);
}

.skip-link:focus{
  transform: translateY(0);
}

.container{
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

/* =========================================================
   Clases tipográficas reutilizables
   ========================================================= */

.text-muted{
  color: var(--muted);
}

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

.text-xs{
  font-size: var(--fs-xs);
}

.title-page{
  font-family: var(--font-heading);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.1;
  color: var(--primary);
}

.title-section{
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--primary);
}

.subtitle{
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.5;
}

.eyebrow{
  display: inline-block;
  margin-bottom: 0.65rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

/* =========================================================
   Selección de texto
   ========================================================= */

::selection{
  background: rgba(27, 57, 106, 0.18);
  color: var(--text);
}

/* =========================================================
   Ajustes responsivos base
   ========================================================= */

@media (max-width: 640px){
  body{
    font-size: 0.98rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6{
    text-wrap: pretty;
  }

  .container{
    width: min(100% - 1.25rem, var(--container));
  }
}