/* SOCIAT — base: fuentes, variables de marca, reset */

@font-face {
  font-family: "Inter";
  src: url("../vendor/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../vendor/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../vendor/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Marca: azul predominante, plateado solo como acento */
  --azul: #0071bc;          /* azul del logo */
  --azul-profundo: #00467a;
  --azul-medio: #2890bb;    /* azul del símbolo y la franja del logo */
  --azul-claro: #dcebf7;
  --tinta: #13213b;
  --plata: #aab4c1;
  --plata-claro: #d8dee6;
  --acero: #eef1f4;
  --blanco: #ffffff;
  --texto: #2a3446;
  --texto-suave: #5b6779;

  --font-titulo: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-texto: "Inter", system-ui, sans-serif;

  --ancho: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radio: 6px;
  --radio-foto: 16px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-titulo);
  font-weight: 700;
  line-height: 1.05;
  color: var(--tinta);
  margin: 0 0 0.5em;
  letter-spacing: 0.005em;
}
h1 { font-size: clamp(2.75rem, 6.5vw, 5.25rem); }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: 1.5rem; font-weight: 600; }

p { margin: 0 0 1em; max-width: 68ch; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--azul); text-underline-offset: 3px; }
a:hover { color: var(--azul-profundo); }

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  stroke-width: 1.75;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}