/* ================================================================ DENTALÁSER — MOBILE OVERRIDE mobile.css · Carga DESPUÉS de styles.css ================================================================ */ /* 1. Evitar scroll horizontal global body ya tiene overflow-x:hidden pero el contenedor scroll real en iOS/Android es — hay que sellarlo aquí también */ html { overflow-x: hidden; } /* 0. Fix: nav.hero-breadcrumb es un

semántico dentro del hero, NO el menú principal. La regla global `nav { position:fixed; top:0 }` de styles.css lo captura y lo pega al borde superior del viewport — reset completo. */ nav.hero-breadcrumb { position: relative; top: auto; left: auto; right: auto; z-index: auto; padding: 0; justify-content: flex-start; background: transparent; transition: none; } /* 2. Secciones que no tienen overflow:hidden y cuyo contenido decorativo (pseudo-elementos, glows absolutos) puede sobresalir */ .confiar-section, .ba-section, .team-section, .services-section, .stats-section, .testimonials-section, .sedes-section, .insta-section { overflow-x: hidden; } /* 3. Tablas: el wrapper DIV ya tiene overflow-x:auto inline; esta regla asegura que el wrapper no supere el 100% del contenedor */ div[style*="overflow-x:auto"], div[style*="overflow-x: auto"] { max-width: 100%; } /* ── BREAKPOINT < 480px ────────────────────────────────────────── */ @media (max-width: 480px) { /* Navegación */ nav { padding: 16px 20px; } nav.scrolled { padding: 12px 20px; } .nav-logo img { height: 36px; } /* Contenedores */ .container { padding: 0 16px; } /* Hero de subpáginas */ .page-hero { padding: 96px 16px 44px; } .contact-hero { padding: 96px 16px 44px; } /* Hero H1 — evita desbordamiento en títulos largos */ .page-hero-h1 { font-size: clamp(2rem, 8vw, 3.2rem) !important; } /* CTA sections */ .cta-section { padding: 64px 16px; } /* Sedes */ .sede-card { padding: 48px 20px 40px; min-height: 360px; } /* Stats de inicio */ .stat-item { padding: 28px 16px; } /* Sección confiar */ .confiar-section { padding: 64px 16px; } .confiar-stats { grid-template-columns: 1fr 1fr; } /* All-on-6 */ .allon6-section { padding: 72px 16px; } /* Sección Instagram */ .insta-section { padding: 56px 16px; } /* Higiene — stats grid: 4 columnas → 1 columna */ .hp-stats-grid { grid-template-columns: 1fr; border-radius: 14px; } .hp-stats-inner { padding: 0 16px; } .hp-stat { padding: 32px 24px; border-right: none; border-bottom: 1px solid rgba(24,69,102,.08); } .hp-stat:last-child { border-bottom: none; } /* Footer */ footer { padding: 40px 16px 32px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } /* Botones grandes — evitar que salgan del viewport */ .cta-btn, .btn-primary, .btn-hero { width: 100%; text-align: center; justify-content: center; } /* Breadcrumb de hero — flex-wrap para que no se salga */ .hero-breadcrumb { flex-wrap: wrap; font-size: 11px; letter-spacing: .06em; gap: 6px; } /* Badges flotantes decorativos — se ocultan en móvil para no tapar contenido */ .hp-float-card, .confiar-img-badge, .ba-badge, .porq-img-badge { display: none; } /* Imágenes hero — limitar tamaño para no empujar layout */ .page-hero-img, .page-hero-bg { max-width: 100%; height: 100%; object-fit: cover; } }