.elementor-kit-5{--e-global-color-primary:#416BA9;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#3D6CB2;--e-global-color-6690694:#3D6CB2;--e-global-color-83ea215:#FFFFFF;--e-global-color-05fb97a:#000000;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:700;font-family:"Poppins", Sans-serif;}.elementor-kit-5 h1{font-family:"Poppins", Sans-serif;font-weight:700;}.elementor-kit-5 h2{font-family:"Poppins", Sans-serif;font-weight:400;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */:root { --header-h: 84px; } /* ajusta la altura final del header compacto */ .header-wrap { position: sticky; top: 0; z-index: 9999; height: var(--header-h); background: transparent; /* deja que se vea tu fondo/degradado si aplica */ overflow: hidden; /* evita “sangrado” durante animación */ } /* Asegura que ambas versiones ocupen el mismo espacio y se superpongan */ .header--a, .header--b { height: var(--header-h); display: flex; align-items: center; transition: transform .35s ease, opacity .35s ease; will-change: transform, opacity; } /* Coloca B encima de A y ocúltalo fuera de pantalla hacia la derecha */ .header--b { position: absolute; inset: 0; transform: translateX(100%); opacity: 0; pointer-events: none; } /* Estado inicial: A visible */ .header--a { transform: translateX(0); opacity: 1; } /* Cuando activamos clase en el , se hace el swipe */ html.is-compact .header--a { transform: translateX(-100%); opacity: 0; pointer-events: none; } html.is-compact .header--b { transform: translateX(0); opacity: 1; pointer-events: auto; } /* Opcional: si prefieres deslizamiento vertical en vez de horizontal .header--b { transform: translateY(-100%); } html.is-compact .header--a { transform: translateY(100%); } html.is-compact .header--b { transform: translateY(0); } *//* End custom CSS */