/* ==========================================================================
   PAGE — FICHA DE ABOGADO  (directory/lawyer_detail_enhanced.html)
   ==========================================================================

   Complemento de legaltica-ds.css (que NO se toca: lo comparten otras páginas).
   Aquí solo vive lo exclusivo de la ficha:

     · el chasis de la página (contenedor, colocación en el grid de detalle)
     · la CALIBRACIÓN DE LOS STICKYS contra --lt-header-h (nada de números
       mágicos: el header mide 72px en desktop y 64px en móvil, y esa altura
       vive en la variable)
     · la fusión CTA + HORARIO en un único bloque oscuro en móvil
     · piezas de contenido real que el mock no dibuja (FAQs, equipo)

   Referencias: 2026/design/dc/Detalle Abogado.dc.html (desktop)
                2026/design/dc/Detalle Abogado Movil.dc.html (390px)
                2026/design/dc/DESIGN_SYSTEM.md §5.14–5.19, §6, §7.5–7.6
   ========================================================================== */


/* ==========================================================================
   1. CHASIS DE LA PÁGINA
   Desktop: max-width 1200 · padding 28px 32px 64px  (mock, línea 40)
   ========================================================================== */

.lw-page {
  padding-top: 28px;
  padding-bottom: 64px;
}

/* Columna principal: cards apiladas con gap 20px (mock, línea 51) */
.lw-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}


/* ==========================================================================
   2. COLOCACIÓN EN EL GRID + STICKYS  🔴
   ==========================================================================

   El sidebar de contacto es sticky. Para que un `position: sticky` tenga
   recorrido, su contenedor debe ser MÁS ALTO que él: por eso el elemento
   sticky (.lt-sticky-sidebar) va DENTRO de un <aside class="lw-side"> que se
   estira (align-self: stretch) a lo alto de las dos filas del grid.

   "Abogados similares" es hijo directo del grid (fila 2, columna 1) para que:
     · en DESKTOP quede dentro del ancho de la columna principal (1.9fr),
       exactamente como el mock;
     · en MÓVIL (una sola columna) caiga DESPUÉS del CTA "Solicita tu
       consulta", que es el orden del mock móvil.
   ========================================================================== */

@media (min-width: 769px) {
  .lw-main    { grid-column: 1; grid-row: 1; }
  .lw-similar { grid-column: 1; grid-row: 2; }
  .lw-side {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;   /* gana a `align-items: start` de .lt-detail-grid */
    min-width: 0;
  }
}

/* Sidebar sticky — 92px en el mock = 72px de header + 20px de aire.
   Calibrado contra la variable, no contra el número. */
.lt-sticky-sidebar {
  top: calc(var(--lt-header-h) + 20px);
}

/* Anclas (#reviews y las de las FAQs): que el header sticky no las tape. */
.lw-anchor {
  scroll-margin-top: calc(var(--lt-header-h) + 26px);
}

/* Barra de contacto inferior (móvil): el notch del iPhone.
   El resto (bottom: 0; z-index: 45; margin-top: -76px) ya lo da el DS, y el
   footer reserva sus 96px vía .lt-footer--has-bottom-bar. */
@media (max-width: 768px) {
  .lt-sticky-cta {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}


/* ==========================================================================
   3. PERFIL
   ========================================================================== */

/* La foto real puede no ser cuadrada: recortamos sin deformar. */
.lt-profile__photo { object-fit: cover; }

/* Rating del perfil: 15px en el mock (desktop), 14px en móvil. */
.lw-profile-rating { font-size: 15px; }

/* La etiqueta de la distribución ("5 ★") no debe partirse en dos líneas. */
.lt-dist-row__label { white-space: nowrap; }

/* Dirección con pin gris (13px desktop / 12.5px móvil). */
.lw-addr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--lt-text-muted);
}
.lw-addr svg { flex-shrink: 0; }


/* ==========================================================================
   4. LISTAS DE ESPECIALIDADES Y SERVICIOS
   Desktop: grid de 2 columnas, gap 12px.
   Móvil:   Especialidades → columna;  Servicios → sigue en 2 columnas.
   ========================================================================== */

.lw-bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lw-bullets a.lt-bullet { color: var(--lt-ink); }
.lw-bullets a.lt-bullet:hover { color: var(--lt-primary); }

.lw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Oficinas: una fila .lt-office por sede */
.lw-offices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* La barra sticky inferior usa un <button> (dispara openLawyerContact), no un <a>:
   hay que resetear el chrome nativo del botón. */
button.lt-sticky-cta__btn {
  border: none;
  cursor: pointer;
}


/* ==========================================================================
   5. CTA "SOLICITA TU CONSULTA" + HORARIO
   ==========================================================================
   Desktop: dos cards separadas (CTA oscuro + card blanca "HORARIO").
   Móvil:   UNA sola card oscura, con el HORARIO dentro tras un border-top.
            Como el HTML es el mismo en ambos viewports, la fusión se hace
            aquí con CSS (el DS ofrece .lt-hours--in-dark, pero exigiría
            cambiar la clase por viewport, cosa imposible en el template).
   ========================================================================== */

@media (max-width: 768px) {
  .lw-consult {
    gap: 0;
    background: var(--lt-ink);
    border-radius: var(--lt-r-xl);
    padding: 22px;
  }
  .lw-consult .lt-cta-dark {
    background: transparent;
    border-radius: 0;
    padding: 0;
  }
  .lw-consult .lt-hours {
    background: transparent;
    border: none;
    border-top: 1px solid var(--lt-dark-divider);
    border-radius: 0;
    margin-top: 12px;
    padding: 12px 0 0 0;
    gap: 8px;
  }
  .lw-consult .lt-hours .lt-label   { font-size: 11px; color: var(--lt-on-dark-faint); }
  .lw-consult .lt-hours__row        { font-size: 12.5px; }
  .lw-consult .lt-hours__day        { color: var(--lt-on-dark-muted); }
  .lw-consult .lt-hours__time       { color: #FFFFFF; }
  .lw-consult .lt-hours__time--closed { color: var(--lt-on-dark-faint); }
}


/* ==========================================================================
   6. ABOGADOS SIMILARES
   Desktop: grid de 4.  Móvil: carrusel horizontal full-bleed.
   ========================================================================== */

/* `min-width: 0` es OBLIGATORIO: .lw-similar es un ítem de grid y, por defecto,
   `min-width: auto` le impide encogerse por debajo del ancho de su contenido.
   Sin esto, el carrusel móvil (4 × 160px = 708px) no scrollea: revienta el
   ancho del documento y deja el footer y la barra sticky cortados. */
.lw-similar {
  min-width: 0;
}

.lw-similar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.lw-similar__head .lt-section-title { margin-bottom: 0; }
.lw-similar__head .lt-link-action   { font-size: 13.5px; white-space: nowrap; }

/* Fuera de una .lt-card el H2 de sección de la ficha sigue siendo de 21px */
.lw-similar .lt-section-title__h {
  font-size: var(--lt-fs-h2-card);
  letter-spacing: normal;
}

/* Desktop: grid de 4 mini-cards (gap 14px). En móvil pasa a carrusel (§8). */
.lw-similar__rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}


/* ==========================================================================
   7. CONTENIDO REAL QUE EL MOCK NO DIBUJA
   FAQs (rich results FAQPage) y equipo profesional. Se reestilizan con el
   lenguaje del sistema: .lt-card + .lt-section-title.
   ========================================================================== */

/* --- FAQs: <details> nativo, sin JS y con el texto siempre en el DOM --- */
.lw-faq {
  border-top: 1px solid var(--lt-divider);
  padding: 14px 0 0 0;
}
.lw-faq:first-of-type { border-top: none; padding-top: 0; }

.lw-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  font-size: var(--lt-fs-body);
  font-weight: 700;
  color: var(--lt-ink);
  padding-bottom: 14px;
}
.lw-faq__q::-webkit-details-marker { display: none; }
.lw-faq__q:hover { color: var(--lt-primary); }

.lw-faq__chevron {
  flex-shrink: 0;
  margin-top: 6px;
  transition: transform .2s ease;
}
.lw-faq[open] .lw-faq__chevron { transform: rotate(180deg); }

.lw-faq__a {
  margin: 0;
  padding-bottom: 14px;
  font-size: var(--lt-fs-sm);
  line-height: 1.65;
  color: var(--lt-text-2);
}

/* --- Equipo profesional --- */
.lw-team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lw-team__member {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--lt-canvas);
  border-radius: var(--lt-r-md);
  padding: 14px 16px;
}
.lw-team__photo {
  width: 40px;
  height: 40px;
  border-radius: var(--lt-r-ctl);
  object-fit: cover;
  flex-shrink: 0;
}
.lw-team__name {
  font-weight: 700;
  font-size: var(--lt-fs-sm);
  color: var(--lt-ink);
}
.lw-team__role {
  font-size: 12.5px;
  color: var(--lt-text-muted);
}


/* ==========================================================================
   8. OVERRIDES MÓVILES (390px)
   El detalle usa 16px de gutter lateral (el resto del sitio, 20px).
   DESIGN_SYSTEM §3.1: "Móvil: padding lateral 20px en Home y Listado;
   16px en Detalle".
   ========================================================================== */

@media (max-width: 768px) {

  .lw-page {
    padding-top: 18px;
    padding-bottom: 20px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .lw-main { gap: 14px; }

  /* Perfil */
  .lw-profile-rating { font-size: 14px; }
  .lw-addr { font-size: var(--lt-fs-sm); }

  /* Especialidades → una columna;  Servicios destacados → siguen en 2 */
  .lw-bullets            { grid-template-columns: 1fr; gap: 10px; }
  .lw-bullets--services  { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lw-bullets--services .lt-bullet { font-size: 13px; }

  .lw-chips { gap: 7px; }

  /* El DS reserva 16px para "5★" (sin espacio); aquí el label lleva espacio
     fino ("5 ★"), así que necesita 20px para no partirse. */
  .lt-dist-row__label { width: 20px; }

  /* Similares: carrusel full-bleed que se come el gutter de 16px */
  .lw-similar { margin-top: 8px; }
  .lw-similar__head { margin-bottom: 12px; }
  .lw-similar__rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 8px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lw-similar__rail::-webkit-scrollbar { display: none; }
  .lw-similar__rail > * { flex-shrink: 0; }

  /* Equipo */
  .lw-team { grid-template-columns: 1fr; gap: 10px; }
  .lw-team__member { padding: 12px 14px; gap: 12px; }

  /* FAQs */
  .lw-faq__q { font-size: var(--lt-fs-sm); }
  .lw-faq__a { font-size: var(--lt-fs-sm); }
}

/* El CTA del perfil convive en fila con la cita destacada. Sin esto, el flex
   lo encoge y "Contactar ahora" parte en dos líneas (en el diseño va en una). */
.lt-profile__actions .lt-btn {
  flex-shrink: 0;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Direcciones enlazadas a Google Maps
   --------------------------------------------------------------------------
   La URL la construye build_maps_url() en la vista (place_id > coordenadas >
   dirección en texto). Aquí solo el aspecto de "esto se puede pulsar".
   -------------------------------------------------------------------------- */

/* Dirección del encabezado del perfil */
a.lw-addr--link {
  color: var(--lt-text-muted);
  text-decoration: none;
  transition: color .15s ease;
}
a.lw-addr--link:hover {
  color: var(--lt-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Tarjeta de oficina: toda la tarjeta es el área de clic */
a.lt-office--link {
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}
a.lt-office--link:hover {
  border-color: var(--lt-primary);
  color: inherit;
}
a.lt-office--link:hover .lt-office__maps { color: var(--lt-primary-hover); }

.lt-office__maps {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--lt-fs-xs);
  font-weight: 700;
  color: var(--lt-primary);
}