con overflow:hidden, y declara overflow explícito en y (layout "stretched"). Cuando html Y body tienen overflow no-visible, body deja de delegar el scroll al viewport y pasa a ser él mismo el contenedor de scroll: position:sticky se engancha a él y nunca llega a pegarse. overflow-x:clip (y no overflow:visible a secas): el header de Enfold lleva siempre en el DOM los menús desplegables (GTranslate, mega-menú) más anchos que su contenedor, ocultos solo con visibility:hidden. Con overflow visible en ambos ejes aparecería scroll lateral en toda la página. clip mantiene el eje X recortado sin, por spec, forzar overflow-y:auto como haría hidden. Dos reglas separadas a propósito (NO agrupadas por coma): un navegador sin soporte de :has() invalidaría toda la lista y se quedaría sin la regla. La clase .dyh-page la añade el JS; el :has() cubre el instante previo. */ html.dyh-page, body.dyh-page { overflow-x: clip !important; overflow-y: visible !important; } html:has(.dyh-sec), html:has(.dyh-sec) body { overflow-x: clip !important; overflow-y: visible !important; } html.dyh-page #wrap_all { overflow-x: clip !important; overflow-y: visible !important; } html:has(.dyh-sec) #wrap_all { overflow-x: clip !important; overflow-y: visible !important; } /* El header de Enfold trae 95% de opacidad de fábrica; contra las secciones con vídeo se nota como un tinte. Aquí se deja sólido. */ html.dyh-page .header_bg { opacity: 1 !important; } html:has(.dyh-sec) .header_bg { opacity: 1 !important; } /* ---- Aparición con fundido ------------------------------------------------- Se marca un elemento con la clase «dyh-fade» (campo Custom CSS Class) y aparece con un fundido y un pequeño desplazamiento la primera vez que entra en pantalla. Lo activa el JS añadiendo «dyh-is-visible». El opacity:0 de partida solo se aplica si el JS está presente para quitarlo: la clase «dyh-page» la pone el propio script en cuanto arranca. Si el JS fallara, el bloque se ve con normalidad en lugar de quedarse invisible. */ html.dyh-page .dyh-fade { opacity: 0; transform: translateY(24px); /* Sin transition AQUÍ a propósito. La clase «dyh-page» la añade el JS, que va en el pie: hasta ese momento el bloque se ve con normalidad. Si la transición estuviera en este estado, al añadirse la clase el texto se desvanecería a la vista durante 0,7s para luego volver a aparecer — un parpadeo feo. Sin transición, el paso a oculto es instantáneo y no se percibe; la animación se declara solo en el estado visible, que es el único que interesa ver moverse. */ } html.dyh-page .dyh-fade.dyh-is-visible { opacity: 1; transform: none; /* --dyh-fade-delay lo escribe inline quien quiera escalonar su entrada; sin él, 0s. Lo usan las celdas de «Aplicaciones» (una tras otra por fila) y el botón del visualizador (detrás de su texto). */ transition: opacity 0.7s ease var(--dyh-fade-delay, 0s), transform 0.7s ease var(--dyh-fade-delay, 0s); } /* Para un bloque que va DETRÁS de otro y no necesita contar posiciones. */ html.dyh-page .dyh-fade--tras-texto { --dyh-fade-delay: 160ms; } @media (prefers-reduced-motion: reduce) { html.dyh-page .dyh-fade.dyh-is-visible { transition: none; } } /* ---- Secciones ocultas ---------------------------------------------------- Se marca un Color Section con la clase «dyh-oculto» (campo Custom CSS Class) y deja de pintarse en el front, pero sigue estando en el builder para poder recuperarla sin rehacerla. Ahora mismo la lleva «Elige los sistemas que marcan el rumbo»: esa sección no aparece en el frame de Figma de la home, así que queda aparcada hasta decidir si se queda o se elimina. */ .dyh-sec.dyh-oculto { display: none !important; } /* ========================================================================== 2) RESET ACOTADO -------------------------------------------------------------------------- Solo dentro de las secciones marcadas: nunca html/body/* globales — esta página comparte body con el header y el footer de Enfold. ========================================================================== */ .dyh-sec, .dyh-sec * { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .dyh-sec *:focus, .dyh-sec *:focus-visible { outline: none; } /* ---- Titulares: quitar lo que Enfold les impone de fábrica ---------------- Enfold trae en su layout.css: .template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2 { text-transform: uppercase } ...más un letter-spacing de 1px. Con eso, «Tu vehículo industrial tiene las espaldas bien cubiertas» salía TODO EN MAYÚSCULAS y con las letras separadas, que no es lo que dice el diseño. El selector tiene que ser igual de específico que el suyo (dos clases + una etiqueta) para poder ganarle; con .dyh-hero__title a secas no basta. Va aquí arriba, antes que las reglas de cada sección, para que esas puedan seguir fijando su propio letter-spacing donde el diseño lo pida. Nota: en dyresel.com esto no se notaba porque una hoja global del sitio (33.css) ya forzaba text-transform:none en todos los titulares. Depender de ella sería frágil: en cuanto la home se mira fuera de ese contexto —como en el WordPress local— reaparece el problema. */ .dyh-sec .entry-content-wrapper h1, .dyh-sec .entry-content-wrapper h2, .dyh-sec .entry-content-wrapper h3, .dyh-sec .entry-content-wrapper h4, .dyh-sec .entry-content-wrapper h5, .dyh-sec .entry-content-wrapper h6 { text-transform: none; } /* ---- Interletraje: los valores de dyresel.com -------------------------- En producción no los pone la home: vienen de la hoja global del sitio, que aplica un interletraje fijo por nivel de titular. Medidos allí: h1 normal h2 -3.3px h3 -2.5px párrafos y subtítulos -0.54px Se copian aquí para no depender de esa hoja: fuera de dyresel.com —o el día que esa hoja cambie— los textos saldrían con el espaciado por defecto y se verían visiblemente más anchos. Cada sección puede sobreescribirlo donde el diseño pida otra cosa (lo hace el titular del visualizador, con -0.06em). */ .dyh-sec .entry-content-wrapper h1 { letter-spacing: normal; } .dyh-sec .entry-content-wrapper h2 { letter-spacing: -3.3px; } .dyh-sec .entry-content-wrapper h3 { letter-spacing: -2.5px; } .dyh-sec .entry-content-wrapper p, .dyh-sec .entry-content-wrapper li { letter-spacing: -0.54px; } /* ---- El tope de ancho que la hoja global pone a los titulares EN LA PORTADA -------------------------------------------------------------------------- `33.css` trae esto: .home h2 { max-width: 580px; } .home h3 { max-width: 580px; } La clase `home` la pone WordPress en el solo cuando la página es la portada del sitio. O sea que estas reglas estuvieron dormidas todo el desarrollo —la home vivía en /dyresel-home-2026/— y se activaron de golpe el día que pasó a ser dyresel.com/. Efecto: «Somos tu partner global» partido en dos líneas (necesita 738px y le quedaban 580) y lo mismo en «Luz para cada tipo de movimiento». Ojo con la especificidad, que es donde está la trampa: `.home h2` es (0,1,1) y le gana a `.dyh-hero__title-2`, que es (0,1,0). Por eso no basta con declarar el ancho en la clase del titular. `.avia-section.dyh-sec h2` es (0,2,1) y gana sin depender del orden de los archivos ni de que el JS haya añadido ya ninguna clase. Se anula el tope en vez de fijar un número: cada titular ya declara el suyo donde el diseño lo pide. */ .avia-section.dyh-sec h1, .avia-section.dyh-sec h2, .avia-section.dyh-sec h3, .avia-section.dyh-sec h4 { max-width: none; } /* Y aquí los topes que SÍ son nuestros, repuestos por encima de ese reset. --------------------------------------------------------------------------- Este bloque no es opcional: el reset de arriba barre con todo, incluidos los anchos que cada titular necesita para partir donde tiene que partir. La primera versión solo repuso el del reveal y dejó al titular del hero sin su tope — en pantallas anchas se estiraba a una sola línea. El ancho es lo único que decide dónde parten: no hay ningún
de por medio. Si se cambia el texto, hay que volver a comprobar el resultado. 817px «Tu vehículo industrial tiene las espaldas bien cubiertas» va en DOS líneas. Es el ancho del frame de Figma, y el texto necesitaría 1465px para caber en una: con este tope son dos en cualquier pantalla. 1088px «Somos tu partner global» va en UNA línea. También es el ancho de su frame de Figma. Necesita 738px, así que le sobra sitio. El tope sigue haciendo falta aunque no parta nada: sin él, la hoja global del sitio le aplicaría sus 580px y lo partiría en dos. Los demás titulares se quedan sin tope a propósito: «Creamos tu sistema» parte por su
y su contenedor de 643px, el del visualizador por su caja de 421px, y «Luz para cada tipo de movimiento» tiene que ir en una línea. */ .avia-section.dyh-sec .dyh-hero__title { max-width: 817px; } .avia-section.dyh-sec .dyh-hero__title-2 { max-width: 1088px; } /* ---- Selección de texto --------------------------------------------------- Enfold pinta ::selection con su color primario, que en esta instalación es el verde de su demo (#719430) — nada que ver con la marca. Se sustituye por el azul corporativo. Acotado a la home (`html.dyh-page`, la clase que pone dyresel-home.js) y no global: esta hoja es la del child theme y carga en todo el sitio, así que sin acotar cambiaría la selección de cualquier página. */ html.dyh-page ::selection { background-color: #002f43; color: #ffffff; } html.dyh-page ::-moz-selection { background-color: #002f43; color: #ffffff; } /* ---- La línea de arriba de cada sección --------------------------------- Enfold marca las secciones con .avia-shadow, que es box-shadow: inset 0 1px 3px rgba(0,0,0,.1) — a pantalla completa se lee como una raya horizontal justo encima del contenido. En los shortcodes va shadow='no-border-styling' para quitarlo desde la propia opción del Color Section; esto es el cinturón por si alguna sección se añade a mano sin ese ajuste. */ .dyh-sec.avia-shadow, .dyh-sec.avia-section { box-shadow: none; } /* ---- Enlaces -------------------------------------------------------------- Enfold pinta TODOS los enlaces con el color primario del theme (.main_color a → var(--enfold-main-color-primary)), que es más específico que una clase suelta nuestra. En dyresel.com ese primario ya es el rojo corporativo y no se notaba; en cualquier otra instalación —el WordPress local, sin ir más lejos— los enlaces salían verdes. OJO con el alcance: la primera versión de esto era `.entry-content-wrapper a` y se llevaba por delante los botones de las dos galerías, que también son enlaces — salían en rojo en vez de con su color de diseño. Así que en vez de pintar todos los enlaces y luego ir rescatando excepciones, se apunta solo a los dos sitios donde de verdad hace falta: los enlaces de texto corrido y los de la rejilla de aplicaciones. Los CTA de las galerías no cuelgan de ninguno de los dos, así que quedan fuera por construcción. */ .dyh-sec .avia_textblock a, .dyh-sec .entry-content-wrapper .dyh-apps__link { color: #cc233f; } /* ========================================================================== 3) WRAPPERS SCROLL-DRIVEN -------------------------------------------------------------------------- Cada sección "fijada" es en realidad un elemento sticky (CSS nativo, no pin:true de GSAP) dentro de un wrapper deliberadamente alto. Alto del wrapper = 100vh (la sección visible) + el recorrido de scroll extra que necesita su animación. Sin pin-spacer y sin mutar alturas a media página: nunca hay salto de layout ni hueco muerto — el siguiente wrapper arranca exactamente donde se agota el recorrido extra de éste. ========================================================================== */ .dyh-wrap { position: relative; width: 100%; } .dyh-wrap--hero { /* 100vh (la caja visible) + el recorrido del despegue, que se configura en el elemento. Lo escribe el shortcode inline; este 200vh es solo el respaldo. */ height: var(--dyh-hero-wrap-h, 200vh); } /* .dyh-wrap--vs (vídeo por scroll) coge su alto de --dyh-vs-wrap-h, que escribe el propio elemento a partir de sus opciones. Ver el apartado 6. */ /* ========================================================================== 4) HERO — reel a pantalla completa que se "despega" ========================================================================== */ .dyh-hero { position: sticky; top: var(--dyh-header-h, 0px); width: 100%; /* No basta con bajar el top: si la caja sigue midiendo 100vh completos empezando más abajo, se sale por debajo del viewport y el contenido centrado queda descentrado respecto a lo que de verdad se ve. */ height: calc(100vh - var(--dyh-header-h, 0px)); /* iOS Safari calcula 100vh sobre el viewport "grande" (barra de direcciones oculta). 100dvh sigue el viewport real; los navegadores sin soporte ignoran esta línea y se quedan con la de arriba. */ height: calc(100dvh - var(--dyh-header-h, 0px)); overflow: hidden; background: var(--dyh-navy); } /* Capa navy sólida por detrás del vídeo; sostiene el segundo bloque de texto. */ .dyh-hero__bg { position: absolute; inset: 0; z-index: 1; background: var(--dyh-navy); } .dyh-hero__text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 clamp(20px, 6vw, 80px); } .dyh-hero__text--1 { z-index: 5; gap: 18px; } .dyh-hero__text--2 { z-index: 3; gap: 20px; opacity: 0; pointer-events: none; } /* Las dos líneas se revelan una tras otra (no el bloque entero a la vez): cada una con su propia transición y la segunda con delay corto. */ .dyh-hero__text--1 .dyh-hero__eyebrow, .dyh-hero__text--1 .dyh-hero__title { opacity: 0; transition: opacity 0.6s ease; } .dyh-hero__text--1.dyh-is-visible .dyh-hero__eyebrow { opacity: 1; } .dyh-hero__text--1.dyh-is-visible .dyh-hero__title { opacity: 1; transition-delay: 0.25s; } .dyh-hero__video-wrap { position: absolute; top: 0; left: 0; width: 100%; /* 100% y no 100vh fijo: sigue siempre el alto real de .dyh-hero, que varía con el alto del header de Enfold. */ height: 100%; z-index: 2; overflow: hidden; border-radius: 0; will-change: transform, border-radius, opacity; } .dyh-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- Tipografía del hero ------------------------------------------------- color + text-align con !important en los titulares: la hoja global del sitio (33.css) fuerza h1..h6 { color:#002f43 !important; text-align:center } sobre cualquier heading. Sin esto saldrían en azul marino sobre el vídeo. */ .dyh-hero__eyebrow { margin: 0; font-family: "Maven Pro", sans-serif; font-weight: 400; font-size: clamp(16px, 1.8vw, 24px); color: #ffffff; width: 100%; max-width: 866px; } .dyh-hero__title { margin: 0; font-family: "Maven Pro", sans-serif; font-weight: 500; font-size: clamp(28px, 4.4vw, 58px); line-height: 1.15; color: #ffffff !important; text-align: center; width: 100%; max-width: 817px; } .dyh-hero__title-2 { margin: 0; font-family: "Maven Pro", sans-serif; font-weight: 500; font-size: clamp(32px, 5vw, 66px); line-height: 1.1; color: #ffffff !important; text-align: center; width: 100%; } .dyh-hero__sub-2 { margin: 0; font-family: "Maven Pro", sans-serif; font-weight: 500; font-size: clamp(20px, 3vw, 40px); color: #ffffff; width: 100%; max-width: 1088px; } /* ========================================================================== 5) ELEMENTO «Texto por scroll» (.dyh-texto) -------------------------------------------------------------------------- El texto NO se fija: avanza con el scroll normal y, mientras cruza la pantalla, cambia de color palabra por palabra. El JS envuelve cada palabra en un y le va interpolando el color. Antes esto era .dyh-s2, atado a la sección 2 de la home. Ahora es un elemento del builder que puede usarse tantas veces como haga falta, así que los nombres ya no llevan número de sección. ========================================================================== */ .dyh-texto { width: 100%; display: flex; justify-content: center; } .dyh-texto__inner { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; padding: 0 24px; } .dyh-texto__p { margin: 0; font-family: "Maven Pro", sans-serif; font-weight: 500; font-size: clamp(18px, 2.3vw, 30px); line-height: 1.2; /* Color de respaldo: si el JS no llegara a correr, el texto se lee igual en vez de quedarse del gris de partida. */ color: #1a1a1a; } /* Cada palabra, envuelta por el JS. El color de partida lo pone también el JS a partir de las opciones del elemento; esta transición es la que suaviza el barrido entre un frame de scroll y el siguiente. */ .dyh-texto__p .dyh-word { transition: color 0.05s linear; } /* ========================================================================== 6) ELEMENTO «Vídeo por scroll» (.dyh-vs) -------------------------------------------------------------------------- Caja fijada dentro de un envoltorio más alto que la pantalla: mientras dura el envoltorio el vídeo se queda quieto, y el scroll mueve su reproducción. Antes eran dos bloques calcados (.dyh-s2v y .dyh-s3v); ahora es un solo elemento reutilizable. ========================================================================== */ .dyh-wrap--vs { /* 100vh (la caja visible) + el recorrido que se configure en el elemento. Lo escribe el shortcode inline; este 220vh es solo el respaldo. */ height: var(--dyh-vs-wrap-h, 220vh); } /* top + height compensan el header fijo de Enfold: sin esto la parte de arriba del vídeo quedaría tapada y no se vería entero. */ .dyh-vs { position: sticky; top: var(--dyh-header-h, 0px); width: 100%; /* Alto = el del vídeo, ni un píxel más. Antes esta caja medía toda la pantalla y el vídeo iba dentro: primero centrado (dejaba aire arriba y abajo) y luego pegado arriba (quitaba el de arriba, pero el de abajo seguía ahí — unos 250px de fondo vacío bajo el vídeo). Con el alto automático no queda espacio por ninguno de los dos lados: la sección mide exactamente lo que ocupa el clip. */ height: auto; overflow: hidden; display: flex; justify-content: center; } .dyh-vs__box { position: relative; /* 1000px es la medida del diseño (union 1 mide 998px sobre un lienzo de 1440), pero como tope fijo se queda corto: en un monitor de 2560 el vídeo se veía diminuto en mitad de la pantalla. Así que 1000px es el tope HASTA 1440 de ancho, y a partir de ahí crece manteniendo la misma proporción que tiene en el diseño (1000/1440 = 69.44%). ancho ≤ 1000 → 100%, ocupa lo que haya ancho 1440 → 1000px, exactamente el diseño ancho 1920 → 1333px ancho 2560 → 1778px El tercer valor del min() es el tope por ALTURA: en una pantalla baja (un portátil apaisado, o el móvil en horizontal) un vídeo de 1000px de ancho no cabría de alto, así que se limita el ancho a lo que quepa —16/9 del alto visible— y el clip se ve entero igualmente. Sin esto, la proporción fija haría que el vídeo sobresaliera por abajo. */ width: min( 100%, max(1000px, 69.444vw), calc((100dvh - var(--dyh-header-h, 0px)) * 16 / 9) ); /* Los dos clips son 1920x1080. La proporción fija es lo que permite que la sección de arriba tenga alto automático sin dejar aire: la caja mide exactamente lo que ocupa el vídeo. */ aspect-ratio: 16 / 9; height: auto; margin: 0 auto; overflow: hidden; } .dyh-vs__video { width: 100%; height: 100%; display: block; /* object-fit lo escribe el shortcode inline: entero o recortado. */ /* Safari pinta el fondo de un