/* ============================================================
   La Rural — Parche responsive (drop-in)
   Cargar DESPUES de larural.css en el layout publico
   (layouts.blade.php). Usa !important donde hace falta para
   ganarle a los <style> inline por seccion del page-builder.
   Lo ideal a mediano plazo es editar cada seccion (ver informe),
   pero este archivo corrige los sintomas de inmediato.
   Verificado contra el sitio en vivo el 2026-06-07.
   ============================================================ */

/* 1) PLANES (seguros: automoviles/hogar/vida/comercio)
   Bug REAL: overflow horizontal ~42-57px en telefonos (<=420px).
   Causa: .list-cols-2 usa minmax(280px,1fr) y nunca colapsa a 1
   columna; en @media(768) solo se reduce el padding.
   planes_catalogo.blade.php:131 */
.bld-planescat .list-cols-2{
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
@media (max-width: 600px){
  .bld-planescat .list-cols-2{ grid-template-columns: 1fr !important; }
  .bld-planescat .card{ padding: 32px 22px !important; }
  .bld-planescat .cards-section{ padding-left: 16px !important; padding-right: 16px !important; }
}

/* 2) HERO INTERIOR: la foto se sale ~9px del viewport (clipeado,
   cosmetico). lr-hero__photo / bld-hero-int__photo */
.lr-hero__photo, .bld-hero-int__photo{ max-width: 100% !important; right: 0 !important; }

/* 3) TIMELINE "Nuestra Historia": layout 2-col al 50% no colapsa
   a 1 columna en mobile -> queda apretado.
   historia.blade.php / la-compania.blade.php */
@media (max-width: 768px){
  .lr-historia .timeline__track{ left: 18px !important; transform: none !important; }
  .lr-historia .timeline__item{
    width: 100% !important; margin-left: 0 !important;
    text-align: left !important; padding: 0 0 0 52px !important;
  }
  .lr-historia .timeline__item:nth-child(odd) .timeline__desc{ margin-left: 0 !important; }
  .lr-historia .timeline__dot{ left: 10px !important; right: auto !important; }
  .lr-historia .timeline__branch{ left: 18px !important; transform-origin: left !important; }
}

/* 4) STATS: grid inline rigido + .stat-num white-space:nowrap
   desbordan en tablet (769-1024) con 4-5 stats. */
.stat-num{ white-space: normal !important; }
@media (max-width: 1024px){
  .bld-stats .stats-bar{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
}

/* 5) HERO HOME: width:100vw incluye el ancho del scrollbar ->
   barra horizontal en desktop (hoy tapada por overflow-x:hidden).
   larural.css #hero-wrap/#mask-svg/#hero-photo */
#hero-wrap, #mask-svg, #hero-photo{ width: 100% !important; }
#hero-intro{ padding-right: 32px !important; }
#scroll-cue{ left: 50% !important; }

/* 6) DIRECTORIO / PERSONAL SUPERIOR: nombres/cargos truncados por
   white-space:nowrap + overflow:hidden en tablet (901-1024).
   equipo.blade.php */
@media (max-width: 1024px){
  .bld-equipo .lr-dir-item{ white-space: normal !important; }
  .bld-equipo .lr-dir-name, .bld-equipo .lr-dir-role{ min-width: 0; }
}

/* 7) TABLAS / contenido libre del CMS (secciones articulo y texto):
   sin overflow-x ni word-break -> se recorta en mobile.
   articulo.blade.php / texto.blade.php */
.bld-articulo .lr-article, .bld-texto .lr-article{ overflow-wrap: anywhere; }
.bld-articulo .lr-article table, .bld-texto .lr-article table{
  display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}

/* 8) CSS legacy del tema "fiado" cargado en el front (por si se
   reusa): min-width:900px y minmax(400px) rompen en mobile.
   GRAL.css / custom.css */
#element_pop_up_simple{ min-width: 0 !important; width: min(900px, 100%) !important; }
.imagen-grid{ grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important; }

/* 9) (Accesibilidad rapida) Foco visible global en el front. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible{
  outline: 2px solid #f8ad00; outline-offset: 2px;
}

/* 10) MENU MOBILE: acordeon de submenus (antes inaccesibles en celular).
   Acompana el cambio en header.blade.php (.mm-group/.mm-parent/.mm-sub). */
.mobile-menu.open{
  justify-content: flex-start;
  padding: 96px 20px 40px;
  overflow-y: auto;
  gap: 14px;
}
.mobile-menu .mm-group{ width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mobile-menu .mm-parent{
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: none; border: 0; cursor: pointer; font: inherit; color: var(--cream);
  font-size: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.mobile-menu .mm-caret{
  width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease; margin-top: -4px;
}
.mobile-menu .mm-group.open .mm-caret{ transform: rotate(-135deg); margin-top: 3px; }
.mobile-menu .mm-sub{
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
  display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%;
}
.mobile-menu .mm-group.open .mm-sub{ max-height: 70vh; }
.mobile-menu .mm-sublink{
  font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cream); opacity: .65; text-decoration: none;
}
.mobile-menu .mm-sublink:hover{ opacity: 1; color: var(--gold); }
.mobile-menu .mm-sublink.active{ opacity: 1; color: var(--gold); font-weight: 700; }