/*
Theme Name: CSC — Futuro posible
Description: Repositorio digital documental de la Corporación Con Sentido Cultural.
             Identidad tomada del manual de marca CSC; textura de fique como
             superficie, siguiendo la idea de tejido que ya propone el isotipo.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: csc
*/

/* ---------------------------------------------------------------
   1. Tipografía auto-alojada
   Se sirve desde el propio servidor: ninguna petición a terceros, por
   el compromiso de tratamiento de datos del proyecto.
   --------------------------------------------------------------- */

@font-face {
	font-family: 'Google Sans Flex';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fuentes/google-sans-flex-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
		U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Google Sans Flex';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fuentes/google-sans-flex-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------
   2. Variables de marca — manual de identidad CSC
   --------------------------------------------------------------- */

:root {
	/* Paleta oficial. La proporción sugerida es 50/35/15. */
	--csc-principal: #592720;   /* Caput Mortuum — raíces, solidez, memoria */
	--csc-secundario: #e49b0f;  /* Gamboge — energía, alimento, dinamismo */
	--csc-terciario: #40826d;   /* Viridian — equilibrio, territorio, desarrollo */

	/* Neutros cálidos tomados del propio manual. */
	--csc-fique: #f9ebcf;
	--csc-papel: #fcf5e7;
	--csc-tinta: #2e1611;
	--csc-suave: #7b5248;

	--csc-borde: rgba(89, 39, 32, .18);
	--csc-sombra: 0 2px 14px rgba(89, 39, 32, .09);
	--csc-sombra-alta: 0 10px 34px rgba(89, 39, 32, .16);

	--csc-radio: 10px;
	--csc-ancho: 1180px;
	--csc-medida: 68ch;

	--csc-letra: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* Grano de fibra: ruido SVG en línea, sin descargar ninguna imagen. */
	--csc-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='.055'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   3. Base
   --------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--csc-letra);
	font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
	line-height: 1.62;
	color: var(--csc-tinta);
	background-color: var(--csc-fique);

	/* Fique: trama tejida muy tenue + grano de fibra sobre el crema. */
	background-image:
		var(--csc-grano),
		repeating-linear-gradient(90deg, rgba(89, 39, 32, .035) 0 1px, transparent 1px 7px),
		repeating-linear-gradient(0deg, rgba(89, 39, 32, .028) 0 1px, transparent 1px 7px);
	background-attachment: fixed, scroll, scroll;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--csc-principal);
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}

a:hover {
	color: var(--csc-terciario);
}

/* El foco visible es un requisito de accesibilidad del proyecto,
   no un detalle estético: sin esto no se puede navegar por teclado. */
:focus-visible {
	outline: 3px solid var(--csc-secundario);
	outline-offset: 3px;
	border-radius: 3px;
}

h1, h2, h3, h4 {
	font-weight: 700;
	line-height: 1.14;
	color: var(--csc-principal);
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.6rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.4rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); }

p { margin: 0 0 1.15em; }

.csc-contenedor {
	width: min(100% - 2.5rem, var(--csc-ancho));
	margin-inline: auto;
}

.csc-medida { max-width: var(--csc-medida); }

/* Visible solo para lectores de pantalla. */
.csc-oculto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.csc-saltar {
	position: absolute;
	left: 50%;
	top: -4rem;
	transform: translateX(-50%);
	z-index: 999;
	background: var(--csc-principal);
	color: var(--csc-fique);
	padding: .7rem 1.4rem;
	border-radius: 0 0 var(--csc-radio) var(--csc-radio);
	text-decoration: none;
	transition: top .16s;
}

.csc-saltar:focus {
	top: 0;
	color: var(--csc-fique);
}

/* ---------------------------------------------------------------
   4. Cinta decorativa — recurso gráfico oficial del manual
   Se pinta por máscara para poder teñirla en cualquier color de marca
   sin alterar el archivo original.
   --------------------------------------------------------------- */

.csc-cinta {
	height: clamp( 34px, 3.4vw, 52px );
	background-color: var(--csc-principal);
	-webkit-mask-image: url('assets/cinta.png');
	mask-image: url('assets/cinta.png');
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	opacity: 1;
}

.csc-cinta--verde { background-color: var(--csc-terciario); }
.csc-cinta--ambar { background-color: var(--csc-secundario); }

/* La de debajo de la cabecera: algo más baja que la del pie, pero con el
   mismo peso visual. En el manual la cinta es una banda contundente, no
   una línea: es un recurso de identidad, no un separador. */
.csc-cinta--fina {
	height: clamp( 26px, 2.6vw, 38px );
	opacity: 1;
}

/* --- Patrón modular de fondo -----------------------------------------
   El manual lo define como "trama modular para fondos y texturas". Se usa
   como marca de agua, nunca como decoración que compita con el contenido:
   la fotografía documental es el elemento central de este sitio.
   Se pinta por máscara para teñirlo en el color que convenga a cada fondo. */

.csc-trama {
	position: relative;
	isolation: isolate;
}

.csc-trama::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: var(--csc-principal);
	-webkit-mask-image: url('assets/patron.png');
	mask-image: url('assets/patron.png');
	-webkit-mask-size: 116px 116px;
	mask-size: 116px 116px;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	opacity: .055;
}

/* Sobre fondos oscuros el patrón va en crema. */
.csc-trama--clara::before {
	background-color: var(--csc-fique);
	opacity: .07;
}

.csc-trama--ambar::before {
	background-color: var(--csc-secundario);
	opacity: .13;
}

/* Se desvanece hacia abajo, para que no compita con el texto. */
.csc-trama--degradada::before {
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	-webkit-mask-image: url('assets/patron.png'), linear-gradient(to bottom, #000 0%, transparent 62%);
	mask-image: url('assets/patron.png'), linear-gradient(to bottom, #000 0%, transparent 62%);
	-webkit-mask-size: 116px 116px, 100% 100%;
	mask-size: 116px 116px, 100% 100%;
	-webkit-mask-repeat: repeat, no-repeat;
	mask-repeat: repeat, no-repeat;
}

/* ---------------------------------------------------------------
   5. Cabecera
   --------------------------------------------------------------- */

.csc-cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(249, 235, 207, .93);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--csc-borde);
}

.csc-cabecera__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: .85rem 0;
}

/* Lockup del manual: isotipo + logotipo separados por 0.5X. */
.csc-marca {
	display: inline-flex;
	align-items: center;
	gap: .62rem;
	text-decoration: none;
	color: var(--csc-principal);
	flex-shrink: 0;
}

.csc-marca__isotipo {
	width: auto;
	height: 46px;
	color: var(--csc-principal);
}

.csc-marca__texto {
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.07;
	letter-spacing: -.012em;
}

.csc-marca__sub {
	display: block;
	font-weight: 400;
	font-size: .76rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--csc-terciario);
	margin-top: .18em;
}

.csc-nav ul {
	display: flex;
	align-items: center;
	gap: .35rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.csc-nav a {
	display: block;
	padding: .5rem .85rem;
	border-radius: 99px;
	text-decoration: none;
	font-weight: 500;
	font-size: .95rem;
	color: var(--csc-principal);
}

.csc-nav a:hover,
.csc-nav .current-menu-item > a,
.csc-nav [aria-current='page'] {
	background: rgba(89, 39, 32, .085);
	color: var(--csc-principal);
}

/* --- Botón hamburguesa ------------------------------------------------- */

.csc-hamburguesa {
	display: none;
	appearance: none;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1.5px solid var(--csc-borde);
	border-radius: 10px;
	background: transparent;
	color: var(--csc-principal);
	cursor: pointer;
	flex-shrink: 0;
}

.csc-hamburguesa__trazos {
	display: block;
	position: relative;
	width: 22px;
	height: 15px;
	margin: 0 auto;
}

.csc-hamburguesa__trazos span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2.5px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .22s ease, opacity .16s ease, top .22s ease;
}

.csc-hamburguesa__trazos span:nth-child(1) { top: 0; }
.csc-hamburguesa__trazos span:nth-child(2) { top: 6.25px; }
.csc-hamburguesa__trazos span:nth-child(3) { top: 12.5px; }

/* Abierto: las tres líneas se vuelven una X. */
.csc-hamburguesa[aria-expanded='true'] .csc-hamburguesa__trazos span:nth-child(1) {
	top: 6.25px;
	transform: rotate(45deg);
}

.csc-hamburguesa[aria-expanded='true'] .csc-hamburguesa__trazos span:nth-child(2) {
	opacity: 0;
}

.csc-hamburguesa[aria-expanded='true'] .csc-hamburguesa__trazos span:nth-child(3) {
	top: 6.25px;
	transform: rotate(-45deg);
}

/* --- Cabecera y menú en pantallas angostas ---------------------------- */

@media (max-width: 820px) {
	.csc-cabecera__fila {
		gap: .75rem;
		padding: .6rem 0;
	}

	.csc-hamburguesa { display: block; }

	.csc-marca__isotipo { height: 40px; }

	.csc-marca__texto { font-size: .95rem; }

	.csc-marca__sub { font-size: .7rem; }

	/* El menú solo se esconde si el guion está vivo: sin JavaScript queda
	   desplegado como una lista normal y el sitio sigue siendo navegable. */
	.csc-con-js .csc-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		background: var(--csc-papel);
		border-bottom: 1px solid var(--csc-borde);
		box-shadow: var(--csc-sombra-alta);
		padding: .5rem .75rem 1rem;
	}

	.csc-con-js .csc-nav--abierto { display: block; }

	.csc-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: .1rem;
	}

	.csc-nav a {
		padding: .85rem 1rem;
		border-radius: 8px;
		font-size: 1.02rem;
	}

	.csc-nav li + li { border-top: 1px solid var(--csc-borde); }

	body.csc-menu-abierto { overflow: hidden; }
}

/* La cabecera ancla el panel desplegable. */
.csc-cabecera { position: sticky; }

.csc-cabecera__fila { position: relative; }

@media (min-width: 821px) {
	.csc-hamburguesa { display: none !important; }
	.csc-nav { display: block !important; }
}

/* En pantallas muy angostas el nombre largo de la marca ya no entra. */
@media (max-width: 380px) {
	.csc-marca__texto { font-size: .86rem; }
	.csc-marca__sub { font-size: .64rem; }
}

/* ---------------------------------------------------------------
   6. Portada
   --------------------------------------------------------------- */

.csc-portada {
	padding: clamp(2.6rem, 1.4rem + 5vw, 5.5rem) 0 clamp(2rem, 1rem + 3vw, 3.5rem);
}

.csc-portada__pregunta {
	max-width: 19ch;
}

.csc-portada__entrada {
	font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem);
	color: var(--csc-suave);
	max-width: 58ch;
}

.csc-intro-sonora {
	margin-top: 2rem;
	padding: 1.1rem 1.3rem;
	background: var(--csc-papel);
	border: 1px solid var(--csc-borde);
	border-left: 5px solid var(--csc-secundario);
	border-radius: var(--csc-radio);
	max-width: 46rem;
}

.csc-intro-sonora__titulo {
	font-weight: 700;
	color: var(--csc-principal);
	margin-bottom: .55rem;
	font-size: .97rem;
}

.csc-intro-sonora audio { width: 100%; }

/* ---------------------------------------------------------------
   7. Mapa de la red
   --------------------------------------------------------------- */

.csc-red {
	padding: clamp(2rem, 1rem + 3vw, 3.5rem) 0;
}

.csc-red__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	align-items: start;
}

@media (max-width: 860px) {
	.csc-red__cuerpo { grid-template-columns: 1fr; }
}

.csc-mapa {
	position: relative;
	isolation: isolate;
	background: var(--csc-papel);
	border: 1px solid var(--csc-borde);
	border-radius: var(--csc-radio);
	padding: 1.2rem;
	box-shadow: var(--csc-sombra);
}

.csc-mapa svg { width: 100%; height: auto; display: block; }

.csc-mapa__tierra {
	fill: rgba(64, 130, 109, .16);
	stroke: var(--csc-terciario);
	stroke-width: 2.2;
	stroke-linejoin: round;
}

.csc-mapa__punto { cursor: pointer; }

/* Zona de toque invisible, bastante mayor que el disco visible: en un
   celular el círculo solo mide unos pocos píxeles y sería intocable. */
.csc-mapa__toque {
	fill: transparent;
	stroke: none;
}

.csc-mapa__disco {
	fill: var(--csc-secundario);
	stroke: var(--csc-principal);
	stroke-width: 7;
	transition: fill .15s ease;
	pointer-events: none;
}

.csc-mapa__punto:hover .csc-mapa__disco,
.csc-mapa__punto:focus-visible .csc-mapa__disco,
.csc-mapa__punto[data-activo='si'] .csc-mapa__disco {
	fill: var(--csc-principal);
}

.csc-mapa__punto[data-activo='si'] .csc-mapa__disco {
	stroke: var(--csc-secundario);
	stroke-width: 10;
}

/* La etiqueta también es parte del enlace: se puede hacer clic en el nombre. */
.csc-mapa__punto text {
	font-size: 25px;
	font-weight: 700;
	fill: var(--csc-principal);
	paint-order: stroke;
	stroke: var(--csc-papel);
	stroke-width: 6;
}

/* La cabecera es fija: sin esto, al saltar a una sección queda tapada. */
:target,
#contenido,
#contacto,
#csc-rejilla {
	scroll-margin-top: 5.5rem;
}

.csc-mapa__nota {
	margin: .9rem 0 0;
	font-size: .84rem;
	color: var(--csc-suave);
	line-height: 1.5;
}

/* ---------------------------------------------------------------
   8. Filtros temáticos
   --------------------------------------------------------------- */

.csc-filtros { margin-bottom: 1.6rem; }

.csc-filtros__titulo {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--csc-suave);
	margin-bottom: .7rem;
}

.csc-filtros__lista {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.csc-filtro {
	appearance: none;
	font: inherit;
	font-size: .92rem;
	font-weight: 500;
	padding: .44rem .95rem;
	border-radius: 99px;
	border: 1.5px solid var(--csc-terciario);
	background: transparent;
	color: var(--csc-terciario);
	cursor: pointer;
	transition: background .15s, color .15s;
}

.csc-filtro:hover { background: rgba(64, 130, 109, .12); }

.csc-filtro[aria-pressed='true'] {
	background: var(--csc-terciario);
	color: var(--csc-papel);
}

/* ---------------------------------------------------------------
   9. Tarjetas de perfil
   --------------------------------------------------------------- */

.csc-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
	gap: clamp(1.1rem, .8rem + 1vw, 1.8rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.csc-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--csc-papel);
	border: 1px solid var(--csc-borde);
	border-radius: var(--csc-radio);
	overflow: hidden;
	box-shadow: var(--csc-sombra);
	transition: transform .18s ease, box-shadow .18s ease;
}

.csc-tarjeta:hover,
.csc-tarjeta:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--csc-sombra-alta);
}

.csc-tarjeta[hidden] { display: none; }

.csc-tarjeta__foto {
	aspect-ratio: 4 / 5;
	background: rgba(89, 39, 32, .07);
	overflow: hidden;
}

.csc-tarjeta__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.csc-tarjeta:hover .csc-tarjeta__foto img { transform: scale(1.035); }

.csc-tarjeta__cuerpo {
	padding: 1.05rem 1.15rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .42rem;
	flex: 1;
}

.csc-tarjeta__territorio {
	font-size: .79rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--csc-terciario);
}

.csc-tarjeta__nombre {
	font-size: 1.22rem;
	margin: 0;
	line-height: 1.2;
}

/* El enlace cubre la tarjeta entera, pero el texto accesible va en el nombre. */
.csc-tarjeta__nombre a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.csc-tarjeta__nombre a {
	text-decoration: none;
	color: var(--csc-principal);
}

.csc-tarjeta__rol {
	font-size: .95rem;
	color: var(--csc-suave);
	margin: 0;
}

.csc-tarjeta__proceso {
	margin-top: auto;
	padding-top: .7rem;
	font-size: .88rem;
	color: var(--csc-tinta);
	border-top: 1px solid var(--csc-borde);
}

.csc-tarjeta__proceso strong {
	display: block;
	font-size: .74rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--csc-suave);
	font-weight: 700;
	margin-bottom: .14rem;
}

.csc-tarjeta__audio {
	position: absolute;
	top: .7rem;
	right: .7rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	background: rgba(89, 39, 32, .88);
	color: var(--csc-fique);
	font-size: .74rem;
	font-weight: 600;
	padding: .26rem .6rem;
	border-radius: 99px;
}

.csc-vacio {
	grid-column: 1 / -1;
	padding: 2.5rem 1rem;
	text-align: center;
	color: var(--csc-suave);
	border: 1.5px dashed var(--csc-borde);
	border-radius: var(--csc-radio);
}

/* ---------------------------------------------------------------
   10. Perfil individual
   --------------------------------------------------------------- */

.csc-perfil { padding: clamp(1.8rem, 1rem + 2.5vw, 3.2rem) 0; }

.csc-perfil__cabeza {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	align-items: center;
	margin-bottom: clamp(2rem, 1.2rem + 2vw, 3.2rem);
}

@media (max-width: 800px) {
	.csc-perfil__cabeza { grid-template-columns: 1fr; }
}

.csc-perfil__retrato {
	border-radius: var(--csc-radio);
	overflow: hidden;
	box-shadow: var(--csc-sombra-alta);
	aspect-ratio: 4 / 5;
}

.csc-perfil__retrato img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.csc-perfil__ubicacion {
	font-size: .86rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--csc-terciario);
	margin-bottom: .5rem;
}

.csc-perfil__pronombres {
	display: inline-block;
	font-size: .84rem;
	font-weight: 600;
	color: var(--csc-suave);
	background: rgba(64, 130, 109, .13);
	padding: .18rem .62rem;
	border-radius: 99px;
	margin-bottom: .9rem;
}

.csc-perfil__rol {
	font-size: clamp(1.05rem, .98rem + .4vw, 1.28rem);
	color: var(--csc-suave);
	margin-bottom: 1.1rem;
}

.csc-ficha {
	margin: 0;
	padding: 1rem 1.2rem;
	background: var(--csc-papel);
	border: 1px solid var(--csc-borde);
	border-radius: var(--csc-radio);
}

.csc-ficha dt {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--csc-suave);
}

.csc-ficha dd {
	margin: .1rem 0 .85rem;
	font-size: 1rem;
}

.csc-ficha dd:last-child { margin-bottom: 0; }

/* Frase de futuro: el cierre memorable y el hilo común entre perfiles. */
.csc-frase {
	isolation: isolate;
	margin: clamp(2rem, 1.2rem + 2vw, 3rem) 0;
	padding: clamp(1.6rem, 1rem + 2vw, 2.6rem);
	background: var(--csc-principal);
	color: var(--csc-fique);
	border-radius: var(--csc-radio);
	position: relative;
	overflow: hidden;
}

.csc-frase blockquote {
	margin: 0;
	font-size: clamp(1.3rem, 1rem + 1.6vw, 2.1rem);
	font-weight: 700;
	line-height: 1.26;
	text-wrap: balance;
	max-width: 24ch;
}

.csc-frase figcaption {
	margin-top: .9rem;
	font-size: .82rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--csc-secundario);
	font-weight: 700;
}

.csc-frase__cinta {
	position: absolute;
	inset: auto 0 0 0;
	height: 18px;
	background-color: var(--csc-secundario);
	-webkit-mask-image: url('assets/cinta.png');
	mask-image: url('assets/cinta.png');
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	opacity: .5;
}

/* Cápsula sonora + transcripción */
.csc-capsula {
	margin: clamp(1.8rem, 1rem + 2vw, 2.8rem) 0;
	padding: 1.3rem 1.4rem;
	background: var(--csc-papel);
	border: 1px solid var(--csc-borde);
	border-left: 5px solid var(--csc-terciario);
	border-radius: var(--csc-radio);
}

.csc-capsula h2 { font-size: 1.2rem; margin-bottom: .3rem; }

.csc-capsula__meta {
	font-size: .86rem;
	color: var(--csc-suave);
	margin-bottom: .9rem;
}

.csc-capsula audio { width: 100%; }

.csc-transcripcion { margin-top: 1.1rem; }

.csc-transcripcion summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--csc-principal);
	padding: .45rem 0;
	list-style-position: outside;
}

.csc-transcripcion summary::marker { color: var(--csc-terciario); }

.csc-transcripcion__texto {
	margin-top: .7rem;
	padding: 1rem 1.1rem;
	background: rgba(89, 39, 32, .045);
	border-radius: var(--csc-radio);
	max-height: 26rem;
	overflow-y: auto;
	white-space: pre-wrap;
	font-size: .97rem;
	line-height: 1.7;
	max-width: var(--csc-medida);
}

.csc-cuerpo { max-width: var(--csc-medida); }

.csc-cuerpo h2 { margin-top: 1.8em; }

/* Galería documental */
.csc-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: .9rem;
	margin: clamp(1.8rem, 1rem + 2vw, 2.8rem) 0;
}

.csc-galeria figure {
	margin: 0;
	border-radius: var(--csc-radio);
	overflow: hidden;
	background: rgba(89, 39, 32, .07);
	box-shadow: var(--csc-sombra);
}

.csc-galeria img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.csc-galeria figcaption {
	padding: .55rem .75rem;
	font-size: .82rem;
	color: var(--csc-suave);
	background: var(--csc-papel);
}

/* ---------------------------------------------------------------
   11. Secciones de contenido
   --------------------------------------------------------------- */

.csc-seccion { padding: clamp(2rem, 1.2rem + 3vw, 4rem) 0; }

.csc-seccion--papel {
	position: relative;
	isolation: isolate;
	background: rgba(252, 245, 231, .72);
	border-block: 1px solid var(--csc-borde);
}

.csc-seccion__intro {
	max-width: 56ch;
	color: var(--csc-suave);
	font-size: clamp(1.02rem, .98rem + .3vw, 1.16rem);
	margin-bottom: 2rem;
}

.csc-nota-red {
	margin-top: 2.4rem;
	padding: 1.2rem 1.4rem;
	border: 1.5px dashed var(--csc-terciario);
	border-radius: var(--csc-radio);
	background: rgba(64, 130, 109, .06);
	max-width: 62ch;
	font-size: .98rem;
}

.csc-nota-red strong { color: var(--csc-principal); }

/* ---------------------------------------------------------------
   12. Formulario de contacto
   --------------------------------------------------------------- */

.csc-form {
	max-width: 42rem;
	display: grid;
	gap: 1.1rem;
}

.csc-form__campo { display: grid; gap: .32rem; }

.csc-form label {
	font-weight: 600;
	font-size: .95rem;
	color: var(--csc-principal);
}

.csc-form .csc-requerido { color: #b32d2e; }

.csc-form input[type='text'],
.csc-form input[type='email'],
.csc-form textarea {
	font: inherit;
	font-size: 1rem;
	padding: .68rem .85rem;
	border: 1.5px solid var(--csc-borde);
	border-radius: var(--csc-radio);
	background: var(--csc-papel);
	color: var(--csc-tinta);
	width: 100%;
}

.csc-form input:focus,
.csc-form textarea:focus {
	border-color: var(--csc-terciario);
	outline: 3px solid rgba(228, 155, 15, .5);
	outline-offset: 1px;
}

.csc-form__ayuda {
	font-size: .85rem;
	color: var(--csc-suave);
}

.csc-form__consentimiento {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .7rem;
	align-items: start;
	padding: 1rem 1.1rem;
	background: var(--csc-papel);
	border: 1px solid var(--csc-borde);
	border-radius: var(--csc-radio);
}

.csc-form__consentimiento input { margin-top: .25rem; width: 1.15rem; height: 1.15rem; }

.csc-form__consentimiento label { font-weight: 400; font-size: .92rem; line-height: 1.55; }

.csc-boton {
	appearance: none;
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	padding: .8rem 1.7rem;
	border: 0;
	border-radius: 99px;
	background: var(--csc-principal);
	color: var(--csc-fique);
	cursor: pointer;
	justify-self: start;
	transition: background .16s;
}

.csc-boton:hover { background: #46201a; }

.csc-aviso {
	padding: .95rem 1.15rem;
	border-radius: var(--csc-radio);
	border-left: 5px solid var(--csc-terciario);
	background: rgba(64, 130, 109, .1);
	margin-bottom: 1.4rem;
}

.csc-aviso--error {
	border-left-color: #b32d2e;
	background: rgba(179, 45, 46, .09);
}

/* --- Formulario de inscripción: por pasos, para no abrumar --- */

.csc-form--inscripcion { max-width: 44rem; gap: 1.8rem; }

.csc-grupo {
	margin: 0;
	padding: 1.3rem 1.4rem 1.5rem;
	border: 1px solid var(--csc-borde);
	border-radius: var(--csc-radio);
	background: rgba(252, 245, 231, .55);
	display: grid;
	gap: 1.05rem;
}

.csc-grupo > legend {
	padding: 0 .55rem;
	margin-left: -.55rem;
	font-weight: 700;
	font-size: 1.08rem;
	color: var(--csc-principal);
}

.csc-grupo__nota {
	margin: -.35rem 0 0;
	max-width: 52ch;
}

.csc-grupo--consentimiento {
	border-color: var(--csc-terciario);
	border-width: 1.5px;
	background: rgba(64, 130, 109, .07);
}

.csc-form select {
	font: inherit;
	font-size: 1rem;
	padding: .68rem .85rem;
	border: 1.5px solid var(--csc-borde);
	border-radius: var(--csc-radio);
	background: var(--csc-papel);
	color: var(--csc-tinta);
	width: 100%;
}

.csc-form input[type='file'] {
	font: inherit;
	font-size: .95rem;
	padding: .6rem;
	border: 1.5px dashed var(--csc-borde);
	border-radius: var(--csc-radio);
	background: var(--csc-papel);
	width: 100%;
}

.csc-form select:focus,
.csc-form input[type='file']:focus {
	border-color: var(--csc-terciario);
	outline: 3px solid rgba(228, 155, 15, .5);
	outline-offset: 1px;
}

/* Casillas de rutas de lectura */

.csc-casillas {
	border: 0;
	padding: 0;
	margin: 0;
	display: grid;
	gap: .5rem;
}

.csc-casillas > legend {
	font-weight: 600;
	font-size: .95rem;
	color: var(--csc-principal);
	padding: 0;
	margin-bottom: .2rem;
}

.csc-casilla {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .9rem;
	border: 1.5px solid var(--csc-borde);
	border-radius: 99px;
	background: var(--csc-papel);
	font-weight: 500;
	font-size: .95rem;
	cursor: pointer;
	margin-right: .45rem;
	margin-bottom: .2rem;
}

.csc-casilla:hover { border-color: var(--csc-terciario); }

.csc-casilla:has( input:checked ) {
	background: var(--csc-terciario);
	border-color: var(--csc-terciario);
	color: var(--csc-papel);
}

.csc-casillas > legend + .csc-casilla,
.csc-casillas .csc-casilla { display: inline-flex; }

.csc-casillas {
	display: block;
}

.csc-casillas > legend { display: block; }

/* Trampa anti-spam: invisible para personas, tentadora para robots. */
.csc-trampa {
	position: absolute !important;
	left: -9999px;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

/* ---------------------------------------------------------------
   13. Navegación entre perfiles y pie
   --------------------------------------------------------------- */

.csc-seguir { padding: clamp(2rem, 1.2rem + 2vw, 3.2rem) 0; }

.csc-pie {
	position: relative;
	isolation: isolate;
	margin-top: auto;
	background: var(--csc-principal);
	color: rgba(249, 235, 207, .9);
	padding: clamp(2.2rem, 1.4rem + 2vw, 3.4rem) 0 1.6rem;
}

.csc-pie a { color: var(--csc-fique); }

.csc-pie a:hover { color: var(--csc-secundario); }

.csc-pie__cuerpo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: 2rem;
	margin-bottom: 2rem;
}

.csc-pie h2 {
	color: var(--csc-fique);
	font-size: 1.05rem;
	margin-bottom: .6rem;
}

.csc-pie__marca .csc-marca__isotipo { color: var(--csc-fique); height: 54px; }

.csc-pie__marca .csc-marca { color: var(--csc-fique); }

.csc-pie__marca .csc-marca__sub { color: var(--csc-secundario); }

.csc-pie ul { list-style: none; margin: 0; padding: 0; }

.csc-pie li { margin-bottom: .4rem; }

.csc-pie__legal {
	border-top: 1px solid rgba(249, 235, 207, .25);
	padding-top: 1.3rem;
	font-size: .84rem;
	line-height: 1.62;
	color: rgba(249, 235, 207, .72);
}

.csc-pie__legal p { margin-bottom: .5em; }

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.csc-principal { flex: 1; }

/* ---------------------------------------------------------------
   14. Respeto por quien prefiere menos movimiento
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}

	.csc-tarjeta:hover { transform: none; }
	.csc-tarjeta:hover .csc-tarjeta__foto img { transform: none; }
}

/* ---------------------------------------------------------------
   15. Impresión — los perfiles deben poder imprimirse como ficha
   --------------------------------------------------------------- */

@media print {
	.csc-cabecera,
	.csc-pie,
	.csc-filtros,
	.csc-mapa,
	.csc-seguir,
	.csc-saltar { display: none !important; }

	body { background: #fff; color: #000; }

	.csc-transcripcion__texto { max-height: none; overflow: visible; }

	.csc-transcripcion[open] summary { font-weight: 700; }
}

/* ---------------------------------------------------------------
   16. Dónde aparece el patrón
   Pie, frase de futuro, secciones de papel y la tarjeta del mapa.
   En ningún caso sobre fotografías ni detrás de textos largos.
   --------------------------------------------------------------- */

.csc-pie::before,
.csc-frase::before,
.csc-seccion--papel::before,
.csc-portada::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	-webkit-mask-image: url('assets/patron.png');
	mask-image: url('assets/patron.png');
	-webkit-mask-size: 116px 116px;
	mask-size: 116px 116px;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
}

/* Pie: trama en crema sobre el marrón. */
.csc-pie::before {
	background-color: var(--csc-fique);
	opacity: .07;
}

/* Frase de futuro: trama en ámbar, un poco más presente porque el bloque
   es chico y es el cierre memorable del perfil. */
.csc-frase::before {
	background-color: var(--csc-secundario);
	opacity: .14;
	border-radius: var(--csc-radio);
}

/* Secciones de papel: marca de agua apenas perceptible.
   El mapa queda LIMPIO a propósito: la trama competía con el territorio y
   ensuciaba la lectura de los marcadores. */
.csc-seccion--papel::before {
	background-color: var(--csc-principal);
	opacity: .045;
}

/* Portada: la trama entra desde arriba y se desvanece, para recibir sin
   estorbar la lectura del titular. */
.csc-portada {
	position: relative;
	isolation: isolate;
}

.csc-portada::before {
	background-color: var(--csc-terciario);
	opacity: .075;
	-webkit-mask-image: url('assets/patron.png'), linear-gradient(to bottom, #000 0%, transparent 70%);
	mask-image: url('assets/patron.png'), linear-gradient(to bottom, #000 0%, transparent 70%);
	-webkit-mask-size: 116px 116px, 100% 100%;
	mask-size: 116px 116px, 100% 100%;
	-webkit-mask-repeat: repeat, no-repeat;
	mask-repeat: repeat, no-repeat;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}