/* 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. */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/public-sans-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: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala tipográfica y de espacios: un solo juego de valores para todo el sitio. */
  --t-portada: clamp(2.4rem, 1.4rem + 4.2vw, 4.25rem);
  --t-pagina: clamp(2.2rem, 1.5rem + 3vw, 3.5rem);
  --t-seccion: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --t-medio: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --t-item: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem);

  --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);
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  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, h3 {
  font-family: var(--serif);
  color: var(--tinta);
  font-weight: 450;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

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: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul-700);
  margin-bottom: 1rem;
}

.parrafo-grande {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--tinta);
}

.nota { font-size: 0.9375rem; color: var(--texto-suave); }

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

.subtitulo {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: 0.85rem;
}

/* ---------- 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 0.975rem/1.2 var(--sans);
  letter-spacing: 0.01em;
  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: 0.925rem; }
.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;
  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: 0.95rem;
  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: 1000px) {
  .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; }
}

.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 0.875rem/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: 0.9375rem;
  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); }

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

@media (max-width: 999px) {
  .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.0625rem; border-bottom: 0; }
  .js .menu__lista a[aria-current="page"] { font-weight: 650; }
  .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: 0.8125rem;
  color: var(--texto-suave);
}
.migas li + li::before { content: "/"; margin-right: 0.35rem; color: var(--borde-control); }
.migas a { color: var(--texto-suave); }

/* ---------- Portada ---------- */

.portada {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.75rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--linea);
}
.portada__grilla {
  display: grid;
  grid-template-areas: "encabezado" "respaldo" "acciones" "foto";
  row-gap: 1.75rem;
}
.portada__encabezado { grid-area: encabezado; }
.portada__respaldo { grid-area: respaldo; }
.portada__acciones { grid-area: acciones; }
.portada__foto { grid-area: foto; }

.portada__titulo {
  font-size: var(--t-portada);
  font-weight: 420;
  line-height: 1.04;
  letter-spacing: -0.024em;
  max-width: 16ch;
}
.portada__bajada {
  margin-top: 1.25rem;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--texto);
}
.portada__respaldo p {
  max-width: 34rem;
  padding-left: 1rem;
  border-left: 2px solid var(--azul-900);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.45;
  color: var(--azul-900);
}
.portada__monograma { display: none; }
.portada__territorio {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}
.portada__territorio .icono { color: var(--azul-700); }
.portada__foto { max-width: 24rem; }
.portada__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--azul-100); }

@media (min-width: 960px) {
  .portada__grilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    grid-template-areas: "encabezado respaldo" "acciones respaldo";
    column-gap: clamp(3rem, 6vw, 6rem);
    row-gap: 2.25rem;
  }
  /* Sin fotografía: el respaldo del director forma una columna tipográfica con el monograma. */
  .portada:not(.portada--con-foto) .portada__respaldo {
    align-self: end;
    padding-left: 2rem;
    border-left: 1px solid var(--linea);
    color: var(--azul-900);
  }
  .portada:not(.portada--con-foto) .portada__monograma {
    display: block;
    height: 3.25rem;
    width: auto;
    margin-bottom: 1.5rem;
  }
  .portada:not(.portada--con-foto) .portada__respaldo p {
    padding-left: 0;
    border-left: 0;
    font-size: 1.375rem;
    line-height: 1.4;
  }
  .portada--con-foto .portada__grilla {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas: "encabezado foto" "respaldo foto" "acciones foto";
    align-items: start;
  }
  .portada--con-foto .portada__foto { align-self: stretch; max-width: none; }
  .portada--con-foto .portada__foto img { height: 100%; max-height: 40rem; }
}

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

.seccion { padding-block: 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); }

.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; }
}

/* ---------- Dirección (inicio) ---------- */

.director { display: grid; gap: 2.25rem; }
.director__nombre { font-size: var(--t-seccion); }
.director__bajada { margin-top: 1rem; max-width: 30rem; font-size: 1.0625rem; }
.credenciales { list-style: none; padding: 0; border-top: 1px solid var(--azul-200); }
.credenciales li {
  padding-block: 1rem;
  border-bottom: 1px solid var(--azul-200);
  font-family: var(--serif);
  font-size: var(--t-item);
  line-height: 1.35;
  color: var(--tinta);
}
@media (min-width: 900px) {
  .director { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5rem; align-items: center; }
}

/* ---------- 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 { font-size: var(--t-item); margin-bottom: 0.5rem; }
.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: 0.975rem; line-height: 1.55; 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); font-weight: 420; letter-spacing: -0.02em; }
.encabezado__bajada { margin-top: 1rem; max-width: 42rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.2rem); }
.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: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  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: 0.9375rem;
  line-height: 1.35;
  color: var(--texto);
  text-decoration: none;
}
.indice a span { font-family: var(--serif); 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: 4.75rem; /* alto real de la cabecera fija */
}
.area:last-child { border-bottom: 0; }
.areas-pagina__lista > .area:first-child { padding-top: var(--seccion-compacta); }
.ancla { display: block; scroll-margin-top: 4.75rem; }
.area__cabeza { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.area__numero { font-family: var(--serif); color: var(--azul-700); font-size: 1.05rem; 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.125rem; line-height: 1.55; color: var(--tinta); }
.area__nota { font-size: 0.975rem; 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: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.3rem;
}
.ficha dd { font-family: var(--serif); font-size: 1.125rem; 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.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul-700);
}
.abogado__resena { margin-top: 0.6rem; font-size: 0.975rem; 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-family: var(--serif);
  color: var(--azul-700);
  margin-bottom: 0.35rem;
}
.pasos__titulo { font-size: var(--t-item); margin-bottom: 0.35rem; }
.pasos p { font-size: 0.975rem; 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 { font-size: var(--t-item); }
.obra__subtitulo { margin-top: 0.2rem; font-family: var(--serif); font-style: normal; color: var(--texto-suave); }
.obra__datos { margin-block: 0.4rem 0.75rem; font-size: 0.9rem; 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.35rem 1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave); }
.entrada__titulo { font-size: var(--t-item); }
.entrada__datos { font-size: 0.9rem; color: var(--texto-suave); }

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

.contacto { display: grid; gap: 3rem; }
.contacto__rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul-700);
  margin-bottom: 0.4rem;
}
.contacto__rotulo--sep { margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--linea); }
.contacto__numero {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.5rem);
  line-height: 1.1;
  color: var(--tinta);
  font-variant-numeric: lining-nums;
  margin-bottom: 1.25rem;
}
.contacto__correo { font-family: var(--serif); font-size: 1.3rem; overflow-wrap: anywhere; color: var(--tinta); }
.contacto__instagram { margin-top: 1rem; }
.contacto__atencion > p:first-of-type { font-size: 1.0625rem; 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; }
}

.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-family: var(--serif); font-size: 1.25rem; color: var(--tinta); }
.oficina__localidad { font-size: 0.95rem; 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-family: var(--serif);
  font-size: var(--t-item);
  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; }

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

.cierre { background: var(--azul-900); color: #edf1f5; padding-block: var(--seccion); }
.cierre__grilla { display: grid; gap: 2.5rem; }
.cierre__titulo { color: var(--blanco); font-size: var(--t-seccion); }
.cierre__texto { margin-top: 1rem; max-width: 32rem; font-size: 1.0625rem; color: #d5dde6; }
.cierre .acciones { margin-top: 2rem; }
.cierre .btn:focus-visible { box-shadow: 0 0 0 3px var(--azul-900), 0 0 0 5px var(--blanco); }
.modalidades > div { padding-block: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.modalidades dt { font-family: var(--serif); font-size: 1.25rem; color: var(--blanco); }
.modalidades dd { font-size: 0.975rem; color: #c9d3de; }
.modalidades__aparte { margin-top: 1.25rem; font-size: 0.9rem; color: #c9d3de; }
@media (min-width: 900px) {
  .cierre__grilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5rem; align-items: center; }
}

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

.pie { background: var(--azul-950); color: #c9d3de; padding-block: 3.5rem 2rem; font-size: 0.9375rem; }
.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: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #a9b8c8; margin-bottom: 0.75rem; }
.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.8125rem;
  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)); }
}

@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, .modalidades dt { color: #000; }
}