/* KONTENT en el kit Glassy (pie, banner de cookies y página legal): su fuente, sus colores y sus márgenes.
   Lo común está en glassy.css (se copia de _comun/glassy con aplicar.mjs); esto es solo de KONTENT. */
:root {
	/* Pie (fase C, 04/10): fondo y texto, los del body de la landing; logos en un tono apagado de su color.
	   Diseño propio (08/10/2026): texto gris claro de KONTENT y, al pasar el ratón, lima. */
	--gl-fondo: #070707;
	--gl-texto: #b4b4b4;
	--gl-texto-hover: #cbff08;
	--gl-logo: #555555;
	--gl-logo-base: #1e1e1e;
	--gl-logo-mezcla: 38%;
	--gl-form-texto: #8a8a8a;
	--gl-fuente: "Inter", "Helvetica Neue", Arial, sans-serif;   /* la de texto de kontent.css (sin Monument Grotesk desde el 07/10/2026) */
	--gl-fuente-titulo: "Ruder Plakat", "Arial Narrow", sans-serif;   /* los titulares de KONTENT, en mayúsculas */
	--gl-peso-titulo: 400;
	--gl-espaciado-titulo: 0.04em;
	--gl-mayusculas-titulo: uppercase;
	--gl-ancho: none;                    /* a todo el ancho (08/10/2026; antes 1280 px, el .container de KONTENT) */
	--gl-margen: clamp(20px, 5vw, 64px); /* --gutter de KONTENT */
	--gl-legal-fondo: #070707;
	--gl-legal-texto: rgba(255, 255, 255, 0.78);
	--gl-legal-titulo: #ffffff;
	--gl-legal-suave: #8a8a8a;
	--gl-legal-linea: #2a2a2a;
	--gl-legal-logo: 24px;
}
.gl-legal-pagina .gl-legal h1 { color: #cbff08; }   /* el lima de KONTENT */

/* ==========================================================================
   Diseño propio de KONTENT (Rubén, 08/10/2026: «cada landing tiene su propia identidad gráfica, y eso incluye su pie y
   su banner de cookies»). Aquí se pisa el aspecto común de glassy.css; el contenido, el orden, el funcionamiento y la
   accesibilidad del kit no cambian. Los selectores llevan «:root» delante para ganar a glassy.css, que en la portada se
   carga después (sin bloquear) y en la página legal antes. Colores y letras de kontent.css, escritos aquí con su valor
   porque la página legal no carga kontent.css: lima #CBFF08, negro #070707, grises #B4B4B4 / #858585 / #2A2A2A.
   ========================================================================== */
/* Las dos letras de KONTENT que usan el pie y el banner y que la página legal no tenía (mismos archivos que kontent.css:
   en la portada no se descargan dos veces). Ruder Plakat e Inter ya están en fuentes.css. */
@font-face { font-family: "Monument Grotesk Mono"; src: url("/assets/fonts/MonumentGrotesk-Mono.woff2?v=06a92e1c") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/google/archivo-v25-latin.woff2?v=7150c0ec") format("woff2"); font-weight: 400 700; font-stretch: 100%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Pie ----------
   A todo el ancho, como Tasty (antes, centrado en la columna de 1.280 px: a 1440 los logos caían debajo de los datos),
   con el margen lateral de KONTENT (--gl-margen, el --gutter: 64 px en escritorio, 20 en el móvil): datos a la
   izquierda y logos a la derecha mientras caben (desde unos 1.400 px); si no, debajo, y en columna por debajo de 700 px.
   Identidad: raya fina arriba, Inter en vez de Modern Gothic (no se descargan sus 70 KB), las ciudades como los
   antetítulos de KONTENT (mono, mayúsculas espaciadas, lima, con «//» gris), «Empieza aquí» en Ruder Plakat, el copyright
   en mono gris y los enlaces en gris claro que pasan a lima con su raya (var(--gl-hover) del kit). Misma letra de 16 px
   e interlineado 1,6 en los enlaces (los objetivos táctiles del kit no cambian). */
:root .gl-pie { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; border-top: 1px solid #2a2a2a; }
:root .gl-pie__info p:first-child > span:first-child,
:root .gl-pie__info p:last-child > span:first-child {
	font-family: "Monument Grotesk Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
:root .gl-pie__info p:first-child > span:first-child { color: #cbff08; }
:root .gl-pie__info p:first-child > span:first-child::before { content: "//\00a0\00a0"; content: "//\00a0\00a0" / ""; color: #858585; }
:root .gl-pie__info p:last-child > span:first-child { color: #858585; }
:root .gl-pie .gl-pie__cta {
	font-family: "Ruder Plakat", "Arial Narrow", sans-serif; font-weight: 400; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase;
	color: #ffffff; --gl-raya-y: 0.04em;
}
:root .gl-pie .gl-pie__cta:hover, :root .gl-pie .gl-pie__cta:focus-visible { color: #cbff08; }

/* ---------- Banner de cookies ----------
   Abajo a la derecha (antes a la izquierda, donde tapaba el subtítulo de la portada); por debajo de 700 px, todo el
   ancho abajo, como en el kit. Fondo negro con un punto de lima, marco lima de 1 px y un halo lima muy suave. Esquinas
   de 8 px, las de las tarjetas de KONTENT. Botones como los de la web (Archivo, mayúsculas, esquinas de 4 px):
   «Aceptar» como el principal (lima; al pasar el ratón, el negro entra barriendo y el texto pasa a lima) y «Rechazar»
   como el secundario (borde; al pasar el ratón, borde y texto en lima), los dos del mismo tamaño, como pide la AEPD.
   Todo con var(--gl-hover), al entrar y al salir, y lo mismo con el teclado. La entrada y la salida del banner son las
   del kit (fundido y 12 px, 0,4 s). Mientras está abierto, el botón de pausa de la portada sube por encima de él
   (kontent.css) y la barra «Empieza aquí» del móvil baja (como antes). */
:root section.gl-cookies {
	left: auto; right: 24px; bottom: 24px; width: min(372px, calc(100vw - 48px)); padding: 20px;
	background: #151a0b; border: 1px solid #cbff08; border-radius: 8px;
	box-shadow: 0 0 28px rgba(203, 255, 8, 0.12), 0 20px 48px rgba(0, 0, 0, 0.55);
	font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}
:root .gl-cookies__icono { color: #cbff08; }
:root .gl-cookies p { color: rgba(255, 255, 255, 0.8); }
:root .gl-cookies .gl-cookies__mas, :root .gl-cookies .gl-cookies__mas:visited {
	color: #ffffff; text-decoration-color: #cbff08; transition: color var(--gl-hover);
}
:root .gl-cookies .gl-cookies__mas:hover, :root .gl-cookies .gl-cookies__mas:focus-visible { color: #cbff08; }
:root .gl-cookies__botones { gap: 10px; margin-top: 18px; }
:root .gl-cookies .gl-btn {
	position: relative; overflow: hidden; isolation: isolate; min-height: 44px; padding: 0 12px;
	border: 1.5px solid #858585; border-radius: 4px; background: transparent; color: #ffffff;
	font-family: "Archivo", "Inter", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
	transition: background-color var(--gl-hover), color var(--gl-hover), border-color var(--gl-hover), box-shadow var(--gl-hover);
}
:root .gl-cookies .gl-btn--solid { background: #cbff08; border-color: #cbff08; color: #0a0a00; }
:root .gl-cookies .gl-btn--solid::before {
	content: ""; position: absolute; inset: 0; z-index: -1; background: #070707;
	transform: scaleX(0); transform-origin: right center; transition: transform var(--gl-hover); pointer-events: none;
}
:root .gl-cookies .gl-btn:focus-visible { background: transparent; color: #cbff08; border-color: #cbff08; box-shadow: 0 0 22px rgba(203, 255, 8, 0.22); outline: 2px solid #cbff08; outline-offset: 3px; }
:root .gl-cookies .gl-btn--solid:focus-visible { background: #cbff08; }
:root .gl-cookies .gl-btn--solid:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
:root .gl-cookies .gl-cookies__mas:focus-visible { outline: 2px solid #cbff08; outline-offset: 3px; }
@media (hover: hover) {
	:root .gl-cookies .gl-btn:hover { background: transparent; color: #cbff08; border-color: #cbff08; box-shadow: 0 0 22px rgba(203, 255, 8, 0.22); }
	:root .gl-cookies .gl-btn--solid:hover { background: #cbff08; }
	:root .gl-cookies .gl-btn--solid:hover::before { transform: scaleX(1); transform-origin: left center; }
}
/* De 700 a 1.199 px, 336 px de ancho: a 1024 × 768 el subtítulo de la portada llega hasta x = 661 (EN) y el banner
   empieza en x = 664 (con 372 px lo tapaba). */
@media (max-width: 1199px) { :root section.gl-cookies { width: min(336px, calc(100vw - 48px)); } }
/* Móvil: todo el ancho abajo, como en el kit, y más bajo (sin el icono, que es decoración, texto de 13 px y menos
   relleno) para tapar lo menos posible de la portada: unos 175 px a 390 de ancho, en vez de 214. */
@media (max-width: 699px) {
	:root section.gl-cookies { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 14px 16px; }
	:root .gl-cookies__icono { display: none; }
	:root .gl-cookies p { font-size: 13px; line-height: 1.42; }
	:root .gl-cookies__botones { margin-top: 12px; }
}