/* * Evomarca V1.3 — estilos-movil.css * Ajustes para que toda la web se lea y use bien en móviles (≈320–767px). * Cargar al final del , después del resto de hojas de estilo. */ /* Evita empujes laterales por 100vw / elementos anchos */ html { overflow-x: clip; } body { overflow-x: clip; } img, video, iframe, svg { max-width: 100%; } /* Tablas y bloques anchos: scroll interno en vez de romper la página */ table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 767px) { /* —— Tipografía y espacios —— */ .texto-cuerpo, .lead, p.texto-cuerpo { overflow-wrap: anywhere; word-break: break-word; } h1, h2, h3 { overflow-wrap: break-word; } .contenedor { padding-inline: 16px; } /* —— Captación (index y categorías): apilar en columna —— */ .captacion, .captacion-categoria { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; padding-block: 14px; } .captacion__caja, .captacion__interno, .captacion-categoria__caja { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; } .captacion__texto, .captacion-categoria__texto, .pagina-dyo .captacion-categoria__texto { white-space: normal; flex-shrink: 1; max-width: 100%; font-size: 0.875rem; line-height: 1.35; text-align: center; } .captacion__form, .captacion-categoria__form { flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; gap: 10px; } .captacion .campo, .captacion-categoria__form input[type="text"], .captacion-categoria__form input[type="tel"] { width: 100%; min-width: 0; max-width: none; } .captacion .campo input, .captacion-categoria__form input[type="text"], .captacion-categoria__form input[type="tel"], .captacion .boton, .captacion-categoria__form .boton { width: 100%; min-height: 44px; height: 44px; font-size: 0.9375rem; } .captacion__check, .captacion-categoria__check { max-width: none; width: 100%; font-size: 0.75rem; } /* —— Hero index: accesos en scroll horizontal legible —— */ .hero-index { height: auto; min-height: 0; padding-top: calc(var(--header-alto-movil) + 12px); } .hero-index .contenedor { padding-block: 24px 12px; } .hero-index__titulo { max-width: 18ch; font-size: clamp(1.375rem, 6vw, 1.75rem); } .hero-index__texto { font-size: 0.875rem; padding-inline: 4px; } .hero-index__acciones { width: 100%; } .hero-index__acciones .boton { width: 100%; max-width: 20rem; } .hero-index__accesos { display: flex; overflow-x: auto; gap: 4px; padding: 10px 12px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; } .hero-index__accesos::-webkit-scrollbar { display: none; } .acceso-directo { flex: 0 0 auto; width: 4.75rem; font-size: 0.625rem; scroll-snap-align: start; padding: 4px 2px; } .acceso-directo span { font-size: 0.625rem; line-height: 1.15; } .acceso-directo__icono { width: 36px; height: 36px; } /* —— Barra de servicios —— */ .barra-servicios__lista { justify-content: flex-start; gap: 0; padding: 0 4px; } .barra-servicios__lista li { flex: 0 0 auto; } .barra-servicios__lista a { width: auto; min-width: max-content; padding: 10px 12px; font-size: 0.6875rem; } /* —— Aportes Sevilla —— */ .aportes__grid { grid-template-columns: 1fr; gap: 14px; } .aporte-item h3 { font-size: 0.8125rem; } .aporte-item p { display: block; font-size: 0.8125rem; } /* —— Promociones —— */ .promociones__carrusel { gap: 4px; } .promociones__flecha { width: 32px; height: 32px; } .promociones__flecha svg { width: 16px; height: 16px; } .promo-card { flex: 0 0 min(78%, 260px); } /* —— Citas / lemas: que no fuerzan scroll horizontal —— */ .servicio-cita { overflow-x: visible; padding-inline: 8px; } .servicio-cita blockquote { white-space: normal; font-size: clamp(1.125rem, 5.5vw, 1.5rem); } .dyo-lema { white-space: normal; overflow-x: visible; font-size: clamp(0.8125rem, 3.8vw, 1rem); } /* —— Formularios: check de privacidad —— */ .formulario-contacto__check { flex-wrap: wrap; align-items: flex-start; overflow-x: visible; } .formulario-contacto__check > span { white-space: normal; overflow-wrap: anywhere; } /* —— Banners full-bleed: sin 100vw en móvil —— */ .captacion, .captacion-categoria, .servicio-formula, .servicio-banner, .servicio-banner-evobrand, .servicio-banner-franja, .servicio-destacado, .servicio-bloque-negativo, .servicio-cierre-petroleo, .servicio-doble, .dyo-hero, .dyo-beneficios-titulo, .logo-banner, .pagina-dyo .captacion-categoria { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } /* —— Grids de tarjetas —— */ .grid-servicios { grid-template-columns: 1fr; gap: 14px; } .valores__grid, .valores-grid { grid-template-columns: 1fr; } /* —— Cabecera —— */ .cabecera__interno { gap: 12px; } .cabecera__logo img { height: 32px; } .menu-hamburguesa { min-width: 44px; min-height: 44px; } /* —— Banners de categoría: altura razonable —— */ .categoria-banner { overflow: hidden; } .categoria-banner img { width: 100%; height: auto; max-height: 88px; object-fit: cover; object-position: center; } /* —— Botones y CTAs —— */ .boton { max-width: 100%; } .servicio-doble__acciones, .hero-index__acciones, .contacto-acciones { width: 100%; } .servicio-doble__acciones .boton { width: 100%; } /* —— Pie —— */ .pie__grid, .pie__columnas, .pie-interno { gap: 20px; } .pie input, .pie .boton { width: 100%; max-width: 100%; } /* —— Leer más / details —— */ .categoria-intro__leer-mas { text-align: left; } .categoria-intro__leer-mas summary { min-height: 44px; } /* —— WhatsApp y cookies por encima de la barra inferior —— */ .wa-flotante { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } .cookies-banner { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); z-index: 95; padding: 12px 0; } .cookies-banner__interno { flex-direction: column; align-items: stretch; } .cookies-banner__acciones { width: 100%; } .cookies-banner__acciones .boton { flex: 1 1 auto; min-height: 44px; } /* —— Buscador index —— */ .buscador-index .contenedor { flex-wrap: wrap; gap: 10px; } /* —— Quiz / calculadoras —— */ .quiz-grid, .calc-ads, .calculadora-ads { grid-template-columns: 1fr; } /* —— Inputs táctiles —— */ input, select, textarea, button, .boton { touch-action: manipulation; } input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], textarea, select { font-size: 16px; /* evita zoom automático en iOS */ } } /* Móvil estrecho (320–400px) */ @media (max-width: 400px) { .contenedor { padding-inline: 14px; } .promociones__flecha { display: none; } .promo-card { flex: 0 0 86%; } .barra-movil-inferior a { font-size: 0.625rem; gap: 2px; padding-inline: 2px; } .acceso-directo { width: 4.4rem; } .grid-virtudes { grid-template-columns: 1fr; } } /* Tablets pequeñas: aportes y servicios en 2 columnas */ @media (min-width: 481px) and (max-width: 767px) { .aportes__grid { grid-template-columns: repeat(2, 1fr); } .grid-servicios { grid-template-columns: repeat(2, 1fr); } }