/** * Valme Core — Footer sitewide. * * Estilos del bloque .valme-footer, que se pega como widget HTML en la * plantilla de footer de Elementor (Theme Builder). Al ser sitewide, la hoja * se encola desde el plugin (class-valme-footer.php) en lugar de ir inline: * así se cachea una vez en lugar de duplicarse en cada página. * * Respeta la paleta y la tipografía de DESIGN.md. Sin border-radius. * * @since 2026-07-16 */ .valme-footer { /* Paleta VALME (DESIGN.md) */ --valme-principal: #0d4e9c; --valme-principal-80: #3d71b0; --valme-secundario: #cfd4db; --valme-texto: #030e41; --valme-enfasis: #78abe9; --valme-blanco: #ffffff; --valme-negro: #333333; --valme-superficie: #f4f7fb; font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--valme-texto); font-size: 16px; line-height: 1.6; background: var(--valme-blanco); } .valme-footer *, .valme-footer *::before, .valme-footer *::after { box-sizing: border-box; } /* ======================================================================= Banda superior de CTA ("Contacta con nosotros") ===================================================================== */ .valme-footer__cta { background: var(--valme-texto); color: var(--valme-blanco); } .valme-footer__cta-inner { display: flex; align-items: center; justify-content: flex-end; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 28px 20px; } .valme-footer__cta-link { display: inline-flex; align-items: center; gap: 14px; font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--valme-blanco) !important; text-decoration: none; transition: color 0.2s ease; } .valme-footer__cta-link:hover { color: var(--valme-enfasis) !important; } .valme-footer__cta-arrow { flex-shrink: 0; width: 30px; height: 30px; transition: transform 0.2s ease; } .valme-footer__cta-link:hover .valme-footer__cta-arrow { transform: translate(3px, -3px); } /* ======================================================================= Cuerpo del footer: marca + columnas de enlaces ===================================================================== */ .valme-footer__main { max-width: 1200px; margin: 0 auto; padding: 56px 20px 40px; } .valme-footer__grid { display: grid; /* Marca algo más ancha; las 5 columnas de enlaces reparten el resto. */ grid-template-columns: 1.5fr repeat(5, 1fr); gap: 40px 24px; } /* ---- Columna de marca -------------------------------------------------- */ .valme-footer__brand-logo { display: block; width: 160px; height: auto; margin-bottom: 20px; } .valme-footer__brand-text { margin: 0 0 24px; max-width: 320px; font-size: 14px; line-height: 1.6; color: var(--valme-negro); } .valme-footer__brand-text strong { color: var(--valme-texto); font-weight: 700; } .valme-footer__hours { margin: 0 0 24px; font-size: 13px; line-height: 1.7; color: var(--valme-negro); } .valme-footer__hours dt { font-weight: 700; color: var(--valme-texto); } .valme-footer__hours dd { margin: 0 0 8px; } .valme-footer__social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; } .valme-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--valme-principal) !important; border: 1px solid var(--valme-secundario); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .valme-footer__social-link:hover { background: var(--valme-principal); border-color: var(--valme-principal); color: var(--valme-blanco) !important; } .valme-footer__social-link svg { width: 18px; height: 18px; } /* ---- Columnas de enlaces ----------------------------------------------- */ /* Anidado bajo .valme-footer a propósito: es un

, y Elementor mete en el `.elementor-kit-6 h2 { color; font-family; font-size: 48px }` con especificidad 0-1-1, que gana a una clase suelta (0-1-0). Sin esto, el título de columna saldría a 48px en vez de 13px. / .valme-footer .valme-footercol-title { margin: 0 0 16px; padding-bottom: 10px; font-size: 13px; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.06em; color: var(--valme-texto); border-bottom: 2px solid var(--valme-principal); } .valme-footerlist { margin: 0; padding: 0; list-style: none; } .valme-footerlist li { margin: 0 0 9px; } .valme-footerlink { font-size: 14px; line-height: 1.45; color: var(--valme-negro) !important; text-decoration: none; transition: color 0.2s ease; } .valme-footerlink:hover { color: var(--valme-principal) !important; text-decoration: underline; } / ---- Columna de contacto (NAP) ----------------------------------------- / .valme-footernap { margin: 0; font-style: normal; font-size: 14px; line-height: 1.55; color: var(--valme-negro); } .valme-footernap-name { display: block; margin-bottom: 12px; font-weight: 700; color: var(--valme-texto); } .valme-footernap-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; } .valme-footernap-icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; color: var(--valme-principal); } .valme-footernap a { color: var(--valme-negro) !important; text-decoration: none; transition: color 0.2s ease; } .valme-footernap a:hover { color: var(--valme-principal) !important; text-decoration: underline; } / ======================================================================= Barra inferior (legales) ===================================================================== / .valme-footerbottom { background: var(--valme-principal); color: var(--valme-blanco); } .valme-footerbottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 1200px; margin: 0 auto; padding: 16px 20px; font-size: 13px; } .valme-footercopy { margin: 0; color: var(--valme-blanco); } / Crédito de Sancreate. Solo se enlaza en la home (ver templates/footer.php). Color forzado con !important: `.elementor-kit-6 a` (0-1-1) le impondría el azul de marca, que sobre esta barra azul sería ilegible. / .valme-footer .valme-footercredito { color: var(--valme-blanco) !important; text-decoration: underline; transition: opacity 0.2s ease; } .valme-footer .valme-footercredito:hover { opacity: 0.85; } .valme-footerlegal { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; list-style: none; } .valme-footerlegal a { color: var(--valme-blanco) !important; text-decoration: none; transition: opacity 0.2s ease; } .valme-footerlegal a:hover { text-decoration: underline; opacity: 0.85; } / ======================================================================= Responsive ===================================================================== / @media screen and (max-width: 1100px) { .valme-footergrid { / La marca ocupa la fila completa; los enlaces pasan a 3 columnas. */ grid-template-columns: repeat(3, 1fr); } .valme-footerbrand { grid-column: 1 / -1; } .valme-footerbrand-text { max-width: 520px; } } @media screen and (max-width: 767px) { .valme-footergrid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } .valme-footermain { padding: 40px 16px 32px; } .valme-footercta-inner { justify-content: flex-start; padding: 24px 16px; } .valme-footercta-link { font-size: 22px; } .valme-footercta-arrow { width: 22px; height: 22px; } .valme-footerbottom-inner { justify-content: flex-start; padding: 16px; } .valme-footerlegal { gap: 14px; } } @media screen and (max-width: 480px) { .valme-footergrid { grid-template-columns: 1fr; } }