/* ==========================================================================
   FIDAL Consultoría y Litigio — componentes.css
   Requiere tokens.css cargado antes.
   Móvil primero desde 320px. Sin frameworks, sin webfonts, sin JS obligatorio.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fuente-base);
  font-size: var(--texto-base);
  line-height: var(--interlineado-base);
  color: var(--color-tinta);
  background-color: var(--color-fondo);
}

h1, h2, h3, h4 {
  font-family: var(--fuente-base);
  font-weight: var(--peso-negrita);
  line-height: var(--interlineado-compacto);
  color: var(--color-tinta);
  margin: 0 0 var(--espacio-4);
}

h1 { font-size: var(--texto-2xl); }
h2 { font-size: var(--texto-xl); }
h3 { font-size: var(--texto-lg); }

p {
  margin: 0 0 var(--espacio-4);
  max-width: var(--ancho-prosa);
}

a {
  color: var(--color-acento);
  text-decoration: none;
  border-bottom: var(--grosor-hairline) solid transparent;
  transition: border-color var(--transicion-sutil);
}

a:hover {
  border-bottom-color: var(--color-acento);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Foco visible universal — mismo anillo en enlaces, botones, campos */
:focus-visible {
  outline: var(--anillo-foco);
  outline-offset: var(--anillo-foco-offset);
}

/* --------------------------------------------------------------------------
   1. Utilidades de layout
   -------------------------------------------------------------------------- */
.contenedor {
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.seccion {
  padding-block: var(--seccion-vertical);
}

.seccion--marfil {
  background-color: var(--color-marfil);
}

/* Subtítulo de sección: azul pizarra, tracking amplio, sin mayúsculas */
.antetitulo {
  display: block;
  font-size: var(--texto-sm);
  font-weight: var(--peso-negrita);
  letter-spacing: var(--tracking-amplio);
  color: var(--color-acento);
  margin-bottom: var(--espacio-3);
}

/* Hairlines como recurso gráfico independiente */
.hairline {
  border: 0;
  border-top: var(--hairline);
  margin-block: var(--espacio-6);
}

.hairline--corta {
  width: var(--espacio-8);
  margin-inline: 0;
}

/* Solo lectores de pantalla */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   2. Skip-link (primer elemento enfocable de la página)
   -------------------------------------------------------------------------- */
.salto-contenido {
  position: absolute;
  left: var(--espacio-4);
  top: -100%;
  z-index: 100;
  padding: var(--espacio-2) var(--espacio-4);
  background-color: var(--color-tinta);
  color: var(--color-blanco);
  font-weight: var(--peso-negrita);
  border-bottom: none;
}

.salto-contenido:focus {
  top: var(--espacio-2);
}

/* --------------------------------------------------------------------------
   3. Botones
   -------------------------------------------------------------------------- */
.boton {
  display: inline-block;
  font-family: var(--fuente-base);
  font-size: var(--texto-base);
  font-weight: var(--peso-negrita);
  line-height: 1;
  padding: var(--espacio-4) var(--espacio-5);   /* ≥44px de alto: área táctil AA */
  border: var(--grosor-hairline) solid var(--color-acento);
  border-radius: 0;                       /* aristas rectas: sobriedad */
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transicion-sutil),
              color var(--transicion-sutil);
}

/* Primario: fondo azul pizarra, texto blanco (7.6:1 AA) */
.boton--primario {
  background-color: var(--color-acento);
  color: var(--color-blanco);
}

.boton--primario:hover {
  background-color: var(--color-tinta);
  border-color: var(--color-tinta);
  color: var(--color-blanco);
}

/* Secundario: fantasma con hairline, texto tinta */
.boton--secundario {
  background-color: transparent;
  color: var(--color-tinta);
}

.boton--secundario:hover {
  background-color: var(--color-marfil);
  border-bottom-color: var(--color-acento); /* neutraliza el hover genérico de <a> */
}

/* --------------------------------------------------------------------------
   4. Encabezado y navegación
   CSS puro (casilla oculta) — funciona sin JS. Ver nota de JS opcional abajo.
   -------------------------------------------------------------------------- */
.encabezado {
  background-color: var(--color-fondo);
  border-bottom: var(--hairline);
}

.encabezado__barra {
  display: flex;
  flex-wrap: wrap;              /* red de seguridad: nada desborda a ningún ancho */
  align-items: center;
  justify-content: space-between;
  column-gap: var(--espacio-4);
  row-gap: 0;                   /* la fila del panel (alto 0 cerrado) no añade hueco */
  padding-block: var(--espacio-4);
}

.encabezado__logo {
  border-bottom: none;
  flex-shrink: 0;
}

/* Móvil primero: 36px hasta 400px para que logo (194px) + hamburguesa (44px)
   convivan en una línea dentro de los 288px útiles a 320px de viewport */
.encabezado__logo img {
  height: 36px;
  width: auto;
}

@media (min-width: 25em) {
  .encabezado__logo img {
    height: 44px;               /* lockup horizontal a tamaño pleno desde 400px */
  }
}

/* Interruptor móvil (checkbox oculto + etiqueta hamburguesa) */
.nav__interruptor {
  position: absolute;
  opacity: 0;
}

.nav__etiqueta {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;                  /* área táctil mínima 44px */
  height: 44px;
  padding: var(--espacio-2);
  border: var(--hairline);
  cursor: pointer;
}

.nav__etiqueta span {
  display: block;
  height: 2px;
  background-color: var(--color-tinta);
}

/* Anillo de foco en la hamburguesa cuando la casilla oculta recibe foco */
.nav__interruptor:focus-visible + .nav__etiqueta {
  outline: var(--anillo-foco);
  outline-offset: var(--anillo-foco-offset);
}

.nav__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Móvil: la barra envuelve (flex-wrap); el nav ocupa fila propia a todo el
   ancho y el panel se pliega bajo logo + hamburguesa, que comparten la fila 1.
   El interruptor y la hamburguesa son hermanos previos del nav en el HTML. */
.nav {
  width: 100%;
}

.nav__panel {
  display: none;
  padding-block: var(--espacio-4) var(--espacio-5);
  border-top: var(--hairline);
}

.nav__interruptor:checked ~ .nav .nav__panel {
  display: block;
}

.nav__lista li + li {
  margin-top: var(--espacio-3);
}

.nav__enlace {
  display: inline-block;
  font-size: var(--texto-md);
  color: var(--color-tinta);
  padding-block: var(--espacio-3);              /* ≥44px de alto: área táctil AA */
  border-bottom: var(--grosor-hairline) solid transparent;
}

.nav__enlace:hover,
.nav__enlace[aria-current="page"] {
  border-bottom-color: var(--color-acento);
  color: var(--color-acento);
}

/* Escritorio: lista horizontal siempre visible, sin hamburguesa */
@media (min-width: 48em) {
  .nav__etiqueta {
    display: none;
  }

  .nav {
    width: auto;
  }

  .nav__panel {
    display: block;
    border-top: none;
    padding: 0;
  }

  .nav__lista {
    display: flex;
    gap: var(--espacio-6);
  }

  .nav__lista li + li {
    margin-top: 0;
  }

  .nav__enlace {
    font-size: var(--texto-base);
  }
}

/* JS mínimo OPCIONAL (mejora, no requisito): sincronizar aria-expanded.
   Descomentar e incluir al final del <body> si se desea:

   <script>
     const caja = document.getElementById('nav-interruptor');
     const etiqueta = document.querySelector('.nav__etiqueta');
     caja.addEventListener('change', () => {
       etiqueta.setAttribute('aria-expanded', caja.checked ? 'true' : 'false');
     });
   </script>
*/

/* --------------------------------------------------------------------------
   5. Héroe
   -------------------------------------------------------------------------- */
.heroe {
  padding-block: var(--seccion-vertical);
}

.heroe__rejilla {
  display: grid;
  gap: var(--espacio-7);
  align-items: center;
}

.heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-4);
  margin-top: var(--espacio-6);
}

@media (min-width: 60em) {
  .heroe__rejilla {
    grid-template-columns: 7fr 5fr;
    gap: var(--espacio-9);
  }
}

/* --------------------------------------------------------------------------
   6. Tarjeta de área de práctica
   -------------------------------------------------------------------------- */
.rejilla-tarjetas {
  display: grid;
  gap: var(--espacio-5);
  margin-top: var(--espacio-7);
}

/* Con cuatro áreas, la rejilla queda 2×2 desde 48em; se elimina el salto a
   3 columnas de 64em para no dejar una tarjeta huérfana en la segunda fila. */
@media (min-width: 48em) {
  .rejilla-tarjetas {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tarjeta-area {
  background-color: var(--color-fondo);
  border: var(--hairline);
  padding: var(--espacio-6);
  display: flex;
  flex-direction: column;
  transition: border-color var(--transicion-sutil);
}

.tarjeta-area:hover {
  border-color: var(--color-tinta);
}

/* Numeración discreta en azul pizarra: orden sin ornamento */
.tarjeta-area__numero {
  font-size: var(--texto-sm);
  font-weight: var(--peso-negrita);
  letter-spacing: var(--tracking-amplio);
  color: var(--color-acento);
  margin-bottom: var(--espacio-4);
}

.tarjeta-area__titulo {
  font-size: var(--texto-lg);
  margin-bottom: var(--espacio-3);
}

.tarjeta-area__descripcion {
  flex-grow: 1;
  margin-bottom: var(--espacio-5);
  font-size: var(--texto-base);
}

.tarjeta-area__enlace {
  font-weight: var(--peso-negrita);
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   7. Marcador de posición de imagen (sin fotos de stock)
   -------------------------------------------------------------------------- */
.marcador-imagen {
  border: var(--hairline);
  background-color: var(--color-marfil);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--espacio-2);
  padding: var(--espacio-6);
  color: var(--color-acento);
  font-size: var(--texto-sm);
}

.marcador-imagen strong {
  color: var(--color-tinta);
}

/* --------------------------------------------------------------------------
   8. Formulario
   -------------------------------------------------------------------------- */
.formulario {
  display: grid;
  gap: var(--espacio-5);
  max-width: var(--ancho-prosa);
}

.campo {
  display: grid;
  gap: var(--espacio-2);
}

.campo__etiqueta {
  font-weight: var(--peso-negrita);
  font-size: var(--texto-sm);
}

.campo__ayuda {
  font-size: var(--texto-xs);
  color: var(--color-acento);
}

.campo__control {
  font-family: var(--fuente-base);
  font-size: var(--texto-base);
  color: var(--color-tinta);
  background-color: var(--color-fondo);
  border: var(--grosor-hairline) solid var(--color-acento);
  border-radius: 0;
  padding: var(--espacio-3) var(--espacio-4);
  width: 100%;
}

.campo__control:focus-visible {
  outline: var(--anillo-foco);
  outline-offset: 0;
}

textarea.campo__control {
  min-height: 9rem;
  resize: vertical;
}

/* --------------------------------------------------------------------------
   9. Bloque de llamado a contacto
   -------------------------------------------------------------------------- */
.llamado {
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  text-align: center;
}

.llamado .contenedor > p {
  margin-inline: auto;
}

.llamado__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-4);
  margin-top: var(--espacio-6);
}

/* --------------------------------------------------------------------------
   10. Pie de página
   -------------------------------------------------------------------------- */
.pie {
  background-color: var(--color-marfil);
  padding-block: var(--seccion-vertical) var(--espacio-6);
  font-size: var(--texto-sm);
}

.pie__logo img {
  height: 40px;
  width: auto;
}

/* Tagline oficial: itálica, azul pizarra */
.pie__tagline {
  font-style: italic;
  color: var(--color-acento);
  font-size: var(--texto-md);
  margin-block: var(--espacio-4) 0;
  max-width: none;
}

.pie__rejilla {
  display: grid;
  gap: var(--espacio-6);
  margin-top: var(--espacio-7);
  padding-top: var(--espacio-7);
  border-top: var(--hairline);
}

@media (min-width: 48em) {
  .pie__rejilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Línea de plazas de atención, bajo las dos columnas de oficinas */
.pie__plazas {
  margin: var(--espacio-5) 0 0;
}

.pie__titulo {
  font-size: var(--texto-sm);
  font-weight: var(--peso-negrita);
  letter-spacing: var(--tracking-amplio);
  color: var(--color-acento);
  margin-bottom: var(--espacio-3);
}

.pie address {
  font-style: normal;
}

.pie__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie__lista li + li {
  margin-top: var(--espacio-2);
}

.pie__legal {
  margin-top: var(--espacio-7);
  padding-top: var(--espacio-5);
  border-top: var(--hairline);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-3);
  color: var(--color-acento);
  font-size: var(--texto-xs);
}

.pie__legal p {
  margin: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   11. Barra fija de contacto (solo móvil)
   Dos acciones directas siempre a la vista: WhatsApp y llamada telefónica.
   Desaparece en escritorio (48em). El padding-bottom del body en móvil
   reserva el alto de la barra para que no tape el pie de página.
   -------------------------------------------------------------------------- */
.barra-contacto {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--margen-lateral);
  background-color: var(--color-fondo);
  border-top: var(--hairline);
}

.barra-contacto .boton {
  flex: 1 1 0;
  min-height: var(--espacio-7);   /* 48px: área táctil AA reforzada */
  text-align: center;
}

/* Reserva: botón (48px) + padding vertical (2 × 12px) + hairline superior */
body {
  padding-bottom: calc(var(--espacio-7) + 2 * var(--espacio-3) + var(--grosor-hairline));
}

@media (min-width: 48em) {
  .barra-contacto {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}


/* Variante de rejilla para tarjetas de pasos (3 elementos) */
@media (min-width: 64em) {
  .rejilla-tarjetas--tres {
    grid-template-columns: repeat(3, 1fr);
  }
}