/* ═══════════════════════════════════════════════════════════════════════════
movil.css · TouchColombia — TODA la experiencia móvil vive en este archivo.
---------------------------------------------------------------------------
REGLAS DEL ARCHIVO (no romper):
1. Se enlaza DESPUÉS de styles.css / sectores.css en todas las páginas.
2. Un solo breakpoint: max-width:768px. (Única excepción documentada: la
tira de chips de las landings usa 780px para coincidir con la regla de
sectores.css:31 que oculta el nav; si no, queda un hueco de 769-780px
sin navegación.)
3. Toda declaración lleva !important y todo selector arranca con `body`:
styles.css tiene ~400 !important fuera de media queries; sin esto el CSS
móvil no aplica.
4. Las utilidades .solo-movil / .solo-escritorio van PRIMERO dentro del
@media. Usan display:revert para no colisionar por especificidad con los
componentes (que necesitan flex/grid y vienen después).
5. No usa var(--...): styles.css y sectores.css definen sets distintos.
Hex literales de marca: #111C3A #E11E2C #28A6FF #0E5FBD #F5F7FB #25D366
6. Nunca declarar `display` sobre select, input ni textarea (rompe el
picker nativo y la validación de forms.js).
ROLLBACK DEL PROYECTO = borrar el de este archivo.
═══════════════════════════════════════════════════════════════════════════ */
/* --- Reglas base fuera del @media (aplican también en escritorio) --- */
.solo-movil{display:none}
.sticky-cta-mobile{display:none}
/* ACORDEONES SEO: en escritorio el no existe para el layout
(display:contents) y su resumen se oculta => la página se ve exactamente
igual que antes. El atributo `open` viene en el HTML, así que si el JS no
corre, TODO el contenido queda visible: nunca se pierde contenido. */
.macc{display:contents}
.macc-s{display:none}
@media (max-width:768px){
/* ══ 1 · UTILIDADES DE CONMUTACIÓN — SIEMPRE PRIMERO ══ */
body .solo-movil{display:revert!important}
body .solo-escritorio{display:none!important}
/* ══ 2 · BASE ══ */
body{padding-bottom:72px!important}
html{scroll-padding-top:64px!important}
/* ══ 3 · HERO MÓVIL DEL HOME — COMPOSICIÓN EN BANDA ══
Una foto de escena ancha (1,78:1) metida en un marco vertical se recorta al
26% de su ancho: se pierden las personas y el hall, y parece un zoom brutal.
Por eso la foto va en BANDA superior con su proporción natural — se ve la
escena completa — y el texto va debajo sobre navy. */
body .hero2{display:block!important;min-height:0!important;max-height:none!important;
padding:0 0 28px!important;background:#111C3A!important;overflow:visible!important}
body .hero2 picture{position:static!important;display:block!important;line-height:0!important}
body .hero2-img{position:static!important;width:100%!important;
height:clamp(215px,33vh,300px)!important;object-fit:cover!important;
object-position:50% 45%!important;display:block!important}
body .hero2-ol{display:none!important}
body .hero2-wrap{padding:20px 20px 0!important;max-width:none!important}
body .hero2-content{max-width:none!important;padding:0!important}
/* Píldora de cristal, apoyada sobre el borde inferior de la foto */
body .mpill{position:absolute!important;top:auto!important;margin-top:-34px!important;
left:20px!important;z-index:4!important;
display:inline-block!important;padding:7px 14px!important;border-radius:999px!important;
font-size:11px!important;font-weight:700!important;letter-spacing:.06em!important;
text-transform:uppercase!important;color:#fff!important;
background:rgba(10,16,38,.55)!important;border:1px solid rgba(255,255,255,.30)!important;
-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important}
body .hero2-title{font-size:31px!important;line-height:1.12!important;margin:0 0 12px!important}
body .hero2-title em{color:#FF3B47!important;font-style:normal!important}
body .hero2-sub{font-size:16px!important;line-height:1.5!important;margin:0 0 18px!important;
color:rgba(255,255,255,.92)!important;max-width:none!important}
/* Lo que NO va en el hero móvil */
body .hero2-ctas{display:none!important}
body .hero2-checks{display:none!important}
body .hero2-cards{display:none!important}
/* Tira de 3 cifras, sin caja */
body .mfig{display:flex!important;gap:0!important;margin:0 0 18px!important;
border-top:1px solid rgba(255,255,255,.18)!important;
border-bottom:1px solid rgba(255,255,255,.18)!important;padding:12px 0!important}
body .mfig > div{flex:1 1 0!important;text-align:center!important;
border-right:1px solid rgba(255,255,255,.14)!important}
body .mfig > div:last-child{border-right:0!important}
body .mfig b{display:block!important;font-family:'Space Grotesk',Inter,sans-serif!important;
font-size:21px!important;font-weight:700!important;color:#fff!important;line-height:1.1!important}
body .mfig span{display:block!important;font-size:12px!important;color:rgba(255,255,255,.72)!important;margin-top:2px!important}
/* Logos de cliente */
body .mlogos-t{display:block!important;font-size:11px!important;letter-spacing:.10em!important;
text-transform:uppercase!important;color:rgba(255,255,255,.62)!important;margin:0 0 10px!important}
/* Los .webp de clientes traen fondo blanco: se montan en chips claros
(invertirlos los convertía en rectángulos blancos sólidos). */
body .mlogos-g{display:grid!important;grid-template-columns:repeat(3,1fr)!important;
gap:8px!important;align-items:center!important}
body .mlogos-g img{display:block!important;width:100%!important;height:34px!important;
object-fit:contain!important;background:rgba(255,255,255,.94)!important;
border-radius:8px!important;padding:5px 7px!important;margin:0!important}
/* iPhone SE y similares: si no cabe, se corta contenido — nunca se comprime tipografía */
@media (max-height:680px){
body .mlogos{display:none!important}
body .hero2-title{font-size:28px!important}
}
/* ══ 4 · SECCIONES SECUNDARIAS → ACORDEÓN PLEGABLE ══
ANTES estaban con display:none y eso escondía el 74% del texto del home a
Google (que indexa con el renderizado móvil). Ahora viven en acordeones:
el usuario no carga con 38 pantallas y el contenido SÍ es alcanzable, que
es la condición que Google exige para darle peso normal. */
body .macc{display:block!important;background:#fff!important;
border-bottom:1px solid #E4EAF5!important}
body .macc-s{display:flex!important;align-items:center!important;
justify-content:space-between!important;gap:12px!important;
min-height:56px!important;padding:8px 20px!important;cursor:pointer!important;
font-family:'Space Grotesk',Inter,sans-serif!important;font-size:15px!important;
font-weight:700!important;color:#111C3A!important;list-style:none!important}
body .macc-s::-webkit-details-marker{display:none!important}
body .macc-s::after{content:"+"!important;flex:0 0 auto!important;
font-size:22px!important;font-weight:400!important;color:#E11E2C!important;line-height:1!important}
body .macc[open] > .macc-s::after{content:"–"!important}
body .macc[open] > .macc-s{border-bottom:1px solid #E4EAF5!important}
/* Dentro del acordeón las secciones pierden su relleno de escritorio */
body .macc > section{padding:18px 0 26px!important;min-height:0!important}
body .macc > section > .container{padding-left:20px!important;padding-right:20px!important}
/* ══ 5 · PATRÓN ÚNICO DE CARRUSEL (CSS puro, 0 JS) ══
76vw + snap centrado = la tarjeta siguiente asoma ~47px por lado.
La barra de scroll se CONSERVA fina y visible (como .gov2-strip): sin
ella un carrusel de 5 escenas se lee como una sola escena. */
body .tira{display:flex!important;overflow-x:auto!important;
scroll-snap-type:x mandatory!important;gap:12px!important;
padding:2px 20px 12px!important;margin:0 -20px!important;
scroll-padding-left:20px!important;
overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important;
scrollbar-width:thin!important;scrollbar-color:#E11E2C rgba(17,28,58,.10)!important}
body .tira::-webkit-scrollbar{height:4px!important}
body .tira::-webkit-scrollbar-track{background:rgba(17,28,58,.10)!important;border-radius:99px!important}
body .tira::-webkit-scrollbar-thumb{background:#E11E2C!important;border-radius:99px!important}
body .tira > *{flex:0 0 76vw!important;scroll-snap-align:center!important;min-width:0!important}
body .tira-hint{display:block!important;font-size:12px!important;font-weight:700!important;
letter-spacing:.06em!important;text-transform:uppercase!important;
color:#64748B!important;margin:0 0 10px!important}
/* Tarjeta única de todo el móvil: un solo radio, una sola sombra */
body .mcard{background:#fff!important;border:1px solid #E4EAF5!important;border-radius:16px!important;
box-shadow:0 6px 20px rgba(15,23,42,.07)!important;padding:18px!important;margin:0!important}
/* ══ 6 · BLOQUES MÓVILES NUEVOS ══ */
body .msec{padding:38px 20px!important}
body .msec-navy{background:#111C3A!important;color:#fff!important}
body .msec-cream{background:#F5F7FB!important}
body .msec-h{font-family:'Space Grotesk',Inter,sans-serif!important;font-size:24px!important;
line-height:1.2!important;font-weight:700!important;margin:0 0 8px!important;letter-spacing:-.02em!important}
body .msec-navy .msec-h{color:#fff!important}
body .msec-h em{font-style:normal!important;color:#E11E2C!important}
body .msec-navy .msec-h em{color:#FF3B47!important}
body .msec-p{font-size:15px!important;line-height:1.55!important;color:#475569!important;margin:0 0 18px!important}
body .msec-navy .msec-p{color:rgba(255,255,255,.80)!important}
body .msec-eyebrow{display:block!important;font-size:11px!important;font-weight:800!important;
letter-spacing:.12em!important;text-transform:uppercase!important;color:#E11E2C!important;margin:0 0 8px!important}
/* 6a · Qué hacemos — la rejilla 2×2 que reconstruye el Modelo 360 */
body .mqh{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:0 0 14px!important}
body .mqh > div{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important;
border-radius:16px!important;padding:14px!important}
body .mqh b{display:block!important;font-family:'Space Grotesk',Inter,sans-serif!important;
font-size:16px!important;color:#fff!important;margin:0 0 4px!important}
body .mqh span{display:block!important;font-size:13px!important;line-height:1.4!important;
color:rgba(255,255,255,.72)!important}
body .mqh-promise{font-size:15px!important;line-height:1.5!important;color:#fff!important;
font-weight:600!important;margin:0!important;padding:14px 16px!important;
background:rgba(225,30,44,.14)!important;border-left:3px solid #E11E2C!important;border-radius:0 12px 12px 0!important}
/* 6b · Recorrido del peso — 5 escenas */
body .mrec-card{display:flex!important;flex-direction:column!important;min-height:150px!important}
body .mrec-n{font-size:11px!important;font-weight:800!important;letter-spacing:.10em!important;
color:#E11E2C!important;margin:0 0 8px!important}
body .mrec-card b{display:block!important;font-family:'Space Grotesk',Inter,sans-serif!important;
font-size:16px!important;color:#111C3A!important;margin:0 0 6px!important;line-height:1.25!important}
body .mrec-card span{display:block!important;font-size:13.5px!important;line-height:1.5!important;color:#475569!important}
body .mrec-cierre{margin:16px 0 0!important;padding:16px!important;background:#111C3A!important;
border-radius:16px!important;color:#fff!important;font-size:15px!important;line-height:1.45!important;font-weight:600!important}
body .mrec-cierre em{font-style:normal!important;color:#9CC5FF!important;display:block!important;
font-size:12px!important;font-weight:700!important;letter-spacing:.06em!important;
text-transform:uppercase!important;margin-top:8px!important}
/* 6c · Tiles de sector con foto */
body .mtiles{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
body .mtile{position:relative!important;display:flex!important;align-items:flex-end!important;
min-height:104px!important;border-radius:16px!important;overflow:hidden!important;
text-decoration:none!important;background:#111C3A!important}
body .mtile img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
object-fit:cover!important;opacity:.55!important}
body .mtile span{position:relative!important;z-index:2!important;padding:12px!important;
font-family:'Space Grotesk',Inter,sans-serif!important;font-size:15px!important;
font-weight:700!important;color:#fff!important;text-shadow:0 2px 8px rgba(0,0,0,.5)!important}
/* 6d · Fila táctil reutilizable */
body .mrow{display:flex!important;align-items:center!important;gap:12px!important;
min-height:56px!important;padding:10px 0!important;border-bottom:1px solid #E4EAF5!important;
text-decoration:none!important}
body .mrow:last-child{border-bottom:0!important}
body .mrow b{flex:1 1 auto!important;font-size:15px!important;font-weight:600!important;color:#111C3A!important}
body .mrow i{flex:0 0 auto!important;font-style:normal!important;font-size:13px!important;color:#64748B!important}
/* 6d-bis · Foto de planta */
body .mcolombia-foto{width:100%!important;height:auto!important;border-radius:16px!important;
margin:0 0 16px!important;display:block!important}
/* 6e · Línea de precio */
body .mprecio{font-size:15px!important;line-height:1.55!important;color:#475569!important;margin:0!important}
body .mprecio a{color:#0E5FBD!important;font-weight:700!important}
/* ══ 6f · CASOS Y PRODUCTOS: las rejillas existentes pasan a carrusel ══
Se reutiliza el markup de escritorio (no se duplica contenido ni se
tocan las entradas del diccionario ES/EN). */
body section.cases,body section.products{padding:38px 0!important;min-height:0!important}
body section.cases > .container,body section.products > .container{padding:0 20px!important}
body .case-grid,body .products-grid{display:flex!important;overflow-x:auto!important;
scroll-snap-type:x mandatory!important;gap:12px!important;
padding:2px 20px 12px!important;margin:0 -20px!important;
grid-template-columns:none!important;
overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important;
scrollbar-width:thin!important;scrollbar-color:#E11E2C rgba(17,28,58,.10)!important}
body .case-grid::-webkit-scrollbar,body .products-grid::-webkit-scrollbar{height:4px!important}
body .case-grid::-webkit-scrollbar-track,body .products-grid::-webkit-scrollbar-track{background:rgba(17,28,58,.10)!important;border-radius:99px!important}
body .case-grid::-webkit-scrollbar-thumb,body .products-grid::-webkit-scrollbar-thumb{background:#E11E2C!important;border-radius:99px!important}
body .case-grid > *{flex:0 0 82vw!important;scroll-snap-align:center!important;min-width:0!important}
body .products-grid > *{flex:0 0 74vw!important;scroll-snap-align:center!important;min-width:0!important}
/* Salida desde cada caso hacia su landing */
body .mcase-link{display:flex!important;align-items:center!important;min-height:44px!important;
margin-top:12px!important;padding-top:10px!important;border-top:1px solid rgba(255,255,255,.18)!important;
font-size:14px!important;font-weight:700!important;color:#9CC5FF!important;text-decoration:none!important}
/* ══ 6g · LANDINGS SECTORIALES: compactación ══ */
body .sec-block{padding:36px 0!important}
body .sec-hero{padding:28px 0 34px!important;min-height:0!important}
body .sec-hero h1{font-size:29px!important;line-height:1.14!important}
body .sec-hero-lead{font-size:15.5px!important}
body .sec-hero-stats{gap:0!important}
body .sec-h2{font-size:23px!important;line-height:1.2!important}
body .sec-lead{font-size:15px!important}
/* Las rejillas de tarjetas se deslizan en vez de apilarse */
/* Sin márgenes negativos: el relleno del contenedor de las landings no es
uniforme y tirar de -20px producía desbordamiento horizontal de página. */
body .sec-grid,body .sfp-grid,body .eco-cards,body .gov-kiosco-grid{
display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;
gap:12px!important;padding:2px 0 12px!important;margin:0!important;
grid-template-columns:none!important;max-width:100%!important;
overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important;
scrollbar-width:thin!important;scrollbar-color:#E11E2C rgba(17,28,58,.10)!important}
body .sec-grid::-webkit-scrollbar,body .sfp-grid::-webkit-scrollbar,
body .eco-cards::-webkit-scrollbar,body .gov-kiosco-grid::-webkit-scrollbar{height:4px!important}
body .sec-grid::-webkit-scrollbar-thumb,body .sfp-grid::-webkit-scrollbar-thumb,
body .eco-cards::-webkit-scrollbar-thumb,body .gov-kiosco-grid::-webkit-scrollbar-thumb{
background:#E11E2C!important;border-radius:99px!important}
body .sec-grid > *,body .sfp-grid > *,body .eco-cards > *,body .gov-kiosco-grid > *{
flex:0 0 78vw!important;scroll-snap-align:center!important;min-width:0!important}
/* Restaurantes: tres galerías apiladas ocupaban 11 pantallas. A carrusel. */
body .rest-marcas-grid,body .rest-vers-gallery{
display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;
gap:12px!important;padding:2px 0 12px!important;margin:0!important;max-width:100%!important;
grid-template-columns:none!important;
overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important;
scrollbar-width:thin!important;scrollbar-color:#E11E2C rgba(17,28,58,.10)!important}
body .rest-marcas-grid::-webkit-scrollbar,body .rest-vers-gallery::-webkit-scrollbar{height:4px!important}
body .rest-marcas-grid::-webkit-scrollbar-thumb,body .rest-vers-gallery::-webkit-scrollbar-thumb{
background:#E11E2C!important;border-radius:99px!important}
body .rest-marcas-grid > *,body .rest-vers-gallery > *{
flex:0 0 78vw!important;scroll-snap-align:center!important;min-width:0!important}
body .rest-marca{max-height:none!important}
body .rest-marca img,body .rest-vers-gallery img{max-width:100%!important;height:auto!important}
/* Fila PIQUE de restaurantes: 4 pasos en fila desbordaban 98px. A rejilla 2×2. */
body .rest-steps{display:grid!important;grid-template-columns:1fr 1fr!important;
gap:14px!important;max-width:100%!important;overflow:visible!important}
body .rest-step{width:auto!important;max-width:100%!important;min-width:0!important;flex:none!important}
body .rest-step-img{width:100%!important;max-width:100%!important}
body .rest-step img{max-width:100%!important;height:auto!important}
/* La foto del cajero del ecosistema no gana una pantalla entera en móvil */
body .eco-visual,body .eco-cutout{max-height:220px!important}
body .eco-cutout img{max-height:200px!important;width:auto!important;margin:0 auto!important}
/* ══════════════════════════════════════════════════════════════════
6h · SISTEMA DE LANDINGS MÓVILES (.lm-*)
Mismo esqueleto para los 6 sectores, contenido propio de cada uno.
══════════════════════════════════════════════════════════════════ */
body .sec-wa-float,body .sec-page .wa-float{display:none!important}
/* ── HERO DE LANDING · COMPOSICIÓN EN BANDA (por defecto) ──
Las fotos de escena son apaisadas (1,33-1,78). Al forzarlas a un marco
vertical se recortaba más de la mitad del ancho y quedaban con un zoom
enorme: no se veía ni la máquina completa ni el entorno. La foto va arriba
con su proporción natural y el texto debajo sobre navy. */
body .lm-hero{position:relative!important;display:block!important;min-height:0!important;
padding:0 0 22px!important;background:#111C3A!important;overflow:visible!important}
body .lm-hero-img{position:static!important;width:100%!important;
height:clamp(215px,32vh,300px)!important;object-fit:cover!important;
object-position:50% 50%!important;display:block!important}
body .lm-hero-ol{display:none!important}
body .lm-pill{position:absolute!important;top:auto!important;margin-top:-34px!important;
left:20px!important;z-index:3!important;
display:inline-block!important;padding:7px 14px!important;border-radius:999px!important;
font-size:11px!important;font-weight:700!important;letter-spacing:.06em!important;
text-transform:uppercase!important;color:#fff!important;
background:rgba(10,16,38,.55)!important;border:1px solid rgba(255,255,255,.30)!important;
-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important}
body .lm-hero-c{position:relative!important;z-index:3!important;padding:20px 20px 0!important}
/* ── VARIANTE A PANTALLA COMPLETA (solo salud) ──
Su foto es vertical de origen (paciente + kiosco), así que no sufre recorte
y el resultado a sangre completa funciona. No extender a otras landings sin
una foto igualmente vertical. */
body .lm-hero-full{display:flex!important;flex-direction:column!important;
justify-content:flex-end!important;
min-height:calc(100vh - 199px)!important;min-height:calc(100dvh - 199px)!important;
padding:0 0 18px!important;overflow:hidden!important;background:#0A1026!important}
body .lm-hero-full .lm-hero-img{position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;object-position:50% 40%!important}
body .lm-hero-full .lm-hero-ol{display:block!important;position:absolute!important;inset:0!important;
background:linear-gradient(180deg,rgba(10,16,38,.14) 0%,rgba(10,16,38,.58) 46%,rgba(10,16,38,.95) 100%)!important}
body .lm-hero-full .lm-pill{top:112px!important;margin-top:0!important;
background:rgba(255,255,255,.14)!important}
body .lm-hero-full .lm-hero-c{padding:0 20px!important}
body .lm-h1{font-family:'Space Grotesk',Inter,sans-serif!important;font-size:28px!important;
line-height:1.12!important;font-weight:700!important;color:#fff!important;
letter-spacing:-.02em!important;margin:0 0 10px!important}
body .lm-h1 em{font-style:normal!important;color:#FF3B47!important}
body .lm-sub{font-size:15px!important;line-height:1.45!important;
color:rgba(255,255,255,.90)!important;margin:0 0 14px!important}
body .lm-figs{display:flex!important;margin:0 0 14px!important;padding:10px 0!important;
border-top:1px solid rgba(255,255,255,.18)!important;border-bottom:1px solid rgba(255,255,255,.18)!important}
body .lm-figs > div{flex:1 1 0!important;text-align:center!important;border-right:1px solid rgba(255,255,255,.14)!important}
body .lm-figs > div:last-child{border-right:0!important}
body .lm-figs b{display:block!important;font-family:'Space Grotesk',Inter,sans-serif!important;
font-size:20px!important;color:#fff!important;line-height:1.1!important}
body .lm-figs span{display:block!important;font-size:11.5px!important;color:rgba(255,255,255,.72)!important;margin-top:2px!important}
/* Los logos no caben en una pantalla junto al H1, subtítulo y cifras.
Se cortan del hero (la píldora ya lleva la prueba) y viajan al bloque
de resultados, donde sí tienen sitio. */
body .lm-hero .lm-logos-t,body .lm-hero .lm-logos{display:none!important}
body .lm-logos-t{display:block!important;font-size:10.5px!important;letter-spacing:.10em!important;
text-transform:uppercase!important;color:rgba(255,255,255,.60)!important;margin:0 0 7px!important}
body .lm-logos{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
body .lm-logos img{display:block!important;width:100%!important;height:28px!important;
object-fit:contain!important;background:rgba(255,255,255,.94)!important;
border-radius:8px!important;padding:5px 7px!important;margin:0!important}
body .lm-sec{padding:36px 20px!important;background:#fff!important}
body .lm-navy{background:#111C3A!important}
body .lm-cream{background:#F5F7FB!important}
body .lm-eyebrow{display:block!important;font-size:11px!important;font-weight:800!important;
letter-spacing:.12em!important;text-transform:uppercase!important;color:#E11E2C!important;margin:0 0 8px!important}
body .lm-h{font-family:'Space Grotesk',Inter,sans-serif!important;font-size:23px!important;
line-height:1.2!important;font-weight:700!important;color:#111C3A!important;
letter-spacing:-.02em!important;margin:0 0 16px!important}
body .lm-navy .lm-h{color:#fff!important}
body .lm-h em{font-style:normal!important;color:#E11E2C!important}
body .lm-navy .lm-h em{color:#FF3B47!important}
/* Antes / después */
body .lm-vs{display:grid!important;gap:12px!important}
body .lm-vs > div{border-radius:16px!important;padding:16px!important}
body .lm-vs-a{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important}
body .lm-vs-b{background:rgba(225,30,44,.13)!important;border:1px solid rgba(225,30,44,.42)!important}
body .lm-vs b{display:block!important;font-family:'Space Grotesk',Inter,sans-serif!important;
font-size:12px!important;letter-spacing:.10em!important;text-transform:uppercase!important;
margin:0 0 10px!important}
body .lm-vs-a b{color:rgba(255,255,255,.62)!important}
body .lm-vs-b b{color:#FF6B75!important}
body .lm-vs ul{margin:0!important;padding:0!important;list-style:none!important}
body .lm-vs li{position:relative!important;padding-left:20px!important;margin:0 0 9px!important;
font-size:14.5px!important;line-height:1.45!important;color:rgba(255,255,255,.86)!important}
body .lm-vs li:last-child{margin-bottom:0!important}
body .lm-vs-a li::before{content:"×"!important;position:absolute!important;left:0!important;
color:rgba(255,255,255,.45)!important;font-weight:800!important}
body .lm-vs-b li::before{content:"✓"!important;position:absolute!important;left:0!important;
color:#FF6B75!important;font-weight:800!important}
/* Filas de trámites / integraciones */
body .lm-rows{border-top:1px solid #E4EAF5!important}
body .lm-rows .mrow{display:flex!important;align-items:center!important;gap:12px!important;
min-height:56px!important;padding:10px 0!important;border-bottom:1px solid #E4EAF5!important}
body .lm-rows .mrow b{flex:1 1 auto!important;font-size:15px!important;font-weight:600!important;color:#111C3A!important}
body .lm-rows .mrow i{flex:0 0 auto!important;font-style:normal!important;font-size:12.5px!important;
color:#64748B!important;text-align:right!important;max-width:44%!important}
/* Cifras 2×2 */
body .lm-cifras{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
body .lm-cifras > div{background:#fff!important;border:1px solid #E4EAF5!important;
border-radius:16px!important;padding:16px 14px!important;text-align:center!important}
body .lm-cifras b{display:block!important;font-family:'Space Grotesk',Inter,sans-serif!important;
font-size:27px!important;color:#E11E2C!important;line-height:1.05!important}
body .lm-cifras span{display:block!important;font-size:12.5px!important;color:#475569!important;
margin-top:5px!important;line-height:1.35!important}
/* Logos reubicados aquí desde el hero: sobre fondo claro no necesitan chip */
body .lm-cream .lm-logos-t{color:#64748B!important;margin:20px 0 9px!important}
body .lm-cream .lm-logos img{background:#fff!important;border:1px solid #E4EAF5!important;height:34px!important}
/* ══ 7 · BARRA DE ACCIÓN — único CTA persistente del móvil ══ */
body .sticky-cta-mobile,
body .sec-sticky-cta{display:grid!important;grid-template-columns:38% 62%!important;
gap:8px!important;align-items:center!important;
position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:9997!important;
height:auto!important;padding:8px 12px calc(8px + env(safe-area-inset-bottom))!important;
background:rgba(17,28,58,.92)!important;
-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;
border-top:1px solid rgba(255,255,255,.12)!important}
body .sticky-cta-mobile a,
body .sec-sticky-cta a{display:inline-flex!important;align-items:center!important;
justify-content:center!important;gap:6px!important;min-height:48px!important;
border-radius:12px!important;font-size:14.5px!important;font-weight:700!important;
text-decoration:none!important;padding:0 10px!important;margin:0!important}
body .mbar-wa{background:transparent!important;color:#fff!important;
border:1.5px solid #25D366!important}
body .mbar-demo{background:#E11E2C!important;color:#fff!important;border:0!important}
/* El flotante de WhatsApp desaparece: su función la asume la barra */
body .wa-float{display:none!important}
/* La barra no puede tapar el pie del drawer (PBX + conmutador ES/EN) */
body:has(.mobile-drawer.open) .sticky-cta-mobile,
body:has(.mobile-drawer.open) .sec-sticky-cta{display:none!important}
body .mobile-drawer{z-index:9998!important}
/* ══ 8 · FORMULARIO ══ */
body .tc-lead-submit{background:#E11E2C!important;color:#fff!important}
body .tc-form-note{font-size:13px!important;color:#5a6478!important}
body .tc-cli-disclaimer{font-size:12px!important;color:#5a6478!important}
/* 16px evita el zoom automático de iOS al enfocar */
body input,body select,body textarea{font-size:16px!important}
body .tc-checkbox{min-height:48px!important;align-items:center!important;padding:8px 0!important}
body .tc-checkbox input[type=checkbox]{width:24px!important;height:24px!important;flex:0 0 24px!important}
/* ══ 9 · TIPOGRAFÍA Y ÁREAS TÁCTILES (fase final) ══ */
body p,body li{font-size:15px!important;line-height:1.55!important}
body .eyebrow{font-size:12px!important;letter-spacing:.08em!important}
/* Piso táctil DIRIGIDO, nunca con comodín `a`.
LECCIÓN APRENDIDA: un selector como `body a:not(...)` es (0,2,2) y GANA a
cualquier `body .x{display:none}` (0,1,1) — resucitaba el flotante de
WhatsApp y los enlaces del nav que sectores.css oculta. Se enumeran los
componentes reales. Nunca aplicar a select/input/textarea. */
body .mrow,body .sec-chip,body .mbar-wa,body .mbar-demo,
body .drawer-links a,body .drawer-cta,body .footer-col ul a,
body .btn,body .sec-btn,body .mcase-link,body button:not(.drawer-close){
min-height:44px!important;display:inline-flex!important;align-items:center!important}
body .nav-burger,body .drawer-close{display:inline-flex!important;align-items:center!important}
body .nav-burger{min-width:44px!important;min-height:44px!important;justify-content:center!important}
/* ══ 9b · PIE DE PÁGINA COMPACTO ══
Las columnas de enlaces pasan a 2 por fila: se conserva el objetivo
táctil de 44px y se reduce a la mitad la altura del pie. */
body footer.footer{padding-top:36px!important;padding-bottom:20px!important}
body .footer-grid{display:block!important}
body .footer-col{margin-bottom:20px!important}
body .footer-col ul{display:grid!important;grid-template-columns:1fr 1fr!important;
gap:0 12px!important;margin:0!important;padding:0!important}
body .footer-col ul li{margin:0!important}
body .footer-col ul a{min-height:40px!important;font-size:13.5px!important}
body .footer-brand{margin-bottom:22px!important}
/* ══ 10 · NAV Y DRAWER ══ */
body .top-bar{display:none!important}
body .drawer-links a{min-height:44px!important}
}
/* ═══════════════════════════════════════════════════════════════════════════
ÚNICA EXCEPCIÓN AL BREAKPOINT DE 768px — documentada y deliberada.
sectores.css:31 oculta los enlaces del nav de las landings a ≤780px.
Si la tira de chips apareciera solo a ≤768px, entre 769 y 780px las 6
landings quedarían SIN NINGUNA navegación. Aparecer y desaparecer deben
estar atados a la misma condición.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:780px){
body .sec-chips{display:flex!important;gap:8px!important;
overflow-x:auto!important;padding:10px 16px!important;margin:0!important;
background:#111C3A!important;border-top:1px solid rgba(255,255,255,.10)!important;
position:sticky!important;top:56px!important;z-index:900!important;
scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important}
body .sec-chips::-webkit-scrollbar{display:none!important}
body .sec-chip{flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;
min-height:36px!important;padding:0 14px!important;border-radius:999px!important;
font-size:13.5px!important;font-weight:700!important;white-space:nowrap!important;
text-decoration:none!important;color:rgba(255,255,255,.82)!important;
background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.16)!important}
body .sec-chip.activo{background:#E11E2C!important;color:#fff!important;border-color:#E11E2C!important}
}
/* ── 11 · Videos de kiosco en el inicio (ecosistema y mesa de ayuda): mismo
tamaño que en las landings (280 px) para no comerse la pantalla del celular. ── */
@media (max-width:768px){
body .eco-core .vkiosk,body .sla-video .vkiosk{max-width:280px!important;width:100%!important;margin:0 auto!important}
body .eco-core{padding-bottom:30px!important}
}