/* =====================================================================
   AMENIDADES — Destino Castilla (LTSM-5678 / LTSM-5462)
   Figma cb3izHyJ3uWqfAzbtHjEGP · página "8. Amenidades"
     desktop 1366 x 12331 -> 31134:108903  ·  mobile 375 x 9531 -> 31134:109196

   Cinco bloques: hero, las 12 bandas de amenidad, el plano por niveles,
   el cierre de marca y RESERVA.

   Mobile-first, igual que home.css y ubicacion.css: la base es el frame de
   375 y el layout de 1366 entra en @media (min-width: 1200px). El Figma NO
   trae frame de tablet; el tramo de 768 se derivó aquí.
   ===================================================================== */

.am-page {
	--am-dark:      #302e12;   /* tarjetas y paneles oscuros            */
	--am-olive:     #4a482a;   /* primary/900, fondo del frame          */
	--am-olive-mid: #656531;   /* primary/700, textura entre las fotos  */
	--am-brown:     #37220f;   /* secondary/900, cierre                 */
	--am-gold:      #c39a3d;   /* títulos de las tarjetas               */
	--am-lime:      #a6a64f;
	--am-white:     #ffffff;
	--am-paper:     #fcfcfc;

	/* Reparto del componente de amenidad en el frame de 1366:
	   foto angosta 479 · textura 84 · foto ancha 803. En `fr` para que el
	   bloque conserve la proporción del Figma a cualquier ancho. */
	--am-ang:  479fr;
	--am-gut:   84fr;
	--am-anch: 803fr;

	background: var(--am-olive);
	color: var(--am-white);
	font-family: 'Montserrat', sans-serif;
	overflow-x: hidden;
}
.am-page *,
.am-page *::before,
.am-page *::after { box-sizing: border-box; }
.am-page * { margin: 0; }
.am-page ul, .am-page ol { list-style: none; padding: 0; }
.am-page img { display: block; max-width: 100%; }

.am-eyebrow {
	font-size: 14px; line-height: 17px; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase; color: var(--am-gold);
}
.am-display {
	font-size: 30px; line-height: 34px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .005em;
}

/* La "Ð" de marca, que en el Figma asoma detrás del cierre y de RESERVA. */
.am-cierre__isotipo,
.am-reserva__isotipo {
	display: block;
	-webkit-mask: url(../../images/isotipo-castilla.svg) no-repeat center / contain;
	        mask: url(../../images/isotipo-castilla.svg) no-repeat center / contain;
}

/* =====================================================================
   1. HERO
   ===================================================================== */
.am-hero {
	position: relative;
	background: var(--am-paper);
	color: var(--am-dark);
	padding: 40px 24px 0;
}
/* Banda oliva sobre la que se apoya la tarjeta, como en el diseño. */
.am-hero::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0;
	height: 120px; background: var(--am-olive-mid);
}
/* Indicador "Desliza" del Figma. Oculto por defecto: el diseno lo coloca en
   el margen izquierdo del frame de 1366, y en 375 el hero no tiene margen
   lateral donde alojarlo. Se enciende en @media (min-width: 1200px). */
.am-hero__deslizar { display: none; }

.am-hero__intro { max-width: 720px; margin: 0 auto; text-align: center; }
.am-hero__titulo { color: var(--am-dark); }
.am-hero__texto {
	margin-top: 16px; font-size: 15px; line-height: 24px; color: #4a4a3a;
}
.am-hero__tarjeta {
	position: relative; z-index: 1;
	margin: 32px auto 0; max-width: 1054px;
	background: var(--am-dark); color: var(--am-white);
	overflow: hidden;
}
.am-hero__foto img { width: 100%; height: 220px; object-fit: cover; }
.am-hero__lista { padding: 24px; }
.am-hero__lista-titulo { color: var(--am-white); }
.am-hero__lista-lead {
	margin-top: 8px; font-size: 13px; line-height: 18px; color: rgba(255,255,255,.72);
}
/* Dos columnas que se llenan de arriba abajo, como el listado del Figma
   (Lobby…Sport Lounge a la izquierda, Pool…Panoramic Lounge a la derecha).
   Con `columns` y no con grid, para que el reparto siga siendo correcto si
   desde el admin cargan más o menos de doce. */
.am-hero__items { margin-top: 16px; columns: 2; column-gap: 16px; }
.am-hero__items li {
	position: relative; padding-left: 14px; margin-bottom: 6px;
	break-inside: avoid; -webkit-column-break-inside: avoid;
	font-size: 13px; line-height: 18px; color: rgba(255,255,255,.9);
}
.am-hero__items li::before {
	content: '·'; position: absolute; left: 2px; top: -1px;
	color: var(--am-lime); font-size: 18px; line-height: 18px;
}

/* =====================================================================
   2. LAS 12 AMENIDADES
   ===================================================================== */
.am-lista { background: var(--am-olive); padding: 0 0 24px; }

.am-disclaimer {
	padding: 14px 24px;
	font-size: 10px; line-height: 14px; color: rgba(255,255,255,.6);
}

.am-bloque { position: relative; }
.am-bloque + .am-bloque { margin-top: 48px; }
.am-bloque__foto { overflow: hidden; }
.am-bloque__foto img { width: 100%; height: 240px; object-fit: cover; }

/* Criterio 2 de LTSM-5462: al pasar el cursor, la imagen responde con una
   transicion suave. El zoom va sobre la <img> y el recorte lo contiene la
   figura, asi la banda no cambia de tamano ni empuja a la siguiente.

   Solo donde hay cursor de verdad: en tactil `:hover` se queda pegado
   despues del toque y la foto se quedaria ampliada sin que nadie la haya
   pedido. El bloque de "reducir movimiento" del final tambien lo apaga. */
.am-bloque__foto img { transition: transform .5s ease, filter .5s ease; }

@media (hover: hover) {
	.am-bloque__foto:hover img { transform: scale(1.05); filter: brightness(1.08); }
}
/* En móvil las dos fotos se apilan y la textura queda como una franja fina. */
.am-bloque__textura { display: block; height: 8px; background: var(--am-olive-mid); }

.am-bloque__mensaje {
	position: relative; z-index: 2;
	margin: -56px 16px 0;
	padding: 16px 20px 18px;
	background: var(--am-dark);
}
.am-bloque__titulo {
	font-size: 18px; line-height: 22px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .02em; color: var(--am-gold);
}
.am-bloque__texto {
	margin-top: 8px; font-size: 13px; line-height: 19px; color: rgba(255,255,255,.92);
}

/* =====================================================================
   3. ENCUENTRA TUS ESPACIOS FAVORITOS — plano por niveles
   ===================================================================== */
.am-plano {
	position: relative; overflow: hidden;
	background: var(--am-olive-mid);
	padding: 48px 24px 56px; text-align: center;
}
/* La "Ð" gigante que el Figma deja asomando detrás del panel (capa
   `textura`). Tamaño y posición aproximados a ojo sobre el frame de 1366:
   el archivo es de solo lectura y no se puede aislar la capa para medirla.
   PENDIENTE (diseño): confirmar contra el original. */
.am-plano::before {
	content: ''; position: absolute; z-index: 0; pointer-events: none;
	width: 850px; height: 850px;
	top: 50%; left: 50%; transform: translate(-50%, -50%);
	background-color: rgba(48, 46, 18, .18);
	-webkit-mask: url(../../images/isotipo-castilla.svg) no-repeat center / contain;
	        mask: url(../../images/isotipo-castilla.svg) no-repeat center / contain;
}
.am-plano__titulo { position: relative; z-index: 1; color: var(--am-white); }
/* prev + panel + next: el mismo auto-layout horizontal de `Frame 1373`. */
.am-plano__carrusel {
	position: relative; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	gap: 8px; margin-top: 28px;
}
.am-plano__viewport { flex: 1 1 auto; min-width: 0; max-width: 672px; }
.am-plano__nivel { display: none; }
.am-plano__nivel.is-active { display: block; }
/* El panel ya trae su propio fondo #302E12 dentro de la imagen. */
.am-plano__nivel img { width: 100%; height: auto; }
.am-plano__nav {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 0; cursor: pointer;
	border-radius: 50%; border: 1px solid var(--am-paper);
	background: transparent; color: var(--am-paper);
	transition: background .18s ease;
}
.am-plano__nav:hover:not(:disabled) { background: rgba(255,255,255,.18); }
.am-plano__nav:focus-visible { outline: 2px solid var(--am-gold); outline-offset: 3px; }
/* Con un solo nivel las flechas se quedan en su sitio —son parte de la
   silueta del diseño— pero sin nada a donde navegar. Se encienden solas
   en cuanto el admin carga el segundo nivel. */
.am-plano__nav:disabled { opacity: .35; cursor: default; }
.am-plano__nav svg { width: 16px; height: 16px; }

/* =====================================================================
   4. CIERRE
   ===================================================================== */
.am-cierre {
	background: var(--am-brown); padding: 48px 24px 56px; text-align: center;
}
.am-cierre__isotipo {
	width: 56px; height: 56px; margin: 0 auto 16px;
	background-color: var(--am-gold);
}
.am-cierre__titulo {
	font-size: 26px; line-height: 32px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em; color: var(--am-white);
}
.am-cierre__texto {
	max-width: 760px; margin: 14px auto 0;
	font-size: 14px; line-height: 22px; color: rgba(255,255,255,.86);
}

/* =====================================================================
   5. RESERVA
   ===================================================================== */
.am-reserva { background: var(--am-paper); color: var(--am-dark); padding: 40px 24px 48px; }
.am-reserva__stage { max-width: 1160px; margin: 0 auto; }
.am-reserva__foto { position: relative; }
.am-reserva__foto img { width: 100%; height: 240px; object-fit: cover; }
.am-reserva__isotipo {
	position: absolute; z-index: 0; left: -18px; top: 50%;
	transform: translateY(-50%);
	width: 90px; height: 90px; background-color: var(--am-lime);
}
.am-reserva__info { margin-top: 24px; }
.am-reserva__titulo {
	margin-top: 10px;
	font-size: 26px; line-height: 32px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .01em; color: var(--am-dark);
}
.am-btn {
	display: inline-flex; align-items: center; gap: 10px;
	margin-top: 22px; padding: 14px 26px;
	border-radius: 999px; background: var(--am-gold); color: #fff;
	font-size: 14px; line-height: 18px; font-weight: 600;
	text-decoration: none; transition: background .18s ease;
}
/* :visited explícito: sin él el navegador pinta el texto con su morado por
   defecto en cuanto la URL está en el historial, y sobre el dorado se lee
   fatal. Es el mismo motivo por el que hay que declararlo en el chrome. */
.am-btn:visited { color: #fff; }
.am-btn:hover, .am-btn:focus { background: #a8842f; color: #fff; }
.am-btn:focus-visible { outline: 2px solid var(--am-dark); outline-offset: 3px; }

/* =====================================================================
   TABLET — derivado: el Figma no trae frame de 768
   ===================================================================== */
@media (min-width: 768px) {
	.am-display { font-size: 38px; line-height: 44px; }

	.am-hero { padding: 64px 48px 0; }
	.am-hero::after { height: 160px; }
	.am-hero__texto { font-size: 16px; line-height: 26px; }
	.am-hero__tarjeta {
		margin-top: 48px;
		display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
		align-items: stretch;
	}
	.am-hero__foto img { height: 100%; min-height: 300px; }
	.am-hero__lista { padding: 32px; }
	.am-hero__items li { font-size: 14px; }

	.am-lista { padding-bottom: 40px; }
	.am-disclaimer { padding: 18px 48px; font-size: 11px; }

	.am-bloque {
		display: grid; align-items: stretch;
		grid-template-columns: minmax(0, 38%) 12px minmax(0, 1fr);
	}
	.am-bloque--ang-der { grid-template-columns: minmax(0, 1fr) 12px minmax(0, 38%); }
	.am-bloque--ang-der .am-bloque__foto--angosta { order: 3; }
	.am-bloque--ang-der .am-bloque__textura      { order: 2; }
	.am-bloque--ang-der .am-bloque__foto--ancha  { order: 1; }
	.am-bloque + .am-bloque { margin-top: 56px; }
	.am-bloque__foto img { height: 380px; }
	.am-bloque__textura { height: auto; }
	.am-bloque__mensaje {
		position: absolute; bottom: 0; z-index: 2;
		margin: 0; width: 330px; padding: 18px 24px 20px;
	}
	.am-bloque--ang-izq .am-bloque__mensaje { left: 24%; }
	.am-bloque--ang-der .am-bloque__mensaje { right: 24%; }

	.am-plano { padding: 72px 32px 80px; }
	.am-plano__carrusel { gap: 24px; }
	.am-plano__nav { width: 48px; height: 48px; }

	.am-cierre { padding: 72px 48px 80px; }
	.am-cierre__isotipo { width: 72px; height: 72px; }
	.am-cierre__titulo { font-size: 34px; line-height: 40px; }
	.am-cierre__texto { font-size: 15px; line-height: 24px; }

	.am-reserva { padding: 64px 48px 72px; }
	.am-reserva__stage {
		display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
		column-gap: 56px; align-items: center;
	}
	.am-reserva__foto img { height: 340px; }
	.am-reserva__info { margin-top: 0; }
	.am-reserva__titulo { font-size: 34px; line-height: 40px; }
}

/* =====================================================================
   ESCRITORIO — coordenadas del frame de 1366
   ===================================================================== */
@media (min-width: 1200px) {
	.am-display { font-size: 44px; line-height: 50px; }

	/* Hero: 1366x832. Título en y=173, párrafo en y=266 y la tarjeta de
	   1054x346 centrada arrancando en y=483 (x=156). */
	.am-hero { padding: 100px 0 0; height: 832px; }
	.am-hero::after { height: 210px; }

	/* Texto vertical y una linea fina, con las medidas del Figma: el bloque
	   mide 17x148 y arranca en x=48, y=360 del hero de 832. Como el hero de
	   este tramo tiene la altura exacta del frame, las coordenadas valen
	   tal cual. */
	.am-hero__deslizar {
		display: block; position: absolute; left: 48px; top: 360px;
		width: 17px; height: 148px; z-index: 1;
	}
	.am-hero__deslizar span {
		display: block; writing-mode: vertical-rl;
		font-size: 12px; line-height: 17px; letter-spacing: .12em;
		color: rgba(48, 46, 18, .55);
	}
	.am-hero__deslizar::after {
		content: ''; display: block; margin: 16px auto 0;
		width: 1px; height: 64px; background: rgba(48, 46, 18, .35);
	}
	.am-hero__intro { max-width: 760px; }
	.am-hero__texto { margin-top: 24px; font-size: 17px; line-height: 28px; }
	.am-hero__tarjeta {
		margin-top: 56px; max-width: 1054px; height: 346px;
		grid-template-columns: 539px minmax(0, 1fr);
	}
	.am-hero__foto img { height: 346px; min-height: 0; }
	.am-hero__lista { padding: 36px 40px; }
	.am-hero__lista-titulo { font-size: 32px; line-height: 38px; }
	.am-hero__lista-lead { margin-top: 10px; font-size: 14px; }
	.am-hero__items { margin-top: 20px; column-gap: 32px; }
	.am-hero__items li { font-size: 14px; line-height: 20px; }

	/* Las bandas miden 1366x680 y van separadas por 96 px, con 96 px de
	   respiro antes de la primera (auto-layout del Figma).

	   Las columnas van en `fr` con los números del Figma (479/84/803) en vez
	   de en píxeles: así el bloque se centra y escala en pantallas que no
	   miden exactamente 1366 sin salirse ni dejar un hueco a la derecha. */
	.am-lista { padding: 0 0 96px; }
	.am-disclaimer {
		max-width: 1366px; margin: 0 auto;
		padding: 24px 0 0; text-align: center; font-size: 11px;
	}
	.am-bloque {
		max-width: 1366px; margin: 96px auto 0;
		aspect-ratio: 1366 / 680;
		grid-template-columns: var(--am-ang) var(--am-gut) var(--am-anch);
	}
	.am-bloque--ang-der { grid-template-columns: var(--am-anch) var(--am-gut) var(--am-ang); }
	.am-bloque + .am-bloque { margin-top: 96px; }
	.am-bloque__foto { height: 100%; }
	.am-bloque__foto img { height: 100%; }

	/* La tarjeta mide 330 px y se monta sobre la textura: arranca en x=315
	   (dentro de la foto angosta) y cierra en x=645, ya sobre la ancha. En
	   porcentaje del frame para que acompañe al bloque cuando escala. */
	.am-bloque__mensaje { width: 24.16%; padding: 22px 26px 24px; }
	.am-bloque--ang-izq .am-bloque__mensaje { left: 23.06%; right: auto; }
	.am-bloque--ang-der .am-bloque__mensaje { right: 23.06%; left: auto; }
	.am-bloque__titulo { font-size: 22px; line-height: 26px; }
	.am-bloque__texto { margin-top: 10px; font-size: 14px; line-height: 20px; }

	/* Plano: sección de 1366x955. El panel mide 672x656 y las flechas 56x56
	   a 48 px a cada lado — medido sobre `Frame 1373`, que suma 880 de ancho
	   y queda centrado en el frame. */
	.am-plano { height: 955px; padding: 96px 0 0; }
	.am-plano__carrusel { gap: 48px; margin-top: 40px; }
	.am-plano__viewport { flex: 0 0 672px; width: 672px; }
	.am-plano__nav { width: 56px; height: 56px; }
	.am-plano__nav svg { width: 18px; height: 18px; }

	/* Cierre: 1366x452. */
	.am-cierre { height: 452px; padding: 90px 279px; }
	.am-cierre__isotipo { width: 84px; height: 84px; margin-bottom: 20px; }
	.am-cierre__titulo { font-size: 40px; line-height: 46px; }
	.am-cierre__texto { max-width: 808px; margin-top: 18px; font-size: 16px; line-height: 26px; }

	/* RESERVA: 1366x518, render de 512x399 a la izquierda. */
	.am-reserva { height: 518px; padding: 60px 0; display: flex; align-items: center; }
	.am-reserva__stage {
		width: 100%; max-width: 1160px;
		grid-template-columns: 512px minmax(0, 1fr); column-gap: 96px;
	}
	.am-reserva__foto img { height: 399px; }
	.am-reserva__isotipo { left: -60px; width: 150px; height: 150px; }
	.am-reserva__titulo { font-size: 42px; line-height: 48px; }
	.am-btn { margin-top: 30px; padding: 16px 32px; font-size: 15px; }
}

/* =====================================================================
   Respeta "reducir movimiento": las transiciones son decorativas.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.am-page * { transition: none !important; }
	/* Sin transicion, el zoom del hover seria un salto: se quita entero. */
	.am-bloque__foto:hover img { transform: none; filter: none; }
}