/* Kit Glassy de las landings: pie, banner de cookies y página legal.
   Es el mismo diseño que glassyfilms.com (tema-glassy: footer.php, inc/analytics.php y assets/css/main.css),
   para que las cuatro landings y la web de Glassy se vean de la misma familia.
   Lo propio de cada marca (fuente, colores, márgenes) va en static/glassy/tema.css de cada landing,
   con las variables --gl-*. Este archivo es común: se cambia en _comun/glassy/ y se copia con aplicar.mjs. */

/* Todo lo que cambia al pasar el ratón (colores, fondos y rayas de enlaces) usa esta transición, la misma al encender
   y al apagar y sin retraso: es la --hover de glassyfilms.com (Rubén, 07/10: todos los fundidos de hover iguales).
   Las landings la usan también en sus propios hovers. Con movimiento reducido vale 0s (abajo del todo). */
:root { --gl-hover: 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* Lo común a las tres piezas: la fuente de cada landing, suavizada como en glassyfilms.com. */
.gl-pie, .gl-cookies, .gl-legal-pagina {
	font-family: var(--gl-fuente);
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* ---------- Pie ----------
   El mismo pie en las cinco webs (Rubén, 08/10/2026), con el de glassyfilms.com como modelo (tema-glassy: footer.php y
   .site-footer de assets/css/main.css): mismo contenido y orden (ciudades y contacto; teléfono, correo y redes;
   copyright, enlaces legales y Cookies; logos de las otras casas), misma estructura y misma letra. Lo de cada web va en
   su tema.css: el fondo, el color del texto y el de los logos al pasar el ratón. Los datos comunes salen de pie.json y
   marcas.json del kit (build.mjs los pasa a glassy-pie.html).
   Letra: Modern Gothic, la de glassyfilms.com. Tasty, DotFive e IDEM ya la cargan con ese nombre (en CSS el nombre de
   una fuente no distingue mayúsculas: «modern gothic» vale), así que el pie usa su archivo y no pide nada más. KONTENT no
   la tiene: el pie usa «Glassy Modern Gothic», los mismos archivos del tema copiados en /glassy/fuentes/, que el
   navegador solo descarga si la página no tiene ya «Modern Gothic». */
@font-face { font-family: "Glassy Modern Gothic"; src: url("/glassy/fuentes/ModernGothic-Regular.woff2?v=6da9c910") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Glassy Modern Gothic"; src: url("/glassy/fuentes/ModernGothic-Bold.woff2?v=811d0d03") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
.gl-pie {
	display: block; position: relative; margin: 0; padding: 0; border: 0; /* sin lo que el tema de la landing ponga a <footer> */
	background: var(--gl-fondo, #070707);
	color: var(--gl-texto, #a8a8a8);
	font-family: "Modern Gothic", "Glassy Modern Gothic", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px; line-height: 1.6; font-weight: 400; letter-spacing: normal; text-transform: none; text-align: left;
}
/* Relleno: 48 px arriba y 32 abajo (Rubén, 08/10/2026: «el footer tiene mucho espacio por debajo»; antes 48 y 48).
   Con el banner de cookies abierto el relleno de abajo crece hasta su alto (más abajo) y vuelve con un fundido. */
.gl-pie__dentro {
	display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
	box-sizing: border-box; max-width: var(--gl-ancho, none); margin: 0 auto;
	padding: 48px var(--gl-margen, 24px) 32px;
	transition: padding-bottom 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Todo el pie con la letra de .gl-pie. Tasty y DotFive tienen «footer, footer * { font-size: 14px }» hasta 1399 px:
   bajaba el pie a 14 px y dejaba los enlaces a menos de 24 px entre sí (WCAG 2.5.8). */
.gl-pie__dentro, .gl-pie__info, .gl-pie span { font: inherit; }
.gl-pie p { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
.gl-pie__info p > * { margin-right: 18px; white-space: nowrap; } /* cada dato entero en su línea: «Legal & privacy» no se parte */
.gl-pie__info p > *:last-child { margin-right: 0; }
/* Enlaces sin subrayado en reposo; al pasar el ratón, una raya crece de izquierda a derecha (como en Glassy). */
.gl-pie a, .gl-pie a:visited {
	display: inline; color: inherit; text-decoration: none; text-transform: none; letter-spacing: inherit; font: inherit;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: right 0 bottom var(--gl-raya-y, 0.03em);
	background-size: 0% 1px;
	transition: background-size var(--gl-hover), color var(--gl-hover);
}
.gl-pie a:hover, .gl-pie a:focus-visible {
	color: var(--gl-texto-hover, #ffffff);
	background-position: left 0 bottom var(--gl-raya-y, 0.03em);
	background-size: 100% 1px;
}
.gl-pie a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
/* La llamada a contactar, en negrita como «Want to know more about us?» de glassyfilms.com. La negrita baja un poco más
   por debajo de la línea base: su raya va a 0,09 em para quedar a la misma distancia que la de los demás (--raya-y del tema). */
.gl-pie .gl-pie__cta { font-weight: 700; --gl-raya-y: 0.09em; }

/* Logos: todos apoyan en la misma línea base y sus mayúsculas miden lo mismo (alineación óptica de Glassy,
   medida sobre la tinta de cada SVG). Cada logo trae de marcas.json su "mayus" (alto de la mayúscula en fracción
   del alto del logo), su "base" (línea base en fracción del alto) y su "proporcion" (ancho / alto).
   En reposo, un tono apagado y grisáceo del color de cada marca (su color mezclado con --gl-logo-base, un gris
   del tono del fondo); al pasar el ratón, su color entero. Sin color-mix (navegadores de antes de 2023), gris (--gl-logo). */
.gl-pie__marcas {
	--gl-mayus: 22px;
	--gl-linea-base: 30px;
	display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 36px; margin: 0; padding: 0;
}
/* También :visited: si no, «.gl-pie a:visited» (color: inherit) dejaba en el color del texto el logo de una marca ya visitada. */
.gl-pie .gl-marca, .gl-pie .gl-marca:visited {
	display: block; background: none; color: var(--gl-logo, #474747);
	color: color-mix(in oklab, var(--color, #ffffff) var(--gl-logo-mezcla, 38%), var(--gl-logo-base, #1e1e1e));
	transition: color var(--gl-hover);
	margin-top: calc(var(--gl-linea-base) - var(--alto) * var(--base));
	--alto: calc(var(--gl-mayus) / var(--mayus));
}
.gl-pie .gl-marca:hover, .gl-pie .gl-marca:focus-visible { color: var(--color, #ffffff); }
/* Logos pintados con máscara (pie y cabecera de la página legal): el SVG da la forma y currentColor el color. */
.gl-marca__logo, .gl-legal-cabecera__imagen {
	display: block; aspect-ratio: var(--proporcion);
	background-color: currentColor;
	-webkit-mask: var(--logo) no-repeat center / contain;
	mask: var(--logo) no-repeat center / contain;
}
.gl-marca__logo { height: var(--alto); }
.gl-oculto {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

/* Móvil, como glassyfilms.com: en columna, con la misma letra (16 px y líneas de 25,6 px: los enlaces de dos líneas
   seguidas quedan a más de 24 px, WCAG 2.5.8) y el mismo relleno arriba y abajo. Los logos, un punto más pequeños que en el
   tema (14 px de mayúscula en vez de 15, y 13 en vez de 14 por debajo de 380 px): el pie de las landings lleva el de
   Glassy, el más ancho, y así los cuatro caben en una fila a 390 px, como en glassyfilms.com. */
@media (max-width: 699px) {
	.gl-pie__dentro { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
	.gl-pie__info, .gl-pie__marcas { max-width: 100%; }
	/* Un copyright más largo que la pantalla se parte en vez de desbordar (WCAG 1.4.10; Tasty a 320 px). Los 18 px de
	   separación van en un espacio, que al final de la línea no cuenta: así solo se parte si el texto no cabe. */
	.gl-pie__info p > span { white-space: normal; margin-right: 0; }
	.gl-pie__info p > span::after { content: " "; word-spacing: 18px; }
	.gl-pie__marcas { gap: 14px 18px; --gl-mayus: 14px; --gl-linea-base: 20px; }
}
@media (max-width: 379px) {
	.gl-pie__marcas { gap: 12px 16px; --gl-mayus: 13px; --gl-linea-base: 19px; }
}

/* ---------- Información básica de privacidad bajo los formularios ----------
   Responsable, finalidad, legitimación, destinatarios y derechos en una frase, con enlace a la página legal
   (primera capa de la AEPD). El color lo pone cada landing con --gl-form-texto. */
.gl-form-legal { margin: 16px 0 0; max-width: 46em; font-size: 12px; line-height: 1.5; text-align: left; text-transform: none; letter-spacing: normal; color: var(--gl-form-texto, inherit); }
.gl-form-legal a, .gl-form-legal a:visited { display: inline; font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* sin el tamaño que los temas dan a los enlaces del formulario */

/* ---------- Banner de cookies ----------
   Como el de glassyfilms.com: pequeño, abajo a la izquierda, sin capa oscura y sin tapar la página.
   Aceptar (relleno) y Rechazar (borde) del mismo tamaño y en el mismo sitio, como pide la AEPD.
   «section.gl-cookies» y no solo la clase: así gana a reglas de las landings como «section:first-of-type» de IDEM,
   que le cambiaban el relleno y el borde y lo hacían 37 px más alto. */
section.gl-cookies {
	position: fixed; left: 24px; bottom: 24px; z-index: 2147483000;
	box-sizing: border-box; width: min(360px, calc(100vw - 48px)); margin: 0;
	padding: 18px; background: #121212; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px;
	color: #ffffff; font-weight: 400; letter-spacing: normal; text-transform: none; text-align: left;
	opacity: 0; transform: translateY(12px);
	/* La aparición no es un hover: va a su ritmo, como el banner de glassyfilms.com. */
	transition: opacity 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gl-cookies[hidden] { display: none; }
.gl-cookies.is-visible { opacity: 1; transform: none; }
.gl-cookies__texto { display: flex; gap: 12px; align-items: flex-start; }
.gl-cookies__icono { flex: none; margin-top: 1px; color: #ffffff; }
.gl-cookies p { margin: 0; padding: 0; font: inherit; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.72); letter-spacing: normal; text-transform: none; }
.gl-cookies .gl-cookies__mas, .gl-cookies .gl-cookies__mas:visited {
	color: #ffffff; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font: inherit;
}
.gl-cookies__botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.gl-cookies .gl-btn {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 40px; margin: 0;
	padding: 0 16px; border: 1px solid #ffffff; border-radius: 50px; background: transparent; color: #ffffff;
	font: inherit; font-size: 13px; line-height: 1; letter-spacing: normal; text-transform: none; cursor: pointer;
	box-shadow: none; transition: background-color var(--gl-hover), color var(--gl-hover);
}
.gl-cookies .gl-btn--solid { background: #ffffff; color: #070707; }
/* Al pasar el ratón, y al llegar con el teclado, se invierten: el de borde se rellena y el relleno se queda en borde. */
@media (hover: hover) {
	.gl-cookies .gl-btn:hover { background: #ffffff; color: #070707; }
	.gl-cookies .gl-btn--solid:hover { background: transparent; color: #ffffff; }
}
.gl-cookies .gl-btn:focus-visible { background: #ffffff; color: #070707; }
.gl-cookies .gl-btn--solid:focus-visible { background: transparent; color: #ffffff; }
.gl-cookies .gl-btn:focus-visible, .gl-cookies .gl-cookies__mas:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
/* Mientras el banner está abierto no puede tapar entero lo que tiene el foco (WCAG 2.4.11): al tabular, la página deja
   libre abajo el alto del banner (scroll-padding) y el pie crece por debajo, en su color, para que lo último de la página
   pueda quedar por encima del banner. --gl-cookies-hueco: el alto del banner más su margen inferior, con el texto más
   largo de las cuatro landings (KONTENT e IDEM: 216 px a 360 de ancho y 256 px a 320). Si glassy.js lo mide, lo pisa.
   Solo mientras se ve el banner (.is-visible) y sin sumarse al relleno del pie (08/10/2026): el relleno de abajo pasa a ser
   el hueco más 24 px de aire (16 en el móvil), lo justo para que la última línea del pie quede encima del banner. Antes el
   hueco iba en .gl-pie y se sumaba al relleno de .gl-pie__dentro (de 44 a 72 px según la landing): con el banner abierto
   quedaban de 237 a 310 px vacíos bajo el pie. Crece y vuelve con el fundido del banner (0,4 s), no de golpe. */
html:has(.gl-cookies:not([hidden])) { scroll-padding-bottom: var(--gl-cookies-hueco, 240px); }
html:has(.gl-cookies.is-visible) .gl-pie__dentro { padding-bottom: calc(var(--gl-cookies-hueco, 240px) + var(--gl-cookies-aire, 24px)); }
@media (max-width: 699px) {
	:root { --gl-cookies-hueco: 272px; --gl-cookies-aire: 16px; }
	section.gl-cookies { left: 16px; right: 16px; bottom: 16px; width: auto; }
}

/* ---------- Página legal ----------
   Una sola página por landing con el aviso legal, la privacidad y las cookies. Colores de cada marca en tema.css. */
.gl-legal-pagina {
	margin: 0; background: var(--gl-legal-fondo, #070707); color: var(--gl-legal-texto, rgba(255, 255, 255, 0.82));
	font-size: 16px; line-height: 1.65;
}
.gl-legal-cabecera {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	box-sizing: border-box; max-width: var(--gl-ancho, none); margin: 0 auto; padding: 28px var(--gl-margen, 24px);
}
.gl-legal-cabecera__logo { display: block; color: var(--gl-legal-titulo, #ffffff); }
.gl-legal-cabecera__imagen { height: var(--gl-legal-logo, 26px); }
/* «Volver»: al pasar el ratón se aclara y sale el subrayado, los dos a la vez (el subrayado está siempre, transparente en reposo). */
.gl-legal-cabecera__volver {
	color: inherit; font-size: 14px;
	text-decoration: underline transparent; text-underline-offset: 3px;
	transition: color var(--gl-hover), text-decoration-color var(--gl-hover);
}
.gl-legal-cabecera__volver:hover, .gl-legal-cabecera__volver:focus-visible { color: var(--gl-legal-titulo, #ffffff); text-decoration-color: currentColor; }
.gl-legal {
	box-sizing: content-box; max-width: 760px; margin: 0 auto; padding: 64px var(--gl-margen, 24px) 120px;
}
.gl-legal h1, .gl-legal h2 {
	color: var(--gl-legal-titulo, #ffffff); font-family: var(--gl-fuente-titulo, var(--gl-fuente));
	font-weight: var(--gl-peso-titulo, 400); letter-spacing: var(--gl-espaciado-titulo, -0.01em); text-transform: var(--gl-mayusculas-titulo, none);
}
.gl-legal h1 { margin: 0 0 16px; font-size: clamp(34px, 5vw, 60px); line-height: 1.05; }
.gl-legal h2 {
	margin: 72px 0 20px; padding-top: 28px; border-top: 1px solid var(--gl-legal-linea, rgba(255, 255, 255, 0.2));
	font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; scroll-margin-top: 24px;
}
.gl-legal h3 { margin: 36px 0 10px; color: var(--gl-legal-titulo, #ffffff); font-size: 19px; line-height: 1.3; font-weight: 700; }
.gl-legal p, .gl-legal ul { margin: 0 0 16px; }
.gl-legal ul { padding-left: 20px; }
.gl-legal li { margin-bottom: 8px; }
.gl-legal strong { color: var(--gl-legal-titulo, #ffffff); font-weight: 700; }
.gl-legal a { color: var(--gl-legal-titulo, #ffffff); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.gl-legal a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.gl-legal__fecha { color: var(--gl-legal-suave, rgba(255, 255, 255, 0.6)); font-size: 15px; }
.gl-legal__intro { font-size: 18px; }
.gl-legal .gl-legal__indice { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 32px 0 0; padding: 0; list-style: none; }
.gl-legal__indice li { margin: 0; }
.gl-legal__tabla { overflow-x: auto; margin: 0 0 24px; }
.gl-legal__tabla:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } /* en móvil se desplaza con las flechas (WCAG 2.1.1) */
.gl-legal table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.gl-legal th, .gl-legal td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--gl-legal-linea, rgba(255, 255, 255, 0.2)); }
.gl-legal th { color: var(--gl-legal-suave, rgba(255, 255, 255, 0.6)); font-weight: 400; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.gl-legal__boton {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 24px; margin-top: 8px;
	border: 1px solid currentColor; border-radius: 50px; background: transparent; color: var(--gl-legal-titulo, #ffffff);
	font: inherit; font-size: 14px; cursor: pointer;
}
@media (max-width: 699px) {
	.gl-legal { padding-top: 40px; padding-bottom: 80px; }
	.gl-legal h2 { margin-top: 56px; }
}

/* ---------- Movimiento reducido ----------
   Los hovers cambian al instante (también los de cada landing que usan --gl-hover) y el banner aparece sin fundido. */
@media (prefers-reduced-motion: reduce) {
	:root { --gl-hover: 0s; }
	section.gl-cookies, .gl-pie__dentro { transition: none; }
}