/* ===================================================================
   XLUM — Correcciones de contraste, tipografía y alineación
   Revisión 2026-10-17. Esta hoja se carga la ÚLTIMA en todas las
   páginas de XLUM (no en el micrositio /seguros/, que tiene identidad
   propia). Cada bloque indica el problema que resuelve.
   =================================================================== */

/* -------------------------------------------------------------------
   1. CONTRASTE — texto gris oscuro sobre tarjetas oscuras
   Problema: `.section.light p{color:#4A525C}` (especificidad 0,2,1)
   gana sobre `.auto-index-card p{color:#AEB5BF}` (0,1,1). Las nueve
   tarjetas de /servicios/automotriz/ quedaban en 2.07:1 — ilegibles.
   Mínimo exigido por WCAG AA para texto de cuerpo: 4.5:1.
   ------------------------------------------------------------------- */
.section.light .auto-index-card p,
.section .auto-index-card p{color:#C3CAD3}                 /* 8.9:1 sobre #1B2028 */
.section.light .auto-index-card h3,
.section .auto-index-card h3{color:#F7F8FA}
.section.light .auto-index-card span,
.section .auto-index-card span{color:#FFD600}
.section.light .auto-index-card.broker-card span,
.section .auto-index-card.broker-card span{color:#9CC8EC} /* 7.4:1 sobre #1B2028 */

/* Mismo patrón en secciones oscuras: el pie de figura heredaba el gris
   de sección clara y quedaba en 2.39:1 sobre #0E1116. */
.section.dark .detail-split figcaption,
.section:not(.light):not(.cta) .detail-split figcaption{color:#AEB5BF}
.section:not(.light):not(.cta) .service-caveat{color:#AEB5BF}

/* -------------------------------------------------------------------
   2. ALINEACIÓN — anchos de contenedor dispares en la portada
   Todas las secciones usan .wrap (1180px, texto desde x=130). Tres
   quedaban fuera de esa retícula.
   ------------------------------------------------------------------- */

/* 2a. Banda de marcas: su título arrancaba a 20px del borde. */
.brand-strip > h2,
.brand-strip > .brand-strip-head{
  max-width:1180px;margin-inline:auto;padding-inline:22px;
}

/* 2b. Simulador VLT: vlt-selector.css lo fija en 1034px, y sólo la
       página comercial lo devolvía a 1180px. Resultado: en la portada
       y en residencial el módulo arrancaba 160px más adentro que el
       resto de las secciones. Se unifica a 1180px.
       Especificidad 0,2,1 — igual que la regla original, pero esta
       hoja se carga después. */
.vlt-module.vlt-commercial > .wrap,
.vlt-module.vlt-residential > .wrap{max-width:1180px}

/* Nota: el encabezado de #contacto arranca más adentro porque vive
   dentro de .contact-card, que tiene padding propio. Es correcto: no
   se toca. */

/* 2c. El texto del módulo VLT estaba centrado en la portada y en
       residencial, y alineado a la izquierda sólo en comercial. Todas
       las demás secciones del sitio son a la izquierda, así que el
       módulo quedaba como la excepción visual. Se unifica a la
       izquierda. Para volver al centrado, basta con borrar este bloque. */
.vlt-copy,
.vlt-module.vlt-residential .vlt-copy,
.vlt-module.vlt-commercial .vlt-copy{margin-inline:0;text-align:left}

/* -------------------------------------------------------------------
   3. SEPARACIÓN ENTRE SECCIONES OSCURAS CONSECUTIVAS
   En /servicios/comercial/ hay cuatro secciones oscuras seguidas
   (#0E1116, #0E1116, #141A21, #141A21). Sin separador se leen como un
   único bloque larguísimo.
   ------------------------------------------------------------------- */
.section.dark + .section.dark,
.vlt-module + .savings-section,
.commercial-why + .commercial-types{border-top:1px solid #272E38}

/* -------------------------------------------------------------------
   4. MARCADOR DE FAQ UNIFORME
   /servicios/automotriz/ y sus subpáginas no cargaban
   site-corrections.css y mostraban el triángulo por defecto del
   navegador en lugar del "+" del resto del sitio. Se replica aquí para
   que el marcador sea el mismo aunque cambie el orden de hojas.
   ------------------------------------------------------------------- */
.service-faq summary,.faq-list summary{
  list-style:none;position:relative;padding-right:48px;min-height:56px;
}
.service-faq summary::-webkit-details-marker,
.faq-list summary::-webkit-details-marker{display:none}
.service-faq summary::marker,.faq-list summary::marker{content:''}
.service-faq summary::after,.faq-list summary::after{
  content:'+';position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:1.7rem;font-weight:400;line-height:1;
}
.section.light .service-faq summary::after,
.section.light .faq-list summary::after{color:#0E1116}
.section:not(.light) .service-faq summary::after,
.section:not(.light) .faq-list summary::after{color:#FFD600}
.service-faq details[open] summary::after,
.faq-list details[open] summary::after{content:'−'}

/* -------------------------------------------------------------------
   5. ÁREA TÁCTIL MÍNIMA EN MÓVIL
   Enlaces del pie y del menú por debajo de 44px de alto.
   ------------------------------------------------------------------- */
@media(max-width:760px){
  .xlum-footer-grid a:not(.brand),
  .xlum-footer-grid button{padding-block:7px;min-height:38px}
}

/* -------------------------------------------------------------------
   6. MOVIMIENTO REDUCIDO — refuerzo global
   Las marquesinas ya lo respetan; esto cubre cualquier transición
   añadida más adelante.
   ------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* 2d. El módulo VLT usaba 64px/76px de padding vertical mientras el
       resto de las secciones usa 72px. Se unifica. */
.section.vlt-module{padding-block:72px}