/* Hero de la portada + animaciones al hacer scroll (responsable: agente hero). */

/* ---------- Hero a pantalla completa ----------
   La foto cubre todo el hero. En escritorio es una versión horizontal del
   retrato con el fondo del estudio extendido a la izquierda (1867×1050 reales:
   no se amplía hasta ~1900 px de ancho). En el teléfono se usa el retrato
   vertical. Encima, solo lo esencial: el lugar, un titular, una frase y dos botones. */
.bib-hero {
	--bib-hero-black: #0A0A0A;
	--bib-hero-gold: var(--wp--preset--color--dorado, #D4A960);
	--bib-hero-pad: var(--wp--style--root--padding-left, 1.5rem);
	--bib-hero-wide: var(--wp--style--global--wide-size, 1200px);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	container-type: inline-size;
	display: grid;
	min-height: max(580px, min(calc(100svh - var(--bib-hero-offset, 7.4rem)), 980px));
	background: #262626;
	color: #fff;
}
.bib-hero.wp-block-group { margin-block: 0; }

/* Foto de fondo a todo el hero */
.bib-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
	overflow: hidden;
}
.bib-hero__media picture { display: contents; }
.bib-hero__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 72% 30%;
}
/* Degradado para leer el texto sin tapar la cara. */
.bib-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, .74) 32%, rgba(10, 10, 10, .26) 54%, rgba(10, 10, 10, 0) 66%),
		linear-gradient(0deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, 0) 22%);
}

/* Texto: el borde izquierdo coincide con el contenedor ancho del sitio. */
.bib-hero__inner {
	display: grid;
	min-width: 0;
	padding-block: clamp(3rem, 9vh, 6rem);
	padding-left: max(var(--bib-hero-pad), calc((100vw - var(--bib-hero-wide)) / 2));
	padding-left: max(var(--bib-hero-pad), calc((100cqi - var(--bib-hero-wide)) / 2));
	padding-right: var(--bib-hero-pad);
	box-sizing: border-box;
}
.bib-hero__content { position: relative; align-self: center; max-width: min(42rem, 52cqi); }

/* Texto: una línea pequeña con el lugar, el titular en la serifa de los
   títulos (dos líneas, la segunda en dorado) y una frase corta. Todo va
   dentro del h1 menos la frase, para que el título diga qué es y dónde. */
.bib-hero__title {
	margin: 0;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
}
.bib-hero__kicker {
	display: flex;
	align-items: center;
	gap: .875rem;
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 500;
	font-size: .8125rem;
	line-height: 1.4;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--bib-hero-gold);
}
.bib-hero__kicker::before {
	content: "";
	flex: none;
	width: 2.25rem;
	height: 1px;
	background: currentColor;
	transform-origin: 0 50%;
}
.bib-hero__headline {
	display: block;
	margin-top: 1.25rem;
	font-family: var(--wp--preset--font-family--bodoni-moda);
	font-weight: 500;
	font-size: clamp(2.6rem, 1rem + 3.7vw, 4.75rem);
	line-height: 1.06;
	letter-spacing: -.01em;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
	text-wrap: balance;
}
/* Cada línea del titular es su propia caja: la animación la descubre de abajo arriba. */
.bib-hero__row { display: block; }
.bib-hero__row > span { display: inline-block; }
.bib-hero__row--gold { color: var(--bib-hero-gold); }

.bib-hero__lead {
	margin: 1.5rem 0 0;
	max-width: 29rem;
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 400;
	font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
	line-height: 1.6;
	color: #E8E2D8;
	text-wrap: pretty;
}

.bib-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .875rem;
	margin-top: 2.25rem;
}
.bib-hero__actions .wp-block-button__link {
	padding: .9rem 1.9rem;
	text-decoration: none;
	text-align: center;
}
.bib-hero .bib-hero__ghost {
	background: transparent;
	color: var(--bib-hero-gold);
	border-color: var(--bib-hero-gold);
}
.bib-hero .bib-hero__ghost:hover,
.bib-hero .bib-hero__ghost:focus-visible {
	background: var(--bib-hero-gold);
	border-color: var(--bib-hero-gold);
	color: var(--bib-hero-black);
}

/* Tableta: la persona más a la derecha y un degradado algo más amplio. */
@media (max-width: 1023px) {
	.bib-hero { min-height: clamp(560px, calc(100svh - var(--bib-hero-offset, 7.4rem)), 780px); }
	.bib-hero__img { object-position: 80% 30%; }
	.bib-hero::after {
		background:
			linear-gradient(90deg, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, .76) 40%, rgba(10, 10, 10, .2) 64%, rgba(10, 10, 10, 0) 76%),
			linear-gradient(0deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, 0) 22%);
	}
	.bib-hero__content { max-width: min(30rem, 58cqi); }
}

/* Teléfono: retrato vertical a pantalla completa y el texto abajo. */
@media (max-width: 719px) {
	.bib-hero { min-height: calc(100svh - var(--bib-hero-offset, 6.5rem)); }
	.bib-hero__img { object-position: 50% 18%; }
	.bib-hero::after {
		background: linear-gradient(180deg, rgba(10, 10, 10, .08) 0%, rgba(10, 10, 10, 0) 30%, rgba(10, 10, 10, .78) 56%, rgba(10, 10, 10, .95) 100%);
	}
	.bib-hero__inner { padding: 1.75rem var(--bib-hero-pad) 2rem; }
	.bib-hero__content { align-self: end; max-width: none; }
	.bib-hero__kicker { gap: .625rem; font-size: .75rem; letter-spacing: .18em; }
	.bib-hero__kicker::before { width: 1.5rem; }
	.bib-hero__headline { margin-top: .875rem; font-size: clamp(2.25rem, 10.5vw, 2.875rem); }
	.bib-hero__lead { margin-top: 1rem; font-size: 1rem; line-height: 1.55; }
	.bib-hero__actions { margin-top: 1.5rem; gap: .625rem; }
	.bib-hero__actions .wp-block-button__link { flex: 1 1 auto; padding-inline: 1.1rem; }
}

/* ---------- Animación del hero (solo CSS, sin JS ni librerías) ----------
   1. La línea dorada pequeña se traza y el lugar aparece.
   2. Cada línea del titular sube desde una máscara (clip-path + transform:
      nada cambia de tamaño ni de lugar, no hay saltos).
   3. La frase y los botones se encienden.
   Todo termina en ~1,1 s. Con "reducir movimiento" queda quieto y completo. */
@media (prefers-reduced-motion: no-preference) {
	.bib-hero__kicker { animation: bib-hero-fade .6s ease-out .05s both; }
	.bib-hero__kicker::before { animation: bib-hero-trace .6s cubic-bezier(.65, 0, .3, 1) both; }
	.bib-hero__row { animation: bib-hero-mask .8s cubic-bezier(.2, .7, .2, 1) .15s both; }
	.bib-hero__row > span { animation: bib-hero-rise .8s cubic-bezier(.2, .7, .2, 1) .15s both; }
	.bib-hero__row--gold,
	.bib-hero__row--gold > span { animation-delay: .27s; }
	.bib-hero__lead { animation: bib-hero-fade .6s ease-out .45s both; }
	.bib-hero__actions { animation: bib-hero-fade .6s ease-out .5s both; }
}
@keyframes bib-hero-trace {
	from { transform: scaleX(0); }
	to { transform: none; }
}
@keyframes bib-hero-mask {
	from { clip-path: inset(0 -1em 0 -1em); }
	to { clip-path: inset(-.6em -1em -.6em -1em); }
}
@keyframes bib-hero-rise {
	from { transform: translateY(.6em); opacity: 0; }
	to { transform: none; opacity: 1; }
}
@keyframes bib-hero-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ---------- Aparición al hacer scroll (la clase la pone animations.js) ----------
   Solo un desvanecimiento corto, sin mover nada: así no parece que la
   página salte o cargue tarde. */
html.bib-anim .bib-reveal {
	opacity: 0;
	transition: none;
}
html.bib-anim .bib-reveal.is-in {
	opacity: 1;
	transition: opacity .45s ease-out var(--bib-delay, 0ms);
}

/* ---------- Separadores entre secciones de distinto color ----------
   (los crea animations.js). La sección de arriba cae sobre la siguiente
   con un arco suave —como el espejo arqueado del salón— y una línea dorada. */
/* El separador se dibuja encima del espacio superior que ya tiene la sección:
   no cambia el alto de nada (no hace saltar la página). */
.bib-has-divider { position: relative; }
.bib-divider {
	--bib-arc: clamp(22px, 3.2vw, 40px);
	position: absolute;
	inset: 0 0 auto;
	height: calc(var(--bib-arc) + 2px);
	pointer-events: none;
	z-index: 1;
	max-width: none !important;
	margin: 0 !important;
}
.bib-divider__arc {
	position: absolute;
	inset: 0 -6% auto;
	height: var(--bib-arc);
	background: var(--bib-prev, #0A0A0A);
	border-bottom: 1px solid rgba(212, 169, 96, .7);
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
	transform-origin: 50% 0;
}
.bib-divider__medal {
	position: absolute;
	left: 50%;
	top: var(--bib-arc);
	display: grid;
	place-items: center;
	width: clamp(38px, 4.4vw, 56px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #0A0A0A;
	border: 1px solid var(--wp--preset--color--dorado);
	box-shadow: 0 0 0 5px rgba(212, 169, 96, .12);
	transform: translate(-50%, -50%);
}
.bib-divider__medal img { width: 72%; height: auto; display: block; }
/* Entrada: el arco baja, la línea dorada se enciende y el medallón gira a su lugar. */
.bib-divider:not(.is-in) .bib-divider__arc { transform: scaleY(0); border-bottom-color: transparent; }
.bib-divider.is-in .bib-divider__arc {
	transform: none;
	border-bottom-color: rgba(212, 169, 96, .7);
	transition: transform .8s cubic-bezier(.2, .7, .2, 1), border-color .6s ease .45s;
}
.bib-divider:not(.is-in) .bib-divider__medal { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-90deg); }
.bib-divider.is-in .bib-divider__medal {
	opacity: 1;
	transform: translate(-50%, -50%);
	transition: opacity .5s ease .35s, transform .8s cubic-bezier(.3, 1.4, .5, 1) .35s;
}

/* Botones: un brillo dorado cruza el botón al pasar el mouse. */
.wp-element-button,
.wp-block-button__link { position: relative; overflow: hidden; isolation: isolate; }
.wp-element-button::after,
.wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
	transform: translateX(-120%);
	pointer-events: none;
}
.wp-element-button:hover::after,
.wp-block-button__link:hover::after { transform: translateX(120%); transition: transform .7s ease; }

/* Barra dorada de progreso de lectura. */
.bib-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--dorado-oscuro), var(--wp--preset--color--dorado), var(--wp--preset--color--dorado-claro));
	transform: scaleX(0);
	transform-origin: 0 50%;
	z-index: 1001;
	pointer-events: none;
}
.admin-bar .bib-progress { top: var(--wp-admin--admin-bar--height, 32px); }

/* Sombra del encabezado al bajar (sin cambiar su alto, para que nada salte). */
.bib-header { transition: box-shadow .35s ease; }
html.bib-scrolled .bib-header { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8); }

@media (prefers-reduced-motion: reduce) {
	html.bib-anim .bib-reveal { opacity: 1; transform: none; transition: none; }
	.bib-divider .bib-divider__arc, .bib-divider .bib-divider__medal { transition: none !important; }
	.wp-element-button::after, .wp-block-button__link::after { display: none; }
	.bib-progress { display: none; }
}
@media print {
	html.bib-anim .bib-reveal { opacity: 1; transform: none; }
}

/* ---------- Hero con logo (Beauty in Black) ----------
   Foto a pantalla completa, logo dorado al centro y los botones abajo. */
.bib-hero--logo { min-height: calc(100svh - var(--bib-hero-offset, 7.4rem)); }
.bib-hero--logo .bib-hero__img { object-position: 50% 35%; }
.bib-hero--logo::after {
	background:
		radial-gradient(ellipse 45% 55% at 50% 45%, rgba(10, 10, 10, .72) 0%, rgba(10, 10, 10, .25) 70%, rgba(10, 10, 10, 0) 100%),
		linear-gradient(180deg, rgba(10, 10, 10, .35) 0%, rgba(10, 10, 10, .1) 35%, rgba(10, 10, 10, .45) 70%, rgba(10, 10, 10, .9) 100%);
}
.bib-hero--logo .bib-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: clamp(2.5rem, 7vh, 5rem) var(--bib-hero-pad) clamp(2rem, 6vh, 3.5rem);
	text-align: center;
}
.bib-hero__logo { margin: auto 0 0; line-height: 0; }
.bib-hero__logo-img {
	display: block;
	width: clamp(220px, 30vw, 380px);
	height: auto;
	filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .55));
}
.bib-hero--logo .bib-hero__actions { margin: auto 0 0; justify-content: center; }
@media (max-width: 719px) {
	.bib-hero--logo .bib-hero__img { object-position: 50% 30%; }
	.bib-hero--logo::after {
		background:
			radial-gradient(ellipse 70% 40% at 50% 42%, rgba(10, 10, 10, .68) 0%, rgba(10, 10, 10, 0) 100%),
			linear-gradient(180deg, rgba(10, 10, 10, .2) 0%, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, .85) 100%);
	}
	.bib-hero__logo-img { width: min(68vw, 280px); }
	.bib-hero--logo .bib-hero__actions { display: grid; grid-template-columns: 1fr; gap: .625rem; width: 100%; }
	.bib-hero--logo .bib-hero__actions .wp-block-button__link { width: 100%; box-sizing: border-box; }
}
@media (prefers-reduced-motion: no-preference) {
	.bib-hero__logo { animation: bib-hero-fade .9s ease-out .1s both; }
	.bib-hero--logo .bib-hero__actions { animation: bib-hero-fade .6s ease-out .5s both; }
}