/* ==========================================================================
   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; }
/* 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);
}

/* 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);
}
h1.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; }
  h1.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; }
}

/* ==========================================================================
   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; }
}