/* ==========================================================================
   PAGE-LANDING.CSS — extras exclusivos de las LANDINGS (listados)
   ==========================================================================

   El grueso del diseño vive en legaltica-ds.css (clases lt-*). Este fichero
   solo añade lo que el listado necesita y el DS no cubre porque no sale en
   los mock-ups: los desplegables reales de los filtros, el overlay de
   "Filtrando resultados…", el acordeón de
   FAQs y el ritmo vertical sección a sección del listado.

   Prefijo: .lp-*  (landing page). Nunca se toca legaltica-ds.css.

   CALIBRACIÓN DE STICKYS
   ----------------------
   No hay números mágicos: todo se ancla a --lt-header-h (72px desktop /
   64px móvil, definida en el DS). La barra de filtros es
   `sticky; top: var(--lt-header-h); z-index: 40` (ya en el DS, .lt-filters)
   y el ancla #lawyers usa scroll-margin-top: header + alto de la barra.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Ritmo vertical del listado (paddings del diseño, sección a sección)
   -------------------------------------------------------------------------- */

/* Cabecera: breadcrumbs + H1 + intro + contador (+ caja CTA en desktop) */
.lp-head {
  max-width: var(--lt-container);
  margin: 0 auto;
  padding: 32px var(--lt-gutter) 8px var(--lt-gutter);
}
.lp-head__main {
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-6);
}

/* B-013: CTA de cabecera de las landings de problema. En desktop no existe
   (la caja oscura .lt-listing-cta ya cumple ese papel); en móvil esa caja se
   oculta y la primera pantalla se quedaba sin ningún CTA (el primer
   "Consultar" caía a 930-1025px con el fold en 844). Solo móvil. */
.lp-head-cta { display: none; }

/* Sección estándar del listado */
.lp-sec {
  max-width: var(--lt-container);
  margin: 0 auto;
  padding: 24px var(--lt-gutter);
}
.lp-sec--top    { padding-top: 40px; }
.lp-sec--bottom { padding-bottom: 48px; }
/* «Qué contarles al contactar» va PEGADA a la barra de confianza de #lawyers,
   no separada de ella (oleada de feedback del titular, 25-08, punto 2). Los
   dos aires se sumaban -- los 48 px de `lp-sec--bottom`, pensados para cuando
   el listado cerraba la página, MÁS los 24 de esta sección -- y dejaban 72 px
   muertos delante del <h2>. El margen negativo recorta 16 de esos 48 sin tocar
   `lp-sec--bottom`, que sigue siendo correcto cuando el listado va solo (una
   búsqueda sin análisis no pinta esta sección: la guarda es `strip_texts`). */
.lp-sec--analisis {
  margin-top: calc(-1 * var(--lt-s-7));
  padding-top: 0;
}
/* OJO: `lp-sec--bleed` (quitar el padding lateral) es SOLO PARA MÓVIL, donde la
   rejilla de ciudades se convierte en un carrusel que sangra a los bordes. Estaba
   declarada también aquí, fuera del media query, así que en DESKTOP la sección de
   ciudades perdía sus 32px de gutter: la rejilla arrancaba en el borde del
   contenedor (353px) en vez de alinearse con el H1, el header y el resto del
   contenido (385px), y toda la sección se veía más ancha que la página.
   La regla vive ahora únicamente dentro de @media (max-width: 768px). */

/* Ancla del listado: que el header + la barra de filtros no lo tapen */
#lawyers,
.lp-anchor {
  scroll-margin-top: calc(var(--lt-header-h) + 100px);
}

/* ANCLAS DEL INFORME (25-08). «Ver el análisis completo ↓» de la franja
   apuntaba a `#analisis` sin `scroll-margin-top`, así que el borde de la
   sección aterrizaba en el pixel 0 del viewport: los 72 px de cabecera pegada
   se comían el <h2> ENTERO y se caía a mitad de la tarjeta izquierda. Medido
   en el navegador antes de tocar nada: `h2.top = 0`, tapado por la cabecera.

   El offset se ata a `--lt-header-h` (72 desktop / 64 móvil, la define el DS)
   más un respiro de 24, como el resto de las anclas del sitio. El título es lo
   primero dentro de la sección -- `lp-sec--analisis` le quitó el padding
   superior -- y los tests de los dos modos fijan ese orden, que es de lo que
   depende que este número apunte al titular y no a un párrafo.

   `#lawyers` necesita AQUÍ su propio valor: los 100 px de arriba reservan
   sitio para la barra de filtros pegada, y el informe en modo tres NO la
   pinta (no filtra nada, ver el comentario de search.html). Con el valor
   general, «↑ Volver a los despachos» aterrizaba con 100 px de vacío bajo la
   cabecera. `:has()` mira si la barra está en la página en vez de fiarse del
   modo: donde no se soporte, se queda el valor de arriba -- que es el que
   había.

   LOS DOS VALORES NO SON EL MISMO, y no es un descuido: el respiro sobre el
   titular tiene que salir del relleno de la propia sección, no de enseñar el
   final de la anterior. `lp-sec--analisis` se quedó SIN relleno superior (el
   título es su primer píxel), así que el aire se lo da el ancla: header + 24.
   `#lawyers` sí conserva los 24 de `.lp-sec`, así que su ancla es la cabecera
   PELADA -- con header + 24 medí 25 px de sobra, y por ahí asomaba el borde
   inferior oscuro de la franja del expediente: una tira negra encajada bajo la
   cabecera. Los dos aterrizan con ~25 px sobre el titular; sólo cambia de
   dónde salen.

   NO hace falta `scroll-behavior: smooth`: ya lo pone el tema del vendor
   (`assets/css/theme.css`) sobre `:root`, y además envuelto en
   `@media (prefers-reduced-motion: no-preference)`, que es la forma correcta.
   Declararlo otra vez aquí sería duplicarlo SIN esa guarda. Lo que sí hacía
   falta era la misma guarda en el `scrollIntoView` de specialty-landing.js,
   que animaba a todo el mundo: ver el comentario de ese fichero. */
#analisis {
  scroll-margin-top: calc(var(--lt-header-h) + var(--lt-s-10));
}
body:not(:has(.lt-filters)) #lawyers {
  scroll-margin-top: var(--lt-header-h);
}

/* Aviso de fallback ("no hay abogados en X, te mostramos los de Y") */
.lp-notice {
  display: flex;
  align-items: center;
  gap: var(--lt-s-4);
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-left: 3px solid var(--lt-primary);
  border-radius: var(--lt-r-ctl);
  padding: 12px 16px;
  font-size: var(--lt-fs-sm);
  color: var(--lt-text-2);
}

/* Enlace "ver descripción completa" dentro de la intro.
   Necesita el selector de elemento para ganar a `body.lt a` (0,1,1). */
a.lp-more,
.lp-more {
  font-weight: 700;
  color: var(--lt-primary);
  cursor: pointer;
}
a.lp-more:hover { color: var(--lt-primary-hover); }

/* Bloque de contenido largo (markdown de la landing) */
.lp-prose {
  max-width: 760px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--lt-text-2);
}
.lp-prose h2, .lp-prose h3 {
  font-family: var(--lt-font-head);
  font-weight: 600;
  color: var(--lt-ink);
  margin: 28px 0 10px;
}
.lp-prose h2 { font-size: 20px; }
.lp-prose h3 { font-size: 17px; }
.lp-prose p  { margin: 0 0 14px; }
.lp-prose a  { color: var(--lt-primary); }

/* Grid de 2 columnas para los bloques de enlazado interno del final */
.lp-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

/* Lista de enlaces con contador (otras especialidades / otras ciudades) */
.lp-linklist {
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-3);
}


/* --------------------------------------------------------------------------
   2. FILTROS — desplegables reales (Bootstrap dropdown) sobre .lt-filter-btn
   -------------------------------------------------------------------------- */

/* El botón vive dentro de un .dropdown que debe ocupar su tercio de la barra */
.lt-filters__bar > .lp-filter {
  flex: 1;
  min-width: 0;
}
.lp-filter > .lt-filter-btn { width: 100%; }

/* Panel del desplegable */
.lp-filter-menu.dropdown-menu {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-md);
  box-shadow: 0 18px 44px rgba(22, 32, 46, 0.12);
  padding: 14px;
  margin-top: 8px;
  min-width: 340px;
  max-width: 460px;
  font-family: var(--lt-font-body);
}
.lp-filter-menu--wide.dropdown-menu { min-width: 420px; }

.lp-filter-search {
  width: 100%;
  box-sizing: border-box;
  background: var(--lt-canvas);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-ctl);
  padding: 9px 12px;
  font-family: var(--lt-font-body);
  font-size: 13.5px;
  color: var(--lt-ink);
  outline: none;
  margin-bottom: 10px;
}
.lp-filter-search:focus { border-color: var(--lt-primary); }

.lp-filter-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lp-opt {
  display: flex;
  align-items: center;
  gap: var(--lt-s-3);
  padding: 7px 8px;
  border-radius: var(--lt-r-ctl-sm);
  cursor: pointer;
}
.lp-opt:hover { background: var(--lt-canvas); }
.lp-opt__box {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--lt-primary);
  cursor: pointer;
}
.lp-opt__label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--lt-s-3);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lt-ink);
  cursor: pointer;
}
.lp-opt__label span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-opt__n {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--lt-text-muted);
  flex-shrink: 0;
}
.lp-opt--child { padding-left: 30px; }
.lp-opt--child .lp-opt__label { font-weight: 500; color: var(--lt-text-2); }

/* Chevron de despliegue de sub-especialidades */
/* var(--lt-text-faint) a proposito (revision de contraste 2026-08-09): el
   svg interior lleva aria-hidden="true" y el boton su propio aria-label
   ("Ver subespecialidades") -- es icono, no texto. */
.lp-tree-toggle {
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--lt-text-faint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .15s ease;
}
.lp-tree-toggle.is-open { transform: rotate(90deg); }
.lp-tree-toggle[hidden] { visibility: hidden; }
.lp-tree-children { display: none; }
.lp-tree-children.is-open { display: block; }

.lp-filter-foot {
  border-top: 1px solid var(--lt-divider);
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
  justify-content: flex-end;
}
button.lp-filter-clear {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--lt-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--lt-primary);
  cursor: pointer;
}
button.lp-filter-clear:hover { color: var(--lt-primary-hover); }

/* El checkbox de "Abierto ahora" del diseño es puramente visual: el input real
   va oculto para que el botón entero sea el área de clic. */
.lt-filter-btn__check.is-checked {
  background: var(--lt-primary);
  border-color: var(--lt-primary);
  position: relative;
}
.lt-filter-btn__check.is-checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Overlay "Filtrando resultados…" */
#filtering-overlay .lp-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(247, 245, 241, 0.82);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-overlay__box {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-xl);
  padding: 28px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lt-s-6);
  box-shadow: 0 24px 60px rgba(22, 32, 46, 0.18);
}
.lp-overlay__text {
  font-family: var(--lt-font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--lt-ink);
}
.lp-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--lt-divider);
  border-top-color: var(--lt-primary);
  animation: lp-spin .7s linear infinite;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lp-spinner { animation-duration: 2s; }
}




/* --------------------------------------------------------------------------
   3b. CTA final (sección oscura + formulario)
   -------------------------------------------------------------------------- */

.lp-cta-final__text {
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-6);
}


/* --------------------------------------------------------------------------
   4. FAQs — acordeón (chasis de Bootstrap, piel del design system)
   -------------------------------------------------------------------------- */

.lp-faq .accordion-item {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-md);
  margin-bottom: 10px;
  overflow: hidden;
}
.lp-faq .accordion-button {
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--lt-ink);
  background: var(--lt-surface);
  padding: 18px 20px;
  box-shadow: none;
}
.lp-faq .accordion-button:not(.collapsed) {
  background: var(--lt-surface);
  color: var(--lt-primary);
  box-shadow: none;
}
.lp-faq .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}
.lp-faq .accordion-body {
  padding: 0 20px 18px 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--lt-text-2);
}
.lp-faq .accordion-body p:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   5. Búsqueda (/buscar/) — piezas propias del análisis de IA
   -------------------------------------------------------------------------- */

.lp-search-form {
  display: flex;
  gap: 10px;
  max-width: 640px;
}
.lp-search-form .lt-input { flex: 1; }

/* El bloque del expediente (resultado del análisis) vive al final del fichero. */
.lp-analysis__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--lt-text-2);
}


/* --------------------------------------------------------------------------
   6. OVERRIDES MÓVILES (mismo breakpoint único que el DS)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .lp-head {
    padding: 20px var(--lt-gutter) 8px var(--lt-gutter);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .lp-head__main { gap: 12px; }
  /* El diseño móvil elimina la caja oscura "¿Necesitas abogados?" */
  .lp-head .lt-listing-cta { display: none; }
  /* ...y en las landings de problema su lugar lo ocupa el CTA compacto de la
     cabecera (B-013): mismo estilo que el "Ver abogados" de la caja oscura. */
  .lp-head-cta { display: flex; }

  .lp-sec        { padding: 20px var(--lt-gutter); }
  .lp-sec--top   { padding-top: 24px; }
  .lp-sec--bottom{ padding-bottom: 28px; }
  .lp-sec--bleed { padding-left: 0; padding-right: 0; }
  .lp-sec--bleed > .lt-section-title { padding: 0 var(--lt-gutter); }

  /* En móvil la barra de filtros ya no está arriba (va fija abajo), así que el
     ancla solo tiene que esquivar el header. */
  #lawyers,
  .lp-anchor { scroll-margin-top: calc(var(--lt-header-h) + 12px); }

  .lp-links-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Ciudades: el grid de 4 pasa a carrusel horizontal full-bleed (§7.4.5) */
  .lp-city-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 var(--lt-gutter) 8px var(--lt-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lp-city-grid::-webkit-scrollbar { display: none; }
  .lp-city-grid > * { flex-shrink: 0; }
  .lp-city-grid .lt-city-card--count { gap: 10px; }

  .lp-prose { font-size: 13.5px; line-height: 1.7; }
  .lp-notice { font-size: var(--lt-fs-sm); padding: 10px 12px; }

  /* Desplegables de filtro: a ancho de pantalla y anclados JUSTO ENCIMA de la
     barra (que ahora vive abajo), no colgando del header. Se limita el alto para
     que el panel no se coma la propia barra: hay que seguir viendo qué filtro
     está abierto y poder cerrarlo. */
  .lp-filter-menu.dropdown-menu,
  .lp-filter-menu--wide.dropdown-menu {
    position: fixed !important;
    top: auto !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;  /* alto de la barra + aire */
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    min-width: 0;
    max-width: none;
    width: auto;
    max-height: 58vh;
    overflow-y: auto;
    padding: 12px;
    border-radius: var(--lt-r-md);
    box-shadow: 0 -12px 40px rgba(22, 32, 46, 0.16);
  }
  /* El scroll lo lleva el panel entero, no la lista por dentro. */
  .lp-filter-list { max-height: none; }
  .lp-opt { padding: 9px 8px; }

  /* Proporciones de los 3 botones en móvil (1.2 / 1 / 1.1, como el diseño).
     Los dos primeros son wrappers .dropdown, así que la proporción se aplica
     al wrapper, no al botón. */
  .lt-filters__bar > .lp-filter:nth-child(1) { flex: 1.2; }
  .lt-filters__bar > .lp-filter:nth-child(2) { flex: 1; }
  .lt-filters__bar > .lp-filter:nth-child(3) { flex: 1.1; }


  /* CTA final móvil: la sección deja de ser una franja oscura full-bleed y se
     convierte en una card oscura (radius 18) con inputs blancos sin borde
     dentro; el formulario pierde su card blanca. Es literalmente el diseño
     móvil (§7.4 punto 9), que el DS por sí solo no puede producir. */
  .lp-cta-final { background: transparent; }
  .lp-cta-final .lt-cta-final {
    background: var(--lt-ink);
    border-radius: var(--lt-r-xl);
    margin: 0 var(--lt-gutter) 28px var(--lt-gutter);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .lp-cta-final .lp-cta-final__text { gap: 8px; }
  .lp-cta-final .lt-form {
    background: transparent;
    border-radius: 0;
    padding: 0;
    gap: 10px;
  }
  .lp-cta-final .lt-form__title { display: none; }
  .lp-cta-final .lt-input {
    background: var(--lt-surface);
    border: none;
  }

  span.lt-chip.lt-chip--neutral { font-size: 10.5px; padding: 2px 9px; }

  .lp-faq .accordion-button { font-size: 14.5px; padding: 15px 16px; }
  .lp-faq .accordion-body   { padding: 0 16px 15px 16px; font-size: 12.5px; }

  .lp-search-form { flex-direction: column; max-width: none; }
  .lp-search-form .lt-btn { width: 100%; }
}


/* ==========================================================================
   INTRO DE LA LANDING — recorte visual + "Ver más"
   ==========================================================================
   El texto completo está siempre en el DOM (bueno para SEO); lo que se recorta
   es la caja. En móvil se limita a 3 líneas para que los abogados aparezcan
   cuanto antes: es un listado, la descripción no debe empujarlos fuera de la
   pantalla. specialty-landing.js solo enseña el botón si el texto desborda.
   ========================================================================== */

.lp-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.lp-intro__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.lp-intro__text p { margin: 0 0 8px 0; }
.lp-intro__text p:last-child { margin-bottom: 0; }

.lp-intro.is-expanded .lp-intro__text {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

/* El "Ver más" ahora es un <button> (no un <a href="#"> que salta al top). */
button.lp-more {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--lt-font-body);
  font-size: var(--lt-fs-sm);
  font-weight: 700;
  color: var(--lt-primary);
  cursor: pointer;
}
button.lp-more:hover { color: var(--lt-primary-hover); }

@media (max-width: 768px) {
  /* 3 líneas: lo justo para saber de qué va la página. */
  .lp-intro__text { -webkit-line-clamp: 3; }
}


/* --------------------------------------------------------------------------
   Fila de chips de la lawyer-card
   --------------------------------------------------------------------------
   El chip de especialidad estaba DENTRO de .lt-rating (un flex con
   align-items: baseline y sin wrap). Al ser inline-flex y llevar padding,
   rompía la línea: la estrella y la nota acababan en renglones distintos y la
   fila crecía a 38px. Ahora vive aquí, en su propia fila.
   -------------------------------------------------------------------------- */

.lt-lawyer-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.lt-lawyer-card__tags .lt-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El rating vuelve a ser una sola línea, pase lo que pase. */
.lt-lawyer-card .lt-rating {
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* ==========================================================================
   EL EXPEDIENTE — resultado del análisis IA (/buscar/?ai_analysis=true)
   ==========================================================================
   Diseño: 2026/design/dc/Resultado Analisis Movil.dc.html (390px) y la opción
   1a de Resultado Analisis.dc.html (880px). Móvil primero; a partir de 768px
   el hero reparte gravedad/urgencia/ubicación en fila y el cuerpo se abre a
   dos columnas (situación + plan de acción).

   Ojo con la barra de 3 segmentos: Django no hace aritmética en plantillas,
   así que el "cuántos se encienden" lo decide el CSS a partir del nivel.
   ========================================================================== */

.lp-analysis {
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-8);
}

/* ----- Hero oscuro ----- */
.lp-expediente {
  position: relative;
  overflow: hidden;
  background: var(--lt-ink);
  border-radius: var(--lt-r-lg);
  padding: 22px 20px;
}
/* Resplandor rojo arriba a la derecha */
.lp-expediente::before {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(201, 79, 79, 0.22), transparent 70%);
  pointer-events: none;
}
.lp-expediente__eyebrow {
  position: relative;
  font-family: var(--lt-font-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--lt-on-dark-faint);
}
.lp-expediente__title {
  position: relative;
  margin: 10px 0 20px 0;
  font-family: var(--lt-font-head);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-wrap: balance;
}
.lp-expediente__signals {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-7);
}
.lp-signal {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.lp-signal__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--lt-on-dark-faint);
}
.lp-signal__why {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--lt-on-dark-muted);
}
.lp-signal--place {
  flex-direction: row;
  align-items: center;
  gap: var(--lt-s-3);
  border-top: 1px solid var(--lt-dark-border);
  padding-top: var(--lt-s-6);
}
.lp-signal__city {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 700;
  color: #FFFFFF;
}

/* ----- Barra de 3 segmentos: baja=1, media=2, alta=3 ----- */
.lp-bar {
  display: flex;
  gap: 3px;
}
.lp-bar i {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #33414F;          /* segmento apagado */
}
.lp-bar--baja  { --lp-bar-on: var(--lt-open); }
.lp-bar--media { --lp-bar-on: var(--lt-star); }
.lp-bar--alta  { --lp-bar-on: var(--lt-primary); }
.lp-bar--baja  i:nth-child(-n+1),
.lp-bar--media i:nth-child(-n+2),
.lp-bar--alta  i:nth-child(-n+3) { background: var(--lp-bar-on); }

/* En registro "proyecto" la barra no mide un peligro creciente, mide alcance y plazo:
   el rojo de alarma leería "algo va mal" sobre alguien que está montando una empresa.
   Igual en "consulta", que el prompt define como una duda sin daño hecho ni reloj
   corriendo: "PLAZO · ALTA" en rojo de marca contradice el propio registro.
   Mismo indicador de 3 segmentos, sin el código de alarma. Tratamiento provisional:
   el pase de diseño de la pantalla progresiva decidirá el definitivo. */
.lp-expediente--proyecto .lp-bar--media,
.lp-expediente--proyecto .lp-bar--alta,
.lp-expediente--consulta .lp-bar--media,
.lp-expediente--consulta .lp-bar--alta { --lp-bar-on: var(--lt-open); }

/* ----- Nota empática ----- */
.lp-empathy {
  background: #FBF1ED;
  border: 1px solid #F0D9D1;
  border-left: 4px solid var(--lt-primary);
  border-radius: var(--lt-r-sm);
  padding: 16px 18px;
}
.lp-empathy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #7A3B32;
}

/* ----- Cuerpo ----- */
.lp-expediente__body {
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-8);
}
.lp-expediente__situacion,
.lp-expediente__quote {
  min-width: 0;
}
.lp-expediente__body .lt-section-title { margin-bottom: var(--lt-s-4); }
/* Los títulos del expediente son de 17px (móvil) / 16px (desktop), no los 26px
   del título de sección genérico del DS: aquí compiten con el titular del hero. */
.lp-expediente__body .lt-section-title__h { font-size: 17px; }

/* Tarjeta "cómo suelen ir estos casos" */
.lp-note {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-sm);
  padding: 16px 18px;
}
.lp-note p {
  margin: 8px 0 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--lt-text-muted);
}
.lp-note__label {
  display: block;
  font-family: var(--lt-font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--lt-text-muted);
}

/* Cita: la descripción original del usuario */
.lp-quote {
  margin: 8px 0 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--lt-border);
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
  color: var(--lt-text-2);
}

/* ----- Plan de acción ----- */
.lp-plan {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-md);
  padding: 20px;
  align-self: flex-start;
}
.lp-plan .lt-section-title { margin-bottom: var(--lt-s-7); }
.lp-plan__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.lp-plan__step {
  display: flex;
  gap: var(--lt-s-5);
}
.lp-plan__num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lt-ink);
  color: #FFFFFF;
  font-family: var(--lt-font-head);
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* El último paso es el aviso: círculo rojo, como en el diseño. */
.lp-plan__step:last-child .lp-plan__num { background: var(--lt-primary); }
.lp-plan__text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--lt-text-2);
}

.lp-disclaimer {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #A8AFB9;
}

@media (min-width: 769px) {
  .lp-expediente {
    border-radius: var(--lt-r-xl);
    padding: 30px 32px;
  }
  .lp-expediente::before { width: 170px; height: 170px; }
  .lp-expediente__eyebrow { font-size: 11.5px; letter-spacing: 0.16em; }
  .lp-expediente__title {
    margin: 12px 0 22px 0;
    font-size: 27px;
    line-height: 1.25;
    max-width: 560px;
  }
  /* Gravedad, urgencia y ubicación en fila */
  .lp-expediente__signals {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 26px;
  }
  .lp-signal { gap: var(--lt-s-3); min-width: 190px; max-width: 280px; }
  .lp-signal__label { font-size: 11px; letter-spacing: 0.12em; }
  .lp-signal--place {
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    border-top: none;
    padding-top: 0;
  }
  .lp-signal__city { font-size: 14px; }
  .lp-bar i { flex: 0 0 26px; }

  .lp-empathy { padding: 18px 22px; }
  .lp-empathy p { font-size: 15px; }

  /* Cuerpo a dos columnas: a la izquierda situación + nota + cita, a la
     derecha el plan. Los 4 bloques son hermanos en el DOM (el orden que pide
     el diseño para móvil: situación, plan, nota, cita) y grid-template-areas
     los reparte en 2 columnas en desktop sin tocar ese orden del DOM. */
  .lp-expediente__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "situacion plan"
      "nota      plan"
      "cita      plan";
    row-gap: 20px;
    column-gap: 22px;
    align-items: start;
  }
  .lp-expediente__situacion { grid-area: situacion; }
  .lp-expediente__body .lp-note { grid-area: nota; }
  .lp-expediente__quote { grid-area: cita; }
  .lp-expediente__body .lp-plan { grid-area: plan; }
  .lp-plan { padding: 20px 22px; }
  /* El diseño desktop usa 14px de hueco número→texto y 16px entre pasos
     (12px/15px en móvil): un pelín más de aire al tener más ancho. */
  .lp-plan__list { gap: 16px; }
  .lp-plan__step { gap: 14px; }
  .lp-expediente__body .lt-section-title__h { font-size: 16px; }
  .lp-analysis__body { font-size: 13.5px; }
  .lp-note p { font-size: 12.5px; }
  .lp-plan__text { font-size: 12.5px; }
  .lp-disclaimer { font-size: 11.5px; }
}

/* ----- Franja compacta del expediente (modo tres, spec 2026-08-24 §2) -----
   `.lp-expediente--strip` se añade a `.lp-expediente`, no lo sustituye: el
   fondo oscuro, el radio y el resplandor rojo son los mismos de siempre. El
   modificador sólo reparte el contenido en tres tramos -- caso, señales,
   cierre -- que en móvil apilan (columna, con las barras de señal de
   siempre en vez de los chips del mock: más simple y más informativo,
   decisión de plan) y en escritorio van en una sola línea. */
.lp-strip__title { margin: 8px 0 6px 0; }   /* la franja no necesita el aire de 20px del hero */
.lp-strip__sub {
  margin: 0;
  font-size: 13px;
  color: var(--lt-on-dark-faint);
}
.lp-strip__case { margin-bottom: var(--lt-s-7); }
.lp-strip__signals {
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-6);
  margin-bottom: var(--lt-s-7);
}
.lp-strip__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lt-s-6);
  border-top: 1px solid var(--lt-dark-border);
  padding-top: var(--lt-s-7);
}
.lp-strip__note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--lt-on-dark-faint);
  /* Sin esto la frase parte «...de lo que / escribiste.» y deja la última
     palabra sola contra el borde derecho, justo encima del botón sólido.
     `pretty` sólo retoca las últimas líneas; donde no se soporta, no pasa
     nada -- se parte como se partía. */
  text-wrap: pretty;
}
/* Los dos botones a la MISMA anchura, la del más ancho de los dos. Sin esto
   quedaban a 225 y 201 px, uno debajo del otro y desalineados por la derecha
   -- el borde izquierdo del de abajo entraba 24 px, que es justo el defecto
   que se ve antes de leer el texto. `stretch` en una columna flex los lleva a
   la anchura del contenedor, y el contenedor la fija el contenido más largo. */
.lp-strip__aside .lt-btn { align-self: stretch; justify-content: center; }
/* LOS BOTONES DE LA FRANJA NO PESAN LO MISMO (oleada de feedback del
   titular, 25-08, punto 1, y SEGUNDA VUELTA en el punto 3). Primero fueron
   dos fantasmas idénticos que no decían cuál es LA acción; el punto 1 hizo
   sólido a «Ver el análisis completo ↓» y el punto 3 le quitó ese puesto
   -- en móvil la franja es alta y las tarjetas quedan lejos, así que el
   primario tiene que llevar A LOS DESPACHOS, no al análisis.

   Primario: «Ver los despachos para tu/su caso ↓» (`.lp-strip__link`).
   Relleno sólido en `--lt-surface` con `--lt-ink` encima -- el único relleno
   que se lee como primario sobre este fondo sin meter el rojo de marca, que
   en la franja ya lo gasta el resplandor de la esquina. Por eso la plantilla
   no le pone `.lt-btn--ghost-dark` y el estilo entero vive aquí: no es una
   variante del fantasma, es su contrario. Selector de dos clases (0-2-0)
   para ganar a `.lt-btn` sin depender del orden de carga entre las dos
   hojas. */
.lp-strip__link.lt-btn {
  background: var(--lt-surface);
  border: 1px solid var(--lt-surface);
  color: var(--lt-ink);
  font-weight: 700;
  font-size: var(--lt-fs-nav);
  padding: 12px 18px;
  border-radius: var(--lt-r-sm);
  white-space: nowrap;
}
.lp-strip__link.lt-btn:hover,
.lp-strip__link.lt-btn:focus-visible {
  background: var(--lt-canvas);
  border-color: var(--lt-canvas);
  color: var(--lt-ink);
}
/* Secundario: «Ver el análisis completo ↓», degradado a fantasma en el punto
   3 -- ya no es LA acción de la franja. Mismo padding/radio que el primario
   de arriba para que los botones apilados midan igual, y el borde subido a
   `--lt-on-dark-faint` como el gesto de correo de abajo, porque el
   `--lt-dark-border` (#2A3A4E) del DS casi no se lee sobre este fondo. */
.lp-strip__analysis-link.lt-btn--ghost-dark {
  border-color: var(--lt-on-dark-faint);
  white-space: nowrap;
  padding: 12px 18px;
  border-radius: var(--lt-r-sm);
}
/* Terciario: el gesto de correo, fantasma también, con el mismo borde subido
   a `--lt-on-dark-faint`. Y con el sobre delante (punto 1 de la primera
   oleada): el mismo dibujo que el gesto de `#analisis`, para que los dos
   accesos al mismo modal se reconozcan. */
.lp-strip__correo.lt-btn--ghost-dark {
  border-color: var(--lt-on-dark-faint);
  white-space: nowrap;
  font-size: 13.5px;
  padding: 12px 18px;
  border-radius: var(--lt-r-sm);
}
.lp-strip__correo-icono { flex: none; }

@media (min-width: 992px) {
  .lp-expediente--strip {
    display: flex;
    align-items: center;
    gap: var(--lt-s-12);
  }
  .lp-expediente--strip .lp-strip__case { flex: 0 0 260px; margin-bottom: 0; }
  .lp-expediente--strip .lp-strip__signals {
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 0;
  }
  .lp-expediente--strip .lp-strip__aside {
    flex: 0 0 200px;
    align-items: flex-end;
    text-align: right;
    border-top: none;
    padding-top: 0;
  }
  .lp-expediente--strip .lp-strip__note { text-align: right; }
}

/* ==========================================================================
   «QUÉ CONTARLES AL CONTACTAR»  (`#analisis`, modo tres, spec
   2026-08-24-informe-tres-rediseno §5, T6)
   ==========================================================================
   Dos tarjetas (`.lt-card`): apertura + situación + cómo suelen ir + qué se
   pierde por esperar + acciones a la izquierda; qué llevar preparado + la
   cita original + el descargo a la derecha. Una columna hasta 992px -- el
   mismo corte que `.lt-grid--report` (spec §3.3): dos columnas de texto denso
   no caben en un tercio de móvil.

   EL RITMO INTERNO (oleada de feedback del titular, 25-08, punto 3: «se ve
   desordenado»). Antes había UN solo margen de 20 px entre hermanos y ningún
   separador, así que los bloques no se distinguían: SITUACIÓN, CÓMO SUELEN IR
   y QUÉ SE PIERDE caían uno detrás de otro como si fueran el mismo texto. Y el
   descargo salía PEGADO a la cita, porque `.lp-disclaimer--inline { margin: 0 }`
   le ganaba a `> * + *` por orden de fichero (misma especificidad 0-1-0,
   declarado después) -- no era un ajuste, era un choque.

   Ahora hay una sola escala, la misma en las dos tarjetas: 20 px entre
   bloques, y un filete de 1 px con esos mismos 20 px A CADA LADO antes de
   cada rótulo que no abra la tarjeta y antes de la fila de acciones. El
   filete es lo que convierte una lista de párrafos en bloques, y es el mismo
   recurso del mock. `:first-child` se lo salta solo, así que un análisis sin
   `situation` no estrena la tarjeta con una raya al aire.

   LA ESCALA VA EN `gap`, NO en `> * + * { margin-top }` como antes, y es lo
   que arregla el aire de la fila de acciones: esa fila lleva `margin-top:auto`
   para bajarse al pie de la tarjeta, y un margen automático GANA al margen del
   selector de hermanos -- así que donde no sobraba altura (móvil, una sola
   columna) el filete se quedaba pegado al párrafo de arriba, 0 px por encima y
   20 por debajo. El `gap` de flex, en cambio, convive con el margen automático
   en vez de competir con él: los 20 px de arriba están garantizados y el
   `auto` sólo añade lo que sobre. El rótulo se come 12 de esos 20 con un
   margen negativo para pegarse a su párrafo -- pertenece a lo que va debajo,
   no flota entre dos bloques. */
.lt-report-analysis { grid-template-columns: 1fr; gap: var(--lt-s-8); }
.lt-report-analysis__col {
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-9);
  min-width: 0;
}
.lt-report-analysis__col .lp-note__label + p,
.lt-report-analysis__col .lp-note__label + ul,
.lt-report-analysis__col .lp-note__label + ol { margin-top: calc(-1 * var(--lt-s-5)); }
/* El rótulo abre bloque: filete encima, con el `gap` de arriba y este relleno
   dando el mismo aire a los dos lados. */
.lt-report-analysis__col > .lp-note__label {
  padding-top: var(--lt-s-9);
  border-top: 1px solid var(--lt-border);
  letter-spacing: 0.1em;
}
.lt-report-analysis__col > .lp-note__label:first-child {
  padding-top: 0;
  border-top: none;
}
/* El título con rombo de «Tu plan de acción» abre la tarjeta derecha: su aire
   inferior lo pone ya el `> * + *` del hermano siguiente, y el margen propio
   de `.lt-card .lt-section-title` (18 px) lo sumaba encima. */
.lt-report-analysis__col > .lt-section-title { margin-bottom: 0; }
.lt-report-analysis__lista,
.lt-report-analysis__pasos {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--lt-text-2);
}
/* La fila de acciones es el PIE de la tarjeta: `margin-top: auto` la baja del
   todo (las dos columnas del grid se estiran a la misma altura, así que en la
   corta el pie quedaría flotando a media tarjeta) y el filete la separa del
   texto igual que un rótulo separa un bloque. `stretch` iguala la altura de
   los dos botones aunque sólo uno lleve icono. */
.lt-report-analysis__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--lt-s-5);
  margin-top: auto;
  padding-top: var(--lt-s-9);
  border-top: 1px solid var(--lt-border);
}
.lt-report-analysis__acciones .lp-captura-gesto { min-height: 40px; }
/* Y si la fila se queda SIN botones -- pasa cuando el correo ya se dio
   (`analysis_email_dado`) y además el análisis no trae guion -- no se dibuja:
   si no, quedarían el filete y sus 20 px de relleno al pie de la tarjeta
   separando la nada, que es exactamente el defecto del rombo huérfano de más
   arriba en otro sitio. `:empty` no sirve (el <div> lleva dentro los saltos de
   línea de la plantilla); donde no haya `:has` se ve como hasta hoy. */
.lt-report-analysis__acciones:not(:has(button)) { display: none; }
/* `.lp-empathy`/`.lp-disclaimer` normales visten un contenedor con un <p>
   dentro (el texto lo pinta `.lp-empathy p`); aquí van sobre la propia
   etiqueta -- una tarjeta ya hace de contenedor -- así que el texto necesita
   su propio modificador. */
.lp-empathy--inline {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #7A3B32;
}
/* La apertura es el acento de la tarjeta izquierda, no un cartel: el filo rojo
   baja a 3 px y el relleno al de una nota, para que no pese más que el <h2>
   de la sección. */
.lt-report-analysis .lp-empathy--inline {
  padding: var(--lt-s-6) var(--lt-s-7);
  border-left-width: 3px;
  border-radius: var(--lt-r-sm);
}
.lp-disclaimer--inline { margin: 0; }
/* El descargo, con su aire (el choque de especificidad de arriba lo dejaba
   pegado a la cita; ahora lo separa el `gap` de la columna como a cualquier
   otro bloque) y un gris legible en vez del #A8AFB9 de 2,5:1. Sigue siendo lo
   más pequeño de la tarjeta: es un descargo, no un bloque más. */
.lt-report-analysis__col > .lp-disclaimer--inline {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--lt-text-muted);
}
.lt-report-analysis .lp-expediente__quote {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--lt-border);
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
  color: var(--lt-text-2);
}
/* EL PLAN DE ACCIÓN, dentro de la tarjeta derecha. Panel en `--lt-canvas`: la
   izquierda abre con la nota empática teñida y sin esto la derecha era una
   columna de texto suelto -- las dos tarjetas dejan de pesar lo mismo aunque
   midan distinto. Los círculos bajan de 26 a 22 px para que su centro caiga en
   la primera línea del paso (13,5 px x 1,55 = 21 px de renglón) y no dos
   píxeles por encima, y `flex-start` los ancla arriba: las líneas que doblan
   siguen colgando del mismo borde izquierdo, nunca por debajo del número. */
.lt-report-analysis .lp-plan__list {
  gap: var(--lt-s-6);
  background: var(--lt-canvas);
  border: 1px solid var(--lt-divider);
  border-radius: var(--lt-r-md);
  padding: var(--lt-s-8) var(--lt-s-9);
}
.lt-report-analysis .lp-plan__step { align-items: flex-start; gap: var(--lt-s-5); }
.lt-report-analysis .lp-plan__num {
  width: 22px;
  height: 22px;
  font-size: 11.5px;
}
.lt-report-analysis .lp-plan__text { font-size: 13.5px; line-height: 1.55; }

/* La vuelta a los despachos, centrada bajo las dos tarjetas. El aire de arriba
   es el mismo `--lt-s-12` que separa la franja de la lista: cierra el informe
   sin pegarse a la tarjeta. En móvil el botón ocupa el ancho -- es el último
   elemento de una página larga y ahí el pulgar agradece la diana entera. */
.lt-report-analysis__back {
  display: flex;
  justify-content: center;
  margin-top: var(--lt-s-12);
}
@media (max-width: 768px) {
  .lt-report-analysis__back .lt-btn { width: 100%; }
}

@media (min-width: 992px) {
  .lt-report-analysis { grid-template-columns: 1.05fr 1fr; }
}

/* ==========================================================================
   EL EXPEDIENTE MONTÁNDOSE  (spec 2026-08-21, análisis progresivo)
   ==========================================================================
   Lo que sustituye a la balanza girando, la cuenta atrás y la barra de
   progreso del modal: los tres eran setInterval de reloj de pared que no
   consultaban nada. Aquí no hay ni un temporizador: lo único que se mueve es
   el contenido apareciendo, y lo único que se anima es el HUECO de lo que
   todavía no ha llegado.

   Reglas que gobiernan todo este bloque:

   1. Nada finge contenido. Un hueco tiene la FORMA de lo que viene (dos
      líneas de titular, cuatro de párrafo, cuatro pasos con su círculo, una
      ficha con su retrato) pero nunca su aspecto: son piezas apagadas, no un
      texto de mentira ni un sustituto girando.
   2. La barra de 3 segmentos apagados YA es el hueco de una señal: un
      indicador sin lectura todavía. No hace falta animarla.
   3. Todo lo que se mueve es `animation`, nunca `transition`: la regla de
      prefers-reduced-motion de este proyecto sólo apaga `animation` (ver
      ai-wizard.css:655-662), así que una transición se quedaría fuera.
   4. Ni un `style=` en línea: hay CSP sin unsafe-inline y por eso los anchos
      de las líneas del hueco son clases (--96, --88, --62, --54) y los
      retardos los reparte :nth-child.
   ========================================================================== */

/* La tinta de los huecos: un token local que cambia según la superficie sobre
   la que caen. Se declara en las RAÍCES y no en .lp-hueco, para que la
   declaración del hero oscuro (que está más adentro) gane en su subárbol. */
.lp-analysis--montando,
.lp-abogados { --lp-hueco-tinta: var(--lt-border); }
.lp-expediente { --lp-hueco-tinta: rgba(255, 255, 255, 0.11); }
/* Sobre el rosa de la apertura, el beige de --lt-border no se ve: se usa el
   mismo tono que ya lleva el borde de esa caja. */
.lp-empathy--pendiente { --lp-hueco-tinta: #F0D9D1; }

/* ----- La línea de estado: lo ÚNICO que habla, y sólo de lo que pasa ----- */
.lp-montaje {
  display: flex;
  align-items: center;
  gap: var(--lt-s-3);
  margin: 0 0 var(--lt-s-2) 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lt-text-muted);
}
.lp-montaje__punto {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lt-primary);
  animation: lp-latido 1.7s ease-in-out infinite;
}
/* Terminado: el punto deja de latir y se pone verde. No es decoración -- es la
   diferencia entre "sigue pasando algo" y "ya está". */
.lp-montaje[data-montaje="listo"] .lp-montaje__punto {
  background: var(--lt-open);
  animation: none;
}
.lp-montaje[data-montaje="fallo"] .lp-montaje__punto {
  background: var(--lt-star);
  animation: none;
}

/* ----- Huecos ----- */
.lp-hueco {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.lp-hueco__linea {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: var(--lp-hueco-tinta, var(--lt-border));
  animation: lp-hueco-latido 1.9s ease-in-out infinite;
}
.lp-hueco__linea--96 { width: 96%; }
.lp-hueco__linea--88 { width: 88%; }
.lp-hueco__linea--62 { width: 62%; }
.lp-hueco__linea--54 { width: 54%; }
/* El hueco de una etiqueta de señal: corta y fina, como la palabra que viene */
.lp-hueco__linea--etiqueta {
  width: 108px;
  height: 8px;
  border-radius: 4px;
}
/* El latido corre de arriba abajo, como se escribe. Los retardos van por
   :nth-child porque un style="animation-delay" no pasa la CSP. */
.lp-hueco__linea:nth-child(2) { animation-delay: .13s; }
.lp-hueco__linea:nth-child(3) { animation-delay: .26s; }
.lp-hueco__linea:nth-child(4) { animation-delay: .39s; }

/* Titular: dos líneas gruesas con la altura real de un h1 del expediente */
.lp-hueco--titulo {
  gap: 11px;
  padding: 6px 0 5px 0;
}
.lp-hueco--titulo .lp-hueco__linea { height: 15px; border-radius: 7px; }

/* Apertura: dos líneas de párrafo dentro de la caja rosa */
.lp-hueco--apertura { gap: 8px; padding: 3px 0; }
.lp-hueco--apertura .lp-hueco__linea { height: 11px; }

.lp-hueco--parrafo { gap: 8px; }
.lp-hueco--nota { gap: 8px; margin-top: 10px; }
.lp-hueco--nota .lp-hueco__linea { height: 9px; }

/* Plan: cuatro pasos con su círculo apagado. Los círculos NO son
   .lp-plan__num a propósito -- ese lleva `:last-child { rojo }` y sobre un
   hueco pintaría de rojo un paso que no existe. */
.lp-hueco--plan { gap: 15px; }
.lp-hueco__paso {
  display: flex;
  align-items: flex-start;
  gap: var(--lt-s-5);
}
.lp-hueco__num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lp-hueco-tinta, var(--lt-border));
  animation: lp-hueco-latido 1.9s ease-in-out infinite;
}
.lp-hueco__lineas {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 6px;
}

/* Ficha de abogado: retrato y tres líneas, con la caja de la tarjeta real */
.lp-hueco--ficha {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--lt-s-6);
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-lg);
  padding: 18px;
}
.lp-hueco__retrato {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--lp-hueco-tinta, var(--lt-border));
  animation: lp-hueco-latido 1.9s ease-in-out infinite;
}

@keyframes lp-hueco-latido {
  0%, 100% { opacity: .40; }
  50%      { opacity: .92; }
}
@keyframes lp-latido {
  0%, 100% { opacity: .35; transform: scale(.82); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* ----- La entrada de un bloque que acaba de aterrizar -----
   `animation` y no `transition` (regla 3 de arriba). Corta y con poco
   recorrido: el movimiento tiene que leerse como "esto acaba de llegar", no
   como una animación de entrada. */
@keyframes lp-entra {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
.lp-entra { animation: lp-entra .42s cubic-bezier(.2, .7, .2, 1) both; }

/* Una señal vacía no debe dejar su hueco de flex abierto */
.lp-signal__why:empty { display: none; }

/* ----- Las tres preguntas ----- */
.lp-intake {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-md);
  padding: 20px;
}
.lp-intake .lt-section-title { margin-bottom: var(--lt-s-3); }
.lp-intake .lt-section-title__h { font-size: 17px; }
.lp-intake__sub {
  margin: 0 0 var(--lt-s-9) 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--lt-text-muted);
}
.lp-intake__lista {
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-10);
}
/* fieldset/legend: hay que desmontar lo que les pone el reboot de Bootstrap
   (legend flotada y a tamaño de titular). Selector con elemento para ganarle. */
fieldset.lp-intake__q {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
legend.lp-intake__label {
  display: block;
  float: none;
  width: 100%;
  margin: 0 0 var(--lt-s-4) 0;
  padding: 0;
  font-family: var(--lt-font-body);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--lt-ink);
}
.lp-intake__opciones { margin-top: 0; }

/* El botón de opción es .ps-claim-option de page-static.css: 14px/16px de
   padding (48px de alto, por encima del mínimo táctil de 44), texto que
   envuelve y :disabled resuelto. Aquí sólo se le añade lo que no tenía:
   estado elegido y su marca. */
.lp-opcion { align-items: center; }
.lp-opcion__texto {
  font-size: 14.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.lp-opcion__marca {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--lt-checkbox-border);
  background: var(--lt-surface);
}
.lp-opcion__marca::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}
.lp-opcion[aria-pressed="true"] {
  border-color: var(--lt-primary);
  background: var(--lt-surface);
  box-shadow: inset 0 0 0 1px var(--lt-primary);
}
.lp-opcion[aria-pressed="true"] .lp-opcion__marca {
  border-color: var(--lt-primary);
  background: var(--lt-primary);
}
.lp-opcion[aria-pressed="true"] .lp-opcion__marca::after { opacity: 1; }
/* El anillo de foco de .ps-claim-option usa rgba(201,79,79,…), que es el rojo
   RETIRADO en la revisión de contraste 2026-08-09. Éste es --lt-primary
   (#C54343) de verdad. */
.lp-opcion:focus-visible {
  outline: none;
  border-color: var(--lt-primary);
  box-shadow: 0 0 0 3px rgba(197, 67, 67, .20);
}
.ps-rm-input:focus-visible,
.lp-intake .ps-rm-input:focus,
.lp-correo .ps-rm-input:focus {
  border-color: var(--lt-primary);
  box-shadow: 0 0 0 3px rgba(197, 67, 67, .20);
}

.lp-intake__libre { margin: var(--lt-s-10) 0 0 0; }
.lp-intake__textarea { min-height: 84px; }
.lp-opcion-otra { margin-top: var(--lt-s-4); }

/* ----- El correo: cuarta tarjeta, cuando el expediente ya está entero ----- */
.lp-correo {
  margin-top: var(--lt-s-10);
  padding-top: var(--lt-s-9);
  border-top: 1px solid var(--lt-divider);
}
.lp-correo__sub {
  margin: 6px 0 var(--lt-s-7) 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--lt-text-muted);
}
.lp-correo__fila {
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-4);
}
.lp-correo__campo {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}
.lp-correo__btn {
  min-height: 46px;
  white-space: nowrap;
}
.lp-correo__estado--ok { color: var(--lt-open); font-weight: 600; }
.lp-correo__estado--error { color: #8E2F2F; }

/* ----- El hueco de los abogados ----- */
.lp-abogados {
  display: flex;
  flex-direction: column;
  gap: var(--lt-s-6);
}
.lp-abogados__nota {
  margin: 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--lt-text-muted);
}
.lp-abogados__accion { align-self: flex-start; }

/* ----- Aviso de que la parte profunda no llegó -----
   Conserva TODO lo que ya se pintó: es un aviso al lado, nunca un
   innerHTML que borre el expediente (que es lo que hacía showError()). */
.lp-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lt-s-5);
  background: #FDF6EC;
  border: 1px solid #EFDFC4;
  border-left: 4px solid var(--lt-star);
  border-radius: var(--lt-r-sm);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: #6A5326;
}
.lp-aviso__texto { flex: 1 1 240px; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .lp-montaje__punto,
  .lp-hueco__linea,
  .lp-hueco__num,
  .lp-hueco__retrato,
  .lp-entra { animation: none; }
}

@media (min-width: 769px) {
  .lp-montaje { font-size: 13px; }
  .lp-hueco--titulo .lp-hueco__linea { height: 19px; border-radius: 8px; }
  .lp-intake { padding: 22px 24px; }
  .lp-intake .lt-section-title__h { font-size: 16px; }
  /* Las tres, a la vista y en fila: el diseño prohíbe expresamente el
     "pregunta 1 de 3". Cada columna ronda los 360px en el contenedor de
     1200px, que aguanta una opción de 50 caracteres en dos líneas. */
  .lp-intake__lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--lt-s-9) var(--lt-s-10);
  }
  .lp-correo__fila { flex-direction: row; align-items: flex-start; }
  .lp-hueco--ficha { padding: 20px; }
}

/* --------------------------------------------------------------------------
   Rejilla "por ciudad" del listado
   --------------------------------------------------------------------------
   El diseño usa gap: 12px, no los 20px genéricos de .lt-grid--4. Con 20px la
   rejilla se veía mucho más aireada de la cuenta.
   -------------------------------------------------------------------------- */

.lp-city-grid {
  gap: 12px;
}

/* ==========================================================================
   ALERTA de una landing de problema — UNA por página, o ninguna.
   Va arriba, antes del listado: lo primero que hace un abogado en una consulta
   es cortar la hemorragia. Un aviso en el scroll 80% no ha salvado a nadie.

   NADA DE ROJO, ni sirenas, ni mayúsculas. El contenido ya es serio; el diseño
   no tiene que gritarlo. Si el diseño grita, el lector asume que el contenido
   es flojo. Y sin botón dentro: una alerta con CTA incrustado convierte la
   información en anzuelo, y se nota.
   ========================================================================== */
.lp-alerta {
  border-left: 3px solid var(--lt-star, #E8A33D);
  background: #FDF8EF;
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
}

/* "No hay prisa" o "esto puedes hacerlo tú solo": azul-gris, no ámbar.
   La credibilidad de las alertas urgentes se financia con las que dicen
   "tranquilo, tienes tiempo". */
.lp-alerta--depende {
  border-left-color: #8A93A0;
  background: #F5F6F7;
}

.lp-alerta__title {
  margin: 0 0 6px 0;
  font-family: var(--lt-font-body, 'Manrope', sans-serif);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--lt-ink, #16202E);
}

.lp-alerta__body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: #3F4854;
}

@media (max-width: 768px) {
  .lp-alerta { padding: 14px 16px; }
}

/* «Ver los despachos para tu caso» es un remedio de MOVIL (peticion del
   titular, 25-08): en pantalla ancha las tarjetas estan justo debajo de la
   franja y el boton sobra. En escritorio se esconde, y «Ver el analisis
   completo» recupera el tratamiento primario que tenia antes de la oleada
   (mismas reglas que .lp-strip__link, aplicadas a su clase). */
@media (min-width: 992px) {
  .lp-strip__link.lt-btn { display: none; }
  .lp-strip__analysis-link.lt-btn {
    background: var(--lt-surface);
    border-color: var(--lt-surface);
    color: var(--lt-ink);
    font-weight: 700;
  }
  .lp-strip__analysis-link.lt-btn:hover,
  .lp-strip__analysis-link.lt-btn:focus-visible {
    background: var(--lt-canvas);
    border-color: var(--lt-canvas);
    color: var(--lt-ink);
  }
}