/* Tasty Studio en el kit Glassy (pie, banner de cookies y página legal): su fuente, sus colores y sus márgenes.
   El pie va en blanco, como la página; sobre blanco, Glassy y DotFive se colorean en negro (color_claro de
   _comun/glassy/marcas.json). La página legal va en blanco y rojo, como la landing.
   Lo común está en glassy.css (se copia de _comun/glassy con aplicar.mjs); esto es solo de Tasty. */
: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: #ffffff;
	--gl-texto: #000000;
	--gl-texto-hover: #e90631;   /* Rubén, 08/10: los enlaces del pie pasan al rojo de la web al pasar el ratón y con el teclado (:focus-visible), con su raya; el cambio de color ya va con --gl-hover (glassy.css). #e90631 y no el #f20633 de --color1: es el rojo con texto, 4,63:1 sobre blanco */
	--gl-logo: #b4b4b4;
	--gl-logo-base: #d6d6d6;
	--gl-logo-mezcla: 38%;
	--gl-form-texto: #555555;
	--gl-fuente: "modern gothic", "Helvetica Neue", Arial, sans-serif;
	--gl-fuente-titulo: "goodman", Georgia, serif;   /* el titular de Tasty («Tasty Studio, Turning products into desire.») */
	--gl-peso-titulo: 400;
	--gl-espaciado-titulo: 0;
	--gl-margen: 60px;
	--gl-legal-fondo: #ffffff;
	--gl-legal-texto: #2b2b2b;
	--gl-legal-titulo: #000000;
	--gl-legal-suave: #6b6b6b;
	--gl-legal-linea: rgba(0, 0, 0, 0.15);
	--gl-legal-logo: 34px;
}
@media (max-width: 767px) { :root { --gl-margen: 24px; } }
.gl-legal-pagina .gl-legal-cabecera__logo { color: #f20633; }   /* el logo de Tasty, en su rojo */
.gl-legal-pagina .gl-legal h1 { color: #e90631; }   /* TA03 (08/10/2026): el rojo con texto, el de 4,63:1 (abajo) */

/* ---------- Hovers del tema de Tasty, con el ritmo común (07/10) ----------
   Rubén, 07/10: todos los fundidos de hover iguales. Lo que cambia al pasar el ratón va con --gl-hover (0,5 s y la curva
   de glassyfilms.com, igual al encender y al apagar, sin retraso; la define glassy.css y con movimiento reducido vale 0 s),
   propiedad por propiedad. Antes, cada cosa con su «transition: all» del tema: 0,2 s ease-in-out las rayas, el botón,
   el desplegable y el menú, y 0,8 s el zoom de los vídeos del grid.
   Las reglas del tema siguen en su CSS (wp-content/litespeed/css/e9a5e900...): aquí solo se pisa la transición, con el
   mismo selector, porque este archivo se carga después. Lo que no es hover (el menú que se abre, las apariciones al hacer
   scroll, el carrusel, la cinta de frases) se queda como estaba. */
.slinehover::before { transition: width var(--gl-hover); }               /* raya bajo «Let's talk!» y «glassyfilms.com»: se recoge */
.slinehover:focus-visible::before { width: 0; }                          /* y con el teclado, igual */
.citemoverlayinvertido video { transition: transform var(--gl-hover); }  /* zoom del vídeo de cada proyecto del grid */
.cta { transition: background-color var(--gl-hover); }                   /* botón rojo «Send»: pasa a negro */
.cta:focus-visible { background: #000; }
.jqdropdownvalue { transition: background-color var(--gl-hover); }       /* opciones del desplegable «Select client type» */
.csupermenuinner1 .jqgoto { transition: color var(--gl-hover); }         /* opciones del menú a pantalla completa: de blanco a negro */
/* Correo de contacto: subrayado en reposo que se quita al pasar el ratón. El tema lo quitaba de golpe (text-decoration: none
   no se anima); aquí el subrayado se queda y se vuelve transparente, con el mismo fundido. En reposo no cambia nada. */
.ctextform a { transition: text-decoration-color var(--gl-hover); }
.ctextform a:hover, .ctextform a:focus-visible { text-decoration: underline transparent; }

/* ---------- Tanda de arreglos (07/10/2026) ----------
   Hallazgos de la auditoría del 07/10 (01 DOCS/INFORMES/auditoria-web-2026-10-07.json). Explicación en FASE_B_INFORME.md,
   apartado «Tanda de arreglos». Con el ratón y sin el teclado, la página se ve igual salvo el subrayado del enlace
   «privacy policy» y el ancho de la rejilla de logos por debajo de 1048 px (que ya no se sale de la pantalla). */

/* TA04: la rejilla de logos (b07) sumaba 48 px de relleno a su 100 % de ancho y la página se salía por la derecha por
   debajo de 1048 px («CONTACT» cortado, los botones del banner fuera de la pantalla). Como los otros .contentxlarge. */
.csectionlogos .contentxlarge { width: auto; }

/* G01 y G04: la hamburguesa y el aspa del vídeo son <button>, y el menú, «Contact» y «Let's talk!», <a>. Mismo aspecto
   que los <div> y <span> de antes: fuera lo que pone el navegador a un botón (las reglas del tema para los <span> del
   menú y de «Contact» ya apuntan a .jqgoto en wp-content/themes/tasty/css/tasty.css). */
button.cburger, button.cpopupclose { margin: 0; padding: 0; border: 0; border-radius: 0; background-color: transparent; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; -webkit-appearance: none; appearance: none; }
button.cburger { display: block; }
.cburger .cburgerinner, .cburger .cbar { display: block; }

/* Foco visible (WCAG 2.4.7) solo con el teclado: un anillo negro con un borde blanco por dentro, que se ve sobre
   el vídeo, sobre el rojo del menú y sobre blanco. Lo que cambia al pasar el ratón cambia también con el foco. */
.cburger:focus-visible, .jqgoto:focus-visible, .jqshowvimeo:focus-visible, .cpopupclose:focus-visible, .gl-pausa:focus-visible,
.cheaderlogo a:focus-visible, .ctext a:focus-visible, .ctextform a:focus-visible, .icheckbox a:focus-visible, .cformerror a:focus-visible, .cta:focus-visible {
	outline: 2px solid #000; outline-offset: 2px; box-shadow: 0 0 0 2px #fff;
}
.csupermenuinner1 .jqgoto:focus-visible { color: #000; }
.citemoverlayinvertido:focus-visible video { transform: scale(1.2); }
.jqgoto-destino:focus { outline: none; }   /* la sección a la que baja un enlace del menú recibe el foco, sin marco */
.cheaderlogo:focus-within { opacity: 1; transform: translateY(-40%) translateX(-50%); }   /* el logo de la cabecera, oculto arriba del todo, se ve si llega a él el tabulador (como al bajar) */

/* G02: los campos del formulario enseñan el foco (el tema lo quitaba): la línea de abajo pasa a negra y a 2 px.
   El desplegable, cuando su input invisible (el combobox) tiene el foco; la opción activa, con el mismo gris que al
   pasar el ratón y un marco. Las casillas, con un marco alrededor del cuadrado. */
.cformdefault .iinputdefault:focus-visible, .cselectdropdown:focus-within { border-bottom-color: #000; box-shadow: 0 1px 0 #000; }
.jqdropdownvalue.is-activa { background: var(--stroke); outline: 2px solid #000; outline-offset: -2px; }
.icheckbox input:focus-visible + .scheck { outline: 2px solid #000; outline-offset: 2px; }

/* G10 (WCAG 1.4.1): el enlace «privacy policy» de la casilla se distingue del texto: subrayado, como el correo de
   contacto, que se desvanece al pasar el ratón con el ritmo común. */
.icheckbox a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: currentColor; transition: text-decoration-color var(--gl-hover); }
.icheckbox a:hover, .icheckbox a:focus-visible { text-decoration: underline transparent; }

/* G11: aviso de envío fallido (estatico: script.js), debajo del formulario. */
.cformerror { margin: 20px 0 0; }
.cformerror a { text-decoration: underline; text-underline-offset: 2px; }

/* G17 (WCAG 2.4.11): al enviar con un campo vacío, el navegador lleva el foco al campo; que no quede debajo de la
   cabecera fija (100 px, 80 px por debajo de 1000). No afecta a los desplazamientos animados del tema ni a la página
   legal (no tiene .cheader). */
html:has(.cheader) { scroll-padding-top: 130px; }
@media (max-width: 1000px) { html:has(.cheader) { scroll-padding-top: 100px; } }

/* G03: botón «Pause motion» / «Play motion» (estatico/accesibilidad.js). Decisión de Rubén (08/10/2026): siempre
   visible, también con el ratón; mismo componente en DotFive, Tasty y KONTENT. Va en la esquina inferior derecha de la
   portada (que mide 100vh), a 24 px de los bordes (16 px en el móvil), y baja con la página. Se mide con 100svh (la
   pantalla con las barras del navegador a la vista): en el móvil no queda debajo de ellas al entrar; en el ordenador,
   100svh es 100vh. Sigue siendo lo primero del <body> (lo primero con el tabulador). Encima de la cinta de frases: la
   cinta pasa por debajo. En el móvil, mientras está el banner de cookies, queda debajo de él; al llegar con el
   tabulador, la página sube y se ve entero (el scroll-padding-bottom que pone glassy.css con el banner). Círculo de 44 × 44 px, fondo negro al 45 %, borde blanco al 50 % y el
   icono en blanco: dos barras para pausar y un triángulo para reanudar (con la clase gl-pausa--pausado, que pone
   accesibilidad.js; desde el 08/10/2026 el botón no lleva aria-pressed: los lectores de pantalla solo oyen su nombre,
   «Pause motion» o «Play motion»). Por encima de la cinta de
   frases (z-index 400) y por debajo de la cabecera y su menú (700), del vídeo abierto (950) y del banner de cookies. */
.gl-pausa {
	position: absolute; z-index: 500; top: calc(100vh - 68px); top: calc(100svh - 68px); right: 24px;
	display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 44px; height: 44px;
	margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%;
	background: rgba(0, 0, 0, 0.45); color: #ffffff; cursor: pointer; -webkit-appearance: none; appearance: none;
	transition: background-color var(--gl-hover), border-color var(--gl-hover);
}
.gl-pausa svg { display: block; width: 16px; height: 16px; fill: currentColor; }
.gl-pausa--pausado .gl-pausa__pausar, .gl-pausa:not(.gl-pausa--pausado) .gl-pausa__reanudar { display: none; }
.gl-pausa:hover, .gl-pausa:focus-visible { background-color: rgba(0, 0, 0, 0.7); border-color: #ffffff; }
@media (max-width: 767px) { .gl-pausa { top: calc(100vh - 60px); top: calc(100svh - 60px); right: 16px; } }

/* G31: entrada sin cortinilla blanca. Decisión de Rubén (08/10/2026): la cortinilla (.loadingpage::before, blanca y por
   encima de todo hasta document.ready) restaba rendimiento. Fuera: la portada se pinta ya en el primer fotograma, sin
   esperar al JS, y entra con un fundido corto de CSS (0,5 s desde opacidad 0,7). El fundido no retrasa el pintado ni
   el LCP (lo que está a opacidad 0,7 ya cuenta como pintado) y no se anima con movimiento reducido.
   - El vídeo de portada (b04) y su velo oscuro ya no esperan a .scrollingwayfinish (document.ready): están en su sitio
     y con su opacidad final desde el principio, sin el deslizamiento de 80 px ni el fundido de 0,7 y 1,2 s del tema.
   - La cortinilla de salida (body.loadingpageout, al pulsar un enlace absoluto a la misma web, como el logo) se queda. */
.loadingpage::before { opacity: 0; pointer-events: none; }
.ctoptasty .csectionbg.jqswaitem { opacity: 1; transform: none; transition: none; }
.ctoptasty .csectionopa { opacity: 0.4; transition: none; }
@keyframes tasty-entrada { from { opacity: 0.7; } }
body.loadingpage { animation: tasty-entrada 0.5s ease-out backwards; }
@media (prefers-reduced-motion: reduce) { body.loadingpage { animation: none; } }

/* TA03: el rojo de la marca con texto (decisión de Rubén, 08/10/2026). #F20633 da 4,33:1 sobre blanco y #E90631, 4,63:1
   (AA). Pasa a #E90631 la variable del tema, --color1: los títulos rojos, «Let's talk!» y «Contact», la cinta de
   frases, el botón «Send» y el panel del menú (texto blanco sobre rojo). Lo que cuelga de la misma variable sin texto
   (las rayas de la hamburguesa, el subrayado de «Let's talk!» y la barra de desplazamiento) cambia con ella, para que
   no haya dos rojos juntos. Los logos de Tasty (SVG de la cabecera, la portada y la 404) siguen en #F20633. */
:root { --color1: #E90631; }

/* TA06: logos (b07) a dos columnas en el móvil. El tema pone tantas columnas de 220 px como caben, y por debajo de
   504 px solo cabía una (24 logos uno debajo de otro). Ahora hay siempre dos como mínimo; de 504 px en adelante, nada
   cambia. En el móvil el logo ocupa toda su columna (en el resto, el 85 %), para que siga a buen tamaño: 163 px de
   ancho a 390 (antes 291) y 148 a 360. "sizes" de b07 dice ese ancho. */
.csectionlogos .contentxlarge { grid-template-columns: repeat(auto-fit, minmax(min(220px, calc((100% - 1rem) / 2)), 1fr)); }
@media (max-width: 503px) { .csectionlogos img { width: 100%; } }

/* G03: con movimiento reducido en el sistema, sin desplazamientos (las apariciones al bajar quedan en un fundido), el
   menú y el logo de la cabecera aparecen sin deslizarse y los vídeos del grid no se acercan al pasar el ratón. Los
   vídeos, la cinta de frases y la de fotos empiezan en pausa (accesibilidad.js). */
@media (prefers-reduced-motion: reduce) {
	.jqswa .jqswaitem, .jqswa .jqswaitemer > *, .jqswaitemer > * { transform: none !important; }
	.csupermenu, .cheaderlogo, .cheader::before { transition: opacity .2s linear !important; }
	.citemoverlayinvertido:hover video, .citemoverlayinvertido:focus-visible video { transform: none; }
}

/* Textos de tabletop (08/10/2026, aprobados por Rubén): el H1 de la presentación (b06) es «Tasty Studio, tabletop
   experts.» y el lema de antes, «Turning products into desire.», va debajo como subtítulo: un <p> con la clase sh3 del
   tema (Goodman en rojo, 40 / 30 / 28 px según el ancho, como los títulos de las otras secciones), separado del H1. */
.gl-subtitulo { margin: 0.4em 0 0; }

/* ---------- Diseño propio: banner, menú y suavidad (Rubén, 08/10/2026) ----------
   Criterio nuevo: cada landing con su identidad, también el banner de cookies y el pie (ya no copian glassyfilms.com).
   Norma de movimiento: todo entra y sale suave (--gl-hover o una curva equivalente, unos 0,4-0,6 s); nada de golpe.
   Explicación en FASE_B_INFORME.md, apartado «Diseño propio, banner, menú y pie (08/10/2026)». */
:root { --tasty-curva: cubic-bezier(0.2, 0.7, 0.2, 1); --tasty-curva-io: cubic-bezier(0.65, 0, 0.35, 1); }

/* Banner de cookies con la identidad de Tasty: abajo a la DERECHA (a la izquierda tapaba el texto de las secciones),
   blanco con el borde rojo y esquinas rectas, como la página. Texto negro y «Cookie policy» en rojo (4,63:1).
   Botones como «Send»: píldora, Modern Gothic en mayúsculas a --fontsmall. «Accept», rojo relleno; «Reject», con el
   borde y el texto rojos; los dos del mismo tamaño y en el mismo sitio (AEPD). Al pasar el ratón o con el teclado, a
   negro, como «Send», con --gl-hover. La aparición y la salida siguen siendo las del kit (fundido y 12 px, 0,4 s).
   Por debajo de 700 px sigue a todo el ancho (16 px a cada lado), como en el kit. */
section.gl-cookies {
	left: auto; right: 24px; width: min(360px, calc(100vw - 48px));
	background: #ffffff; border: 1px solid var(--color1); border-radius: 0; color: #000000;
}
.gl-cookies__icono { color: var(--color1); }
.gl-cookies p { color: #000000; }
.gl-cookies .gl-cookies__mas, .gl-cookies .gl-cookies__mas:visited {
	color: var(--color1); 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 .gl-btn {
	min-height: 48px; padding: 0 16px; border: 1px solid var(--color1); border-radius: 30px;
	background: transparent; color: var(--color1);
	font-size: var(--fontsmall, 14px); line-height: 1; text-transform: uppercase;
	transition: background-color var(--gl-hover), border-color var(--gl-hover), color var(--gl-hover);
}
.gl-cookies .gl-btn--solid { background: var(--color1); color: #ffffff; }
@media (hover: hover) {
	.gl-cookies .gl-btn:hover, .gl-cookies .gl-btn--solid:hover { background: #000000; border-color: #000000; color: #ffffff; }
}
.gl-cookies .gl-btn:focus-visible, .gl-cookies .gl-btn--solid:focus-visible { background: #000000; border-color: #000000; color: #ffffff; }
.gl-cookies .gl-btn:focus-visible, .gl-cookies .gl-cookies__mas:focus-visible { outline: 2px solid #000000; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }
@media (max-width: 699px) { section.gl-cookies { left: 16px; right: 16px; width: auto; } }

/* Con el banner abierto, el botón de pausa (esquina inferior derecha de la portada) sube por encima de él, con la misma
   separación que tiene con el borde, en lugar de quedar debajo. --gl-cookies-hueco es el alto del banner más su margen
   inferior (lo mide glassy.js). Sube con transform y no con top, para que no cuente como desplazamiento de la maqueta
   (CLS). Al cerrar el banner, vuelve a su sitio con el mismo fundido. */
.gl-pausa { transition: background-color var(--gl-hover), border-color var(--gl-hover), transform var(--gl-hover); }
html:has(.gl-cookies.is-visible) .gl-pausa { transform: translateY(calc(-1 * var(--gl-cookies-hueco, 240px))); }

/* Menú abierto: el panel rojo ocupa menos (antes la mitad de la pantalla y, por debajo de 1000 px, toda) y las entradas
   tienen más aire: más margen a la izquierda y más separación entre ellas. El panel entra y sale en 0,6 s con una curva
   suave de entrada y salida (antes 0,9 s ease-in-out); la capa oscura de detrás, igual (antes 1,2 s). Las entradas
   aparecen con un fundido y 16 px de desplazamiento, una detrás de otra, cuando el panel ya está entrando, y al cerrar
   se desvanecen a la vez, sin esperar. El color al pasar el ratón (de blanco a negro) sigue con --gl-hover. */
.csupermenu { width: clamp(420px, 36vw, 580px); transition: transform 0.6s var(--tasty-curva-io); }
.csupermenuopa { transition: opacity 0.6s var(--tasty-curva-io); }
.csupermenuinner1 .jqgoto {
	padding-left: clamp(56px, 5vw, 96px); padding-right: 24px;
	opacity: 0; transform: translateX(-16px);
	transition: color var(--gl-hover), opacity 0.35s var(--tasty-curva), transform 0.35s var(--tasty-curva);
}
.csupermenuinner1 .jqgoto + .jqgoto { margin-top: 0.32em; }
.showmenuresponsive .csupermenuinner1 .jqgoto {
	opacity: 1; transform: none;
	transition: color var(--gl-hover), opacity 0.5s var(--tasty-curva) 0.22s, transform 0.5s var(--tasty-curva) 0.22s;
}
.showmenuresponsive .csupermenuinner1 .jqgoto:nth-child(2) { transition-delay: 0s, 0.28s, 0.28s; }
.showmenuresponsive .csupermenuinner1 .jqgoto:nth-child(3) { transition-delay: 0s, 0.34s, 0.34s; }
.showmenuresponsive .csupermenuinner1 .jqgoto:nth-child(4) { transition-delay: 0s, 0.40s, 0.40s; }
@media (max-width: 1000px) {
	.csupermenu { width: min(440px, 86vw); }
	.csupermenuinner1 .jqgoto { padding-left: 48px; }
}
/* La hamburguesa (rayas de blanco a rojo al cerrar) y «Contact», que se oculta con el menú: con la misma curva. */
.cburger .cbar { transition: background-color 0.4s var(--tasty-curva), margin 0.4s var(--tasty-curva); }
.cburger .cbar { transition-delay: 0.35s !important; }
.showmenuresponsive .cburger .cbar { transition-delay: 0s !important; }
.cmenutop { transition: opacity 0.45s var(--tasty-curva); }
@media (prefers-reduced-motion: reduce) {
	.csupermenuinner1 .jqgoto, .showmenuresponsive .csupermenuinner1 .jqgoto { transform: none; transition: color var(--gl-hover), opacity 0.2s linear; transition-delay: 0s !important; }
}

/* Formulario: la flecha del desplegable gira con el mismo ritmo que la lista (la lista se despliega y se pliega en
   script.js, 0,45 y 0,4 s con fundido), la marca de las casillas aparece con un fundido y los avisos de debajo del
   formulario (envío fallido y enviado) entran con un fundido y 8 px de subida. Antes, 0,1-0,2 s o de golpe. */
.cselectdropdown svg { transition: transform var(--gl-hover); }
.scheck::before, .scheck::after { transition: opacity var(--gl-hover); }
@keyframes tasty-aparece { from { opacity: 0; transform: translateY(8px); } }
.cformerror, .cformgracias { animation: tasty-aparece 0.5s var(--tasty-curva) both; }
@media (prefers-reduced-motion: reduce) { .cformerror, .cformgracias { animation: none; } }

/* Más suavidad: el título de cada proyecto del grid (se va hacia arriba al pasar el ratón; antes 0,3 s) y el fondo
   blanco de la cabecera al bajar (antes 0,2 s), con --gl-hover. */
.citemtext { transition: opacity var(--gl-hover), transform var(--gl-hover); }
.cheader::before { transition: transform var(--gl-hover), opacity var(--gl-hover); }