/* ------------------------------------------------------------------ 1. VARIABLES + BASE (declaradas en .esv-footer, nunca en :root) ------------------------------------------------------------------ */ .esv-footer{ /* --- Marca --- */ --esv-primario:#16ABB2; --esv-primario-osc:#0E8C92; /* --- Fondos --- */ --esv-fondo-barra:#2B2B31; --esv-fondo-links:#3C3B42; --esv-fondo-claro:#FFFFFF; /* --- Texto de la banda de enlaces --- Claros porque la banda es oscura en cinco de las seis. Un sitio puede invertirla (reinservida.com la pone en teal #32B3AE) declarando 'texto', 'texto-fuerte' y 'texto-suave' en su 'colors': ahí estos tres pasan a ser tinta oscura y con ellos se mueve todo lo que los lee. */ --esv-texto:#E8E8EA; --esv-texto-fuerte:#FFFFFF; --esv-texto-suave:#A9A8B0; /* Blanco al 8%: se ve porque debajo hay oscuro. Sobre un fondo claro se queda en 1,08:1 y desaparece, así que un sitio con la banda invertida declara 'borde' con un rebaje oscuro. */ --esv-borde:rgba(255,255,255,.08); /* --- Texto de las bandas oscuras (barra legal y copyright) --- Van aparte de --esv-texto* a propósito. Esos tres los puede invertir un sitio que ponga la banda de enlaces en claro, y la barra legal y el copyright siguen en oscuro en las seis: si compartieran variable, invertir la banda dejaría la barra con tinta oscura sobre fondo oscuro (1,07:1). Por eso el valor va escrito literal y no como var(--esv-texto): así la barra no se mueve cuando la banda cambia de esquema. El acento sí arranca del de la banda, que en cinco de las seis vale para las dos; quien lo invierta declara 'barra-acento' aparte. */ --esv-barra-texto:#E8E8EA; --esv-barra-texto-suave:#A9A8B0; --esv-barra-acento:var(--esv-acento-texto); --esv-barra-borde:rgba(255,255,255,.08); /* --- Texto sobre la banda clara de sellos --- */ --esv-gris-titulo:#55545E; --esv-gris-titulo-osc:#2B2B31; /* --- Roles derivados del color de marca --- Van aparte de --esv-primario a propósito. Hay paletas (Asturvida) donde el color de marca supera el 3:1 que exige un titular pero no llega al 4,5:1 que exige un enlace. Con estas variables se sube la luminosidad solo donde hace falta, sin tocar el color corporativo de los títulos. */ --esv-titulo:var(--esv-primario); --esv-acento-texto:var(--esv-primario); --esv-icono:var(--esv-acento-texto); /* --- Relleno de color de marca (botón Mapa web y chip social) --- Aquí el fondo no es el del footer sino el color de marca, así que encima el blanco no siempre es legible. Y cada estado lleva su propio par fondo/tinta porque el hover invierte el relleno (claro <-> oscuro): con una sola tinta para los dos estados, uno de ellos se cae del umbral. */ --esv-sitemap-fondo:var(--esv-primario-osc); --esv-sitemap-fondo-hover:var(--esv-primario); --esv-sitemap-texto:#FFFFFF; --esv-sitemap-texto-hover:var(--esv-sitemap-texto); --esv-social-fondo:var(--esv-primario); --esv-social-fondo-hover:var(--esv-primario-osc); --esv-social-icono:#FFFFFF; --esv-social-icono-hover:var(--esv-social-icono); /* --- Bloques opcionales (contact, registro, hours, logos) --- */ /* Rebaje oscuro, no aclarado: sobre un aclarado, --esv-texto-suave se queda en 3,9:1 y la etiqueta del registro no llegaría al 4,5:1. */ --esv-registro-fondo:rgba(0,0,0,.18); --esv-registro-borde:var(--esv-primario); --esv-registro-etiqueta:var(--esv-texto-suave); --esv-registro-num:var(--esv-texto-fuerte); --esv-horario-etiqueta:var(--esv-texto-suave); --esv-horario-valor:var(--esv-texto); /* Recuadro de los logos con 'plate' (ver .esv-footer__logos-item--plate). */ --esv-logos-fondo:#FFFFFF; /* --- Ajustes del panel (Ajustes › Footer Esvidas) --- Aquí están los valores de siempre. El panel solo cambia el valor de estas variables: no añade ni una regla nueva. Las dos escalas son multiplicadores sin unidad, y se aplican con calc() ahí donde toca, para que una sola variable mueva un grupo entero manteniendo la proporción. Nada de esto toca los breakpoints ni el área táctil mínima de móvil. */ --esv-ancho-max:1440px; --esv-gap-columnas:32px; /* Logos institucionales en móvil (ajuste 'logos_movil'). Aquí están los valores de siempre —la banda y la fila de logos se ven—, y el único otro valor que emite el plugin es 'none' en las dos. Se leen SOLO dentro de @media (max-width:767px): por encima de ahí los logos no se ocultan nunca. El brand (logo de marca + teléfono) no entra aquí, es otro bloque. Se oculta con display:none a propósito. El markup se queda entero en el HTML, que es lo que tiene que leer un rastreador, y así no quedan enlaces invisibles pero enfocables con el teclado, que es lo que deja una técnica de ocultación visual por clip cuando los logos llevan 'url'. */ --esv-logos-movil:flex; --esv-logos-band-movil:block; /* Ritmo vertical de la columna: lo comparten los enlaces, los datos de contacto, las líneas de horario y las separaciones de subtítulo y provincia, para que una columna no mezcle dos cadencias. Los valores de abajo son los de siempre; los desplazamientos fijos (los +1px y +2px de .esv-footer__province) están para que el valor por defecto salga exactamente igual que antes de existir la variable. */ --esv-gap-enlaces:5px; --esv-escala-pad:1; --esv-escala-tipo:1; /* --- Tipografía --- Las tres se pueden sobrescribir con el filtro 'esvidas_footer_font'. La transformación es del TÍTULO de columna y de nadie más: el kicker, el subtítulo, la provincia y las etiquetas de registro y horario llevan su 'text-transform' cableado porque forman parte de su propia jerarquía. */ --esv-fuente-titulos:'Chau Philomene One','Montserrat',Helvetica,Arial,sans-serif; --esv-peso-titulos:400; --esv-transform-titulos:uppercase; font-family:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif; color:var(--esv-texto); background-color:var(--esv-fondo-links); text-align:left; -webkit-font-smoothing:antialiased; } .esv-footer *, .esv-footer *::before, .esv-footer *::after{box-sizing:border-box} .esv-footer ul{list-style:none;margin:0;padding:0} .esv-footer li{margin:0;padding:0} .esv-footer p{margin:0} .esv-footer img{max-width:100%;height:auto;display:block} .esv-footer address{font-style:normal} .esv-footer a{color:inherit;text-decoration:none;transition:color .18s ease,background-color .18s ease,transform .18s ease} .esv-footer a:focus-visible{outline:2px solid var(--esv-acento-texto);outline-offset:2px} /* ------------------------------------------------------------------ 2. BANDA 1 — Barra legal ------------------------------------------------------------------ */ /* El color va aquí y no solo en cada hijo: la banda tiene su propia tinta, y así un texto que no declare la suya hereda la de la barra y no la de .esv-footer, que es la de la banda de enlaces y puede estar invertida. */ .esv-footer__legal-bar{background-color:var(--esv-fondo-barra);color:var(--esv-barra-texto)} .esv-footer__legal-inner{ display:flex;align-items:stretch;justify-content:space-between;gap:28px; max-width:var(--esv-ancho-max);margin:0 auto;padding-left:28px;min-height:66px; } .esv-footer__legal-text{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:12px 0} .esv-footer__kicker{font-size:14px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--esv-barra-texto-suave)} .esv-footer__tagline{font-size:14.5px;font-weight:400;color:var(--esv-barra-texto)} .esv-footer__legal-side{display:flex;align-items:stretch} /* El