/* ═══════════════════════════════════════════════════════════════════════════
   BASE — Despacho Tirzo & Bautista Abogados
   Reset + tipografía base + contenedores + utilidades.
   Consume los tokens de tokens.css. Nunca hardcodea color/tipografía.
   ═══════════════════════════════════════════════════════════════════════════ */

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

* { margin: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--c-text);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

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

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

button { cursor: pointer; background: none; border: none; }

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

ul, ol { list-style: none; padding: 0; }

/* ───────────────────────────── TIPOGRAFÍA BASE ────────────────────────────── */
/* Títulos: Montserrat, color marino, un solo color, SIN itálica. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--c-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  font-style: normal;           /* nunca itálica en títulos */
}

h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-base); }

p { color: var(--c-text-soft); }

strong, b { font-weight: var(--fw-bold); }

/* Enlaces de texto: azul de marca, subrayado suave al hover (sin movimiento). */
a.link, .prose a {
  color: var(--c-navy);
  transition: color var(--t-fast);
}
a.link:hover, .prose a:hover { color: var(--c-navy-dark); text-decoration: underline; }

/* ───────────────────────────── CONTENEDORES ───────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-layout);
  padding-left: max(var(--pad-layout), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad-layout), env(safe-area-inset-right, 0px));
}
.container--narrow { max-width: var(--container-narrow); }

/* Padding lateral estándar responsive del sitio. */
.padding-layout {
  padding-inline: var(--pad-layout);
  padding-left: max(var(--pad-layout), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad-layout), env(safe-area-inset-right, 0px));
}

/* Secciones: TODAS con el mismo fondo blanco (regla 0.1 nº6). */
.section {
  padding-block: var(--sp-12);
  background-color: var(--c-bg);
}
.section--tight { padding-block: var(--sp-8); }

/* Encabezados de sección centrados; los heroes y sus rutas siguen a la izquierda. */
.section__head { margin-bottom: var(--sp-8); text-align: center; }
.section__title { font-size: var(--fs-4xl); }
.section__sub {
  margin-top: var(--sp-3);
  margin-inline: auto;
  font-size: var(--fs-lg);
  color: var(--c-text-soft);
  max-width: 60ch;
  text-align: center;
}

/* Los títulos y subtítulos del page hero permanecen a la izquierda. */
.page-hero__title,
.page-hero__sub {
  text-align: left;
}

/* Títulos de sección centrados y sin línea decorativa. */
.section__title {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

/* ───────────────────────────── UTILIDADES ─────────────────────────────────── */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.text-navy { color: var(--c-navy); }
.text-white { color: var(--c-white); }
.bg-navy { background-color: var(--c-navy); }
.bg-surface { background-color: var(--c-surface); }

/* Grids reutilizables */
.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Accesibilidad: ocultar visualmente pero accesible a lectores de pantalla */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Skip link (accesibilidad): oculto por completo hasta recibir foco por teclado.
   Método a prueba de fallos (clip), no depende de position del ancestro. */
.skip-link {
  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:focus {
  position: fixed;
  left: var(--sp-4); top: var(--sp-4);
  width: auto; height: auto;
  margin: 0; padding: var(--sp-2) var(--sp-4);
  clip: auto;
  overflow: visible;
  background: var(--c-navy);
  color: var(--c-white);
  z-index: 1000;
}

/* Foco accesible visible en toda la web */
:focus-visible {
  outline: 3px solid var(--c-navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--c-white);
}

/* ───────────────────────────── RESPONSIVE (padding lateral) ───────────────── */
@media (max-width: 767px) {
  :root { --pad-layout: 0.75rem; }
}
@media (min-width: 768px) {
  :root { --pad-layout: 0.75rem; }
}
@media (min-width: 1200px) {
  :root { --pad-layout: 0.75rem; }
}

/* Grids → 1 columna en móvil */
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  h1 { font-size: var(--fs-4xl); }
  h2, .section__title { font-size: var(--fs-3xl); }
}

/* Respeto a usuarios con reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}