/* DotFive en el kit Glassy (pie, banner de cookies y página legal): su fuente, sus colores y sus márgenes.
   Y, abajo, el ritmo de los hovers del tema de DotFive (07/10).
   Lo común está en glassy.css (se copia de _comun/glassy con aplicar.mjs); esto es solo de DotFive. */
:root {
	/* Pie (fase C, 04/10): fondo y texto, los del body de la landing; logos en un tono apagado de su color. */
	--gl-fondo: #000000;
	--gl-texto: #ffffff;
	--gl-texto-hover: #ffffff;
	--gl-logo: #555555;
	--gl-logo-base: #1e1e1e;
	--gl-logo-mezcla: 38%;
	--gl-form-texto: rgba(255, 255, 255, 0.7);
	--gl-fuente: "modern gothic", "Helvetica Neue", Arial, sans-serif;
	--gl-fuente-titulo: "financier", Georgia, serif;   /* los titulares de DotFive */
	--gl-peso-titulo: 400;
	--gl-espaciado-titulo: 0;
	--gl-margen: 60px;                   /* el margen de la cabecera y las secciones de DotFive (--paddings) */
	--gl-legal-fondo: #000000;
	--gl-legal-texto: rgba(255, 255, 255, 0.78);
	--gl-legal-titulo: #ffffff;
	--gl-legal-suave: rgba(255, 255, 255, 0.6);
	--gl-legal-linea: rgba(255, 255, 255, 0.2);
	--gl-legal-logo: 26px;
}
@media (max-width: 767px) { :root { --gl-margen: 24px; } }

/* ---------- Hovers del tema de DotFive (07/10) ----------
   Rubén, 07/10: todos los fundidos de hover iguales. Lo que cambia al pasar el ratón va con --gl-hover (glassy.css:
   0,5 s, la curva de glassyfilms.com, igual al entrar y al salir, sin retraso; 0 s con movimiento reducido), propiedad
   por propiedad. El CSS del tema (wp-content/litespeed/css/3173c976...css, minificado) no se toca: aquí se pisa su
   «transition: all 0.2s ease-in-out» (este archivo se carga el último). Lo que no es hover (la cabecera al bajar,
   el menú que se abre, las apariciones al hacer scroll) sigue a su ritmo. */

/* Rayas de «Contact us», «Let's talk!», «How can we help you?» y «glassyfilms.com»: se recogen al pasar el ratón.
   El color de la raya cambia al bajar (cabecera blanca): desde el 08/10/2026, también con el ritmo común, como el resto
   de la cabecera (estatico/dotfive.css, «Suavidad»). */
.sline::before { transition: width var(--gl-hover), border-color var(--gl-hover); }
.slinehover:focus-visible::before { width: 0; }

/* Flechas del carrusel de trabajos: aparecen al pasar por la sección. Antes tardaban 0,5 s en empezar a irse
   (transition-delay); ahora entran y salen igual. Hasta 1000 px se ven siempre (estil-responsive.css). */
.ccontrol { transition: opacity var(--gl-hover); }

/* Botón Send: fondo y texto a la vez. Con el teclado, el mismo cambio (el tema quita el contorno de foco a los input). */
.cta { transition: background-color var(--gl-hover), color var(--gl-hover); }
.cta:focus-visible { background-color: var(--gray); color: #fff; }

/* Opciones de los desplegables City y Type: el gris claro de fondo. */
.jqdropdownvalue { transition: background-color var(--gl-hover); }

/* Menú a pantalla completa (hasta 1000 px): el color de cada opción (enlaces desde la tanda del 07/10; el color del
   hover, en estatico/dotfive.css). */
.csupermenuinner1 a { transition: color var(--gl-hover); }

/* Correos del texto de contacto: el subrayado se quitaba de golpe; ahora se funde (la raya se queda, transparente),
   como «Back to the home page» de la página legal. */
.ctextform a { transition: text-decoration-color var(--gl-hover); }
.ctextform a:hover, .ctextform a:focus-visible { text-decoration-line: underline; text-decoration-color: transparent; }

/* ==========================================================================================================
   Diseño propio de DotFive: banner de cookies y pie (Rubén, 08/10/2026). Cada landing tiene su identidad gráfica,
   también en el pie y en el banner: ya no se copia el estilo de glassyfilms.com. El kit (glassy.css y las plantillas
   glassy-*) no se toca: aquí se pisan sus estilos, con el mismo selector o uno más fuerte (este archivo va el último).
   Colores de DotFive (estatico/dotfive.css): fondo #000, texto #fff, gris --gray #3A3D40 (rayas, cinta y hovers).
   Todo lo que cambia lo hace con var(--gl-hover) (0,5 s; 0 s con movimiento reducido), al entrar y al salir.
   ========================================================================================================== */

/* ---------- Banner de cookies ----------
   Abajo a la DERECHA (a la izquierda tapaba el texto de la portada). Caja negra, como la página, con la raya gris de
   DotFive y esquinas rectas, como sus bloques y sus campos. Texto en blanco. Botones como «Send» y «Skip to content»:
   píldora, mayúsculas y la letra pequeña de la web; «Accept» relleno en blanco y «Reject» con borde blanco, del mismo
   tamaño y en la misma fila (AEPD). Al pasar el ratón o con el teclado, los dos pasan al gris de los hovers de DotFive
   (el de «Send»: fondo #3A3D40 y texto blanco). La aparición (fundido y subida de 12 px, 0,4 s) es la del kit. */
section.gl-cookies {
	left: auto; right: 24px; bottom: 24px; width: min(380px, calc(100vw - 48px));
	padding: 20px 20px 20px 18px; background: #000000; border: 1px solid var(--gray, #3A3D40); border-radius: 0;
	font-family: var(--gl-fuente); font-weight: 300;
}
.gl-cookies p { color: #ffffff; font-size: 14px; line-height: 1.45; }
.gl-cookies .gl-cookies__mas, .gl-cookies .gl-cookies__mas:visited {
	color: #ffffff; text-decoration-color: currentColor; transition: text-decoration-color var(--gl-hover);
}
.gl-cookies .gl-cookies__mas:hover, .gl-cookies .gl-cookies__mas:focus-visible { text-decoration-color: transparent; }
.gl-cookies__botones { gap: 10px; margin-top: 18px; }
.gl-cookies .gl-btn {
	min-height: 44px; padding: 0 16px; border: 1px solid #ffffff; border-radius: 30px; background: transparent; color: #ffffff;
	font-size: 14px; font-weight: 300; line-height: 1; text-transform: uppercase; letter-spacing: normal;
	transition: background-color var(--gl-hover), color var(--gl-hover), border-color var(--gl-hover);
}
.gl-cookies .gl-btn--solid { background: #ffffff; color: #000000; }
@media (hover: hover) {
	.gl-cookies .gl-btn:hover, .gl-cookies .gl-btn--solid:hover { background: var(--gray, #3A3D40); border-color: var(--gray, #3A3D40); color: #ffffff; }
}
.gl-cookies .gl-btn:focus-visible, .gl-cookies .gl-btn--solid:focus-visible { background: var(--gray, #3A3D40); border-color: var(--gray, #3A3D40); color: #ffffff; }
@media (max-width: 699px) {
	section.gl-cookies { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 16px; }
	.gl-cookies p { font-size: 13px; line-height: 1.4; }
	.gl-cookies__botones { margin-top: 14px; }
}
/* Móviles bajos (iPhone SE y parecidos): sin el icono (el texto ocupa todo el ancho y cabe en una línea menos) y con
   los botones algo más bajos, para que el título de la portada quepa entero encima del banner. */
@media (max-width: 699px) and (max-height: 720px) {
	section.gl-cookies { padding: 14px 16px; }
	.gl-cookies__icono { display: none; }
	.gl-cookies__botones { margin-top: 12px; }
	.gl-cookies .gl-btn { min-height: 40px; }
}
@media (max-width: 699px) and (max-height: 660px) {
	section.gl-cookies { padding: 12px 16px; }
	.gl-cookies__botones { margin-top: 10px; }
	.gl-cookies .gl-btn { min-height: 38px; }
}
/* Pantallas muy bajas (móvil en horizontal): una barra a todo el ancho, con el texto a la izquierda y los botones a la
   derecha, en la mitad de alto. */
@media (min-width: 600px) and (max-height: 500px) {
	section.gl-cookies { left: 16px; right: 16px; bottom: 16px; width: auto; display: flex; align-items: center; gap: 20px; padding: 14px 16px; }
	.gl-cookies__texto { flex: 1; }
	.gl-cookies__icono { display: none; }
	.gl-cookies p { font-size: 13px; line-height: 1.4; }
	.gl-cookies__botones { flex: none; width: 280px; margin-top: 0; }
	.gl-cookies .gl-btn { min-height: 40px; }
}

/* Que el banner no tape nada importante mientras está abierto, de 360 a 1920 px. Abajo a la derecha están el botón de
   pausa (b04) y, hasta unos 1.300 px, el final del texto de la portada. Mientras se ve el banner (.is-visible, la clase
   con la que glassy.js lo muestra y lo oculta), el botón de pausa sube encima de él, alineado a su derecha, y el texto
   de la portada sube lo mismo donde se cruzaría con él. Suben con translate (no cuenta como desplazamiento de diseño,
   CLS) y vuelven a su sitio con el mismo fundido cuando se responde al banner. --gl-cookies-hueco lo mide glassy.js
   (alto del banner más su margen de abajo). */
button.cpausa { transition: translate var(--gl-hover), background-color var(--gl-hover), border-color var(--gl-hover); }
.ctoptasty .csectiontext { transition: translate var(--gl-hover); }
html:has(.gl-cookies.is-visible) button.cpausa { translate: 0 calc(-1 * var(--gl-cookies-hueco, 240px)); }
/* Texto: hasta 1.000 px ya deja libre abajo el sitio del botón de pausa, así que sube lo mismo que él (el hueco). De
   1.001 a 1.299 px el botón no lo pisa pero el banner sí: sube hasta quedar 24 px por encima del banner (su relleno de
   abajo es de 60 px). De 1.300 px en adelante el banner cabe a la derecha del texto y no se mueve nada.
   En pantallas bajas no cabe todo: el texto nunca sube más de lo que deja libre bajo la cabecera (--df-subida-max, que
   mide estatico/dotfive.js), para que el título se lea siempre entero. */
@media (max-width: 1000px) {
	html:has(.gl-cookies.is-visible) .ctoptasty .csectiontext { translate: 0 calc(-1 * min(var(--gl-cookies-hueco, 240px), var(--df-subida-max, 9999px))); }
}
@media (min-width: 1001px) and (max-width: 1299px) {
	html:has(.gl-cookies.is-visible) .ctoptasty .csectiontext { translate: 0 calc(-1 * min(var(--gl-cookies-hueco, 240px) - 36px, var(--df-subida-max, 9999px))); }
}

/* ---------- Pie ----------
   Mismos datos y orden que el pie común, con la identidad de DotFive: negro, raya gris arriba (la de sus bloques) y,
   a partir de 700 px, repartido de izquierda a derecha a todo el ancho, en columnas, como el pie original de las
   landings: ciudades y «Contact us»; teléfono, correo y redes; copyright y enlaces legales; logos de las otras casas.
   «Contact us» va con la letra de los titulares (Financier, como «Let's talk!» y «How can we help you?») y su raya
   de DotFive, que se recoge al pasar el ratón. Los demás enlaces: la raya del kit, que crece de izquierda a derecha.
   Logos: en reposo, un tono apagado de su color, mezclado con el gris de DotFive; al pasar el ratón o con el teclado,
   su color entero, con el fundido común. */
:root { --gl-logo-base: #2a2c2e; --gl-logo-mezcla: 42%; }
.gl-pie { border-top: 1px solid var(--gray, #3A3D40); font-weight: 300; }
/* Relleno de abajo: 40 px (Rubén, 08/10/2026: «mucho espacio por debajo»; antes 72, más que los 64 de arriba). */
.gl-pie__dentro { padding: 64px var(--gl-margen, 24px) 40px; gap: 40px 48px; align-items: flex-start; }
.gl-pie .gl-pie__cta {
	display: inline-block; margin-top: 10px; font-family: var(--gl-fuente-titulo); font-weight: 400; font-size: 40px; line-height: 1.1;
	background-size: 100% 1px; background-position: left 0 bottom 0; padding-bottom: 6px; white-space: nowrap;
}
.gl-pie .gl-pie__cta:hover, .gl-pie .gl-pie__cta:focus-visible { background-size: 0% 1px; background-position: left 0 bottom 0; }
.gl-pie .gl-marca:hover, .gl-pie .gl-marca:focus-visible { background-size: 0 0; }
@media (max-width: 1399px) { .gl-pie .gl-pie__cta { font-size: 30px; } }
@media (max-width: 999px) { .gl-pie .gl-pie__cta { font-size: 28px; } }

/* De 700 px en adelante: columnas de izquierda a derecha. Cada párrafo del pie es una columna (un dato por línea) y los
   logos, la última (de 1.200 px en adelante, en dos filas de dos) o una fila a todo el ancho debajo (de 700 a 1.199). */
@media (min-width: 700px) {
	.gl-pie__dentro { display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between; align-items: start; }
	.gl-pie__info { display: contents; }
	.gl-pie__info p { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
	.gl-pie__info p > * { margin-right: 0; }
	.gl-pie__marcas { grid-column: 1 / -1; justify-content: space-between; padding-top: 32px; border-top: 1px solid var(--gray, #3A3D40); }
}
@media (min-width: 1200px) {
	.gl-pie__dentro { grid-template-columns: repeat(4, max-content); }
	.gl-pie__marcas { grid-column: auto; display: grid; grid-template-columns: repeat(2, max-content); justify-content: end; justify-items: start; gap: 22px 40px; padding-top: 4px; border-top: 0; }
}
/* Móvil: en columna, como el kit, con «Contact us» grande arriba y los logos repartidos a todo el ancho. */
@media (max-width: 699px) {
	.gl-pie__dentro { padding-top: 48px; padding-bottom: 32px; gap: 32px; }   /* abajo, 32 px (antes 56) */
	.gl-pie__info p + p { margin-top: 12px; }
	.gl-pie__info p:first-child > span { display: block; }
	.gl-pie__marcas { align-self: stretch; justify-content: space-between; }
}