/* Estudio Jurídico Gonzalez Elias — estilos
   Sobriedad editorial: serifa para títulos, sans serif para lectura, filetes finos,
   el azul del logo (#2c3e50) como único color de marca y fondos claros. */

/* Libre Baskerville (solo regular): títulos principales y de sección, nombre del director.
   Source Sans 3 (variable 400–600): lectura, navegación, botones, datos y títulos de servicios. */
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/libre-baskerville-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin.woff2") format("woff2");
}

:root {
  /* Marca: azul del logo y su escala. */
  --azul-950: #1f2d3b;
  --azul-900: #2c3e50;
  --azul-800: #34495e;
  --azul-700: #3a5470;
  --azul-600: #4b6b8c;
  --azul-200: #c9d3de;
  --azul-100: #e4e9ef;
  --azul-50: #f2f5f8;

  --tinta: #111827;
  --texto: #283140;
  --texto-suave: #4d5868;
  --linea: #d9dee6;
  --borde-control: #7d899b; /* 3,6:1 sobre blanco: límite visible de controles */
  --papel: #fbfbf9;
  --blanco: #ffffff;

  --serif: "Libre Baskerville", Baskerville, Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala tipográfica única. Libre Baskerville es ancha y de ojo grande:
     sus títulos van más chicos que con la serifa anterior. */
  --t-portada: clamp(2.05rem, 1.3rem + 3.1vw, 3.4rem);
  --t-pagina: clamp(1.85rem, 1.35rem + 2.1vw, 2.7rem);
  --t-seccion: clamp(1.45rem, 1.2rem + 1.2vw, 2.05rem);
  --t-medio: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  --t-nombre: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  /* Source Sans 3 */
  --t-item: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-texto: 1.125rem;
  --t-chico: 0.9375rem;
  --t-rotulo: 0.875rem;

  --ancho: 1200px;
  --margen: clamp(1.25rem, 4vw, 2.5rem);
  --seccion: clamp(3.5rem, 7vw, 6rem);
  --seccion-compacta: clamp(2.5rem, 5vw, 4rem);
  --alto-cabecera: 5rem;
  --radio: 2px;
  --sombra-foco: 0 0 0 3px var(--blanco), 0 0 0 5px var(--azul-600);

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 1rem);
  font-synthesis: none; /* sin negritas ni cursivas artificiales */
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--sans);
  font-size: var(--t-texto);
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }

h1, h2 {
  font-family: var(--serif);
  color: var(--tinta);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h3 {
  font-family: var(--sans);
  font-size: var(--t-item);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
  text-wrap: balance;
}

cite { font-style: normal; }

p { text-wrap: pretty; }

a { color: var(--azul-700); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--azul-900); }

:focus-visible {
  outline: 2px solid var(--azul-600);
  outline-offset: 3px;
  border-radius: var(--radio);
}

main:focus { outline: none; }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.saltar {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--azul-900);
  color: var(--blanco);
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: 1rem; color: var(--blanco); }

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

.icono { flex: none; width: 1.15em; height: 1.15em; }
.icono--wa { width: 1.25em; height: 1.25em; }

/* ---------- Tipografía utilitaria ---------- */

.antetitulo {
  font-family: var(--sans);
  font-size: var(--t-chico);
  font-weight: 600;
  color: var(--azul-700);
  margin-bottom: 0.6rem;
}

.parrafo-grande {
  font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--tinta);
}

.nota { font-size: var(--t-chico); color: var(--texto-suave); }

.prosa { max-width: 38rem; }
.prosa > * + * { margin-top: 1.1em; }

.subtitulo {
  font-family: var(--sans);
  font-size: var(--t-chico);
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: 0.75rem;
}

/* ---------- Botones y enlaces: un estilo principal y uno secundario ---------- */

.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font: 600 1.0625rem/1.2 var(--sans);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:focus-visible { outline: none; box-shadow: var(--sombra-foco); }

.btn--primario { background: var(--azul-900); color: var(--blanco); }
.btn--primario:hover { background: var(--azul-700); color: var(--blanco); }
.btn--primario:active { background: var(--azul-950); }

.btn--secundario { background: transparent; color: var(--azul-900); border-color: var(--borde-control); }
.btn--secundario:hover { border-color: var(--azul-900); background: var(--blanco); color: var(--azul-900); }
.btn--secundario:active { background: var(--azul-50); }

/* Las mismas dos variantes, invertidas para el bloque azul. */
.btn--claro { background: var(--blanco); color: var(--azul-900); }
.btn--claro:hover { background: var(--azul-100); color: var(--azul-950); }
.btn--claro:active { background: var(--azul-200); }
.btn--contorno-claro { color: var(--blanco); border-color: rgba(255, 255, 255, 0.55); }
.btn--contorno-claro:hover { border-color: var(--blanco); color: var(--blanco); background: rgba(255, 255, 255, 0.08); }
.btn--contorno-claro:active { background: rgba(255, 255, 255, 0.16); }

.btn--chico { min-height: 2.75rem; padding: 0.55rem 1rem; font-size: 1rem; }
.btn--bloque { width: 100%; }

@media (max-width: 479px) {
  .acciones > .btn { width: 100%; }
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-top: 1.75rem;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--azul-800);
  text-decoration: none;
}
.enlace-flecha span { border-bottom: 1px solid var(--azul-200); padding-bottom: 0.15rem; }
.enlace-flecha .icono { transition: transform 0.15s ease; }
.enlace-flecha:hover { color: var(--azul-950); }
.enlace-flecha:hover span { border-color: currentColor; }
.enlace-flecha:hover .icono { transform: translateX(3px); }

.enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--azul-700);
}

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}

.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  min-height: 4.5rem;
  padding-block: 0.6rem;
}

/* Logo: monograma vectorial + nombre (archivos del branding). */
.marca { display: inline-flex; color: var(--azul-900); text-decoration: none; }
.marca:focus-visible { outline-offset: 6px; }
.logo { display: inline-flex; align-items: center; gap: 0.75rem; --alto-logo: 2.25rem; }
.logo__monograma { height: var(--alto-logo); width: auto; flex: none; }
.logo__divisor { width: 1px; align-self: stretch; margin-block: 0.1rem; background: currentColor; opacity: 0.35; }
.logo__nombre { height: calc(var(--alto-logo) * 0.78); width: auto; }
@media (min-width: 1100px) {
  .cabecera .logo { --alto-logo: 2.75rem; }
}
@media (max-width: 420px) {
  .cabecera__fila { column-gap: 1rem; }
  .cabecera .logo { --alto-logo: 1.9rem; gap: 0.55rem; }
}
@media (max-width: 360px) {
  .cabecera .logo { --alto-logo: 1.6rem; }
}
@media (max-width: 340px) {
  .cabecera__fila { column-gap: 0.75rem; }
  .cabecera .logo { --alto-logo: 1.4rem; gap: 0.45rem; }
  .menu-boton { padding-inline: 0.7rem; }
}

.menu-boton {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  background: transparent;
  border: 1px solid var(--borde-control);
  border-radius: var(--radio);
  font: 600 1rem/1 var(--sans);
  color: var(--tinta);
  cursor: pointer;
}
.menu-boton:active { background: var(--azul-50); }
.menu-boton__barras,
.menu-boton__barras::before,
.menu-boton__barras::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.15s ease;
}
.menu-boton__barras { position: relative; }
.menu-boton__barras::before,
.menu-boton__barras::after { content: ""; position: absolute; left: 0; }
.menu-boton__barras::before { top: -5px; }
.menu-boton__barras::after { top: 5px; }
.menu-boton[aria-expanded="true"] .menu-boton__barras { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__barras::before { transform: translateY(5px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__barras::after { transform: translateY(-5px) rotate(-45deg); }

.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; }
.menu__lista { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; padding: 0; list-style: none; }
.menu__lista a {
  display: inline-block;
  padding-block: 0.6rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--texto);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.menu__lista a:hover { color: var(--azul-900); border-bottom-color: var(--azul-200); }
.menu__lista a[aria-current="page"] { color: var(--azul-900); border-bottom-color: var(--azul-900); font-weight: 600; }

@media (min-width: 1100px) {
  .menu__inicio { display: none; }
}

@media (max-width: 1099px) {
  .js .menu-boton { display: inline-flex; }
  .js .menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 0.5rem 0 1.25rem;
  }
  .js .menu.menu--abierto { display: flex; }
  .js .menu__lista { flex-direction: column; gap: 0; }
  .js .menu__lista li { border-bottom: 1px solid var(--linea); }
  .js .menu__lista a { display: block; padding-block: 0.9rem; font-size: 1.125rem; border-bottom: 0; }
  .js .menu__cta { width: 100%; min-height: 3rem; }
}

/* ---------- Migas ---------- */

.migas { padding-top: 1.5rem; }
.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding: 0 var(--margen);
  list-style: none;
  font-size: var(--t-chico);
  color: var(--texto-suave);
}
.migas li + li::before { content: "/"; margin-right: 0.35rem; color: var(--borde-control); }
.migas a { color: var(--texto-suave); }

/* ---------- Portada: título, acciones y director como una sola presentación ---------- */

.portada {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--linea);
}
.portada__grilla {
  display: grid;
  grid-template-areas: "texto" "director";
  row-gap: 1.75rem;
}
.portada__texto { grid-area: texto; display: grid; gap: 1.75rem; }
.portada__director { grid-area: director; }

.portada__titulo {
  font-size: var(--t-portada);
  line-height: 1.14;
  letter-spacing: -0.01em;
  max-width: 17ch;
}
.portada__bajada {
  margin-top: 1.25rem;
  max-width: 32rem;
  font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--texto);
}
.portada__territorio {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.1rem;
  font-size: 1rem;
  color: var(--texto-suave);
}
.portada__territorio .icono { color: var(--azul-700); }

/* Foto del director con su identificación debajo, en un mismo bloque. */
.portada__director {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: end;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
}
.portada__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  background: var(--azul-100);
}
.identificacion { border-left: 2px solid var(--azul-900); padding-left: 0.9rem; }
.identificacion__nombre {
  font-family: var(--serif);
  font-size: var(--t-nombre);
  line-height: 1.3;
  color: var(--tinta);
}
.identificacion__dato { margin-top: 0.35rem; font-size: 1rem; line-height: 1.4; color: var(--texto-suave); }
.identificacion__dato:first-of-type { color: var(--azul-800); }
.portada__monograma { display: none; }

@media (min-width: 960px) {
  .portada__grilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    grid-template-areas: "texto director";
    column-gap: clamp(3rem, 6vw, 6rem);
  }
  /* Título y acciones forman un bloque centrado frente a la foto del director. */
  .portada__texto { align-self: center; gap: 2rem; }
  .portada__director {
    display: block;
    align-self: center;
    padding-top: 0;
    border-top: 0;
    max-width: 22rem;
    justify-self: end;
    width: 100%;
  }
  .portada__img { margin-bottom: 1.1rem; }
  .portada__director--sin-foto { border-left: 1px solid var(--linea); padding-left: 2rem; }
  .portada__director--sin-foto .portada__monograma { display: block; height: 3.25rem; width: auto; margin-bottom: 1.5rem; color: var(--azul-900); }
}

/* ---------- Secciones ---------- */

.seccion { padding-block: var(--seccion); }
/* Al saltar a una sección se descuenta su relleno superior: el título queda justo bajo la cabecera. */
.seccion[id] { scroll-margin-top: calc(1.25rem - var(--seccion)); }
.seccion--compacta { padding-block: var(--seccion-compacta); }
.seccion--tinte { background: var(--azul-50); border-block: 1px solid var(--azul-100); }
.seccion--borde { border-top: 1px solid var(--linea); }

.seccion__cabeza { max-width: 44rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.seccion__titulo { font-size: var(--t-seccion); }
.seccion__titulo--medio { font-size: var(--t-medio); }
.seccion__titulo--medio + .tarjetas,
.seccion__titulo--medio + .obras,
.seccion__titulo--medio + .entradas,
.seccion__titulo--medio + .pasos { margin-top: 1.75rem; }

.dos-columnas { display: grid; gap: 1.5rem 4rem; }
@media (min-width: 900px) {
  .dos-columnas { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
}

/* ---------- Formación y producción académica (inicio) ---------- */

.formacion { display: grid; gap: 2.5rem; }
.formacion__lista { list-style: none; padding: 0; margin-top: 1.5rem; border-top: 1px solid var(--azul-200); }
.formacion__lista li { padding-block: 0.9rem; border-bottom: 1px solid var(--azul-200); display: grid; gap: 0.15rem; }
.formacion__titulo { font-size: var(--t-item); font-weight: 600; line-height: 1.3; color: var(--tinta); }
.formacion__institucion { font-size: 1rem; color: var(--texto-suave); }
.formacion__obras { display: grid; gap: 1.5rem; align-content: start; }
@media (min-width: 900px) {
  .formacion--con-obras { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4.5rem; align-items: start; }
}

/* ---------- Tarjetas breves (obras y novedades) ---------- */

.tarjetas { display: grid; gap: 1.75rem 2.5rem; }
@media (min-width: 800px) { .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tarjeta { padding-top: 1.1rem; border-top: 1px solid var(--linea); display: grid; gap: 1.1rem; align-items: start; }
.seccion--tinte .tarjeta { border-top-color: var(--azul-200); }
.tarjeta--con-tapa { grid-template-columns: 6.5rem minmax(0, 1fr); }
.tarjeta__tapa { width: 100%; height: auto; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.14); background: var(--azul-100); }
.tarjeta__texto { display: grid; gap: 0.4rem; align-content: start; }
.tarjeta__categoria { font-size: var(--t-rotulo); font-weight: 600; color: var(--azul-700); }
.tarjeta__resumen { font-size: 1rem; line-height: 1.5; color: var(--texto-suave); }
.enlace-flecha--chico { margin-top: 0.25rem; font-size: 1rem; }

/* ---------- Servicios (inicio): grilla editorial ---------- */

.servicios {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 2rem 2.5rem;
}
.servicio { padding-top: 1.25rem; border-top: 1px solid var(--linea); }
.servicio__titulo { margin-bottom: 0.4rem; }
.servicio__titulo a {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.servicio__titulo a:hover { color: var(--azul-800); text-decoration-color: currentColor; }
.servicio p { font-size: 1.0625rem; line-height: 1.5; color: var(--texto-suave); max-width: 30rem; }
@media (min-width: 640px) { .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .servicios { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Listas ---------- */

.lista-guion { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.lista-guion li { position: relative; padding-left: 1.5rem; line-height: 1.55; }
.lista-guion li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 0.75rem;
  height: 1px;
  background: var(--azul-700);
}

/* ---------- Encabezado de páginas internas ---------- */

.encabezado {
  padding-block: clamp(1.75rem, 4vw, 3rem) clamp(2.25rem, 5vw, 3.75rem);
  border-bottom: 1px solid var(--linea);
}
.encabezado__titulo { font-size: var(--t-pagina); letter-spacing: -0.01em; }
.encabezado__bajada { margin-top: 1rem; max-width: 40rem; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); }
.encabezado .acciones { margin-top: 2rem; }

/* ---------- Página de áreas ---------- */

.areas-pagina { display: grid; gap: 0; padding-bottom: var(--seccion); }

.indice {
  margin-top: var(--seccion-compacta);
  padding: 1.25rem 1.25rem 0.75rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
}
.indice__titulo {
  font-size: var(--t-rotulo); font-weight: 600;
  color: var(--texto-suave); margin-bottom: 0.5rem;
}
.indice ol { list-style: none; padding: 0; }
.indice a {
  display: flex;
  gap: 0.75rem;
  padding-block: 0.5rem;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--texto);
  text-decoration: none;
}
.indice a span { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--azul-700); min-width: 1.4rem; }
.indice a:hover { color: var(--azul-900); text-decoration: underline; }
@media (min-width: 640px) and (max-width: 999px) {
  .indice ol { columns: 2; column-gap: 2rem; }
  .indice li { break-inside: avoid; }
}
@media (min-width: 1000px) {
  .areas-pagina { grid-template-columns: 16rem minmax(0, 1fr); gap: 4.5rem; }
  .areas-pagina--sola { grid-template-columns: minmax(0, 1fr); }
  .indice {
    position: sticky;
    top: calc(var(--alto-cabecera) + 1.5rem);
    align-self: start;
    padding: 0;
    background: none;
    border: 0;
  }
  .indice ol { border-left: 1px solid var(--linea); }
  .indice a { padding: 0.4rem 0 0.4rem 1rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--texto-suave); }
  .indice a:hover { text-decoration: none; color: var(--tinta); }
  .indice a[aria-current="true"] { border-left-color: var(--azul-900); color: var(--tinta); font-weight: 600; }
}

.area {
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
  border-bottom: 1px solid var(--linea);
  scroll-margin-top: 0; /* el desplazamiento lo da scroll-padding-top del documento */
}
.area:last-child { border-bottom: 0; }
.areas-pagina__lista > .area:first-child { padding-top: var(--seccion-compacta); }
.ancla { display: block; }
.area__cabeza { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.area__numero { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--azul-700); font-size: 1rem; min-width: 1.6rem; }
.area__titulo { font-size: var(--t-medio); }
.area__cuerpo { display: grid; gap: 1.25rem; max-width: 44rem; padding-left: 2.6rem; }
.area__descripcion { font-size: 1.1875rem; line-height: 1.5; color: var(--tinta); }
.area__nota { font-size: 1rem; color: var(--texto-suave); }
.area__accion { padding-top: 0.25rem; }
@media (max-width: 599px) {
  .area__cuerpo { padding-left: 0; }
}

/* ---------- El estudio ---------- */

.perfil-director {
  display: grid;
  gap: 2.5rem;
  grid-template-areas: "foto" "texto" "ficha";
}
.perfil-director__foto { grid-area: foto; max-width: 26rem; }
.perfil-director__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--azul-100); }
.perfil-director__texto { grid-area: texto; }
.perfil-director__nombre { font-size: var(--t-seccion); margin-bottom: 1.5rem; }
.perfil-director__obras { margin-top: 2rem; }
.ficha { grid-area: ficha; border-top: 2px solid var(--azul-900); }
.ficha > div { padding-block: 1rem; border-bottom: 1px solid var(--linea); }
.ficha dt { font-size: var(--t-rotulo); font-weight: 600; color: var(--texto-suave); margin-bottom: 0.2rem; }
.ficha dd { font-size: 1.0625rem; line-height: 1.4; color: var(--tinta); }
@media (min-width: 900px) {
  .perfil-director {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    grid-template-areas: "texto ficha";
    gap: 4.5rem;
    align-items: start;
  }
  .perfil-director--con-foto {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    grid-template-areas: "foto texto" "foto ficha";
    row-gap: 2.5rem;
  }
}

.abogados { list-style: none; padding: 0; display: grid; gap: 1.5rem 2.5rem; }
.abogado { padding-top: 1.1rem; border-top: 1px solid var(--azul-200); }
.abogado__img { width: 100%; max-width: 14rem; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 1rem; background: var(--azul-100); }
.abogado__nombre { font-size: var(--t-item); }
.abogado__cargo {
  margin-top: 0.2rem;
  font-size: 1rem;
  color: var(--azul-700);
}
.abogado__resena { margin-top: 0.6rem; font-size: 1rem; color: var(--texto-suave); }
@media (min-width: 640px) { .abogados { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pasos { list-style: none; padding: 0; counter-reset: paso; display: grid; gap: 1.5rem 2.5rem; margin-top: 1.75rem; }
.pasos li { counter-increment: paso; padding-top: 1rem; border-top: 1px solid var(--linea); }
.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--azul-700);
  margin-bottom: 0.35rem;
}
.pasos__titulo { margin-bottom: 0.35rem; }
.pasos p { font-size: 1.0625rem; color: var(--texto-suave); }
@media (min-width: 800px) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Publicaciones ---------- */

.obras { display: grid; gap: 2.5rem; }
.obra { display: grid; gap: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); }
.obra--con-tapa { align-items: start; }
.obra--con-tapa .obra__tapa { max-width: 8rem; }
@media (min-width: 600px) {
  .obra--con-tapa { grid-template-columns: 8rem minmax(0, 1fr); }
  .obra--con-tapa .obra__tapa { max-width: none; }
}
.obra__tapa { width: 100%; height: auto; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12); }
.obra__titulo { line-height: 1.3; }
.obra__subtitulo { margin-top: 0.2rem; color: var(--texto-suave); }
.obra__datos { margin-block: 0.4rem 0.75rem; font-size: 1rem; color: var(--texto-suave); }
@media (min-width: 800px) {
  .obras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .obra--con-tapa { grid-template-columns: 10rem minmax(0, 1fr); }
}

.entradas { display: grid; gap: 1.5rem 2.5rem; }
@media (min-width: 800px) { .entradas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.entrada { padding-top: 1.25rem; border-top: 1px solid var(--linea); display: grid; gap: 0.6rem; align-content: start; }
.entrada__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: var(--t-rotulo); font-weight: 600; color: var(--azul-700); }
.entrada__titulo { line-height: 1.3; }
.entrada__datos { font-size: 1rem; color: var(--texto-suave); }

/* ---------- Contacto ---------- */

.contacto { display: grid; gap: 3rem; }
.contacto__rotulo {
  font-size: var(--t-chico);
  font-weight: 600;
  color: var(--azul-700);
  margin-bottom: 0.35rem;
}
.contacto__rotulo--sep { margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--linea); }
.contacto__numero {
  font-size: clamp(1.6rem, 1.4rem + 0.9vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--tinta);
  font-variant-numeric: lining-nums tabular-nums;
  margin-bottom: 1.25rem;
}
.contacto__correo { font-size: 1.25rem; font-weight: 500; overflow-wrap: anywhere; color: var(--tinta); }
.contacto__instagram { margin-top: 1rem; }
.contacto__atencion > p:first-of-type { font-size: var(--t-texto); color: var(--tinta); }
.contacto__atencion .nota { margin-top: 0.6rem; }
.contacto__atencion .subtitulo:not(:first-child) { margin-top: 2.25rem; }
@media (min-width: 900px) {
  .contacto { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5rem; }
}

.sedes { margin-top: 1.75rem; }
.sedes__titulo { font-size: var(--t-item); }
.sedes__modalidad { font-size: 1rem; color: var(--texto-suave); margin-bottom: 0.75rem; }
.sedes--principal .oficina { border-top: 2px solid var(--azul-900); }
.sedes--principal .oficina__calle { font-size: 1.25rem; }
.oficinas { list-style: none; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 600px) { .oficinas { grid-template-columns: 1fr 1fr; } }
.oficina { padding-top: 0.9rem; border-top: 1px solid var(--linea); }
.oficina__calle { font-size: var(--t-item); font-weight: 600; color: var(--tinta); }
.oficina__localidad { font-size: 1rem; color: var(--texto-suave); }
.oficina__mapa { width: 100%; aspect-ratio: 4 / 3; border: 0; margin-top: 1rem; }

.preguntas { border-top: 1px solid var(--linea); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 3rem;
  padding: 1rem 0;
  font-size: var(--t-item);
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 1.5rem; line-height: 1; color: var(--azul-700); }
.pregunta[open] summary::after { content: "–"; }
.pregunta p { padding-bottom: 1.25rem; max-width: 40rem; }

/* ---------- Páginas de áreas: etapas, relaciones y notas ---------- */

.etapas { list-style: none; padding: 0; display: grid; gap: 1.25rem 2.5rem; }
.etapas li { padding-top: 1rem; border-top: 1px solid var(--linea); }
.etapas__titulo { margin-bottom: 0.35rem; }
.etapas p { font-size: 1.0625rem; color: var(--texto-suave); }
@media (min-width: 700px) { .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lista-guion--amplia { gap: 0.85rem; }
.lista-guion--amplia li { font-size: var(--t-texto); }
@media (min-width: 900px) { .pasos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pasos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.relacion { font-size: 1rem; color: var(--texto-suave); }
.acciones--separadas { margin-top: 1.5rem; }
.area__accion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.area__accion .enlace-flecha { margin-top: 0; }

/* ---------- Respaldo, capacitación y pie ---------- */

.respaldo__subtitulo { font-size: var(--t-chico); font-weight: 600; color: var(--azul-700); }
@media (min-width: 640px) { .pasos--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pasos--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem 2rem; } }

.capacitacion-breve {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  padding-block: 1.5rem;
}
.capacitacion-breve > * { min-width: 0; }
.capacitacion-breve { border-block: 1px solid var(--linea); }
.capacitacion-breve .antetitulo { margin-bottom: 0.35rem; }
.capacitacion-breve__titulo { font-size: var(--t-medio); }
.capacitacion-breve__modulo { margin-top: 0.35rem; color: var(--tinta); }
.capacitacion-breve__datos { color: var(--texto-suave); font-size: 1rem; }
@media (min-width: 800px) {
  .capacitacion-breve { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
}

.datos-evento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.5rem; margin-top: 1.5rem; }
.datos-evento dt { font-size: var(--t-rotulo); font-weight: 600; color: var(--texto-suave); }
.datos-evento dd { font-size: 1.0625rem; font-weight: 600; color: var(--tinta); }
@media (min-width: 700px) { .datos-evento { grid-template-columns: repeat(4, max-content); } }
.datos-evento--simple { margin-top: 0; grid-template-columns: 1fr; }
.datos-evento--simple dd { font-weight: 400; }
.encabezado .acciones + div .aviso-evento,
.aviso-evento { margin-top: 1.75rem; padding: 0.9rem 1rem; border-left: 3px solid var(--azul-700); background: var(--azul-50); color: var(--tinta); }

.programa { padding-left: 1.4rem; display: grid; gap: 0.6rem; }
.programa li { padding-left: 0.3rem; line-height: 1.5; }
.programa li::marker { color: var(--azul-700); font-weight: 600; }
.detalles-evento { display: grid; gap: 2rem; }
@media (min-width: 800px) { .detalles-evento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } }
.evento__subtitulo { margin-bottom: 0.75rem; }

.pie__cta { margin-top: 1.25rem; }
.pie .btn--claro, .pie .btn--claro:hover { display: inline-flex; color: var(--azul-900); text-decoration: none; padding-block: 0.55rem; }

/* ---------- Cierre: solicitar una consulta ---------- */

.cierre { background: var(--azul-900); color: #edf1f5; padding-block: var(--seccion-compacta); }
.cierre__principal { max-width: 40rem; }
.cierre__titulo { color: var(--blanco); font-size: var(--t-seccion); }
.cierre__texto { margin-top: 0.85rem; font-size: var(--t-texto); color: #d5dde6; }
.cierre__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 1.5rem; }
.cierre__enlace {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem;
  font-weight: 600; color: var(--blanco); text-decoration: none;
}
.cierre__enlace span { border-bottom: 1px solid rgba(255, 255, 255, 0.45); padding-bottom: 0.1rem; }
.cierre__enlace:hover { color: var(--blanco); }
.cierre__enlace:hover span { border-bottom-color: var(--blanco); }
.cierre .btn:focus-visible,
.cierre a:focus-visible { outline: 2px solid var(--blanco); outline-offset: 3px; box-shadow: none; }

/* Franja para colegas: separada del llamado principal, compacta y en una sola unidad. */
.colegas {
  display: grid;
  gap: 0.2rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.colegas__titulo { font-size: var(--t-chico); font-weight: 600; color: #c9d3de; }
.colegas__texto { font-size: 1.0625rem; color: #edf1f5; }
.colegas__enlace {
  display: inline-flex; align-items: center; gap: 0.45rem; justify-self: start; min-height: 2.75rem;
  font-weight: 600; color: var(--blanco); text-decoration: none;
}
.colegas__enlace span:first-child { border-bottom: 1px solid rgba(255, 255, 255, 0.45); padding-bottom: 0.1rem; }
.colegas__enlace:hover { color: var(--blanco); }
.colegas__enlace:hover span:first-child { border-bottom-color: var(--blanco); }
@media (min-width: 800px) {
  .colegas { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; }
}
@media (max-width: 479px) {
  .cierre__acciones .btn { width: 100%; }
}

/* ---------- Navegación interna y referencias académicas ---------- */

.saltos { border-bottom: 1px solid var(--linea); }
.saltos__lista { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.saltos__lista a { display: inline-flex; align-items: center; min-height: 3rem; font-weight: 600; color: var(--azul-800); }
.referencias { display: grid; gap: 0.6rem; }
.referencias__titulo { font-family: var(--sans); font-size: var(--t-chico); font-weight: 600; color: var(--azul-700); }
.referencias__lista { list-style: none; padding: 0; display: grid; gap: 0.4rem; color: var(--texto-suave); font-size: 1rem; }
.referencias__lista a { color: var(--tinta); }
.nota--documentos { margin-top: 1.25rem; color: var(--tinta); }
.nota--evento { margin-top: 1rem; }
.ficha dd + dd { margin-top: 0.35rem; }
.ficha__detalle { color: var(--texto-suave); }

/* ---------- Pie ---------- */

.pie { background: var(--azul-950); color: #c9d3de; padding-block: 3.5rem 2rem; font-size: 1rem; }
.pie a { color: #edf1f5; text-decoration: none; display: inline-block; padding-block: 0.2rem; }
.pie a:hover { color: var(--blanco); text-decoration: underline; }
.pie :focus-visible { outline-color: var(--blanco); }
.pie__grilla { display: grid; gap: 2.5rem; }
.pie__logo { color: var(--blanco); margin-bottom: 1.25rem; }
.pie__logo .logo { --alto-logo: 2.5rem; }
.pie__marca > p:not(.pie__logo):not(.pie__titulo) { max-width: 22rem; }
.pie__titulo { font-size: var(--t-chico); font-weight: 600; color: #a9b8c8; margin-bottom: 0.6rem; }
.pie__titulo--oficinas { margin: 1.5rem 0 0.5rem; }
.pie__lista { list-style: none; padding: 0; display: grid; gap: 0.3rem; }
.pie__legal {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-size: 0.875rem;
  color: #a9b8c8;
}
@media (min-width: 700px) { .pie__grilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .pie__grilla { grid-template-columns: 1.5fr 1fr 1.1fr 1.3fr; gap: 3rem; } }

/* ---------- Llamada fija en celulares (una sola, con espacio reservado) ---------- */

.barra-consulta { display: none; }
@media (max-width: 767px) {
  .js .barra-consulta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: 0.625rem var(--margen) calc(0.625rem + env(safe-area-inset-bottom));
    background: var(--papel);
    border-top: 1px solid var(--linea);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .js .barra-consulta.barra-consulta--visible {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease, visibility 0s;
  }
  .js body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
  .js body.sin-barra { padding-bottom: 0; }
}

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

/* ---------- Impresión ---------- */

@media print {
  .cabecera, .barra-consulta, .indice, .acciones, .area__accion, .saltar { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .cierre, .pie { background: #fff; color: #000; }
  .cierre__titulo { color: #000; }
}