/* * Diacash Magento Bridge — cabecera y pie del Theme Builder. * * La maqueta (medidas, colores, tipografía) está en las clases globales del kit: cabecera, * cabecera-interior, cabecera-logo, cabecera-nav, menu, menu-escritorio, menu-movil, * area-cliente, megamenu-panel, slot-megamenu, pie… Aquí solo va lo que una clase global * no puede expresar: estados (fija, compacta, abierto) y el interior del widget de menú. * Colores con las variables del kit (--azul, --negro…), con respaldo. * * Las reglas con body.dcb-front no se aplican dentro del editor de Elementor. */ /* ---------- Cabecera fija y compacta ---------- */ body.dcb-front .elementor-location-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; } .elementor-location-header .cabecera { transition: box-shadow .25s ease; } .elementor-location-header .cabecera-interior { transition: height .25s ease; } .elementor-location-header .cabecera-logo { transition: width .25s ease; } @media (min-width: 1025px) { body.dcb-front .elementor-location-header.dcb-compacta .cabecera { box-shadow: 0 4px 20px rgba(0, 0, 0, .12); } body.dcb-front .elementor-location-header.dcb-compacta .cabecera-interior { height: 80px; } body.dcb-front .elementor-location-header.dcb-compacta .cabecera-logo { width: 183px; } /* 229 px al 80 % */ } /* El enlace del logo no encoge cuando el menú necesita sitio. */ .elementor-location-header .cabecera-interior > a { flex: 0 0 auto; line-height: 0; } /* ---------- Menú de escritorio ---------- * Los widgets de menú (V3) van dentro de un bloque V4 con las clases «menu» + «menu-escritorio» * o «menu-movil»: Elementor solo genera el CSS de una clase global si la usa un elemento V4. */ .elementor-location-header .menu-escritorio .elementor-widget-nav-menu, .elementor-location-header .menu-escritorio .elementor-widget-container, .elementor-location-header .menu-escritorio .elementor-nav-menu--main, .elementor-location-header .menu-escritorio .elementor-nav-menu--main > .elementor-nav-menu, .elementor-location-header .menu-escritorio .elementor-nav-menu--main > .elementor-nav-menu > li { height: 100%; } .elementor-location-header .menu-escritorio .elementor-nav-menu--main > .elementor-nav-menu { gap: 44px; flex-wrap: nowrap; } /* El ::after de limpieza del menú contaría como un elemento más y añadiría 44 px al final. */ .elementor-location-header .menu-escritorio .elementor-nav-menu--main > .elementor-nav-menu::after { display: none; } .elementor-location-header .menu-escritorio .elementor-nav-menu--main .elementor-item, .elementor-location-header .menu-escritorio .elementor-nav-menu--main .elementor-item:hover, .elementor-location-header .menu-escritorio .elementor-nav-menu--main .elementor-item:focus, .elementor-location-header .menu-escritorio .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-location-header .menu-escritorio .elementor-nav-menu--main .elementor-item.highlighted { position: relative; display: flex; align-items: center; height: 100%; padding: 0; font: inherit; /* la tipografía la pone la clase global «menu» */ color: inherit; fill: currentColor; white-space: nowrap; } /* Elemento activo: barra de 4 px pegada al borde inferior de la cabecera */ .elementor-location-header .menu-escritorio .elementor-nav-menu--main .elementor-item::after { content: ""; position: absolute; left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 4px; background: var(--azul, #175aa4); opacity: 1; transform: scaleX(0); transform-origin: center; transition: transform .25s ease; } .elementor-location-header .menu-escritorio .elementor-nav-menu--main .elementor-item.elementor-item-active::after, .elementor-location-header .menu-escritorio .elementor-nav-menu--main .elementor-item:hover::after, .elementor-location-header .menu-escritorio .elementor-nav-menu--main .elementor-item:focus-visible::after, .elementor-location-header .menu-escritorio .elementor-nav-menu--main .elementor-item.is-open::after { transform: scaleX(1); } /* ---------- Mega menú de Productos ---------- */ /* Nunca más alto que la ventana: si no cabe, el panel hace scroll por dentro (barra fina). */ .elementor-location-header .megamenu-panel { max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 109px - 16px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--gris-etiqueta, #dbdbdb) transparent; } .elementor-location-header .megamenu-panel::-webkit-scrollbar { width: 6px; } .elementor-location-header .megamenu-panel::-webkit-scrollbar-thumb { background: var(--gris-etiqueta, #dbdbdb); border-radius: 3px; } .elementor-location-header .megamenu-panel::-webkit-scrollbar-track { background: transparent; } @media (min-width: 1025px) { body.dcb-front .elementor-location-header.dcb-compacta .megamenu-panel { max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 80px - 16px); } } body.dcb-front .elementor-location-header .megamenu-panel { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s linear .18s; } body.dcb-front .elementor-location-header .megamenu-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .18s ease; } /* ---------- Menú móvil (hamburguesa, pantalla completa, acordeón) ---------- */ .elementor-location-header .menu-movil .elementor-menu-toggle { margin-left: auto; padding: 8px; background: transparent; color: var(--negro, #000); font-size: 28px; border-radius: 0; } /* El widget mide lo que el botón: el desplegable cerrado no debe sumar alto ni descentrar la hamburguesa. */ .elementor-location-header .menu-movil .elementor-widget-nav-menu { height: 44px; overflow: visible; } /* Elementor coloca el desplegable con estilos en línea; aquí se fija a pantalla completa bajo la cabecera. */ body.dcb-front .elementor-location-header .menu-movil .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container { position: fixed !important; top: var(--dcb-cabecera-fin, 72px) !important; left: 0 !important; right: 0; bottom: 0; width: 100% !important; max-height: none; margin: 0; padding: 8px 20px 40px; overflow-y: auto; background: var(--blanco, #fff); box-shadow: none; } .elementor-location-header .menu-movil .elementor-nav-menu--dropdown { background: var(--blanco, #fff); } .elementor-location-header .menu-movil .elementor-nav-menu--dropdown a, .elementor-location-header .menu-movil .elementor-nav-menu--dropdown a:hover, .elementor-location-header .menu-movil .elementor-nav-menu--dropdown a:focus, .elementor-location-header .menu-movil .elementor-nav-menu--dropdown a.highlighted, .elementor-location-header .menu-movil .elementor-nav-menu--dropdown a.elementor-item-active { padding: 16px 0; border-bottom: 1px solid var(--gris-fondo, #f0f0f0); background: transparent; /* Misma tipografía que la clase global «menu» (el desplegable de Elementor fija 13 px). */ font-family: var(--familia-base, "Figtree"), system-ui, sans-serif; font-size: var(--menu, 20px); font-weight: 400; line-height: 1.2; color: var(--negro, #000); fill: currentColor; justify-content: space-between; } .elementor-location-header .menu-movil .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-location-header .menu-movil .elementor-nav-menu--dropdown a.highlighted { color: var(--azul, #175aa4); } .elementor-location-header .menu-movil .elementor-nav-menu--dropdown .sub-menu a, .elementor-location-header .menu-movil .elementor-nav-menu--dropdown .sub-menu a:hover, .elementor-location-header .menu-movil .elementor-nav-menu--dropdown .sub-menu a:focus { padding: 12px 0 12px 16px; font-size: var(--card-texto, 18px); border-left: 0; } body.dcb-menu-abierto { overflow: hidden; } /* ---------- Pie ---------- * Los enlaces heredan el color de su clase (pie-texto, pie-legal); sin esto toman el azul * del estilo por defecto de enlace del kit. */ .elementor-location-footer .pie-texto a, .elementor-location-footer .pie-texto a:hover, .elementor-location-footer .pie-texto a:focus-visible, .elementor-location-footer .pie-legal a, .elementor-location-footer .pie-legal a:hover, .elementor-location-footer .pie-legal a:focus-visible { color: inherit; text-decoration: none; } .elementor-location-footer .pie-texto a:hover, .elementor-location-footer .pie-texto a:focus-visible, .elementor-location-footer .pie-legal a:hover, .elementor-location-footer .pie-legal a:focus-visible { text-decoration: underline; } /* ---------- Botón primario ---------- * El botón es un : sin esto, en hover tomaba el color de enlace del kit (azul) y el texto * desaparecía sobre el fondo azul. El fondo de hover lo pone la clase global «boton-primario». */ .elementor a.boton-primario, .elementor a.boton-primario:visited, .elementor a.boton-primario:hover, .elementor a.boton-primario:focus, .elementor a.boton-primario:focus-visible, .elementor a.boton-primario:active { color: var(--blanco, #fff); text-decoration: none; } .elementor a.boton-primario:hover, .elementor a.boton-primario:focus-visible { background-color: var(--azul-hover, #0f4a8c); } /* Botón «Enviar» de los formularios de Elementor Pro: mismo criterio. */ .elementor .elementor-form .elementor-button, .elementor .elementor-form .elementor-button:hover, .elementor .elementor-form .elementor-button:focus { color: var(--blanco, #fff); } /* El atributo y las clases extra ganan al color de hover que Elementor genera para cada formulario. */ .elementor .elementor-form .elementor-field-type-submit .elementor-button[type="submit"]:hover, .elementor .elementor-form .elementor-field-type-submit .elementor-button[type="submit"]:focus-visible { background-color: var(--azul-hover, #0f4a8c); } /* ---------- Páginas: color de enlace heredado ---------- * En párrafos y títulos enlazados el va dentro del elemento que lleva la clase, y el * estilo de enlace por defecto del kit (azul) le ganaba al color de la clase. */ .elementor .texto-blanco a, .elementor .texto-azul-claro a, .elementor .parrafo-blanco a, .elementor .antetitulo a { color: inherit; text-decoration: none; } .elementor .texto-azul-claro a:hover, .elementor .texto-azul-claro a:focus-visible { color: var(--blanco, #fff); } /* ---------- Formulario «¿Eres una empresa?» (widget Formulario de Elementor Pro en slot-formulario) ---------- * Nombre, Email y Teléfono a la izquierda; Asunto a la derecha ocupando el alto de los tres. * Depende de los ID de campo: nombre, email, telefono, asunto, privacidad. */ .slot-formulario .elementor-form-fields-wrapper { display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr); column-gap: 150px; row-gap: 28px; margin: 0; } .slot-formulario .elementor-form-fields-wrapper > .elementor-field-group { width: 100%; max-width: none; padding: 0; margin: 0; grid-column: 1; align-content: flex-start; } .slot-formulario .elementor-field-group-asunto { grid-column: 2 !important; grid-row: 1 / span 3; } .slot-formulario .elementor-field-group-asunto textarea { height: 100%; } .slot-formulario .elementor-field-group-privacidad, .slot-formulario .elementor-field-type-submit { grid-column: 1 / -1 !important; } .slot-formulario .elementor-field-group > label { padding-bottom: 12px; } .slot-formulario .elementor-field-group .elementor-field-textual { min-height: 54px; padding: 8px 14px; } .slot-formulario .elementor-mark-required .elementor-field-label::after, .slot-formulario .elementor-field-type-acceptance .elementor-field-subgroup label::after { color: var(--rojo-precio, #e56469); } .slot-formulario .elementor-field-type-acceptance .elementor-field-subgroup label { font-size: var(--card-texto, 18px); line-height: 1.2; } .slot-formulario .elementor-field-type-acceptance.elementor-field-required .elementor-field-subgroup label::after { content: "*"; padding-left: .1em; } .slot-formulario .elementor-field-type-acceptance input { margin-right: 8px; } .slot-formulario .elementor-field-type-submit .elementor-button { width: auto; min-height: 43px; } @media (max-width: 1024px) { .slot-formulario .elementor-form-fields-wrapper { column-gap: 40px; } } @media (max-width: 767px) { .slot-formulario .elementor-form-fields-wrapper { grid-template-columns: minmax(0, 1fr); } .slot-formulario .elementor-field-group-asunto { grid-column: 1 !important; grid-row: auto; } } /* ---------- Mapa a sangre (widget Google Maps en slot-mapa): ocupa todo el alto del bloque ---------- */ .slot-mapa { position: relative; } .slot-mapa .elementor-widget-google_maps, .slot-mapa .elementor-custom-embed { position: absolute; inset: 0; height: 100%; } /* Tres clases: gana a la altura fija en px que Elementor genera para el iframe del widget. */ .slot-mapa .elementor-widget-google_maps .elementor-custom-embed iframe { display: block; width: 100%; height: 100%; border: 0; } /* ---------- Hero: entrada al cargar la página ---------- * Animaciones CSS que arrancan solas con la página, en todos los anchos. Sustituyen a las * interacciones «al cargar» del Editor V4, que en móvil no se disparaban hasta hacer scroll. * No dependen de JavaScript: si algo falla, el hero se ve igualmente completo. * Estructura esperada (clases globales del kit): hero-texto > [línea 1] + hero-linea > * [resto de la línea] + hero-palabra (palabra en azul y punto); hero-arte > hero-circulo + * hero-ilustracion > [SVG]. Con body.dcb-front: no se aplican dentro del editor. */ /* Arrancan en opacidad 0,01 y no en 0: Chrome no cuenta como LCP lo que se pinta con opacidad 0, y el hero (titular e imagen) es el elemento más grande de la primera pantalla. A la vista es lo mismo. */ @keyframes dcb-hero-circulo { from { opacity: .01; transform: scale(.9); } to { opacity: 1; transform: scale(1); } } @keyframes dcb-hero-sube { from { opacity: .01; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } body.dcb-front .hero-circulo { animation: dcb-hero-circulo .6s ease-out both; } body.dcb-front .hero-ilustracion > * { animation: dcb-hero-sube .6s ease-out .2s both; } body.dcb-front .hero-texto > :first-child { animation: dcb-hero-sube .5s ease-out both; } body.dcb-front .hero-texto .hero-linea > :first-child { animation: dcb-hero-sube .5s ease-out .12s both; } body.dcb-front .hero-texto .hero-palabra { animation: dcb-hero-sube .5s ease-out .36s both; } /* ---------- Páginas interiores: entrada del hero al cargar ---------- * Mismo criterio que la home. hero-pagina-texto > [titular] + [párrafos]; hero-pagina-arte > * [fondo con grano] + [ilustración] + [cifra]. */ body.dcb-front .hero-pagina-texto > :nth-child(1) { animation: dcb-hero-sube .5s ease-out both; } body.dcb-front .hero-pagina-texto > :nth-child(2) { animation: dcb-hero-sube .5s ease-out .12s both; } body.dcb-front .hero-pagina-arte > :nth-child(1) { animation: dcb-hero-circulo .6s ease-out both; } body.dcb-front .hero-pagina-arte > :nth-child(2) { animation: dcb-hero-sube .6s ease-out .2s both; } body.dcb-front .hero-pagina-arte > :nth-child(3) { animation: dcb-hero-sube .6s ease-out .35s both; } body.dcb-front .cabecera-pagina-interior > * { animation: dcb-hero-sube .5s ease-out both; } body.dcb-front .cabecera-pagina-interior > :nth-child(2) { animation-delay: .12s; } /* ---------- Cifra «35 años» con grano ---------- * Texto real (el número es el widget Contador de Elementor; «años», un párrafo con la clase * cifra-texto). El grano es la textura assets/grano.webp recortada a la forma de las letras; * el color de fondo hace de color del texto. */ .cifra .elementor-widget-counter, .cifra .elementor-counter { margin: 0; padding: 0; } .cifra .elementor-counter .elementor-counter-number-wrapper { display: block; font-family: var(--familia-base, "Figtree"), system-ui, sans-serif; font-size: var(--cifra, 210px); font-weight: 800; line-height: .8; text-align: left; color: var(--azul, #175aa4); } .cifra .elementor-counter .elementor-counter-title:empty { display: none; } .cifra .elementor-counter .elementor-counter-number, .cifra .cifra-texto { background-image: url(grano.webp); background-size: 256px 256px; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cifra .elementor-counter .elementor-counter-number { display: block; line-height: .8; background-color: var(--azul, #175aa4); } .cifra .cifra-texto { display: block; background-color: var(--azul, #175aa4); padding-bottom: .12em; } /* ---------- Páginas de apoyo del pie: listas ---------- * El párrafo V4 no admite