/* ==========================================================================
   Carsloop — estilos
   Claro por defecto y oscuro con [data-tema="oscuro"] en <html>. Todo color
   sale de los tokens de :root: un color escrito a pelo más abajo es un color
   que no cambia de modo.
   ========================================================================== */

:root {
	--c-fondo: #ffffff;
	--c-fondo-2: #f4f4f5;
	--c-tarjeta: #ffffff;
	--c-texto: #121215;
	--c-texto-2: #5b5b65;
	--c-linea: #e6e6ea;
	--c-hover: #f0f0f2;
	/* Soul Red Crystal, sacado del degradado del logo (#a60e1a → #f22835).
	   El de texto es el más oscuro: sobre blanco da 7:1. */
	--c-rojo: #b3121f;
	--c-rojo-vivo: #e3202f;
	--c-sobre-rojo: #ffffff;
	--grad: linear-gradient(100deg, #8f0b16 0%, #c4141f 45%, #f22835 100%);
	/* El de Instagram, con sus colores: aqui el color hace de etiqueta y se
	   reconoce antes de leer una palabra. No se usa para nada mas. */
	--grad-ig: linear-gradient(100deg, #f9a03f 0%, #e1306c 42%, #9b36b7 72%, #5a52d5 100%);
	--sombra: 0 1px 2px rgb(0 0 0 / .05), 0 10px 30px -12px rgb(0 0 0 / .18);
	--sombra-alta: 0 2px 4px rgb(0 0 0 / .06), 0 24px 48px -16px rgb(0 0 0 / .28);
	--radio: 14px;
	--radio-s: 10px;
	--env: 1320px;
	--gutter: clamp(16px, 4vw, 32px);
	--cab-alto: 68px;
	--curva: cubic-bezier(.2, .7, .2, 1);
	--t: 180ms cubic-bezier(.2, .7, .2, 1);
	--t-l: 420ms cubic-bezier(.2, .7, .2, 1);   /* lo que se mira mientras pasa: degradados, barridos */
	/* Los PESOS, nombrados por el trabajo que hacen y no por el numero.
	   Estaban los 33 entre 600 y 850 —el unico 400 de la web era el parrafo
	   corrido—, asi que la pagina no tenia un nivel callado: cuando todo
	   pesa, nada pesa. Van de cien en cien porque en Archivo menos no se
	   distingue, y asi cada escalon significa algo.
	     texto   lo que se lee y lo que acompana: parrafo, pies, metadatos
	     medio   destaca sin levantar la voz: titulo de tarjeta, menu
	     rotulo  versales pequenas y cifras, que ya destacan por otra via
	     fuerte  lo que manda dentro de un bloque
	     titulo  h1 y h2: la voz rotunda de la marca
	     display solo los titulares grandes */
	--p-texto: 400;
	--p-medio: 500;
	--p-rotulo: 600;
	--p-fuerte: 700;
	--p-titulo: 800;
	--p-display: 850;
	color-scheme: light;
}

[data-tema="oscuro"] {
	--c-fondo: #0d0d0f;
	--c-fondo-2: #151518;
	--c-tarjeta: #1a1a1e;
	--c-texto: #f3f3f5;
	--c-texto-2: #a5a5b0;
	--c-linea: #2a2a31;
	--c-hover: #212126;
	--c-rojo: #ff4a57;
	--c-rojo-vivo: #f22835;
	--sombra: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px -12px rgb(0 0 0 / .6);
	--sombra-alta: 0 2px 4px rgb(0 0 0 / .4), 0 24px 48px -16px rgb(0 0 0 / .8);
	color-scheme: dark;
}

/* ——— Banner de seccion (Reviews, Podcast) ——— */
/* UNA CAJA REDONDEADA, no una banda a sangre, y lo pidio Carlos. La banda
   tenia que fundir su velo hasta el color de la pagina para no cortarse en
   seco contra ella, asi que el final del degradado dependia del tema y el
   empalme se veia. Una caja no empalma con nada: va con el mismo ancho que
   las tarjetas de debajo —el .cl-env de siempre— y por eso queda cohesionado.
   Nunca `width:100vw`: eso incluye la barra de desplazamiento y metia 8px de
   desborde horizontal (medido: 368 sobre 360).
   El velo oscuro no es adorno: sin el, un titulo blanco sobre una foto clara
   deja de leerse, y la foto no se puede elegir para que siempre sea oscura
   por arriba. Va en diagonal porque el texto esta a la izquierda. */
.cl-cab-banner {
	position: relative; isolation: isolate; overflow: hidden;
	border-radius: 24px; background: #111; box-shadow: var(--sombra-alta);
	margin-block: clamp(1.25rem, 2.5vw, 2rem) clamp(2.25rem, 4.5vw, 3.5rem);
}
.cl-cab-banner .cl-cab-foto-img { position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 55%; z-index: -2; }
.cl-cab-banner::after { content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(100deg, rgb(8 8 10 / .84) 0%, rgb(8 8 10 / .6) 46%, rgb(8 8 10 / .28) 100%); }
.cl-cab-banner .cl-pag-cab { padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 3.5vw, 3rem); }
.cl-cab-banner h1 { color: #fff; }
.cl-cab-banner .cl-ante { color: #fff; opacity: .92; }
.cl-cab-banner .cl-entradilla { color: rgb(255 255 255 / .88); }
/* El boton de contorno —el de RSS— saca su color del texto de la pagina, que
   aqui es oscuro sobre una foto oscura: no se leia. Dentro de la caja va en
   claro, como todo lo demas que hay dentro. */
.cl-cab-banner .cl-btn-contorno { color: #fff; border-color: rgb(255 255 255 / .42); background: rgb(255 255 255 / .1); --cl-relleno: #fff; }
.cl-cab-banner .cl-btn-contorno:hover { color: #121215; border-color: #fff; }

/* ——— Base ——— */

html { scroll-padding-top: calc(var(--cab-alto) + 16px); -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--c-fondo);
	color: var(--c-texto);
	font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	transition: background-color var(--t), color var(--t);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-rojo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Una receta por tamano y no una para los cuatro. El tracking negativo y el
   interlineado corto son correcciones de TAMANO GRANDE: aplicados a un h4 de
   1rem lo dejan apretado. h1 y h2 se quedan en 800 a proposito. */
h1, h2, h3, h4 { color: var(--c-texto); margin: 0 0 .5em; text-wrap: balance; }
h1, h2 { font-weight: var(--p-titulo); font-stretch: 108%; letter-spacing: -.025em; line-height: 1.08; }
h3 { font-weight: var(--p-fuerte); font-stretch: 105%; letter-spacing: -.012em; line-height: 1.2; }
h4 { font-weight: var(--p-rotulo); font-stretch: 103%; letter-spacing: 0; line-height: 1.3; }
p { text-wrap: pretty; }
:focus-visible { outline: 2.5px solid var(--c-rojo-vivo); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--c-rojo-vivo); color: #fff; }
.cl-ico { width: 1em; height: 1em; flex: none; }
.cl-main { min-height: 60vh; }
.wp-site-blocks > * { margin-block: 0; }
.cl-main > * { margin-block: 0; }

.cl-env { box-sizing: border-box; width: 100%; max-width: calc(var(--env) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* El antetítulo: pequeño, en versales y en rojo. Dice de qué va antes del título. */
.cl-ante { margin: 0 0 .6rem; font-size: .8rem; font-weight: var(--p-rotulo); font-stretch: 115%; letter-spacing: .12em; text-transform: uppercase; color: var(--c-rojo); }
.cl-ante-claro { color: #fff; opacity: .9; }
.cl-entradilla { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--c-texto-2); line-height: 1.5; max-width: 42rem; }
.cl-nota { color: var(--c-texto-2); font-size: .95rem; margin-top: 1.5rem; }
.cl-chapa { display: inline-block; font-size: .72rem; font-weight: var(--p-rotulo); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--grad); padding: .25em .7em; border-radius: 99px; }

/* ——— Botones ——— */

.cl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55em; box-sizing: border-box;
	font: inherit; font-size: .95rem; font-weight: var(--p-rotulo); font-stretch: 105%; line-height: 1;
	padding: .8em 1.25em; border-radius: 99px; border: 1.5px solid transparent;
	/* Ojo: background-origin NO se pone aqui. Quien tenga degradado lo pone
	   DESPUES de su atajo `background:`, que lo reinicia (ver .cl-btn-rojo). */
	text-decoration: none; cursor: pointer; white-space: nowrap;
	position: relative; isolation: isolate; overflow: hidden;
	transition: background-color var(--t), background-position var(--t-l), border-color var(--t-l), color var(--t-l), transform var(--t), box-shadow var(--t);
}
/* EL RELLENO QUE ENTRA AL PASAR, de izquierda a derecha. Es el gesto de los
   botones de Magnolia, que es el que le gusta a Carlos: una capa por debajo
   del texto que se despliega con `scaleX` —el origen salta de derecha a
   izquierda para que entre por un lado y, al salir el raton, se recoja por
   el mismo—. Quien no declare `--cl-relleno` no tiene nada que desplegar y
   se comporta como antes: el rojo, por ejemplo, que mueve su degradado y no
   se toca. El color de la letra tarda lo mismo que el relleno, asi que los
   dos llegan juntos. */
.cl-btn::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: var(--cl-relleno, transparent);
	transform: scaleX(0); transform-origin: right center;
	transition: transform var(--t-l);
}
.cl-btn:hover::before, .cl-btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
/* Todos saltan, no solo el rojo y el de contorno: era lo que hacia que unos
   parecieran vivos y otros muertos al lado. */
.cl-btn:hover, .cl-btn:focus-visible { transform: translateY(-2px); }
.cl-btn:active { transform: translateY(1px); }
/* El icono de marca da un tironcito. Solo donde el icono ES la marca: en un
   boton con flecha ya se mueve la flecha, y dos cosas moviendose es ruido. */
@keyframes cl-tilin { 30% { transform: rotate(-11deg); } 60% { transform: rotate(7deg); } }
.cl-btn .cl-ico { font-size: 1.15em; }
.cl-btn-sm { font-size: .88rem; padding: .65em 1.05em; }
.cl-btn-g { font-size: 1.02rem; padding: .95em 1.5em; }
.cl-btn-ancho { width: 100%; margin-top: 1rem; }
/* EL BOTON ROJO, REHECHO (2026-10-14). Tres cosas distintas le hacian asomar
   un borde recto por el lateral del ovalo, y por eso costo tres intentos:
     · `filter` en el :hover -> capa RECTANGULAR contra la que se recortaba
       la sombra. Ahora el hover mueve el degradado, que no crea capa.
     · la columna del hero con `animation: ... both` -> capa permanente cuyo
       borde izquierdo cae en el mismo pixel que el borde del boton. Ya va
       con `backwards` (ver .cl-portada-txt).
     · SPREAD NEGATIVO. Para dibujar `-8px` el navegador encoge el rectangulo
       redondeado 8px y le baja el radio de 26 a 18; en los extremos del
       ovalo, donde la curva es mas cerrada, esa forma se rasteriza con un
       par de pixeles PLANOS. A tamano normal no se ve; ampliado, si.
   La sombra va ya SIN extension negativa. Y sin pasarse de desenfoque: el
   boton esta a 32px del borde del hero, que recorta con overflow:hidden.
   Y LA MUESCA del extremo izquierdo, que es lo que de verdad se veia: el
   boton lleva `border: 1.5px solid transparent`, y el fondo se COLOCA en
   la caja de relleno pero se PINTA sobre la del borde, asi que esa tira
   de 1,5px se rellena REPITIENDO el degradado —y la repeticion trae el
   rojo del extremo contrario—. En la curva cerrada del ovalo esa franja
   del color equivocado se ve como un mordisco. Con un color plano no se
   nota, por eso solo pasaba aqui. `background-origin: border-box` lo
   coloca sobre toda la caja y no queda tira que repetir; va DESPUES del
   atajo `background:`, que reinicia sus sub-propiedades. */
.cl-btn-rojo { background: var(--grad); background-origin: border-box; background-size: 220% 100%; background-position: 0 50%; color: var(--c-sobre-rojo); box-shadow: 0 5px 16px rgb(196 20 31 / .38); }
/* SUSCRIBIRSE: dos rotulos, uno encima del otro, y al pasar por encima sube
   el de abajo.
   LOS DOS COMPARTEN CELDA DE REJILLA, y eso es todo el arreglo: la celda mide
   lo que el rotulo mas largo, asi que el boton no cambia de tamano al pasar
   —uno que crece bajo el cursor se escapa— y el largo no se sale. Antes el
   segundo iba en posicion ABSOLUTA, de modo que el boton media lo que
   «Suscribete» y «¡Va, que es gratis!» asomaba por los dos lados pisando el
   icono. El recorte va en el envoltorio y no en el boton, con la caja de
   linea algo mas alta que la letra para que no se coman la cola de la «g»;
   el margen negativo devuelve ese alto de mas para que el boton mida igual
   que los demas. */
.cl-sub-rot { display: grid; overflow: hidden; text-align: center; line-height: 1.4; margin-block: -.2em; }
.cl-sub-rot > span { grid-area: 1 / 1; white-space: nowrap; transition: transform var(--t-l), opacity var(--t); }
.cl-sub-rot .cl-sub-b { transform: translateY(105%); opacity: 0; }
.cl-cab-sub:hover .cl-sub-a, .cl-cab-sub:focus-visible .cl-sub-a { transform: translateY(-105%); opacity: 0; }
.cl-cab-sub:hover .cl-sub-b, .cl-cab-sub:focus-visible .cl-sub-b { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cl-sub-rot .cl-sub-b { display: none; } }

.cl-btn-rojo:hover { background-position: 100% 50%; box-shadow: 0 9px 22px rgb(196 20 31 / .5); color: #fff; }
.cl-btn-contorno { background: transparent; color: var(--c-texto); border-color: var(--c-linea); --cl-relleno: var(--c-texto); }
.cl-btn-contorno:hover { border-color: var(--c-texto); color: var(--c-fondo); }
.cl-btn-contorno .cl-ico:last-child { transition: transform var(--t); }
.cl-btn-contorno:hover .cl-ico:last-child { transform: translateX(3px); }
.cl-btn-cristal { background: rgb(255 255 255 / .14); color: #fff; border-color: rgb(255 255 255 / .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); --cl-relleno: #fff; }
.cl-btn-cristal:hover { color: #121215; border-color: #fff; }
.cl-btn-blanco { background: #fff; color: #121215; }
.cl-btn-blanco:hover { color: #121215; }
.cl-btn-discord { background: #5865f2; color: #fff; --cl-relleno: #4752c4; }
.cl-btn-discord:hover { color: #fff; }
/* LOS BOTONES DE «DONDE ESCUCHAR» SE RELLENAN DE SU PROPIO COLOR. Es la
   misma idea que los iconos de «Siguenos donde quieras», que es lo que a
   Carlos le gusto: el color hace de etiqueta. El texto de cada uno se elige
   por contraste y no por costumbre — sobre el verde de Spotify, el blanco
   se queda en 2,6:1 y hay que ir en oscuro; sobre los otros tres, al reves. */
.cl-btn-marca { background: var(--c-tarjeta); color: var(--c-texto); border-color: var(--c-linea); }
.cl-btn-marca:hover { color: #fff; border-color: transparent; }
.cl-btn-marca:hover .cl-ico { color: currentColor; animation: cl-tilin .55s var(--curva); }
.cl-m-spotify { --cl-relleno: #1db954; }
.cl-m-spotify .cl-ico { color: #1db954; }
.cl-m-spotify:hover { color: #062b1a; }
.cl-m-applepodcasts { --cl-relleno: #8338c5; }
.cl-m-applepodcasts .cl-ico { color: #a855f7; }
.cl-m-instagram { --cl-relleno: #c13584; }
.cl-m-instagram .cl-ico { color: #e1306c; }
.cl-m-youtube { --cl-relleno: #e00000; }
.cl-m-youtube .cl-ico { color: #ff0000; }
.cl-enlace { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cl-boton-p { margin: 1.5rem 0 0; }

/* ——— Cabecera ——— */

.cl-parte-cab { position: sticky; top: 0; z-index: 50; }
.admin-bar .cl-parte-cab { top: 32px; }
@media (max-width: 782px) { .admin-bar .cl-parte-cab { top: 46px; } }
/* El desenfoque va en un ::before y no en la cabecera: un backdrop-filter
   convierte al elemento en el marco de sus hijos «fixed», y el menú del
   móvil se quedaba encerrado en los 68 px de la cabecera. */
.cl-cab { position: relative; border-bottom: 1px solid var(--c-linea); }
.cl-cab::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: color-mix(in srgb, var(--c-fondo) 82%, transparent);
	backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
}
.cl-cab-in { display: flex; align-items: center; gap: 2rem; height: var(--cab-alto); }
.cl-cab-logo { display: block; flex: none; }
.cl-logo { height: 21px; width: auto; }
.cl-nav { flex: 1; }
.cl-nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.cl-nav a { display: block; padding: .5em .9em; border-radius: 99px; color: var(--c-texto); text-decoration: none; font-weight: var(--p-medio); font-size: .98rem; transition: background-color var(--t), color var(--t); }
.cl-nav a:hover { background: var(--c-hover); }
.cl-nav a[aria-current] { color: var(--c-rojo); }
.cl-cab-acc { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.cl-tema-btn, .cl-menu-btn {
	display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid var(--c-linea); background: var(--c-tarjeta); color: var(--c-texto);
	cursor: pointer; font-size: 1.15rem; transition: background-color var(--t), border-color var(--t);
}
.cl-tema-btn:hover, .cl-menu-btn:hover { background: var(--c-hover); border-color: var(--c-texto-2); }
.cl-tema-btn .cl-i-sol, [data-tema="oscuro"] .cl-tema-btn .cl-i-luna { display: none; }
[data-tema="oscuro"] .cl-tema-btn .cl-i-sol { display: block; }
.cl-menu-btn { display: none; }
.cl-menu-btn .cl-i-cerrar, .cl-menu-btn[aria-expanded="true"] .cl-i-menu { display: none; }
.cl-menu-btn[aria-expanded="true"] .cl-i-cerrar { display: block; }

.cl-menu-movil { position: fixed; inset: var(--cab-alto) 0 0; background: var(--c-fondo); padding: 1rem var(--gutter) 2rem; overflow-y: auto; z-index: 49; }
.cl-menu-movil[hidden] { display: none; }
.cl-menu-movil ul:first-child { list-style: none; margin: 0 0 2rem; padding: 0; }
.cl-menu-movil nav a { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--c-linea); color: var(--c-texto); text-decoration: none; font-size: 1.6rem; font-weight: var(--p-fuerte); font-stretch: 108%; }
.cl-menu-movil nav a .cl-ico { color: var(--c-rojo); font-size: 1.2rem; }

@media (max-width: 900px) {
	.cl-nav, .cl-cab-sub { display: none; }
	.cl-menu-btn { display: grid; }
	.cl-cab-in { gap: 1rem; }
	.cl-logo { height: 18px; }
}

/* Los iconos de las redes, en fila. */
.cl-redes-ico { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.cl-redes-ico a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--c-linea); color: var(--c-texto); font-size: 1.1rem; transition: background-color var(--t), color var(--t), border-color var(--t); }
.cl-redes-ico a:hover { background: var(--c-texto); color: var(--c-fondo); border-color: var(--c-texto); }

/* ——— Portada ——— */

.cl-portada { position: relative; isolation: isolate; min-height: clamp(560px, 86vh, 860px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: #111; }
.cl-portada-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; animation: cl-acercar 18s ease-out both; }
.cl-portada::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg, rgb(8 8 10 / .78) 0%, rgb(8 8 10 / .45) 42%, rgb(8 8 10 / 0) 72%),
		linear-gradient(0deg, rgb(8 8 10 / .85) 0%, rgb(8 8 10 / 0) 45%);
}
@keyframes cl-acercar { from { transform: scale(1.06); } to { transform: scale(1); } }
.cl-portada-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-block: clamp(3rem, 8vh, 5.5rem); }
/* `backwards` y NO `both`: con fill forwards la animacion se queda aplicada
   para siempre y la columna conserva una capa de composicion, contra cuyo
   borde se recortaba en recto el halo del boton rojo —que empieza en el
   mismo pixel que esta columna—. El fotograma final es el estado natural
   del elemento, asi que al soltarlo no cambia nada a la vista. */
.cl-portada-txt { max-width: 44rem; animation: cl-subir .8s .1s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes cl-subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.cl-portada-t { color: #fff; font-size: clamp(2.7rem, 6.6vw, 5.6rem); font-weight: var(--p-display); font-stretch: 112%; line-height: .96; letter-spacing: -.035em; margin: 0 0 1.25rem; }
.cl-portada-p { font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.5; color: rgb(255 255 255 / .85); margin: 0 0 2rem; max-width: 34rem; }
.cl-portada-btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.cl-portada-nuevo {
	/* Es la pieza con mas gancho de la portada —el ultimo video, con su
	   miniatura— y nacio del tamano de una chapa. Va en clamp y no en un
	   ancho fijo porque comparte fila con el titular: con 600px clavados, a
	   1100px de ventana el titular se quedaba en 440 y se partia en cinco
	   lineas. Asi crece con la pantalla y cede cuando hace falta. */
	box-sizing: border-box; display: flex; gap: 1.1rem; align-items: center; width: clamp(430px, 40vw, 580px); max-width: 100%; flex: none;
	padding: 1rem; border-radius: 24px; text-decoration: none; color: #fff;
	background: rgb(20 20 24 / .5); border: 1px solid rgb(255 255 255 / .16);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	transition: background-color var(--t), transform var(--t), border-color var(--t), box-shadow var(--t);
	animation: cl-subir .8s .35s cubic-bezier(.2, .7, .2, 1) both;
}
/* Sube como las tarjetas del listado y se le enciende el borde: con solo
   dos pixeles y un fondo un pelin mas oscuro no parecia que hiciera nada. */
.cl-portada-nuevo:hover { background: rgb(20 20 24 / .72); transform: translateY(-4px); color: #fff;
	border-color: rgb(255 255 255 / .55); box-shadow: 0 18px 40px -22px rgb(0 0 0 / .9); }
.cl-portada-nuevo .cl-yt-play-s { transition: transform var(--t); }
.cl-portada-nuevo:hover .cl-yt-play-s { transform: scale(1.12); }
.cl-portada-nuevo-img { position: relative; flex: none; width: clamp(200px, 18vw, 272px); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; }
.cl-portada-nuevo-img img { width: 100%; height: 100%; object-fit: cover; }
.cl-portada-nuevo-txt { display: grid; gap: .3rem; min-width: 0; }
.cl-portada-nuevo-txt .cl-chapa { justify-self: start; }
.cl-portada-nuevo-t { font-weight: var(--p-medio); font-size: 1.14rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-portada-nuevo-m { font-size: .85rem; color: rgb(255 255 255 / .72); }
/* En el móvil la foto va arriba y entera, no de fondo: de fondo en vertical
   se veía un trozo de cielo y medio Alberto. El texto sigue debajo, en oscuro. */
@media (max-width: 900px) {
	.cl-portada { display: block; min-height: 0; background: #0b0b0e; }
	.cl-portada-img { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; object-position: 50% 62%; z-index: 0; animation: none; } /* El acercamiento sacaba la foto por debajo del degradado. */
	.cl-portada::after { inset: 0 0 auto 0; height: 75vw; z-index: 0; background: linear-gradient(0deg, #0b0b0e 0%, rgb(11 11 14 / 0) 40%); }
	.cl-portada-in { position: relative; z-index: 1; flex-direction: column; align-items: stretch; margin-top: -2.5rem; padding-top: 0; }
	.cl-portada-nuevo { width: auto; }
}
/* En el movil el ultimo video se APILA. De lado, la miniatura se come el
   ancho de la tarjeta y al titulo le quedaban 91px medidos a 375 —tres
   palabras y puntos suspensivos—. Apilado, el titulo tiene los 309px
   enteros y se lee casi completo. */
@media (max-width: 560px) {
	.cl-portada-nuevo { display: grid; grid-template-columns: 1fr; gap: .8rem; }
	.cl-portada-nuevo-img { width: 100%; }
}

/* ——— Secciones ——— */

.cl-sec { padding-block: clamp(3.5rem, 7vw, 6rem); }
/* Dos secciones blancas seguidas comparten el hueco (si no, se suman dos y
   queda el doble). Pero después de una gris, la blanca necesita su hueco
   entero: antes la regla de arriba ganaba también ahí, por pesar más, y las
   cifras quedaban pegadas al bloque del podcast. */
.cl-sec:not(.cl-sec-alt) + .cl-sec:not(.cl-sec-alt) { padding-top: 0; }
.cl-sec-alt { background: var(--c-fondo-2); }
.cl-sec-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.cl-sec-t { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin: 0; }
@media (max-width: 640px) {
	.cl-sec-cab { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
.cl-vacio { padding: 3rem; text-align: center; color: var(--c-texto-2); border: 1px dashed var(--c-linea); border-radius: var(--radio); }
.cl-aviso-admin { max-width: 46rem; margin: 2rem auto; padding: 1rem 1.25rem; border-radius: var(--radio-s); background: #fff7e0; color: #6b4b00; border: 1px solid #f0d58a; font-size: .95rem; }

/* ——— Rejillas y tarjetas de vídeo (como YouTube) ——— */

.cl-rejilla { display: grid; gap: 2.25rem 1.25rem; }
.cl-rejilla-v { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-rejilla-ep { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.25rem; }
@media (max-width: 1000px) { .cl-rejilla-v { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-rejilla-ep { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cl-rejilla-v { grid-template-columns: 1fr; gap: 1.75rem; } .cl-rejilla-ep { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cl-vid-a { display: grid; gap: .8rem; color: inherit; text-decoration: none; }
.cl-vid-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: var(--c-fondo-2); }
.cl-vid-img img, .cl-img-vacia { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
/* NADA de agrandar la foto al pasar por encima. Es el gesto por defecto de
   cualquier tema de WordPress y aqui no significa nada: la miniatura de un
   video es informacion —se lee el titulo del rotulo— y agrandarla la recorta.
   Lo que se mueve es la TARJETA, que es lo que se va a pulsar.
   Y lo que marca cual estas mirando es un BORDE, no una sombra: con la
   sombra no se sabia —lo dijo Carlos—, porque una sombra suave sobre fondo
   claro casi no se ve. El borde va en un ::after con `inset` negativo, asi
   que rodea la tarjeta ENTERA —miniatura, titulo y cifras, que es lo que el
   marco en su captura— y no mueve nada de sitio. Con `outline` seria mas
   corto, pero `outline` es lo que usa el foco del teclado y una de las dos
   cosas se comeria a la otra. */
.cl-vid-a:hover .cl-vid-t { color: var(--c-rojo); }
.cl-vid-a, .cl-ep-a { position: relative; transition: transform var(--t); }
.cl-vid-a::after, .cl-ep-a::after { content: ''; position: absolute; inset: -8px; border: 1.5px solid transparent; border-radius: 20px; transition: border-color var(--t); pointer-events: none; }
.cl-vid-a:hover, .cl-ep-a:hover { transform: translateY(-4px); }
.cl-vid-a:hover::after, .cl-vid-a:focus-visible::after, .cl-ep-a:hover::after, .cl-ep-a:focus-visible::after { border-color: var(--c-rojo); }
.cl-vid-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); pointer-events: none; }
.cl-vid-dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 6px; background: rgb(0 0 0 / .8); color: #fff; font-size: .78rem; font-weight: var(--p-rotulo); font-variant-numeric: tabular-nums; line-height: 1.4; }
.cl-vid-pie { display: flex; gap: .75rem; align-items: flex-start; }
.cl-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; background: #fff; box-shadow: 0 0 0 1px var(--c-linea); }
.cl-vid-txt { display: grid; gap: .2rem; min-width: 0; }
.cl-vid-t { font-weight: var(--p-medio); font-size: 1.05rem; line-height: 1.3; color: var(--c-texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-vid-a:hover .cl-vid-t { color: var(--c-rojo); }
.cl-vid-canal, .cl-vid-m { font-size: .9rem; color: var(--c-texto-2); line-height: 1.35; }

/* Las filas compactas de la columna lateral. */
.cl-fila { display: flex; gap: .8rem; align-items: flex-start; padding: .5rem; margin-inline: -.5rem; border-radius: var(--radio-s); color: inherit; text-decoration: none; transition: background-color var(--t), transform var(--t); }
.cl-fila:hover { background: var(--c-hover); transform: translateX(4px); }
.cl-fila:hover .cl-fila-t { color: var(--c-rojo); }
.cl-fila-img { position: relative; flex: none; border-radius: var(--radio-s); overflow: hidden; background: var(--c-fondo-2); }
.cl-fila-img img { width: 100%; height: 100%; object-fit: cover; }
.cl-fila-img-v { width: 168px; aspect-ratio: 16 / 9; }
.cl-fila-img-c { width: 72px; aspect-ratio: 1; }
.cl-fila-img .cl-vid-dur { right: 4px; bottom: 4px; font-size: .7rem; }
.cl-fila-txt { display: grid; gap: .2rem; min-width: 0; }
.cl-fila-n { font-size: .75rem; font-weight: var(--p-rotulo); font-stretch: 112%; color: var(--c-rojo); letter-spacing: .04em; }
.cl-fila-t { font-weight: var(--p-medio); font-size: .95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-fila-m { font-size: .82rem; color: var(--c-texto-2); }

/* ——— Episodios ——— */

.cl-ep-a { display: grid; gap: .35rem; color: inherit; text-decoration: none; }
.cl-ep-img { position: relative; display: block; aspect-ratio: 1; border-radius: var(--radio); overflow: hidden; background: var(--c-fondo-2); margin-bottom: .45rem; box-shadow: var(--sombra); }
.cl-ep-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.cl-ep-a:hover .cl-ep-t { color: var(--c-rojo); }
.cl-ep-play { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 1rem; opacity: 0; transform: translateY(6px); transition: opacity var(--t), transform var(--t); box-shadow: 0 6px 18px -6px rgb(0 0 0 / .6); }
.cl-ep-a:hover .cl-ep-play, .cl-ep-a:focus-visible .cl-ep-play { opacity: 1; transform: none; }
@media (hover: none) { .cl-ep-play { opacity: 1; transform: none; } }
.cl-ep-num { font-size: .78rem; font-weight: var(--p-rotulo); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--c-rojo); margin: 0; }
.cl-ep-t { font-weight: var(--p-medio); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cl-ep-a:hover .cl-ep-t { color: var(--c-rojo); }
.cl-ep-m { font-size: .86rem; color: var(--c-texto-2); }

/* El bloque del podcast en el inicio. */
.cl-pod-in { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
/* El bloque del podcast no respondia casi nada al raton —lo dijo Carlos—:
   la tarjeta no se movia y la portada del episodio no decia que se pudiera
   pulsar. Ahora la tarjeta se levanta y tinta su borde, la portada saca su
   boton de play (el mismo gesto que las tarjetas del listado) y el titulo se
   pone en rojo desde cualquier punto de la tarjeta. Sin agrandar ninguna
   foto, por lo de siempre: la portada de un episodio es informacion. */
.cl-pod-dest { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.75rem; padding: 1.5rem; background: var(--c-tarjeta); border: 1px solid var(--c-linea); border-radius: 22px; box-shadow: var(--sombra);
	transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.cl-pod-dest:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: color-mix(in srgb, var(--c-rojo) 30%, var(--c-linea)); }
.cl-pod-dest:hover .cl-pod-t a { color: var(--c-rojo); }
.cl-pod-img { position: relative; display: block; aspect-ratio: 1; border-radius: var(--radio); overflow: hidden; }
.cl-pod-img img { width: 100%; height: 100%; object-fit: cover; }
.cl-pod-play { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 1.05rem; opacity: 0; transform: translateY(10px) scale(.92); transition: opacity var(--t), transform var(--t); box-shadow: 0 8px 20px -6px rgb(0 0 0 / .55); }
.cl-pod-dest:hover .cl-pod-play, .cl-pod-img:focus-visible .cl-pod-play { opacity: 1; transform: none; }
@media (hover: none) { .cl-pod-play { opacity: 1; transform: none; } }
.cl-pod-info { display: flex; flex-direction: column; min-width: 0; }
.cl-pod-t { font-size: clamp(1.3rem, 2vw, 1.65rem); margin: .4rem 0 .6rem; }
.cl-pod-t a { color: inherit; text-decoration: none; }
.cl-pod-t a:hover { color: var(--c-rojo); }
.cl-pod-p { color: var(--c-texto-2); font-size: .98rem; margin: 0 0 1.25rem; }
.cl-pod-info .cl-player { margin-top: auto; }
.cl-pod-lista { display: grid; gap: .25rem; }
.cl-lado-t { font-size: 1.15rem; font-weight: var(--p-fuerte); margin: 0 0 .75rem; }
.cl-escuchar { display: flex; flex-wrap: wrap; gap: .6rem; }
.cl-escuchar-pie { margin-top: 2rem; }
@media (max-width: 1000px) { .cl-pod-in { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .cl-pod-dest { grid-template-columns: 1fr; padding: 1rem; } .cl-pod-img { width: 100%; } }

/* ——— Reproductor ——— */

.cl-player { display: flex; align-items: center; gap: .9rem; padding: .7rem .8rem .7rem .7rem; border-radius: 99px; background: var(--c-fondo-2); border: 1px solid var(--c-linea); }
.cl-sec-alt .cl-pod-dest .cl-player { background: var(--c-fondo-2); }
.cl-pl-play { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--grad); color: #fff; font-size: 1.1rem; cursor: pointer; box-shadow: 0 6px 16px -6px rgb(196 20 31 / .8); transition: transform var(--t); }
.cl-pl-play:hover { transform: scale(1.05); }
.cl-pl-play .cl-i-play { margin-left: 2px; }
.cl-pl-play .cl-i-pausa, .cl-player.suena .cl-pl-play .cl-i-play { display: none; }
.cl-player.suena .cl-pl-play .cl-i-pausa { display: block; }
.cl-pl-centro { flex: 1; min-width: 0; display: grid; gap: .25rem; }
.cl-pl-t { font-size: .85rem; font-weight: var(--p-medio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-pl-barra { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0; border-radius: 99px; background: linear-gradient(90deg, var(--c-rojo-vivo) var(--p, 0%), var(--c-linea) var(--p, 0%)); cursor: pointer; }
.cl-pl-barra::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c-rojo-vivo); border: 2px solid var(--c-fondo); box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.cl-pl-barra::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--c-rojo-vivo); border: 2px solid var(--c-fondo); }
.cl-pl-tiempos { display: flex; justify-content: space-between; font-size: .75rem; color: var(--c-texto-2); font-variant-numeric: tabular-nums; }
.cl-pl-mandos { display: flex; align-items: center; gap: .15rem; }
.cl-pl-salto, .cl-pl-vel { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 .4rem; border: 0; border-radius: 99px; background: transparent; color: var(--c-texto); font: inherit; font-size: 1.25rem; cursor: pointer; }
.cl-pl-vel { font-size: .82rem; font-weight: var(--p-rotulo); font-variant-numeric: tabular-nums; }
.cl-pl-salto:hover, .cl-pl-vel:hover { background: var(--c-hover); }
@media (max-width: 480px) { .cl-pl-salto { display: none; } .cl-player { gap: .6rem; } }

/* ——— Cifras ——— */

.cl-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
/* El tope de ancho es por el grupo de UNA sola cifra: con auto-fit, un
   unico elemento se queda con la fila entera y 40 episodios ocupaban 1.300px.
   Con tres o cuatro por fila nunca llega al tope, asi que no cambia nada. */
.cl-cifras li { padding: 1.75rem 1.5rem; border-radius: 20px; background: var(--c-fondo-2); border: 1px solid var(--c-linea); display: grid; gap: .3rem; max-width: 30rem; }
.cl-cifra-n { font-size: clamp(2.4rem, 4.5vw, 3.4rem); font-weight: var(--p-display); font-stretch: 112%; line-height: 1; letter-spacing: -.03em; background: var(--g, var(--grad)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.cl-cifra-t { color: var(--c-texto-2); font-weight: var(--p-texto); }
/* CADA GRUPO DICE DE QUE PLATAFORMA ES. Antes habia cifras sueltas y nada
   que las explicara —«no se dice nada», dijo Carlos—: 22 mil seguidores
   ¿de donde?, 385 publicaciones ¿de que? Ahora cada tanda lleva su nombre
   con su icono, y el degradado del numero es el de su plataforma, que es
   la misma regla que ya seguian los reels. */
.cl-cifras-g + .cl-cifras-g { margin-top: 1.9rem; }
.cl-cifras-et { display: flex; align-items: center; gap: .5em; margin: 0 0 .75rem; font-size: .82rem; font-weight: var(--p-rotulo); font-stretch: 115%; letter-spacing: .12em; text-transform: uppercase; color: var(--c-texto-2); }
.cl-cifras-et .cl-ico { font-size: 1.3em; color: var(--c-marca, var(--c-rojo)); }
.cl-g-youtube { --g: var(--grad); --c-marca: #ff0000; }
.cl-g-instagram { --g: var(--grad-ig); --c-marca: #e1306c; }
.cl-g-tiktok { --g: linear-gradient(100deg, #25f4ee 0%, #fe2c55 100%); --c-marca: #fe2c55; }
.cl-g-podcast { --g: var(--grad); --c-marca: var(--c-rojo); }

/* ——— Redes ——— */

/* Tres por fila y no «las que quepan»: con cinco redes, cuatro por fila dejaban una sola abajo. */
.cl-redes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1000px) { .cl-redes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cl-redes { grid-template-columns: 1fr; } }
.cl-red { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; height: 100%; box-sizing: border-box; border-radius: 18px; border: 1px solid var(--c-linea); background: var(--c-tarjeta); color: var(--c-texto); text-decoration: none; transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
.cl-red:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: var(--sombra); color: var(--c-texto); }
.cl-red-ico { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); font-size: 1.6rem; }
.cl-red-txt { display: grid; gap: .1rem; flex: 1; min-width: 0; font-size: .9rem; color: var(--c-texto-2); line-height: 1.35; }
.cl-red-txt strong { color: var(--c-texto); font-size: 1.05rem; }
.cl-red-n { color: var(--c-texto); font-weight: var(--p-rotulo); font-variant-numeric: tabular-nums; }
.cl-red-fl { color: var(--c-texto-2); font-size: 1.1rem; transition: transform var(--t), color var(--t); }
.cl-red:hover .cl-red-fl { transform: translateX(3px); color: var(--red); }

/* ——— Cars Club ——— */

/* La caja responde al raton: mas sombra, el halo rojo crece y la C del
   fondo se asoma. Nada de eso mueve una linea de sitio —solo sombra,
   escala y opacidad—, asi que no hay salto al entrar ni al salir. */
.cl-club { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: clamp(2rem, 5vw, 4rem); color: #fff; background: radial-gradient(120% 140% at 100% 0%, #3b0a10 0%, #16080b 45%, #0b0b0e 100%);
	box-shadow: 0 2px 6px rgb(0 0 0 / .14), 0 22px 44px -28px rgb(0 0 0 / .5); transition: box-shadow var(--t-l); }
.cl-club:hover { box-shadow: 0 2px 8px rgb(0 0 0 / .2), 0 32px 58px -28px rgb(140 12 20 / .5); }
.cl-club::before { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgb(242 40 53 / .55), transparent 65%); z-index: -1; transition: transform var(--t-l); }
.cl-club:hover::before { transform: scale(1.16); }
.cl-club-c { position: absolute; right: clamp(-40px, 2vw, 40px); bottom: -40px; width: clamp(180px, 26vw, 340px); aspect-ratio: 600 / 442; background: url(../img/c-blanca.png) center / contain no-repeat; opacity: .1; z-index: -1; transform: rotate(-8deg); transition: opacity var(--t-l), transform var(--t-l); }
.cl-club:hover .cl-club-c { opacity: .17; transform: rotate(-8deg) translate(-12px, -6px); }
.cl-club-txt { max-width: 38rem; }
.cl-club h2 { color: #fff; font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin: 0 0 .75rem; }
.cl-club p { color: rgb(255 255 255 / .8); font-size: 1.1rem; }
.cl-club-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
/* «Entrar en Cars Club» se rellena del azul de Discord: el color dice a
   donde lleva antes de leer el rotulo. */
.cl-club .cl-btn-blanco { --cl-relleno: #5865f2; }
.cl-club .cl-btn-blanco:hover { color: #fff; }
.cl-club .cl-btn-blanco:hover .cl-ico { animation: cl-tilin .55s var(--curva); }

/* ——— Marcas (máscara: el logo toma el color del texto, en claro y en oscuro) ——— */

/* En filas centradas y no en rejilla: con once marcas, una rejilla deja tres sueltas a la izquierda. */
.cl-marcas { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.cl-marcas li { display: grid; place-items: center; height: 104px; flex: 0 0 calc((100% - 5rem) / 6);
	box-sizing: border-box; border-radius: 18px; background: var(--c-fondo-2); border: 1px solid var(--c-linea); transition: border-color var(--t); }
.cl-marcas li:hover { border-color: var(--c-texto-2); }
.cl-marca { display: block; width: 62%; height: 46%; background: var(--c-texto); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; opacity: .82; transition: opacity var(--t), background-color var(--t); }
.cl-marcas li:hover .cl-marca { opacity: 1; background: var(--c-rojo); }

.cl-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.75rem, 4vw, 3rem); border-radius: 24px; background: var(--c-fondo-2); border: 1px solid var(--c-linea); }
.cl-cta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .4rem; }
.cl-cta p:last-child { color: var(--c-texto-2); margin: 0; max-width: 36rem; }
@media (max-width: 760px) { .cl-cta { flex-direction: column; align-items: flex-start; } }

/* ——— Páginas ——— */

.cl-pagina { padding-bottom: clamp(3rem, 6vw, 5rem); }
.cl-pag-cab { padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(1.75rem, 3vw, 2.5rem); }
.cl-pag-cab h1 { font-size: clamp(2.5rem, 5.5vw, 4.4rem); font-weight: var(--p-display); font-stretch: 112%; letter-spacing: -.035em; line-height: 1; margin: 0 0 1rem; }
.cl-pag-cab-centro { text-align: center; }
.cl-pag-cab-centro .cl-entradilla { margin-inline: auto; }
.cl-pag-acc { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.5rem; }
.cl-pag-cab-centro .cl-boton-p { display: flex; justify-content: center; }
/* Aire alrededor de la foto de una pagina. Estaba a 28px de la cabecera y a
   32 del texto, asi que cabecera, foto y primer parrafo se leian como un
   unico bloque apelmazado: lo que Carlos vio como «falta margen». */
.cl-foto { margin: clamp(1rem, 2vw, 1.5rem) auto clamp(2.75rem, 5vw, 4.5rem); max-width: calc(var(--env) + 2 * var(--gutter)); padding-inline: var(--gutter); box-sizing: border-box; }
.cl-foto img { width: 100%; border-radius: 24px; box-shadow: var(--sombra-alta); }
.cl-prosa { padding-inline: var(--gutter); }
.cl-prosa h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin: 3rem 0 .85rem; }
.cl-prosa > *:first-child { margin-top: 0; }
.cl-prosa li { margin-bottom: .5rem; }
.cl-prosa li::marker { color: var(--c-rojo); font-weight: 700; }
.cl-pagina .wp-block-post-content > .cl-sec:first-of-type, .cl-prosa + .cl-sec { padding-top: clamp(4rem, 7vw, 6rem); }
.cl-lista-canales { list-style: none; padding: 0; display: grid; gap: .5rem; }
.cl-lista-canales li { padding: .9rem 1.1rem; border-radius: var(--radio-s); background: var(--c-fondo-2); border: 1px solid var(--c-linea); margin: 0; }
.cl-lista-canales strong { color: var(--c-rojo); }
.cl-legal { padding-top: clamp(2.5rem, 5vw, 4rem); }
.cl-legal h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
.cl-titular { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--radio); background: var(--c-fondo-2); border: 1px solid var(--c-linea); margin: 1.25rem 0; }
.cl-titular dt { font-weight: var(--p-rotulo); }
.cl-titular dd { margin: 0; }
.cl-tabla table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cl-tabla th, .cl-tabla td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--c-linea); vertical-align: top; }
.cl-tabla th { font-weight: var(--p-rotulo); }
@media (max-width: 640px) { .cl-titular { grid-template-columns: 1fr; } .cl-tabla { overflow-x: auto; } }

/* ——— Listados ——— */

.cl-listado { padding-bottom: clamp(3rem, 6vw, 5rem); }
.cl-buscar { position: relative; display: flex; align-items: center; flex: 1; min-width: 220px; max-width: 420px; }
.cl-buscar .cl-ico { position: absolute; left: 1rem; color: var(--c-texto-2); pointer-events: none; }
.cl-buscar input { width: 100%; font: inherit; font-size: .95rem; padding: .78em 1em .78em 2.6em; border-radius: 99px; border: 1.5px solid var(--c-linea); background: var(--c-tarjeta); color: var(--c-texto); }
.cl-buscar input:focus { outline: none; border-color: var(--c-rojo-vivo); }
.cl-mas { display: flex; justify-content: center; margin-top: 3rem; }
.cl-mas .cl-btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ——— Ficha de un vídeo ——— */

.cl-ficha-v { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 2rem; padding-block: 1.5rem clamp(3rem, 6vw, 5rem); }
.cl-yt { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: var(--sombra-alta); }
.cl-yt-btn { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.cl-yt-img, .cl-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.cl-yt-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 2rem; box-shadow: 0 12px 30px -8px rgb(0 0 0 / .6); transition: transform var(--t); }
.cl-yt-play .cl-ico { margin-left: 4px; }
.cl-yt-btn:hover .cl-yt-play { transform: scale(1.08); }
.cl-yt-play-s { width: 38px; height: 38px; font-size: .9rem; }
.cl-fv-t { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 1.1rem 0 .9rem; letter-spacing: -.015em; }
.cl-fv-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.cl-fv-canal { display: flex; align-items: center; gap: .75rem; }
.cl-fv-canal .cl-avatar { width: 40px; height: 40px; }
.cl-fv-canal > span { display: grid; line-height: 1.25; font-size: .85rem; color: var(--c-texto-2); }
.cl-fv-canal strong { color: var(--c-texto); font-size: 1rem; }
.cl-fv-canal .cl-btn { margin-left: .5rem; }
.cl-desc { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--radio); background: var(--c-fondo-2); font-size: .97rem; }
.cl-desc-m { font-weight: var(--p-rotulo); margin: 0 0 .5rem; }
.cl-desc-txt { overflow-wrap: anywhere; }
.cl-desc-txt p { margin: 0 0 .9em; }
.cl-desc.plegada .cl-desc-txt { max-height: 9.5em; overflow: hidden; -webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent); }
.cl-desc-mas { background: none; border: 0; padding: 0; font: inherit; font-weight: var(--p-rotulo); color: var(--c-texto); cursor: pointer; }
.cl-fv-lado { min-width: 0; }
@media (max-width: 1100px) { .cl-ficha-v { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .cl-ficha-v { padding-top: 0; } .cl-ficha-v .cl-yt { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; } .cl-fila-img-v { width: 140px; } }

/* ——— Ficha de un episodio ——— */

.cl-ficha-e { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
.cl-fe-cab { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cl-fe-img { border-radius: 22px; overflow: hidden; box-shadow: var(--sombra-alta); aspect-ratio: 1; }
.cl-fe-img img { width: 100%; height: 100%; object-fit: cover; }
.cl-fe-t { font-size: clamp(1.8rem, 3.6vw, 2.9rem); margin: 0 0 .6rem; }
.cl-fe-m { color: var(--c-texto-2); margin: 0 0 1.5rem; }
.cl-fe-info .cl-player { margin-bottom: 1.25rem; max-width: 640px; }
.cl-fe-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(2rem, 5vw, 4rem); }
.cl-fe-texto .cl-lado-t:not(:first-child) { margin-top: 2.5rem; }
.cl-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.cl-cap { display: flex; gap: 1rem; width: 100%; padding: .55rem .75rem; border: 0; border-radius: var(--radio-s); background: transparent; color: var(--c-texto); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--t); }
.cl-cap:hover { background: var(--c-hover); }
.cl-cap-t { flex: none; min-width: 4.2em; font-weight: var(--p-rotulo); color: var(--c-rojo); font-variant-numeric: tabular-nums; }
.cl-cap.actual { background: var(--c-fondo-2); }
.cl-cap.actual .cl-cap-t::before { content: "▶ "; font-size: .7em; }
@media (max-width: 1000px) { .cl-fe-cuerpo { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .cl-fe-cab { grid-template-columns: 1fr; } .cl-fe-img { width: min(320px, 80%); } }

/* ——— Pie ——— */

.cl-pie { margin-top: 0; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; background: var(--c-fondo-2); border-top: 1px solid var(--c-linea); font-size: .95rem; }
.cl-pie-arriba { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.cl-pie-marca p { color: var(--c-texto-2); max-width: 26rem; margin: 1rem 0 1.25rem; }
.cl-logo-pie { height: 22px; }
.cl-pie-t { font-weight: var(--p-rotulo); margin: 0 0 .8rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-stretch: 112%; }
.cl-pie-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cl-pie-col a, .cl-pie-col .cl-enlace { color: var(--c-texto-2); text-decoration: none; }
.cl-pie-col a:hover, .cl-pie-col .cl-enlace:hover { color: var(--c-texto); text-decoration: underline; }
.cl-pie-abajo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--c-linea); color: var(--c-texto-2); font-size: .88rem; }
.cl-pie-abajo p { margin: 0; }
.cl-pie-abajo a { color: inherit; }
/* El subrayado crece de izquierda a derecha, como en Magnolia. Va en un
   ::after y no en text-decoration porque eso no se puede animar: aparece de
   golpe o no aparece. Y con transform y no con width, que es lo unico que el
   navegador anima sin rehacer el diseno en cada fotograma. */
.cl-pie a, .cl-pie-abajo a { position: relative; text-decoration: none; }
.cl-pie a::after, .cl-pie-abajo a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
	height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left;
	transition: transform var(--t); }
.cl-pie a:hover::after, .cl-pie-abajo a:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
	.cl-pie a::after, .cl-pie-abajo a::after { transition: none; }
}
@media (max-width: 900px) { .cl-pie-arriba { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-pie-marca { grid-column: 1 / -1; } }
@media (max-width: 480px) { .cl-pie-arriba { grid-template-columns: 1fr; } }

/* ——— Aviso de cookies, con su galleta ——— */

.cl-galletas {
	position: fixed; left: 16px; bottom: 16px; z-index: 100; display: flex; gap: 1rem; align-items: flex-start;
	width: min(420px, calc(100vw - 32px)); box-sizing: border-box; padding: 1.1rem 1.2rem;
	border-radius: 22px; background: var(--c-tarjeta); color: var(--c-texto); border: 1px solid var(--c-linea); box-shadow: var(--sombra-alta);
	animation: cl-galletas-entra .55s cubic-bezier(.2, .9, .3, 1.25) both;
}
.cl-galletas[hidden] { display: none; }
@keyframes cl-galletas-entra { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
.cl-galleta { flex: none; width: 58px; height: 58px; animation: cl-galleta-baila 3.2s ease-in-out .8s infinite; transform-origin: 50% 60%; }
@keyframes cl-galleta-baila { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-12deg); } 86% { transform: rotate(9deg); } 93% { transform: rotate(-4deg); } }
.cl-g-masa { fill: #e6a356; }
.cl-g-borde { stroke: #b06f2a; stroke-width: 2.5; stroke-linejoin: round; }
.cl-g-pepitas { fill: #5a3214; }
.cl-g-migas { fill: #d9944a; }
.cl-galletas-txt p { margin: 0 0 .75rem; font-size: .9rem; line-height: 1.45; color: var(--c-texto-2); }
.cl-galletas-txt .cl-galletas-t { font-size: 1.15rem; font-weight: var(--p-fuerte); color: var(--c-texto); margin-bottom: .3rem; }
.cl-galletas-txt a { color: var(--c-texto); }
.cl-galletas-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.cl-galletas-btns .cl-btn { flex: 1; }
.cl-galletas.sale { animation: cl-galletas-sale .3s ease-in both; }
@keyframes cl-galletas-sale { to { opacity: 0; transform: translateY(20px) scale(.96); } }

/* ——— Movimiento reducido: nada se mueve si así lo pide el sistema ——— */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ——— En el editor de bloques ——— */
.editor-styles-wrapper .cl-parte-cab { position: static; }
@media (max-width: 1000px) { .cl-marcas li { flex-basis: calc((100% - 3rem) / 4); } }
@media (max-width: 640px) { .cl-marcas li { flex-basis: calc((100% - 1rem) / 2); height: 88px; } }

/* ——— Reels: una tira que se desliza. Arranca alineada con el contenido y se sale por la derecha hasta el borde ——— */

.cl-carril { position: relative; }
.cl-reels {
	--borde: max(var(--gutter), calc((100vw - var(--env)) / 2));
	display: grid; grid-auto-flow: column; grid-auto-columns: clamp(165px, 18vw, 232px); gap: 14px;
	list-style: none; margin: 0; padding: 4px var(--borde) 18px;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--borde);
	scrollbar-width: none;
}
.cl-reels::-webkit-scrollbar { display: none; }
.cl-reels li { scroll-snap-align: start; }
.cl-reel { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: var(--c-fondo-2); color: #fff; text-decoration: none; box-shadow: var(--sombra); isolation: isolate; }
.cl-reel-img, .cl-reel-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-reel-img img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.cl-reel:hover .cl-reel-img { box-shadow: 0 12px 30px -12px rgb(0 0 0 / .6); }
.cl-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / 0) 45%); z-index: 0; }
.cl-reel-play { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgb(0 0 0 / .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: .8rem; }
.cl-reel-play .cl-ico { margin-left: 2px; }
.cl-reel-pie { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: grid; gap: .3rem; }
.cl-reel-mg { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: var(--p-rotulo); }
.cl-reel-mg .cl-ico { color: #ff3b5c; }
.cl-reel-t { font-size: .85rem; font-weight: var(--p-texto); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cl-carril-btn {
	position: absolute; top: calc(50% - 9px); z-index: 2; translate: 0 -50%;
	display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid var(--c-linea); background: var(--c-tarjeta); color: var(--c-texto); font-size: 1.2rem;
	box-shadow: var(--sombra); cursor: pointer; transition: opacity var(--t), background-color var(--t);
}
.cl-carril-btn:hover { background: var(--c-hover); }
.cl-carril-btn:disabled { opacity: 0; pointer-events: none; }
.cl-carril-ant { left: max(8px, calc((100vw - var(--env)) / 2 - 23px)); }
.cl-carril-ant .cl-ico { transform: rotate(180deg); }
.cl-carril-sig { right: max(8px, calc((100vw - var(--env)) / 2 - 23px)); }
@media (hover: none) { .cl-carril-btn { display: none; } }

/* ——— Reproductor de reels: a pantalla completa y en vertical, como una historia ——— */

.cl-rp { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.cl-rp[hidden] { display: none; }
.cl-rp-fondo { position: absolute; inset: 0; background: rgb(5 5 7 / .93); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: cl-rp-entra .25s ease both; }
@keyframes cl-rp-entra { from { opacity: 0; } }
.cl-rp-escena { position: relative; height: min(92vh, calc(92vw * 16 / 9)); aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #000; color: #fff; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .8); animation: cl-rp-sube .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cl-rp-sube { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.cl-rp-escena video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; cursor: pointer; }
.cl-rp-prog { position: absolute; top: 12px; left: 14px; right: 14px; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .3); z-index: 2; overflow: hidden; }
.cl-rp-prog i { display: block; height: 100%; width: var(--p, 0%); background: #fff; }
.cl-rp-sonido { position: absolute; top: 26px; right: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgb(0 0 0 / .4); color: #fff; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cl-rp-sonido svg { width: 20px; height: 20px; }
.cl-rp-sonido .cl-rp-mudo, .cl-rp.mudo .cl-rp-sonido .cl-rp-con { display: none; }
.cl-rp.mudo .cl-rp-sonido .cl-rp-mudo { display: block; }
.cl-rp-pausa { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgb(0 0 0 / .45); opacity: 0; transition: opacity var(--t); pointer-events: none; }
.cl-rp-pausa svg { width: 30px; height: 30px; margin-left: 4px; }
.cl-rp.pausado .cl-rp-pausa { opacity: 1; }
.cl-rp-pie { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: .55rem; padding: 4rem 1rem 1rem; background: linear-gradient(0deg, rgb(0 0 0 / .85) 0%, rgb(0 0 0 / 0) 100%); pointer-events: none; }
.cl-rp-pie > * { pointer-events: auto; }
.cl-rp-mg { display: inline-flex; align-items: center; gap: .35rem; font-weight: var(--p-rotulo); font-size: .9rem; }
.cl-rp-mg:empty { display: none; }
.cl-rp-mg svg { width: 16px; height: 16px; color: #ff3b5c; }
.cl-rp-t { margin: 0; font-size: .92rem; line-height: 1.4; color: rgb(255 255 255 / .92); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; white-space: pre-line; }
.cl-rp-t.abierto { -webkit-line-clamp: 14; overflow-y: auto; max-height: 40vh; }
.cl-rp-pie .cl-btn { justify-self: start; }
.cl-rp-aviso { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 2rem; text-align: center; background: rgb(0 0 0 / .75); }
.cl-rp-aviso[hidden] { display: none; }
.cl-rp-x, .cl-rp-nav { position: fixed; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; transition: background-color var(--t); }
.cl-rp-x:hover, .cl-rp-nav:hover { background: rgb(255 255 255 / .24); }
.cl-rp-x svg, .cl-rp-nav svg { width: 22px; height: 22px; }
.cl-rp-x { top: 16px; right: 16px; }
.cl-rp-nav { top: 50%; translate: 0 -50%; }
.cl-rp-ant { left: max(16px, calc(50% - min(26vh, 26vw) - 90px)); }
.cl-rp-sig { right: max(16px, calc(50% - min(26vh, 26vw) - 90px)); }
.cl-rp-ant svg { transform: rotate(180deg); }
.cl-rp-nav:disabled { opacity: 0; pointer-events: none; }
@media (hover: none), (max-width: 640px) { .cl-rp-nav { display: none; } }
@media (max-width: 640px) {
	.cl-rp-escena { width: 100vw; height: 100dvh; aspect-ratio: auto; border-radius: 0; }
	.cl-rp-x { top: 22px; right: 60px; background: rgb(0 0 0 / .4); width: 40px; height: 40px; }
}