@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   LEGALTICA DESIGN SYSTEM  —  legaltica-ds.css
   ==========================================================================

   Destilado literal de los 6 diseños definitivos de Claude Design en
   2026/design/dc/ (Home, Listado, Detalle — desktop y móvil).
   Referencia completa: 2026/design/dc/DESIGN_SYSTEM.md

   ESTRATEGIA DE BREAKPOINTS
   -------------------------
   DESKTOP FIRST. Las reglas base reproducen el diseño de escritorio.
   Los diseños móviles se aplican como OVERRIDE dentro de:

       @media (max-width: 768px) { ... }

   Hay UN solo breakpoint. Los valores móviles provienen literalmente de los
   mock-ups de 390px. Las custom properties responsivas se redefinen en
   :root dentro del media query, de modo que un componente que usa var(--lt-*)
   se adapta sin duplicar reglas.

   BOOTSTRAP
   ---------
   El proyecto carga Bootstrap 5 en base.html. Todas las clases lt-* son
   autosuficientes (no dependen de utilidades de Bootstrap) y usan
   suficiente especificidad — selectores de elemento+clase, p.ej.
   `a.lt-btn`, `button.lt-btn`, `h2.lt-section-title__h` — para ganar a
   los estilos base de Bootstrap sin recurrir a !important.
   Solo se usa !important en un punto imprescindible (reset de
   `.lt-btn { text-decoration }` no lo requiere; ver nota abajo — de hecho
   NO se usa !important en ninguna regla de este fichero).

   ÍNDICE
   ------
   1.  Tokens (:root)
   2.  Base / reset acotado
   3.  Layout: contenedores y secciones
   4.  Motivo de marca: rombo (.lt-diamond) y wordmark
   5.  Header (desktop + móvil) y selector de país
   6.  Footer
   7.  Botones y enlaces de acción
   8.  Chips, badges, pills, estado, verificado, rating
   9.  Cards genéricas y títulos de sección
   10. Breadcrumbs
   11. Hero + buscador
   12. Home: tiles, city-cards, steps, articles, testimonios, stats
   13. Listado: filtros sticky, lawyer-card, paginación, problem-cards
   14. Detalle: perfil, opiniones, horario, oficina, mini-cards, sticky
   15. CTA oscuros y formularios
   16. Placeholders de imagen
   17. Animaciones
   18. Overrides móviles (max-width: 768px)
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

/* --- Respaldos con las medidas de Manrope y Space Grotesk ---------------
   Las dos llegan de Google Fonts con display=swap, en móvil lento a los 6-7 s,
   y mientras tanto se pinta system-ui, de otro ancho: al cambiar, chips,
   títulos y párrafos pasan a otra línea y lo de debajo se mueve. Estas caras
   son Arial (Windows, macOS, iOS) o Roboto (Android) reescaladas para ocupar
   lo mismo que la buena, así el cambio casi no mueve nada.
   Medido en Chromium sobre el texto real de cuatro fichas (21-10-2026):
   Manrope 600-800 sale a 98,6-99,2 % de Arial Bold y Space Grotesk 600-700 a
   99,6-100,2 %, con poca dispersión; Manrope 400 a 102-103 % de Arial, pero
   según el texto va del 92 al 109 % (las cifras de una dirección, por
   ejemplo), así que en la regular algún texto que cabe justo puede cambiar
   de línea igual. Hasta 550 se compara con la regular y desde 551 con la
   negrita. Space Grotesk casi no sale por debajo de 600: su regular es la
   fuente del sistema sin reescalar, con nombre propio porque una familia sin
   cara regular usaría la negrita para el 400. Si no está la local, la cara no
   carga y se pasa a la siguiente familia de la lista. */
@font-face { font-family: 'Manrope Respaldo'; src: local('Arial'), local('ArialMT'); font-weight: 100 550;
  size-adjust: 102.2%; ascent-override: 104.7%; descent-override: 29.4%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Respaldo'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 551 900;
  size-adjust: 98.8%; ascent-override: 108.3%; descent-override: 30.4%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Respaldo Android'; src: local('Roboto'), local('Roboto-Regular'); font-weight: 100 550;
  size-adjust: 103.5%; ascent-override: 103.4%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Respaldo Android'; src: local('Roboto Bold'), local('Roboto-Bold'); font-weight: 551 900;
  size-adjust: 105.8%; ascent-override: 101.2%; descent-override: 28.4%; line-gap-override: 0%; }
@font-face { font-family: 'Space Grotesk Respaldo'; src: local('Segoe UI'), local('Helvetica Neue'), local('Arial'); font-weight: 100 550; }
@font-face { font-family: 'Space Grotesk Respaldo'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 551 900;
  size-adjust: 100%; ascent-override: 98%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: 'Space Grotesk Respaldo Android'; src: local('Roboto'), local('Roboto-Regular'); font-weight: 100 550; }
@font-face { font-family: 'Space Grotesk Respaldo Android'; src: local('Roboto Bold'), local('Roboto-Bold'); font-weight: 551 900;
  size-adjust: 107.2%; ascent-override: 91.4%; descent-override: 27%; line-gap-override: 0%; }

:root {
  /* --- Fuentes --- */
  --lt-font-head: 'Space Grotesk', 'Space Grotesk Respaldo', 'Space Grotesk Respaldo Android', system-ui, -apple-system, sans-serif;
  --lt-font-body: 'Manrope', 'Manrope Respaldo', 'Manrope Respaldo Android', system-ui, -apple-system, sans-serif;

  /* --- Color: superficie clara --- */
  --lt-canvas:            #F7F5F1;  /* fondo de página, header, barras de filtro */
  --lt-surface:           #FFFFFF;  /* cards, controles claros */
  --lt-border:            #E7E2DA;  /* borde 1px de todo lo claro */
  --lt-divider:           #EFEBE5;  /* separadores internos de card, raíl de barras */
  --lt-checkbox-border:   #D8D2C8;
  --lt-preview-bg:        #DAD6CF;  /* solo lienzo de preview móvil, no producción */

  /* --- Color: oscuros --- */
  --lt-ink:               #16202E;  /* texto por defecto + fondo de secciones oscuras */
  --lt-dark-deep:         #111926;  /* footer de listado y detalle */
  --lt-dark-surface:      #1D2A3B;  /* pills/controles sobre oscuro, rombos del hero */
  --lt-dark-border:       #2A3A4E;
  --lt-dark-divider:      #223042;
  --lt-ink-soft:          #3D4756;  /* ciudad en card de listado */

  /* --- Color: marca --- */
  /* #C94F4F -> #C54343 (revision de contraste 2026-08-09): texto/fondo con
     este color media 4,09:1 sobre --lt-canvas y 4,45:1 sobre blanco -- por
     debajo del 4,5:1 minimo AA en los dos sitios donde se usa como TEXTO
     ("Escríbenos y lo revisamos a mano" del reclamo, enlaces .lt-link--
     primary) y justo por debajo tambien como fondo con texto blanco encima
     (boton "Analizar caso"). Un solo paso de luminosidad (L 54,9% -> 51,9%,
     mismo tono/saturacion) ya da 4,53:1/4,93:1 -- pasa los dos casos sin
     que el rojo de marca cambie de forma perceptible. */
  --lt-primary:           #C54343;
  --lt-primary-hover:     #B23F3F;
  --lt-primary-light:     #E07A6B;  /* solo sobre oscuro */
  --lt-primary-border:    #E5C9C9;  /* outline del botón "Consultar" */

  /* --- Color: texto --- */
  --lt-text:              #16202E;
  --lt-text-2:            #5B6472;
  /* #6B7280 -> #6A717F (revision de contraste 2026-08-09): 4,44:1 sobre
     --lt-canvas, por debajo del minimo AA (4,5:1) -- repetido en textos
     secundarios de todo el sitio (enlaces del pie, ".ps-claim-option__label"
     "Mensaje al móvil"...). Un paso de luminosidad (L 46,1% -> 45,6%) da
     4,51:1 sin que el gris cambie de forma perceptible. */
  /* Segunda vuelta (misma revision): 4,51:1 solo era cierto contra --lt-canvas
     y blanco. Medido contra los fondos claros que de verdad existen en el
     panel, #6A717F suspendia en TRES: --ps-mist #EEF1F6 (4,33:1), --ps-soft
     #FBEDEA (4,30:1) y --ps-check-bg #EAF3EE (4,33:1). Se corrigio en el
     token y no caso por caso a proposito: parchear los cinco sitios que
     alguien habia enumerado deja suspendiendo todos los que nadie ha mirado
     todavia, y los que se escriban mañana. #666D7A da 4,56:1 en el PEOR de
     los cinco fondos, y la diferencia con el anterior no se ve. */
  --lt-text-muted:        #666D7A;
  /* --lt-text-faint (revision de contraste 2026-08-09): 2,29:1 sobre
     --lt-canvas y 2,50:1 sobre blanco -- muy por debajo del minimo AA
     (4,5:1). No hay salida "de texto": el valor mas claro que aprueba los
     dos fondos (#68717F) es mas OSCURO que --lt-text-muted, es decir,
     duplicaria ese token en vez de aportar un tercer nivel. Por eso ya NO
     se usa como color de texto en ningun sitio -- las ~40 apariciones que
     lo hacian pasaron a --lt-text-muted (revision de contraste 2026-08-09).
     Lo que queda usandolo son SOLO elementos decorativos marcados
     aria-hidden o con aria-label propio (separadores "/", "·", "…",
     chevrons de svg/::after, iconos de estado vacio, accent-color de un
     radio) -- ahi no aplica el minimo de texto porque no son texto. No
     reintroducir esta variable como color: de un elemento que el usuario
     tenga que leer. */
  --lt-text-faint:        #9AA5B4;
  --lt-on-dark:           #B9C2CE;
  --lt-on-dark-muted:     #9AA5B4;
  /* #7A8698 -> #7B8799 (revision de contraste 2026-08-09): 4,45:1 sobre
     --lt-ink, por debajo del minimo AA -- son los enlaces del pie sobre el
     fondo oscuro del footer. Un paso de luminosidad (L 51,2% -> 51,7%) da
     4,51:1 sin cambio perceptible. */
  --lt-on-dark-faint:     #7B8799;

  /* --- Color: semántico --- */
  --lt-star:              #E8A33D;
  --lt-star-empty:        #C6CDD6;
  --lt-open:              #2E9E6B;
  --lt-open-on-dark:      #6FBF9A;
  --lt-verified:          #2C6E63;
  --lt-chip-neutral-bg:   #EDF0F4;
  --lt-chip-neutral-ink:  #5B6472;
  --lt-flag-yellow:       #F5C84C;
  --lt-flag-blue:         #74ACDF;

  /* --- Placeholder de imagen --- */
  --lt-ph-a:              #EFEBE4;
  --lt-ph-b:              #E7E2DA;
  --lt-ph-ink:            #9C948A;
  --lt-ph-pattern: repeating-linear-gradient(45deg,
                     #EFEBE4, #EFEBE4 8px, #E7E2DA 8px, #E7E2DA 16px);

  /* --- Radios --- */
  --lt-r-pill:   999px;
  --lt-r-bar:    99px;   /* barras de distribución de estrellas */
  --lt-r-2xl:    24px;   /* bloques grandes de home (desktop) */
  --lt-r-xl:     18px;   /* CARD ESTÁNDAR */
  --lt-r-lg:     16px;   /* lawyer-card, testimonio */
  --lt-r-md:     14px;   /* mini-card, barra de filtros, problem-card, oficina */
  --lt-r-sm:     12px;   /* tiles, botones grandes, cuadros numerados */
  --lt-r-xs:     11px;   /* city-cards móvil, "Contactar ahora" */
  --lt-r-ctl:    10px;   /* botones de control, inputs, paginación, avatares */
  --lt-r-ctl-sm:  9px;   /* selector de país, filtros móvil */
  --lt-r-badge:   6px;   /* badge contador de filtro */

  /* --- Espaciado --- */
  --lt-s-1:   4px;
  --lt-s-2:   6px;
  --lt-s-3:   8px;
  --lt-s-4:  10px;
  --lt-s-5:  12px;
  --lt-s-6:  14px;
  --lt-s-7:  16px;
  --lt-s-8:  18px;
  --lt-s-9:  20px;
  --lt-s-10: 24px;
  --lt-s-11: 28px;
  --lt-s-12: 32px;
  --lt-s-13: 40px;
  --lt-s-14: 48px;
  --lt-s-15: 64px;
  --lt-s-16: 96px;

  /* --- Layout --- */
  --lt-container:       1200px;
  --lt-gutter:            32px;   /* padding lateral desktop */
  --lt-section-y:         48px;   /* padding vertical de sección estándar */
  --lt-header-h:          72px;   /* altura real del header desktop */
  /* Borde inferior REAL de la cabecera ya pegada (sticky). El vendor
     (assets/css/theme.min.css, regla `[data-sticky-element]{top:-1px!important}`
     -- el <header> lleva ese atributo para el detector "stuck" del tema, que
     esta web no usa, pero el !important igual gana) fuerza `top: -1px` en
     `.lt-header` aunque aquí pida `top: 0`. Pegada, la cabecera queda 1px más
     arriba de lo que mide --lt-header-h, así que cualquier sticky que se
     apoye en su borde (la barra de filtros, hoy) debe leer ESTA variable y
     no --lt-header-h a secas, o queda un hueco de 1px por el que se ve pasar
     la página al hacer scroll (encontrado 2026-08-22 a 1440 y 390: 71px/72px
     y 63px/64px reales, no 72/64). */
  --lt-header-h-effective: calc(var(--lt-header-h) - 1px);
  --lt-sidebar-offset:    92px;   /* header + 20px de aire */

  /* --- Sombras --- */
  --lt-shadow-search:        0 24px 60px rgba(0,0,0,0.35);
  --lt-shadow-search-mobile: 0 18px 44px rgba(0,0,0,0.35);
  --lt-shadow-filters:       0 8px 16px rgba(22,32,46,0.04);
  --lt-shadow-bottom-bar:    0 -8px 20px rgba(22,32,46,0.08);
  --lt-shadow-frame:         0 0 40px rgba(0,0,0,0.15);

  /* --- z-index --- */
  --lt-z-header:      50;
  --lt-z-bottom-bar:  45;
  --lt-z-filters:     40;

  /* --- Tipografía responsiva (se redefine en el media query) --- */
  --lt-fs-h1-hero:      56px;
  --lt-lh-h1-hero:      1.08;
  --lt-fs-h1-listing:   42px;
  --lt-fs-h1-detail:    30px;
  --lt-fs-h2-xl:        36px;   /* "¿Cómo funciona Legaltica?" */
  --lt-fs-h2-lg:        32px;   /* "Por qué confiar", CTA final */
  --lt-fs-h2:           28px;   /* sección estándar de home */
  --lt-fs-h2-listing:   26px;   /* sección de listado */
  --lt-fs-h2-card:      21px;   /* título de card de ficha */
  --lt-fs-h3:           20px;
  --lt-fs-body:       14.5px;
  --lt-fs-sm:         13.5px;
  --lt-fs-xs:         12.5px;
  --lt-fs-nav:        14.5px;
  --lt-fs-chip:       13.5px;
  --lt-fs-wordmark:     22px;

  /* --- Padding de card (responsivo) --- */
  --lt-card-pad:        28px;
  --lt-lawyer-pad:      18px;
}


/* ==========================================================================
   2. BASE / RESET ACOTADO
   Aplicar `class="lt"` en <body> para adoptar el sistema sin romper Bootstrap.
   ========================================================================== */

body.lt {
  margin: 0;
  background: var(--lt-canvas);
  font-family: var(--lt-font-body);
  color: var(--lt-text);
  -webkit-font-smoothing: antialiased;
}

/* Enlace por defecto.
   Se escribe `.lt a` y NO `body.lt a` a propósito: `body.lt a` tiene
   especificidad (0,1,2) y ganaba a TODOS los componentes ancla del sistema
   —`.lt-footer a`, `.lt-link-action`, `.lt-header__nav a`… todos (0,1,1)—,
   con lo que los enlaces del footer salían en tinta oscura sobre fondo
   oscuro (invisibles) y los CTA perdían su color. Con `.lt a` la
   especificidad baja a (0,1,1) y empata: gana el componente, que se declara
   después en este mismo fichero. Los `a.lt-btn*` (0,2,1) ganan siempre. */
.lt a {
  color: var(--lt-text);
  text-decoration: none;
}
.lt a:hover { color: var(--lt-primary); }

.lt-h1, .lt-h2, .lt-h3 { margin: 0; font-family: var(--lt-font-head); font-weight: 600; }
h1.lt-h1, h2.lt-h2, h3.lt-h3 { margin: 0; }

/* LOS ENCABEZADOS HEREDAN SU COLOR DEL CONTENEDOR. No lo quites.
   Ninguna clase .lt-h* fija color: los encabezados del sitio salian bien por
   herencia (blanco sobre un hero oscuro, --lt-ink sobre fondo claro) porque en
   Bootstrap 5.3 --bs-heading-color vale 'inherit'. Pero el color heredado sale
   de la raiz, y basta con que <html> lleve data-bs-theme="dark" para que el
   valor inicial de 'color' se vuelva BLANCO -- mientras nuestros fondos siguen
   siendo claros, porque este sitio no tiene paleta oscura.

   Resultado medido en la pagina 410 de ficha retirada: el h1 pasaba de
   rgb(17,24,39) sobre crema (16,29:1) a blanco puro sobre el MISMO crema:
   1,09:1. Invisible. Lo reporto un usuario con una captura.

   Fijar 'inherit' explicitamente corta esa via: el encabezado hereda de su
   seccion, que si tiene fondo y color propios, y deja de depender de lo que
   decida la raiz. Comprobado sobre la home, una ficha y una estatica con hero
   oscuro (29 encabezados): ninguno empeora su contraste. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: inherit; }

.lt-h1 { font-size: var(--lt-fs-h1-listing); letter-spacing: -0.02em; }
.lt-h2 { font-size: var(--lt-fs-h2);         letter-spacing: -0.02em; }
.lt-h3 { font-size: var(--lt-fs-h3); }

.lt-balance { text-wrap: balance; }

.lt-text-muted { color: var(--lt-text-muted); }
/* .lt-text-faint retirada (revision de contraste 2026-08-09): no la usaba
   ninguna plantilla y era una invitacion a pintar texto legible con
   --lt-text-faint (2,29:1 / 2,50:1, ver el token en TOKENS mas arriba). Si
   hace falta un tercer nivel de gris para texto, usa --lt-text-muted. */
.lt-text-2     { color: var(--lt-text-2); }

/* Cuerpos de texto */
.lt-lead   { margin: 0; font-size: 17px;  line-height: 1.6;  color: var(--lt-text-muted); }
.lt-body   { margin: 0; font-size: var(--lt-fs-body); line-height: 1.7; color: var(--lt-text-2); }
.lt-prose  { margin: 0; font-size: 15px;  line-height: 1.65; color: var(--lt-text-muted); }
.lt-small  { font-size: var(--lt-fs-xs);  color: var(--lt-text-muted); }

/* Label en mayúsculas con tracking (HORARIO, PARA PROFESIONALES) */
.lt-label {
  font-family: var(--lt-font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--lt-text-muted);
}
.lt-label--accent { color: var(--lt-primary-light); font-size: 13px; }

/* Truncado a 2 líneas (descripciones de lawyer-card) */
.lt-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.lt-container {
  max-width: var(--lt-container);
  margin: 0 auto;
  padding-left: var(--lt-gutter);
  padding-right: var(--lt-gutter);
}

.lt-section {
  max-width: var(--lt-container);
  margin: 0 auto;
  padding: var(--lt-section-y) var(--lt-gutter);
}
.lt-section--first { padding-top: var(--lt-s-16); }   /* 96px */
.lt-section--last  { padding-bottom: var(--lt-s-16); }
.lt-section--tight { padding-top: 24px; padding-bottom: 24px; }

/* Sección full-bleed oscura (CTA final del listado) */
.lt-section--dark { background: var(--lt-ink); }

/* Grids del sistema */
.lt-grid            { display: grid; }
.lt-grid--2         { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.lt-grid--3         { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lt-grid--4         { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lt-grid--tiles     { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lt-grid--problems  { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lt-grid--minis     { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lt-grid--pairs     { grid-template-columns: 1fr 1fr; gap: 12px; }
/* La lista del informe modo tres (T4, spec §3.3): tres columnas, no dos --
   nombre propio y no `.lt-grid--3` porque no comparte breakpoint con esa: a
   una columna por debajo de 992px (ver la sección del informe más abajo), no
   a partir de 768px como el resto de `.lt-grid--*`. */
.lt-grid--report    { grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Layout de detalle: contenido + sidebar */
.lt-detail-grid {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 28px;
  align-items: start;
}
/* Layout de cabecera de listado: texto + caja CTA */
.lt-listing-head {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  align-items: start;
}

/* Carrusel horizontal (móvil, full-bleed) */
.lt-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 0 20px 8px 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lt-rail::-webkit-scrollbar { display: none; }
.lt-rail > * { flex-shrink: 0; }


/* ==========================================================================
   4. MOTIVO DE MARCA: EL ROMBO
   Cuadrado redondeado rotado 45° en #C94F4F. Tamaños del diseño: 5–14px.
   ========================================================================== */

.lt-diamond {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--lt-primary);
  border-radius: 2px;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.lt-diamond--5  { width: 5px;  height: 5px;  border-radius: 1.5px; }
.lt-diamond--6  { width: 6px;  height: 6px;  border-radius: 2px; }
.lt-diamond--7  { width: 7px;  height: 7px;  border-radius: 2px; }
.lt-diamond--8  { width: 8px;  height: 8px;  border-radius: 2px; }
.lt-diamond--9  { width: 9px;  height: 9px;  border-radius: 2px; }
.lt-diamond--10 { width: 10px; height: 10px; border-radius: 3px; }
.lt-diamond--11 { width: 11px; height: 11px; border-radius: 3px; }
.lt-diamond--14 { width: 14px; height: 14px; border-radius: 4px; }

/* Variantes de color/relleno */
.lt-diamond--verified { background: var(--lt-verified); }           /* bullets de Especialidades */
.lt-diamond--hollow   { background: transparent;
                        border: 1.5px solid var(--lt-primary); }    /* bullets de Servicios */

/* Wordmark */
.lt-wordmark {
  display: inline-flex;
  align-items: baseline;
}
.lt-wordmark__text {
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: var(--lt-fs-wordmark);
  letter-spacing: -0.02em;
  color: var(--lt-ink);
}
.lt-wordmark__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--lt-primary);
  border-radius: 2px;
  transform: rotate(45deg);
  margin-left: 5px;
}
.lt-wordmark--on-dark .lt-wordmark__text { color: #FFFFFF; }
.lt-wordmark--sm .lt-wordmark__text { font-size: 19px; }
.lt-wordmark--sm .lt-wordmark__dot  { width: 6px; height: 6px; margin-left: 4px; }
.lt-wordmark--xs .lt-wordmark__text { font-size: 17px; }
.lt-wordmark--xs .lt-wordmark__dot  { width: 5px; height: 5px; border-radius: 1.5px; margin-left: 4px; }

/* Cuadro-icono con rombo dentro (bloque Oficina, CTA oscuro) */
.lt-diamond-box {
  width: 40px;
  height: 40px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lt-diamond-box--dark {
  width: 44px;
  height: 44px;
  background: var(--lt-dark-surface);
  border: none;
  border-radius: var(--lt-r-sm);
}


/* ==========================================================================
   5. HEADER + SELECTOR DE PAÍS
   ========================================================================== */

/* La altura del header es la referencia de TODOS los demás stickys de la web
   (barra de filtros, sidebar de la ficha, scroll-margin de las anclas), que la
   leen como `var(--lt-header-h)`. Por eso se fija con `height` + `box-sizing:
   border-box` en lugar de dejarla emerger del padding: así la variable es la
   autoridad y la altura real no puede desviarse de ella si algún día cambia el
   contenido del header (con padding, un control de 44px la subía a 77px y todos
   los offsets quedaban 5px descuadrados).

   `top: 0` de aquí abajo NO es lo que termina aplicando: el atributo
   `data-sticky-element` del `<header>` (para el detector "stuck" del tema
   vendor, sin uso propio) hace que `assets/css/theme.min.css` le gane con
   `top: -1px !important`. La cabecera pegada queda entonces 1px por encima
   de --lt-header-h -- por eso existe --lt-header-h-effective (bloque de
   variables, §1) y por eso ningún sticky debe calibrarse contra
   --lt-header-h a secas. */
.lt-header {
  position: sticky;
  top: 0;
  z-index: var(--lt-z-header);
  height: var(--lt-header-h);
  box-sizing: border-box;
  background: var(--lt-canvas);
  border-bottom: 1px solid var(--lt-border);
}
.lt-header__inner {
  max-width: var(--lt-container);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--lt-gutter);
}
.lt-header__nav {
  display: flex;
  align-items: center;
  gap: var(--lt-s-12);
}
.lt-header__nav a {
  font-size: var(--lt-fs-nav);
  font-weight: 500;
  color: var(--lt-text-2);
}
.lt-header__nav a:hover { color: var(--lt-primary); }
.lt-header__nav a.is-active {
  font-weight: 600;
  color: var(--lt-ink);
}
.lt-header__actions {
  display: flex;
  align-items: center;
  gap: var(--lt-s-7);
}
/* Menu de cuenta (revision visual 2026-08-05): oculto en el HTML servido --
   lo muestra account-menu.js solo cuando la sesion, comprobada aparte y sin
   cache (accounts:estado_sesion), resulta ser la de un abogado con ficha.
   Mismo widget de Bootstrap ("dropdown") que ya usa el selector de pais de
   aqui abajo; el icono redondo es nuevo. */
.lt-account-menu { position: relative; }

/* Acceso a la cuenta, las dos caras del mismo sitio de la cabecera
   (revision visual 2026-08-08: el acceso era texto pelado, "Panel del
   abogado", y se veía mal junto al CTA):

     .lt-header__panel-link   enlace estatico que sirve el HTML cacheado,
                              va al login o al panel segun sesion
     .lt-account-menu__toggle toggle del menu que account-menu.js pone en su
                              lugar cuando hay sesion de abogado

   Comparten regla a proposito: tienen que ser indistinguibles para que el
   relevo no mueva ni un pixel de la cabecera.
   Se escribe `a.lt-header__panel-link` y no `.lt-header__panel-link` pelado
   por el mismo motivo que `a.lt-header__cta` mas abajo -- un `.lt-btn` o un
   `a[href]` con especificidad (0,1,1) le gana al selector de clase suelto. */
a.lt-header__panel-link,
button.lt-account-menu__toggle,
.lt-account-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: 50%;
  color: var(--lt-text-2);
  cursor: pointer;
}
/* `a.…:hover` (0,2,1) y no `.…:hover` (0,2,0) por lo mismo: `.lt a:hover`
   es (0,2,1) y le ganaba al selector pelado. */
a.lt-header__panel-link:hover,
.lt-account-menu__toggle:hover {
  color: var(--lt-primary);
  border-color: var(--lt-primary);
}
.lt-account-menu__menu {
  min-width: 230px;
  font-family: var(--lt-font-body);
}
.lt-account-menu__menu-name {
  display: block;
  padding: 6px 16px 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lt-ink);
  white-space: normal;
}
button.dropdown-item.js-lt-account-logout {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}
/* Elementos que solo existen en móvil.
   Va como `.lt-header button.lt-header__burger` (0,2,1) y no
   `.lt-header__burger` (0,1,0): la hamburguesa es un
   `button.lt-burger { display: flex }` (0,1,1) declarado JUSTO DEBAJO, así que
   una regla de menor o igual peso perdía y el botón salía también en desktop. */
.lt-header button.lt-header__burger { display: none; }

/* Hamburguesa: 2 barras blancas + 1 roja corta alineada a la derecha */
button.lt-burger {
  width: 40px;
  height: 40px;
  background: var(--lt-ink);
  border: none;
  border-radius: var(--lt-r-ctl);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}
.lt-burger__bar {
  display: block;
  width: 16px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 1px;
}
.lt-burger__bar--accent {
  width: 10px;
  background: var(--lt-primary);
  align-self: flex-end;
  margin-right: 12px;
}

/* Selector de país — variante clara (header) */
button.lt-country,
.lt-country {
  display: flex;
  align-items: center;
  gap: var(--lt-s-2);
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-ctl-sm);
  padding: 8px 12px;
  cursor: pointer;
  font-family: var(--lt-font-body);
}
.lt-country__code {
  font-size: 13px;
  font-weight: 700;
  color: var(--lt-ink);
}
.lt-country__flag { display: block; border-radius: 2px; }

/* Selector de país — variante oscura (footer) */
button.lt-country--dark,
.lt-country--dark {
  background: var(--lt-dark-surface);
  border: 1px solid var(--lt-dark-border);
  padding: 7px 11px;
}
.lt-country--dark .lt-country__code {
  font-size: var(--lt-fs-xs);
  color: #FFFFFF;
}


/* ==========================================================================
   6. FOOTER
   ========================================================================== */

/* A) Footer de Home (4 columnas, fondo #16202E) */
.lt-footer { background: var(--lt-ink); }
.lt-footer__inner {
  max-width: var(--lt-container);
  margin: 0 auto;
  padding: var(--lt-s-15) var(--lt-gutter) var(--lt-s-12) var(--lt-gutter); /* 64/32/32 */
}
.lt-footer__cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--lt-s-14);
  margin-bottom: var(--lt-s-14);
}
.lt-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-1);
}
.lt-footer__col-title {
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: 14px;
  color: #FFFFFF;
}
/* min-height 44px (Apple HIG / WCAG 2.5.8): medido a 375px en 19px de alto
   real -- el texto solo, sin relleno, no llega ni a la mitad del minimo
   tactil. display:flex + align-items:center reparte ese alto de mas como
   relleno arriba/abajo del propio texto en vez de agrandar el font-size, así
   que la fila de enlaces sigue leyendose igual, solo con mas zona pulsable.
   El gap de .lt-footer__col baja de 12px a 4px para compensar: cada enlace
   ya trae su propio "aire" en el padding implicito del min-height. */
.lt-footer a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--lt-fs-sm);
  color: var(--lt-on-dark-faint);
}
.lt-footer a:hover { color: #FFFFFF; }
/* El selector de pais del pie (directory/partials/country_switcher_dark.html)
   abre un <ul data-bs-theme="light"> -- un dropdown de Bootstrap BLANCO,
   aunque su <a class="dropdown-item"> sigue siendo descendiente de
   .lt-footer en el DOM (Bootstrap no lo saca a un portal aparte) y por eso
   heredaba la regla de arriba: el gris pensado para el fondo OSCURO del pie
   se pintaba sobre un menu BLANCO -- 3,69:1 medido, muy por debajo del
   minimo. El pais activo ya tiene su propio contraste (fondo resaltado de
   Bootstrap); esto solo corrige el resto. */
.lt-footer .dropdown-item,
.lt-footer .dropdown-item:hover,
.lt-footer .dropdown-item:focus {
  color: var(--lt-ink);
}
.lt-footer__claim {
  margin: 0;
  font-size: var(--lt-fs-sm);
  line-height: 1.6;
  color: var(--lt-on-dark-faint);
  max-width: 260px;
}
.lt-footer__bar {
  border-top: 1px solid var(--lt-dark-divider);
  padding-top: var(--lt-s-10);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lt-footer__copy {
  font-size: 13px;
  color: var(--lt-on-dark-faint);
}

/* Marca del footer: isologo (SVG 30px) + wordmark, en una fila.
   En el header el diseño usa solo el wordmark; en el footer sí lleva el símbolo. */
a.lt-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.lt-isologo { display: block; flex-shrink: 0; }

/* B) Footer compacto de Listado / Detalle (una fila, fondo #111926) */
.lt-footer--slim { background: var(--lt-dark-deep); }
.lt-footer--slim .lt-footer__inner {
  padding: var(--lt-s-13) var(--lt-gutter) var(--lt-s-11) var(--lt-gutter); /* 40/32/28 */
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-10);
}
.lt-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lt-footer__legal {
  display: flex;
  align-items: center;
  gap: var(--lt-s-10);
}
.lt-footer--slim .lt-footer__legal a { font-size: 13px; }
.lt-footer--slim .lt-footer__copy {
  font-size: var(--lt-fs-xs);
  border-top: 1px solid var(--lt-dark-divider);
  padding-top: var(--lt-s-9);
}
/* Aviso de reCAPTCHA (obligatorio al esconder la insignia). Linea propia,
   ancho completo, debajo de la barra legal: dentro de .lt-footer__legal (flex)
   se encogia a una columna de cinco lineas (28-08). Letra menor y mas apagada
   que los enlaces legales para que no compita con ellos. */
.lt-footer__recaptcha {
  display: block;
  width: 100%;
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--lt-on-dark-faint);
}
/* `.lt-footer a` es display:block (los enlaces de las columnas van apilados);
   aqui son parte de una frase. */
.lt-footer .lt-footer__recaptcha a {
  display: inline;
  min-height: 0;
  color: inherit;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Reserva de espacio para la barra de contacto sticky (detalle móvil) */
.lt-footer--has-bottom-bar { padding-bottom: 96px; }


/* ==========================================================================
   7. BOTONES Y ENLACES DE ACCIÓN
   ========================================================================== */

a.lt-btn,
button.lt-btn,
.lt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lt-s-3);
  font-family: var(--lt-font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 13px 26px;
  border-radius: var(--lt-r-sm);
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Primario */
a.lt-btn--primary,
button.lt-btn--primary,
.lt-btn--primary {
  background: var(--lt-primary);
  color: #FFFFFF;
}
a.lt-btn--primary:hover,
button.lt-btn--primary:hover,
.lt-btn--primary:hover {
  background: var(--lt-primary-hover);
  color: #FFFFFF;
}

/* Outline rojo suave — "Consultar" de la lawyer-card */
a.lt-btn--outline,
button.lt-btn--outline,
.lt-btn--outline {
  background: transparent;
  border: 1px solid var(--lt-primary-border);
  color: var(--lt-primary);
  font-size: var(--lt-fs-sm);
  padding: 9px 24px;
  border-radius: var(--lt-r-ctl);
}
a.lt-btn--outline:hover,
button.lt-btn--outline:hover,
.lt-btn--outline:hover {
  border-color: var(--lt-primary);
  color: var(--lt-primary);
}

/* Ghost sobre fondo oscuro — "Conoce más" */
a.lt-btn--ghost-dark,
button.lt-btn--ghost-dark,
.lt-btn--ghost-dark {
  background: transparent;
  border: 1px solid var(--lt-dark-border);
  color: #FFFFFF;
  font-weight: 600;
  font-size: var(--lt-fs-nav);
  padding: 13px 24px;
  border-radius: var(--lt-r-sm);
}
a.lt-btn--ghost-dark:hover,
button.lt-btn--ghost-dark:hover,
.lt-btn--ghost-dark:hover {
  border-color: var(--lt-primary);
  color: #FFFFFF;
}

/* Ghost claro — «Ver tres despachos más» de la barra de confianza (oleada de
   feedback del titular, 24-08, punto 6): ninguna de las otras dos variantes
   sirve ahí -- --outline es roja (pensada para "Consultar") y --ghost-dark
   es blanca sobre oscuro, y la barra es clara. Ink sobre --lt-surface con
   borde --lt-border, mismo peso visual que el resto de .lt-btn. */
a.lt-btn--soft,
button.lt-btn--soft,
.lt-btn--soft {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  color: var(--lt-ink);
  font-weight: 600;
  font-size: var(--lt-fs-sm);
  padding: var(--lt-s-5) var(--lt-s-7);
  border-radius: var(--lt-r-ctl);
}
a.lt-btn--soft:hover,
button.lt-btn--soft:hover,
.lt-btn--soft:hover {
  border-color: var(--lt-ink-soft);
}

/* Tamaños */
.lt-btn--sm {                       /* CTA del header */
  font-size: 14px;
  padding: 11px 22px;
  border-radius: var(--lt-r-ctl);
}
.lt-btn--md {                       /* "Contactar ahora" */
  font-size: var(--lt-fs-nav);
  padding: 12px 28px;
  border-radius: var(--lt-r-xs);
}
.lt-btn--block {                    /* botones de formulario / CTA sidebar */
  display: flex;
  width: 100%;
  padding: 13px;
}
.lt-btn--block.lt-btn--lg {         /* "Solicitar llamada inmediata" */
  font-size: var(--lt-fs-nav);
  padding: 14px;
  border-radius: var(--lt-r-sm);
}
.lt-btn--block.lt-btn--compact {    /* "Ver abogados" de la caja oscura del listado */
  font-size: 14px;
  padding: 12px;
  border-radius: var(--lt-r-ctl);
}

/* Enlaces de acción */
a.lt-link-action,
.lt-link-action {
  font-size: 14px;
  font-weight: 700;
  color: var(--lt-primary);
}
a.lt-link-action:hover,
.lt-link-action:hover { color: var(--lt-primary-hover); }

a.lt-link-action--sm,
.lt-link-action--sm {
  font-size: 13px;
  font-weight: 700;
  color: var(--lt-primary);
}

/* Enlace de web (subrayado) en la ficha */
a.lt-link-web {
  font-weight: 600;
  color: var(--lt-text-2);
  text-decoration: underline;
}
a.lt-link-web:hover { color: var(--lt-primary); }


/* ==========================================================================
   8. CHIPS, BADGES, PILLS, ESTADO, VERIFICADO, RATING
   ========================================================================== */

/* Chip claro (sub-especialidades) */
a.lt-chip,
span.lt-chip,
.lt-chip {
  display: inline-flex;
  align-items: center;
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-pill);
  padding: 10px 18px;
  font-size: var(--lt-fs-chip);
  font-weight: 600;
  color: var(--lt-ink);
  transition: border-color .15s ease, color .15s ease;
}
a.lt-chip:hover, .lt-chip:hover { border-color: var(--lt-primary); }

/* Los modificadores se escriben `.lt-chip.lt-chip--x` (0,2,0) y no
   `.lt-chip--x` (0,1,0) a propósito: la regla base de arriba incluye
   `a.lt-chip` / `span.lt-chip` (0,1,1), que le ganaban a un modificador
   pelado y le devolvían al chip el borde y el padding grande del chip normal.
   Con dos clases el modificador gana siempre, sea <a> o <span>. */

/* Chip término relacionado */
.lt-chip.lt-chip--term {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 400;
  color: var(--lt-text-muted);
}
.lt-chip.lt-chip--term:hover {
  color: var(--lt-primary);
  border-color: var(--lt-primary);
}

/* Chip característica (ficha) — sin fondo */
.lt-chip.lt-chip--feature {
  background: transparent;
  color: var(--lt-text-2);
  font-size: var(--lt-fs-xs);
  font-weight: 600;
  padding: 7px 14px;
}

/* Chip neutro ("Familia", idiomas) */
.lt-chip.lt-chip--neutral {
  background: var(--lt-chip-neutral-bg);
  border: none;
  color: var(--lt-chip-neutral-ink);
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 10px;
}
.lt-chip.lt-chip--neutral.lt-chip--lang {   /* variante de la ficha (idiomas) */
  font-size: 12px;
  padding: 4px 12px;
}

/* Chip de HECHO del informe (spec analisis-antes-del-telefono §8).

   Estos chips son frases enteras ("Aún no tenemos el detalle de sus materias;
   pregúntale por la tuya"), no etiquetas de una palabra, así que tienen que
   envolver en varias líneas.

   EL SELECTOR LLEVA `.lt-lawyer-card__tags` DELANTE POR UN MOTIVO. Quien manda
   sobre estos chips no es la regla base de aquí arriba: es
   `page-landing.css:584` (`.lt-lawyer-card__tags .lt-chip { max-width:100%;
   overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }`). Tiene la
   MISMA especificidad que `.lt-chip.lt-chip--fact` (0-2-0) y se carga DESPUÉS
   -- legaltica-ds.css entra en base.html:124 y page-landing.css en el
   `{% block extra_css %}` de la línea 140 --, así que en un empate gana ella.
   Escrito como `.lt-chip.lt-chip--fact`, esto era CSS muerto: los hechos salían
   en una línea y cortados con puntos suspensivos, que es justo lo contrario de
   lo que hace falta. Con `.lt-lawyer-card__tags` delante son 0-3-0 y gana.

   Y hay que deshacer las CUATRO declaraciones, no sólo el `white-space`: con
   `overflow:hidden` + `text-overflow:ellipsis` heredados, la frase envuelve
   pero la caja sigue recortando. */
.lt-lawyer-card__tags .lt-chip.lt-chip--fact {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
}

/* «Tu elección», sobre el nombre del abogado que el usuario ya escogió. */
.lt-chip.lt-chip--chosen {
  background: var(--lt-primary);
  border: none;
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  flex-shrink: 0;
}

/* Chip sobre fondo oscuro (sugerencias del hero) */
.lt-chip.lt-chip--dark,
span.lt-chip--dark,
.lt-chip--dark {
  background: transparent;
  border: 1px solid var(--lt-dark-border);
  color: var(--lt-on-dark);
  font-size: var(--lt-fs-chip);
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--lt-r-pill);
  cursor: pointer;
}
.lt-chip.lt-chip--dark:hover,
span.lt-chip--dark:hover,
.lt-chip--dark:hover {
  border-color: var(--lt-primary);
  color: #FFFFFF;
}

/* Píldora del hero */
.lt-pill-hero {
  display: inline-flex;
  align-items: center;
  gap: var(--lt-s-3);
  background: var(--lt-dark-surface);
  border: 1px solid var(--lt-dark-border);
  border-radius: var(--lt-r-pill);
  padding: 7px 16px;
}
.lt-pill-hero__text {
  font-size: 13px;
  font-weight: 600;
  color: var(--lt-on-dark);
}

/* Badges */
/* `.lt-badge--reco` (el «Recomendado» de la tarjeta) se retiró el 2026-08-23,
   spec analisis-antes-del-telefono §12.1: era una preferencia nuestra sobre un
   abogado concreto, sin nada comprobable detrás. Lo sustituyen los chips de
   hechos (`.lt-chip--fact`). */
.lt-badge--count {
  display: inline-flex;
  align-items: center;
  background: var(--lt-primary);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--lt-r-badge);
}

/* Estado abierto / cerrado */
.lt-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lt-open);
}
.lt-status__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--lt-open);
  border-radius: 50%;
  flex-shrink: 0;
}
.lt-status--closed { color: var(--lt-text-muted); }
.lt-status--closed .lt-status__dot { background: var(--lt-star-empty); }

/* Rating */
.lt-rating {
  display: flex;
  align-items: baseline;
  gap: var(--lt-s-2);
  font-size: var(--lt-fs-sm);
}
.lt-rating__stars {
  color: var(--lt-star);
  font-weight: 800;
}
.lt-rating__stars--empty { color: var(--lt-star-empty); font-weight: 800; }
.lt-rating__score { font-weight: 800; color: var(--lt-ink); }
.lt-rating__count { color: var(--lt-text-muted); }
/* Variante de la home: el rating va en rojo, no en dorado */
.lt-rating--brand {
  font-size: 13px;
  font-weight: 700;
  color: var(--lt-primary);
}
.lt-rating--brand .lt-rating__count { color: var(--lt-text-muted); font-weight: 500; }

/* Pin de ubicación (card de listado) */
.lt-place {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--lt-fs-xs);
  font-weight: 700;
  color: var(--lt-ink-soft);
}
.lt-place svg { flex-shrink: 0; }
.lt-place--muted { font-weight: 400; color: var(--lt-text-muted); font-size: 13px; }

/* Icono verificado (SVG inline) */
.lt-verified { flex-shrink: 0; }

/* Avatar (iniciales) */
.lt-avatar {
  width: 38px;
  height: 38px;
  background: var(--lt-ink);
  color: #FFFFFF;
  border-radius: var(--lt-r-ctl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.lt-avatar--sm       { width: 36px; height: 36px; }
.lt-avatar--primary  { background: var(--lt-primary); }
.lt-avatar--verified { background: var(--lt-verified); }
.lt-avatar--muted    { background: var(--lt-text-2); }


/* ==========================================================================
   9. CARDS GENÉRICAS + TÍTULO DE SECCIÓN
   ========================================================================== */

.lt-card {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-xl);
  padding: var(--lt-card-pad);
}
.lt-card--flush { padding: 0; overflow: hidden; }
.lt-card--hover:hover { border-color: var(--lt-primary); }

/* Card de superficie oscura */
.lt-card--dark {
  background: var(--lt-ink);
  border: none;
  color: #FFFFFF;
}

/* Separador interno de card */
.lt-card__divider {
  border-top: 1px solid var(--lt-divider);
  padding-top: var(--lt-s-6);
}

/* Título de sección: rombo + H2 */
.lt-section-title {
  display: flex;
  align-items: center;
  gap: var(--lt-s-4);
  margin-bottom: var(--lt-s-10);
}
.lt-section-title__h {
  margin: 0;
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: var(--lt-fs-h2-listing);
  letter-spacing: -0.02em;
  color: var(--lt-ink);
}
/* Dentro de una card de ficha el H2 es 21px y no lleva letter-spacing */
.lt-card .lt-section-title__h {
  font-size: var(--lt-fs-h2-card);
  letter-spacing: normal;
}
.lt-card .lt-section-title { margin-bottom: var(--lt-s-8); }

/* Subtítulo alineado con el texto tras el rombo (offset 19px desktop) */
.lt-section-title__sub {
  margin: 0 0 var(--lt-s-10) 19px;
  font-size: 14px;
  color: var(--lt-text-muted);
}

/* Cabecera de sección con acción a la derecha (home) */
.lt-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--lt-s-12);
}
.lt-section-head__h {
  margin: 0;
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: var(--lt-fs-h2);
  letter-spacing: -0.02em;
  color: var(--lt-ink);
}
/* Cabecera centrada (¿Cómo funciona?) */
.lt-section-head--center {
  display: block;
  text-align: center;
  margin-bottom: 56px;
}
.lt-section-head--center .lt-section-head__h {
  font-size: var(--lt-fs-h2-xl);
  margin-bottom: var(--lt-s-5);
}


/* ==========================================================================
   10. BREADCRUMBS
   ========================================================================== */

/* Revision de contraste 2026-08-09: color: var(--lt-text-faint) queda aqui
   a proposito. .lt-breadcrumbs a ya usa --lt-text-muted y
   .lt-breadcrumbs__current usa --lt-ink -- lo unico que hereda este color
   base es el "/" que separa los enlaces, y ese separador va marcado
   aria-hidden="true" en las plantillas (landing_city.html,
   landing_specialty_city.html, lawyer_detail_enhanced.html). No es texto:
   es puntuacion decorativa entre dos elementos ya legibles. */
.lt-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--lt-s-3);
  font-size: 13px;
  color: var(--lt-text-faint);
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.lt-breadcrumbs a { color: var(--lt-text-muted); }
.lt-breadcrumbs a:hover { color: var(--lt-primary); }
.lt-breadcrumbs__current {
  color: var(--lt-ink);
  font-weight: 600;
}


/* ==========================================================================
   11. HERO + BUSCADOR
   ========================================================================== */

.lt-hero {
  background: var(--lt-ink);
  position: relative;
  overflow: hidden;
}
.lt-hero__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 88px var(--lt-gutter) var(--lt-s-16) var(--lt-gutter);
  position: relative;
  text-align: center;
}
.lt-hero__h1 {
  margin: 0 0 var(--lt-s-9) 0;
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: var(--lt-fs-h1-hero);
  line-height: var(--lt-lh-h1-hero);
  letter-spacing: -0.025em;
  color: #FFFFFF;
  text-wrap: balance;
}
.lt-hero__h1 em,
.lt-hero__accent {
  font-style: normal;
  color: var(--lt-primary-light);
}
.lt-hero__lead {
  margin: 0 auto var(--lt-s-13) auto;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--lt-on-dark-muted);
}
.lt-hero__chips {
  display: flex;
  justify-content: center;
  gap: var(--lt-s-4);
  margin-top: 22px;
  flex-wrap: wrap;
}

/* Formas decorativas del hero */
.lt-hero__shape {
  position: absolute;
  background: var(--lt-dark-surface);
  transform: rotate(45deg);
  pointer-events: none;
}
.lt-hero__shape--a {
  top: -60px; right: -60px;
  width: 280px; height: 280px;
  border-radius: 60px;
  animation: lg-drift 16s ease-in-out infinite;
}
.lt-hero__shape--b {
  bottom: -100px; left: -80px;
  width: 260px; height: 260px;
  border-radius: 56px;
  animation: lg-drift 20s ease-in-out infinite reverse;
}
.lt-hero__spark {
  position: absolute;
  background: var(--lt-primary);
  transform: rotate(45deg);
  pointer-events: none;
}
.lt-hero__spark--a {
  top: 90px; left: 120px;
  width: 14px; height: 14px;
  border-radius: 4px;
  opacity: 0.9;
  animation: lg-float 7s ease-in-out infinite, lg-pulse 6s ease-in-out infinite;
}
.lt-hero__spark--b {
  bottom: 120px; right: 160px;
  width: 10px; height: 10px;
  border-radius: 3px;
  opacity: 0.6;
  animation: lg-float 9s ease-in-out 1s infinite, lg-pulse 7s ease-in-out infinite;
}

/* Entradas escalonadas */
.lt-rise    { animation: lg-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.lt-rise--1 { animation-delay: 0.1s; }
.lt-rise--2 { animation-delay: 0.2s; }
.lt-rise--3 { animation-delay: 0.3s; }
.lt-rise--4 { animation-delay: 0.45s; }

/* Buscador */
.lt-search {
  max-width: 640px;
  margin: 0 auto;
  background: var(--lt-surface);
  border-radius: var(--lt-r-xl);
  padding: var(--lt-s-4);
  box-shadow: var(--lt-shadow-search);
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-4);
  text-align: left;
}
textarea.lt-search__input,
.lt-search__input {
  border: none;
  outline: none;
  resize: none;
  font-family: var(--lt-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--lt-ink);
  padding: 14px 16px 4px 16px;
  height: 64px;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
}
.lt-search__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 2px 10px;
}
.lt-search__hint {
  font-size: var(--lt-fs-xs);
  color: var(--lt-text-muted);
  font-weight: 500;
}


/* ==========================================================================
   12. HOME: TILES, CITY-CARDS, STEPS, ARTÍCULOS, TESTIMONIOS, STATS
   ========================================================================== */

/* Tile de especialidad */
a.lt-tile,
.lt-tile {
  display: flex;
  align-items: center;
  gap: var(--lt-s-5);
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-sm);
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lt-ink);
  box-sizing: border-box;
  transition: border-color .15s ease;
}
a.lt-tile:hover, .lt-tile:hover {
  border-color: var(--lt-primary);
  color: var(--lt-ink);
}

/* City-card (home) */
a.lt-city-card,
.lt-city-card {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-sm);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-1);
  transition: border-color .15s ease;
}
a.lt-city-card:hover, .lt-city-card:hover { border-color: var(--lt-primary); }
.lt-city-card__name {
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: 16px;
  color: var(--lt-ink);
}
.lt-city-card__count {
  font-size: 13px;
  color: var(--lt-text-muted);
}

/* City-card con contador a la derecha (listado) */
a.lt-city-card--count,
.lt-city-card--count {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--lt-s-4);
  border-radius: var(--lt-r-xs);
  padding: 13px 16px;      /* diseño: 13px 16px, radio 11px */
}
/* El nombre se queda SIEMPRE en una línea y se recorta con puntos suspensivos.
   Antes no tenía límite: "Castellón de la Plana / Castelló de la Plana" partía en
   dos líneas, la fila crecía y el número quedaba flotando en medio. El
   `min-width: 0` es imprescindible: sin él, un hijo de flex no baja de su ancho
   de contenido y el ellipsis no llega a aplicarse. */
.lt-city-card--count .lt-city-card__name {
  font-family: var(--lt-font-body);
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* El número nunca se encoge ni se parte. */
.lt-city-card--count .lt-city-card__count {
  font-size: var(--lt-fs-xs);
  font-weight: 700;
  color: var(--lt-ink);
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Paso "Cómo funciona" */
.lt-step {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-xl);
  padding: 32px 28px;
}
.lt-step__num {
  width: 44px;
  height: 44px;
  background: var(--lt-ink);
  border-radius: var(--lt-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--lt-s-9);
  font-family: var(--lt-font-head);
  font-weight: 700;
  font-size: 19px;
  color: #FFFFFF;
  flex-shrink: 0;
}
.lt-step__num--primary { background: var(--lt-primary); }   /* el paso 3 */
.lt-step__h {
  margin: 0 0 var(--lt-s-4) 0;
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: var(--lt-fs-h3);
  color: var(--lt-ink);
}
.lt-step__p {
  margin: 0;
  font-size: var(--lt-fs-body);
  line-height: 1.6;
  color: var(--lt-text-muted);
}

/* Card de abogado destacado (home) */
a.lt-lawyer-featured,
.lt-lawyer-featured {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease;
}
a.lt-lawyer-featured:hover { border-color: var(--lt-primary); }
.lt-lawyer-featured__img { display: block; width: 100%; height: 130px; object-fit: cover; }
.lt-lawyer-featured__body {
  padding: 16px 18px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-2);
}
.lt-lawyer-featured__name {
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--lt-ink);
}
.lt-lawyer-featured__meta {
  font-size: 13px;
  color: var(--lt-text-muted);
}

/* Card de artículo (consejos legales) */
a.lt-article-card,
.lt-article-card {
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-5);
}
.lt-article-card__img {
  display: block;
  width: 100%;
  height: 150px;
  border-radius: var(--lt-r-md);
  object-fit: cover;
}
.lt-article-card__cat {
  font-size: 12px;
  font-weight: 700;
  color: var(--lt-primary);
}
.lt-article-card__title {
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: var(--lt-ink);
}
.lt-article-card__date {
  font-size: var(--lt-fs-xs);
  color: var(--lt-text-muted);
}

/* Testimonio */
.lt-testimonial {
  background: var(--lt-canvas);
  border-radius: var(--lt-r-lg);
  padding: 26px 26px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-7);
}
.lt-testimonial__quote {
  margin: 0;
  font-size: var(--lt-fs-body);
  line-height: 1.6;
  color: var(--lt-ink);
}
.lt-testimonial__who {
  display: flex;
  align-items: center;
  gap: var(--lt-s-5);
}
.lt-testimonial__name { font-weight: 700; font-size: var(--lt-fs-sm); }
.lt-testimonial__role { font-size: 12px; color: var(--lt-text-muted); }

/* Stat */
.lt-stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-2);
}
.lt-stat__num {
  font-family: var(--lt-font-head);
  font-weight: 700;
  font-size: 40px;
  color: var(--lt-ink);
}
.lt-stat__num--primary { color: var(--lt-primary); }
.lt-stat__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--lt-text-muted);
}

/* Bloque grande (¿Eres abogado? / Por qué confiar) */
.lt-panel {
  border-radius: var(--lt-r-2xl);
  overflow: hidden;
  padding: var(--lt-s-15) 56px;
}
.lt-panel--dark  { background: var(--lt-ink); color: #FFFFFF; padding: 0; }
.lt-panel--light { background: var(--lt-surface); border: 1px solid var(--lt-border); }
.lt-panel--split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.lt-panel__body {
  padding: var(--lt-s-15) 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--lt-s-8);
}
.lt-panel__h {
  margin: 0;
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-wrap: balance;
}
.lt-panel__p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--lt-on-dark-muted);
  max-width: 420px;
}
.lt-panel__img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.lt-panel__actions { display: flex; gap: var(--lt-s-5); margin-top: var(--lt-s-4); }


/* ==========================================================================
   13. LISTADO
   ========================================================================== */

/* --- Caja CTA de la cabecera --- */
.lt-listing-cta {
  background: var(--lt-ink);
  border-radius: var(--lt-r-xl);
  padding: 26px 26px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-5);
}
.lt-listing-cta__h {
  margin: 0;
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: 19px;
  color: #FFFFFF;
}
.lt-listing-cta__p {
  margin: 0;
  font-size: var(--lt-fs-sm);
  line-height: 1.55;
  color: var(--lt-on-dark-muted);
}
.lt-listing-cta__note {
  font-size: 12px;
  color: var(--lt-on-dark-faint);
  text-align: center;
}

/* Contador con rombo */
.lt-count-line {
  display: flex;
  align-items: center;
  gap: var(--lt-s-4);
  font-size: 14px;
  font-weight: 700;
  color: var(--lt-ink);
}

/* --- Barra de filtros STICKY --- */
.lt-filters {
  position: sticky;
  /* --lt-header-h-effective, NO --lt-header-h: la cabecera pegada mide 1px
     menos que su altura nominal (vendor `top:-1px!important`, ver §5 arriba).
     Con --lt-header-h a secas quedaba un hueco de 1px entre el borde de la
     cabecera y esta barra -- una línea por la que se veía pasar la página
     al hacer scroll (encontrado 2026-08-22). */
  top: var(--lt-header-h-effective);
  z-index: var(--lt-z-filters);       /* 40 < 50 del header */
  background: var(--lt-canvas);
  padding: 14px 0;
  border-bottom: 1px solid var(--lt-border);
  box-shadow: var(--lt-shadow-filters);
}
.lt-filters__inner {
  max-width: var(--lt-container);
  margin: 0 auto;
  padding: 0 var(--lt-gutter);
}
.lt-filters__bar {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-md);
  padding: var(--lt-s-4);
  display: flex;
  gap: var(--lt-s-4);
}
button.lt-filter-btn,
.lt-filter-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lt-s-3);
  background: var(--lt-canvas);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-ctl);
  padding: 12px 16px;
  cursor: pointer;
  font-family: var(--lt-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--lt-text-muted);
}
.lt-filter-btn.is-active { color: var(--lt-ink); }
.lt-filter-btn__label {
  display: flex;
  align-items: center;
  gap: var(--lt-s-3);
}
.lt-filter-btn__check {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--lt-surface);
  border: 1.5px solid var(--lt-checkbox-border);
  border-radius: 5px;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* --- Card de abogado del listado --- */
.lt-lawyer-card {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-lg);
  padding: var(--lt-lawyer-pad);
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-6);
}
.lt-lawyer-card--hover:hover { border-color: var(--lt-primary); }
.lt-lawyer-card__top {
  display: flex;
  gap: var(--lt-s-7);
}
.lt-lawyer-card__photo {
  width: 96px;
  height: 96px;
  border-radius: var(--lt-r-sm);
  flex-shrink: 0;
  object-fit: cover;
  background: var(--lt-ph-pattern);
}
.lt-lawyer-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-2);
  min-width: 0;
}
.lt-lawyer-card__head {
  display: flex;
  align-items: center;
  gap: var(--lt-s-3);
  flex-wrap: wrap;
}
.lt-lawyer-card__name {
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: 16.5px;
  color: var(--lt-ink);
}
.lt-lawyer-card__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--lt-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lt-lawyer-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--lt-divider);
  padding-top: var(--lt-s-6);
}

/* --- El informe del modo tres (spec analisis-antes-del-telefono §7-§8) --- */

/* La tarjeta del abogado que el usuario eligió. Un borde, no un fondo de color:
   tiene que leerse como "esta es la tuya", no como un anuncio. */
.lt-card--chosen {
  border-color: var(--lt-primary);
}

/* Cabecera de la sección del informe (T4, spec §3.3): un único titular arriba
   de las tres tarjetas -- lo que antes repartía el separador de alternativas
   entre la primera y la segunda. Sólo la primera página lo lleva. */
.lt-report-head { margin: 0 0 var(--lt-s-8); }
.lt-report-head__title {
  font-family: var(--lt-font-head);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--lt-ink);
  margin: 0 0 var(--lt-s-3);
}
.lt-report-head__intro {
  font-size: var(--lt-fs-sm);
  color: var(--lt-text-muted);
  margin: 0;
  max-width: 62ch;
}

/* La nota de ampliación de alcance: «No hay abogados laboralistas en
   Tortuguitas. El más cercano está a 4,2 km, en Del Viso.»

   Va en el tono apagado de `__intro` porque es contexto, no una alerta: la
   lista de abajo es buena, solo que no es de la ciudad que se pidió. Un aviso
   en amarillo diría que algo ha ido mal, y no ha ido mal -- ha ido mejor que
   enseñar a un penalista por vivir cerca. */
.lt-report-head__scope {
  font-size: var(--lt-fs-sm);
  color: var(--lt-text-muted);
  margin: var(--lt-s-2) 0 0;
  max-width: 62ch;
}

/* «Ordenar por» (T5, spec §3.2): un control segmentado de pastillas, con la
   misma familia visual que `.lt-chip` (radio, borde, tamaño) pero su propia
   clase -- no es un filtro que acota resultados, es un orden que los mismos
   resultados adoptan, y mezclar las dos cosas bajo `.lt-chip` haría que un
   día un cambio en el filtro moviera este control sin querer. */
.lt-report-sort {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lt-s-2);
  margin: var(--lt-s-6) 0 0;
}
.lt-report-sort__opt {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-pill);
  padding: var(--lt-s-2) var(--lt-s-6);
  font-family: var(--lt-font-body);
  font-size: var(--lt-fs-xs);
  font-weight: 600;
  color: var(--lt-text-muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.lt-report-sort__opt:hover { border-color: var(--lt-primary); color: var(--lt-ink); }
.lt-report-sort__opt.is-active {
  background: var(--lt-primary);
  border-color: var(--lt-primary);
  color: #fff;
}

/* LA BARRA DE CONFIANZA + «VER TRES DESPACHOS MÁS» (oleada de feedback del
   titular, 24-08, punto 6): antes eran dos líneas sueltas, cada una centrada
   debajo de la otra; el mock las junta en una sola barra clara -- texto a la
   izquierda, botón (o la línea `.lt-alternatives__sin`, sin más resultados)
   a la derecha. `--lt-canvas` y no un tono nuevo: es el mismo fondo que ya
   usa cualquier barra clara del sitio (header, filtros). */
.lt-report-footbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lt-s-6);
  margin: var(--lt-s-6) 0 0;
  padding: var(--lt-s-6) var(--lt-s-7);
  background: var(--lt-canvas);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-xl);
}
/* Los tres hijos posibles de la barra traían su propio margen para vivir
   solos, uno debajo del otro; dentro de `.lt-report-footbar` el `gap` del
   flex ya reparte el hueco, así que aquí se anulan y se alinean a la
   izquierda -- el texto de confianza SIEMPRE, el botón/la línea de cierre
   sólo cuando la barra los apila en móvil (ver el override más abajo). */
.lt-report-footbar .lt-report-trust,
.lt-report-footbar .lt-show-more,
.lt-report-footbar .lt-alternatives__sin {
  margin: 0;
}
.lt-report-trust {
  font-size: var(--lt-fs-sm);
  color: var(--lt-text-muted);
  text-align: left;
  margin: var(--lt-s-5) 0 0;
}
/* El mensaje del filtro «Abiertos ahora» sin ningún despacho abierto (oleada
   de feedback del titular, 24-08, punto 4): sustituye a la barra entera --
   no hay botón que ofrecer sobre un conjunto vacío -- así que va suelto,
   centrado como el resto de mensajes vacíos de esta pantalla. */
.lt-report-empty {
  font-size: var(--lt-fs-sm);
  color: var(--lt-text-muted);
  text-align: center;
  margin: var(--lt-s-6) 0 0;
}

/* La tarjeta del informe (T4, spec §3.3): vertical -- foto arriba con la
   insignia superpuesta, cuerpo y pie con el CTA a todo el ancho. Distinta de
   `.lt-lawyer-card` sola (horizontal, foto a la izquierda) porque en una
   rejilla de tres columnas una tarjeta ancha y baja no cabe. Hereda de
   `.lt-lawyer-card` la columna, el borde y el hueco entre secciones; sólo
   pisa el padding (lo reparten `__body`/`__foot`) y el radio. */
.lt-report-card {
  padding: 0;
  border-radius: var(--lt-r-xl);
  overflow: hidden;
}
.lt-report-card__media {
  position: relative;
  height: 120px;
}
.lt-report-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--lt-ph-pattern);
}
/* ===========================================================================
   LAS TRES TARJETAS DEL INFORME SE LEEN EN PARALELO, así que sus filas tienen
   que caer a la misma altura. Se leían en diagonal:

     - la tarjeta no rellenaba su celda del grid (el que estira es
       `.lawyer-card-wrapper`, y el `<article>` de dentro se quedaba a la altura
       de su contenido), así que los tres botones «Contactar» acababan a tres
       alturas distintas;
     - un nombre de dos líneas («Farías Abogados | Estudio Especializado en…»)
       empujaba hacia abajo TODO lo que venía detrás en esa columna;
     - y la descripción, con largo libre, movía el estado y el pie otra vez.

   Se arregla reservando el alto de las filas variables (nombre a dos líneas
   siempre, descripción a tres) y empujando el pie al fondo. No se recorta más
   texto que antes: se recorta MEJOR, por línea completa y con puntos
   suspensivos de verdad, en vez de cortar a mitad de palabra.
   =========================================================================== */
.lt-grid--report .lawyer-card-wrapper { display: flex; }
.lt-grid--report .lt-report-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.lt-grid--report .lt-report-card .lt-report-card__body { flex: 1 1 auto; }

/* El nombre nunca pasa de dos líneas, aquí y en móvil: un despacho con razón
   social larga no puede empujar la tarjeta entera. */
.lt-report-card .lt-lawyer-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

/* NADA DE RESERVAR DOS LÍNEAS PARA EL NOMBRE. Se probó, y era peor el remedio:
   casi todos los despachos caben en una línea, así que la reserva dejaba un
   renglón EN BLANCO fijo entre el título y las estrellas en las tres tarjetas —
   un hueco permanente para arreglar un desajuste que solo aparece cuando algún
   nombre es largo.

   La alineación la sostiene el pie: `margin-top: auto` en el estado empuja
   «Abierto ahora», el botón y los enlaces al fondo del cuerpo, así que los tres
   «Contactar» caen a la misma altura aunque el texto de arriba mida distinto.
   Un nombre de dos líneas baja el contenido de SU tarjeta una línea, y ya. */
.lt-report-card .lt-status { margin-top: auto; }

/* Tres líneas y corta por el final de la línea. Antes `truncatewords` cortaba
   a mitad de frase con unos puntos suspensivos pegados a la última palabra. */
.lt-report-card .lt-lawyer-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* De dónde es el despacho. Apagado y pequeño: es contexto para elegir, no un
   titular. Va debajo de las estrellas y encima del chip de especialidad, que es
   el orden en que se lee una tarjeta: quién, cómo de bueno, dónde, de qué.

   Con chincheta, y la MISMA que usa la franja del expediente: sin ella el
   nombre del pueblo se leía como un texto suelto a media tarjeta, sin decir qué
   era. Va en `currentColor` para que herede el gris del bloque y no haya que
   mantener el color en dos sitios. */
.lt-report-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--lt-s-2);
  font-size: var(--lt-fs-sm);
  color: var(--lt-text-muted);
}
.lt-report-card__place {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.lt-report-card__pin { flex: none; opacity: .75; }
.lt-report-card__sep { opacity: .45; }

/* La jurisdicción del informe, bajo la línea de apertura. Mismo tono apagado:
   dice para qué sitio está escrito lo que viene debajo. */
.lp-analysis__place {
  font-size: var(--lt-fs-sm);
  color: var(--lt-text-muted);
  margin: 0 0 var(--lt-s-3);
}

.lt-report-card__tag {
  position: absolute;
  top: var(--lt-s-4);
  left: var(--lt-s-4);
  background: var(--lt-surface);
  color: var(--lt-ink);
  font-size: var(--lt-fs-xs);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--lt-r-pill);
  box-shadow: 0 2px 8px rgba(22, 32, 46, .18);
}
.lt-report-card__body {
  padding: var(--lt-s-7);
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-3);
}
.lt-report-card__foot {
  padding: 0 var(--lt-s-7) var(--lt-s-7);
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-3);
}
.lt-report-card__cta { width: 100%; text-align: center; }
.lt-report-card__links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--lt-fs-sm);
}
.lt-report-card__links a {
  color: var(--lt-text-muted);
  text-decoration: underline;
}
.lt-report-card__phone-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--lt-font-body);
  font-size: var(--lt-fs-sm);
  color: var(--lt-text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.lt-report-card__sent {
  font-size: var(--lt-fs-sm);
  color: var(--lt-text-muted);
  text-align: center;
}

/* El separador `.lt-alternatives` (titular delante de la segunda tarjeta) se
   retiró en T4 (spec §3.3): con tres tarjetas iguales, un titular a mitad de
   lista volvía a decir que hay un grupo principal y uno de reserva. Su
   `__sub` se fue con él; `__sin` se queda -- es la línea honesta de
   `three.no_more_text`, que no depende del separador. El modificador de
   TÍTULO del mismo separador tenía un override de tamaño en el bloque móvil
   (@media max-width: 768px, más abajo) que se quedó atrás en esa retirada --
   hallazgo M4, revisión final: sin regla base ni uso en ninguna plantilla,
   ya se ha ido con él. */
.lt-alternatives__sin {
  font-size: var(--lt-fs-sm);
  color: var(--lt-text-muted);
  margin: var(--lt-s-6) 0 0;
}

/* Rejilla del informe a una columna por debajo del breakpoint de tres
   columnas: 992px, no 768px como el resto de `.lt-grid--*` (spec §3.3 -- tres
   tarjetas de retrato en 2-3 columnas de tablet quedarían apretadas). */
@media (max-width: 991px) {
  .lt-grid--report { grid-template-columns: 1fr; }
}

/* La barra de confianza apila en móvil (oleada de feedback del titular,
   24-08, punto 6, «stacks on mobile»): texto arriba, botón debajo, los dos a
   todo el ancho -- una fila a 390px deja el botón reducido a una esquina. */
@media (max-width: 768px) {
  .lt-report-footbar { flex-direction: column; align-items: stretch; }
  .lt-report-footbar .lt-report-trust { text-align: center; }
  .lt-report-footbar .lt-show-more .lt-btn--soft { width: 100%; }
}

/* «Ver tres más». Va FUERA de la rejilla --es hermano del grid, no una celda--
   así que aquí no hace falta `grid-column`; lo que hace falta es centrarlo, o
   se queda pegado al borde izquierdo debajo de una lista de dos columnas. */
.lt-show-more {
  margin: var(--lt-s-6) 0 0;
  text-align: center;
}


/* --- Card "problema legal" --- */
a.lt-problem-card,
.lt-problem-card {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-md);
  padding: var(--lt-s-9);
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-4);
  transition: border-color .15s ease;
}
a.lt-problem-card:hover { border-color: var(--lt-primary); }
.lt-problem-card__title {
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--lt-ink);
}
.lt-problem-card__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--lt-text-muted);
}

/* --- Paginación --- */
.lt-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lt-s-3);
  margin-top: 36px;
  flex-wrap: wrap;
}
.lt-pagination__count {
  font-size: 13px;
  color: var(--lt-text-muted);
  margin-right: var(--lt-s-5);
}
button.lt-page,
a.lt-page,
.lt-page {
  border: 1px solid var(--lt-border);
  background: var(--lt-surface);
  color: var(--lt-ink);
  font-family: var(--lt-font-body);
  font-weight: 600;
  font-size: var(--lt-fs-sm);
  width: 38px;
  height: 38px;
  border-radius: var(--lt-r-ctl);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
button.lt-page.is-active,
.lt-page.is-active {
  border: none;
  background: var(--lt-ink);
  color: #FFFFFF;
  font-weight: 700;
}
button.lt-page--nav,
a.lt-page--nav,
.lt-page--nav {
  width: auto;
  height: auto;
  padding: 9px 16px;
}
.lt-page--prev { color: var(--lt-text-muted); }
/* var(--lt-text-faint) a proposito (revision de contraste 2026-08-09):
   pagination.html marca el "…" con aria-hidden="true" -- es un separador
   visual entre botones de pagina, no un dato que haga falta leer. */
.lt-pagination__ellipsis { color: var(--lt-text-faint); }


/* ==========================================================================
   14. DETALLE
   ========================================================================== */

/* Perfil */
.lt-profile__top {
  display: flex;
  gap: var(--lt-s-10);
}
.lt-profile__photo {
  display: block;
  width: 148px;
  height: 148px;
  border-radius: var(--lt-r-md);
  flex-shrink: 0;
  object-fit: cover;
  background: var(--lt-ph-pattern);
}
.lt-profile__info {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.lt-profile__head {
  display: flex;
  align-items: center;
  gap: var(--lt-s-4);
  flex-wrap: wrap;
}
.lt-profile__h1 {
  margin: 0;
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: var(--lt-fs-h1-detail);
  letter-spacing: -0.02em;
  color: var(--lt-ink);
}
.lt-profile__meta { font-size: 14px; color: var(--lt-text-muted); }
.lt-profile__tags { display: flex; gap: var(--lt-s-3); flex-wrap: wrap; }
.lt-profile__status-row {
  display: flex;
  align-items: center;
  gap: var(--lt-s-7);
  flex-wrap: wrap;
  font-size: var(--lt-fs-sm);
}
.lt-profile__actions {
  display: flex;
  align-items: center;
  gap: var(--lt-s-6);
  border-top: 1px solid var(--lt-divider);
  margin-top: 22px;
  padding-top: var(--lt-s-9);
}

/* Cita destacada con barra lateral */
.lt-quote {
  border-left: 3px solid var(--lt-border);
  padding-left: var(--lt-s-6);
}
.lt-quote p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lt-text-muted);
  font-style: italic;
}
.lt-quote__who {
  font-size: 12px;
  color: var(--lt-text-muted);
}

/* Lista con bullets de rombo (Especialidades / Servicios) */
.lt-bullet {
  display: flex;
  align-items: center;
  gap: var(--lt-s-4);
  font-size: 14px;
  font-weight: 600;
  color: var(--lt-ink);
}
.lt-bullet--muted { color: var(--lt-text-2); }

/* Opiniones */
.lt-reviews__summary {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--lt-s-11);
  align-items: center;
  margin-bottom: 26px;
}
.lt-reviews__score {
  background: var(--lt-canvas);
  border-radius: var(--lt-r-md);
  padding: var(--lt-s-10);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-1);
}
.lt-reviews__score-num {
  font-family: var(--lt-font-head);
  font-weight: 700;
  font-size: 44px;
  color: var(--lt-ink);
}
.lt-reviews__score-stars { color: var(--lt-star); font-weight: 800; font-size: 15px; }
.lt-reviews__score-count { font-size: 13px; color: var(--lt-text-muted); }

.lt-reviews__dist {
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-3);
}
.lt-dist-row {
  display: flex;
  align-items: center;
  gap: var(--lt-s-4);
}
.lt-dist-row__label {
  font-size: var(--lt-fs-xs);
  font-weight: 700;
  width: 22px;
  color: var(--lt-ink);
  flex-shrink: 0;
}
.lt-dist-row__track {
  flex: 1;
  height: 7px;
  background: var(--lt-divider);
  border-radius: var(--lt-r-bar);
  overflow: hidden;
}
.lt-dist-row__fill {
  height: 7px;
  background: var(--lt-star);
  border-radius: var(--lt-r-bar);
}
.lt-dist-row__fill--neg { background: var(--lt-star-empty); }  /* la barra de 1★ */
.lt-dist-row__n {
  font-size: var(--lt-fs-xs);
  color: var(--lt-text-muted);
  width: 30px;
  text-align: right;
  flex-shrink: 0;
}

.lt-reviews__list {
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-8);
}
.lt-review {
  border-top: 1px solid var(--lt-divider);
  padding-top: var(--lt-s-8);
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-3);
}
.lt-review__who {
  display: flex;
  align-items: center;
  gap: var(--lt-s-5);
}
.lt-review__name { font-weight: 700; font-size: var(--lt-fs-sm); }
.lt-review__stars { font-size: 12px; }
.lt-review__text {
  margin: 0;
  font-size: var(--lt-fs-sm);
  line-height: 1.65;
  color: var(--lt-text-2);
}

/* Horario */
.lt-hours {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-xl);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-5);
}
.lt-hours__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--lt-fs-sm);
}
.lt-hours__day   { color: var(--lt-text-muted); font-weight: 600; }
.lt-hours__time  { font-weight: 700; color: var(--lt-ink); }
.lt-hours__time--closed { color: var(--lt-text-muted); }
/* Variante integrada en el CTA oscuro (móvil) */
.lt-hours--in-dark {
  background: transparent;
  border: none;
  border-top: 1px solid var(--lt-dark-divider);
  border-radius: 0;
  padding: var(--lt-s-5) 0 0 0;
  gap: var(--lt-s-3);
}
.lt-hours--in-dark .lt-hours__row  { font-size: var(--lt-fs-xs); }
.lt-hours--in-dark .lt-hours__day  { color: var(--lt-on-dark-muted); }
.lt-hours--in-dark .lt-hours__time { color: #FFFFFF; }
.lt-hours--in-dark .lt-hours__time--closed { color: var(--lt-on-dark-faint); }

/* Oficina */
.lt-office {
  display: flex;
  align-items: center;
  gap: var(--lt-s-7);
  background: var(--lt-canvas);
  border-radius: var(--lt-r-md);
  padding: 18px 20px;
}
.lt-office__title { font-weight: 700; font-size: var(--lt-fs-body); }
.lt-office__addr  { font-size: var(--lt-fs-sm); color: var(--lt-text-2); }

/* Mini-card de abogado similar */
a.lt-lawyer-mini,
.lt-lawyer-mini {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease;
}
a.lt-lawyer-mini:hover { border-color: var(--lt-primary); }
.lt-lawyer-mini__img {
  display: block;
  width: 100%;
  height: 84px;
  object-fit: cover;
  background: var(--lt-ph-pattern);
}
.lt-lawyer-mini__body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lt-lawyer-mini__rating { font-size: 12px; }
.lt-lawyer-mini__name {
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: var(--lt-fs-sm);
  color: var(--lt-ink);
}
.lt-lawyer-mini__city { font-size: 12px; color: var(--lt-text-muted); }

/* SIDEBAR STICKY de la ficha (desktop) */
.lt-sticky-sidebar {
  position: sticky;
  top: var(--lt-sidebar-offset);      /* 92px = header 72 + 20 de aire */
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-7);
}

/* BARRA DE CONTACTO STICKY INFERIOR (detalle móvil).
   Se oculta en desktop; se muestra en el media query. */
.lt-sticky-cta {
  display: none;
}


/* ==========================================================================
   15. CTA OSCUROS Y FORMULARIOS
   ========================================================================== */

.lt-cta-dark {
  background: var(--lt-ink);
  border-radius: var(--lt-r-xl);
  padding: var(--lt-card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-6);
}
.lt-cta-dark__h {
  margin: 0;
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: var(--lt-fs-h3);
  color: #FFFFFF;
}
.lt-cta-dark__p {
  margin: 0;
  font-size: var(--lt-fs-sm);
  line-height: 1.55;
  color: var(--lt-on-dark-muted);
}
.lt-cta-dark__perks {
  display: flex;
  justify-content: center;
  gap: var(--lt-s-7);
  font-size: var(--lt-fs-xs);
  font-weight: 600;
  color: var(--lt-on-dark-faint);
}
.lt-cta-dark__perk { color: var(--lt-open-on-dark); }

/* CTA final del listado: sección oscura + formulario blanco */
.lt-cta-final {
  max-width: var(--lt-container);
  margin: 0 auto;
  padding: var(--lt-s-15) var(--lt-gutter);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--lt-s-14);
  align-items: center;
}
.lt-cta-final__h {
  margin: 0;
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: var(--lt-fs-h2-lg);
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-wrap: balance;
}
.lt-cta-final__p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lt-on-dark-muted);
}

/* Formulario */
.lt-form {
  background: var(--lt-surface);
  border-radius: var(--lt-r-xl);
  padding: var(--lt-s-10);
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-4);
}
.lt-form__title {
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: var(--lt-s-1);
  color: var(--lt-ink);
}
input.lt-input,
textarea.lt-input,
.lt-input {
  background: var(--lt-canvas);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-ctl);
  padding: 12px 14px;
  font-family: var(--lt-font-body);
  font-size: 14px;
  color: var(--lt-ink);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
textarea.lt-input,
.lt-input--textarea {
  resize: none;
  height: 72px;
}
.lt-input:focus { border-color: var(--lt-primary); }
/* Variante sobre fondo oscuro (CTA final móvil): input blanco sin borde */
.lt-input--on-dark {
  background: var(--lt-surface);
  border: none;
  font-size: var(--lt-fs-sm);
}


/* ==========================================================================
   16. PLACEHOLDERS DE IMAGEN
   ========================================================================== */

.lt-ph {
  background: var(--lt-ph-pattern);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lt-ph__label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--lt-ph-ink);
}


/* ==========================================================================
   17. ANIMACIONES
   ========================================================================== */

@keyframes lg-float {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50%      { transform: rotate(45deg) translateY(-12px); }
}
@keyframes lg-drift {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(12px, -10px); }
}
@keyframes lg-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lg-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-hero__shape,
  .lt-hero__spark,
  .lt-rise { animation: none; }
}


/* ==========================================================================
   18. OVERRIDES MÓVILES — max-width: 768px
   Valores tomados literalmente de los mock-ups de 390px.
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Tokens responsivos --- */
  :root {
    --lt-gutter:          20px;   /* Home y Listado */
    --lt-section-y:       32px;
    --lt-header-h:        64px;
    --lt-card-pad:        20px;
    --lt-lawyer-pad:      16px;

    --lt-fs-h1-hero:      34px;
    --lt-lh-h1-hero:      1.12;
    --lt-fs-h1-listing:   28px;
    --lt-fs-h1-detail:    24px;
    --lt-fs-h2-xl:        24px;
    --lt-fs-h2-lg:        20px;
    --lt-fs-h2:           22px;
    --lt-fs-h2-listing:   20px;
    --lt-fs-h2-card:      18px;
    --lt-fs-h3:           18px;
    --lt-fs-body:       13.5px;
    --lt-fs-sm:         12.5px;
    --lt-fs-xs:         11.5px;
    --lt-fs-chip:       12.5px;
    --lt-fs-wordmark:     19px;
  }

  /* --- Layout: todo a una columna --- */
  .lt-grid--2,
  .lt-grid--3,
  .lt-grid--4,
  .lt-grid--problems,
  .lt-detail-grid,
  .lt-listing-head,
  .lt-cta-final,
  .lt-panel--split,
  .lt-footer__cols {
    grid-template-columns: 1fr;
  }
  .lt-grid--tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lt-grid--2     { gap: 14px; }
  .lt-grid--problems { gap: 10px; }
  .lt-detail-grid { gap: 14px; }

  .lt-section { padding: var(--lt-section-y) var(--lt-gutter); }
  .lt-section--first { padding-top: 44px; }
  .lt-section--last  { padding-bottom: 44px; }

  /* --- Header --- */
  /* La altura (64px) la fija `--lt-header-h` arriba; aquí solo el gutter. */
  .lt-header__inner { padding: 0 16px; }
  .lt-header__nav   { display: none; }
  /* Debe empatar en peso con la regla base de la §5 que la oculta. */
  .lt-header button.lt-header__burger { display: flex; }
  .lt-header__actions { gap: 10px; }

  button.lt-country,
  .lt-country { padding: 7px 10px; }
  .lt-country__code { font-size: var(--lt-fs-xs); }

  /* --- Hero --- */
  .lt-hero__inner {
    max-width: none;
    padding: 44px 20px 48px 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .lt-hero__h1   { margin: 0; letter-spacing: -0.02em; }
  .lt-hero__lead { margin: 0; max-width: none; font-size: 15px; line-height: 1.55; }
  .lt-hero__chips { justify-content: flex-start; gap: 8px; margin-top: 0; }

  .lt-hero__shape--a {
    top: -50px; right: -50px;
    width: 160px; height: 160px;
    border-radius: 36px;
  }
  .lt-hero__shape--b { display: none; }
  .lt-hero__spark--a {
    top: 70px; left: 22px;
    width: 10px; height: 10px;
    border-radius: 3px;
    opacity: 0.8;
  }
  .lt-hero__spark--b { display: none; }

  .lt-pill-hero { padding: 6px 14px; align-self: flex-start; }
  .lt-pill-hero__text { font-size: 12px; }

  /* --- Buscador --- */
  .lt-search {
    max-width: none;
    border-radius: var(--lt-r-lg);
    padding: 8px;
    box-shadow: var(--lt-shadow-search-mobile);
    gap: 8px;
  }
  textarea.lt-search__input,
  .lt-search__input {
    font-size: 14px;
    padding: 12px 12px 2px 12px;
    height: 58px;
  }
  .lt-search__foot  { display: block; padding: 0; }
  .lt-search__hint  { display: none; }              /* el móvil no muestra el hint */
  .lt-search .lt-btn {
    display: flex;
    width: 100%;
    padding: 14px;
  }

  /* --- Chips --- */
  span.lt-chip--dark,
  .lt-chip--dark { font-size: 13px; padding: 7px 15px; }
  a.lt-chip, .lt-chip { padding: 9px 15px; }
  a.lt-chip--term, .lt-chip--term { padding: 6px 12px; font-size: 12px; }
  .lt-chip--feature { font-size: var(--lt-fs-xs); padding: 6px 12px; }
  .lt-chip--neutral { font-size: 10.5px; padding: 2px 9px; }
  .lt-chip--neutral.lt-chip--lang { font-size: 11.5px; padding: 4px 11px; }
  .lt-badge--count  { font-size: 10px; padding: 1px 6px; border-radius: 5px; }
  /* `.lt-chip.lt-chip--fact` y no `.lt-chip--fact` a secas: la convención de
     este fichero (ver la nota sobre los modificadores, §Chips) es que un
     modificador de chip va con la clase base delante, o pierde 0-1-0 contra
     0-2-0 y no aplica nada. */
  .lt-chip.lt-chip--fact { font-size: 10.5px; padding: 2px 9px; }

  /* --- Títulos de sección --- */
  .lt-section-title { gap: 9px; margin-bottom: 14px; }
  .lt-section-title__sub { margin: 0 0 14px 17px; font-size: var(--lt-fs-sm); }
  .lt-section-head  { margin-bottom: 16px; }
  .lt-section-head--center { text-align: left; margin-bottom: 20px; }
  .lt-section-head--center .lt-section-head__h { margin-bottom: 6px; }
  a.lt-link-action, .lt-link-action { font-size: 13px; }
  a.lt-link-action--sm, .lt-link-action--sm { font-size: var(--lt-fs-sm); }

  /* --- Breadcrumbs --- */
  .lt-breadcrumbs { gap: 6px; font-size: 12px; margin-bottom: 0; }

  /* --- Botones --- */
  a.lt-btn, button.lt-btn, .lt-btn { font-size: var(--lt-fs-chip); }
  .lt-btn--md { padding: 14px; width: 100%; border-radius: var(--lt-r-sm); font-size: 14.5px; }
  .lt-btn--block.lt-btn--lg { font-size: 14px; padding: 13px; border-radius: var(--lt-r-xs); }
  a.lt-btn--outline, button.lt-btn--outline, .lt-btn--outline {
    font-size: 13px;
    padding: 9px 20px;
  }
  a.lt-btn--ghost-dark, .lt-btn--ghost-dark { padding: 13px; width: 100%; }
  .lt-panel__actions { flex-direction: column; gap: 10px; }

  /* --- Cards --- */
  .lt-card { padding: var(--lt-card-pad); }

  /* Tiles / ciudades */
  a.lt-tile, .lt-tile {
    gap: 9px;
    border-radius: var(--lt-r-xs);
    padding: 13px 14px;
    font-size: 13px;
    min-height: 44px;
  }
  a.lt-city-card, .lt-city-card {
    border-radius: var(--lt-r-xs);
    padding: 13px 16px;
    gap: 2px;
    min-width: 120px;
  }
  .lt-city-card__name  { font-size: 14.5px; }
  .lt-city-card__count { font-size: 12px; }
  a.lt-city-card--count, .lt-city-card--count { padding: 12px 15px; gap: 10px; }
  .lt-city-card--count .lt-city-card__name { font-size: var(--lt-fs-sm); }

  /* Pasos: card horizontal */
  .lt-step {
    border-radius: var(--lt-r-md);
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  .lt-step__num {
    width: 34px;
    height: 34px;
    border-radius: var(--lt-r-ctl-sm);
    margin-bottom: 0;
    font-size: 15px;
  }
  .lt-step__h { font-size: 16px; margin-bottom: 4px; }
  .lt-step__p { font-size: var(--lt-fs-body); line-height: 1.5; }

  /* Card destacada (carrusel de 220px) */
  a.lt-lawyer-featured, .lt-lawyer-featured {
    width: 220px;
    border-radius: var(--lt-r-md);
  }
  .lt-lawyer-featured__img  { height: 100px; }
  .lt-lawyer-featured__body { padding: 12px 14px 14px 14px; gap: 4px; }
  .lt-lawyer-featured__name { font-size: 14.5px; }
  .lt-lawyer-featured__meta { font-size: var(--lt-fs-sm); }
  .lt-rating--brand { font-size: var(--lt-fs-sm); }

  /* Artículo: card horizontal con marco */
  a.lt-article-card, .lt-article-card {
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-r-md);
    padding: 12px;
    flex-direction: row;
    gap: 14px;
    align-items: center;
  }
  .lt-article-card__img {
    width: 84px;
    height: 72px;
    border-radius: var(--lt-r-ctl);
    flex-shrink: 0;
  }
  .lt-article-card__cat   { font-size: var(--lt-fs-xs); }
  .lt-article-card__title { font-size: 14px; line-height: 1.3; }
  .lt-article-card__date  { font-size: var(--lt-fs-xs); }

  /* Testimonio */
  .lt-testimonial { border-radius: var(--lt-r-md); padding: 20px; gap: 14px; }
  .lt-testimonial__quote { font-size: var(--lt-fs-body); line-height: 1.55; }
  .lt-testimonial__name  { font-size: 13px; }
  .lt-testimonial__role  { font-size: var(--lt-fs-xs); }
  .lt-avatar { width: 34px; height: 34px; border-radius: var(--lt-r-ctl-sm); font-size: 12px; }

  /* Stats: grid 2×2 */
  .lt-stat { gap: 2px; }
  .lt-stat__num   { font-size: 28px; }
  .lt-stat__label { font-size: var(--lt-fs-sm); }

  /* Panel */
  .lt-panel,
  .lt-panel--dark {
    border-radius: var(--lt-r-xl);
    padding: 32px 24px;
  }
  .lt-panel--light { padding: 28px 22px; }
  .lt-panel__body  { padding: 0; gap: 14px; }
  .lt-panel__h     { font-size: var(--lt-fs-h2-xl); }
  .lt-panel__p     { font-size: 14px; line-height: 1.55; max-width: none; }
  .lt-panel__img   { height: 160px; min-height: 0; border-radius: var(--lt-r-sm); }
  .lt-label--accent { font-size: 12px; }

  /* --- Filtros --- */
  /* En móvil los filtros NO van arriba, sino FIJOS ABAJO, al alcance del pulgar.
     En un listado el usuario ya está viendo abogados: lo que necesita a mano es
     filtrar, no un CTA. (La antigua barra CTA "Ver abogados" se eliminó.)
     Los desplegables de Bootstrap se abren hacia arriba solos (Popper detecta
     que no hay hueco debajo). */
  .lt-filters {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--lt-z-bottom-bar);   /* 45 — bajo el header (50) */
    /* La barra ES la superficie blanca. Antes había una card blanca DENTRO de
       una franja crema: dos fondos y dos paddings anidados, que se veía raro. */
    background: var(--lt-surface);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    border-bottom: none;
    border-top: 1px solid var(--lt-border);
    box-shadow: var(--lt-shadow-bottom-bar);
  }
  .lt-filters__inner { padding: 0; }
  /* La card interior desaparece: los 3 botones se apoyan directamente en la barra. */
  .lt-filters__bar {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 8px;
  }

  /* Hueco para que la barra fija no tape el final del contenido ni el footer. */
  body.lt:has(.lt-filters) .lt-footer { padding-bottom: 84px; }
  .lt-filters__bar {
    border-radius: var(--lt-r-sm);
    padding: 8px;
    gap: 8px;
  }
  button.lt-filter-btn, .lt-filter-btn {
    justify-content: center;
    gap: 5px;
    border-radius: var(--lt-r-ctl-sm);
    padding: 10px 6px;
    font-size: 12px;
  }
  .lt-filter-btn--specialty { flex: 1.2; }
  .lt-filter-btn--location  { flex: 1; }
  .lt-filter-btn--open      { flex: 1.1; }
  .lt-filter-btn__check { width: 13px; height: 13px; border-radius: 4px; }

  /* --- Lawyer card --- */
  .lt-lawyer-card { gap: 12px; }
  .lt-lawyer-card__top   { gap: 14px; }
  .lt-lawyer-card__photo { width: 76px; height: 76px; }
  .lt-lawyer-card__info  { gap: 5px; }
  .lt-lawyer-card__head  { gap: 7px; }
  .lt-lawyer-card__name  { font-size: 15px; }
  .lt-lawyer-card__desc  { font-size: var(--lt-fs-sm); line-height: 1.45; }
  .lt-lawyer-card__foot  { padding-top: 12px; }
  .lt-rating  { font-size: var(--lt-fs-sm); gap: 5px; }
  .lt-status  { font-size: var(--lt-fs-sm); gap: 6px; }
  .lt-place   { font-size: 12px; }

  /* --- Problem card --- */
  a.lt-problem-card, .lt-problem-card {
    border-radius: 13px;
    padding: 16px;
    gap: 7px;
  }
  .lt-problem-card__title { font-size: 14.5px; }
  .lt-problem-card__desc  { font-size: var(--lt-fs-sm); line-height: 1.5; }

  /* --- Paginación --- */
  .lt-pagination { gap: 6px; margin-top: 22px; }
  .lt-pagination__count { display: none; }
  .lt-page--prev { display: none; }
  button.lt-page, a.lt-page, .lt-page {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
  button.lt-page--nav, a.lt-page--nav, .lt-page--nav {
    width: auto;
    padding: 0 14px;
    height: 36px;
  }

  /* --- Perfil de la ficha --- */
  .lt-profile__top {
    flex-direction: column;
    gap: 12px;
  }
  .lt-profile__photo {
    width: 100%;
    height: 170px;
    border-radius: var(--lt-r-sm);
  }
  .lt-profile__info { gap: 10px; }
  .lt-profile__head { gap: 9px; }
  .lt-profile__meta { font-size: 13px; }
  .lt-profile__status-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--lt-fs-sm);
  }
  .lt-profile__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }
  .lt-quote { padding-left: 12px; }
  .lt-quote p { font-size: var(--lt-fs-sm); }
  .lt-quote__who { font-size: var(--lt-fs-xs); }

  /* Bullets */
  .lt-bullet { font-size: var(--lt-fs-body); gap: 9px; }

  /* --- Opiniones --- */
  .lt-reviews__summary {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 0;
  }
  .lt-reviews__score {
    border-radius: var(--lt-r-sm);
    padding: 14px 18px;
    gap: 2px;
    flex-shrink: 0;
  }
  .lt-reviews__score-num   { font-size: 30px; }
  .lt-reviews__score-stars { font-size: 11px; }
  .lt-reviews__score-count { font-size: 11px; }
  .lt-reviews__dist { gap: 6px; flex: 1; }
  .lt-dist-row        { gap: 8px; }
  .lt-dist-row__label { font-size: 11px; width: 16px; }
  .lt-dist-row__track { height: 6px; }
  .lt-dist-row__fill  { height: 6px; }
  .lt-dist-row__n     { font-size: 11px; width: 24px; }
  .lt-review        { padding-top: 14px; gap: 7px; }
  .lt-review__name  { font-size: var(--lt-fs-sm); }
  .lt-review__stars { font-size: 11px; }
  .lt-review__text  { font-size: var(--lt-fs-sm); line-height: 1.6; }
  .lt-avatar--sm    { width: 32px; height: 32px; border-radius: var(--lt-r-ctl-sm); font-size: 12px; }

  /* --- Oficina --- */
  .lt-office { gap: 13px; padding: 14px; border-radius: var(--lt-r-sm); }
  .lt-office__title { font-size: 13px; }
  .lt-office__addr  { font-size: var(--lt-fs-sm); }
  .lt-diamond-box   { width: 36px; height: 36px; border-radius: var(--lt-r-ctl); }

  /* --- Mini-cards (carrusel de 160px) --- */
  a.lt-lawyer-mini, .lt-lawyer-mini { width: 160px; }
  .lt-lawyer-mini__img  { height: 74px; }
  .lt-lawyer-mini__body { padding: 10px 12px; gap: 2px; }
  .lt-lawyer-mini__rating { font-size: 11px; }
  .lt-lawyer-mini__name   { font-size: var(--lt-fs-sm); }
  .lt-lawyer-mini__city   { font-size: 11px; }

  /* --- Sidebar: deja de ser sticky y pasa a flujo --- */
  .lt-sticky-sidebar {
    position: static;
    top: auto;
    gap: 14px;
  }

  /* --- CTA oscuros --- */
  .lt-cta-dark { padding: 22px; gap: 12px; }
  .lt-cta-dark__p     { font-size: 13px; line-height: 1.5; }
  .lt-cta-dark__perks { gap: 14px; font-size: 12px; }
  .lt-cta-dark .lt-diamond-box--dark { display: none; }   /* el móvil no lleva el cuadro-rombo */

  .lt-cta-final {
    padding: 24px 20px 28px 20px;
    display: block;
  }
  .lt-cta-final__h { margin-bottom: 0; }
  .lt-cta-final__p { font-size: 13px; line-height: 1.55; }

  .lt-form { padding: var(--lt-s-10); }
  .lt-form__title { font-size: 16px; }
  input.lt-input, textarea.lt-input, .lt-input { font-size: var(--lt-fs-sm); }
  textarea.lt-input, .lt-input--textarea { height: 64px; }

  /* --- Footer --- */
  .lt-footer__inner {
    padding: 36px 20px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .lt-footer__cols {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    margin-bottom: 0;
  }
  /* El diseño móvil es: fila de marca a ancho completo y DEBAJO la rejilla de
     3 columnas de enlaces. Sin esto, la columna de marca ocupa una de las tres
     celdas y los enlaces se comprimen contra ella. */
  .lt-footer__cols > .lt-footer__col:first-child {
    grid-column: 1 / -1;
    margin-bottom: 6px;
  }
  .lt-footer__col       { gap: 9px; }
  .lt-footer__col-title { font-size: 13px; }
  .lt-footer a          { font-size: var(--lt-fs-sm); }
  .lt-footer__bar {
    display: block;
    padding-top: 18px;
  }
  /* La fila legal no envolvia (28-08): el copyright y "Aviso legal" se
     partian en dos lineas y "Cookies" se salia por la derecha. */
  .lt-footer__legal {
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 12px;
  }
  .lt-footer__legal a { min-height: 32px; }
  .lt-footer__copy { font-size: 12px; white-space: nowrap; }

  .lt-footer--slim .lt-footer__inner {
    padding: 28px 20px 22px 20px;
    gap: 18px;
  }
  /* En móvil la fila del footer slim no cabe: el wordmark y los enlaces
     legales se solapaban. Se apila. */
  .lt-footer--slim .lt-footer__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .lt-footer--slim .lt-footer__legal {
    gap: 18px;
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .lt-footer--slim .lt-footer__legal a { font-size: 12px; }
  .lt-footer--slim .lt-footer__copy {
    font-size: var(--lt-fs-xs);
    padding-top: 14px;
  }
  .lt-footer--has-bottom-bar .lt-footer__inner { padding-bottom: 96px; }

  /* --- BARRA DE CONTACTO STICKY INFERIOR (detalle móvil) --- */
  .lt-sticky-cta {
    position: sticky;
    bottom: 0;
    z-index: var(--lt-z-bottom-bar);   /* 45 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--lt-surface);
    border-top: 1px solid var(--lt-border);
    padding: 12px 16px;
    box-shadow: var(--lt-shadow-bottom-bar);
    margin-top: -76px;                 /* se solapa sobre el footer */
  }
  .lt-sticky-cta__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .lt-sticky-cta__name {
    font-family: var(--lt-font-head);
    font-weight: 600;
    font-size: var(--lt-fs-chip);
    color: var(--lt-ink);
  }
  .lt-sticky-cta__status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--lt-fs-xs);
    font-weight: 600;
    color: var(--lt-open);
  }
  .lt-sticky-cta__status .lt-status__dot { width: 6px; height: 6px; }
  a.lt-sticky-cta__btn,
  .lt-sticky-cta__btn {
    background: var(--lt-primary);
    color: #FFFFFF;
    font-family: var(--lt-font-body);
    font-weight: 700;
    font-size: var(--lt-fs-chip);
    padding: 12px 20px;
    border-radius: var(--lt-r-xs);
    flex-shrink: 0;
    text-align: center;
    white-space: nowrap;
  }
  a.lt-sticky-cta__btn:hover { background: var(--lt-primary-hover); color: #FFFFFF; }
}


/* ==========================================================================
   19. CHASIS COMPARTIDO (base.html)
   Piezas que no salen literalmente en los mock-ups pero que el chasis real
   necesita: el offcanvas del menú móvil (el mock-up solo dibuja la
   hamburguesa, no el panel que abre) y la conmutación desktop/móvil del CTA
   del header.
   ========================================================================== */

/* El wordmark es un <a> en producción */
a.lt-wordmark { text-decoration: none; }
a.lt-wordmark:hover .lt-wordmark__text { color: var(--lt-ink); }
.lt-wordmark--on-dark:hover .lt-wordmark__text { color: #FFFFFF; }

/* Banderas del selector de país, al tamaño 16x12 del diseño */
.lt-country .country-flag {
  width: 16px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
  display: block;
}

/* Menú móvil */
.lt-offcanvas {
  background: var(--lt-canvas);
  border-left: 1px solid var(--lt-border);
  width: 320px;
}
.lt-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--lt-border);
  padding: 12px 16px;
}
.lt-offcanvas .offcanvas-body {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-9);
}
.lt-offcanvas__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lt-offcanvas__nav a {
  display: block;
  padding: 12px 10px;
  border-radius: var(--lt-r-ctl);
  font-size: 15px;
  font-weight: 600;
  color: var(--lt-text-2);
}
.lt-offcanvas__nav a:hover {
  background: var(--lt-surface);
  color: var(--lt-primary);
}
/* EL MENU DEL PANEL DEL ABOGADO, dentro de esta misma hamburguesa
   (2026-08-10, peticion literal del titular: "el menu deberia estar en la
   misma hamburguesa de arriba").

   Va PRIMERO en el offcanvas y separado por un filete: quien esta dentro de
   su panel viene a moverse por su panel, no a "Cómo funciona". El bloque
   solo existe cuando lo rellena una plantilla del panel -- para el
   directorio publico el hueco esta vacio y esta regla no pinta nada, ver el
   comentario de directory/templates/directory/base.html. */
.lt-offcanvas__panel {
  padding-bottom: var(--lt-s-6);
  margin-bottom: var(--lt-s-6);
  border-bottom: 1px solid var(--lt-border);
}
.lt-offcanvas__panel-group {
  margin: var(--lt-s-5) 0 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lt-text-3, var(--lt-text-2));
}
.lt-offcanvas__panel-group:first-of-type { margin-top: var(--lt-s-3); }
.lt-offcanvas__panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lt-offcanvas__panel-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 44px de alto: es un objetivo tactil, no una linea de texto. */
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--lt-r-ctl);
  font-size: 15px;
  font-weight: 600;
  color: var(--lt-text-2);
}
.lt-offcanvas__panel-list a.is-active {
  background: var(--lt-surface);
  color: var(--lt-primary);
}
.lt-offcanvas__panel-list a:hover { background: var(--lt-surface); }

a.lt-offcanvas__cta { width: 100%; }
/* Acceso al panel del abogado (Task 6, 2026-08-05): mismo criterio "discreto"
   que .lt-header__panel-link, adaptado al offcanvas -- texto centrado, más
   pequeño y sin el peso del CTA de cliente que va justo encima. */
/* min-height 44px (WCAG 2.5.8): medido a 375px en 20px de alto, el texto
   solo sin relleno -- mismo criterio que .lt-footer a mas arriba. */
.lt-offcanvas__panel-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: var(--lt-s-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--lt-text-2);
}
.lt-offcanvas__panel-link:hover { color: var(--lt-primary); }

/* Menu de cuenta (movil, revision visual 2026-08-05): mismo criterio oculto
   por defecto que la version de escritorio (#lt-account-menu) -- ver ese
   comentario. En vez del dropdown de Bootstrap, una lista simple: es lo que
   ya usa el resto del offcanvas (.lt-offcanvas__nav). */
.lt-offcanvas__account {
  border-top: 1px solid var(--lt-border);
  padding-top: var(--lt-s-7);
  margin-top: var(--lt-s-2);
}
.lt-offcanvas__account-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--lt-ink);
  margin-bottom: var(--lt-s-4);
}
.lt-offcanvas__account-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lt-offcanvas__account-list a,
button.lt-offcanvas__account-logout {
  display: block;
  width: 100%;
  padding: 12px 10px;
  border-radius: var(--lt-r-ctl);
  font-size: 15px;
  font-weight: 600;
  color: var(--lt-text-2);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--lt-font-body);
}
.lt-offcanvas__account-list a:hover,
button.lt-offcanvas__account-logout:hover {
  background: var(--lt-surface);
  color: var(--lt-primary);
}
.lt-offcanvas__countries {
  border-top: 1px solid var(--lt-border);
  padding-top: var(--lt-s-7);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 40vh;
  overflow-y: auto;
}
/* var(--lt-text-muted), no --lt-text-faint (revision de contraste
   2026-08-09): la etiqueta "País" media 2,29:1 sobre --lt-canvas -- --lt-
   text-faint es un gris decorativo pensado para acompañar un icono o un
   dato secundario junto a otro con mas peso, no para una etiqueta de
   seccion que se lee sola. */
.lt-offcanvas__title {
  font-family: var(--lt-font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lt-text-muted);
  margin-bottom: var(--lt-s-2);
}
.lt-offcanvas__country {
  display: flex;
  align-items: center;
  gap: var(--lt-s-4);
  padding: 10px;
  border-radius: var(--lt-r-ctl);
  font-size: 14px;
  font-weight: 600;
  color: var(--lt-text-2);
}
.lt-offcanvas__country:hover { background: var(--lt-surface); }
.lt-offcanvas__country.is-active { color: var(--lt-ink); background: var(--lt-surface); }
.lt-offcanvas__country .country-flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}
.lt-offcanvas__country .fa-check { color: var(--lt-verified); font-size: 12px; }

/* El dropdown de país del header hereda el chasis de Bootstrap: solo ajustamos
   la tipografía para que no desentone con el sistema. */
.country-switcher-menu { font-family: var(--lt-font-body); }

@media (max-width: 768px) {
  /* En móvil el CTA del header lo sustituye la hamburguesa (el CTA vive
     dentro del offcanvas).
     Se escribe `a.lt-header__cta` y no `.lt-header__cta`: este botón es un
     `a.lt-btn`, cuya regla `display: inline-flex` tiene especificidad (0,1,1)
     y le ganaba a un `.lt-header__cta` pelado (0,1,0) — el CTA seguía
     visible en móvil junto a la hamburguesa. */
  a.lt-header__cta { display: none; }
  /* Mismo motivo: en móvil el acceso al panel vive en el offcanvas
     (.lt-offcanvas__panel-link), no apretujado junto al selector de país y
     la hamburguesa.
     Y también el mismo detalle de especificidad: desde 2026-08-08 la regla
     base es `a.lt-header__panel-link` (0,1,1) — un `.lt-header__panel-link`
     pelado (0,1,0) perdería y el icono seguiría visible en móvil. */
  a.lt-header__panel-link { display: none; }
  /* Mismo motivo (revision visual 2026-08-05): en móvil el menú de cuenta
     vive en el offcanvas (.lt-offcanvas__account), no en la cabecera. */
  .lt-account-menu { display: none; }
}

/* Muro blando de contacto (spec 2026-07-14)
   Los chips llevan clase propia `.lt-contact__chip` y NO `.lt-chip`: esta
   sección va al final del fichero, así que redefinir `.lt-chip` aquí le pisaba
   el padding al chip del sistema de diseño en el resto de la web. */
.lt-contact__subtitle { margin: 0; font-size: .8125rem; color: var(--lt-text-muted); }

.lt-contact__chips-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--lt-text-2);
  margin-bottom: .5rem;
}
.lt-contact__chips {
  display: flex;
  /* Una sola fila que se desliza, no tres que se apilan. Con wrap, seis chips
     comían la primera pantalla del modal y el usuario veía etiquetas antes de
     entender qué se le pedía. El chip ya lleva `nowrap` por dentro, así que
     aquí basta con no envolver y dejar que desborde en horizontal. */
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: .375rem;
  margin-bottom: .875rem;
}
.lt-contact__chips::-webkit-scrollbar { display: none; }
.lt-contact__chip { flex: 0 0 auto; }

/* El botón y su línea legal, pegados al fondo del cuerpo del modal. Los dos
   juntos a propósito: esa línea es donde se acepta que el teléfono va al
   despacho, y un botón fijo con el aviso fuera de pantalla se puede pulsar sin
   haberlo leído nunca. El fondo es sólido para que el formulario pase por
   debajo, y los márgenes negativos lo llevan de borde a borde del cuerpo. */
.lt-contact__actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--lt-surface, #fff);
  /* Sin margen negativo ABAJO: hacia los lados sí, para llegar de borde a
     borde, pero si el pie sobresale por abajo del contenedor, `sticky` lo
     compensa tirando de él hacia arriba y se come 8px del párrafo anterior.
     Medido en el navegador. El hueco inferior lo pone el padding del cuerpo. */
  margin: 0 -1rem;
  padding: .75rem 1rem;
  box-shadow: 0 -10px 14px -10px rgba(0, 0, 0, .14);
}

/* El chip es secundario a propósito: el protagonista del formulario es el
   textarea. Es un atajo para romper el folio en blanco, no una decisión — por
   eso va pequeño y en gris, sin competir con el botón de enviar.
   `nowrap`: contact_chips.py ya limpia el prefijo SEO ("Abogados de
   Expropiaciones" -> "Expropiaciones"), pero etiquetas como "Licencias y
   permisos administrativos" siguen siendo largas, y ninguna longitud fija
   cubre las 173 subespecialidades sin truncar a mano nombre por nombre. Sin
   `nowrap` el chip se parte por dentro en dos líneas; con él se va entero a la
   fila siguiente. El ellipsis es la red para el caso patológico que ni así
   cabría: mejor un "…" que un chip más ancho que la pantalla. */
.lt-contact__chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--lt-border);
  background: var(--lt-surface-2, #F4F5F7);
  color: var(--lt-text-muted);
  border-radius: var(--lt-r-pill);
  padding: .3125rem .6875rem;
  font-size: .78125rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;

  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lt-contact__chip:hover {
  color: var(--lt-primary);
  border-color: var(--lt-primary);
}
.lt-contact__chip.is-active {
  background: var(--lt-primary);
  border-color: var(--lt-primary);
  color: #fff;
}

/* Desde el análisis IA el textarea pasa a modo lectura: el usuario ya
   escribió su caso, esto solo se lo enseñamos antes de pedirle el nombre. */
.lt-contact__readonly { background: var(--lt-surface-2, #f3f4f6); color: var(--lt-muted, #6b7280); }

/* Aviso del formulario relleno (spec 2026-08-23). Del segundo contacto en
   adelante el formulario sale con los datos de la consulta anterior, y el
   riesgo medido de eso es que se lea como que YA lo hemos mandado. Por eso el
   aviso va arriba del todo, con contraste suficiente para leerse sin buscarlo,
   y su primera línea dice justo eso: que todavía no se ha enviado nada.
   El borde de color es la única señal fuerte: nada se mueve, nada parpadea. */
.lt-contact__prefill {
  border: 1px solid var(--lt-border);
  border-left: 3px solid var(--lt-primary, #1a5cff);
  background: var(--lt-surface-2, #F4F5F7);
  border-radius: .5rem;
  padding: .625rem .75rem;
  margin: 0 0 1rem;
}
.lt-contact__prefill-title {
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 .1875rem;
}
.lt-contact__prefill-text {
  font-size: .75rem;
  line-height: 1.45;
  color: var(--lt-text-muted);
  margin: 0;
}
/* "(opcional)" al lado de una etiqueta: la etiqueta pesa, el paréntesis no. */
.lt-contact__optional { font-weight: 400; color: var(--lt-text-muted); }

/* El aviso de transparencia tiene que estar (deber de información del art. 13
   RGPD, y es lo que quita la sensación de vigilancia), pero es letra pequeña.
   Con el peso que tenía competía con el textarea y solo daba pereza. */
.lt-contact__privacy {
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--lt-text-muted);
  margin: .375rem 0 1rem;
}
.lt-contact__legal {
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--lt-text-muted);
  margin: .625rem 0 0;
  text-align: center;
}
/* La casilla de consentimiento (art. 9.2.a) del pie pegajoso. Reutiliza
   .lt-contact__legal para el texto, que venia de cuando era una linea
   centrada debajo del boton: con la casilla delante, "centrado" dejaba el
   texto flotando a la derecha y la casilla arriba a la izquierda (28-08).
   Rejilla auto/1fr en vez del padding negativo de .form-check, texto a la
   izquierda y sin margen: casilla y primera linea a la misma altura. */
.lt-contact__consent.form-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .125rem .625rem;
  align-items: start;
  padding: 0;
  margin: 0 0 .75rem;
}
.lt-contact__consent .form-check-input {
  float: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: .05rem 0 0;
  accent-color: var(--lt-primary, #C94F4F);
  flex: none;
}
.lt-contact__consent .lt-contact__legal {
  margin: 0;
  text-align: left;
  font-size: .75rem;
}
.lt-contact__consent .invalid-feedback { grid-column: 2; margin: 0; }
.lt-reveal__call {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: 1.25rem; border-radius: .75rem; text-decoration: none;
  background: var(--lt-primary, #1a5cff); color: #fff;
}
.lt-reveal__desktop { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.25rem; }
.lt-reveal__number { font-size: 1.75rem; font-weight: 700; letter-spacing: .02em; }
.lt-reveal__cta { font-size: .875rem; opacity: .9; }
.lt-reveal__hint { text-align: center; font-size: .875rem; color: var(--lt-muted, #6b7280); margin-top: .75rem; }

/* El paso antes del número (spec 2026-08-23, §4). Nombres en inglés, como todo
   identificador nuevo. Los dos botones van EN REJILLA y con w-100 para que
   salgan del MISMO tamaño, uno encima del otro:
   el «no» («No quiero análisis, dame el teléfono») tiene que pesar lo mismo
   que el «sí», o el paso deja de ser una pregunta y pasa a ser un peaje. */
.lt-offer__accent { color: var(--lt-primary); text-transform: uppercase; font-weight: 800; }
.lt-offer__title { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: 0 0 .5rem; }
.lt-offer__body { margin: 0 0 1rem; }
/* .625rem y no .5: dos objetivos táctiles apilados con 8 px de hueco se
   fallan con el pulgar. */
.lt-offer__buttons { display: grid; gap: .625rem; }
/* El enlace al informe ya terminado de la sesión (enmienda del titular,
   24-08): terciario a propósito -- no compite con los dos botones de
   arriba, que son la decisión real de esta pantalla. */
.lt-offer__previous {
  display: block; text-align: center; margin: .625rem 0 0; font-size: .8125rem;
  color: var(--lt-muted, #6b7280); text-decoration: underline;
}
.lt-offer__footnote { margin: .75rem 0 .25rem; font-size: .875rem; color: var(--lt-muted, #6b7280); }
.lt-offer__ai-notice { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--lt-muted, #6b7280); }
/* El campo del paso «completar el caso». form-control pone borde y foco;
   aquí va lo que importa: fuente de 16 px EXACTOS (1rem) -- por debajo,
   iOS hace auto-zoom al enfocar y descoloca las dos salidas -- y sitio
   para unas tres líneas sin crecer. La regla del bloque móvil de abajo
   repite el font-size con la especificidad del id, porque
   `#ltContactModal textarea.form-control` lo bajaría a 15px. */
.lt-offer__more-input { width: 100%; min-height: 4.5rem; font-size: 1rem; margin: 0 0 .75rem; }

/* --------------------------------------------------------------------------
   MÓVIL — hoja inferior, mismo patrón que #aiWizardModal (ver ai-wizard.css,
   sección "MÓVIL — el modal ocupa la pantalla completa", líneas ~556-620).

   Por qué hoja inferior y no pantalla completa PARA EL FORMULARIO: es una
   sola pantalla corta (chips + textarea + nombre + botón). Forzar 100dvh
   dejaría un vacío enorme entre el contenido y el botón, igual que le pasaba
   al wizard antes de este mismo cambio. La hoja se ajusta a su contenido y
   se ancla abajo: el botón queda al alcance del pulgar y, al abrirse el
   teclado (textarea o nombre), el contenido sube con él en vez de quedar
   flotando en medio de la nada. Mismos radios/alturas que el wizard para que
   los dos modales se sientan del mismo sistema de diseño.

   El PASO 2 (teléfono revelado) es la excepción: salta a PANTALLA COMPLETA,
   igual que la pantalla de "analizando" del wizard (.aiw-analyzing en
   ai-wizard.css ~609-618). Es el momento de recompensa —el usuario ya pagó
   el peaje (caso + nombre)— y merece protagonismo, no una hoja recortada.
   contact-reveal.js añade la clase .lt-contact--revealed al modal justo
   cuando se muestra el teléfono, y la quita al reabrir el modal (si no, el
   siguiente usuario vería el formulario ya a pantalla completa). -------- */
@media (max-width: 767.98px) {
  #ltContactModal .modal-dialog {
    max-width: 100%;
    width: 100%;
    margin: 0;
    min-height: 100%;
    align-items: flex-end;   /* pega la hoja al borde inferior */
  }
  #ltContactModal div.modal-content {
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    max-height: 92dvh;       /* si el contenido creciera (p. ej. muchos chips), scrollea dentro */
  }

  #ltContactModal .modal-header { padding: 18px 20px 14px 20px; }
  #ltContactModal .modal-title { font-size: 16px; }

  #ltContactModal .modal-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 22px 24px 24px 24px;
  }

  #ltContactModal textarea.form-control,
  #ltContactModal input.form-control {
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 15px;
  }

  /* 16 px exactos también aquí: la regla de arriba dejaría el campo del
     paso «completar» en 15px, y eso dispara el auto-zoom de iOS. */
  #ltContactModal textarea.lt-offer__more-input { font-size: 1rem; }

  /* El cuerpo usa 22px 24px 24px en movil: los margenes negativos del pie
     tienen que igualar ESE padding, no el 1rem de escritorio, o queda una
     rendija a los lados por la que se ve pasar el formulario. */
  #ltContactModal .lt-contact__actions {
    margin: 0 -24px;
    padding: 12px 24px;
  }

  #ltContactModal .lt-reveal__call { padding: 20px; }
  #ltContactModal .lt-reveal__number { font-size: 1.5rem; }

  /* --- PASO 2 · pantalla completa (mismos valores que .aiw-analyzing) --- */
  #ltContactModal.lt-contact--revealed .modal-dialog { align-items: stretch; }
  #ltContactModal.lt-contact--revealed div.modal-content {
    border-radius: 0;
    max-height: none;
    min-height: 100vh;
    min-height: 100dvh;
  }
  /* El teléfono queda centrado en el alto disponible, como .aiw-analyze
     (justify-content: center) — no pegado arriba con un vacío debajo. */
  #ltContactModal.lt-contact--revealed #ltContactStepReveal {
    flex: 1 1 auto;
    justify-content: center;
    padding: 24px;
  }
  #ltContactModal.lt-contact--revealed .lt-reveal__call { padding: 28px; }
  #ltContactModal.lt-contact--revealed .lt-reveal__number { font-size: 2rem; }
}

/* --------------------------------------------------------------------------
   ESCRITORIO — el modal cabe en la ventana y lo que se desplaza es el CUERPO.
   Bootstrap deja crecer `.modal-content` lo que mida el formulario (~700 px
   con chips, texto y consentimiento) y, si la ventana es mas baja, desplaza
   la capa entera: el pie con «Ver teléfono y llamar» -- que ya es `sticky`,
   ver `.lt-contact__actions` -- se va con ella por debajo del borde, porque
   su contenedor de scroll no es el cuerpo. Medido el 2026-09-11: a 1280x720
   se salia 34 px, y en un portatil real (ventana util de 600-650 px) el boton
   no se veia sin hacer scroll. Topando el contenido al alto de la ventana, el
   cuerpo pasa a ser el que se desplaza y el pie queda siempre a la vista. */
@media (min-width: 768px) {
  #ltContactModal div.modal-content {
    max-height: calc(100vh - 2 * var(--bs-modal-margin, 1.75rem));
    max-height: calc(100dvh - 2 * var(--bs-modal-margin, 1.75rem));
  }
  #ltContactModal .modal-body {
    min-height: 0;
    overflow-y: auto;
  }
}

/* --------------------------------------------------------------------------
   Cookiebot: el widget flotante (48x48, esquina inferior izquierda) llega con
   z-index 2147483631 — el máximo — y en móvil se planta ENCIMA de cualquier
   barra inferior: los filtros sticky de las landings, la barra CTA de la
   ficha y la hoja del modal de contacto. Verificado en producción: tapaba el
   chip "Especialidad" de los filtros.
   Ocultarlo aquí es legal: lo exigible es que el usuario PUEDA cambiar su
   consentimiento, y eso lo cubre el enlace "Configurar cookies" del footer
   (Cookiebot.renew()). En escritorio se queda, que ahí no tapa nada.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #CookiebotWidget { display: none !important; }
}


/* ==========================================================================
   VISTA PREVIA DE LA PROPIA FICHA + ESPECIALIDADES PLEGADAS
   ==========================================================================
   VA AQUI, no en page-static.css. Esa es la hoja del PANEL y la ficha no la
   carga: la primera version de estos estilos acabo alli y el resultado fue
   exactamente lo que se ve cuando no hay CSS -- la barra a sangre contra el
   borde de la ventana, el triangulito nativo del <details> y los dos
   rotulos del plegado ("+9 mas" y "Ver menos") a la vez.                   */

.lt-preview-bar {
  background: #FDF4E7;
  border-bottom: 1px solid #E9D6B4;
}
.lt-preview-bar__inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* El MISMO ancho y colchon que el resto de la pagina: el texto tiene que
     empezar donde empieza todo lo demas, no pegado al borde. */
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #6B4E16;
}
.lt-preview-bar svg { flex: none; margin-top: 2px; color: #B9822A; }
.lt-preview-bar__volver {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* se toca con el dedo */
  font-weight: 700;
  color: #6B4E16;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 700px) {
  .lt-preview-bar__inner { flex-wrap: wrap; padding: 12px 16px; }
  .lt-preview-bar__volver { margin-left: 0; }
}

/* --- Las 6 primeras especialidades, y el resto plegado ------------------- */
.lw-bullets-mas { margin-top: 14px; }

.lw-bullets-mas__toggle {
  /* `display: inline-flex` NO basta para quitar el triangulito: hay que
     quitar el `list-item` que trae <summary> por defecto. Con esto y las
     dos reglas de ::marker de abajo desaparece en todos los navegadores. */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--lt-border);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--lt-primary);
  cursor: pointer;
  list-style: none;
  transition: background .15s ease, border-color .15s ease;
}
.lw-bullets-mas__toggle:hover {
  background: var(--lt-surface);
  border-color: var(--lt-primary);
}
.lw-bullets-mas__toggle::-webkit-details-marker { display: none; }
.lw-bullets-mas__toggle::marker { content: ''; }

/* Una flechita nuestra, que gira: dice que esto se abre, y hacia donde. */
.lw-bullets-mas__toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .15s ease;
}
.lw-bullets-mas[open] .lw-bullets-mas__toggle::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* SOLO uno de los dos rotulos a la vez. Sin esto se leen los dos seguidos
   ("+9 mas Ver menos"), que es lo que se veia. */
.lw-bullets-mas__cerrar { display: none; }
.lw-bullets-mas[open] .lw-bullets-mas__abrir { display: none; }
.lw-bullets-mas[open] .lw-bullets-mas__cerrar { display: inline; }

/* Lo que se despliega, separado del boton para que se lea como un bloque
   nuevo y no como una continuacion apretada de la lista de arriba. */
.lw-bullets-mas > .lw-bullets { margin-top: 14px; }

/* ─── Foco visible en todo el sitio (accesibilidad, 22-10) ───────────────────
   El del tema (Bootstrap/Finder, --fn-focus-ring-color) era un halo de 4 px al
   10 % de opacidad, casi invisible. Dos tonos: el anillo oscuro se ve sobre
   fondo claro y el blanco de dentro, sobre fondo oscuro (cabecera, pie). Solo
   con :focus-visible (teclado), nunca al pulsar con el ratón. */
a:focus-visible, button:focus-visible, .btn:focus-visible, [role="button"]:focus-visible,
[tabindex]:focus-visible, summary:focus-visible, select:focus-visible,
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid #16202E;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF;
}