/* * 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; } /* Hamburguesa hasta 1279 px (0.1.19). Entre 1025 y 1279 el menú de escritorio (cinco elementos a 44 px) no cabe con el logo y el botón «Área cliente» y se monta sobre ellos (a 1201 toca el logo y entra 13 px en el botón; desde 1280 queda a 22 px del logo y a 44 del botón). El corte del kit está en las clases globales menu-escritorio / menu-movil / area-cliente (≤ 1024); aquí se repiten esas tres reglas de tableta hasta 1279. «Área cliente» ya es un elemento del menú móvil. El mega menú se abre desde el menú de escritorio, así que en este tramo no aparece. */ @media (min-width: 1025px) and (max-width: 1279px) { .elementor.elementor-location-header .menu-escritorio, .elementor.elementor-location-header .area-cliente { display: none; } .elementor.elementor-location-header .menu-movil { display: flex; align-items: center; } } /* ---------- 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; } /* Una columna (0.1.17): Nombre, Email, Teléfono, Asunto, privacidad y Enviar, aunque en el DOM Asunto vaya segundo para ocupar la columna derecha en escritorio. */ .slot-formulario .elementor-field-group-nombre { order: 1; } .slot-formulario .elementor-field-group-email { order: 2; } .slot-formulario .elementor-field-group-telefono { order: 3; } .slot-formulario .elementor-field-group-asunto { order: 4; } .slot-formulario .elementor-field-group-privacidad { order: 5; } .slot-formulario .elementor-field-type-submit { order: 6; } } /* ---------- 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; } /* .cifra-lisa (0.1.18, clase global del kit en el mismo bloque que .cifra): sin grano, para fondo --azul. El número en --blanco y «años» en --azul-claro; tamaño e interlineado, los de arriba. */ .cifra.cifra-lisa .elementor-counter .elementor-counter-number, .cifra.cifra-lisa .cifra-texto { background: none; -webkit-text-fill-color: currentColor; } .cifra.cifra-lisa .elementor-counter .elementor-counter-number-wrapper, .cifra.cifra-lisa .elementor-counter .elementor-counter-number { color: var(--blanco, #fff); } .cifra.cifra-lisa .cifra-texto { color: var(--azul-claro, #84c5e3); } /* En Mobiliario la cifra va a la derecha de la ilustración y sale del contenedor (como en el PSD): a 210 px «años» mide ≈ 456 px y por debajo de 1920 de ancho se cortaría. Se reduce con el ancho de la ventana hasta que cabe (210 px desde 1920; 155 px a 1680; mínimo 150 px). */ .cifra.cifra-lisa .elementor-counter .elementor-counter-number-wrapper, .cifra.cifra-lisa .cifra-texto { font-size: clamp(150px, calc(155px + (100vw - 1680px) * .229), var(--cifra, 210px)); } /* La composición del PSD (ilustración desde −17 px, haz y cifra) solo cabe junto a la columna de texto desde 1360 px. Entre 1360 y 1599 el arte que contiene la cifra lisa se reduce al 92 % anclado arriba a la derecha. Entre 1025 y 1359 la columna de texto se queda en 190–520 px y el titular (h1 de 80 px) no cabe: el arte baja debajo del texto, como en tableta, al 75 %. En tableta y móvil manda el kit (hero-pagina-*). */ @media (min-width: 1360px) and (max-width: 1599px) { .elementor .hero-pagina-arte:has(.cifra-lisa) { transform: scale(.92); transform-origin: 100% 0; } } @media (min-width: 1025px) and (max-width: 1359px) { .elementor .hero-pagina-interior:has(.cifra-lisa) { flex-direction: column; align-items: flex-start; } .elementor .hero-pagina-interior:has(.cifra-lisa) > .hero-pagina-texto { max-width: 100%; } .elementor .hero-pagina-arte-caja:has(.cifra-lisa) { width: 100%; height: 540px; flex: 0 0 auto; } .elementor .hero-pagina-arte:has(.cifra-lisa) { inset-inline-end: auto; inset-inline-start: 0; transform: scale(.75); transform-origin: 0 0; } } /* ---------- Páginas de apoyo del pie: listas ---------- * El párrafo V4 no admite