/* ============================================================================ CORRECCIONES MÓVIL (≤768px) — 2026-07-27 Este archivo se carga DESPUÉS de styles.css y solo contiene reglas dentro de media queries de pantalla pequeña: la vista de escritorio (≥769px) no se ve afectada en absoluto. Problemas que corrige (medidos en viewport 390×844): 1. .hero__title tenía top:-46px/left:-24px ("lienzo congelado" de escritorio) sin reset móvil → título recortado por el borde izquierdo. 2. .hero__kicker-row tenía margin-top:585px sin reset móvil → ~630px de vacío negro en la primera pantalla. Además, decisión del owner 2026-07-27: hero móvil limpio (título → foto → CTA), sin el kicker "Otros ABOGADOS..." ni los chips flotantes. 3. Menú hamburguesa roto: el backdrop-filter del pill .nav lo hacía containing block del panel fixed → menú anclado al pill y traslúcido. 4. .legal-table desbordaba la página en terminos.html y reembolsos.html (524px/543px de documento sobre 390px de viewport). 5. Botón CTA con white-space:nowrap → riesgo de corte en teléfonos ≤360px. ============================================================================ */ @media (max-width: 768px) { /* ------------------------------------------------------------------ 1. Hero: neutralizar el lienzo de diseño congelado de escritorio ------------------------------------------------------------------ */ .hero__title { top: 0; left: 0; } /* Espacio inferior para los sellos absolutos (.hero__meta, bottom:32px) */ .hero { padding: 120px 0 170px; } /* ------------------------------------------------------------------ 2. Hero limpio en móvil [owner 2026-07-27]: título → foto del abogado → botón CTA. Sin kicker ni chips. .hero__text pasa a display:contents para que título y fila del CTA sean ítems directos del grid y se puedan reordenar con `order`. ------------------------------------------------------------------ */ .hero__text { display: contents; } .hero__title { order: 1; } .hero__visual { order: 2; } .hero__kicker-row { order: 3; margin-top: 0; align-items: center; width: 100%; } /* "Otros ABOGADOS ya no trabajan como tú..." no va en móvil */ .hero__kicker { display: none; } /* Visual: restaurar el contenedor colapsado (medía 0×0). Composición [owner 2026-07-27]: el globo terráqueo gira DETRÁS del abogado, cargado a la izquierda; la persona va a la derecha. Los chips flotantes se ocultan para no saturar la pantalla. */ .mobility__globe-wrap { width: min(92vw, 400px); } /* El grupo del globo pasa detrás de la persona (en escritorio tiene z-index 3, por encima de la foto) */ .globe-group { transform: none; z-index: 1; } .mobility__canvas { transform: translateX(-24%) scale(1.08); } .hero__person { height: 100%; right: 0; bottom: 0; } .mobility__card--2, .mobility__card--3, .mobility__card--4 { display: none; } /* ------------------------------------------------------------------ 3. Menú móvil: el JS lo re-ancla a (ver main.js) porque el backdrop-filter del pill .nav lo convertía en containing block del panel fixed (menú recortado/anclado al pill). Fondo sólido: con el translúcido original el contenido de la página se veía a través. ------------------------------------------------------------------ */ .nav__menu { height: 100dvh; background: #0A0A0F; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ------------------------------------------------------------------ 4. Tablas legales: scroll interno en vez de desbordar la página (terminos.html y reembolsos.html medían 524/543px de documento) ------------------------------------------------------------------ */ .legal-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Sin esto, .legal-body (ítem del grid .legal-layout) se dimensiona por el min-content que le impone la tabla ("grid blowout") y toda la página queda más ancha que el viewport (medido: 524/543px sobre 390) */ .legal-layout > * { min-width: 0; width: 100%; max-width: 100%; } } @media (max-width: 480px) { /* ------------------------------------------------------------------ 5. CTA del hero: permitir quiebre de línea en teléfonos angostos (el nowrap heredado de .nav__cta-inner mide ~301px; en pantallas de 320-360px con la fuente display real quedaría cortado) ------------------------------------------------------------------ */ .hero__quote-cta .nav__cta-inner { white-space: normal; text-align: center; justify-content: center; } }