/*
 * EL ANUARIO DE LAS FAMILIAS — la puerta, la estantería y el libro.
 * ===========================================================================
 *
 * Tres piezas y un linaje. La puerta (contraseña) es una tarjeta cálida, no el
 * formulario pelado de WordPress. La estantería son cuatro tomos apoyados en una
 * balda de cera. Y el libro es hijo del PASAPORTE de internacionalización: CSS 3D
 * sobrio, bisagra en el lomo, sombra que cae hacia dentro y un ritmo lento — nada
 * de físicas de papel ni de esquinas que se doblan.
 *
 * Mobile-first. Colores y tipografías desde las variables de theme.json.
 */

.sf-anu {
	--sf-anu-tinta: var(--wp--preset--color--verde-bosque, #0b2e1f);
	--sf-anu-crema: var(--wp--preset--color--crema, #f7f5ef);
	--sf-anu-marca: var(--wp--preset--color--primario, #00a74d);
	--sf-anu-papel: #f4efe2;
	background-color: var(--sf-anu-crema);
}

/* ===========================================================================
 * CABECERA
 * ========================================================================= */
.sf-anu-hero {
	padding-block: clamp(3rem, 8vh, 5.5rem) clamp(1.5rem, 4vh, 2.5rem);
}
.sf-anu-hero__inner {
	max-width: 72rem; margin-inline: auto;
	padding-inline: clamp(1.5rem, 6vw, 6rem);
}
.sf-anu-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 0.6em; margin: 0;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--sf-anu-tinta);
}
.sf-anu-hero__title {
	margin: 0.4rem 0 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400; line-height: 1.06; text-wrap: balance;
	font-size: clamp(2rem, 5.5vw, 3.5rem);
	color: var(--sf-anu-tinta);
}
.sf-anu-hero__sub {
	margin: 0.8rem 0 0; max-width: 46ch;
	font-family: var(--wp--preset--font-family--cuerpo);
	color: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 82%, transparent);
}

/* ===========================================================================
 * LA PUERTA — la tarjeta de contraseña
 * ========================================================================= */
.sf-anu-puerta { padding-block: clamp(1rem, 3vh, 2rem) clamp(4rem, 12vh, 8rem); }
.sf-anu-pass {
	max-width: 72rem; margin-inline: auto;
	padding-inline: clamp(1.5rem, 6vw, 6rem);
}
.sf-anu-pass__card {
	max-width: 32rem;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--sf-anu-tinta) 12%, transparent);
	border-radius: 18px;
	padding: clamp(1.75rem, 5vw, 2.75rem);
	box-shadow: 0 24px 60px -30px rgba(11, 46, 31, 0.35);
	text-align: left;
}
.sf-anu-pass__logo { display: block; width: 56px; height: 56px; margin-bottom: 1rem; }
.sf-anu-pass__kicker {
	margin: 0;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--sf-anu-marca);
}
.sf-anu-pass__title {
	margin: 0.3rem 0 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400; line-height: 1.08;
	font-size: clamp(1.5rem, 3.4vw, 2rem);
	color: var(--sf-anu-tinta);
}
.sf-anu-pass__text {
	margin: 0.7rem 0 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.98rem; line-height: 1.55;
	color: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 80%, transparent);
}
.sf-anu-pass__error {
	margin: 1rem 0 0; padding: 0.7rem 0.9rem; border-radius: 10px;
	background: #fdeceb; color: #8a1f1c;
	font-size: 0.92rem;
}
.sf-anu-pass__form { margin-top: 1.4rem; }
.sf-anu-pass__label {
	display: block; margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 70%, transparent);
}
.sf-anu-pass__row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sf-anu-pass__input {
	flex: 1 1 12rem; min-width: 0;
	padding: 0.8rem 1rem;
	font-family: var(--wp--preset--font-family--cuerpo); font-size: 1rem;
	color: var(--sf-anu-tinta);
	background: var(--sf-anu-crema);
	border: 1.5px solid color-mix(in srgb, var(--sf-anu-tinta) 18%, transparent);
	border-radius: 10px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sf-anu-pass__input:focus {
	outline: none;
	border-color: var(--sf-anu-marca);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-anu-marca) 22%, transparent);
}
.sf-anu-pass__btn {
	flex: 0 0 auto;
	padding: 0.8rem 1.4rem;
	font-family: var(--wp--preset--font-family--cuerpo); font-weight: 600; font-size: 1rem;
	color: #fff; background: var(--sf-anu-marca);
	border: 0; border-radius: 999px; cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease;
}
.sf-anu-pass__btn:hover { background: #00913f; }
.sf-anu-pass__btn:active { transform: translateY(1px); }
.sf-anu-pass__foot {
	margin: 1.2rem 0 0; font-size: 0.88rem;
	color: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 66%, transparent);
}
.sf-anu-pass__foot a { color: var(--sf-anu-tinta); }

.sf-anu-vacio {
	max-width: 72rem; margin-inline: auto;
	padding: 0 clamp(1.5rem, 6vw, 6rem) clamp(4rem, 12vh, 8rem);
	color: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 75%, transparent);
}

/* ===========================================================================
 * LA ESTANTERÍA
 * ========================================================================= */
.sf-anu-balda { padding-block: clamp(1rem, 3vh, 2rem) clamp(4rem, 12vh, 7rem); }
.sf-anu-balda__inner {
	position: relative;
	max-width: 72rem; margin-inline: auto;
	padding-inline: clamp(1.5rem, 6vw, 6rem);
}
.sf-anu-estante {
	list-style: none; margin: 0; padding: 0 0 clamp(1.5rem, 4vh, 2.5rem);
	display: flex; flex-wrap: wrap; align-items: flex-end;
	gap: clamp(1.25rem, 4vw, 2.5rem);
}
.sf-anu-tomo { flex: 0 0 auto; width: clamp(120px, 34vw, 150px); }
.sf-anu-tomo--ultimo { width: clamp(160px, 44vw, 210px); }

.sf-anu-tomo__btn {
	display: block; width: 100%; margin: 0; padding: 0;
	background: none; border: 0; cursor: pointer;
	text-align: left; color: inherit;
	transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sf-anu-tomo__btn:hover,
.sf-anu-tomo__btn:focus-visible { transform: translateY(-8px); }
.sf-anu-tomo__btn:focus-visible {
	outline: 3px solid var(--sf-anu-marca); outline-offset: 6px; border-radius: 4px;
}

/* La portada, apoyada: sombra corta abajo y un lomo insinuado a la izquierda. */
.sf-anu-tomo__portada { position: relative; display: block; }
.sf-anu-tomo__img {
	display: block; width: 100%; height: auto;
	border-radius: 3px 8px 8px 3px;
	box-shadow:
		0 16px 30px -14px rgba(11, 46, 31, 0.45),
		0 2px 0 0 rgba(11, 46, 31, 0.08);
	transition: box-shadow 0.28s ease;
}
.sf-anu-tomo__btn:hover .sf-anu-tomo__img,
.sf-anu-tomo__btn:focus-visible .sf-anu-tomo__img {
	box-shadow: 0 26px 44px -16px rgba(11, 46, 31, 0.5), 0 2px 0 0 rgba(11, 46, 31, 0.08);
}
.sf-anu-tomo__lomo {
	position: absolute; inset: 0 auto 0 0; width: 7px;
	border-radius: 3px 0 0 3px;
	background: linear-gradient(90deg, rgba(11, 46, 31, 0.34), rgba(11, 46, 31, 0.04));
	pointer-events: none;
}

.sf-anu-tomo__pie { display: block; margin-top: 0.7rem; }
.sf-anu-tomo__curso {
	display: block;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: clamp(1rem, 2.4vw, 1.25rem); line-height: 1.1;
	color: var(--sf-anu-tinta);
}
.sf-anu-tomo--ultimo .sf-anu-tomo__curso { font-size: clamp(1.15rem, 3vw, 1.6rem); }
.sf-anu-tomo__paginas {
	display: block; margin-top: 0.15rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 60%, transparent);
}
.sf-anu-tomo__chip {
	display: inline-block; margin-top: 0.45rem;
	padding: 0.22rem 0.6rem; border-radius: 999px;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
	color: #fff; background: var(--sf-anu-marca);
}

/* La balda: un trazo de cera, no un mueble. */
.sf-anu-balda__tabla {
	display: block; height: 3px; border-radius: 3px;
	background: linear-gradient(90deg,
		transparent 0%,
		color-mix(in srgb, var(--sf-anu-tinta) 26%, transparent) 6%,
		color-mix(in srgb, var(--sf-anu-tinta) 26%, transparent) 94%,
		transparent 100%);
	box-shadow: 0 6px 16px -8px rgba(11, 46, 31, 0.5);
}

/* ===========================================================================
 * EL VISOR — pantalla completa, el libro dentro
 * ========================================================================= */
.sf-anu-visor {
	position: fixed; inset: 0; z-index: 9000;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	background: radial-gradient(120% 90% at 50% 0%, #0e3a26 0%, #06170f 100%);
	padding:
		max(env(safe-area-inset-top), 0px)
		max(env(safe-area-inset-right), 0px)
		max(env(safe-area-inset-bottom), 0px)
		max(env(safe-area-inset-left), 0px);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.sf-anu-visor[hidden] { display: none; }
.sf-anu-visor.is-visible { opacity: 1; }

.sf-anu-visor__chrome {
	display: flex; align-items: center; gap: 1rem;
	padding: 0.9rem clamp(0.9rem, 3vw, 1.6rem);
	color: rgba(255, 255, 255, 0.92);
}
.sf-anu-visor__curso {
	margin: 0; flex: 1 1 auto;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.sf-anu-visor__cuenta {
	margin: 0; flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.8rem; letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.7);
	font-variant-numeric: tabular-nums;
}
.sf-anu-visor__cerrar {
	flex: 0 0 auto;
	width: 40px; height: 40px; display: grid; place-items: center;
	font-size: 1.5rem; line-height: 1;
	color: #fff; background: rgba(255, 255, 255, 0.1);
	border: 0; border-radius: 50%; cursor: pointer;
	transition: background-color 0.18s ease;
}
.sf-anu-visor__cerrar:hover { background: rgba(255, 255, 255, 0.2); }

.sf-anu-escena {
	position: relative;
	display: grid; place-items: center;
	min-height: 0;
	padding: clamp(0.5rem, 2vh, 1.25rem) clamp(0.5rem, 3vw, 3.5rem);
	overflow: hidden;
	touch-action: pan-y;
}
/*
 * CON LA PÁGINA AMPLIADA, EL NAVEGADOR SUELTA EL GESTO. `touch-action: none`
 * significa «este arrastre es mío»: sin esto, el táctil intenta desplazar la
 * escena por su cuenta a la vez que nosotros paseamos, y salen los dos tirones
 * a la vez. Es la mitad de la jerarquía de gestos; la otra mitad está en el JS,
 * que apaga el swipe de paso de página mientras z > 1.
 */
.sf-anu-visor.is-zoom .sf-anu-escena { touch-action: none; }

/* EL LIBRO. Una página en móvil, dos en escritorio (el ratio se dobla). */
/*
 * En MÓVIL el libro ocupa la caja entera y quien manda es la imagen, que se
 * encaja con `object-fit: contain`. Dar aquí una `aspect-ratio` y un `height:100%`
 * a la vez era pedirle al navegador dos cosas incompatibles: se quedaba con el
 * alto, calculaba un ancho mayor que la pantalla y la página salía cortada por la
 * derecha. Con la caja a pantalla completa y la foto encajándose dentro, cabe
 * siempre — en cualquier alto, con cualquier proporción de página.
 * En escritorio sí se le da proporción: ahí el libro son dos páginas y la forma
 * del pliego ES el objeto.
 */
.sf-anu-libro {
	position: relative;
	perspective: 2200px;
	height: 100%;
	width: 100%;
	transform-style: preserve-3d;
	transition: transform 0.25s ease;
	transform: scale(var(--z, 1)) translate(var(--px, 0px), var(--py, 0px));
	cursor: zoom-in;
}
.sf-anu-libro.is-zoom { cursor: grab; }
.sf-anu-libro.is-drag { cursor: grabbing; transition: none; }

/*
 * LA IMAGEN NO SE AGARRA (12/08/2026) — segunda de las tres cerraduras.
 *
 * `-webkit-user-drag: none` le dice al navegador que estas imágenes no son
 * arrastrables, y `pointer-events: none` hace que el puntero ni las vea: el
 * pointerdown aterriza en `.sf-anu-libro`, que es quien pasea. Con esto, el
 * fantasma semitransparente que se llevaba la página deja de existir.
 *
 * `user-select: none` va con ello: sin él, arrastrar sobre el libro selecciona
 * texto invisible y aparece el resaltado azul a media hoja.
 */
.sf-anu-libro img {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}
.sf-anu-libro { user-select: none; -webkit-user-select: none; }

/* Mientras se pasea, la transición estorba: el dedo tiene que ir pegado a la hoja. */
.sf-anu-libro.is-drag { will-change: transform; }

/* --- El botón de salir del zoom ---------------------------------------- */
.sf-anu-zoomout {
	position: absolute;
	left: 50%;
	bottom: clamp(3.25rem, 8vh, 4.5rem);
	transform: translateX(-50%) translateY(0.5rem);
	display: inline-flex; align-items: center; gap: 0.5em;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(11, 46, 31, 0.82);
	backdrop-filter: blur(6px);
	color: var(--wp--preset--color--crema, #f7f5ef);
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.8rem; letter-spacing: 0.08em;
	cursor: pointer;
	opacity: 0; visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	z-index: 4;
}
.sf-anu-visor.is-zoom .sf-anu-zoomout {
	opacity: 1; visibility: visible;
	transform: translateX(-50%) translateY(0);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
.sf-anu-zoomout:hover { background: rgba(11, 46, 31, 0.95); }
.sf-anu-zoomout:focus-visible {
	outline: 2px solid var(--wp--preset--color--primario, #00a74d);
	outline-offset: 3px;
}

/* La pista cambia con el estado: cada una dice lo que se puede hacer AHORA. */
.sf-anu-visor__pista--zoom { display: none; }
.sf-anu-visor.is-zoom .sf-anu-visor__pista { display: none; }
.sf-anu-visor.is-zoom .sf-anu-visor__pista--zoom { display: block; }

.sf-anu-cara {
	position: absolute; top: 0; bottom: 0; width: 100%;
	overflow: hidden;
}
.sf-anu-cara img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* En móvil solo hay una cara: la derecha ocupa todo y la izquierda se esconde. */
.sf-anu-cara--izq { left: 0; display: none; }
.sf-anu-cara--der { left: 0; }

/* La hoja que gira. Bisagra en el lomo, dos caras, sin ver el dorso. */
.sf-anu-hoja {
	position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
	transform-style: preserve-3d;
	transform-origin: left center;
	transition: transform 0.72s cubic-bezier(0.3, 0.05, 0.3, 1);
	pointer-events: none;
	opacity: 0;
	z-index: 3;
}
.sf-anu-hoja.is-activa { opacity: 1; }
.sf-anu-hoja__cara {
	position: absolute; inset: 0;
	backface-visibility: hidden;
	overflow: hidden;
}
.sf-anu-hoja__cara img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sf-anu-hoja__cara--dorso { transform: rotateY(180deg); }
/* El giro. La sombra del lomo la lleva la propia hoja mientras viaja. */
.sf-anu-hoja.is-girando-next { transform: rotateY(-180deg); }
.sf-anu-hoja--prev { transform-origin: right center; transform: rotateY(180deg); }
.sf-anu-hoja--prev.is-girando-prev { transform: rotateY(0deg); }

.sf-anu-libro__lomo {
	position: absolute; top: 2%; bottom: 2%; left: 0; width: 2px;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.45), transparent);
	pointer-events: none; z-index: 4; opacity: 0;
}

/* Flechas: grandes, discretas, y fuera del camino del dedo en móvil. */
.sf-anu-flecha {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 46px; height: 46px; display: grid; place-items: center;
	font-size: 1.25rem; color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border: 0; border-radius: 50%; cursor: pointer; z-index: 5;
	transition: background-color 0.18s ease, opacity 0.18s ease;
}
.sf-anu-flecha:hover { background: rgba(255, 255, 255, 0.24); }
.sf-anu-flecha[disabled] { opacity: 0.25; cursor: default; }
.sf-anu-flecha--prev { left: clamp(0.4rem, 1.5vw, 1.1rem); }
.sf-anu-flecha--next { right: clamp(0.4rem, 1.5vw, 1.1rem); }

.sf-anu-visor__pista {
	margin: 0; padding: 0 1rem 0.9rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.7rem; letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.45);
}

/* Con el visor abierto, el cuerpo no se mueve por detrás. */
body.sf-anu-bloqueado { overflow: hidden; }

/* ===========================================================================
 * ESCRITORIO — el libro se abre en dos páginas
 * ========================================================================= */
@media (min-width: 900px) {
	.sf-anu-libro { width: auto; aspect-ratio: 2 / var(--ratio, 1.414); max-width: 100%; }
	.sf-anu-cara { width: 50%; background: var(--sf-anu-papel); }
	.sf-anu-hoja__cara { background: var(--sf-anu-papel); }
	.sf-anu-cara--izq {
		display: block; left: 0; border-radius: 4px 0 0 4px;
		box-shadow: inset -18px 0 30px -22px rgba(0, 0, 0, 0.75), 0 30px 70px -30px rgba(0, 0, 0, 0.8);
	}
	.sf-anu-cara--der {
		left: 50%; border-radius: 0 4px 4px 0;
		box-shadow: inset 18px 0 30px -22px rgba(0, 0, 0, 0.75), 0 30px 70px -30px rgba(0, 0, 0, 0.8);
	}
	.sf-anu-hoja { left: 50%; width: 50%; }
	.sf-anu-hoja--prev { left: 0; }
	.sf-anu-libro__lomo { left: 50%; transform: translateX(-50%); opacity: 1; }
}

/* ===========================================================================
 * REDUCED-MOTION — el paso ocurre, pero no se anima
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.sf-anu-hoja { transition: none; }
	.sf-anu-tomo__btn { transition: none; }
	.sf-anu-visor { transition: none; }
	.sf-anu-libro { transition: none; }
}