@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

/* ==========================================================================
   PAGE-LANDING-EDITORIAL.CSS — el brazo TRATADO de las landings
   ==========================================================================

   Hoja EXCLUSIVA de `landing_specialty_city_editorial.html`, la plantilla que
   la vista elige solo cuando `context['editorial']` no es None (contrato v2
   §1). No la carga ninguna otra pagina.

   POR QUE UN FICHERO NUEVO Y NO page-landing.css
   ----------------------------------------------
   Dos motivos medidos:
   1. Esto lo piden ~100 URLs de las 117.077 que sirve `views_unified`. Metido
      en page-landing.css lo descargarian todas.
   2. El cache-buster de estaticos se sube A MANO en la plantilla, y
      page-landing.css se carga desde SEIS plantillas distintas
      (landing_specialty_city, landing_city, specialty_landing,
      problem_landing, search, all_lawyers): subirle el `?v=` obliga a tocar
      las seis y a acertar en las seis. Un fichero nuevo nace sin version
      cacheada en ningun navegador.

   Alcance: SOLO el articulo. Cabecera, pie, miga de pan, schema, canonico y
   modal de contacto siguen siendo los del sitio (contrato §2 y §8).

   CONTRATOS QUE MANDAN
   --------------------
   · docs/superpowers/plans/2026-09-06-contrato-rediseno-editorial.md
     (v2, congelado; §10 es el inventario cerrado de clases: aqui no se
     inventa ni se renombra ninguna)
   · docs/superpowers/plans/2026-09-06-sistema-visual-referencia.md
     (el sistema real, con valores)
   · El mockup del titular: "Directorio Vigo Mercantil.dc.html". De ahi salen
     las DECISIONES DE COMPOSICION (jerarquia, huecos, proporciones); el color
     y la tipografia se traducen a nuestros tokens segun §5 y §6 del contrato.

   LAS DOS TRAMPAS DEL REPO QUE MUERDEN AQUI
   -----------------------------------------
   · `theme.min.css` (que se carga ANTES que el DS y que esta hoja) pone
     `ol,ul{display:flex;flex-direction:column;gap:.5rem;padding-left:1.5rem}`
     y NADA lo revierte en todo el proyecto. Cualquier lista de esta hoja fija
     lo suyo -- ver el reset de la §0.
   · `figure,img{height:auto}` del mismo fichero ANULA el atributo `height`
     del marcado (una regla CSS gana siempre a un atributo de presentacion).
     Fue lo que dejo doce fotos del articulo v1 a doce alturas distintas entre
     70px y 213px. Toda imagen de esta hoja fija alto (o `aspect-ratio`) en
     CSS, con `object-fit: cover`.

   REGLAS DE CASA QUE SE RESPETAN AQUI
   -----------------------------------
   Cero `!important`. Cero `box-shadow` (el sistema separa con borde y fondo;
   los tres ficheros que usan sombra en cards estan muertos y no los carga
   ninguna plantilla). Cero `prefers-color-scheme: dark`. Ni un color literal
   fuera del bloque de tokens de la §1. Desktop-first con UN breakpoint
   (`max-width: 768px`), que es como esta escrito todo el sistema... con una
   excepcion declarada: el bloque final a 400px, que NO es un segundo
   breakpoint de layout sino un ajuste de tamano de titular para 360px.
   ========================================================================== */


/* ==========================================================================
   0. RESETS ACOTADOS AL ARTICULO
   ========================================================================== */

/* Las listas del articulo. El truco de especificidad es deliberado:
   `:where(...)` no suma nada, asi que el selector entero pesa (0,0,1) --
   EMPATA con `ol,ul` de theme.min.css y le gana por orden de carga, pero
   PIERDE contra cualquier regla de clase de esta hoja (0,1,0). Escrito como
   `.lp-ed-firms ul` (0,1,1) le habria ganado tambien a mis propios
   `__grid`/`__tags` y los habria dejado en `display:block`. */
:where(.lp-ed-head, .lp-ed-firms, .lp-ed-more, .lp-ed-problems, .lp-ed-links) ul,
:where(.lp-ed-head, .lp-ed-firms, .lp-ed-more, .lp-ed-problems, .lp-ed-links) ol {
  display: block;
  /* `flex-direction` y `gap` tambien, y no solo `display`: MEDIDO, las dos
     etiquetas de un despacho salian una debajo de otra y a 165px de ancho.
     `.lp-ed-firm__tags{display:flex;flex-wrap:wrap}` gana el `display`, pero
     el `flex-direction: column` del tema seguia en pie porque nadie lo
     declaraba. Reseteado aqui, cualquier lista que un componente convierta en
     flex nace en fila. */
  flex-direction: row;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* `p{margin-bottom:1rem}` del tema descuadra todo el ritmo vertical, que aqui
   lo dan los `gap` de los contenedores. Mismo peso (0,0,1), misma razon. */
:where(.lp-ed-head, .lp-ed-firms, .lp-ed-more, .lp-ed-problems, .lp-ed-links) p {
  margin: 0;
}

/* Los encabezados del tema llegan con `line-height:1.2; font-weight:600;
   margin-bottom:1rem`, y `h3{font-size:1.75rem}` -- fue lo que puso el nombre
   del despacho a 28px en Manrope, MAS GRANDE que el h2 de su propia seccion.
   Aqui cada titular declara su tamano; esto solo limpia el margen heredado. */
:where(.lp-ed-head, .lp-ed-firms, .lp-ed-more, .lp-ed-problems, .lp-ed-links)
  :where(h1, h2, h3, h4) {
  margin: 0;
}

/* Ningun elemento del articulo puede desbordar a lo ancho (contrato §7). Los
   titulares en serif a 62px parten palabra antes que salirse: en la landing
   mas larga que hay hoy ("Santiago de Compostela", 22 caracteres) a 360px de
   ancho el titular medido sin esto se salia 34px del contenedor. */
:where(.lp-ed-head, .lp-ed-firms, .lp-ed-more, .lp-ed-problems, .lp-ed-links)
  :where(h1, h2, h3, h4, p, a, span) {
  overflow-wrap: break-word;
}


/* ==========================================================================
   1. TOKENS NUEVOS — los TRES que de verdad no existen
   ==========================================================================
   Todos los demas colores del mockup ya estan en el `:root` de
   legaltica-ds.css y se usan desde alli (contrato §6). Equivalencias
   comprobadas una a una contra ese `:root`:

     mockup #EDE9E1 fondo   -> --lt-canvas        #F7F5F1
     mockup #DCD6CA borde   -> --lt-border        #E7E2DA
     mockup #E4DFD5 filete  -> --lt-divider       #EFEBE5
     mockup #17233A tinta   -> --lt-ink           #16202E
     mockup #C3382C rojo    -> --lt-primary       #C54343
     mockup #5B6272 texto2  -> --lt-text-2        #5B6472  (coincide al 99%)
     mockup #8A8272 rotulo  -> --lt-text-muted    #666D7A
     mockup #1D2A44 panel   -> --lt-dark-surface  #1D2A3B
     mockup #2E3950 filete  -> --lt-dark-border   #2A3A4E
     mockup #A8B1C4 s/oscuro-> --lt-on-dark       #B9C2CE
     mockup #98A2B7 s/oscuro-> --lt-on-dark-muted #9AA5B4
     mockup #6E7A93 s/oscuro-> --lt-on-dark-faint #7B8799  (solo decorativo)
     mockup #E08A80 rojo/osc-> --lt-primary-light #E07A6B
     mockup #D9A02B estrella-> --lt-star          #E8A33D   <-- SI EXISTE

   El contrato §6 daba por nuevo "el oro de la estrella". No lo es: al
   comprobar el `:root` aparece `--lt-star: #E8A33D`, que es exactamente el
   oro de las estrellas de rating del sitio. Se usa ese y no se declara
   ninguno nuevo: una segunda estrella dorada en otro tono, en la misma
   pagina que ya pinta ratings arriba, canta.

   `--lt-muted` NO existe (el fichero lo invoca con fallback y siempre cae al
   fallback #6b7280, que ademas suspende AA). El real es `--lt-text-muted`.
   `--lt-text-faint` no se usa como color de texto en ningun sitio de esta
   hoja: da 2,29:1 sobre crema.
   ========================================================================== */

:root {
  /* La serif del mockup. Es LO QUE HACE QUE FUNCIONE: sin ella el rediseno es
     el mismo listado con otro reparto. Se anade UNA fuente, no dos (contrato
     §5): los rotulos en versalitas que el mockup pone en IBM Plex Mono van
     aqui en Space Grotesk (`--lt-font-head`), que ya esta cargada y hace el
     mismo trabajo.
     Pila de respaldo real y no `serif` a secas: Instrument Serif es de
     contraste alto y ojo pequeno; Georgia es la serif de sistema que menos
     salta de metrica mientras la web-font carga con `display=swap`. */
  --lp-ed-serif: 'Instrument Serif', Georgia, 'Times New Roman', Times, serif;

  /* El panel calido del mockup (#F5F2EC). Este si es nuevo: el sistema tiene
     crema de pagina (--lt-canvas #F7F5F1) y blanco de card (--lt-surface),
     pero no un tercer fondo para una BANDA a sangre. Sobre el, las tarjetas
     siguen siendo blancas -- que es la regla 2 del sistema: un bloque blanco
     solo se ve porque el fondo es crema. */
  --lp-ed-panel: #F5F2EC;

  /* El verde de LLAMALO SI. El del mockup (#3F8F63) da 3,53:1 sobre el panel
     calido y el del sistema (--lt-open #2E9E6B) da 3,02:1: los dos suspenden
     AA para texto pequeno, y el rotulo va a 11,5px. Este es el mismo tono y
     la misma saturacion bajados a L=32%: 5,21:1 sobre --lp-ed-panel, 5,35:1
     sobre --lt-canvas y 5,82:1 sobre blanco. Pasa en los tres fondos claros
     donde puede caer. */
  --lp-ed-yes: #32714E;
}


/* ==========================================================================
   2. RITMO Y CONTENEDORES
   ==========================================================================
   Dos formas de contenedor, y la diferencia importa:

   · Secciones normales (`__head`, `__more`, `__links`): mismo contenedor que
     el resto del sitio -- `--lt-container` (1200) + `--lt-gutter` (32/20).
     Asi el titular del articulo arranca en la misma vertical que el logotipo
     del header y que el pie. Se declara el padding COMPLETO (con su gutter)
     a proposito: si la plantilla las envuelve tambien en `.lp-sec`, esta hoja
     carga despues y gana, y el resultado es identico en los dos casos.

   · Bandas a sangre (`__firms`, `__problems`): fondo de borde a borde de la
     ventana con el contenido alineado al mismo eje. El `max()` es lo que
     evita que el padding se vuelva negativo por debajo de 1200px, y el
     `max-width: none` deshace el `.lp-sec` si la plantilla se lo pone: una
     banda dentro de un contenedor de 1200 deja de ser una banda.
   ========================================================================== */

.lp-ed-head,
.lp-ed-more,
.lp-ed-links {
  max-width: var(--lt-container);
  margin-inline: auto;
  padding-inline: var(--lt-gutter);
}

.lp-ed-firms,
.lp-ed-problems {
  max-width: none;
  /* 568px = (1200 - 32*2) / 2, la mitad del ancho de contenido real. */
  padding-inline: max(var(--lt-gutter), 50% - 568px);
}

/* Las anclas del indice "EN ESTA GUIA". Sin esto el header sticky (72px) se
   come el titulo de la seccion a la que acabas de saltar. Mismo criterio que
   `#lawyers` y `.lp-anchor` en page-landing.css. */
.lp-ed-head,
.lp-ed-firms,
.lp-ed-more,
.lp-ed-guide,
#preguntas,
.lp-ed-problems,
.lp-ed-links {
  scroll-margin-top: calc(var(--lt-header-h) + 24px);
}


/* ==========================================================================
   3. MASTHEAD  (contrato §3.1)
   ==========================================================================
   Dos columnas: la izquierda es el articulo (cintillo, titular, entradilla,
   firma y cifras), la derecha es el aparte (tarjeta oscura de caso + indice).
   El mockup reparte 520/300 con `flex`; aqui va en grid porque el aparte
   tiene que abarcar TODAS las filas de la izquierda, y con flex eso obliga a
   un envoltorio que el inventario de clases no tiene.

   La colocacion se declara sobre los hijos directos, que es lo que el
   inventario §10 implica (no hay clase de envoltorio para la columna
   izquierda). El ritmo vertical va ademas en `margin` de cada pieza y no solo
   en `row-gap`, para que la seccion siga leyendose bien si la plantilla mete
   un envoltorio sin clase.
   ========================================================================== */

.lp-ed-head {
  display: grid;
  /* col 1: cuerpo del titular · col 2: cifras · col 3: el aparte */
  grid-template-columns: minmax(0, 1fr) auto minmax(280px, 340px);
  /* MEDIDO: el aparte abarca todas las filas de la izquierda y mide 440px, asi
     que sin esto repartia su altura entre ellas y abria un hueco de 380px
     entre el cintillo y el titular. Las filas de contenido van a `min-content`
     y la ULTIMA, vacia, se lleva en `1fr` todo lo que sobre del aparte.
     Ocho y no cuatro: la plantilla mete la miga de pan DENTRO de este grid
     como primer hijo, asi que la cuenta de filas de la izquierda no es fija.
     Las filas explicitas que sobran miden 0 (min-content de nada) y no suman
     nada con `row-gap: 0`; lo que importa es que el sumidero `1fr` sea
     siempre la ultima. */
  grid-template-rows: repeat(8, min-content) 1fr;
  grid-auto-rows: min-content;
  column-gap: var(--lt-s-14);          /* 48px */
  align-items: start;
  padding-block: var(--lt-s-11) var(--lt-s-13);   /* 28 / 40 */
  /* SIN `border-top`. Lo llevaba, como la linea de cabecera de periodico que
     el mockup pone entre la miga de pan y el titular, y estaba pensado para un
     contenedor que empezaba DEBAJO de la miga. Pero la plantilla mete la miga
     dentro de este mismo grid, asi que el filete se subio al borde superior y
     alli ya hay uno: MEDIDO, el `border-bottom` del header del sitio cierra en
     y=72 (64 en movil) y este abria en y=72 exacto -- dos rayas de 1px pegadas
     y ademas en dos tonos distintos (--lt-border #E7E2DA la del header,
     --lt-divider #EFEBE5 la mia), que juntas se leen como una linea de 2px mas
     sucia que la del resto del sitio. La separacion con el header ya la da el
     header; el papel de "linea de cabecera" lo hace ahora la propia miga. */
}
.lp-ed-head > * { grid-column: 1 / 3; min-width: 0; }

/* Cintillo GUIA LEGALTICA: filete rojo de 26px + rotulo. Las mayusculas las
   escribe la plantilla -- el sistema prohibe `text-transform` (regla 5). */
.lp-ed-head__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--lt-s-5);
  margin-bottom: var(--lt-s-9);
  font-family: var(--lt-font-head);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
  color: var(--lt-primary);
}
.lp-ed-head__eyebrow::before {
  content: "";
  flex: none;
  width: 26px;
  height: 1px;
  background: var(--lt-primary);
}

/* EL TITULAR. Es `landing.h1`, el que ya manda el SEO -- no el del mockup
   (contrato §1: si cambian titulo y cuerpo a la vez el experimento no mide).
   El clamp del mockup (44-84px) se sustituye por uno medido contra NUESTRO
   contenedor, que es 1136px y no 1192, y contra el h1 real, que es mas corto
   que el del mockup ("Abogados de Derecho Mercantil en Vigo", 37 caracteres,
   dos lineas a 66px). El minimo baja a 34px porque a 360px el titular tiene
   320px de caja: a 44px del mockup, "Compostela" ya no cabia en una linea. */
.lp-ed-head__h1 {
  margin: 0 0 var(--lt-s-9) 0;
  font-family: var(--lp-ed-serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 66px);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.lp-ed-head__lead {
  margin: 0 0 var(--lt-s-10) 0;
  max-width: 58ch;
  font-size: clamp(16.5px, 1.25vw, 19px);
  line-height: 1.6;
  color: var(--lt-text-2);
  text-wrap: pretty;
}

/* Firma. "Redaccion Legaltica" y nada mas: el spec prohibe cualquier sello de
   revision por abogado colegiado, asi que aqui no hay hueco para un avatar de
   persona ni para una insignia. El circulo rayado del mockup se queda como
   marca de casa, con el patron de placeholder del sistema. */
/* Grid y no flex: el nombre y la fecha van APILADOS a la derecha de la marca
   redonda, y el inventario §10 no tiene clase para envolverlos. Con el
   `::before` ocupando `grid-row: 1 / -1` da igual que la plantilla los emita
   sueltos o metidos en un div sin clase: en los dos casos quedan bien. */
.lp-ed-head__byline {
  grid-column: 1;
  /* En el flujo, detras de la tarjeta de caso. Estuvo anclada a la ultima
     fila del grid para tapar el hueco que dejaba el aparte; con la tarjeta ya
     en esta columna, anclarla solo estiraba la cabecera (800 px medidos). */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--lt-s-5);
  align-items: center;
}
/* El isologo de la firma (contrato §13). Sustituye al circulo rayado del
   mockup, que era un marcador de posicion; el SVG lo pone la plantilla con sus
   tres <rect> y sus colores de marca literales, y reutiliza `.lt-isologo` del
   DS (`display:block; flex-shrink:0`), que no se redefine aqui.

   32px y no los 38 del circulo del mockup: el isologo es una teja llena con
   esquinas redondeadas, no un circulo con un rayado claro, asi que a igual
   medida pesa mucho mas. MEDIDO contra las dos lineas de la firma, que es lo
   que tiene que equilibrar: el bloque de texto mide 35,5px en escritorio
   (nombre 17,55 + 3 de margen + fecha 14,94), asi que 32 se queda justo por
   debajo y el isologo acompana en vez de dominar. El tamano lo manda esta
   regla y no los atributos `width`/`height` del SVG: una regla CSS gana
   siempre a un atributo de presentacion -- la misma mecanica que deja las
   fotos a su alto de verdad.

   `span 2` y no `1 / -1`: sin `grid-template-rows` declarado la rejilla no
   tiene lineas explicitas, y ahi `-1` resuelve a la linea 1, o sea que el
   `1 / -1` NO abarcaba nada. MEDIDO: la marca se quedaba sola en la fila 1 y
   la estiraba a sus 38px, con el nombre centrado dentro y 13px de aire muerto
   antes de la fecha -- las dos lineas de la firma se leian separadas.

   `align-self: start` en los dos anchos, y no centrado: en movil la fecha
   envuelve a dos lineas y el bloque pasa de 35,5 a 49,1px, asi que un isologo
   centrado se descolgaria hasta la mitad de la fecha. Anclado al nombre se
   queda donde tiene que estar sin que haga falta un segundo valor por ancho, y
   aguanta que la fecha crezca (que cambia con el idioma y con el dia). */
.lp-ed-head__byline-mark {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: 32px;
  height: 32px;
}
.lp-ed-head__byline-name {
  grid-column: 2;
  display: block;
  font-size: var(--lt-fs-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--lt-ink);
}
.lp-ed-head__byline-meta {
  grid-column: 2;
  display: block;
  margin-top: 3px;
  font-family: var(--lt-font-head);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .04em;
  color: var(--lt-text-muted);
}

/* Las tres cifras. Separadas de la firma por un filete vertical, como en el
   mockup: es el gesto que las convierte en "datos de la guia" y no en tres
   parrafos sueltos. */
.lp-ed-head__stats {
  grid-column: 2;
  display: flex;
  gap: var(--lt-s-10);
  align-self: center;
  padding-left: var(--lt-s-10);
  border-left: 1px solid var(--lt-divider);
}
.lp-ed-head__stat { min-width: 0; }
.lp-ed-head__stat-n {
  display: block;
  font-family: var(--lp-ed-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--lt-ink);
}
.lp-ed-head__stat-k {
  display: block;
  margin-top: var(--lt-s-2);
  font-family: var(--lt-font-head);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
  color: var(--lt-text-muted);
}

/* El aparte: ocupa la tercera columna y todas las filas de la izquierda. */
.lp-ed-head__aside {
  grid-column: 3;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-6);
  min-width: 0;
}

/* --- Banda de analisis: enlaza al flujo que YA existe (§2bis) --- */

/* Va ENTRE los tres destacados y el resto del listado, no en la cabecera: ahi
   alargaba la columna derecha y dejaba 206 px de hueco al lado del titular
   (medido a 1440 el 2026-09-12). Contenida, no a sangre: ya hay dos bandas a
   sangre --destacados y problemas-- y una tercera seguida convertiria la
   pagina en franjas. */
.lp-ed-cta {
  /* El ANCHO y no solo el tope: con `max-width` y `margin: auto` a secas, en
     el movil la banda iba de borde a borde (visto por el titular, 2026-09-12). */
  width: calc(100% - var(--lt-gutter) * 2);
  max-width: calc(var(--lt-container) - var(--lt-gutter) * 2);
  margin: var(--lt-s-13) auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lt-s-10);
  flex-wrap: wrap;
  padding: var(--lt-s-10) var(--lt-s-11);
  border-radius: var(--lt-r-lg);
  background: var(--lt-ink);
  color: var(--lt-on-dark);
}
.lp-ed-cta__text {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-3);
}
/* Blanco por token y no `#fff`: --lt-surface ES el #FFFFFF declarado del
   sistema. El DS lo escribe literal 30 veces; aqui no, porque el contrato
   prohibe un color literal fuera del bloque de tokens. */
.lp-ed-cta__title {
  margin: 0;
  font-family: var(--lp-ed-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--lt-surface);
}
.lp-ed-cta__note {
  margin: 0;
  max-width: 62ch;
  font-size: var(--lt-fs-body);
  line-height: 1.55;
  color: var(--lt-on-dark);
}
/* MEDIDO: sin el selector de elemento, el texto del boton salia en TINTA sobre
   el rojo (rgb(22,32,46) sobre rgb(197,67,67), 3,1:1). La culpa es de
   `.lt a { color: var(--lt-text) }` del DS, que pesa (0,1,1) y le gana a una
   clase sola (0,1,0). Con `a.` y `button.` se empata a (0,1,1) y gana esta
   hoja por orden de carga -- que es el patron del repo (§6.6 de la ficha de
   referencia) y lo que evita un !important. */
a.lp-ed-cta__button,
button.lp-ed-cta__button,
.lp-ed-cta__button {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--lt-s-11);
  border: none;
  border-radius: var(--lt-r-md);
  background: var(--lt-primary);
  font-family: var(--lt-font-head);
  font-size: var(--lt-fs-body);
  font-weight: 600;
  text-decoration: none;
  color: var(--lt-surface);
  cursor: pointer;
}
a.lp-ed-cta__button:hover,
button.lp-ed-cta__button:hover,
.lp-ed-cta__button:hover {
  background: var(--lt-primary-hover);
  color: var(--lt-surface);
}


/* --- Indice "EN ESTA GUIA" --- */

.lp-ed-head__toc {
  background: var(--lp-ed-panel);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-lg);
  padding: var(--lt-s-8) var(--lt-s-9);
  counter-reset: lp-ed-toc;
}
.lp-ed-head__toc-title {
  display: block;
  margin-bottom: var(--lt-s-5);
  font-family: var(--lt-font-head);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .12em;
  color: var(--lt-text-muted);
}
.lp-ed-head__toc-item {
  display: flex;
  align-items: baseline;
  gap: var(--lt-s-4);
  padding: var(--lt-s-3) 0;
  border-top: 1px solid var(--lt-divider);
  counter-increment: lp-ed-toc;
}
/* El numero es decoracion, y va marcado `aria-hidden` en la plantilla. Por eso
   puede ir en --lt-text-faint, que esta prohibido para TEXTO pero no para
   elementos que el usuario no tiene que leer (misma excepcion que el "/" de la
   miga de pan).
   Lo pone el `counter` y no la plantilla: asi la numeracion sale seguida
   aunque falte un apartado (una landing sin guia no salta del 02 al 04). */
.lp-ed-head__toc-n {
  flex: none;
  font-family: var(--lt-font-head);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--lt-text-faint);
}
.lp-ed-head__toc-n::before { content: counter(lp-ed-toc, decimal-leading-zero); }
.lp-ed-head__toc-item a {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--lt-ink);
}
.lp-ed-head__toc-item a:hover { color: var(--lt-primary); }


/* ==========================================================================
   4. TRES DESPACHOS DESTACADOS  (contrato §3.2)
   ==========================================================================
   Banda de fondo calido a sangre. Es el corazon del rediseno: cada entrada es
   una resena de verdad, con su columna de datos a la izquierda y el texto a
   la derecha, y no una tarjeta mas.

   Deliberadamente NO es tarjeteria: el listado de "Mas abogados" de abajo ya
   usa tarjetas blancas con borde. Repetir la tarjeta aqui convertiria el
   articulo en un segundo listado con los mismos abogados. Las entradas se
   separan con el filete de --lt-border, que es el gesto del sistema.
   ========================================================================== */

.lp-ed-firms {
  background: var(--lp-ed-panel);
  border-top: 1px solid var(--lt-border);
  border-bottom: 1px solid var(--lt-border);
  padding-block: var(--lt-s-15) var(--lt-s-15);   /* 64 / 64 */
}

/* `baseline` y no `flex-end` como en las otras dos cabeceras, y es por lo que
   acabo pintando la nota: no es el pie de foto del mockup, es
   `blocks.how_we_choose` mas la frase fija de metodologia -- 45 palabras
   medidas en Vigo. Con `flex-end` el titulo de 42px se descolgaba hasta la
   ULTIMA linea de un parrafo de cinco y parecia caido; alineados por la
   primera linea de base, el titular abre y la nota le hace de entradilla, que
   es lo que es. Las otras dos cabeceras se quedan en `flex-end` a proposito:
   ahi el lado izquierdo es un bloque (cintillo + titulo) y alinear por su
   primera linea de base subiria la nota a la altura del cintillo. */
.lp-ed-firms__head {
  display: flex;
  /* LOS DOS TEXTOS EMPIEZAN A LA MISMA ALTURA. Con `baseline`, la nota
     arrancaba 20 px por debajo del titular (medido a 1440 el 2026-09-12): la
     linea base de una serif de 42 px y la de un parrafo de 15 no se pueden
     casar sin que el parrafo parezca caido. Alineados por arriba, la
     diferencia que queda es la del interlineado de cada uno, que son 3 px. */
  align-items: start;
  justify-content: space-between;
  gap: var(--lt-s-10);
  flex-wrap: wrap;
  margin-bottom: var(--lt-s-13);
}
.lp-ed-firms__title {
  flex: 1 1 420px;
  min-width: 0;
  font-family: var(--lp-ed-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--lt-ink);
}
/* La nota de metodo va al lado del titulo y no debajo: leerla ANTES de la
   primera entrada es el punto. Medida a 58ch y no a los 46ch del mockup: con
   46ch salen 420,9px y el texto real de Vigo (287 caracteres) ocupa CINCO
   lineas contra un titulo de una; a 58ch son 531px y bajan a cuatro, que es
   lo que equilibra el bloque. Siguen siendo ~72 caracteres por linea, muy por
   debajo de los ~104 de `.lp-prose`. */
.lp-ed-firms__note {
  flex: 1 1 360px;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lt-text-2);
  text-wrap: pretty;
}

/* --- Una entrada --- */

.lp-ed-firm {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  column-gap: var(--lt-s-13);          /* 40px */
  row-gap: var(--lt-s-6);
  align-items: start;
  padding-top: var(--lt-s-12);
  border-top: 1px solid var(--lt-border);
  scroll-margin-top: calc(var(--lt-header-h) + 24px);
}
.lp-ed-firm + .lp-ed-firm { margin-top: var(--lt-s-12); }
/* Todo hijo directo cae en la columna izquierda salvo `__main`, que ocupa la
   derecha. La plantilla mete rango, rotulo, foto y datos dentro de `__media`,
   asi que aqui hay DOS hijos y una sola fila: MEDIDO a 1440,
   `grid-template-rows` computa una unica pista de 512,19px con `__media` y
   `__main` arrancando los dos en la misma y.

   `grid-row: 1` y no `1 / -1`. Lo tuvo, y era un NO-OP silencioso: esta
   rejilla no declara `grid-template-rows`, y sin lineas de fila explicitas el
   `-1` resuelve a la linea 1 -- o sea que `1 / -1` no abarca nada. Aqui daba
   igual porque solo hay una fila, pero el mismo `1 / -1` en la firma del
   masthead SI hacia dano (ver `__byline-mark`), asi que no se deja escrito
   algo que promete un tramo que no existe.

   Si algun dia la plantilla emite el rango, el rotulo, la foto y los datos
   como hijos DIRECTOS, `__main` tendra que abarcar esas filas -- y entonces no
   basta con volver a poner `1 / -1`: hay que declarar antes
   `grid-template-rows` en este bloque y bajar su `row-gap` a 0 (hoy vale 14px,
   y cada fila vacia que se creara sumaria otros 14). */
.lp-ed-firm > * { grid-column: 1; min-width: 0; }
.lp-ed-firm__main { grid-column: 2; grid-row: 1; }

/* La columna de datos. `auto 1fr` con las filas de foto y datos a todo lo
   ancho: asi el numeral grande y el rotulo de rol comparten linea de base, que
   es la firma visual del mockup. */
.lp-ed-firm__media {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--lt-s-6);
  row-gap: var(--lt-s-6);
}
.lp-ed-firm__media > .lp-ed-firm__photo,
.lp-ed-firm__media > .lp-ed-firm__facts { grid-column: 1 / -1; }

/* El numeral. Va en el rojo de marca, y es la unica vez en toda la hoja que
   el rojo no es una accion. Se hace a proposito y contra la costumbre del
   sistema (regla 6: el rojo es para acciones): es LA decision de composicion
   del mockup que aprobo el titular, son tres glifos en toda la pagina, y el
   contrato §6 mapea ese #C3382C exactamente a --lt-primary. */
.lp-ed-firm__rank {
  font-family: var(--lp-ed-serif);
  font-weight: 400;
  font-size: clamp(38px, 3.8vw, 54px);
  line-height: 1;
  color: var(--lt-primary);
}
.lp-ed-firm__role {
  font-family: var(--lt-font-head);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  color: var(--lt-text-muted);
}

/* La foto. `aspect-ratio` en vez de alto fijo porque la columna es fluida,
   pero el alto sigue saliendo del CSS y no del atributo: `figure,img
   {height:auto}` del tema anula el atributo `height`, y por eso las doce
   fotos del articulo v1 median doce cosas distintas.
   `object-position` al 35% y no centrado: son fotos de despacho y de persona
   recortadas de cuadrado a 4/3, y centrar corta cabezas. */
.lp-ed-firm__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--lt-r-sm);
  object-fit: cover;
  object-position: 50% 35%;
  background: var(--lt-ph-pattern);
}

/* Los datos duros: ZONA, EQUIPO, IDIOMAS, HORARIO. Filas etiqueta/valor con
   filete, no una tabla: una tabla real a 350px no cabe (contrato §7). */
.lp-ed-firm__facts { display: grid; row-gap: var(--lt-s-3); }
.lp-ed-firm__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lt-s-5);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--lt-divider);
}
.lp-ed-firm__fact-k {
  flex: none;
  font-family: var(--lt-font-head);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
  color: var(--lt-text-muted);
}
.lp-ed-firm__fact-v {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: right;
  color: var(--lt-text-2);
}

/* La procedencia de un dato que NO sale de la ficha, sino de la web del propio
   despacho (lo rellena el enriquecimiento cuando la ficha viene vacia).
   Deliberadamente discreta y en peso normal: es una nota al valor, no otro
   dato -- pero tiene que verse, porque distingue lo que el despacho dice de si
   mismo de lo que nosotros tenemos registrado. `--lt-text-muted` y no
   `--lt-text-faint`, que esta prohibido como color de texto (no pasa AA). */
.lp-ed-firm__fact-src {
  font-weight: 400;
  font-size: 11px;
  color: var(--lt-text-muted);
  white-space: nowrap;
}

/* --- La columna de texto --- */

/* Grid de dos columnas para que LLAMALO SI / MEJOR OTRO SI queden en paralelo
   sin envoltorio (el inventario §10 los declara como modificadores de
   `__fit`, o sea que son hermanos). Todo lo demas ocupa el ancho entero. */
.lp-ed-firm__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--lt-s-8);
  row-gap: var(--lt-s-6);
  align-content: start;
}
.lp-ed-firm__main > * { grid-column: 1 / -1; min-width: 0; }

.lp-ed-firm__name {
  font-family: var(--lp-ed-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.12;
  letter-spacing: -.01em;
}
/* El nombre hereda la tinta del titular para no romper la inmunidad
   `h1..h6 {color: inherit}` del DS, que esta puesta a proposito. */
a.lp-ed-firm__link { color: inherit; }
a.lp-ed-firm__link:hover { color: var(--lt-primary); }

.lp-ed-firm__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--lt-s-5) var(--lt-s-6);
  margin-top: calc(var(--lt-s-2) * -1);
}
.lp-ed-firm__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--lt-s-2);
  font-size: 14px;
  color: var(--lt-text-2);
}
/* La estrella es decoracion y la plantilla la marca `aria-hidden` (misma
   convencion que `.lt-diamond`); la nota la lee el lector en el texto. */
.lp-ed-firm__rating [aria-hidden="true"] { color: var(--lt-star); }
.lp-ed-firm__rating strong,
.lp-ed-firm__rating b { font-weight: 700; color: var(--lt-ink); }

.lp-ed-firm__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lt-s-2);
}
/* Etiqueta cuadrada y no pildora. El sistema tiene `.lt-chip` (radio 999), y
   se usa arriba en el listado; aqui la del mockup es rectangular a proposito,
   para que un `featured_service` no se lea como un filtro clicable. Radio 6
   (--lt-r-badge), que es el token mas pequeno del sistema y el que mas se
   acerca a los 7px del mockup. */
.lp-ed-firm__tag {
  display: inline-block;
  padding: 6px 9px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-badge);
  background: var(--lt-divider);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--lt-text-2);
}

/* Los dos parrafos. El primero manda: mas grande, mas oscuro. El segundo es
   el matiz. Medida en `ch` y no en px porque la columna es fluida. */
.lp-ed-firm__p {
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--lt-text-2);
  text-wrap: pretty;
}
.lp-ed-firm__p:first-of-type {
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.65;
  color: var(--lt-ink-soft);
}

/* LLAMALO SI / DESTACA EN. Filete de color a la izquierda, como el mockup.
   DESTACA EN ocupa el hueco --y la clase `--no`-- que dejo MEJOR OTRO SI al
   retirarse (decision del titular, 2026-09-06). Sigue en GRIS y no en un color
   de refuerzo: lo que dice es QUE ASUNTOS trata, no lo bien que los trata, y
   pintarlo de verde o de oro seria un elogio dibujado, que §4 prohibe igual
   que el escrito.

   El bloque son dos lineas dentro del MISMO `__fit-v` -- el titular en
   `<strong>` y el detalle detras --, y no dos elementos con clase propia: el
   inventario de clases del contrato §10 es CERRADO y nadie inventa una.
   El selector va por elemento, que no cuenta como clase nueva. */
.lp-ed-firm__fit {
  padding-left: var(--lt-s-6);
  border-left: 2px solid var(--lt-border);
}
.lp-ed-firm__fit--yes { grid-column: 1; border-left-color: var(--lp-ed-yes); }
.lp-ed-firm__fit--no  { grid-column: 2; border-left-color: var(--lt-border); }
.lp-ed-firm__fit-k {
  display: block;
  margin-bottom: var(--lt-s-1);
  font-family: var(--lt-font-head);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1em;
}
.lp-ed-firm__fit--yes .lp-ed-firm__fit-k { color: var(--lp-ed-yes); }
.lp-ed-firm__fit--no  .lp-ed-firm__fit-k { color: var(--lt-text-muted); }
.lp-ed-firm__fit-v {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lt-text-2);
}
/* La primera linea de DESTACA EN: el tipo de cliente o de situacion. Va en la
   serif de los titulares y en tinta plena porque es lo que el ojo tiene que
   coger de un vistazo; el detalle, debajo, en el gris del resto. */
.lp-ed-firm__fit--no .lp-ed-firm__fit-v strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--lp-ed-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--lt-ink);
}

/* UN solo boton, "Consultar", enganchado al flujo de leads que ya funciona.
   Nada de "Ver telefono" aparte (contrato §3.2). Mismas medidas que
   `.lt-btn--primary` del DS (15px/700, 13x26, radio 12) para que sea el mismo
   boton del sitio aunque la plantilla no le ponga la clase del sistema. */
a.lp-ed-firm__cta,
button.lp-ed-firm__cta,
.lp-ed-firm__cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lt-s-3);
  min-height: 44px;
  margin-top: var(--lt-s-3);
  padding: 13px 26px;
  border: none;
  border-radius: var(--lt-r-sm);
  background: var(--lt-primary);
  color: var(--lt-surface);
  font-family: var(--lt-font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease;
}
a.lp-ed-firm__cta:hover,
button.lp-ed-firm__cta:hover,
.lp-ed-firm__cta:hover {
  background: var(--lt-primary-hover);
  color: var(--lt-surface);
}


/* ==========================================================================
   5. MAS ABOGADOS  (contrato §3.3)
   ========================================================================== */

.lp-ed-more { padding-block: var(--lt-s-15) var(--lt-s-14); }

.lp-ed-more__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--lt-s-10);
  flex-wrap: wrap;
  margin-bottom: var(--lt-s-10);
}
.lp-ed-more__eyebrow {
  display: block;
  margin-bottom: var(--lt-s-4);
  font-family: var(--lt-font-head);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
  color: var(--lt-primary);
}
.lp-ed-more__title {
  flex: 1 1 420px;
  min-width: 0;
  font-family: var(--lp-ed-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--lt-ink);
}
/* Control de orden: Relevancia · Cercania · Abiertos ahora. Sin "Valoracion"
   (contrato §3.3): no se ordena por merito a quien podemos cobrar. */
.lp-ed-more__sort {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: var(--lt-r-ctl);
  background: var(--lt-divider);
}
a.lp-ed-more__sort-btn,
button.lp-ed-more__sort-btn,
.lp-ed-more__sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 var(--lt-s-6);
  border: none;
  border-radius: var(--lt-r-ctl-sm);
  background: transparent;
  font-family: var(--lt-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--lt-text-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
a.lp-ed-more__sort-btn:hover,
button.lp-ed-more__sort-btn:hover,
.lp-ed-more__sort-btn:hover { color: var(--lt-ink); }
.lp-ed-more__sort-btn--on,
a.lp-ed-more__sort-btn--on,
button.lp-ed-more__sort-btn--on {
  background: var(--lt-surface);
  color: var(--lt-ink);
}

/* 260px de minimo y no los 280 del mockup: nuestro contenedor tiene 1136px de
   contenido y el suyo 1192. Con 280 salian TRES columnas de 368px; con 260
   salen las CUATRO del mockup, a 272px cada una. */
.lp-ed-more__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--lt-s-7);
  margin-bottom: var(--lt-s-10);
}

/* Tarjeta. Blanca sobre la crema de pagina, borde de 1px y radio 16, que es lo
   que hace `.lt-lawyer-card`: es el mismo objeto y no puede tener dos pieles.
   La fila 4 es `1fr` para que el boton quede abajo del todo en todas las
   tarjetas de una misma fila aunque el texto sea mas corto. */
.lp-ed-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: min-content min-content min-content 1fr;
  grid-auto-rows: min-content;
  row-gap: var(--lt-s-4);
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-lg);
  padding: var(--lt-lawyer-pad);
  transition: border-color .15s ease;
}
/* El gesto de hover del sistema: cambia el borde. Sin transform, sin escala,
   sin sombra. */
.lp-ed-card:hover { border-color: var(--lt-primary); }
.lp-ed-card > * { grid-column: 1 / -1; min-width: 0; }
/* El margen derecho va en la foto y no en `column-gap`: si la ficha no tiene
   foto propia, la columna `auto` colapsa a 0 y no queda un hueco fantasma. */
.lp-ed-card__photo {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  display: block;
  width: 70px;
  height: 70px;
  margin-right: var(--lt-s-5);
  border-radius: var(--lt-r-xs);
  object-fit: cover;
  background: var(--lt-ph-pattern);
}
.lp-ed-card__name {
  grid-column: 2;
  /* Sin el margen que el sistema le pone a un `h3`: entre el nombre y la
     valoracion salian 26 px y en el resto de la tarjeta hay 8 (medido el
     2026-09-12). El aire de la tarjeta lo pone `row-gap`, no los margenes. */
  margin: 0;
  font-family: var(--lp-ed-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
}
.lp-ed-card__name a { color: inherit; }
.lp-ed-card__name a:hover { color: var(--lt-primary); }
.lp-ed-card__rating {
  grid-column: 2;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--lt-s-1);
  font-size: 13px;
  color: var(--lt-text-2);
}
.lp-ed-card__rating [aria-hidden="true"] { color: var(--lt-star); }
.lp-ed-card__rating strong,
.lp-ed-card__rating b { font-weight: 700; color: var(--lt-ink); }
.lp-ed-card__dist {
  grid-column: 2;
  font-family: var(--lt-font-head);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--lt-text-muted);
}
.lp-ed-card__blurb {
  font-size: 13px;
  line-height: 1.55;
  color: var(--lt-text-2);
  text-wrap: pretty;
}
.lp-ed-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lt-s-2);
}
.lp-ed-card__tag {
  display: inline-block;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-badge);
  background: var(--lt-divider);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--lt-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Estado (contrato §12.1). El punto de color solo aparece con modificador: la
   clase base no lo pinta. Es deliberado -- un punto verde fijo mentiria en las
   fichas cerradas, y sin `open_hours` la plantilla no emite el elemento
   siquiera, asi que no hay un tercer estado que colorear.
   El color NO es el unico portador de la informacion: el rotulo dice "Abierto
   ahora" o "Cerrado", que es lo que exige WCAG 1.4.1. Por eso los dos estados
   comparten la tinta legible (--lt-text-muted, 5,21:1 sobre blanco) y lo unico
   que cambia es el punto, que es decorativo. */
.lp-ed-card__status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--lt-font-head);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .04em;
  color: var(--lt-text-muted);
}
.lp-ed-card__status--open::before,
.lp-ed-card__status--closed::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--lt-r-pill);
}
.lp-ed-card__status--open::before { background: var(--lt-open); }
/* --lt-text-faint esta prohibido como color de TEXTO (2,29:1), pero esto es un
   punto decorativo de 7px cuyo significado ya lo lleva la palabra al lado:
   misma excepcion que el "/" de la miga de pan. */
.lp-ed-card__status--closed::before { background: var(--lt-text-faint); }
a.lp-ed-card__cta,
button.lp-ed-card__cta,
.lp-ed-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: var(--lt-s-1);
  padding: var(--lt-s-6) var(--lt-s-9);
  border: none;
  border-radius: var(--lt-r-ctl);
  background: var(--lt-primary);
  color: var(--lt-surface);
  font-family: var(--lt-font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease;
}
a.lp-ed-card__cta:hover,
button.lp-ed-card__cta:hover,
.lp-ed-card__cta:hover {
  background: var(--lt-primary-hover);
  color: var(--lt-surface);
}
.lp-ed-card__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--lt-s-5);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--lt-text-2);
}
.lp-ed-card__links a { color: var(--lt-text-2); text-decoration: underline; }
.lp-ed-card__links a:hover { color: var(--lt-primary); }

/* Barra de transparencia + paginacion. El paginado ocurre AQUI (contrato
   §3.3): ni recarga ni cambia de URL, asi que el boton se queda dentro de la
   barra y la rejilla no se mueve de sitio. */
.lp-ed-more__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lt-s-8);
  padding: var(--lt-s-7) var(--lt-s-8);
  background: var(--lp-ed-panel);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-sm);
  font-size: 13px;
  line-height: 1.55;
  color: var(--lt-text-2);
}
/* El aviso de transparencia no lleva clase propia en el inventario §10, asi
   que se coloca por posicion. Sin esto ocupaba el 100% y empujaba la
   paginacion a una segunda linea, que es justo lo que el mockup evita. */
.lp-ed-more__bar > * { flex: 1 1 420px; min-width: 0; max-width: 78ch; }
.lp-ed-more__pager {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--lt-s-3);
}
a.lp-ed-more__pager-btn,
button.lp-ed-more__pager-btn,
.lp-ed-more__pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--lt-s-8);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-ctl);
  background: var(--lt-surface);
  font-family: var(--lt-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--lt-ink);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
a.lp-ed-more__pager-btn:hover,
button.lp-ed-more__pager-btn:hover,
.lp-ed-more__pager-btn:hover {
  border-color: var(--lt-primary);
  color: var(--lt-primary);
}
.lp-ed-more__pager-btn[disabled],
.lp-ed-more__pager-btn[aria-disabled="true"] {
  color: var(--lt-text-muted);
  cursor: default;
}


/* ==========================================================================
   6. PROBLEMAS  (contrato §3.4)
   ==========================================================================
   Banda oscura, rejilla de filete de un pixel.

   El truco del mockup -- `gap:1px` con el fondo del contenedor haciendo de
   filete -- NO se copia: con `auto-fill`, una ultima fila incompleta deja el
   fondo del contenedor a la vista como un rectangulo claro (los problemas de
   una especialidad son 62 y aqui caben los que quepan, o sea que la ultima
   fila casi nunca esta completa). Aqui el filete lo dibujan las CELDAS con
   `border-top` + `border-left`, y el contenedor cierra por la derecha y por
   abajo: marco completo, cero rectangulo fantasma.
   ========================================================================== */

.lp-ed-problems {
  background: var(--lt-ink);
  padding-block: var(--lt-s-15) var(--lt-s-15);
  color: var(--lt-on-dark);
}

.lp-ed-problems__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--lt-s-13);
  flex-wrap: wrap;
  margin-bottom: var(--lt-s-12);
}
/* Sobre fondo oscuro el rojo de marca cambia a --lt-primary-light: es la
   regla del sistema (--lt-primary sobre --lt-ink no llega a AA). */
.lp-ed-problems__eyebrow {
  display: block;
  margin-bottom: var(--lt-s-5);
  font-family: var(--lt-font-head);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
  color: var(--lt-primary-light);
}
.lp-ed-problems__title {
  flex: 1 1 460px;
  min-width: 0;
  font-family: var(--lp-ed-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--lt-surface);
}
.lp-ed-problems__note {
  flex: 1 1 300px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lt-on-dark);
  text-wrap: pretty;
}

.lp-ed-problems__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  border-right: 1px solid var(--lt-dark-border);
  border-bottom: 1px solid var(--lt-dark-border);
  border-radius: var(--lt-r-md);
  overflow: hidden;
}
a.lp-ed-problem,
.lp-ed-problem {
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-3);
  padding: var(--lt-s-9) var(--lt-s-9);
  border-top: 1px solid var(--lt-dark-border);
  border-left: 1px solid var(--lt-dark-border);
  background: var(--lt-ink);
  transition: background-color .15s ease;
}
a.lp-ed-problem:hover,
.lp-ed-problem:hover { background: var(--lt-dark-surface); }
/* Decorativo y `aria-hidden` en la plantilla: --lt-on-dark-faint no es color
   de texto legible, pero si de un numero de orden que nadie tiene que leer. */
.lp-ed-problem__n {
  font-family: var(--lt-font-head);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--lt-on-dark-faint);
}
.lp-ed-problem__title {
  font-family: var(--lp-ed-serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  color: var(--lt-surface);
}
.lp-ed-problem__text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--lt-on-dark-muted);
  text-wrap: pretty;
}
.lp-ed-problem__more {
  margin-top: auto;
  padding-top: var(--lt-s-1);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--lt-primary-light);
}

/* "Ver los 62 problemas de mercantil". Mercantil tiene 62 y el sitio 12.572:
   en la rejilla caben los mas buscados y el resto vive en su propia pagina. */
a.lp-ed-problems__all,
.lp-ed-problems__all {
  display: inline-flex;
  align-items: center;
  gap: var(--lt-s-3);
  min-height: 44px;
  margin-top: var(--lt-s-10);
  font-size: 14px;
  font-weight: 700;
  color: var(--lt-primary-light);
}
a.lp-ed-problems__all:hover { color: var(--lt-surface); }



/* ==========================================================================
   7. SIGUE BUSCANDO  (contrato §3.5)
   ========================================================================== */

.lp-ed-links { padding-block: var(--lt-s-15) var(--lt-s-15); }

.lp-ed-links__title {
  margin-bottom: var(--lt-s-11);
  font-family: var(--lp-ed-serif);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--lt-ink);
}
.lp-ed-links__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--lt-s-13);
}
.lp-ed-links__group { min-width: 0; }
/* Rombo de marca en vez del punto redondo del mockup: el adorno de seccion de
   este sitio es el rombo (`.lt-diamond`), no una linea ni un circulo. Se pinta
   con ::before para no depender de que la plantilla meta el `<span>`. */
.lp-ed-links__group-title {
  display: flex;
  align-items: center;
  gap: var(--lt-s-4);
  padding-bottom: var(--lt-s-4);
  border-bottom: 1px solid var(--lt-border);
  font-family: var(--lt-font-head);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1em;
  color: var(--lt-ink);
}
.lp-ed-links__group-title::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--lt-primary);
  transform: rotate(45deg);
}
.lp-ed-links__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lt-s-5);
  padding: var(--lt-s-3) 0;
  border-bottom: 1px solid var(--lt-divider);
}
.lp-ed-links__item a {
  min-width: 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--lt-ink);
}
.lp-ed-links__item a:hover { color: var(--lt-primary); }
.lp-ed-links__item-n {
  flex: none;
  font-family: var(--lt-font-head);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--lt-text-muted);
}


/* ==========================================================================
   8. PIE DEL ARTICULO
   ==========================================================================
   Se conserva literal el de `_editorial_article.html` (contrato §3.6), con su
   clase de siempre. Se redeclara aqui, y no se hereda de page-landing.css,
   porque la plantilla del brazo tratado puede no cargar esa hoja: si la carga,
   esta va despues y gana; si no, el pie sigue estilado igual.
   --lt-text-muted y no --lt-text-faint: ese no pasa AA.
   ========================================================================== */

.lp-editorial__disclaimer {
  max-width: var(--lt-container);
  margin: 0 auto;
  padding: var(--lt-s-9) var(--lt-gutter) var(--lt-s-14);
  border-top: 1px solid var(--lt-divider);
  font-size: var(--lt-fs-xs);
  line-height: 1.6;
  color: var(--lt-text-muted);
}


/* ==========================================================================
   9. MOVIL — max-width: 768px
   ==========================================================================
   "Importante que el mobile sea hermoso tambien" (el titular, literal). Se
   diseno a 390px primero y se comprobo tambien a 360. UN solo breakpoint, que
   es como esta escrito todo el sistema; los tamanos de titular no se fijan,
   siguen en `clamp()` medido.
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Masthead: una columna, y el aparte DESPUES del texto --- */
  .lp-ed-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    padding-block: var(--lt-s-9) var(--lt-s-12);
  }
  .lp-ed-head > *,
  .lp-ed-head__byline,
  .lp-ed-head__stats,
  .lp-ed-head__aside {
    grid-column: 1;
    grid-row: auto;
  }
  /* MEDIDO en la pagina servida: a 390px la miga de pan cerraba en y=103 y el
     cintillo abria en y=103 -- CERO de hueco, y como los dos arrancan en la
     misma sangria (x=20) y el cintillo lleva su rayita roja delante, se leian
     como una sola linea rota. En escritorio hay 22px y se ve bien.
     La perdida no es mia: la miga vive DENTRO de este grid como primer hijo, y
     su separacion la pone `legaltica-ds.css:1170` con `margin-bottom: 22px`
     ... que la linea 2369 del mismo fichero, ya dentro de
     `@media (max-width: 768px)`, pone a 0. Tiene sentido para el brazo de
     control, donde detras de la miga viene `.lp-head` con su propio padding;
     aqui detras viene mi cintillo, que no tenia ninguno.
     La miga es compartida con todo el sitio y no se toca, asi que el espacio
     lo pongo desde mi lado y SOLO en movil: en escritorio los 22px del DS ya
     estan bien y sumarles algo los estropearia. 16px es el mismo salto que el
     sistema aplica al bajar de tamano (gutter 32->20, card-pad 28->20,
     section-y 48->32: ~0,7). Resultado medido: 0px -> 16px. */
  .lp-ed-head__eyebrow { margin-top: var(--lt-s-7); margin-bottom: var(--lt-s-5); }
  .lp-ed-head__h1   { margin-bottom: var(--lt-s-7); }
  .lp-ed-head__lead { margin-bottom: var(--lt-s-9); }

  /* La firma pasa arriba y las cifras debajo, a tres columnas iguales. En una
     sola fila con el filete vertical no caben: a 360px la firma se lleva
     190px y a las tres cifras les quedan 130. */
  .lp-ed-head__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lt-s-5);
    margin-top: var(--lt-s-8);
    padding-left: 0;
    padding-top: var(--lt-s-8);
    border-left: none;
    border-top: 1px solid var(--lt-divider);
  }
  .lp-ed-head__stat-n { font-size: 24px; }

  /* EL INDICE NO SE PINTA EN MOVIL (titular, 2026-09-13). Medido a 390 px:
     ocupaba de 300 a 385 px -- casi media pantalla -- entre las cifras y el
     primer abogado, que quedaba a 1,9 pantallas. Lo que se busca ahi es el
     listado, y para eso esta la barra «Ver abogados de <materia>» de abajo.
     Plegarlo en vez de quitarlo pedia cerrarlo por JS al cargar (la pagina
     saltaba 300 px) o un script en linea en HTML cacheado (ver el docstring
     de middleware/csp.py). En escritorio va en su columna y no cuesta scroll. */
  .lp-ed-head__aside { display: none; }
  .lp-ed-cta { padding: var(--lt-s-9); margin-block: var(--lt-s-12); }
  .lp-ed-cta__title { font-size: 21px; }
  .lp-ed-cta__button { width: 100%; }

  /* --- Destacados --- */
  .lp-ed-firms    { padding-block: var(--lt-s-13) var(--lt-s-13); }
  .lp-ed-firms__head { gap: var(--lt-s-6); margin-bottom: var(--lt-s-10); }
  .lp-ed-firms__title,
  .lp-ed-firms__note { flex: 1 1 100%; }

  /* La cabecera de despacho apila, pero NO en el orden del arbol: primero
     QUIEN ES (numeral y rol, nombre, nota y etiquetas), luego la cara, luego
     lo que hace, y los datos de contacto y horario AL FINAL, que es cuando ya
     se sabe de quien se esta leyendo. Contrato §7.

     POR QUE HAY QUE HACER ALGO. Apilando tal cual, `__media` entero cae
     delante de `__main`, y eso pone DIRECCION, EQUIPO, IDIOMAS y HORARIO de
     un despacho cuyo nombre todavia no ha aparecido. MEDIDO a 390px antes de
     esto: la tabla de datos abria en y=1627 y el nombre en y=1785 -- 158px de
     datos de un desconocido. En escritorio no se nota porque `__media` y
     `__main` son dos columnas y el nombre arranca a la altura del numeral.

     COMO SE ARREGLA SIN TOCAR EL MARCADO. El orden que se quiere INTERCALA
     los dos contenedores tres veces (rango/rol -> nombre -> foto -> parrafos
     -> datos), asi que `order` sobre los dos hijos directos no llega: hay que
     aplanar un nivel. `display: contents` borra la caja de `__media` y
     `__main` sin borrarlos del arbol, sus hijos pasan a ser items de la
     rejilla de `.lp-ed-firm`, y ahi ya se ordenan uno a uno. Es el mismo
     recurso que `.lt-panel__body` en page-home.css y `.ps-panel-tristate` en
     page-static.css, o sea que no se estrena nada aqui.

     Los dos son `<div>` sin papel semantico: `display: contents` no le quita
     nada al arbol de accesibilidad. El bug historico (Safari <15.4, Chrome
     <89) se comia el papel de listas, tablas y botones -- no el de un div
     pelado, que no tiene ninguno.

     LO QUE ESTO NO ARREGLA, Y HAY QUE SABERLO: `order` cambia el orden
     VISUAL, nunca el del DOM. El lector de pantalla y el tabulador siguen
     leyendo rango, rol, foto, datos, nombre... Pero eso ya pasa HOY y en
     TODOS los anchos, escritorio incluido, porque el orden asistido sale del
     arbol y ahi `__media` va primero: esto no lo empeora, solo deja de
     empeorarlo tambien a la vista. El arreglo de verdad es que la plantilla
     emita la identidad antes que los datos, y eso lo congelan el contrato
     §10 y `TestLaEstructuraQueElCssDaPorHecha`. */
  .lp-ed-firm {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--lt-s-6);
    row-gap: var(--lt-s-6);
    padding-top: var(--lt-s-11);
  }
  .lp-ed-firm + .lp-ed-firm { margin-top: var(--lt-s-11); }
  .lp-ed-firm__media,
  .lp-ed-firm__main { display: contents; }
  /* Aplanados los dos, todo ocupa el ancho entero menos el numeral y el
     rotulo de rol, que comparten la primera linea y su linea de base igual
     que en escritorio (alli el `align-items: baseline` lo ponia `__media`,
     que aqui ya no tiene caja). */
  .lp-ed-firm__media > *,
  .lp-ed-firm__main > * { grid-column: 1 / -1; grid-row: auto; }
  .lp-ed-firm__rank { grid-column: 1; align-self: baseline; }
  .lp-ed-firm__role { grid-column: 2; align-self: baseline; }

  /* El orden de escritorio traducido a una columna. Los valores van seguidos
     y sin huecos a proposito: se leen como la lista que son. Los `__p`
     comparten el suyo y conservan entre ellos el orden del arbol, y lo mismo
     `__fit--yes` y `__fit--no` -- que asi apilan solos, cada uno con su
     filete de color, sin necesidad de colocarlos a mano. */
  .lp-ed-firm__rank,
  .lp-ed-firm__role  { order: 1; }
  .lp-ed-firm__name  { order: 2; }
  .lp-ed-firm__meta  { order: 3; }
  .lp-ed-firm__photo { order: 4; }
  .lp-ed-firm__p     { order: 5; }
  .lp-ed-firm__facts { order: 6; }
  .lp-ed-firm__fit   { order: 7; }
  .lp-ed-firm__cta   { order: 8; }

  /* 16/9 y no 4/3: a 350px de ancho una foto 4/3 mide 262px de alto y se come
     media pantalla. El `margin-block` repone el aire que se perdio al
     aplanar: el hueco entre `__media` y `__main` eran 20px y ahora todo corre
     al ritmo de 14px, asi que la foto -- que es lo unico que no es texto en
     mitad del bloque -- se separa 8px mas por arriba y por abajo. */
  .lp-ed-firm__photo { aspect-ratio: 16 / 9; margin-block: var(--lt-s-3); }

  /* LA TABLA DE DATOS, COMO UNA FICHA TECNICA (titular, 12-09). Estaba en dos
     columnas de etiqueta sobre valor, y se veia mal: la direccion ocupaba
     tres lineas en media pantalla, y el valor de la celda de al lado --«4
     personas»-- caia al fondo de la suya, porque el `space-between` de la
     regla base, en columna, reparte el alto de la fila; y el filete salia
     cortado, uno por celda. Ahora es una columna de filas: la etiqueta en una
     pista fija, el valor en el resto, alineados por la primera linea. Un valor
     como "ES · GL · EN · PT · FR" (130px) cabe de sobra, que era el motivo de
     las dos columnas, y la direccion parte en dos lineas junto a su etiqueta.
     Separada del texto por el mismo motivo que la foto: cierra el bloque. */
  .lp-ed-firm__facts {
    grid-template-columns: none;
    row-gap: 0;
    margin-top: var(--lt-s-3);
    border-top: 1px solid var(--lt-divider);
  }
  .lp-ed-firm__fact {
    display: grid;
    grid-template-columns: 5.75rem minmax(0, 1fr);
    justify-content: start;
    align-items: baseline;
    column-gap: var(--lt-s-5);
    padding-block: var(--lt-s-3);
  }
  .lp-ed-firm__fact-v { font-size: 14px; text-align: left; }

  /* Boton a lo ancho y area de toque de 44px. */
  .lp-ed-firm__cta { justify-self: stretch; width: 100%; }

  /* --- Mas abogados --- */
  .lp-ed-more { padding-block: var(--lt-s-13) var(--lt-s-12); }
  .lp-ed-more__head { gap: var(--lt-s-8); margin-bottom: var(--lt-s-9); }
  .lp-ed-more__title { flex: 1 1 100%; }
  .lp-ed-more__sort { width: 100%; }
  /* Tres opciones a 350px: "Relevancia" + "Cercania" caben en una linea y
     "Abiertos ahora" baja. Cada una a 44px de alto -- el selector de elemento
     tiene que repetirse aqui: la regla base ya es (0,1,1) por el mismo motivo
     de `.lt a`, y una clase sola no le gana (medido: se quedaba en 38px). */
  a.lp-ed-more__sort-btn,
  button.lp-ed-more__sort-btn,
  .lp-ed-more__sort-btn { min-height: 44px; flex: 1 1 auto; }
  .lp-ed-more__grid { grid-template-columns: minmax(0, 1fr); gap: var(--lt-s-5); }
  .lp-ed-more__bar { gap: var(--lt-s-6); padding: var(--lt-s-7); }
  .lp-ed-more__pager { width: 100%; }
  .lp-ed-more__pager-btn { flex: 1; }

  /* --- Problemas: una columna (contrato §7) --- */
  .lp-ed-problems { padding-block: var(--lt-s-13) var(--lt-s-13); }
  .lp-ed-problems__head { gap: var(--lt-s-6); margin-bottom: var(--lt-s-10); }
  .lp-ed-problems__title,
  .lp-ed-problems__note { flex: 1 1 100%; }
  .lp-ed-problems__grid { grid-template-columns: minmax(0, 1fr); }
  a.lp-ed-problem,
  .lp-ed-problem { padding: var(--lt-s-8); }
  .lp-ed-problem__title { font-size: 19px; }

  /* --- Sigue buscando --- */
  .lp-ed-links { padding-block: var(--lt-s-13) var(--lt-s-13); }
  .lp-ed-links__title { margin-bottom: var(--lt-s-9); }
  .lp-ed-links__grid  { grid-template-columns: minmax(0, 1fr); gap: var(--lt-s-11); }
  /* 44px de area de toque por enlace: son la lista mas densa de la pagina. */
  .lp-ed-links__item { padding: var(--lt-s-4) 0; min-height: 44px; }

  .lp-editorial__disclaimer { padding-bottom: var(--lt-s-12); }
}


/* ==========================================================================
   10. AJUSTE DE 360px
   ==========================================================================
   No es un segundo breakpoint de layout: a 360px la caja de contenido baja de
   350 a 320px y solo el titular y el nombre de despacho lo notan. `clamp()`
   con vw ya los baja, pero su MINIMO estaba calibrado para 390. Aqui se baja
   ese minimo y nada mas.
   ========================================================================== */

@media (max-width: 400px) {
  .lp-ed-head__h1    { font-size: clamp(30px, 9vw, 34px); }
  .lp-ed-firm__name  { font-size: clamp(21px, 6.6vw, 24px); }
  .lp-ed-firm__rank  { font-size: 34px; }
  .lp-ed-firms__title,
  .lp-ed-more__title,
  .lp-ed-problems__title { font-size: clamp(24px, 7.6vw, 28px); }
}


/* ==========================================================================
   1bis · LA GUÍA  (inventario §10.2)
   ========================================================================== */

/* El único color que el sistema no tiene: el panel cálido del mockup.
   Declarado UNA vez, como manda §6. */
.lp-ed-guide { --lp-ed-warm: #F5F2EC; }

.lp-ed-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  grid-template-areas: "head  head"
                       "body  aside";
  column-gap: 52px;
  row-gap: 14px;
  /* El MISMO contenedor que `__head`, `__more` y `__links` (seccion 2). Tenia
     1240 + 24 de padding propio y arrancaba 28 px a la izquierda de todo lo
     demas (medido a 1440: 124 frente a 152). */
  max-width: var(--lt-container);
  margin: 0 auto;
  width: 100%;
  padding: 58px var(--lt-gutter) 64px;
}
.lp-ed-guide__head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lt-border);
}
.lp-ed-guide__eyebrow {
  margin: 0;
  font-family: var(--lt-font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--lt-primary);
}
.lp-ed-guide__title {
  margin: 0;
  font-family: var(--lp-ed-serif, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--lt-ink);
  max-width: 26ch;
}
.lp-ed-guide__deck {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--lt-text-2);
}

.lp-ed-guide__body { grid-area: body; min-width: 0; }
.lp-ed-guide__section {
  padding: 30px 0;
  border-bottom: 1px solid var(--lt-divider);
}
.lp-ed-guide__n {
  margin: 0;
  font-family: var(--lp-ed-serif, 'Instrument Serif', Georgia, serif);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1;
  color: var(--lt-primary);
}
.lp-ed-guide__section-title {
  margin: 6px 0 14px;
  font-family: var(--lp-ed-serif, 'Instrument Serif', Georgia, serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 33px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--lt-ink);
}
.lp-ed-guide__p {
  margin: 0 0 14px;
  max-width: 66ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--lt-text-2);
}
.lp-ed-guide__p:last-child { margin-bottom: 0; }

/* La tabla de «qué mirar antes de contactar». */
.lp-ed-guide__list {
  margin-top: 6px;
  background: var(--lp-ed-warm);
  border: 1px solid var(--lt-border);
  border-radius: 14px;
  padding: 6px 20px 14px;
}
.lp-ed-guide__list-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  column-gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--lt-divider);
}
.lp-ed-guide__list-row:last-child { border-bottom: 0; }
.lp-ed-guide__list-k {
  grid-row: span 2;
  font-family: var(--lt-font-head);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--lt-text-muted);
  padding-top: 2px;
}
.lp-ed-guide__list-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: var(--lt-ink);
}
.lp-ed-guide__list-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--lt-text-muted);
}

/* --- La columna lateral --- */
.lp-ed-guide__aside {
  grid-area: aside;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: flex-start;
  position: sticky;
  top: 86px;
}
.lp-ed-guide__index,
.lp-ed-guide__method,
.lp-ed-guide__stats {
  background: var(--lp-ed-warm);
  border: 1px solid var(--lt-border);
  border-radius: 16px;
  padding: 22px;
}
.lp-ed-guide__stats { background: var(--lt-canvas); }
.lp-ed-guide__index-title,
.lp-ed-guide__method-title,
.lp-ed-guide__stats-title {
  margin: 0 0 12px;
  font-family: var(--lt-font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--lt-text-muted);
}
.lp-ed-guide__index-item {
  display: flex;
  gap: 11px;
  align-items: baseline;
  padding-top: 9px;
  margin-top: 9px;
  border-top: 1px solid var(--lt-divider);
}
.lp-ed-guide__index-n {
  font-family: var(--lt-font-head);
  font-size: 12px;
  color: var(--lt-text-muted);
}
.lp-ed-guide__index-item a {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--lt-ink);
  text-decoration: none;
}
.lp-ed-guide__index-item a:hover { text-decoration: underline; }

.lp-ed-guide__method-item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--lt-divider);
  font-size: 14px;
  line-height: 1.55;
  color: var(--lt-text-2);
}
.lp-ed-guide__method-n {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--lt-ink);
  color: #fff;
  font-family: var(--lt-font-head);
  font-size: 11px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
}

.lp-ed-guide__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  margin-top: 9px;
  border-top: 1px solid var(--lt-divider);
}
.lp-ed-guide__stat-k {
  font-size: 13px;
  line-height: 1.4;
  color: var(--lt-text-muted);
  max-width: 22ch;
}
.lp-ed-guide__stat-v {
  font-family: var(--lp-ed-serif, 'Instrument Serif', Georgia, serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--lt-ink);
}

/* --- Móvil (§7): a 390 px y comprobado a 360 --- */
@media (max-width: 900px) {
  .lp-ed-guide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "body" "aside";
    padding: 40px var(--lt-gutter) 44px;
    row-gap: 18px;
  }
  /* El panel deja de ser pegajoso: a una columna se comería la pantalla. */
  .lp-ed-guide__aside { position: static; }
  .lp-ed-guide__p { font-size: 16px; }
  /* La tabla pasa a filas etiqueta/valor en vez de a dos columnas que se
     salen: la etiqueta encima y el texto debajo, a todo el ancho. */
  .lp-ed-guide__list-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .lp-ed-guide__list-k { grid-row: auto; }
  .lp-ed-guide__stat { flex-wrap: wrap; }
}


/* ==========================================================================
   5 · PREGUNTAS FRECUENTES
   ==========================================================================
   La seccion la pinta el parcial comun (`faqs_section.html`: `lp-sec` +
   `lt-section-title` con rombo), que trae el ritmo del brazo de control -- 24
   px arriba y abajo -- y su titular en sans. Medido el 2026-09-11 a 1440: se
   quedaba a 35 px de la banda oscura de problemas, y era el unico titular de
   la pagina fuera de la serif del articulo. Va por id y no por clase porque
   el inventario cerrado de clases (contrato §10) no tiene una para ella.
   ========================================================================== */
#preguntas.lp-sec { padding-block: var(--lt-s-15) var(--lt-s-15); }   /* 64 / 64 */
#preguntas .lt-section-title .lt-diamond { display: none; }
#preguntas .lt-section-title__h {
  font-family: var(--lp-ed-serif, 'Instrument Serif', Georgia, serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--lt-ink);
}
@media (max-width: 768px) {
  #preguntas.lp-sec { padding-block: var(--lt-s-13) var(--lt-s-13); }  /* 40 / 40 */
  #preguntas .lt-section-title__h { font-size: clamp(24px, 7.6vw, 28px); }
}


/* ============================================================ */
/* BOTÓN FIJO EN MÓVIL DE LOS DESTACADOS                          */
/* ============================================================ */
/* Mientras se lee uno de los tres destacados, «Contactar a <despacho>» al
   alcance del pulgar (titular, 2026-09-12). Solo en movil: en escritorio el
   «Consultar» de cada destacado se ve sin tanto scroll. Cuando sale lo decide
   editorial-landing.js; aqui, solo como se ve. Mismos tokens que la barra fija
   de filtros del DS (`.lt-filters`): bajo el header y sin color literal. */
.lp-ed-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--lt-z-bottom-bar);
  padding: var(--lt-s-3) var(--lt-gutter) calc(var(--lt-s-3) + env(safe-area-inset-bottom, 0px));
  background: var(--lt-surface);
  box-shadow: var(--lt-shadow-bottom-bar);
  /* ENTRA Y SALE, NO APARECE (titular, 2026-09-12: «sale muy violento»).
     Espera fuera de pantalla, por debajo y transparente. `visibility` la saca
     del arbol de accesibilidad y del tabulador, pero solo DESPUES de la salida
     (el retardo de 200 ms), para no cortar la animacion. La salida es algo mas
     rapida que la entrada y acelera: se va sin hacerse notar. Solo `transform`
     y `opacity`: ni reflujo ni saltos en la pagina. */
  transform: translate3d(0, calc(100% + 12px), 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 200ms cubic-bezier(.4, 0, 1, 1),
    opacity 160ms ease-in,
    visibility 0s linear 200ms;
  will-change: transform, opacity;
}
/* La entrada: desaceleracion larga (ease-out quint) en 320 ms. */
.lp-ed-sticky--visible {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 320ms cubic-bezier(.22, 1, .36, 1),
    opacity 220ms ease-out,
    visibility 0s;
}
/* Antes de que corra el JS, oculta del todo. `hidden` a mano porque cualquier
   `display` de una regla de autor gana al del navegador. */
.lp-ed-sticky[hidden] {
  display: none;
}
.lp-ed-sticky__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border: none;
  border-radius: var(--lt-r-sm);
  background: var(--lt-primary);
  color: var(--lt-surface);
  font-family: var(--lt-font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 120ms ease-out;
}
/* Respuesta al dedo: se hunde un pelo al pulsar. */
.lp-ed-sticky__button:active {
  transform: scale(.98);
}
.lp-ed-sticky__button:focus-visible {
  outline: 2px solid var(--lt-ink);
  outline-offset: 2px;
}
/* Un nombre largo («BESADA & PIÑEIRO ABOGADOS VIGO») se corta con puntos
   suspensivos antes que partir el boton en dos lineas. Al cambiar de
   despacho, el nombre funde y baja 4 px en vez de saltar. */
.lp-ed-sticky__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 140ms ease-out, transform 140ms ease-out;
}
.lp-ed-sticky__name--swap {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 100ms ease-in, transform 100ms ease-in;
}
/* «VER ABOGADOS DE <MATERIA>» (titular, 2026-09-13): la misma barra, pero su
   boton es un enlace a los destacados. Sin subrayado, y la materia puede ser
   larga («derecho de extranjeria e inmigracion»): parte en dos lineas antes
   que cortarse, porque aqui no hay un nombre propio que se pueda abreviar. */
.lp-ed-sticky[data-ed-jump] .lp-ed-sticky__button,
.lp-ed-sticky[data-ed-jump] .lp-ed-sticky__button:visited {
  color: var(--lt-surface);   /* la regla de enlaces del DS le ganaba al boton */
  text-decoration: none;
  white-space: normal;
  text-align: center;
}
/* Movimiento reducido: sin desplazamiento, solo un fundido corto. */
@media (prefers-reduced-motion: reduce) {
  .lp-ed-sticky,
  .lp-ed-sticky--visible {
    transform: none;
    transition: opacity 120ms linear, visibility 0s linear 120ms;
  }
  .lp-ed-sticky--visible {
    transition: opacity 120ms linear, visibility 0s;
  }
  .lp-ed-sticky__button,
  .lp-ed-sticky__name,
  .lp-ed-sticky__name--swap {
    transform: none;
    transition: none;
  }
}
@media (min-width: 769px) {
  .lp-ed-sticky {
    display: none;
  }
}