/* ═══════════════════════════════════════════════════════════════════════════ AIMA · assets/movil/contacto.css — ASISTENCIA en la versión de móvil nueva ─────────────────────────────────────────────────────────────────────────── 26/10/2026 · Bratney: «me adaptas material y asistencia, y que desaparezcan todas las demo móvil». Hasta hoy el teléfono veía aquí la pantalla negra de la app («Tu asesoría, gratis»), con su propio formulario escrito aparte. Ahora ve ESTA página, vuelta a montar para el pulgar por assets/movil/contacto.js. Va con el chasis (assets/aima-movil-2.css). EL ORDEN DE LA PÁGINA, de arriba abajo: 1 · la portada: la ceja, «ESTAMOS / AL OTRO LADO.» que sube renglón a renglón, la frase y la hora de Sabadell en su tarjeta 2 · los tres canales, uno debajo de otro, con su botón a todo lo ancho 3 · «Sin centralitas ni esperas», con lo de los pedidos y el IVA 4 · la banda negra de la reunión (la pone assets/aima-lead.js): el interés se elige tocando, y AMI escribe lo que dice su bocadillo Todo va bajo html.m2: sin esa clase esta hoja no toca nada. ═══════════════════════════════════════════════════════════════════════════ */ /* Lo que alcanza el tabulador no se queda debajo de la burbuja de AMI (abajo a la derecha: 12 + 56 px). El «Mándamelo gratis» se quedaba medio tapado. */ html.m2[data-movil="contacto"]{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom))} /* y el pie deja sitio debajo, para que sus últimos enlaces puedan subir por encima de ella (a 320 px, «Asistencia» se quedaba con el borde debajo) */ html.m2[data-movil="contacto"] #pie{padding-bottom:calc(84px + env(safe-area-inset-bottom))} /* ── 1 · LA PORTADA ──────────────────────────────────────────────────────── */ html.m2 #hero{min-height:0!important;display:block!important;text-align:left!important; padding:34px var(--m2-lado) 30px!important;background:var(--m2-papel)} html.m2 #hero .tag{animation:none!important;display:flex;align-items:center;gap:9px; font:600 10.5px/1.3 var(--m2-f-mont)!important;letter-spacing:.26em!important;color:var(--m2-t2)!important} html.m2 #hero .tag .facet{width:9px;height:8px} html.m2 #hero h1{animation:none!important;margin:18px 0 0!important; font:400 min(16.2cqi,84px)/.92 var(--m2-f-anton)!important;letter-spacing:.004em!important;color:var(--m2-tinta)} html.m2 #hero h1 em{color:var(--m2-rojo)} html.m2 #hero h1 .m2-linea-t{display:block;padding-bottom:.05em;clip-path:inset(-.5em -.4em 0 -.4em)} html.m2 #hero h1 .m2-linea-in{display:block;transform:translate3d(0,140%,0)} html.m2.m2-va #hero h1 .m2-linea-in{transform:none;transition:transform 1s var(--m2-ease) var(--m2-d,.12s)} html.m2 #hero .sub{animation:none!important;margin:20px 0 0!important;max-width:34ch; font-size:15.5px!important;line-height:1.62!important;color:var(--m2-t1)!important} /* lo de debajo del titular entra detrás, en cascada */ html.m2 #hero .m2-tras{opacity:0;transform:translate3d(0,14px,0)} html.m2.m2-va #hero .m2-tras{opacity:1;transform:none; transition:opacity .8s var(--m2-ease) var(--m2-d,.5s),transform .8s var(--m2-ease) var(--m2-d,.5s)} /* si el motor no llega: la portada se ve quieta, como siempre */ /* la hora de Sabadell: tarjeta con su piloto, en vez de la tira centrada */ html.m2 #hero .ahora{animation:none!important;display:grid!important;grid-template-columns:auto;justify-items:start;gap:12px!important; margin:24px 0 0!important;padding:16px 16px 17px!important;border-radius:20px!important; border:1px solid var(--m2-filete)!important;background:var(--m2-papel)!important;text-align:left!important; font:500 13.5px/1.55 var(--m2-f-mont)!important;color:var(--m2-t2)!important;width:100%} html.m2 #hero .ahora .et{padding:8px 14px 7px 12px} html.m2 #hero .ahora b{font:400 1.32em/1 var(--m2-f-anton);letter-spacing:.03em;color:var(--m2-tinta)} /* el piloto parpadea solo mientras se ve */ html.m2 #hero .ahora.abierto .et i{animation-play-state:var(--m2-juega,paused)} /* ── 2 · LOS CANALES ─────────────────────────────────────────────────────── */ html.m2 #canales{padding:14px 0 34px!important} html.m2 #canales > .wrap{padding:0 var(--m2-lado)!important} html.m2 .canales-grid{display:flex!important;flex-direction:column;gap:16px!important} /* el aparecer de la página (.in) no manda aquí: lo hace .m2-r */ html.m2 .canal{opacity:1;transform:none;border-radius:24px!important;padding:24px 20px 22px!important;gap:12px!important; border:1px solid var(--m2-filete)!important;box-shadow:none!important} html.m2 .canal.in{transition:opacity .75s var(--m2-ease) var(--m2-d,0s),transform .75s var(--m2-ease) var(--m2-d,0s)} html.m2 .canal:hover{transform:none;box-shadow:none;border-color:var(--m2-filete)} html.m2 .canal.m2-r{opacity:0;transform:translate3d(0,22px,0)} html.m2 .canal.m2-r.m2-visto{opacity:1;transform:none} html.m2 .canal.m2-r:focus-within{opacity:1!important;transform:none!important;transition:none!important} /* la primera, la de WhatsApp, lleva la mascota encima: deja su sitio */ html.m2 .canal:first-child{margin-top:84px} html.m2 .canal .ico svg{width:34px;height:34px} html.m2 .canales-grid .canal h3{font:400 clamp(22px,7.2cqi,27px)/1.08 var(--m2-f-anton)!important;letter-spacing:.012em!important; text-transform:uppercase;color:var(--m2-tinta)} html.m2 .canal .desc{font-size:14.5px!important;line-height:1.62!important;color:var(--m2-t2)} html.m2 .canal .dato{margin-top:2px;font:600 clamp(20px,6.4cqi,24px)/1.2 var(--m2-f-mont)!important;white-space:normal!important; color:var(--m2-tinta)} html.m2 .canal .dato.correo{font-size:clamp(18px,5.6cqi,21px)!important} html.m2 .canal .dato.espera{color:var(--m2-t3)} html.m2 .canal .nota{font-size:12px!important} html.m2 .canal .nota.vivo i{animation-play-state:var(--m2-juega,paused)} /* el botón, a todo lo ancho y a 52 px: es lo único que se viene a hacer aquí */ html.m2 .canal .pill{align-self:stretch!important;justify-content:center;min-height:52px;margin-top:8px;padding:0 20px!important; font:600 14px var(--m2-f-mont)!important} html.m2 .canal .pill:hover{transform:none;filter:none} html.m2 .canal .pill:active{transform:scale(.98)} html.m2 .canal .pill.linea:hover{background:none;color:var(--m2-tinta)} html.m2 .canal .pill.linea:active{background:var(--m2-tinta);color:#fff} /* el número y el correo se escriben al llegar (contacto.js): el texto de verdad se queda en su sitio, partido en lo escrito y lo que falta (en transparente: se lee, se copia y da la misma medida que al final) */ html.m2 .m2-teclea-falta{-webkit-text-fill-color:transparent} /* el cursor va fuera de la línea, en su sitio natural (detrás de la última letra escrita): no ocupa ancho ni deja dónde partir el renglón */ html.m2 .m2-teclea-cursor{position:absolute;display:inline-block;width:.42em;height:.9em;margin:.2em 0 0 3px; background:var(--m2-rojo);pointer-events:none;animation:m2-caret 1s steps(1) infinite} @keyframes m2-caret{50%{opacity:0}} /* la mascota que señala el WhatsApp y su bocadillo */ html.m2 .canal .masc{--mw:96px;right:16px;top:calc(var(--mw) * -.864 + 12px);animation-play-state:var(--m2-juega,paused)} html.m2 .canal .masc-di{right:calc(16px + var(--mw) + 12px);top:-46px;font-size:10.5px} html.m2 .canal .m2-pop{opacity:0;transform:translate3d(0,10px,0) scale(.92);transform-origin:100% 100%} html.m2 .canal.m2-visto .m2-pop{opacity:1;transform:none;transition:opacity .5s var(--m2-ease) .35s,transform .7s var(--m2-rebote) .35s} /* ── 3 · LAS NOTAS ───────────────────────────────────────────────────────── */ html.m2 .notas{display:block!important;margin-top:34px!important;padding-top:26px!important;border-top:1px solid var(--m2-filete)!important} html.m2 .notas .lema{font:500 clamp(27px,8.4cqi,33px)/1.08 var(--m2-f-corm)!important;letter-spacing:-.01em!important;color:var(--m2-tinta)} html.m2 .notas .lema em{color:var(--m2-rojo)} html.m2 .notas-txt{margin-top:18px} html.m2 .micro{font-size:13.5px!important;line-height:1.65!important;color:var(--m2-t2)!important} html.m2 .micro + .micro{margin-top:12px!important} /* más alto para el dedo, sin salirse del renglón (en línea: el relleno no lo parte) */ html.m2 .micro a.liga{padding:6px 0} html.m2 .trae{margin:0 0 22px!important;padding:18px!important;border-radius:20px!important} /* ── 4 · LA BANDA DE LA REUNIÓN (la pone assets/aima-lead.js) ────────────── Va con html.m2 delante: la hoja de aima-lead.js se inyecta después que ésta y, a igual peso, ganaría ella. */ html.m2 #aima-lead .alv-wrap{display:block!important;padding:84px var(--m2-lado) 54px!important} html.m2 #aima-lead .alv-kicker{margin-bottom:14px} html.m2 #aima-lead h2{font-size:clamp(34px,11.6cqi,46px)!important;line-height:1!important} html.m2 #aima-lead .alv-sub{font-size:15px!important;line-height:1.65!important} html.m2 #aima-lead .alv-scene{margin:44px 0 26px!important;max-width:none} html.m2 #aima-lead .alv-burbuja{right:0!important;top:-34px!important;max-width:64%} /* el bocadillo se escribe (contacto.js): mientras escribe, el cursor va detrás de la última letra; al acabar vuelve el suyo, el de la escena */ html.m2 #aima-lead .alv-burbuja.m2-teclea:not(.m2-tecleado) .alv-caret{visibility:hidden} html.m2 #aima-lead .alv-burbuja .m2-teclea-cursor{width:7px;height:12px;margin-top:2px;background:#C1272D} html.m2 #aima-lead .alv-puntos{gap:14px!important;margin-bottom:30px!important} html.m2 #aima-lead .alv-puntos li{font-size:14.5px!important} html.m2 #aima-lead form{padding:22px 18px!important;border-radius:22px!important;gap:16px!important} html.m2 #aima-lead .alv-fila{grid-template-columns:1fr!important;gap:16px!important} html.m2 #aima-lead input:not([type=checkbox]),html.m2 #aima-lead select{min-height:52px;border-radius:14px!important} html.m2 #aima-lead .alv-consent input{width:22px!important;height:22px!important;margin-top:0!important} html.m2 #aima-lead .alv-consent{font-size:13px!important;align-items:center} html.m2 #aima-lead button.alv-btn{justify-self:stretch!important;justify-content:center;min-height:54px;font-size:15px!important} html.m2 #aima-lead button.alv-btn:hover{transform:none;filter:none} html.m2 #aima-lead button.alv-btn:active{transform:scale(.98)} /* «¿Qué te interesa recibir?», tocando: las mismas opciones del desplegable, en fichas (el desplegable sigue ahí debajo y es el que se envía) */ /* su rótulo, como el de los demás campos (era el texto de su