.wp-block-lazyblock-hero-special { width: calc(100% + var(--lateral)* 2); height: 100vh; margin-top: calc(var(--header-h)* -1); margin-left: calc(var(--lateral)* -1); margin-bottom: 5rem; overflow: hidden; } .identity, .nav { opacity: var(--for-hs-op, 1); translate: 0 var(--for-hs-y, -0) 0; pointer-events: var(--for-hs-ev, all); transition: all 500ms ease-in-out; } .hide-top { --for-hs-op: 0; --for-hs-ev: none; --for-hs-y: -10%; } #logo { --rh: 60px; width: var(--rh); height: calc(var(--rh) * 1.618); aspect-ratio: 1 / 1.618; overflow: visible; transition: all 6s ease-in-out; } .hero-special { position: relative; width: 100%; height: 100%; isolation: isolate; overflow: hidden; } [data-slide].show { --slide-text-h: 400px; --slide-op: 1; --slide-base: 100%; --slide-ev: all; } .hover { } .hero-special_slider { width: 100%; height: 100%; display: flex; } .hero-special_slider_box { position: absolute; top: 50%; left: 50%; translate: -50% -50% 0; z-index: 100; text-align: center; color: #fff; backdrop-filter: blur(50px); padding: 2rem 3rem; margin-bottom: var(--header-h); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; } .hero-special_slider_box .txt { margin: 0; padding: 0; display: grid; grid-template-areas: "txt"; place-items: center; color: #fff; } .hero-special_slider_box .txt > * { grid-area: txt; } .hero-special_slider_box [data-slide] { transition: all 500ms; opacity: var(--slide-op, 0); } .hero-special_slider_pretitle { filter: brightness(0.6); margin: 24px 0 -5px !important; text-transform: uppercase; font-size: clamp(12px, 5vw, 16px); } .hero-special_slider_title { font-size: clamp(2rem, 5vw, 4rem); } .hero-special_slider_excerpt { max-width: 500px; filter: brightness(0.6); } .hero-special_slide { flex: 1 1 var(--slide-base, 0); width: var(--slide-base, 0); max-width: var(--slide-hover, 100%); height: 100%; transition: all 400ms; } .hero-special_slide > * { width: 100%; height: 100%; object-fit: cover; } .hero-special_slide[data-slide="conoce"] > * { object-position: left; } .hero-special_slide[data-slide="descubre"] > * { object-position: right; } .hero-special_slider_box_opts { width: 100%; display: grid; grid-template-areas: "btns"; place-items: center; margin: 2rem 0; } .hero-special_slider_box_opts > div { grid-area: btns; display: flex; gap: 1rem; justify-content: center; pointer-events: var(--slide-ev, none); } .hero-special_nav { position: absolute; z-index: 100; left: 0; bottom: 0; width: 100%; height: var(--header-h); } .hero-special_nav_list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); place-items: center; grid-template-areas: 'it1 it2 it3'; transition: transform 300ms; } .hero-special_nav_item { transition: transform 300ms; } .hero-special_nav_link { display: block; color: #fff; font-size: 1.2rem; padding: 1rem; cursor: pointer; } .hero-special_nav_link:hover { background-color: red; }