/*
 * v4.css — ajustes finales de plantillas y componentes del rediseño v4.
 *
 * Cuarta y última hoja del tema: reúne reglas SCOPED que no son globales y que
 * se comparten entre varias vistas. No crea una hoja por plantilla.
 *
 * No contiene colores literales: usa exclusivamente los tokens de main.css para
 * conservar oscuro/claro y evitar otra paleta paralela.
 */

/* SINGLE NOTICIA */
.cf-single--v4 .cf-articulo__encabezado{max-width:920px;margin-inline:auto}
.cf-single--v4 .cf-articulo__titulo{text-wrap:balance}
.cf-single--v4 .cf-articulo__bajada{max-width:820px}
.cf-single--v4 .cf-articulo__byline{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--cf-borde)}
/* 🔴 EL AVATAR LLEVA INICIALES, NO UNA FOTO — 03-sep-2026.
   La regla estaba escrita para una <img> (`.cf-articulo__avatar-img`), pero el
   PHP mete TEXTO («CF»): sin centrarlo ni darle tamaño, las letras caían arriba
   a la izquierda y `overflow:hidden` se las comía a medias. Lo vio Mario.
   Este sitio no tiene autores con foto —la firma es editorial—, así que las
   iniciales son el caso normal, no la excepción. */
.cf-single--v4 .cf-articulo__avatar{flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--cf-superficie-2);border:1px solid var(--cf-borde);display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:800;letter-spacing:.02em;color:var(--cf-texto-suave);line-height:1}
.cf-single--v4 .cf-articulo__avatar-img{display:block;width:100%;height:100%;object-fit:cover}
.cf-single--v4 .cf-articulo__byline-texto{min-width:0;display:grid;gap:5px}
.cf-single--v4 .cf-articulo__firma{font-weight:750;font-size:.94rem;line-height:1.2;color:var(--cf-texto)}
/* ⚠️ HAY QUE ANULAR EL BORDE, NO SOLO EL MARGEN — 03-sep-2026.
   El elemento lleva DOS clases (`cf-articulo__creditos` + `--v4`) y la primera,
   en `main.css`, trae `border-top` + `padding-top` del diseño anterior, donde
   los créditos iban solos bajo el artículo con una línea encima. En v4 van
   DENTRO del byline, que ya tiene su propia línea: salía una segunda raya
   corta dentro de la columna de texto, sin nada encima, que no se entendía.
   El reset original ponía `margin:0` y se olvidaba del borde. */
.cf-single--v4 .cf-articulo__creditos--v4{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;margin:0;border-top:0;padding-top:0;font-size:.78rem;color:var(--cf-texto-tenue)}
.cf-single--v4 .cf-articulo__portada{border-radius:16px;overflow:hidden}
/* Misma regla que en main.css: se limita el alto, no se fuerza la proporción. Ver allí. */
.cf-single--v4 .cf-articulo__portada img{display:block;margin-inline:auto;width:auto;max-width:100%;height:auto;max-height:70vh}
.cf-single--v4 .cf-articulo__portada figcaption{padding:8px 2px 0;font-size:.72rem;line-height:1.45;color:var(--cf-texto-tenue)}
.cf-single--v4 .cf-articulo__etiquetas--chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;padding-top:20px;border-top:1px solid var(--cf-borde)}
.cf-single--v4 .cf-articulo__chip{display:inline-flex;align-items:center;min-height:34px;padding:7px 11px;border:1px solid var(--cf-borde);border-radius:999px;background:var(--cf-superficie);color:var(--cf-texto-suave);font-size:.78rem;font-weight:700;line-height:1;text-decoration:none;transition:border-color .16s ease,color .16s ease,background .16s ease}
.cf-single--v4 .cf-articulo__chip:hover,.cf-single--v4 .cf-articulo__chip:focus-visible{border-color:var(--cf-acento);color:var(--cf-texto);background:var(--cf-superficie-2)}
.cf-single--v4 .cf-articulo-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:40px 0 50px}
.cf-single--v4 .cf-articulo-nav__item{display:grid;align-content:start;gap:7px;min-height:116px;padding:17px 18px;border:1px solid var(--cf-borde);border-radius:12px;background:var(--cf-superficie);color:var(--cf-texto);text-decoration:none;transition:border-color .16s ease,transform .16s ease,background .16s ease}
.cf-single--v4 .cf-articulo-nav__item:hover,.cf-single--v4 .cf-articulo-nav__item:focus-visible{border-color:var(--cf-borde-fuerte);background:var(--cf-superficie-2);transform:translateY(-1px)}
.cf-single--v4 .cf-articulo-nav__item--next{text-align:right}
.cf-single--v4 .cf-articulo-nav__direccion,.cf-single--v4 .cf-recirculacion__ojo{font-size:.69rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--cf-brasa)}
.cf-single--v4 .cf-articulo-nav__item strong{font-size:.92rem;line-height:1.35}
.cf-single--v4 .cf-recirculacion{margin-top:48px;padding-top:24px;border-top:1px solid var(--cf-divisor-seccion)}
.cf-single--v4 .cf-recirculacion .cf-seccion__titulo{align-items:end;gap:16px}
.cf-single--v4 .cf-recirculacion .cf-seccion__titulo h2{margin:5px 0 0}
.cf-single--v4 .cf-rejilla--relacionados{margin-top:20px}

/* AGENDA CONTEXTUAL */
.cf-agenda{margin-top:26px;padding:16px;border:1px solid var(--cf-borde);border-radius:16px;background:var(--cf-superficie)}
/* EN LA PORTADA LA AGENDA NO ABRE HUECO ARRIBA Y CIERRA COMO UN BLOQUE MÁS (Mario, 05-sep-2026).
   Los 26px de arriba existen para la agenda CONTEXTUAL —la de /musica/, que cuelga del contenido
   de la sección—; en el home las 4 franjas van pegadas a la cabecera de su bloque y ese hueco se
   suma al margen del bloque anterior. Acotado con `.home` y a 0,2,0: la media query móvil de esta
   misma hoja vuelve a declarar `.cf-agenda` (margin-inline y padding) y no debe poder pisarlo. */
.home .cf-agenda{margin-top:0;margin-bottom:3rem}
.cf-agenda__cabecera{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.cf-agenda__cabecera strong{font-size:.8rem;font-weight:850;letter-spacing:.055em;text-transform:uppercase;color:var(--cf-texto)}
.cf-agenda__enlace{font-size:.76rem;font-weight:750;white-space:nowrap;color:var(--cf-brasa);text-decoration:none}
.cf-agenda-riel{position:relative}
.cf-agenda-riel__pista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cf-agenda-evento{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;min-height:112px;padding:14px;border:1px solid var(--cf-borde);border-radius:12px;background:var(--cf-fondo);color:var(--cf-texto);text-decoration:none;overflow:hidden;transition:border-color .16s ease,transform .16s ease}
.cf-agenda-evento:hover,.cf-agenda-evento:focus-visible{border-color:var(--cf-borde-fuerte);transform:translateY(-1px)}
.cf-agenda-evento:has(.cf-agenda-evento__media){grid-template-columns:1fr;align-items:end;min-height:238px;padding:0}
.cf-agenda-evento__media{position:absolute;inset:0;z-index:0}
.cf-agenda-evento__media img{display:block;width:100%;height:100%;object-fit:cover}
.cf-agenda-evento__media::after{content:"";position:absolute;inset:26% 0 0;background:var(--cf-velo-degradado)}
.cf-agenda-evento__contenido{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:11px;padding:15px}
.cf-agenda-evento__fecha{display:grid;place-items:center;align-content:center;min-width:48px;min-height:48px;padding:6px;border:1px solid var(--cf-brasa);border-radius:9px;color:var(--cf-brasa);font-size:.68rem;font-weight:850;line-height:1.05;text-align:center;text-transform:uppercase;background:var(--cf-velo-fuerte)}
.cf-agenda-evento h4{margin:0;font-size:.91rem;line-height:1.24;text-wrap:balance}
.cf-agenda-evento small{display:block;margin-top:6px;color:var(--cf-texto-suave);font-size:.72rem;line-height:1.25}
.cf-agenda-evento:has(.cf-agenda-evento__media) h4,.cf-agenda-evento:has(.cf-agenda-evento__media) small{color:var(--cf-sobre-oscuro)}
.cf-agenda-riel__flecha{display:none}

/* HOME · RECINTOS DESTACADOS */
.cf-recintos-feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px;min-height:520px}
.cf-recintos-feature__principal,.cf-recintos-feature__compacto{position:relative;display:block;min-width:0;border:1px solid var(--cf-borde);border-radius:15px;overflow:hidden;background:var(--cf-superficie);color:var(--cf-sobre-oscuro);text-decoration:none;isolation:isolate;transition:border-color .16s ease,transform .16s ease}
.cf-recintos-feature__principal:hover,.cf-recintos-feature__principal:focus-visible,.cf-recintos-feature__compacto:hover,.cf-recintos-feature__compacto:focus-visible{border-color:var(--cf-borde-fuerte);transform:translateY(-1px)}
.cf-recintos-feature__foto,.cf-recintos-feature__foto-chica{position:absolute;inset:0;z-index:-2;display:block}
.cf-recintos-feature__foto img,.cf-recintos-feature__foto-chica img{display:block;width:100%;height:100%;object-fit:cover}
.cf-recintos-feature__principal::after,.cf-recintos-feature__compacto::after{content:"";position:absolute;inset:22% 0 0;z-index:-1;background:var(--cf-velo-degradado);pointer-events:none}
.cf-recintos-feature__principal{display:flex;align-items:end;min-height:520px}
.cf-recintos-feature__copia{display:grid;width:100%;padding:26px 24px 22px;background:transparent;align-self:end;gap:0;line-height:1em}
.cf-recintos-feature__etiqueta{font-size:.64rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--cf-brasa)}
.cf-recintos-feature__nombre{font-size:clamp(1.45rem,2.3vw,2.25rem);font-weight:850;line-height:1.05;text-wrap:balance}
.cf-recintos-feature__bajada,.cf-recintos-feature__cuenta{font-size:.76rem;color:var(--cf-claro-80)}
.cf-recintos-feature__chip{justify-self:start;display:inline-flex;align-items:center;gap:7px;margin-top:5px;padding:7px 9px;border:1px solid var(--cf-claro-30);border-radius:999px;background:var(--cf-velo);color:var(--cf-sobre-oscuro);font-size:.7rem;font-weight:750}
.cf-recintos-feature__chip svg{width:13px;height:13px;fill:currentColor}
.cf-recintos-feature__riel{position:relative;min-width:0}
.cf-recintos-feature__lado{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;height:100%}
.cf-recintos-feature__compacto{display:flex;flex-direction:column;justify-content:end;min-height:0;padding:18px 17px 16px}
.cf-recintos-feature__compacto:nth-child(1),.cf-recintos-feature__compacto:nth-child(2){grid-column:span 3}
.cf-recintos-feature__compacto:nth-child(n+3){grid-column:span 3}
.cf-recintos-feature__nombre-chico{display:block;margin-top:5px;font-size:1rem;font-weight:800;line-height:1.18;text-wrap:balance}
.cf-recintos-feature__flecha{display:none}

/* DIRECTORIO DE RECINTOS */
.cf-recintos-directorio-listado{margin-top:18px}
/* El H2 que dice la selección: informa, no compite con el H1. */
.cf-recintos-directorio-listado__titulo{
	margin:0 0 var(--cf-espacio);font-size:1rem;font-weight:700;
	color:var(--cf-texto-suave);text-transform:uppercase;letter-spacing:.06em
}

/* ── El directorio de recintos: dos vistas, y una rejilla propia ──────────────
 *
 * 🔴 CLASE PROPIA Y NO `.cme-grid` — Mario, 06-sep-2026: «añádele una clase nueva para que no
 * sobrescriba otros grid que contienen este mismo layout». Aquí la tarjeta tiene que poder ser
 * FILA o COLUMNA según lo que elija quien mira, y esas reglas colgando de `.cme-grid` habrían
 * llegado a la cartelera, a las fichas de recinto y a los relacionados del evento, que usan la
 * misma tarjeta y no tienen selector de vista.
 *
 * 📌 Las dos vistas no son componentes nuevos: son los dos estados que `.cme-card` ya tenía
 *    —columna en escritorio, fila bajo 768 px—, aquí desacoplados de la anchura y puestos a
 *    elección. Lo único que hace falta es fijar cada estado en TODAS las anchuras.
 */
/* Cortes pedidos por Mario el 06-sep-2026: 4 columnas desde 1101, y después 1100 / 800 / 450.
   ⚠️ De mayor a menor, que es lo que deja ganar al más restrictivo. */
.cf-recintos-rejilla{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.cf-recintos-rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.cf-recintos-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:450px){.cf-recintos-rejilla{grid-template-columns:1fr;gap:10px}}

/* Lista compacta: la tarjeta en fila, foto a la izquierda. Es el estado que `.cme-card` ya
   tiene bajo 768 px; aquí se fija para cualquier anchura. */
.cf-recintos-rejilla--lista .cme-card{flex-direction:row;align-items:stretch}
.cf-recintos-rejilla--lista .cme-card__img{padding-top:0;width:auto;flex:0 0 70px;min-height:inherit}
.cf-recintos-rejilla--lista .cme-card__cuerpo{padding:.5rem 1rem;gap:1em;align-items:center}
.cf-recintos-rejilla--lista .cme-card__titulo{font-size:.9rem;margin-bottom:5px;text-wrap:auto}
.cf-recintos-rejilla--lista .cme-datos{gap:2px 6px}
.cf-recintos-rejilla--lista .cme-datos span{font-size:11px;line-height:1.35}

/* ⚠️ Con imagen grande hay que DESHACER el estado de fila que `.cme-card` toma por su cuenta
   bajo 768 px, o en móvil esta vista sería idéntica a la otra y el interruptor no haría nada
   —justo donde más se nota—. */
.cf-recintos-rejilla--grid .cme-card{flex-direction:column;align-items:stretch}
.cf-recintos-rejilla--grid .cme-card__img{padding-top:62%;width:100%;flex:0 0 auto}
.cf-recintos-rejilla--grid .cme-card__cuerpo{padding:12px 13px 14px;gap:6px;align-items:flex-start}

/* ── A UNA COLUMNA, el texto va SOBRE la foto ────────────────────────────────
 *
 * 🔴 Pedido de Mario el 06-sep-2026 con una captura: «con un overlay sobre la imagen y el
 * caption encima, abajo». A ancho completo la foto es lo bastante grande para sostener el
 * texto, y así la tarjeta deja de ser foto + bloque y pasa a ser una pieza sola.
 *
 * 📌 El velo es `--cf-velo-degradado`, el mismo de 16 pasos que usan las piezas de categoría:
 *    NO se escribe un gradiente aquí. Un degradado lineal en alfa deja el arranque visible
 *    —el ojo no percibe la opacidad de forma lineal— y por eso ese token existe.
 * ⚠️ El cuerpo va SIN `z-index`: `.cme-card__enlace` lo lleva a 1 y cubre la tarjeta entera,
 *    así que queda por encima y sigue capturando el clic; el texto se ve igual porque el
 *    enlace es transparente. Ponerle z-index al cuerpo dejaría media tarjeta sin enlace.
 */
@media(max-width:450px){
	.cf-recintos-rejilla--grid .cme-card__img{padding-top:50%}
	.cf-recintos-rejilla--grid .cme-card__cuerpo{
		position:absolute;inset:auto 0 0 0;
		padding:4rem 14px 13px;
		background:var(--cf-velo-degradado)
	}
	.cf-recintos-rejilla--grid .cme-card__titulo{color:var(--cf-sobre-oscuro);font-size:1.05rem}
	.cf-recintos-rejilla--grid .cme-datos span{color:var(--cf-sobre-oscuro)}
}

/* La barra: cuántos se ven y con qué vista. `hidden` desde el servidor —lo enseña `main.js`—
   porque el interruptor no funciona sin JavaScript y no se ofrece un mando muerto. */
/* 🔴 SIEMPRE EN UNA LÍNEA — Mario, 06-sep-2026. Llevaba `flex-wrap:wrap` y en cuanto la cuenta
   y los dos botones no cabían, los mandos se iban a una segunda fila y la barra doblaba de
   alto. `nowrap` y que ceda la cuenta, que es la que puede encogerse. */
.cf-vista-barra{
	display:flex;align-items:center;justify-content:space-between;gap:var(--cf-espacio);
	flex-wrap:nowrap;margin-bottom:var(--cf-espacio-2)
}
.cf-vista-barra__cuenta{
	margin:0;font-size:.78rem;color:var(--cf-texto-suave);
	min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.cf-vista-barra__mandos{display:flex;gap:6px}
.cf-vista-barra__boton{
	/* `display:flex` para que el icono y el texto se alineen por su eje y no por la línea
	   base: con `inline-block` el SVG quedaba unos píxeles más abajo que la palabra. */
	display:flex;align-items:center;justify-content:center;gap:.45rem;
	padding:.4rem .8rem;font-size:.75rem;font-weight:700;font-family:inherit;cursor:pointer;
	color:var(--cf-texto-suave);background:transparent;
	border:1px solid var(--cf-borde);border-radius:var(--cf-radio)
}
.cf-vista-barra__boton:hover{color:var(--cf-texto);border-color:var(--cf-borde-fuerte)}
.cf-vista-barra__boton[aria-pressed="true"]{
	color:var(--cf-acento-texto);background:var(--cf-acento);border-color:var(--cf-acento)
}
/* ⚠️ En móvil los botones se quedan en su ICONO. El texto («Lista compacta» / «Con imagen
   grande») es lo que hacía imposible la línea única; el nombre sigue disponible en el
   `aria-label` y en el `title`, así que no se pierde para quien lo necesita. */
@media(max-width:600px){
	.cf-vista-barra__mandos{flex:0 0 auto}
	.cf-vista-barra__boton{padding:.4rem .55rem}
	.cf-vista-barra__boton .cf-vista-barra__texto{display:none}
	.cf-vista-barra__boton svg{width:15px;height:15px;fill:currentColor;display:block}
}
.cf-vista-barra__boton svg{width:14px;height:14px;fill:currentColor;margin-right:.35rem;vertical-align:-2px}

/* CATEGORY */
.cf-cat .label--separada{margin-top:.65rem}
.cf-cat .eyebrow--compacta{padding-bottom:.2rem}

/* TAG / SEARCH */
.cf-tag .tag-identity,.cf-buscar .search-page-head{padding-bottom:24px;border-bottom:1px solid var(--cf-divisor-seccion)}
.cf-tag .tag-mark{color:var(--cf-brasa)}
.cf-tag .chip,.cf-buscar .chip{transition:border-color .16s ease,background .16s ease,color .16s ease}
.cf-tag .chip:hover,.cf-tag .chip:focus-visible,.cf-buscar .chip:hover,.cf-buscar .chip:focus-visible,.cf-buscar .chip.active{border-color:var(--cf-acento);background:var(--cf-superficie-2);color:var(--cf-texto)}
.cf-tag .tag-grid{align-items:stretch}
.cf-tag .tag-lead,.cf-tag .context-panel,.cf-buscar .result-card{border-radius:14px}
.cf-buscar .result-card{transition:background .16s ease,border-color .16s ease}
.cf-buscar .result-card:hover{background:var(--cf-superficie);border-color:var(--cf-borde-fuerte)}
.cf-buscar .type-badge{color:var(--cf-brasa)}

/* PERSONALIDADES / WIKI */
.cf-perfil .profile-grid{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr) minmax(230px,290px);gap:30px;align-items:start;margin-top:28px}
.cf-perfil .profile-photo{position:sticky;top:92px}
.cf-perfil .profile-photo__figure{margin:0}
.cf-perfil .profile-photo__figure img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;border:1px solid var(--cf-borde);background:var(--cf-superficie)}
.cf-perfil .profile-photo__figure figcaption{margin-top:8px;font-size:.68rem;line-height:1.4;color:var(--cf-texto-tenue)}
.cf-perfil .profile-main{min-width:0}
.cf-perfil .profile-main h1{margin:.3rem 0 .55rem;font-size:clamp(2.3rem,4.6vw,4.9rem);line-height:.95;letter-spacing:-.035em;text-wrap:balance}
.cf-perfil .profile-role{margin-bottom:22px;font-size:1rem;font-weight:720;color:var(--cf-brasa)}
.cf-perfil .profile-summary{margin:0 0 24px;padding:18px 20px;border-left:3px solid var(--cf-acento);background:var(--cf-superficie);border-radius:0 12px 12px 0;color:var(--cf-texto-suave);font-size:1.05rem;line-height:1.62}
.cf-perfil .profile-summary p{margin:0}
.cf-perfil .profile-bio{font-size:1rem;line-height:1.76;color:var(--cf-texto-suave)}
.cf-perfil .profile-bio p{margin:0 0 1.25em}.cf-perfil .profile-bio h2{margin:2rem 0 .75rem;color:var(--cf-texto);font-size:1.5rem;line-height:1.15}
.cf-perfil .profile-side{display:grid;gap:14px}
.cf-perfil .facts-box,.cf-perfil .links-box{padding:18px;border:1px solid var(--cf-borde);border-radius:14px;background:var(--cf-superficie)}
.cf-perfil .facts-box h2,.cf-perfil .links-box h2{margin:0 0 13px;font-size:.78rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.cf-perfil .fact-line{display:grid;gap:3px;padding:10px 0;border-top:1px solid var(--cf-borde)}
.cf-perfil .fact-line:first-of-type{border-top:0;padding-top:0}.cf-perfil .fact-line:last-child{padding-bottom:0}
.cf-perfil .fact-line span{font-size:.67rem;text-transform:uppercase;letter-spacing:.055em;color:var(--cf-texto-tenue)}
.cf-perfil .fact-line b{font-size:.86rem;line-height:1.34;color:var(--cf-texto)}
.cf-perfil .social-links{display:grid}.cf-perfil .social-links a{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--cf-borde);color:var(--cf-texto-suave);font-size:.82rem;text-decoration:none}
.cf-perfil .social-links a:first-child{border-top:0;padding-top:0}.cf-perfil .social-links a:last-child{padding-bottom:0}.cf-perfil .social-links a:hover{color:var(--cf-brasa)}
.cf-perfil .profile-section{margin-top:58px;padding-top:26px;border-top:1px solid var(--cf-divisor-seccion)}
.cf-perfil .profile-section .section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:20px}
.cf-perfil .profile-section .section-title{margin:.2rem 0 0}
.cf-perfil .profile-related{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cf-perfil .profile-related .card{overflow:hidden;border:1px solid var(--cf-borde);border-radius:14px;background:var(--cf-superficie)}
.cf-perfil .profile-related .media{aspect-ratio:16/10;overflow:hidden}.cf-perfil .profile-related .media img{width:100%;height:100%;object-fit:cover}
.cf-perfil .profile-related .card-body{padding:14px}.cf-perfil .profile-related a{text-decoration:none;color:inherit}
.cf-perfil .profile-events{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cf-perfil .profile-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.cf-perfil .profile-gallery figure{margin:0}.cf-perfil .profile-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}.cf-perfil .profile-gallery figcaption{margin-top:7px;font-size:.72rem;color:var(--cf-texto-tenue)}
.cf-perfil .related-people{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.cf-perfil .person-card{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--cf-borde);border-radius:12px;background:var(--cf-superficie);color:var(--cf-texto);text-decoration:none}.cf-perfil .person-card:hover{border-color:var(--cf-borde-fuerte)}
.cf-perfil .avatar{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--cf-superficie-2);font-weight:850}.cf-perfil .avatar img{width:100%;height:100%;object-fit:cover}.cf-perfil .person-card small{color:var(--cf-texto-tenue)}
.cf-perfiles-archivo .profile-archive-head{padding-bottom:24px;border-bottom:1px solid var(--cf-divisor-seccion)}
.cf-perfiles-archivo .profile-archive-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
.cf-perfiles-archivo .profile-archive-card{overflow:hidden;border:1px solid var(--cf-borde);border-radius:15px;background:var(--cf-superficie)}
/* 🔴 4:5 VERTICAL, NO 4:3 APAISADA — 03-sep-2026.
   Era la peor combinación posible: caja apaisada (1,33) para fotos que son
   RETRATOS. Medido sobre las 50 fichas con foto: **37 verticales, 5 casi
   cuadradas, 8 apaisadas**, con proporción mediana **0,75 — exactamente 3:4**.
   Son retratos de Wikimedia Commons, y ese es su formato natural.
   Un 3:4 dentro de un 4:3 conserva solo el 56% del alto: se recortaba el 44%, y
   por eso salían cabezas cortadas. Lo vio Mario.
   Cuánto se recorta un retrato 3:4 según la caja:
       4:3 → 44%   ·   1:1 → 25%   ·   4:5 → 6%   ·   3:4 → 0%
   Se elige 4:5 y no 3:4 exacto: recorta un 6% (imperceptible) y no alarga tanto
   la tarjeta, que con 4 columnas se iría de alto. Cuadrada también mejoraba,
   pero seguía tirando un cuarto de la foto. */
.cf-perfiles-archivo .profile-archive-card__media{display:grid;place-items:center;aspect-ratio:4/5;overflow:hidden;background:var(--cf-superficie-2);color:var(--cf-texto);text-decoration:none}
.cf-perfiles-archivo .profile-archive-card__media img{display:block;width:100%;height:100%;object-fit:cover}.cf-perfiles-archivo .profile-archive-card__inicial{font-size:3rem;font-weight:900;color:var(--cf-texto-tenue)}
/*
 * 🔴 LAS TRES LÍNEAS DE TEXTO VAN RECORTADAS **Y RESERVADAS** — Mario, 06-sep-2026: «que quede
 * más prolijo». Ninguna llevaba tope, así que cada tarjeta medía lo que midiera su texto:
 * medido en producción sobre las 24 fichas, el título salía en 1 o 2 líneas, el rol en 1 o 2 y
 * la bajada en 4, 5 o 6 — y las seis filas daban **631, 651, 651, 657, 677 y 692 px**.
 *
 * ⚠️ RECORTAR NO BASTA: HAY QUE RESERVAR. El grid ya estira todas las tarjetas de una fila a la
 *    más alta, así que con solo `line-clamp` las de texto corto quedan con el hueco debajo y la
 *    fila se lee igual de irregular. El `min-height` en `em` —relativo a la propia letra, no a
 *    un número de píxeles— fija el suelo, y el recorte fija el techo: entre los dos, todas las
 *    tarjetas del sitio miden lo mismo.
 * 📌 En `em` y no en `px` para que sobreviva a un cambio de tipografía desde el panel, que es
 *    justo lo que estos ajustes existen para permitir.
 */
/*
 * ⚠️ CADA UNA CON SU REGLA COMPLETA, sin un bloque común con las tres agrupadas: agrupar dejaba
 *    `.story-deck` declarado dos veces en la raíz y `revisar-css.py` lo cazó. Un selector
 *    repetido es como empezó el descontrol de la hoja del sitio de referencia.
 */
/* ⚠️ El título NO reserva dos líneas —Mario lo quitó el 06-sep-2026—: solo se recorta en dos.
   Un nombre propio casi siempre cabe en una, y reservar la segunda dejaba un hueco bajo la
   mayoría de las tarjetas. El oficio y la bajada sí la reservan, que es lo que sostiene la
   altura pareja. */
.cf-perfiles-archivo .profile-archive-card .story-title{
	display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
	-webkit-line-clamp:2;line-height:1.15;
}
/* ⚠️ Ni el título ni el oficio reservan líneas —Mario los quitó el 06-sep-2026—: solo se
   recortan en dos. La única que reserva es la bajada, y por eso en escritorio las tarjetas
   siguen casi parejas; en móvil, donde la bajada no se pinta, dependen del texto. */
.cf-perfiles-archivo .profile-archive-card__rol{
	display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
	-webkit-line-clamp:2;line-height:1.6;
}
.cf-perfiles-archivo .profile-archive-card .story-deck{
	display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
	-webkit-line-clamp:3;line-height:1.6;min-height:4.8em;
}
.cf-perfiles-archivo .profile-archive-card__body{padding:15px}.cf-perfiles-archivo .profile-archive-card__body a{color:inherit;text-decoration:none}.cf-perfiles-archivo .profile-archive-card__rol{margin:.45rem 0;color:var(--cf-brasa);font-size:.78rem;font-weight:750}

@media(max-width:1100px){
	.cf-perfil .profile-grid{grid-template-columns:minmax(210px,270px) minmax(0,1fr)}
	.cf-perfil .profile-side{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}
	.cf-perfil .profile-related,.cf-perfil .profile-events{grid-template-columns:repeat(2,minmax(0,1fr))}
	.cf-perfil .related-people{grid-template-columns:repeat(3,minmax(0,1fr))}
	.cf-perfiles-archivo .profile-archive-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:1024px){
	.cf-recintos-feature{grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:470px}
	.cf-recintos-feature__principal{min-height:470px}
}

@media(max-width:767px){
	.cf-single--v4 .cf-articulo-nav{grid-template-columns:1fr}
	.cf-single--v4 .cf-articulo-nav__item--next{text-align:left}
	.cf-single--v4 .cf-recirculacion .cf-seccion__titulo{align-items:start}
	.cf-agenda{margin-inline:0;padding:14px}
	.cf-agenda-riel{padding-inline:2px}
	.cf-agenda-riel__pista{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-inline:contain;scrollbar-width:none;padding:2px 24px 6px 0}
	.cf-agenda-riel__pista::-webkit-scrollbar{display:none}
	.cf-agenda-evento{flex:0 0 min(84vw,340px);scroll-snap-align:start;min-height:128px}
	.cf-agenda-evento:has(.cf-agenda-evento__media){min-height:235px}
	.cf-agenda-riel__flecha{position:absolute;top:50%;z-index:5;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--cf-borde-fuerte);border-radius:50%;background:var(--cf-velo-fuerte);color:var(--cf-sobre-oscuro);font-size:1.15rem;transform:translateY(-50%);cursor:pointer}
	.cf-agenda-riel__flecha--prev{left:-7px}.cf-agenda-riel__flecha--next{right:-7px}
	.cf-recintos-feature{display:block;min-height:0}
	.cf-recintos-feature__principal{min-height:clamp(330px,96vw,430px)}
	.cf-recintos-feature__riel{margin-top:12px}
	.cf-recintos-feature__lado{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:10px;height:auto}
	.cf-recintos-feature__compacto,.cf-recintos-feature__compacto:nth-child(1),.cf-recintos-feature__compacto:nth-child(2),.cf-recintos-feature__compacto:nth-child(n+3){grid-column:auto;min-height:210px;padding:14px 13px 13px}
	.cf-recintos-feature__nombre-chico{font-size:.9rem}
	.cf-perfil .profile-grid{grid-template-columns:1fr;gap:18px}
	.cf-perfil .profile-photo{position:static;max-width:none}.cf-perfil .profile-photo__figure img{aspect-ratio:4/5;max-height:72vh}
	.cf-perfil .profile-main h1{font-size:clamp(2.4rem,14vw,4.2rem)}
	.cf-perfil .profile-side{grid-column:auto;grid-template-columns:1fr}
	.cf-perfil .profile-related,.cf-perfil .profile-events{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;padding-bottom:6px}.cf-perfil .profile-related .card,.cf-perfil .profile-events>*{flex:0 0 min(82vw,330px);scroll-snap-align:start}
	.cf-perfil .profile-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.cf-perfil .related-people{grid-template-columns:1fr 1fr}
	.cf-perfiles-archivo .profile-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
	/*
	 * 🔴 EN MÓVIL LA TARJETA ES FOTO + NOMBRE + OFICIO, sin la bajada — es la referencia que
	 *    mandó Mario el 06-sep-2026, y además la única que cabe: con la bajada, las 24 fichas
	 *    en una columna daban **más de 15.000 px de scroll**.
	 * 📌 La bajada no se pierde: está entera en la ficha, a un toque.
	 */
	.cf-perfiles-archivo .profile-archive-card .story-deck{display:none}
	.cf-perfiles-archivo .profile-archive-card__body{padding:11px}
	.cf-perfiles-archivo .profile-archive-card .story-title{font-size:1rem;-webkit-line-clamp:2}
	/* 🔴 Sin la bajada debajo, el oficio es la última línea de la tarjeta: interlínea corta para
	   que sus dos líneas se lean como un bloque, y un respiro abajo para que no quede pegado al
	   borde. Mario, 06-sep-2026. */
	.cf-perfiles-archivo .profile-archive-card__rol{font-size:.72rem;line-height:1.1em;margin:.3rem 0 .15rem}
}


@media(max-width:430px){
	.cf-single--v4 .cf-articulo__byline{align-items:flex-start}
	.cf-single--v4 .cf-articulo__creditos--v4{display:grid;gap:3px}
	.cf-single--v4 .cf-articulo__creditos--v4>span[aria-hidden="true"]{display:none}
	.cf-single--v4 .cf-articulo-nav__item{min-height:0;padding:15px}
	.cf-agenda__cabecera{align-items:flex-start}.cf-agenda__cabecera strong{max-width:62%}
	.cf-agenda-evento{flex-basis:84vw}
	.cf-recintos-feature__principal{min-height:330px}
	.cf-recintos-feature__copia{padding:20px 18px 17px}
	.cf-recintos-feature__lado{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
	.cf-recintos-feature__compacto{min-height:175px;padding:12px 11px}
	.cf-recintos-feature__cuenta{font-size:.68rem}
	.cf-perfil .profile-section{margin-top:42px}.cf-perfil .profile-section .section-head{align-items:flex-start}.cf-perfil .related-people{grid-template-columns:1fr}/* ⏹️ Aquí `.profile-archive-grid` caía a UNA columna. Se retira el 06-sep-2026: a 375 px eso
	   daba 24 tarjetas de ~650 px de alto, y la referencia de Mario son dos columnas compactas.
	   A 320 px cada una mide ~146 px, que con la foto en 4:5 y dos líneas de texto se lee bien. */
}

@media(max-width:374px){
	.cf-recintos-feature__lado{grid-template-columns:1fr}
	.cf-recintos-feature__compacto{min-height:190px}
}