/* ============================================================
   AHCD — Base / Reset
   ============================================================ */

/* ── Fuentes locales ─────────────────────────────────────────── */
@font-face { font-family: 'Lato'; src: url('../../landing/lib/fonts/Lato2-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../../landing/lib/fonts/Lato2-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../../landing/lib/fonts/Lato2-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../../landing/lib/fonts/Lato2-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../../landing/lib/fonts/Lato2-Black.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: 'Merriweather'; src: url('../../landing/lib/fonts/Merriweather-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('../../landing/lib/fonts/Merriweather-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('../../landing/lib/fonts/Merriweather-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('../../landing/lib/fonts/Merriweather-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('../../landing/lib/fonts/Merriweather-Black.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; }

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Garantiza que el atributo HTML `hidden` siempre oculte el elemento,
   incluso si el CSS del componente define display: flex/grid/block */
[hidden] { display: none !important; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  hanging-punctuation: first last;
}

body {
  font-family: var(--font-family-body);
  font-size: var(--text-sm);
  line-height: var(--line-height-base);
  color: var(--c-text);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul, ol { list-style: none; }

/* ── Tipografía ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-head);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--c-blue);
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }
h5 { font-size: var(--text-sm); }
h6 { font-size: var(--text-xs); }

@media (min-width: 1100px) {
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }
  body { font-size: var(--text-base); }
}

p {
  margin-bottom: var(--space-16);
  max-width: 68ch;
}
p:last-child { margin-bottom: 0; }

/* ── Links ───────────────────────────────────────────────────── */
a {
  color: var(--c-blue-2);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--c-blue);
  text-decoration: underline;
}

/* ── Foco visible (accesibilidad AA) ────────────────────────── */
:focus-visible {
  outline: 2px solid var(--c-blue-2);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Skip link ───────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-16);
  z-index: 9999;
  padding: var(--space-8) var(--space-16);
  background-color: var(--c-blue);
  color: var(--c-white);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus {
  top: 0;
  outline: none;
}

/* ── Utilidades de accesibilidad ─────────────────────────────── */
.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;
}

/* ── Utilidades generales ─────────────────────────────────────── */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--c-text); opacity: 0.6; }
.text-white   { color: var(--c-white); }
.text-blue    { color: var(--c-blue); }
.text-sm      { font-size: var(--text-xs); }
.font-bold    { font-weight: 700; }
.font-normal  { font-weight: 400; }

.mt-0  { margin-top: 0; }
.mt-8  { margin-top: var(--space-8); }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }

.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: var(--space-8); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }

.hidden        { display: none !important; }
.visually-hide { visibility: hidden; }

/* ── Texto responsive mobile/desktop ─────────────────────────── */
/* .txt--mobile  → solo visible en mobile  (<600px)              */
/* .txt--desktop → solo visible en desktop (≥600px)              */
.txt--mobile  { display: none; }
.txt--desktop { display: inline; }

@media (max-width: 599px) {
  .txt--mobile  { display: inline; }
  .txt--desktop { display: none; }
}

/* ── Animación de entrada (scroll reveal) ───────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .38s ease, transform .38s ease;
  }
  .reveal--visible {
    opacity: 1;
    transform: translateY(0);
  }
}