/* =========================================================
   Antropología UTO – Interactividad
   ========================================================= */

/* ---------------------------------------------------------
   1. Pantalla de carga: el diablo de la Diablada
   --------------------------------------------------------- */
.antro-cargador {
	--antro-dur: 2s;
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	overflow: hidden;
	cursor: pointer;
	/* Fondo blanco, como la página: el paso es suave */
	background: #ffffff;
	/* Sale sola (desvaneciéndose) aunque falle el JavaScript */
	animation: antro-telon 0.6s ease calc(var(--antro-dur) - 0.5s) forwards;
}
.antro-sin-cargador .antro-cargador { display: none; }
.antro-cargador.is-saliendo { animation: antro-telon 0.4s ease forwards; }
@keyframes antro-telon {
	0% { opacity: 1; }
	99% { opacity: 0; visibility: visible; }
	100% { opacity: 0; visibility: hidden; }
}

.antro-cargador__escena {
	position: relative;
	width: min(50vw, 230px);
	aspect-ratio: 240 / 330;
}
.antro-cargador__bailarin {
	position: absolute;
	inset: 0;
	transform-origin: 50% 100%;
	/* entra saltando desde la izquierda y da un salto final */
	animation:
		antro-diablo-aparece calc(var(--antro-dur) * 0.22) ease-out both,
		antro-saltitos calc(var(--antro-dur) * 0.125) ease-in-out 4,
		antro-salto-final calc(var(--antro-dur) * 0.25) cubic-bezier(0.3, 0.7, 0.4, 1) calc(var(--antro-dur) * 0.5) both;
}
.antro-cargador__bailarin svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 10px 18px rgba(15, 33, 61, 0.18)); }
/* Aparece directamente en el centro, transparentándose (sin entrar desde un costado) */
@keyframes antro-diablo-aparece {
	from { opacity: 0; scale: 0.94; }
	to { opacity: 1; scale: 1; }
}
@keyframes antro-saltitos {
	0%, 100% { transform: translateY(0) scaleY(1); }
	15% { transform: translateY(0) scaleY(0.94); }
	50% { transform: translateY(-14%) scaleY(1.03); }
}
@keyframes antro-salto-final {
	0% { transform: translateY(0) scale(1); }
	20% { transform: translateY(0) scale(1.04, 0.9); }
	55% { transform: translateY(-22%) scale(1.06); }
	100% { transform: translateY(0) scale(1); }
}

/* Partes del cuerpo (origen de giro en coordenadas del dibujo) */
.antro-diablo .d-capa { transform-box: view-box; transform-origin: 120px 120px; animation: antro-capa calc(var(--antro-dur) * 0.25) ease-in-out infinite alternate; }
.antro-diablo .d-pierna-der { transform-box: view-box; transform-origin: 130px 232px; animation: antro-patada calc(var(--antro-dur) * 0.125) ease-in-out infinite alternate; }
.antro-diablo .d-pierna-izq { transform-box: view-box; transform-origin: 106px 232px; animation: antro-apoyo calc(var(--antro-dur) * 0.125) ease-in-out infinite alternate; }
.antro-diablo .d-brazo-der { transform-box: view-box; transform-origin: 150px 128px; animation: antro-tridente calc(var(--antro-dur) * 0.25) ease-in-out infinite alternate; }
.antro-diablo .d-careta { transform-box: view-box; transform-origin: 120px 110px; animation: antro-cabeza calc(var(--antro-dur) * 0.125) ease-in-out infinite alternate; }
.antro-diablo .d-pupila { animation: antro-ojos calc(var(--antro-dur) * 0.4) steps(1) infinite; }
@keyframes antro-capa { from { transform: skewX(-6deg) rotate(-2deg); } to { transform: skewX(6deg) rotate(2deg); } }
@keyframes antro-patada { from { transform: rotate(-24deg); } to { transform: rotate(10deg); } }
@keyframes antro-apoyo { from { transform: rotate(4deg); } to { transform: rotate(-4deg); } }
@keyframes antro-tridente { from { transform: rotate(-10deg); } to { transform: rotate(8deg); } }
@keyframes antro-cabeza { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes antro-ojos {
	0% { transform: translate(0, 0); }
	25% { transform: translate(-4px, -1px); }
	50% { transform: translate(3px, 1px); }
	75% { transform: translate(-1px, 2px); }
}

.antro-cargador__sombra {
	position: absolute;
	left: 50%;
	bottom: -4%;
	width: 55%;
	height: 7%;
	translate: -50% 0;
	border-radius: 50%;
	background: rgba(15, 33, 61, 0.16);
	filter: blur(4px);
	animation: antro-sombra calc(var(--antro-dur) * 0.125) ease-in-out 4;
}
@keyframes antro-sombra { 50% { transform: scale(0.7); opacity: 0.5; } }

.antro-cargador__texto,
.antro-cargador__sub {
	margin: 0;
	text-align: center;
	color: var(--wp--preset--color--azul, #1b365d);
	opacity: 0;
	animation: antro-texto 0.6s ease calc(var(--antro-dur) * 0.3) forwards;
}
.antro-cargador__texto {
	margin-top: 22px;
	font-family: var(--wp--preset--font-family--titulos, Georgia, serif);
	font-size: clamp(1.3rem, 3.5vw, 1.8rem);
	font-weight: 600;
	letter-spacing: -0.01em;
}
.antro-cargador__sub {
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--rojo, #c0392b);
	animation-delay: calc(var(--antro-dur) * 0.38);
}
@keyframes antro-texto { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.antro-cargador__franja {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 10px;
	background: repeating-linear-gradient(90deg, #f4c430 0 40px, #c0392b 40px 60px, #fffdf2 60px 66px, #c0392b 66px 86px);
	animation: antro-franja calc(var(--antro-dur) * 0.3) ease-out both;
}
@keyframes antro-franja { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.antro-cargador { display: none !important; }
}

/* ---------------------------------------------------------
   2. Animaciones al desplazarse
   --------------------------------------------------------- */
.antro-revelar-activo [data-antro-revelar] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--antro-retraso, 0s);
}
.antro-revelar-activo [data-antro-revelar].antro-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.antro-revelar-activo [data-antro-revelar] { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------
   3. Cifras (contadores)
   --------------------------------------------------------- */
.antro-cifras {
	position: relative;
	gap: 18px !important;
	padding: clamp(28px, 4vw, 44px);
	border-radius: 20px;
	background: linear-gradient(120deg, var(--wp--preset--color--azul-oscuro, #0f213d) 0%, var(--wp--preset--color--azul, #1b365d) 100%);
	box-shadow: 0 2px 6px rgba(15, 33, 61, 0.06), 0 18px 40px rgba(15, 33, 61, 0.13);
	overflow: hidden;
}
.antro-cifras::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background: repeating-linear-gradient(90deg, #f4c430 0 40px, #c0392b 40px 60px, #fffdf2 60px 66px, #c0392b 66px 86px);
}
.antro-cifra { text-align: center; }
.antro-cifra p { margin: 0; }
.antro-cifra__numero {
	font-family: var(--wp--preset--font-family--titulos, Georgia, serif);
	font-size: clamp(2.4rem, 5vw, 3.3rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--amarillo, #f4c430);
	font-variant-numeric: tabular-nums;
}
.antro-cifra__texto { margin-top: 8px !important; color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; }

/* ---------------------------------------------------------
   4. Tarjetas que se voltean
   --------------------------------------------------------- */
.antro-destacadas > .wp-block-column.antro-flip {
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible !important;
	perspective: 1200px;
	cursor: pointer;
	transform: none;
}
.antro-destacadas > .wp-block-column.antro-flip:hover { transform: none; box-shadow: none !important; }
.antro-flip__interior {
	display: grid;
	height: 100%;
	min-height: 210px;
	transform-style: preserve-3d;
	transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.antro-flip.is-volteada .antro-flip__interior { transform: rotateY(180deg); }
.antro-flip__cara {
	grid-area: 1 / 1;
	padding: 28px;
	border-radius: 14px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: 0 1px 2px rgba(15, 33, 61, 0.05), 0 6px 20px rgba(15, 33, 61, 0.08);
}
.antro-flip.antro-borde-rojo .antro-flip__cara { box-shadow: inset 0 -4px 0 #c0392b, 0 6px 20px rgba(15, 33, 61, 0.08); }
.antro-flip__frente {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
}
.antro-flip__frente h3 { font-size: 1.45rem !important; margin: 0 !important; }
.antro-flip__icono {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid currentColor;
	opacity: 0.85;
}
.antro-flip__pista { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; opacity: 0.8; }
.antro-flip__dorso { transform: rotateY(180deg); }
.antro-flip:focus-visible { outline: 3px solid var(--wp--preset--color--amarillo, #f4c430); outline-offset: 4px; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) {
	.antro-flip__interior { transition: none; }
}

/* ---------------------------------------------------------
   5. Línea de tiempo interactiva
   --------------------------------------------------------- */
.wp-block-list.is-style-hitos.antro-hitos-vivo { position: relative; border-left-color: rgba(27, 54, 93, 0.12); }
.wp-block-list.is-style-hitos.antro-hitos-vivo::before {
	content: "";
	position: absolute;
	left: -2px;
	top: 0;
	width: 2px;
	height: calc(var(--antro-progreso, 0) * 100%);
	background: linear-gradient(180deg, var(--wp--preset--color--amarillo, #f4c430), var(--wp--preset--color--rojo, #c0392b));
	transition: height 0.15s linear;
}
.antro-hitos-vivo > li {
	opacity: 0.4;
	transform: translateX(-6px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.antro-hitos-vivo > li::before { background: #fff !important; transition: background-color 0.4s ease, transform 0.4s ease; }
.antro-hitos-vivo > li.is-alcanzado { opacity: 1; transform: none; }
.antro-hitos-vivo > li.is-alcanzado::before { background: var(--wp--preset--color--amarillo, #f4c430) !important; transform: scale(1.15); }
.antro-hitos-vivo > li.is-alcanzado:last-child::before { background: var(--wp--preset--color--rojo, #c0392b) !important; }
@media (prefers-reduced-motion: reduce) {
	.antro-hitos-vivo > li { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------
   6. Volver arriba y barra de lectura
   --------------------------------------------------------- */
.antro-arriba {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 900;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--wp--preset--color--azul-oscuro, #0f213d);
	background: var(--wp--preset--color--amarillo, #f4c430);
	box-shadow: 0 8px 20px rgba(15, 33, 61, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.3s, transform 0.3s, visibility 0.3s, background-color 0.2s;
}
.antro-arriba.is-visible { opacity: 1; visibility: visible; transform: none; }
.antro-arriba:hover { background: #ffd451; }
.antro-arriba:focus-visible { outline: 3px solid var(--wp--preset--color--azul, #1b365d); outline-offset: 3px; }

.antro-progreso {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	z-index: 1001;
	height: 4px;
	width: 100%;
	transform-origin: left;
	transform: scaleX(var(--antro-leido, 0));
	background: linear-gradient(90deg, var(--wp--preset--color--amarillo, #f4c430), var(--wp--preset--color--rojo, #c0392b));
	pointer-events: none;
}

/* ---------------------------------------------------------
   7. Carrusel de fotos y visor
   --------------------------------------------------------- */
.wp-block-gallery.antro-carrusel-activo {
	display: block !important;
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	background: var(--wp--preset--color--azul-oscuro, #0f213d);
	box-shadow: 0 2px 6px rgba(15, 33, 61, 0.06), 0 18px 40px rgba(15, 33, 61, 0.13);
}
.antro-carrusel__pista {
	display: flex;
	transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.3, 1);
	will-change: transform;
}
.antro-carrusel-activo .antro-carrusel__pista > .wp-block-image {
	flex: 0 0 100%;
	width: 100% !important;
	margin: 0 !important;
	position: relative;
	cursor: zoom-in;
}
.antro-carrusel-activo .antro-carrusel__pista > .wp-block-image img {
	width: 100% !important;
	height: clamp(240px, 42vw, 470px) !important;
	object-fit: cover;
	display: block;
}
.antro-carrusel-activo .antro-carrusel__pista > .wp-block-image figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 40px 24px 44px;
	text-align: left;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	background: linear-gradient(0deg, rgba(15, 33, 61, 0.85), rgba(15, 33, 61, 0));
}
.antro-carrusel__flecha {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #fff;
	background: rgba(15, 33, 61, 0.55);
	transition: background-color 0.2s;
}
.antro-carrusel__flecha:hover { background: rgba(15, 33, 61, 0.85); }
.antro-carrusel__flecha--ant { left: 14px; }
.antro-carrusel__flecha--sig { right: 14px; }
.antro-carrusel__puntos {
	position: absolute;
	left: 50%;
	bottom: 14px;
	z-index: 2;
	display: flex;
	gap: 8px;
	translate: -50% 0;
}
.antro-carrusel__punto {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.5);
	transition: transform 0.2s, background-color 0.2s;
}
.antro-carrusel__punto[aria-current="true"] { background: var(--wp--preset--color--amarillo, #f4c430); transform: scale(1.25); }
.antro-carrusel__flecha:focus-visible,
.antro-carrusel__punto:focus-visible { outline: 3px solid var(--wp--preset--color--amarillo, #f4c430); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .antro-carrusel__pista { transition: none; } }

.antro-tvisor {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 72px 40px;
	background: rgba(30, 32, 36, 0.8);
}
.antro-tvisor[hidden] { display: none; }
.antro-tvisor img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
.antro-tvisor button {
	position: absolute;
	border: 0;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
}
.antro-tvisor button:hover { background: rgba(0, 0, 0, 0.65); }
.antro-tvisor__cerrar { top: 12px; right: 14px; }
.antro-tvisor__ant { left: 12px; top: 50%; margin-top: -24px; }
.antro-tvisor__sig { right: 12px; top: 50%; margin-top: -24px; }
.antro-tvisor button:focus-visible { outline: 3px solid var(--wp--preset--color--amarillo, #f4c430); outline-offset: 2px; }
html.antro-tvisor-abierto { overflow: hidden; }
@media (max-width: 600px) {
	.antro-tvisor { padding: 60px 10px 30px; }
	.antro-tvisor__ant, .antro-tvisor__sig { top: auto; bottom: 16px; margin-top: 0; }
}

/* ---------------------------------------------------------
   8. Separador «Aguayo»
   --------------------------------------------------------- */
.wp-block-separator.is-style-aguayo {
	border: 0 !important;
	height: 16px !important;
	width: 100% !important;
	max-width: none !important;
	opacity: 1 !important;
	margin-top: 40px;
	margin-bottom: 40px;
	border-radius: 3px;
	background:
		linear-gradient(180deg, #c0392b 0 3px, transparent 3px 13px, #c0392b 13px 16px),
		linear-gradient(135deg, transparent 0 35%, #f4c430 35% 65%, transparent 65%) 0 50% / 16px 10px repeat-x,
		linear-gradient(45deg, transparent 0 35%, #f4c430 35% 65%, transparent 65%) 0 50% / 16px 10px repeat-x,
		#1b365d;
}
.antro-revelar-activo .wp-block-separator.is-style-aguayo.antro-tejer {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.4s cubic-bezier(0.5, 0, 0.2, 1);
}
.antro-revelar-activo .wp-block-separator.is-style-aguayo.antro-tejer.antro-visible { clip-path: inset(0 0 0 0); }

/* ---------------------------------------------------------
   9. Trivia
   --------------------------------------------------------- */
.antro-js .antro-trivia.antro-trivia-lista .antro-trivia__pregunta { display: none; }
.antro-js .antro-trivia.antro-trivia-lista .antro-trivia__pregunta.is-actual { display: block; animation: antro-trivia-entra 0.35s ease; }
@keyframes antro-trivia-entra { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.antro-js .antro-trivia .antro-trivia__explicacion { display: none; }
.antro-js .antro-trivia .is-respondida .antro-trivia__explicacion { display: block; }
.antro-js .antro-trivia .antro-trivia__opciones strong { font-weight: inherit; }
.antro-trivia__progreso {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--texto-suave, #555);
}
.antro-trivia__barra { flex: 1; height: 6px; border-radius: 6px; background: rgba(27, 54, 93, 0.1); overflow: hidden; }
.antro-trivia__barra span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f4c430, #c0392b); transition: width 0.4s ease; }
.antro-trivia-lista .antro-trivia__opciones { list-style: none; padding: 0; display: grid; gap: 10px; }
.antro-trivia-lista .antro-trivia__opciones li { margin: 0; padding: 0; }
.antro-trivia__opcion {
	width: 100%;
	text-align: left;
	padding: 14px 18px;
	border-radius: 10px;
	border: 1.5px solid rgba(27, 54, 93, 0.15);
	background: #fff;
	color: var(--wp--preset--color--texto, #2c3e50);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, transform 0.15s;
}
.antro-trivia__opcion:hover:not(:disabled) { border-color: var(--wp--preset--color--amarillo, #f4c430); background: var(--wp--preset--color--crema, #fffdf2); }
.antro-trivia__opcion:focus-visible { outline: 3px solid var(--wp--preset--color--amarillo, #f4c430); outline-offset: 2px; }
.antro-trivia__opcion:disabled { cursor: default; }
.antro-trivia__opcion.is-correcta { border-color: #1e7a3c; background: #e3f5e9; color: #145a2c; font-weight: 600; }
.antro-trivia__opcion.is-incorrecta { border-color: #c0392b; background: #fdecea; color: #8e2a20; }
.antro-trivia__opcion.is-correcta::after { content: " ✓"; }
.antro-trivia__opcion.is-incorrecta::after { content: " ✗"; }
.antro-trivia__explicacion {
	margin-top: 16px !important;
	padding: 14px 18px;
	border-left: 4px solid var(--wp--preset--color--amarillo, #f4c430);
	background: var(--wp--preset--color--crema, #fffdf2);
	border-radius: 0 8px 8px 0;
}
.antro-trivia__siguiente {
	margin-top: 18px;
	padding: 12px 24px;
	border: 0;
	border-radius: 8px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	color: var(--wp--preset--color--azul-oscuro, #0f213d);
	background: var(--wp--preset--color--amarillo, #f4c430);
}
.antro-trivia__siguiente:hover { background: #ffd451; }
.antro-trivia__resultado { text-align: center; padding: 10px 0; animation: antro-trivia-entra 0.35s ease; }
.antro-trivia__puntaje {
	font-family: var(--wp--preset--font-family--titulos, Georgia, serif);
	font-size: clamp(2.6rem, 6vw, 3.6rem);
	font-weight: 700;
	color: var(--wp--preset--color--azul, #1b365d);
	margin: 0;
}
.antro-trivia__mensaje { font-size: 1.1rem; margin: 6px 0 18px; }

/* ---------------------------------------------------------
   10. Portada del inicio en carrusel
   --------------------------------------------------------- */
.antro-portada {
	display: grid;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(15, 33, 61, 0.06), 0 18px 40px rgba(15, 33, 61, 0.13);
	isolation: isolate;
}
.antro-portada > .antro-nota-editor { display: none; }
/* Todas las diapositivas ocupan el mismo lugar; solo la activa se ve */
.antro-portada > .wp-block-cover {
	grid-area: 1 / 1;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.antro-portada > .wp-block-cover:first-of-type,
.antro-portada.antro-portada-activa > .wp-block-cover.is-activa {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: opacity 0.9s ease, visibility 0s;
}
.antro-portada.antro-portada-activa > .wp-block-cover:first-of-type:not(.is-activa) {
	opacity: 0;
	visibility: hidden;
	z-index: 0;
	transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
/* Acercamiento muy lento de la imagen o video de la diapositiva activa */
.antro-portada > .wp-block-cover .wp-block-cover__image-background,
.antro-portada > .wp-block-cover .wp-block-cover__video-background { transform-origin: 60% 50%; }
.antro-portada.antro-portada-activa > .wp-block-cover.is-activa .wp-block-cover__image-background,
.antro-portada.antro-portada-activa > .wp-block-cover.is-activa .wp-block-cover__video-background {
	animation: antro-acercamiento 9s ease-out both;
}
@keyframes antro-acercamiento { from { transform: scale(1); } to { transform: scale(1.07); } }
/* El texto de cada diapositiva entra suavemente al activarse */
.antro-portada.antro-portada-activa > .wp-block-cover.is-activa .wp-block-cover__inner-container > * {
	animation: antro-texto-portada 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.antro-portada.antro-portada-activa > .wp-block-cover.is-activa .wp-block-cover__inner-container > *:nth-child(2) { animation-delay: 0.1s; }
.antro-portada.antro-portada-activa > .wp-block-cover.is-activa .wp-block-cover__inner-container > *:nth-child(3) { animation-delay: 0.2s; }
.antro-portada.antro-portada-activa > .wp-block-cover.is-activa .wp-block-cover__inner-container > *:nth-child(4) { animation-delay: 0.3s; }
@keyframes antro-texto-portada { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.antro-portada .antro-hero h2 {
	color: var(--wp--preset--color--blanco);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 20px;
}

/* Controles */
.antro-portada__flecha,
.antro-portada__pausa {
	position: absolute;
	z-index: 3;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background-color 0.2s, opacity 0.3s;
}
.antro-portada__flecha { top: 50%; width: 44px; height: 44px; margin-top: -22px; opacity: 0; }
.antro-portada:hover .antro-portada__flecha,
.antro-portada:focus-within .antro-portada__flecha { opacity: 1; }
.antro-portada__flecha--ant { left: 14px; }
.antro-portada__flecha--sig { right: 14px; }
.antro-portada__pausa { right: 16px; bottom: 16px; width: 36px; height: 36px; }
.antro-portada__flecha:hover,
.antro-portada__pausa:hover { background: rgba(255, 255, 255, 0.28); }
.antro-portada__puntos {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: 20px;
	translate: -50% 0;
	display: flex;
	gap: 8px;
}
.antro-portada__punto {
	width: 26px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.4);
	overflow: hidden;
	position: relative;
}
.antro-portada__punto[aria-current="true"] { background: rgba(255, 255, 255, 0.35); width: 40px; }
/* La línea del punto activo se llena con el tiempo de la diapositiva */
.antro-portada__punto[aria-current="true"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--amarillo, #f4c430);
	transform-origin: left;
	animation: antro-progreso-punto var(--antro-seg, 5s) linear both;
}
.antro-portada.is-pausada .antro-portada__punto[aria-current="true"]::after { animation-play-state: paused; }
@keyframes antro-progreso-punto { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.antro-portada__flecha:focus-visible,
.antro-portada__pausa:focus-visible,
.antro-portada__punto:focus-visible { outline: 3px solid var(--wp--preset--color--amarillo, #f4c430); outline-offset: 2px; opacity: 1; }
@media (hover: none) {
	.antro-portada__flecha { opacity: 0.85; width: 38px; height: 38px; margin-top: -19px; }
}
@media (prefers-reduced-motion: reduce) {
	.antro-portada > .wp-block-cover { transition: none; }
	.antro-portada.antro-portada-activa > .wp-block-cover.is-activa .wp-block-cover__image-background,
	.antro-portada.antro-portada-activa > .wp-block-cover.is-activa .wp-block-cover__video-background,
	.antro-portada.antro-portada-activa > .wp-block-cover.is-activa .wp-block-cover__inner-container > * { animation: none; }
}
/* En el editor, las diapositivas se ven una debajo de otra para poder editarlas */
.editor-styles-wrapper .antro-portada { display: block; overflow: visible; box-shadow: none; }
.editor-styles-wrapper .antro-portada > .wp-block-cover { opacity: 1; visibility: visible; margin-bottom: 16px !important; border-radius: 14px !important; }
.editor-styles-wrapper .antro-portada > .antro-nota-editor { display: block; }

/* ---------------------------------------------------------
   11. Decoración andina: chakanas de fondo en toda la pantalla.
       El dibujo completo se escala con el ancho de la pantalla (nunca se recorta)
       y queda detrás de las secciones.
   --------------------------------------------------------- */
body.antro-costados::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url("../images/costado-izq.svg"), url("../images/costado-der.svg");
	background-repeat: repeat-y, repeat-y;
	background-position: left top, right top;
	/* ancho de cada franja proporcional a la pantalla: 220 px en pantallas grandes, más pequeño en las chicas */
	background-size: clamp(64px, 13vw, 220px) auto, clamp(64px, 13vw, 220px) auto;
	opacity: 0.9;
}
@media (max-width: 600px) {
	body.antro-costados::before { opacity: 0.6; }
}

/* ---------------------------------------------------------
   12. Transición «ANTROPOLOGÍA» (letras + careta de la Diablada)
   --------------------------------------------------------- */
.antro-cargador--letras { gap: 8px; }
.antro-letras {
	--gap: 5px;
	--ficha: clamp(20px, calc((min(92vw, 580px) - 11 * var(--gap)) / 12), 42px);
	--paso: calc(var(--ficha) + var(--gap));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(22px, 5vh, 40px);
}
.antro-letras__logo {
	position: relative;
	width: clamp(84px, 22vw, 120px);
	aspect-ratio: 1;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	box-shadow: 0 8px 24px rgba(15, 33, 61, 0.14);
	animation: antro-logo-aparece calc(var(--antro-dur) * 0.25) cubic-bezier(0.3, 0.7, 0.3, 1.3) both;
}
.antro-letras__logo img { width: 78%; height: 78%; object-fit: contain; position: relative; z-index: 1; }
.antro-letras__inicial { font-family: var(--wp--preset--font-family--titulos, Georgia, serif); font-size: 2.6rem; font-weight: 700; color: var(--wp--preset--color--azul, #1b365d); position: relative; z-index: 1; }
.antro-letras__aro {
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: conic-gradient(#f4c430 0 25%, #c0392b 25% 37%, #1b365d 37% 62%, #f4c430 62% 75%, #c0392b 75% 87%, #1b365d 87% 100%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	animation: antro-aro-gira calc(var(--antro-dur) * 1.2) linear infinite;
}
@keyframes antro-logo-aparece { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes antro-aro-gira { to { transform: rotate(360deg); } }

.antro-letras__fila {
	position: relative;
	display: flex;
	gap: var(--gap);
	padding-top: calc(var(--ficha) * 1.5);
}
.antro-letras__ficha {
	position: relative;
	width: var(--ficha);
	height: var(--ficha);
	border-radius: calc(var(--ficha) * 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: #fff;
	font-family: var(--wp--preset--font-family--principal, Arial, sans-serif);
	font-weight: 800;
	font-size: calc(var(--ficha) * 0.5);
	line-height: 1;
	box-shadow: 0 4px 10px rgba(15, 33, 61, 0.18);
	animation:
		antro-ficha-aparece calc(var(--antro-dur) * 0.18) cubic-bezier(0.3, 0.7, 0.3, 1.4) calc(var(--antro-dur) * (0.1 + var(--i) * 0.025)) both,
		antro-ficha-salto 0.32s ease-out calc(var(--antro-dur) * (0.32 + var(--i) / 11 * 0.5)) both;
}
/* franja tejida en la base de cada ficha */
.antro-letras__ficha::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 18%;
	background: repeating-linear-gradient(90deg, #f4c430 0 4px, #c0392b 4px 7px, #fffdf2 7px 8px);
	opacity: 0.95;
}
.antro-letras__ficha--azul { background: #1b365d; }
.antro-letras__ficha--rojo { background: #c0392b; }
.antro-letras__ficha--oro { background: #d29a12; }
.antro-letras__ficha--oro::after { background: repeating-linear-gradient(90deg, #1b365d 0 4px, #c0392b 4px 7px, #fffdf2 7px 8px); }
@keyframes antro-ficha-aparece {
	from { opacity: 0; transform: translateY(40%) scale(0.4) rotate(-20deg); }
	to { opacity: 1; transform: none; }
}
@keyframes antro-ficha-salto {
	0%, 100% { translate: 0 0; }
	40% { translate: 0 -38%; rotate: 6deg; }
	70% { translate: 0 0; rotate: 0deg; }
}

.antro-letras__careta {
	position: absolute;
	top: 0;
	left: calc(var(--ficha) * -0.2);
	width: calc(var(--ficha) * 1.4);
	height: calc(var(--ficha) * 1.4);
	filter: drop-shadow(0 4px 6px rgba(15, 33, 61, 0.25));
	animation:
		antro-careta-entra calc(var(--antro-dur) * 0.12) ease-out calc(var(--antro-dur) * 0.2) both,
		antro-careta-salta calc(var(--antro-dur) * 0.5) linear calc(var(--antro-dur) * 0.3) both;
}
.antro-letras__careta svg { width: 100%; height: 100%; display: block; overflow: visible; }
.antro-letras__careta .c-pupila { animation: antro-ojos calc(var(--antro-dur) * 0.4) steps(1) infinite; transform-box: fill-box; }
@keyframes antro-careta-entra { from { opacity: 0; scale: 0.3; } to { opacity: 1; scale: 1; } }
@keyframes antro-careta-salta {
	0.00% { transform: translate(calc(var(--paso) * 0), 0) rotate(-8deg); }
	4.55% { transform: translate(calc(var(--paso) * 0.5), -55%) rotate(0deg); }
	9.09% { transform: translate(calc(var(--paso) * 1), 0) rotate(8deg); }
	13.64% { transform: translate(calc(var(--paso) * 1.5), -55%) rotate(0deg); }
	18.18% { transform: translate(calc(var(--paso) * 2), 0) rotate(-8deg); }
	22.73% { transform: translate(calc(var(--paso) * 2.5), -55%) rotate(0deg); }
	27.27% { transform: translate(calc(var(--paso) * 3), 0) rotate(8deg); }
	31.82% { transform: translate(calc(var(--paso) * 3.5), -55%) rotate(0deg); }
	36.36% { transform: translate(calc(var(--paso) * 4), 0) rotate(-8deg); }
	40.91% { transform: translate(calc(var(--paso) * 4.5), -55%) rotate(0deg); }
	45.45% { transform: translate(calc(var(--paso) * 5), 0) rotate(8deg); }
	50.00% { transform: translate(calc(var(--paso) * 5.5), -55%) rotate(0deg); }
	54.55% { transform: translate(calc(var(--paso) * 6), 0) rotate(-8deg); }
	59.09% { transform: translate(calc(var(--paso) * 6.5), -55%) rotate(0deg); }
	63.64% { transform: translate(calc(var(--paso) * 7), 0) rotate(8deg); }
	68.18% { transform: translate(calc(var(--paso) * 7.5), -55%) rotate(0deg); }
	72.73% { transform: translate(calc(var(--paso) * 8), 0) rotate(-8deg); }
	77.27% { transform: translate(calc(var(--paso) * 8.5), -55%) rotate(0deg); }
	81.82% { transform: translate(calc(var(--paso) * 9), 0) rotate(8deg); }
	86.36% { transform: translate(calc(var(--paso) * 9.5), -55%) rotate(0deg); }
	90.91% { transform: translate(calc(var(--paso) * 10), 0) rotate(-8deg); }
	95.45% { transform: translate(calc(var(--paso) * 10.5), -55%) rotate(0deg); }
	100.00% { transform: translate(calc(var(--paso) * 11), 0) rotate(8deg); }
}

.antro-cargador--letras .antro-cargador__texto { margin-top: 6px; }
.antro-letras__barra { display: flex; gap: 8px; margin-top: 14px; }
.antro-letras__barra span {
	width: clamp(16px, 4vw, 26px);
	height: 6px;
	border-radius: 3px;
	background: #f4c430;
	opacity: 0.2;
	animation: antro-barra-llena 0.25s ease both;
}
.antro-letras__barra span:nth-child(3n+2) { background: #c0392b; }
.antro-letras__barra span:nth-child(3n) { background: #1b365d; }
.antro-letras__barra span:nth-child(1) { animation-delay: calc(var(--antro-dur) * 0.15); }
.antro-letras__barra span:nth-child(2) { animation-delay: calc(var(--antro-dur) * 0.25); }
.antro-letras__barra span:nth-child(3) { animation-delay: calc(var(--antro-dur) * 0.35); }
.antro-letras__barra span:nth-child(4) { animation-delay: calc(var(--antro-dur) * 0.45); }
.antro-letras__barra span:nth-child(5) { animation-delay: calc(var(--antro-dur) * 0.55); }
.antro-letras__barra span:nth-child(6) { animation-delay: calc(var(--antro-dur) * 0.65); }
.antro-letras__barra span:nth-child(7) { animation-delay: calc(var(--antro-dur) * 0.75); }
@keyframes antro-barra-llena { to { opacity: 1; } }

/* Portada en celular: espacio para los puntos y la pausa */
@media (max-width: 600px) {
	.antro-portada { border-radius: 16px; }
	.antro-portada__puntos { bottom: 16px; }
	.antro-portada__pausa { right: 12px; bottom: 10px; }
	.antro-portada__punto { width: 18px; }
	.antro-portada__punto[aria-current="true"] { width: 30px; }
}

/* Sin cintas al pie de las transiciones */
.antro-cargador__franja,
.antro-letras__barra { display: none !important; }

/* La versión completa y la corta comparten la pantalla blanca */
.antro-letras-completa { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.antro-letras-corta { display: none; }
html.antro-cargador-corto .antro-letras-completa { display: none; }
html.antro-cargador-corto .antro-letras-corta { display: flex; }
/* Transición corta: alrededor de un segundo y medio */
html.antro-cargador-corto .antro-cargador--letras { --antro-dur: 1.6s !important; }

/* ---------------------------------------------------------
   13. Transición corta: nombre de la sección
   --------------------------------------------------------- */
.antro-letras-corta {
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 0 20px;
	text-align: center;
}
.antro-corta__careta {
	width: clamp(54px, 14vw, 74px);
	height: clamp(54px, 14vw, 74px);
	filter: drop-shadow(0 4px 6px rgba(15, 33, 61, 0.2));
	animation: antro-corta-careta calc(var(--antro-dur) * 0.55) cubic-bezier(0.3, 0.7, 0.3, 1.2) both;
}
.antro-corta__careta svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes antro-corta-careta {
	0% { opacity: 0; transform: translateY(20px) scale(0.6) rotate(-10deg); }
	55% { opacity: 1; transform: translateY(-14px) scale(1.05) rotate(6deg); }
	100% { opacity: 1; transform: none; }
}
.antro-corta__nombre {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: min(92vw, 820px);
	font-family: var(--wp--preset--font-family--titulos, Georgia, serif);
	font-size: clamp(1.9rem, 6.5vw, 3.4rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--azul, #1b365d);
}
.antro-letras-corta.is-largo .antro-corta__nombre { font-size: clamp(1.4rem, 4.5vw, 2.4rem); }
.antro-corta__nombre span {
	display: inline-block;
	animation: antro-corta-letra 0.38s cubic-bezier(0.2, 0.7, 0.3, 1.2) both;
	animation-delay: calc(var(--antro-dur) * 0.08 + min(var(--i), 30) * 0.018s);
}
@keyframes antro-corta-letra {
	from { opacity: 0; transform: translateY(60%); }
	to { opacity: 1; transform: none; }
}
.antro-corta__sub {
	margin: 4px 0 0;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--rojo, #c0392b);
	opacity: 0;
	animation: antro-texto 0.4s ease calc(var(--antro-dur) * 0.25) forwards;
}

/* Diablo con el nombre de la sección */
.antro-cargador__texto--seccion {
	font-size: clamp(1.7rem, 5.5vw, 2.8rem) !important;
	line-height: 1.1;
	max-width: min(92vw, 820px);
	padding: 0 16px;
	overflow-wrap: break-word;
}
.antro-cargador__texto--seccion.is-largo { font-size: clamp(1.3rem, 4vw, 2rem) !important; }

/* Combinada: ANTROPOLOGÍA en la primera página de la visita; después, el diablo */
.antro-combi-diablo { display: none; flex-direction: column; align-items: center; gap: 6px; }
html.antro-ya-entro .antro-cargador--combinada .antro-letras-completa { display: none; }
html.antro-ya-entro .antro-cargador--combinada .antro-combi-diablo { display: flex; }
html.antro-ya-entro .antro-cargador--combinada { --antro-dur: var(--antro-dur-diablo) !important; }

/* Primera página de la visita: siempre ANTROPOLOGÍA (aunque la página tenga el diablo) */
html.antro-primera-entrada .antro-cargador--combinada .antro-letras-completa { display: flex; }
html.antro-primera-entrada .antro-cargador--combinada .antro-combi-diablo { display: none; }