.elementor-2273 .elementor-element.elementor-element-4b08c4e{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2273 .elementor-element.elementor-element-aa85c75{--display:flex;--min-height:67px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 26px;--row-gap:0px;--column-gap:26px;--padding-top:7px;--padding-bottom:7px;--padding-left:24px;--padding-right:7px;}.elementor-2273 .elementor-element.elementor-element-763112e{width:var( --container-widget-width, 222px );max-width:222px;--container-widget-width:222px;--container-widget-flex-grow:0;text-align:start;}.elementor-2273 .elementor-element.elementor-element-763112e img{width:178px;}.elementor-2273 .elementor-element.elementor-element-a7dffba{width:auto;max-width:auto;--e-nav-menu-horizontal-menu-item-margin:calc( 2px / 2 );}.elementor-2273 .elementor-element.elementor-element-a7dffba .elementor-nav-menu .elementor-item{font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;letter-spacing:0.1px;}.elementor-2273 .elementor-element.elementor-element-a7dffba .elementor-nav-menu--main .elementor-item{color:rgba(255,255,255,0.78);fill:rgba(255,255,255,0.78);padding-left:15px;padding-right:15px;padding-top:10px;padding-bottom:10px;}.elementor-2273 .elementor-element.elementor-element-a7dffba .elementor-nav-menu--main .elementor-item:hover, .elementor-2273 .elementor-element.elementor-element-a7dffba .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-2273 .elementor-element.elementor-element-a7dffba .elementor-nav-menu--main .elementor-item.highlighted, .elementor-2273 .elementor-element.elementor-element-a7dffba .elementor-nav-menu--main .elementor-item:focus{color:rgba(255,255,255,0.78);fill:rgba(255,255,255,0.78);}.elementor-2273 .elementor-element.elementor-element-a7dffba .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#FFFFFF;}.elementor-2273 .elementor-element.elementor-element-a7dffba .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:2px;}.elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button{background-color:rgba(0,0,0,0);font-family:"Poppins", Sans-serif;font-size:14px;font-weight:600;letter-spacing:0.1px;fill:#FFFFFF;color:#FFFFFF;border-radius:999px 999px 999px 999px;padding:0px 22px 0px 18px;}.elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button:hover, .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button:focus{background-color:rgba(0,0,0,0);color:#14140F;}.elementor-2273 .elementor-element.elementor-element-fd2007a{width:auto;max-width:auto;}.elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button-content-wrapper{flex-direction:row;}.elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button .elementor-button-content-wrapper{gap:9px;}.elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button:hover svg, .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button:focus svg{fill:#14140F;}.elementor-2273 .elementor-element.elementor-element-ac003fd{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2273 .elementor-element.elementor-element-c3f7f9a{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 18px;--row-gap:0px;--column-gap:18px;--padding-top:11px;--padding-bottom:11px;--padding-left:20px;--padding-right:11px;}.elementor-2273 .elementor-element.elementor-element-3c6fcea{width:auto;max-width:auto;text-align:start;}.elementor-2273 .elementor-element.elementor-element-b53c131{width:auto;max-width:auto;--nav-menu-icon-size:19px;}.elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-menu-toggle{margin-left:auto;background-color:rgba(255,255,255,0.07);border-width:1px;border-radius:14px;}.elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-nav-menu--dropdown a, .elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-menu-toggle{color:rgba(255,255,255,0.86);fill:rgba(255,255,255,0.86);}.elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-nav-menu--dropdown a:hover, .elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-nav-menu--dropdown a:focus, .elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-nav-menu--dropdown a.highlighted, .elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-menu-toggle:hover, .elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-menu-toggle:focus{color:#DAA520;}.elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-nav-menu--dropdown a:hover, .elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-nav-menu--dropdown a:focus, .elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-nav-menu--dropdown a.highlighted{background-color:rgba(255,255,255,0.05);}.elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-nav-menu--dropdown a.elementor-item-active{color:#DAA520;background-color:rgba(218,165,32,0.10);}.elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-nav-menu--dropdown .elementor-item, .elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"Poppins", Sans-serif;font-size:19px;font-weight:500;letter-spacing:-0.2px;}.elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-nav-menu--dropdown a{padding-left:22px;padding-right:22px;padding-top:21px;padding-bottom:21px;}.elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-nav-menu--dropdown li:not(:last-child){border-style:solid;border-color:rgba(255,255,255,0.09);border-bottom-width:1px;}.elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:14px !important;}.elementor-2273 .elementor-element.elementor-element-b53c131 div.elementor-menu-toggle{color:rgba(255,255,255,0.92);}.elementor-2273 .elementor-element.elementor-element-b53c131 div.elementor-menu-toggle svg{fill:rgba(255,255,255,0.92);}.elementor-2273 .elementor-element.elementor-element-b53c131 div.elementor-menu-toggle:hover, .elementor-2273 .elementor-element.elementor-element-b53c131 div.elementor-menu-toggle:focus{color:#DAA520;}.elementor-2273 .elementor-element.elementor-element-b53c131 div.elementor-menu-toggle:hover svg, .elementor-2273 .elementor-element.elementor-element-b53c131 div.elementor-menu-toggle:focus svg{fill:#DAA520;}.elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-menu-toggle:hover, .elementor-2273 .elementor-element.elementor-element-b53c131 .elementor-menu-toggle:focus{background-color:rgba(255,255,255,0.12);}.elementor-2273 .elementor-element.elementor-element-973844b{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2273 .elementor-element.elementor-element-a6b8949{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 14px;--row-gap:0px;--column-gap:14px;--padding-top:9px;--padding-bottom:9px;--padding-left:16px;--padding-right:9px;}.elementor-2273 .elementor-element.elementor-element-ea618d0{width:auto;max-width:auto;text-align:start;}.elementor-2273 .elementor-element.elementor-element-e63d4b0{width:auto;max-width:auto;--nav-menu-icon-size:18px;}.elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-menu-toggle{margin-left:auto;background-color:rgba(255,255,255,0.07);border-width:1px;border-radius:13px;}.elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-nav-menu--dropdown a, .elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-menu-toggle{color:rgba(255,255,255,0.86);fill:rgba(255,255,255,0.86);}.elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-nav-menu--dropdown a:hover, .elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-nav-menu--dropdown a:focus, .elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-nav-menu--dropdown a.highlighted, .elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-menu-toggle:hover, .elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-menu-toggle:focus{color:#DAA520;}.elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-nav-menu--dropdown a:hover, .elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-nav-menu--dropdown a:focus, .elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-nav-menu--dropdown a.highlighted{background-color:rgba(255,255,255,0.05);}.elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-nav-menu--dropdown a.elementor-item-active{color:#DAA520;background-color:rgba(218,165,32,0.10);}.elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-nav-menu--dropdown .elementor-item, .elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"Poppins", Sans-serif;font-size:17px;font-weight:500;letter-spacing:-0.2px;}.elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-nav-menu--dropdown a{padding-left:18px;padding-right:18px;padding-top:18px;padding-bottom:18px;}.elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-nav-menu--dropdown li:not(:last-child){border-style:solid;border-color:rgba(255,255,255,0.09);border-bottom-width:1px;}.elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:12px !important;}.elementor-2273 .elementor-element.elementor-element-e63d4b0 div.elementor-menu-toggle{color:rgba(255,255,255,0.92);}.elementor-2273 .elementor-element.elementor-element-e63d4b0 div.elementor-menu-toggle svg{fill:rgba(255,255,255,0.92);}.elementor-2273 .elementor-element.elementor-element-e63d4b0 div.elementor-menu-toggle:hover, .elementor-2273 .elementor-element.elementor-element-e63d4b0 div.elementor-menu-toggle:focus{color:#DAA520;}.elementor-2273 .elementor-element.elementor-element-e63d4b0 div.elementor-menu-toggle:hover svg, .elementor-2273 .elementor-element.elementor-element-e63d4b0 div.elementor-menu-toggle:focus svg{fill:#DAA520;}.elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-menu-toggle:hover, .elementor-2273 .elementor-element.elementor-element-e63d4b0 .elementor-menu-toggle:focus{background-color:rgba(255,255,255,0.12);}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for image, class: .elementor-element-763112e *//* Centrado optico del menu. Con space-between el menu queda en el punto medio entre el borde derecho de la caja del logo y el borde izquierdo del CTA. Padding de la barra: 24px izquierda / 7px derecha; CTA liquid glass: 222px. Para que ese punto medio coincida con el centro de la barra, la caja del logo debe medir 222 - (24 - 7) = 205px. Se sobrescribe la variable que usa la hoja del header (--sa-logo-w); la imagen conserva 178px por el ajuste nativo de anchura del widget. Medido: 178px -> -13,5px; 222px -> +8,5px. */ .elementor-2273 .elementor-element.elementor-element-763112e{ --sa-logo-w: 205px; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-fd2007a *//* CTA del header - variante F: "filo que se llena". En reposo es SOLO un anillo dorado; al pasar el raton se rellena de oro y el texto se invierte a tinta. POR QUE NO ES CRISTAL: la barra .sa-bar YA es cristal, y apilar una superficie translucida clara sobre otra hunde la legibilidad. Ademas, aqui dentro el `backdrop-filter` del boton es INERTE: al vivir dentro de un elemento que ya tiene uno, queda atrapado en su backdrop root y no desenfoca nada (mismo efecto ya medido en el panel movil). Cualquier "boton de cristal" dentro de esta barra seria en realidad un gradiente plano. OJO - NO USAR ::after EN ESTE BOTON. Medido en produccion: un `::after` con `content:""`, `position:absolute`, `inset:0`, tamano 224x44 y `opacity:1` computados correctamente NO LLEGA A PINTARSE (probado tambien con z-index 0 y 1). El `::before` si pinta, y el `background` del propio boton tambien. Por eso el anillo vive en ::before y el relleno es el `background-color` del boton, no una capa aparte. El anillo es un DEGRADADO recortado con mask-composite, no un `border` de color plano: mas luminoso arriba y apagado abajo, para que atrape la luz como el filo superior de la propia barra. El volumen del relleno lo dan dos sombras interiores (arriba luz, abajo sombra), que ademas SI transicionan. Contraste del texto: 18,8:1 sobre tinta y 8:1 sobre foto en reposo; en hover, tinta sobre oro, 8,2:1. Cumple AA con holgura en los dos estados. Centrado: `inline-flex` dentro de un wrapper flex. En `inline-block` el hueco de linea base subia el boton ~3,5px respecto al centro de la barra. */ .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button-wrapper{ display: flex; justify-content: flex-end; align-items: center; } .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button{ display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; min-height: 44px; padding: 0 24px 0 20px; border: 0; border-radius: 999px; background-color: transparent; background-image: none; color: #FFFFFF; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .1px; line-height: 1; white-space: nowrap; box-shadow: none; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .2s cubic-bezier(.2,.7,.3,1); } /* EL ANILLO. `padding:1px` + mask-composite deja solo el borde de 1px. */ .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button::before{ content: ""; position: absolute; inset: 0; width: auto; height: auto; border-radius: inherit; padding: 1px; z-index: 1; pointer-events: none; opacity: 1; background: linear-gradient(180deg, rgba(247,217,126,.95) 0%, rgba(218,165,32,.55) 45%, rgba(218,165,32,.30) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .3s ease; } .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button-content-wrapper{ position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 9px; } .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button-icon{ display: inline-flex; line-height: 0; } .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button-icon svg{ width: 14px; height: 14px; fill: #DAA520; transition: fill .3s ease; } .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button-text{ line-height: 1; } /* HOVER / FOCO: se llena de oro, el texto se invierte y el anillo se apaga. Las dos sombras interiores dan el volumen que antes iba en el gradiente. */ .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button:hover, .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button:focus-visible{ color: #14140F; background-color: #DAA520; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.62), inset 0 -14px 20px -12px rgba(110,74,0,.55), 0 12px 28px -12px rgba(218,165,32,.8); } .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button:hover::before, .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button:focus-visible::before{ opacity: 0; } .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button:hover .elementor-button-icon svg, .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button:focus-visible .elementor-button-icon svg{ fill: #5A430A; } /* Respuesta en pointer-down, sin rebote (curva critica). */ .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button:active{ transform: scale(.97); } .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 3px; } @media (prefers-reduced-motion: reduce){ .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button, .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button::before, .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button-icon svg{ transition: none; } .elementor-2273 .elementor-element.elementor-element-fd2007a .elementor-button:hover{ transform: none; } }/* End custom CSS */ /* Start custom CSS *//* ========================================================================= SteelArk — Header IA v2 — plantilla de header del Theme Builder (ID 2273) ------------------------------------------------------------------------- Origen: pagina laboratorio 2042 ("Cristal y acero"). Copia de referencia comentada en SteelArk-AI/docs/design/header-ia-v2/page-custom-css.css. Tres headers independientes sobre el MISMO menu real de WordPress ("Menu Header IA v2", slug menu-header-ia-v2): .sa-hdr-desk solo escritorio (>=1025) .sa-hdr-tab solo tablet (768-1024) .sa-hdr-mob solo movil (<=767) La visibilidad la resuelve Elementor de forma nativa (hide_desktop / hide_tablet / hide_mobile). Aqui solo va el lenguaje visual. ALCANCE: todos los .elementor-2273es cuelgan de .sa-hdr, .sa-bar, .sa-nav, .sa-navm, .sa-cta o .sa-logo. Esta hoja se carga con la plantilla en todo el sitio; ninguna regla toca elementos fuera del header. SIN JAVASCRIPT PROPIO salvo el widget HTML del submenu (animacion de altura con Web Animations API). La apertura/cierre del menu la hace el widget nav-menu de Elementor Pro; el escalonado y el cambio de densidad del cristal son animaciones CSS. Breakpoints del kit: movil <=767 / tablet 768-1024 / desktop >=1025. ========================================================================= */ /* ---------- 1. Tokens ---------- */ :root{ --sa-gold: #DAA520; --sa-gold-hi: #EBBB3E; /* Cristal: en reposo es muy translucido; al hacer scroll se densifica */ --sa-glass: rgba(16,16,19,.16); --sa-glass-deep:rgba(10,10,13,.94); --sa-hair: rgba(255,255,255,.11); --sa-hair-top: rgba(255,255,255,.16); --sa-txt: rgba(255,255,255,.78); --sa-txt-hi: #FFFFFF; --sa-ease: cubic-bezier(.2,.7,.3,1); } /* ---------- 2. Envoltorio fijo ---------- El envoltorio ocupa todo el ancho pero NO captura clicks: solo la barra los recibe. Asi el header no bloquea el contenido que queda debajo. */ .sa-hdr{ position: fixed; top: 0; left: 0; right: 0; z-index: 9990; pointer-events: none; } .sa-hdr-desk{ padding: 20px 26px 0; } .sa-hdr-tab { padding: 16px 22px 0; } .sa-hdr-mob { padding: 12px 14px 0; } /* ---------- 3. La barra de cristal ---------- */ .sa-bar{ pointer-events: auto; width: 100%; position: relative; background: var(--sa-glass); -webkit-backdrop-filter: blur(32px) saturate(188%) brightness(.75); backdrop-filter: blur(32px) saturate(188%) brightness(.75); border: 1px solid var(--sa-hair); box-shadow: 0 22px 48px -22px rgba(0,0,0,.75), inset 0 1px 0 var(--sa-hair-top); transition: background-color .4s var(--sa-ease), border-color .4s var(--sa-ease); } /* Header de PC: mas transparente y con mas desenfoque que el resto, y un radio intermedio entre la pastilla y el rectangulo (20px sobre 67px de alto). Material tipo Apple: poca opacidad, mucho blur y saturacion alta para que el fondo se lea a traves con color. */ .sa-bar-desk{ max-width: 1180px; margin: 0 auto; border-radius: 20px; background: rgba(20,20,26,.03); -webkit-backdrop-filter: blur(46px) saturate(195%) brightness(.72); backdrop-filter: blur(46px) saturate(195%) brightness(.72); } .sa-bar-tab { border-radius: 22px; } .sa-bar-mob { border-radius: 18px; /* Movil: la barra mas translucida de las tres. Aqui el backdrop-filter si se aplica porque la barra no esta anidada dentro de otro. */ background: rgba(18,18,24,.05); -webkit-backdrop-filter: blur(38px) saturate(195%) brightness(.78); backdrop-filter: blur(38px) saturate(195%) brightness(.78); } /* Filo iluminado superior: es lo que da la sensacion de vidrio real. Se recorta al radio de la barra con inset lateral. */ .sa-bar::before{ content: ""; position: absolute; top: 0; left: 12%; right: 12%; width: auto; height: 1px; z-index: 3; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); } /* Si el navegador no soporta backdrop-filter, el cristal se vuelve solido: la legibilidad manda sobre el efecto. */ @supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){ /* Sin backdrop-filter no hay brightness() que garantice el contraste, asi que el cristal pasa a solido. La legibilidad manda sobre el efecto. */ .sa-bar{ background: rgba(11,11,14,.94); } .sa-bar-desk{ background: rgba(11,11,14,.92); } .sa-bar-mob { background: rgba(11,11,14,.92); } } /* ---------- 4. Logo ---------- Media 2051: logo SteelArk en DORADO Y BLANCO, derivado del original conservando el dorado y pasando a blanco las partes oscuras. Ya viene recortado a su caja util (353x88), asi que no hace falta recorte por CSS: basta con fijar el ancho. Para cambiar el tamano, toca --sa-logo-w. */ .sa-logo{ --sa-logo-w: 178px; } .sa-hdr .elementor-element.sa-logo{ width: var(--sa-logo-w); min-width: var(--sa-logo-w); flex: 0 0 auto; } /* El enlace en inline-block deja un hueco de linea base de ~7px que descentraba el logo 4px. En block desaparece. */ .sa-hdr .sa-logo a{ display: block; } .sa-hdr .sa-logo img{ display: block; width: 100%; height: auto; transition: opacity .3s var(--sa-ease); } .sa-logo:hover img{ opacity: .82; } .sa-hdr-tab .sa-logo{ --sa-logo-w: 162px; } .sa-hdr-mob .sa-logo{ --sa-logo-w: 136px; } /* ---------- 5. Menu de escritorio ---------- PETICION EXPRESA: los elementos del menu NO cambian al pasar el raton. Ni pastilla, ni borde redondeado, ni cambio de color. Por eso el widget lleva pointer:none y el color de hover igual al de reposo, y aqui no hay ninguna regla :hover. Solo se conserva el foco de teclado, que es un requisito de accesibilidad y no se dispara con el raton. */ /* Estado activo: filete dorado corto bajo el elemento. */ .sa-nav .elementor-nav-menu--main .elementor-item-active{ position: relative; } .sa-nav .elementor-nav-menu--main .elementor-item-active::after{ content: ""; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px; background: var(--sa-gold); } .sa-nav .elementor-item:focus-visible{ outline: 2px solid var(--sa-gold); outline-offset: 2px; border-radius: 8px; } /* Centrado optico del menu: en vez de posicionarlo en absoluto (Elementor pisa el transform de los widgets), se igualan los dos lados. Dandole al CTA el mismo ancho minimo que el logo, el space-between centra el menu solo. Desviacion medida: 9px sobre 1180. */ .sa-hdr-desk .sa-nav{ flex: 0 0 auto; } .sa-hdr-desk .elementor-element.sa-cta{ min-width: 178px; } .sa-hdr-desk .sa-cta .elementor-button-wrapper{ text-align: right; } /* ---------- 6. CTA ---------- */ .sa-cta .elementor-button{ min-height: 44px; position: relative; overflow: hidden; transition: transform .25s var(--sa-ease), box-shadow .25s var(--sa-ease); box-shadow: 0 8px 20px -10px rgba(218,165,32,.9); } .sa-cta .elementor-button > *{ position: relative; z-index: 1; } .sa-cta .elementor-button::after{ content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, transparent 24%, rgba(255,255,255,.42) 50%, transparent 76%); transform: translateX(-140%); transition: transform .8s var(--sa-ease); } .sa-cta .elementor-button:hover::after{ transform: translateX(140%); } .sa-cta .elementor-button:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(218,165,32,.85); } .sa-cta .elementor-button:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 3px; } /* --- Submenu del menu horizontal (escritorio) --- El menu tiene un item con hijos ("Sistema"). Elementor sirve ese desplegable con su estilo de fabrica: fondo BLANCO (#fff) y texto gris (#33373d), medido en banco de pruebas. Sobre un header de cristal oscuro es un rectangulo blanco. Aqui se le da el lenguaje del header. La apertura la hace SmartMenus con `display:block` en linea, que es lo que deja ver el submenu aunque el ajuste `dropdown: none` del widget lo declare oculto por hoja. */ .sa-hdr .sa-bar .sa-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu{ /* El ancho NO se declara aqui. SmartMenus lo escribe en linea (`width:auto; min-width:10em; max-width:20em`, verificado en banco de pruebas) y el estilo en linea gana a esta hoja: cualquier `min-width` que se pusiera seria una regla muerta, y forzarla con !important solo para ensanchar el panel no compensa. Con `white-space: nowrap` en los enlaces el panel se ajusta al texto mas largo, que es el comportamiento correcto. Tampoco se separa del item padre: SmartMenus escribe `top`, `margin-top` y `margin-left` en linea, y Elementor ademas fija `top:100%!important` en el layout horizontal. El panel cuelga pegado a la barra, que es lo habitual en un desplegable y evita el hueco que rompe el hover al bajar el raton. */ padding: 6px 0; background: var(--sa-glass-deep); border: 1px solid rgba(255,255,255,.13); border-radius: 14px; box-shadow: 0 26px 60px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.16); overflow: hidden; } /* Elementor mete un `border-left: 16px solid transparent` en los enlaces de subnivel (`.elementor-nav-menu ul ul a`) que descuadra el sangrado. */ .sa-hdr .sa-bar .sa-nav ul.sub-menu a.elementor-sub-item{ position: relative; border-left: 0; display: flex; align-items: center; padding: 11px 20px 11px 26px; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .1px; line-height: 1.35; white-space: nowrap; color: rgba(255,255,255,.78); background-color: transparent; transition: color .25s var(--sa-ease), background-color .25s var(--sa-ease), padding-left .28s var(--sa-ease); } .sa-hdr .sa-bar .sa-nav ul.sub-menu a.elementor-sub-item::before{ content: ""; position: absolute; left: 12px; top: 50%; width: 0; height: 1px; margin-top: -.5px; background: var(--sa-gold); transition: width .28s var(--sa-ease); } .sa-hdr .sa-bar .sa-nav ul.sub-menu a.elementor-sub-item:hover, .sa-hdr .sa-bar .sa-nav ul.sub-menu a.elementor-sub-item.highlighted, .sa-hdr .sa-bar .sa-nav ul.sub-menu a.elementor-sub-item.elementor-item-active{ color: var(--sa-gold); background-color: rgba(255,255,255,.05); padding-left: 34px; } .sa-hdr .sa-bar .sa-nav ul.sub-menu a.elementor-sub-item:hover::before{ width: 10px; } .sa-hdr .sa-bar .sa-nav ul.sub-menu a.elementor-sub-item:focus-visible{ outline: 2px solid var(--sa-gold); outline-offset: -3px; } /* Indicador del item con hijos en la barra de escritorio. */ .sa-hdr .sa-bar .sa-nav .elementor-nav-menu--main .sub-arrow{ display: inline-flex; align-items: center; margin: 0 0 0 6px; padding: 0; font-size: 9px; color: rgba(255,255,255,.55); transition: transform .3s var(--sa-ease), color .25s var(--sa-ease); } .sa-hdr .sa-bar .sa-nav .elementor-nav-menu--main a.highlighted .sub-arrow, .sa-hdr .sa-bar .sa-nav .elementor-nav-menu--main a[aria-expanded="true"] .sub-arrow{ transform: rotate(180deg); color: var(--sa-gold); } .sa-hdr .sa-bar .sa-nav .elementor-nav-menu--main a.elementor-item.highlighted{ background-color: transparent; color: var(--sa-txt-hi); } /* ========================================================================= 7. TABLET + MOVIL: hamburguesa y panel Mismo lenguaje visual en los dos, solo cambian medidas. ========================================================================= */ /* --- Boton hamburguesa: cuadrado de cristal --- */ .sa-navm .elementor-menu-toggle{ width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--sa-hair); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .3s var(--sa-ease), border-color .3s var(--sa-ease); } .sa-hdr-mob .sa-navm .elementor-menu-toggle{ width: 44px; height: 44px; } .sa-navm .elementor-menu-toggle:focus-visible{ outline: 2px solid var(--sa-gold); outline-offset: 2px; } /* Hamburguesa -> X: el widget ya intercambia los iconos; aqui se suaviza */ .sa-navm .elementor-menu-toggle i{ transition: transform .38s var(--sa-ease), opacity .28s var(--sa-ease); } .sa-navm .elementor-menu-toggle[aria-expanded="true"]{ border-color: rgba(218,165,32,.45); } .sa-navm .elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--close{ transform: rotate(90deg); } /* --- El panel --- Elementor lo deja en flujo (position:static) cuando "Full Width" esta activo, lo que inflaba la barra y desbordaba el ancho. Con full_width desactivado se posiciona aqui: .sa-navm pasa a static para que el offsetParent sea .sa-bar, y el panel ocupa exactamente el ancho de la barra, 12px por debajo. Especificidad (0,4,0) para ganarle a las reglas que Elementor genera por widget. */ .sa-hdr .sa-navm{ position: static; } /* OJO — `nav.` NO es decorativo. Elementor marca con la MISMA clase `elementor-nav-menu--dropdown` dos elementos distintos: el