/* ==========================================================================
   Alzate Blair Abogados — hoja de estilo del tema
   Valores tomados del canvas de Claude Design (1440 px) y extendidos a la
   retícula del manual de marca: 12 col >=1200 · 8 col 768-1199 · 4 col <768.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color — proporciones del manual: navy 40%, blanco 25%, plata+tintes 15%,
     secundario 12%, grafito 8%. */
  --ab-navy: #0C1C3A;
  --ab-secondary: #354052;
  --ab-graphite: #706E71;
  --ab-silver: #BBB2B5;
  --ab-tint-2: #EBE8E9;
  --ab-tint-1: #F5F3F4;
  --ab-white: #FFFFFF;
  --ab-hairline: #EBE8E9;
  --ab-hairline-soft: #F5F3F4;
  --ab-border-strong: #D8D4D6;

  /* Tipografía — confirmada por la PM (2026-09-14): IBM Plex Sans (display)
     + Manrope (texto) + IBM Plex Mono (etiquetas), la que ya traía el theme
     original. (El manual de marca en docx decía Source Serif 4 + Manrope;
     se probó ese cambio, pero la PM indicó que IBM Plex es la vigente.) */
  --ab-font-display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --ab-font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ab-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala de espaciado base 8 px (tokens/spacing.css del sistema) */
  --ab-space-1: 4px;
  --ab-space-2: 8px;
  --ab-space-3: 16px;
  --ab-space-4: 24px;
  --ab-space-5: 32px;
  --ab-space-6: 40px;
  --ab-space-7: 56px;
  --ab-space-8: 72px;

  /* Retícula: 1440 px de lienzo con canaletas de 56 px en el diseño original */
  --ab-max: 1440px;
  --ab-gutter: clamp(20px, 3.9vw, 56px);

  /* Ritmo vertical de sección */
  --ab-section-y: clamp(36px, 4.5vw, 56px);

  /* Tratamiento fotográfico de marca: las fotos reales se muestran casi al
     natural (solo un leve descenso de saturación para cohesión), y sobre
     ellas va un degradado GRIS que sube desde el borde inferior y se
     desvanece a transparente (definido en cada scrim). Antes se aplicaba un
     grayscale fuerte + malla de "bruma"; se retiró porque dejaba las fotos
     apagadas — la referencia solo pedía el degradado gris de abajo. */
  --ab-photo-misty: none;
  --ab-mist-pattern: none;
}

/* --------------------------------------------------------------------------
   2. Reinicio y base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ab-white);
  color: var(--ab-secondary);
  font-family: var(--ab-font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--ab-secondary); text-decoration: none; }
a:hover { color: var(--ab-navy); }

button { font-family: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

p { margin: 0; }

ul, ol { margin: 0; }

:focus-visible {
  outline: 2px solid var(--ab-navy);
  outline-offset: 3px;
}

.ab-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ab-navy);
  color: #fff;
  padding: 12px 20px;
  font-size: 13px;
}
.ab-skip-link:focus {
  left: 8px;
  top: 8px;
  color: #fff;
}

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

/* --------------------------------------------------------------------------
   3. Contenedores
   -------------------------------------------------------------------------- */
/* .ab-shell ya NO limita el ancho: el fondo de cada sección (header, hero,
   footer, franjas con tinte) debe llegar al borde real de la pantalla en
   monitores anchos. El límite de 1440 px vive en .ab-wrap — el contenido
   (texto, tarjetas, nav) se centra ahí, pero el color/imagen de fondo de la
   sección que lo envuelve se extiende a todo el viewport. */
.ab-shell {
  width: 100%;
  background: var(--ab-white);
}

.ab-wrap {
  max-width: var(--ab-max);
  margin-inline: auto;
  padding-inline: var(--ab-gutter);
}

.ab-section {
  padding-block: var(--ab-section-y);
}

.ab-section--tint { background: var(--ab-tint-1); border-top: 1px solid var(--ab-hairline); }

/* --------------------------------------------------------------------------
   4. Tipografía de marca
   -------------------------------------------------------------------------- */

/* Serif/display restringida a H1, hero y citas — máx. 10-15 % del volumen. */
.ab-display {
  font-family: var(--ab-font-display);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.14;
  color: var(--ab-navy);
  text-wrap: pretty;
}

/* 40 px en el lienzo de 1440 px */
.ab-title-page { font-size: clamp(1.75rem, 1.28rem + 1.9vw, 2.5rem); }
/* 36 px */
.ab-title-article { font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem); }
/* 32 px — titular del hero de portada */
.ab-title-hero { font-size: clamp(1.5rem, 1.19rem + 1.25vw, 2rem); line-height: 1.12; }
/* 30 px */
.ab-title-section { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); letter-spacing: -.02em; }
/* 26 px — nombre en biografía */
.ab-title-bio { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.625rem); line-height: 1.15; letter-spacing: -.02em; }

.ab-eyebrow {
  font-family: var(--ab-font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ab-graphite);
}

.ab-label {
  font-family: var(--ab-font-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ab-silver);
}

.ab-lede {
  font-size: clamp(.9375rem, .9rem + .15vw, 1rem);
  line-height: 1.75;
  color: var(--ab-secondary);
  font-weight: 300;
  text-align: justify;
  hyphens: auto;
}

.ab-body {
  font-size: clamp(.875rem, .85rem + .12vw, .9375rem);
  line-height: 1.8;
  color: var(--ab-secondary);
  font-weight: 300;
  text-wrap: pretty;
}

.ab-meta {
  font-size: 12.5px;
  color: var(--ab-graphite);
  font-weight: 300;
}

/* --------------------------------------------------------------------------
   5. Botones y enlaces de acción
   -------------------------------------------------------------------------- */

/* Un solo botón primario por contexto (regla M8 del manual). */
.ab-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ab-font-body);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--ab-white);
  background: var(--ab-navy);
  border: 1px solid var(--ab-navy);
  padding: 15px 28px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.ab-btn:hover { background: #16294b; color: var(--ab-white); }

.ab-btn--ghost {
  color: var(--ab-navy);
  background: transparent;
  border-color: rgba(12, 28, 58, .22);
}
.ab-btn--ghost:hover { background: var(--ab-navy); color: var(--ab-white); }

/* Enlace con subrayado plata — "Conozca la firma →" */
.ab-link-rule {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ab-navy);
  border-bottom: 1px solid var(--ab-silver);
  padding-bottom: 8px;
  transition: border-color .18s ease;
}
.ab-link-rule span { color: var(--ab-silver); transition: color .18s ease, transform .18s ease; }
.ab-link-rule:hover { border-color: var(--ab-navy); }
.ab-link-rule:hover span { color: var(--ab-navy); transform: translateX(3px); }

.ab-link-more {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ab-navy);
}
.ab-link-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   6. Cabecera y navegación
   -------------------------------------------------------------------------- */
.ab-header {
  position: relative;
  z-index: 40;
  background: var(--ab-white);
  border-bottom: 1px solid var(--ab-hairline);
}

/* En portada la cabecera va sin borde: el logo vive dentro del hero. */
.ab-header--home { border-bottom: 0; }

.ab-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
}
.ab-header--home .ab-header__inner { justify-content: flex-end; padding-block: 28px; }

.ab-header__logo img {
  height: 45px;
  width: auto;
  display: block;
}
/* En portada el logo NO va en el header: vive dentro del hero, junto al título
   (así está en el mockup). En el resto de páginas el header sí lleva su logo. */
.ab-header--home .ab-header__logo { display: none; }

.ab-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.ab-header--home .ab-nav { gap: 34px; }

.ab-nav a {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ab-secondary);
  white-space: nowrap;
}
.ab-header--home .ab-nav a { font-size: 13px; }

.ab-nav a:hover { color: var(--ab-navy); }

/* Página activa: bloque navy sólido, sin contenedores decorativos. */
.ab-nav .current-menu-item > a,
.ab-nav .current_page_item > a,
.ab-nav .current-menu-parent > a,
.ab-nav .ab-nav-current > a,
.ab-nav a.ab-nav-current {
  font-weight: 500;
  color: var(--ab-white);
  background: var(--ab-navy);
  padding: 10px 18px;
}

.ab-nav ul {
  display: flex;
  align-items: center;
  gap: inherit;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Selector de idioma (Polylang) — hereda tipografía/espaciado de .ab-nav a/ul,
   separado visualmente del resto del menú con un filete a la izquierda. */
.ab-lang-switch {
  gap: 10px;
  padding-left: 16px !important;
  margin-left: 4px !important;
  border-left: 1px solid var(--ab-hairline);
}
.ab-lang-switch span[aria-current] {
  font-weight: 600;
  color: var(--ab-navy);
}
@media (max-width: 767px) {
  .ab-lang-switch {
    border-left: 0;
    border-top: 1px solid var(--ab-hairline-soft);
    padding: 15px 0 0 !important;
    margin: 4px 0 0 !important;
  }
}

.ab-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(12, 28, 58, .18);
  background: transparent;
  color: var(--ab-navy);
  cursor: pointer;
}
.ab-nav-toggle__bars,
.ab-nav-toggle__bars::before,
.ab-nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.ab-nav-toggle__bars { position: relative; }
.ab-nav-toggle__bars::before,
.ab-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.ab-nav-toggle__bars::before { top: -6px; }
.ab-nav-toggle__bars::after { top: 6px; }

.ab-nav-toggle[aria-expanded="true"] .ab-nav-toggle__bars { background: transparent; }
.ab-nav-toggle[aria-expanded="true"] .ab-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.ab-nav-toggle[aria-expanded="true"] .ab-nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Hero de portada
   -------------------------------------------------------------------------- */
.ab-hero {
  position: relative;
  width: 100%;
  min-height: 440px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ab-tint-2);
}
/* La imagen de fondo del hero es el único <img> hijo directo de .ab-hero
   (el logo va dentro de .ab-hero__body); se estiliza por posición para que
   funcione la editable de Constructor Live sin depender de una clase. */
.ab-hero__media,
.ab-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% 45%;
}
/* Degradado del hero (blanco, tal cual el mockup). */
.ab-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .94) 0%,
    rgba(255, 255, 255, .86) 42%,
    rgba(255, 255, 255, .28) 72%,
    rgba(255, 255, 255, 0) 100%);
}
.ab-hero__body {
  position: relative;
  max-width: 620px;
  padding: 44px var(--ab-gutter);
}
.ab-hero__logo {
  width: min(451px, 100%);
  height: auto;
  margin-bottom: 26px;
}
.ab-hero__cta { margin-top: 26px; }

/* --------------------------------------------------------------------------
   8. Encabezado de página con textura de madera
   -------------------------------------------------------------------------- */
.ab-pagehead {
  position: relative;
  overflow: hidden;
  background: var(--ab-white);
  /* Solo padding vertical: el margen horizontal lo da el .ab-wrap interior, de
     modo que el título alinee con la lista/contenido aunque el fondo (imagen)
     ocupe todo el ancho del viewport. */
  padding-block: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 36px);
}
/* Textura del pagehead: tenue, difusa y clara, tal cual el mockup
   (blur + baja opacidad + máscara que la desvanece hacia el título). Sin capa
   gris encima. */
.ab-pagehead__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(6px);
  opacity: .35;
  -webkit-mask-image: linear-gradient(90deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.55) 38%, rgba(255,255,255,.95) 100%);
  mask-image: linear-gradient(90deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.55) 38%, rgba(255,255,255,.95) 100%);
  pointer-events: none;
}
.ab-pagehead > *:not(.ab-pagehead__texture) { position: relative; z-index: 2; }
.ab-pagehead .ab-eyebrow { display: block; margin-bottom: 18px; }
.ab-pagehead__lede { margin-top: 20px; max-width: 620px; }

/* Cabecera legal sencilla, sin textura */
.ab-pagehead--plain { padding-bottom: clamp(20px, 2.4vw, 32px); }

/* --------------------------------------------------------------------------
   9. Listado de áreas de práctica
   -------------------------------------------------------------------------- */
.ab-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.ab-section-head h2 {
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--ab-navy);
}

/* Variante compacta (portada): solo el nombre del área. */
.ab-arealist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
}
.ab-arealist__item {
  display: block;
  padding: 12px 0;
  border-top: 1px solid var(--ab-hairline);
  transition: padding-left .18s ease;
}
.ab-arealist__item:hover { padding-left: 6px; }
.ab-arealist__item:nth-last-child(-n+2) { border-bottom: 1px solid var(--ab-hairline); }
.ab-arealist__name {
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  font-weight: 400;
  color: var(--ab-navy);
}

/* Variante extendida (índice de áreas): nombre + descripción. */
.ab-areagrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
}
.ab-areagrid__item {
  display: block;
  padding: 20px 0;
  border-top: 1px solid var(--ab-hairline);
}
.ab-areagrid__item:nth-last-child(-n+2) { border-bottom: 1px solid var(--ab-hairline); }
.ab-areagrid__name {
  display: block;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  font-weight: 400;
  color: var(--ab-navy);
  letter-spacing: -.01em;
  margin-bottom: 8px;
}
.ab-areagrid__desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ab-graphite);
  font-weight: 300;
  max-width: 400px;
}
.ab-areagrid__item:hover .ab-areagrid__name { text-decoration: underline; text-underline-offset: 4px; }

/* Detalle del área: dos columnas de texto corrido */
.ab-area-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  padding-block: clamp(28px, 3vw, 36px) var(--ab-section-y);
}
.ab-area-body__col { display: flex; flex-direction: column; gap: 20px; }
/* Área con un solo párrafo: una columna a ancho de lectura (no se ve a medias). */
.ab-area-body--single { grid-template-columns: minmax(0, 760px); }

/* --------------------------------------------------------------------------
   10. Equipo
   -------------------------------------------------------------------------- */
.ab-team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 24px;
  max-width: 1080px;
  margin-inline: auto;
}
.ab-team__card { display: block; }
.ab-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--ab-tint-2);
  overflow: hidden;
}
.ab-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.ab-team__card:hover .ab-portrait img { transform: scale(1.03); }
.ab-portrait--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-portrait__pending {
  font-family: var(--ab-font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--ab-silver);
}
.ab-team__meta { padding-top: 14px; }
.ab-team__name {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ab-navy);
  margin-bottom: 4px;
}
.ab-team__role {
  font-size: 12px;
  color: var(--ab-graphite);
  font-weight: 300;
}

/* --------------------------------------------------------------------------
   11. Biografía individual
   -------------------------------------------------------------------------- */
.ab-bio {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 48px;
  align-items: start;
  padding-block: 32px 20px;
}
.ab-bio__portrait .ab-portrait img { object-position: 50% 22%; }
.ab-bio__role { font-size: 12.5px; color: var(--ab-graphite); font-weight: 300; margin-top: 5px; }
.ab-bio__text {
  font-size: clamp(.8125rem, .78rem + .16vw, .875rem);
  line-height: 1.75;
  color: var(--ab-secondary);
  font-weight: 300;
  margin-top: 14px;
  text-align: justify;
  hyphens: auto;
}
.ab-bio__text p + p { margin-top: 1.1em; }

.ab-bio-facts {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ab-hairline);
}
.ab-bio-facts__cols {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
}
.ab-bio-facts .ab-label { display: block; margin-bottom: 4px; font-size: 8.5px; }
.ab-bio-facts__value { font-size: 12px; color: var(--ab-secondary); font-weight: 300; }
.ab-bio-facts__list { display: flex; flex-direction: column; gap: 6px; }
.ab-bio-facts__list a,
.ab-bio-facts__list span { font-size: 12px; color: var(--ab-secondary); font-weight: 300; }
.ab-bio-facts__list a:hover { color: var(--ab-navy); text-decoration: underline; text-underline-offset: 3px; }

.ab-bio-cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 28px;
  padding-block: 20px;
}
.ab-bio-cols--two { grid-template-columns: 1.4fr 1fr; }
.ab-bio-cols--four { grid-template-columns: repeat(4, 1fr); }
.ab-bio-cols__head {
  font-family: var(--ab-font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ab-silver);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--ab-hairline);
}
.ab-bio-cols__entry { padding: 9px 0; border-bottom: 1px solid var(--ab-hairline-soft); }
.ab-bio-cols__entry:last-child { border-bottom: 0; }
.ab-bio-cols__entry-title { font-size: 13.5px; color: var(--ab-navy); font-weight: 500; margin-bottom: 4px; }
.ab-bio-cols__entry-desc { font-size: 12.5px; color: var(--ab-graphite); font-weight: 300; }

.ab-pending {
  font-family: var(--ab-font-mono);
  font-size: 10px;
  color: var(--ab-silver);
}

/* --------------------------------------------------------------------------
   12. La firma
   -------------------------------------------------------------------------- */
.ab-firm-hero {
  position: relative;
  width: 100%;
  min-height: 460px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ab-tint-2);
  margin-bottom: 48px;
}
/* La foto es el único <img> hijo directo de .ab-firm-hero (cl_edit_image()
   no imprime la clase __media fuera de modo edición) — se estiliza por
   posición, igual que .ab-hero > img, para que funcione en ambos modos. */
.ab-firm-hero__media,
.ab-firm-hero > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  filter: var(--ab-photo-misty);
}
.ab-firm-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(120deg,
    #F6F5FA 0%,
    rgba(255, 255, 255, .86) 42%,
    rgba(255, 255, 255, .28) 72%,
    rgba(255, 255, 255, 0) 100%);
}
/* Trama de bruma, igual lenguaje visual que el hero de portada. */
.ab-firm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: var(--ab-mist-pattern);
  background-size: 140px 121px;
  mix-blend-mode: soft-light;
  opacity: .6;
}
.ab-firm-hero__body {
  position: relative;
  z-index: 3;
  max-width: 660px;
  padding: 44px var(--ab-gutter);
  font-size: clamp(1rem, .94rem + .28vw, 1.125rem);
  line-height: 1.85;
  color: var(--ab-navy);
  font-weight: 300;
  text-align: justify;
  hyphens: none;
}
.ab-firm-hero__body p + p { margin-top: 1.2em; }

.ab-model {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  padding-top: 8px;
}
.ab-model__item {
  padding: 14px 0;
  border-bottom: 1px solid var(--ab-hairline-soft);
}
.ab-model__item:last-child { border-bottom: 0; }
.ab-model__title { font-size: 14px; font-weight: 600; color: var(--ab-navy); margin-bottom: 3px; }
.ab-model__desc { font-size: 12.5px; color: var(--ab-graphite); font-weight: 300; }

/* Carrusel de clientes */
.ab-clients__viewport {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ab-clients__track {
  display: flex;
  gap: 40px;
  flex: 1;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 2px;
}
.ab-clients__track::-webkit-scrollbar { display: none; }
.ab-clients__item {
  flex: none;
  width: 208px;
  height: 96px;
  border: 1px solid var(--ab-hairline);
  background: var(--ab-white);
  padding: 18px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-clients__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .78;
  transition: filter .25s ease, opacity .25s ease;
}
.ab-clients__item:hover img { filter: grayscale(0); opacity: 1; }
.ab-clients__nav {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ab-border-strong);
  background: var(--ab-white);
  color: var(--ab-navy);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .18s ease, background .18s ease;
}
.ab-clients__nav:hover { border-color: var(--ab-navy); background: var(--ab-navy); color: var(--ab-white); }
.ab-clients__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.ab-clients__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--ab-border-strong);
  cursor: pointer;
}
.ab-clients__dot[aria-current="true"] { background: var(--ab-navy); }

/* --------------------------------------------------------------------------
   13. Contacto
   -------------------------------------------------------------------------- */
.ab-contact-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 358;
  min-height: 200px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ab-tint-2);
}
/* Igual que .ab-firm-hero: cl_edit_image() no imprime la clase __media
   fuera de modo edición, así que se estiliza por posición. */
.ab-contact-hero__media,
.ab-contact-hero > img {
  position: absolute;
  inset: -1px;
  z-index: 0;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  filter: var(--ab-photo-misty);
}
.ab-contact-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(255, 255, 255, .92) 0%, rgba(12, 28, 58, .10) 55%, rgba(12, 28, 58, 0) 100%);
}
/* Trama de bruma, igual lenguaje visual que el hero de portada. */
.ab-contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: var(--ab-mist-pattern);
  background-size: 140px 121px;
  mix-blend-mode: soft-light;
  opacity: .6;
}
.ab-contact-hero__body {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 var(--ab-gutter) clamp(20px, 3vw, 40px);
  text-align: center;
}
.ab-contact-hero__body .ab-eyebrow { display: block; color: var(--ab-navy); margin-bottom: 16px; }

.ab-contact {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 72px;
  align-items: start;
  padding-block: clamp(32px, 4vw, 48px) var(--ab-section-y);
}
.ab-contact__details {
  border-top: 1px solid var(--ab-silver);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ab-contact__details .ab-label { display: block; margin-bottom: 8px; }
.ab-contact__place { font-size: 14px; color: var(--ab-navy); font-weight: 500; margin-bottom: 4px; }
.ab-contact__mono { font-family: var(--ab-font-mono); font-size: 12px; line-height: 1.6; color: var(--ab-silver); }
.ab-contact__value { font-size: 11.5px; color: var(--ab-secondary); font-weight: 300; }
.ab-contact__value a { color: var(--ab-secondary); }
.ab-contact__value a:hover { color: var(--ab-navy); }
.ab-contact__intro { margin-bottom: 28px; max-width: 520px; }

/* Formulario: campos amplios, borde de bajo contraste (regla M8). */
.ab-form { max-width: 640px; }
.ab-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}
.ab-field { display: flex; flex-direction: column; gap: 8px; }
.ab-field--full { grid-column: 1 / -1; }
.ab-field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ab-secondary);
  letter-spacing: .01em;
}
.ab-field input,
.ab-field textarea,
.ab-field select {
  font-family: var(--ab-font-body);
  font-size: 13.5px;
  color: var(--ab-navy);
  padding: 13px 14px;
  border: 1px solid var(--ab-hairline);
  background: var(--ab-white);
  outline: none;
  width: 100%;
  transition: border-color .18s ease;
}
.ab-field input::placeholder,
.ab-field textarea::placeholder { color: var(--ab-silver); }
.ab-field input:focus,
.ab-field textarea:focus { border-color: var(--ab-navy); }
.ab-field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

.ab-form__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 22px;
  font-size: 11.5px;
  color: var(--ab-graphite);
  font-weight: 300;
  line-height: 1.6;
}
.ab-form__consent input { margin: 3px 0 0; flex: none; }
.ab-form__consent a { text-decoration: underline; text-underline-offset: 2px; }
.ab-form__actions { margin-top: 28px; }
.ab-form__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Alertas por jerarquía tonal, no por saturación (regla M8). */
.ab-alert {
  padding: 16px 18px;
  border-left: 2px solid var(--ab-navy);
  background: var(--ab-tint-1);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ab-secondary);
  margin-bottom: 28px;
  max-width: 640px;
}
.ab-alert--error { border-left-color: var(--ab-graphite); background: var(--ab-tint-2); }
.ab-alert strong { color: var(--ab-navy); font-weight: 600; }

/* --------------------------------------------------------------------------
   14. Actualidad (Perspectivas)
   -------------------------------------------------------------------------- */
.ab-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 30px;
}
.ab-filter {
  font-family: var(--ab-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  padding: 9px 16px;
  border: 1px solid var(--ab-hairline);
  background: transparent;
  color: var(--ab-secondary);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.ab-filter:hover { border-color: var(--ab-navy); color: var(--ab-navy); }
.ab-filter[aria-current="true"] {
  border-color: var(--ab-navy);
  background: var(--ab-navy);
  color: var(--ab-white);
}

.ab-cardgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 4px;
}
.ab-card {
  display: block;
  padding: 24px 0;
  border-top: 1px solid var(--ab-hairline);
}
.ab-card__cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ab-secondary);
  margin-bottom: 10px;
}
.ab-card__date {
  font-family: var(--ab-font-mono);
  font-size: 11px;
  color: var(--ab-silver);
  margin-bottom: 10px;
}
.ab-card__title {
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  font-weight: 700;
  color: var(--ab-navy);
  letter-spacing: -.01em;
  line-height: 1.3;
  margin-bottom: 10px;
  max-width: 440px;
}
.ab-card__excerpt {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ab-graphite);
  font-weight: 300;
  max-width: 440px;
  text-align: justify;
  hyphens: auto;
}
.ab-card__more { margin-top: 14px; font-size: 12.5px; font-weight: 500; color: var(--ab-navy); }
.ab-card:hover .ab-card__title { text-decoration: underline; text-underline-offset: 4px; }

.ab-cardgrid--related { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
.ab-cardgrid--related .ab-card { padding: 22px 0; }
.ab-cardgrid--related .ab-card__title { font-size: 1rem; }

/* Artículo */
.ab-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--ab-hairline);
}
.ab-article__meta .ab-article__date { font-family: var(--ab-font-mono); font-size: 11px; color: var(--ab-silver); }
.ab-article__meta .ab-article__cat { font-size: 12.5px; font-weight: 600; color: var(--ab-secondary); }
.ab-article__meta .ab-article__author { font-size: 12.5px; font-weight: 400; color: var(--ab-graphite); }
.ab-article__sep { color: var(--ab-silver); }

/* Columna editorial única */
.ab-prose {
  max-width: 680px;
  margin-inline: auto;
  font-size: clamp(.9375rem, .9rem + .18vw, 1rem);
  line-height: 1.85;
  color: var(--ab-secondary);
  font-weight: 300;
  text-align: justify;
  hyphens: auto;
}
.ab-prose > * + * { margin-top: 1.4em; }
.ab-prose h2 {
  font-family: var(--ab-font-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--ab-navy);
  letter-spacing: -.01em;
  margin-top: 2em;
}
.ab-prose h3 { font-size: 1.0625rem; font-weight: 600; color: var(--ab-navy); margin-top: 1.8em; }
.ab-prose ul, .ab-prose ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.ab-prose blockquote {
  margin: 0;
  padding-left: 22px;
  border-left: 2px solid var(--ab-silver);
  font-family: var(--ab-font-display);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ab-navy);
}
.ab-prose a { text-decoration: underline; text-underline-offset: 3px; }
.ab-prose img { margin-block: 1.6em; }

.ab-article__contact {
  max-width: 680px;
  margin-inline: auto;
  border-top: 1px solid var(--ab-silver);
  padding-top: 26px;
}
.ab-article__contact .ab-eyebrow { display: block; margin-bottom: 18px; }
.ab-article__contact-person {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  align-items: center;
}
.ab-article__contact-person .ab-portrait { aspect-ratio: 1 / 1; }

/* Banda de cierre */
.ab-cta-band {
  /* El fondo lo pone cl_get_color() inline (editable desde Constructor Live,
     "Color de fondo") — no declarar background aquí, quedaría inerte. */
  padding: 40px var(--ab-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ab-cta-band__text {
  font-size: clamp(1rem, .94rem + .28vw, 1.125rem);
  font-weight: 400;
  color: var(--ab-navy);
  letter-spacing: -.01em;
  max-width: 480px;
  text-wrap: pretty;
}

/* Documento legal */
.ab-legal { max-width: 900px; }
.ab-legal__sections { padding-bottom: 64px; }

/* El documento se escribe en el editor, así que las reglas cuelgan de las
   etiquetas que este genera: cada H2 abre una sección con su filete. */
.ab-legal__sections > * + * { margin-top: 14px; }
.ab-legal h2 {
  font-family: var(--ab-font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--ab-navy);
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--ab-hairline);
  margin-bottom: 12px;
}
.ab-legal__sections > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ab-legal h3 { font-size: .9375rem; font-weight: 600; color: var(--ab-navy); margin-top: 24px; }
.ab-legal p { font-size: 13.5px; line-height: 1.85; color: var(--ab-secondary); font-weight: 300; text-wrap: pretty; text-align: justify; }
.ab-legal p + p { margin-top: 14px; }
.ab-legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.ab-legal li { font-size: 13.5px; line-height: 1.7; color: var(--ab-secondary); font-weight: 300; text-align: justify; }
.ab-legal b, .ab-legal strong { color: var(--ab-navy); font-weight: 600; }

/* --------------------------------------------------------------------------
   15. Pie de página
   -------------------------------------------------------------------------- */
.ab-footer {
  background: var(--ab-navy);
  padding: 40px var(--ab-gutter) 24px;
  color: rgba(255, 255, 255, .74);
}
.ab-footer__top {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr 1fr;
  column-gap: 28px;
  row-gap: 32px;
  align-items: start;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(187, 178, 181, .22);
}
.ab-footer__logo img { height: 26px; width: auto; }
.ab-footer__col { display: flex; flex-direction: column; gap: 10px; }
.ab-footer__col .ab-label { color: var(--ab-silver); }
.ab-footer__col a,
.ab-footer__col span:not(.ab-label) {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .74);
  font-weight: 300;
}
.ab-footer__col a:hover { color: var(--ab-white); }
.ab-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ab-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 20px;
  font-size: 11px;
  color: rgba(187, 178, 181, .7);
  font-weight: 300;
}
.ab-footer__bottom a { color: inherit; text-decoration: underline; }
.ab-footer__bottom a:hover { color: var(--ab-white); }

/* --------------------------------------------------------------------------
   16. Paginación, 404, buscador
   -------------------------------------------------------------------------- */
.ab-pagination {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--ab-hairline);
  margin-top: 32px;
}
.ab-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--ab-hairline);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ab-secondary);
}
.ab-pagination .page-numbers:hover { border-color: var(--ab-navy); color: var(--ab-navy); }
.ab-pagination .page-numbers.current {
  background: var(--ab-navy);
  border-color: var(--ab-navy);
  color: var(--ab-white);
}

.ab-empty {
  padding: 40px 0;
  font-size: 14px;
  color: var(--ab-graphite);
  font-weight: 300;
}

.ab-searchform { display: flex; gap: 0; max-width: 420px; }
.ab-searchform input[type="search"] {
  flex: 1;
  font-family: var(--ab-font-body);
  font-size: 13.5px;
  padding: 13px 14px;
  border: 1px solid var(--ab-hairline);
  outline: none;
}
.ab-searchform input[type="search"]:focus { border-color: var(--ab-navy); }
.ab-searchform button { border: 1px solid var(--ab-navy); }

/* --------------------------------------------------------------------------
   17. Retícula responsive
   Manual de marca: 12 col >=1200 · 8 col 768-1199 · 4 col <768.
   Se reordena, no se comprime.
   -------------------------------------------------------------------------- */

/* --- 8 columnas: 768-1199 px ------------------------------------------- */
@media (max-width: 1199px) {
  .ab-team { grid-template-columns: repeat(3, 1fr); }
  .ab-bio-cols--four { grid-template-columns: repeat(2, 1fr); }
  .ab-area-body { gap: 40px; }
  .ab-arealist,
  .ab-areagrid,
  .ab-cardgrid { column-gap: 40px; }
  .ab-contact { grid-template-columns: 300px 1fr; gap: 40px; }
  .ab-footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .ab-footer__logo { grid-column: 1 / -1; }
}

@media (max-width: 1023px) {
  /* Navegación colapsada */
  .ab-nav-toggle { display: inline-flex; }
  .ab-header__inner { gap: 12px; }
  .ab-header--home .ab-header__inner { justify-content: space-between; padding-block: 20px; gap: 12px; }

  /* Logo con más protagonismo en móvil: se dimensiona por ancho relativo al
     viewport para ganar tamaño sin llegar nunca a chocar con la hamburguesa
     ni desbordar en pantallas estrechas. */
  .ab-header__logo img { height: auto; width: min(70vw, 260px); }

  /* En portada el logo pasa a la cabecera, donde también sirve para volver
     al inicio; se retira el del hero para no repetirlo dos veces seguidas. */
  .ab-header--home .ab-header__logo { display: block; }
  .ab-hero__logo { display: none; }

  .ab-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ab-white);
    border-top: 1px solid var(--ab-hairline);
    border-bottom: 1px solid var(--ab-hairline);
    padding: 8px var(--ab-gutter) 20px;
    box-shadow: 0 18px 40px rgba(12, 28, 58, .10);
  }
  .ab-nav.is-open { display: flex; }
  .ab-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .ab-nav a,
  .ab-header--home .ab-nav a {
    display: block;
    font-size: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--ab-hairline-soft);
  }
  .ab-nav li:last-child a { border-bottom: 0; }
  .ab-nav .current-menu-item > a,
  .ab-nav .current_page_item > a,
  .ab-nav .current-menu-parent > a,
  .ab-nav .ab-nav-current > a,
  .ab-nav a.ab-nav-current {
    background: transparent;
    color: var(--ab-navy);
    font-weight: 600;
    padding: 15px 0;
  }

  /* Biografías y detalle a una sola columna */
  .ab-bio,
  .ab-bio-facts { grid-template-columns: 1fr; gap: 28px; }
  .ab-bio__portrait { max-width: 260px; }
  .ab-bio-facts__spacer { display: none; }

  /* Contacto y Áreas de práctica apilados en una sola columna: en móvil se leen
     en vertical, sin obligar a scroll horizontal dentro del bloque. */
  .ab-bio-facts__cols { grid-template-columns: 1fr; gap: 24px; }
  .ab-bio-facts__value,
  .ab-bio-facts__value a,
  .ab-bio-facts__list a,
  .ab-bio-facts__list span { overflow-wrap: anywhere; }
  .ab-bio-cols,
  .ab-bio-cols--two,
  .ab-bio-cols--four { grid-template-columns: 1fr; gap: 24px; }
  .ab-area-body { grid-template-columns: 1fr; gap: 20px; }
  .ab-contact { grid-template-columns: 1fr; gap: 36px; }
  .ab-article__contact-person { grid-template-columns: 88px 1fr; gap: 16px; }
  .ab-firm-hero__body { max-width: none; }
  .ab-firm-hero__scrim {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .96) 0%,
      rgba(255, 255, 255, .90) 55%,
      rgba(255, 255, 255, .72) 100%);
  }
}

/* --- 4 columnas: < 768 px ---------------------------------------------- */
@media (max-width: 767px) {
  .ab-arealist,
  .ab-areagrid,
  .ab-cardgrid,
  .ab-cardgrid--related,
  .ab-model { grid-template-columns: 1fr; column-gap: 0; }

  /* Con una sola columna, el borde inferior solo va en el último elemento. */
  .ab-arealist__item:nth-last-child(-n+2),
  .ab-areagrid__item:nth-last-child(-n+2) { border-bottom: 0; }
  .ab-arealist__item:last-child,
  .ab-areagrid__item:last-child { border-bottom: 1px solid var(--ab-hairline); }

  .ab-team { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }

  /* El hero apila: la imagen sostiene el fondo con velo casi opaco. */
  .ab-hero { min-height: 0; }
  .ab-hero__media,
  .ab-hero > img { object-position: 70% 40%; }
  .ab-hero__scrim {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .97) 0%,
      rgba(255, 255, 255, .90) 55%,
      rgba(255, 255, 255, .60) 100%);
  }
  .ab-hero__body { padding-block: 36px 40px; max-width: none; }
  .ab-hero__logo { width: min(300px, 78%); margin-bottom: 22px; }

  .ab-firm-hero { min-height: 0; margin-bottom: 32px; }
  /* En columna angosta el justificado abre huecos; a la izquierda queda limpio. */
  .ab-firm-hero__body { padding-block: 32px 36px; text-align: left; }

  .ab-contact-hero { aspect-ratio: 16 / 9; max-height: 280px; }
  .ab-contact-hero__body { text-align: left; }

  .ab-form__grid { grid-template-columns: 1fr; }
  .ab-section-head { flex-direction: column; align-items: flex-start; gap: 8px; }

  .ab-footer__top { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .ab-footer__bottom { flex-direction: column; }

  .ab-cta-band { flex-direction: column; align-items: flex-start; }

  .ab-clients__nav { display: none; }
  .ab-clients__viewport { gap: 0; }
  .ab-clients__track { gap: 16px; }
  .ab-clients__item { width: 168px; height: 84px; }
}

@media (max-width: 479px) {
  .ab-footer__top { grid-template-columns: 1fr; }
  .ab-team { grid-template-columns: 1fr; }
  .ab-team__card { max-width: 320px; }
  .ab-article__contact-person { grid-template-columns: 1fr; }
  .ab-article__contact-person .ab-portrait { max-width: 110px; }
}

/* --------------------------------------------------------------------------
   18. Preferencias del usuario e impresión
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .ab-header, .ab-footer, .ab-cta-band, .ab-filters, .ab-clients__nav, .ab-clients__dots { display: none !important; }
  body { color: #000; }
  .ab-shell { box-shadow: none; }
}