/* ==========================================================================
   FIDAL Consultoría y Litigio — paginas.css
   Estilos específicos de página. Requiere tokens.css y componentes.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Inicio · héroe
   -------------------------------------------------------------------------- */
.heroe__lema {
  font-size: var(--texto-md);
  color: var(--color-acento);
}

.marcador-imagen--heroe {
  min-height: 320px;
}

/* --------------------------------------------------------------------------
   Inicio · Por qué FIDAL — lista de razones (sin viñetas, con hairline)
   -------------------------------------------------------------------------- */
.lista-razones {
  list-style: none;
  margin: var(--espacio-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--espacio-5) var(--espacio-7);
}

.lista-razones li {
  border-top: var(--hairline);
  padding-top: var(--espacio-4);
  max-width: var(--ancho-prosa);
}

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

/* --------------------------------------------------------------------------
   Inicio · llamado a contacto — nota entre la fila de teléfonos y WhatsApp
   -------------------------------------------------------------------------- */
.llamado__nota {
  margin-top: var(--espacio-6);
}

/* --------------------------------------------------------------------------
   Inicio · franja puerta a Empresas — banda discreta con hairline,
   sin tarjetas ni botones, entre las áreas de práctica y «Por qué FIDAL»
   -------------------------------------------------------------------------- */
.banda-puerta {
  border-bottom: var(--hairline);
  padding-block: var(--espacio-7);
}

.banda-puerta h2 {
  margin-bottom: var(--espacio-3);
}

.banda-puerta p {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Pie · bloque secundario (teléfonos) con separación más corta que la rejilla
   principal de oficinas
   -------------------------------------------------------------------------- */
.pie__rejilla--secundaria {
  margin-top: var(--espacio-6);
  padding-top: var(--espacio-6);
}

/* ==========================================================================
   Páginas interiores — fase 3, grupo A
   (despacho, equipo, contenido/blog, contacto, aviso de privacidad)
   ========================================================================== */

/* Sección interior con respiración más corta que las bandas de la portada */
.seccion--compacta {
  padding-block: var(--espacio-7);
}

/* Cabecera de página interior: h1 + párrafo(s) de entrada */
.cabecera-pagina {
  padding-block: var(--espacio-8) var(--espacio-7);
}

/* Listas dentro de prosa (ol/ul de contenido, no de navegación) */
.lista-prosa {
  max-width: var(--ancho-prosa);
  margin: 0 0 var(--espacio-4);
  padding-left: var(--espacio-5);
}

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

/* Nota destacada: borrador del aviso de privacidad, nota interna de equipo */
.nota-aviso {
  border: var(--hairline);
  background-color: var(--color-marfil);
  padding: var(--espacio-5);
  max-width: var(--ancho-prosa);
  margin-block: 0 var(--espacio-6);
}

.nota-aviso p {
  margin: 0;
}

.nota-aviso p + p {
  margin-top: var(--espacio-3);
}

/* --------------------------------------------------------------------------
   Equipo · tarjetas de perfil
   -------------------------------------------------------------------------- */
.rejilla-perfiles {
  display: grid;
  gap: var(--espacio-5);
  margin-top: var(--espacio-6);
}

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

@media (min-width: 64em) {
  .rejilla-perfiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tarjeta-perfil {
  border: var(--hairline);
  background-color: var(--color-fondo);
  padding: var(--espacio-6);
}

.tarjeta-perfil__nombre {
  margin-bottom: var(--espacio-2);
}

.tarjeta-perfil__cargo {
  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-perfil p:last-child {
  margin-bottom: 0;
}

/* Marcador de retrato dentro de la tarjeta de perfil */
.marcador-imagen--retrato {
  min-height: 220px;
  margin-bottom: var(--espacio-5);
}

/* --------------------------------------------------------------------------
   Contenido (blog) · lista de próximos artículos
   -------------------------------------------------------------------------- */
.lista-articulos {
  display: grid;
  gap: var(--espacio-6);
  margin-top: var(--espacio-7);
}

.articulo-proximo {
  border-top: var(--hairline);
  padding-top: var(--espacio-5);
  max-width: var(--ancho-prosa);
}

.articulo-proximo h3 {
  margin-bottom: var(--espacio-2);
}

.articulo-proximo p {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Contenido (blog) · artículo publicado destacado en el índice
   -------------------------------------------------------------------------- */
.articulo-publicado {
  border: var(--hairline);
  background-color: var(--color-fondo);
  padding: var(--espacio-6);
  max-width: var(--ancho-prosa);
  margin-top: var(--espacio-6);
}

.articulo-publicado h3 {
  margin-bottom: var(--espacio-2);
}

.articulo-publicado__meta {
  font-style: italic;
  font-size: var(--texto-sm);
  color: var(--color-acento);
  margin-bottom: var(--espacio-4);
}

.articulo-publicado__enlace {
  font-weight: var(--peso-negrita);
}

.articulo-publicado p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Contenido (blog) · página de artículo
   -------------------------------------------------------------------------- */
.articulo__byline {
  font-style: italic;
  color: var(--color-acento);
  margin-bottom: 0;
}

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

/* Encabezados y separadores acotados al ancho de lectura del cuerpo
   (los párrafos y .lista-prosa ya lo tienen por componentes.css) */
.articulo__cuerpo h2,
.articulo__cuerpo h3,
.articulo__cuerpo .hairline {
  max-width: var(--ancho-prosa);
}

.articulo__cuerpo .hairline {
  margin-inline: 0;
}

.articulo__cuerpo h2 {
  margin-top: var(--espacio-7);
}

.articulo__cuerpo h3 {
  margin-top: var(--espacio-6);
}

/* Caja resumen al inicio del artículo (variante de .nota-aviso con lista) */
.nota-aviso--resumen ol {
  margin: var(--espacio-3) 0 0;
  padding-left: var(--espacio-5);
}

.nota-aviso--resumen li + li {
  margin-top: var(--espacio-2);
}

/* Aviso legal discreto al pie del artículo */
.articulo__aviso {
  font-size: var(--texto-sm);
  font-style: italic;
  color: var(--color-acento);
}

/* --------------------------------------------------------------------------
   Contacto · fila de botones alineada a la izquierda (teléfonos, WhatsApp)
   y rejilla de oficinas
   -------------------------------------------------------------------------- */
.fila-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-4);
  margin-block: var(--espacio-5) var(--espacio-6);
}

/* Contacto · campo ocultable por JS (mejora progresiva del campo «Monto»):
   .campo define display:grid y le ganaría al [hidden] del navegador. */
.campo[hidden] {
  display: none;
}

.rejilla-oficinas {
  display: grid;
  gap: var(--espacio-6);
  margin-top: var(--espacio-6);
}

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

.rejilla-oficinas address {
  font-style: normal;
  margin-bottom: var(--espacio-4);
  max-width: var(--ancho-prosa);
}

/* Subsección de plazas de atención, bajo la rejilla de oficinas */
.rejilla-oficinas + h3 {
  margin-top: var(--espacio-7);
}


/* Contacto · croquis de la oficina de Pachuca */
.croquis {
  margin: var(--espacio-5) 0 0;
  max-width: 26rem;
}

.croquis a {
  display: block;
  border: var(--hairline);
  border-bottom: var(--hairline);
}

.croquis figcaption {
  margin-top: var(--espacio-2);
  font-size: var(--texto-sm);
  color: var(--color-acento);
}


/* Imágenes de página (fotografías de archivo en duotono de marca) */
.heroe__imagen,
.figura-pagina img {
  border: var(--hairline);
}

.figura-pagina {
  margin: 0 0 var(--espacio-6);
  max-width: 42rem;
}