/* * maind.rocks - Ajustes de layout del tema hijo. * * Va en un archivo aparte (y no en style.css) porque Divi encola el style.css * del hijo con ?ver=, que no cambia al editar el archivo: el * navegador seguiria sirviendo la copia en cache. Este se encola desde * functions.php con filemtime(), asi que la cache se rompe sola en cada cambio. */ /* * Secciones a sangre completa bajo el header. * * El tema usa nav transparente (et_transparent_nav): #main-header es * position:fixed, no ocupa flujo y #page-container no lleva padding-top. * O sea, el full-bleed ya es la intencion del diseno. * * Pero Divi Horizontal Scroll descuenta la altura del header al calcular el * alto de las filas: * * .dhs-container-scroll .et_pb_row { * height: calc(100vh - var(--dhs-header-height)) !important; * } * * y esa variable la fija el plugin por JS una sola vez al cargar, con el alto * del header. Como aqui el header flota encima y no roba espacio, no hay nada * que descontar: la variable debe valer 0 para que las filas midan 100vh * exactos en cualquier pantalla. * * Lleva !important porque el plugin la escribe como estilo inline en , * y una declaracion inline sin !important pierde frente a una important. */ :root { --dhs-header-height: 0px !important; } /* * Movil: una seccion por pantalla, con salto firme. * * En desktop el plugin hace dos cosas que en movil no hace nadie: fuerza las * filas a ocupar la pantalla completa, y aporta el snap de GSAP que las alinea. * La seccion celular esta fuera de .dhs-container-scroll, asi que no recibe * ninguna de las dos. De sus 7 filas, solo la primera (#inicio) tenia altura * forzada desde Divi; el resto median lo que midiera su contenido, y por eso al * hacer scroll quedaba media seccion anterior a la vista. * * Notas de implementacion: * * - min-height y no height: si alguna seccion crece por encima de la pantalla, * debe poder extenderse. La especificacion de scroll-snap contempla este caso * y permite recorrer libremente un bloque mas alto que el viewport, asi que * 'mandatory' no deja contenido inalcanzable. * * - 100svh y no 100vh: en moviles 'vh' mide el viewport mas grande, el que se * da con la barra del navegador oculta, asi que con la barra visible el * contenido queda cortado. 'svh' mide el viewport pequeno, que es el que * siempre esta disponible. La linea con vh queda antes como respaldo para * navegadores que no entiendan svh. * * - scroll-snap-stop: always impide que un deslizamiento largo se salte * secciones: avanza de una en una. */ @media (max-width: 767px) { /* * El plugin declara html{overflow-x:hidden} de forma global, y eso * convierte a en contenedor de scroll. Safari en iOS ignora * scroll-snap sobre el elemento raiz cuando eso ocurre, asi que el * enganche funcionaba en Chrome pero no necesariamente en iPhone. * * 'clip' recorta igual el desbordamiento horizontal pero NO crea * contenedor de scroll, asi que el snap del raiz sigue vigente. * Verificado: sin scroll horizontal tras el cambio. */ html { overflow-x: clip !important; scroll-snap-type: y mandatory; } .seccion-movil > .et_pb_row { min-height: 100vh; min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; } /* * La fila de contacto medía 1018px contra una pantalla de 839: no cabía * por 179px y rompia el enganche justo en la ultima seccion. * * El contenido real eran 757px, que si caben. El exceso venia de 204px * de margenes entre modulos, 85px de padding de fila y una imagen de * 280px. No hizo falta recortar copy, solo apretar espacios. * * Medido tras el ajuste: la fila cae en 839px exactos. */ .seccion-movil #contacto { padding-top: 20px !important; padding-bottom: 12px !important; } .seccion-movil #contacto .et_pb_module { margin-top: 8px !important; margin-bottom: 8px !important; } .seccion-movil #contacto .et_pb_image img { max-height: 215px !important; width: auto !important; margin: 0 auto !important; } }