.elementor-183 .elementor-element.elementor-element-hdrmenu .elementor-menu-toggle{margin-left:auto;}.elementor-183 .elementor-element.elementor-element-hdrmenu .elementor-nav-menu .elementor-item{font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:600;}.elementor-183 .elementor-element.elementor-element-hdrmenu .elementor-nav-menu--main .elementor-item{color:#17354D;fill:#17354D;padding-left:0px;padding-right:0px;}.elementor-183 .elementor-element.elementor-element-hdrmenu .elementor-nav-menu--main .elementor-item:hover, .elementor-183 .elementor-element.elementor-element-hdrmenu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-183 .elementor-element.elementor-element-hdrmenu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-183 .elementor-element.elementor-element-hdrmenu .elementor-nav-menu--main .elementor-item:focus{color:#E48E45;fill:#E48E45;}.elementor-183 .elementor-element.elementor-element-hdrmenu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-183 .elementor-element.elementor-element-hdrmenu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#E48E45;}.elementor-183 .elementor-element.elementor-element-hdrmenu .e--pointer-framed .elementor-item:before, .elementor-183 .elementor-element.elementor-element-hdrmenu .e--pointer-framed .elementor-item:after{border-color:#E48E45;}.elementor-183 .elementor-element.elementor-element-hdrmenu .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#17354D;}.elementor-183 .elementor-element.elementor-element-hdrmenu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:before, .elementor-183 .elementor-element.elementor-element-hdrmenu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:after{background-color:#E48E45;}.elementor-183 .elementor-element.elementor-element-hdrmenu .e--pointer-framed .elementor-item.elementor-item-active:before, .elementor-183 .elementor-element.elementor-element-hdrmenu .e--pointer-framed .elementor-item.elementor-item-active:after{border-color:#E48E45;}.elementor-183 .elementor-element.elementor-element-hdrmenu .e--pointer-framed .elementor-item:before{border-width:3px;}.elementor-183 .elementor-element.elementor-element-hdrmenu .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 3px 3px;}.elementor-183 .elementor-element.elementor-element-hdrmenu .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:3px 3px 0 0;}.elementor-183 .elementor-element.elementor-element-hdrmenu .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:3px 0 0 3px;}.elementor-183 .elementor-element.elementor-element-hdrmenu .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 3px 3px 0;}.elementor-183 .elementor-element.elementor-element-hdrmenu .e--pointer-underline .elementor-item:after, .elementor-183 .elementor-element.elementor-element-hdrmenu .e--pointer-overline .elementor-item:before, .elementor-183 .elementor-element.elementor-element-hdrmenu .e--pointer-double-line .elementor-item:before, .elementor-183 .elementor-element.elementor-element-hdrmenu .e--pointer-double-line .elementor-item:after{height:3px;}.elementor-183 .elementor-element.elementor-element-hdrmenu{--e-nav-menu-horizontal-menu-item-margin:calc( 26px / 2 );}.elementor-183 .elementor-element.elementor-element-hdrmenu .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:26px;}.elementor-183 .elementor-element.elementor-element-54265b2{--divider-style:solid;--subtotal-divider-style:solid;--view-cart-button-display:none;--cart-footer-layout:1fr;--elementor-remove-from-cart-button:none;--remove-from-cart-button:block;--toggle-icon-size:18px;--cart-border-style:none;}.elementor-183 .elementor-element.elementor-element-54265b2 .widget_shopping_cart_content{--subtotal-divider-left-width:0;--subtotal-divider-right-width:0;}.elementor-183 .elementor-element.elementor-element-e97fbb0 .elementor-icon-wrapper{text-align:center;}.elementor-183 .elementor-element.elementor-element-e97fbb0 .elementor-icon{font-size:18px;}.elementor-183 .elementor-element.elementor-element-e97fbb0 .elementor-icon svg{height:18px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-183 .elementor-element.elementor-element-hdrmenu.elementor-element{--order:99999 /* order end hack */;}}/* Start custom CSS *//* ============================================================================ CABECERA DE ARANTOUR — botones redondos (cuenta y carrito) y VARIANTE CLARA para cuando la cabecera va encima de la portada oscura. Va en el CSS personalizado de la plantilla de cabecera (Elementor → Cabecera → Ajustes → CSS personalizado). Cómo se usa: 1. A los dos widgets de icono (el «Icono» de Elementor y el «Carrito del menú» de Elementor Pro), en Avanzado → Clases CSS: at-iconbtn 2. Al CONTENEDOR de la cabecera, cuando vaya sobre una imagen oscura: at-claro (en la portada ya se aplica solo, porque el body lleva la clase `home`). `at-claro` vale además SUELTA, puesta en el propio elemento y no en un antepasado: sirve para aclarar solo una pieza sobre fondo oscuro —el logo del pie, por ejemplo— sin tocar nada más. 3. La separación entre los dos iconos la decide el contenedor que los agrupa (Diseño → Espacio entre elementos): 12 px en el diseño. 4. Los iconos del diseño son de TRAZO. Para la cuenta: Font Awesome REGULAR «user», o el `icono-cuenta.svg` de esta carpeta (se sube desde el propio widget: Icono → Biblioteca de iconos → SVG → Subir; por la biblioteca de medios WordPress lo rechaza). Para el carrito vale el del widget. COLORES: se usan las variables globales del kit, NO valores sueltos. Así, si cambia la paleta en Ajustes del sitio, la cabecera cambia con ella: --e-global-color-primary navy #17354D --e-global-color-accent naranja #E48E45 --e-global-color-4803e6b línea #DBE4EC --e-global-color-d0a662a papel #FFFFFF (los identificadores raros son los de los colores personalizados del kit; salen en el propio .elementor-183 de color de Elementor). SOBRE EL `!important`: no hace falta en ningún sitio. Cuando algo del kit o del tema gana, la salida es escribir un .elementor-183 que pese más, no `!important`. Y con el logotipo la salida ha sido otra mejor: sacarlo de la pelea, pintándolo con `fill` en vez de con `color` (ver más abajo). ========================================================================== */ .at-iconbtn{ --at-size:40px; /* diámetro del botón */ --at-icon:18px; /* tamaño del icono */ } /* ---------- 1. El icono de la cuenta (widget «Icono») ---------- */ /* `line-height:0` en el envoltorio: el hueco raro debajo del icono es el de la línea base de la caja de texto que lo contiene, no un margen. */ .at-iconbtn .elementor-icon-wrapper{line-height:0} .at-iconbtn .elementor-icon{ display:grid;place-items:center; width:var(--at-size);height:var(--at-size);box-sizing:border-box;padding:0; border:1px solid var(--e-global-color-4803e6b,#DBE4EC);border-radius:50%; background:var(--e-global-color-d0a662a,#fff); color:var(--e-global-color-primary,#17354D); font-size:0;line-height:0; transition:color .15s,border-color .15s,background .15s; } .at-iconbtn .elementor-icon svg, .at-iconbtn .elementor-icon i{ width:var(--at-icon);height:var(--at-icon); display:block;font-size:var(--at-icon); } /* Los iconos de Font Awesome son siluetas macizas y se pintan con `fill`; los SVG de trazo traen `fill="none"` y se pintan con `stroke`. Se distinguen por ese atributo. OJO con el `fill:none` explícito: el atributo del propio SVG es lo de MENOS peso que hay en CSS, así que la regla de Elementor para los iconos lo rellenaba igualmente. Hay que repetirlo desde aquí. */ .at-iconbtn .elementor-icon svg:not([fill="none"]){fill:currentColor} .at-iconbtn .elementor-icon svg[fill="none"]{fill:none;stroke:currentColor} .at-iconbtn .elementor-icon:hover{ color:var(--e-global-color-accent,#E48E45); border-color:var(--e-global-color-accent,#E48E45); } /* ---------- 2. El carrito (widget «Carrito del menú») ---------- */ .at-iconbtn .elementor-menu-cart__toggle .elementor-button{ position:relative;display:grid;place-items:center; width:var(--at-size);height:var(--at-size);box-sizing:border-box;padding:0; border:1px solid var(--e-global-color-4803e6b,#DBE4EC);border-radius:50%; background:var(--e-global-color-d0a662a,#fff); color:var(--e-global-color-primary,#17354D);line-height:0; transition:color .15s,border-color .15s,background .15s; } .at-iconbtn .elementor-menu-cart__toggle .elementor-button:hover{ color:var(--e-global-color-accent,#E48E45); border-color:var(--e-global-color-accent,#E48E45); } /* El importe que el widget pone al lado del icono: fuera. */ .at-iconbtn .elementor-menu-cart__toggle .elementor-button-text{display:none} /* El icono del carrito lleva SU color puesto en el `span` que lo envuelve (gris de fábrica): con `color:inherit` vuelve a mandar el del botón, y el svg lo sigue con `currentColor`. Y hay que repetirlo EN HOVER, porque el widget también fija ahí su color y si no el icono se vuelve gris justo al pasar por encima. */ .at-iconbtn .elementor-menu-cart__toggle .elementor-button-icon, .at-iconbtn .elementor-menu-cart__toggle .elementor-button:hover .elementor-button-icon{ color:inherit; } .at-iconbtn .elementor-menu-cart__toggle .elementor-button-icon{ position:static;display:grid;place-items:center;width:100%;height:100%; } .at-iconbtn .elementor-menu-cart__toggle .elementor-button-icon svg{ width:var(--at-icon);height:var(--at-icon);display:block; } .at-iconbtn .elementor-menu-cart__toggle .elementor-button-icon svg:not([fill="none"]){fill:currentColor} .at-iconbtn .elementor-menu-cart__toggle .elementor-button-icon svg[fill="none"]{fill:none;stroke:currentColor} /* La insignia, colgando de la esquina como en el diseño. Elementor la estila con un .elementor-183 largo y sus propias variables, así que aquí se REUSAN esas variables y se repite su misma cadena con la clase del widget delante: no hace falta pelearse con !important. */ .elementor-widget-woocommerce-menu-cart.at-iconbtn .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter]{ --items-indicator-background-color:var(--e-global-color-accent,#E48E45); --items-indicator-text-color:var(--e-global-color-d0a662a,#fff); font-size:10px;font-weight:800; min-width:1.7em;height:1.7em;line-height:1.7em; top:-.6em;inset-inline-end:-.6em; } /* Con el carrito vacío no se enseña (el widget también trae su interruptor para esto). */ .elementor-widget-woocommerce-menu-cart.at-iconbtn .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter="0"]{display:none} /* ============================================================================ 3. VARIANTE CLARA — cabecera flotando sobre la portada oscura ---------------------------------------------------------------------------- Se activa de dos maneras, y las reglas están escritas para las dos: · añadiendo la clase `at-claro` al contenedor de la cabecera, o · automáticamente en la portada (`body.home`). Todo con .elementor-183es que pesan MÁS que los de Elementor, sin `!important`. ========================================================================== */ /* La cabecera, encima de la portada y sin fondo. */ body.home .header-container-nav, .at-claro.header-container-nav{ position:absolute;left:0;right:0;z-index:10; background:transparent;border:0; } /* --- Logotipo --------------------------------------------------------------- El color lo lleva el PROPIO SVG: `fill="#247BAD"` en la etiqueta y, dentro del archivo, un `