/* =========================================================
   Ñawi — Landing accesible (paleta institucional del prototipo)
   WCAG 2.2 AA: contraste >=4.5:1, foco 3px #0057B7, botones >=44px
   ========================================================= */

:root {
  --color-primario: #7b1320;       /* guinda institucional */
  --color-primario-hover: #5c0e18;
  --color-fondo: #f8f3ec;          /* neutro cálido */
  --color-texto: #1f1f1f;
  --color-muted: #4a4a4a;
  --color-earth: #a56a43;
  --color-foco: #0057b7;
  --color-borde: #c9b8a6;
  --color-tarjeta: #ffffff;
  --radio: 12px;
}

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

html { font-size: 18px; scroll-behavior: smooth; }

body {
  font-family: "Atkinson Hyperlegible", "Inter", system-ui, Arial, sans-serif;
  background: var(--color-fondo);
  color: var(--color-texto);
  line-height: 1.55;
}

main, header, footer { max-width: 980px; margin: 0 auto; padding: 1rem; }

.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; top: -100%; left: 1rem; background: var(--color-primario);
  color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 8px 8px; font-weight: bold;
  text-decoration: none; z-index: 2000;
}
.skip-link:focus { top: 0; }

:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 3px; border-radius: 6px; }

header { background: var(--color-primario); color: #fff; }
.header-inner { display: flex; flex-direction: column; gap: .2rem; }
.logo-text { font-size: 2rem; font-weight: 800; letter-spacing: .04em; }
.header-subtitle { font-size: 1rem; opacity: .95; }

.hero { padding: 2rem 1rem 1rem; }
.hero h1 { font-size: 2rem; color: var(--color-primario); margin-bottom: 1rem; }
.hero-desc { font-size: 1.15rem; max-width: 70ch; }

.tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem; padding: 1rem;
}
.tarjeta {
  background: var(--color-tarjeta); border: 1px solid var(--color-borde);
  border-radius: var(--radio); padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem;
}
.tarjeta h2 { font-size: 1.25rem; color: var(--color-primario); }
.tarjeta p { flex: 1; color: var(--color-muted); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; min-width: 44px; padding: .7rem 1.3rem; font-size: 1.05rem;
  font-weight: 700; border: 2px solid transparent; border-radius: 10px; cursor: pointer;
  text-decoration: none; font-family: inherit;
}
.boton-primario { background: var(--color-primario); color: #fff; }
.boton-primario:hover { background: var(--color-primario-hover); }

footer {
  margin-top: 2rem; border-top: 2px solid var(--color-borde);
  font-size: .97rem; color: #333;
}
footer h2 { font-size: 1.2rem; color: var(--color-primario); margin-bottom: .5rem; }
footer p { margin-top: .35rem; }
footer a { color: var(--color-primario); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }