/* =====================================================================
   AVANCES DE OBRA — Destino Castilla (LTSM-5683)
   Figma cb3izHyJ3uWqfAzbtHjEGP · página "14. Avances de obra"
     desktop 1366 x 680 -> 31139:217527   ·   mobile 375 x 705 -> 31139:217637
     modal de video                       ->  31139:217580
   Mobile-first. Todo bajo .ao-page: esta plantilla es autocontenida y no
   recibe styles.min.css, así que aquí no se hereda nada de Mariscal.
   ===================================================================== */

.ao-page {
	--ao-dark:   #302e12;   /* primary/B950 — también el placeholder de la foto */
	--ao-gold:   #b08524;   /* secondary/base — la X del modal                  */
	--ao-gold-6: #9c7420;
	--ao-white:  #ffffff;
	--ao-scrim:  rgba(20, 20, 43, .72);

	background: var(--ao-dark);
	color: var(--ao-white);
	font-family: 'Montserrat', sans-serif;
}
/* Reset con especificidad (0,1,0), igual que .hc-page: cualquier regla de
   clase posterior puede ajustar márgenes sin pelear con él. */
.ao-page *,
.ao-page *::before,
.ao-page *::after { box-sizing: border-box; }
.ao-page * { margin: 0; }
.ao-page img { display: block; max-width: 100%; }

/* ------------------------------ el slider --------------------------- */
/* Alto fijo desde el primer paint: el header de Castilla es transparente y
   se superpone (position:absolute), así que la sección ocupa la pantalla
   entera y el contenido se despeja por dentro con padding. `svh` y no `vh`
   para que la barra del navegador móvil no recorte el botón. */
.ao-slider {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--ao-dark);
	padding: 84px 0 0;          /* alto del .site-header */
}

.ao-slides { position: absolute; inset: 0; z-index: 0; }
.ao-slide {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity .5s ease-in-out;
}
.ao-slide.is-active { opacity: 1; }
.ao-slide img { width: 100%; height: 100%; object-fit: cover; }

/* Velo: sobre una foto clara (cielo, polvo) el texto blanco se pierde. En el
   Figma la mitad izquierda está notablemente más oscura que la derecha. */
.ao-slider::after {
	content: '';
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,.10) 100%);
	pointer-events: none;
}

/* ---------------------------- el contenido -------------------------- */
.ao-box {
	position: relative; z-index: 2;
	width: min(1092px, 100%);       /* 80% de los 1366 del Figma */
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.ao-nav { display: flex; gap: 24px; }

.ao-round {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; padding: 0;
	border-radius: 50%; border: 1px solid var(--ao-white);
	background: transparent; color: var(--ao-white);
	cursor: pointer;
	transition: background .18s ease;
}
.ao-round:hover { background: rgba(255,255,255,.14); }
.ao-round--next svg { transform: rotate(180deg); }
.ao-round--gold {
	background: transparent; border-color: var(--ao-gold); color: var(--ao-gold);
	width: 56px; height: 56px;
}
.ao-round--gold:hover { background: rgba(176,133,36,.16); }
.ao-round [class^="icon-"] { font-size: 22px; line-height: 1; }

.ao-kicker {
	font-size: 20px; line-height: 32px; font-weight: 500;
	text-transform: uppercase; letter-spacing: .01em;
	color: var(--ao-white);
}

/* ------------------------------ paneles ----------------------------- */
/* Los paneles se apilan en la misma celda del grid: así el alto lo fija el
   más alto de todos y el bloque no da un salto al cambiar de mes. */
.ao-panels { display: grid; width: 100%; }
.ao-panel {
	grid-area: 1 / 1;
	opacity: 0; visibility: hidden;
	transition: opacity .5s ease-in-out, visibility .5s ease-in-out;
}
.ao-panel.is-active { opacity: 1; visibility: visible; }

.ao-title {
	font-size: 36px; line-height: 42px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .005em;
	max-width: 300px;
	color: var(--ao-white);
}

.ao-play {
	display: inline-flex; align-items: center; gap: 20px;
	margin-top: 24px;
	height: 64px; padding: 0 32px;
	border-radius: 100px; border: 2px solid var(--ao-white);
	background: transparent; color: var(--ao-white);
	font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1;
	/* Sin uppercase a propósito: en el Figma el rótulo del botón es lo único
	   de la pantalla que va en caja mixta ("Reproducir Video"), frente al
	   kicker y el mes, que sí son versales. */
	letter-spacing: .02em;
	cursor: pointer; white-space: nowrap;
	transition: background .18s ease, color .18s ease;
}
.ao-play:hover { background: var(--ao-white); color: var(--ao-dark); }
.ao-play__icon { display: inline-flex; }

/* ------------------------------- modal ------------------------------ */
.ao-modal {
	position: fixed; inset: 0; z-index: 2000;
	display: flex; align-items: center; justify-content: center;
	background: var(--ao-scrim);
	padding: 24px;
}
.ao-modal[hidden] { display: none; }
.ao-modal__dialog {
	position: relative;
	width: min(960px, 100%);
	padding-top: 72px;      /* despeja la X, que va fuera del video */
}
.ao-modal__close { position: absolute; right: 0; top: 0; }
.ao-video {
	position: relative;
	width: 100%; aspect-ratio: 16 / 9;
	border-radius: 16px; overflow: hidden;
	background: #000;
}
.ao-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* El iframe de YouTube tarda: sin esto el hueco se queda negro y parece roto.
   El JS lo esconde en el `load` del iframe. */
.ao-video__loader {
	position: absolute; top: 50%; left: 50%;
	width: 48px; height: 48px; margin: -24px 0 0 -24px;
	border: 3px solid rgba(255,255,255,.2);
	border-top-color: var(--ao-white);
	border-radius: 50%;
	animation: ao-spin .8s linear infinite;
}
.ao-video__loader[hidden] { display: none; }

@keyframes ao-spin { to { transform: rotate(360deg); } }

/* Quien pidió menos movimiento no quiere ver girar nada, ni los fundidos. */
@media (prefers-reduced-motion: reduce) {
	.ao-slide,
	.ao-panel { transition: none; }
	.ao-video__loader { animation: none; }
}

body.ao-modal-open { overflow: hidden; }

/* ============================== desktop ============================== */
@media (min-width: 768px) {
	.ao-title { font-size: 56px; line-height: 62px; max-width: 450px; }
	.ao-play  { height: 72px; padding: 0 40px; font-size: 18px; }
	.ao-round { width: 56px; height: 56px; }
}

@media (min-width: 1200px) {
	.ao-box { padding: 0; }
	/* En el Figma el bloque no está centrado: se apoya en la mitad baja del
	   frame, con las flechas asomando por encima del título. */
	.ao-slider { align-items: flex-end; padding-bottom: 116px; }
}