/* =====================================================================
   UBICACIÓN — Destino Castilla (LTSM-5458)
   Figma cb3izHyJ3uWqfAzbtHjEGP · página "9. Ubicación"
     desktop 1366 -> ubicacion1-pp-desktop  ·  mobile 375 -> ubicacion1-pp-mobile

   Cuatro bloques: el mapa con filtros, el carrusel de vistas aéreas, el
   embed de Google (solo si el BackOffice trae el código) y "Cerca de ti".
   El mapa y las píldoras son el componente compartido con el Home; su
   estilo está en css/sections/mapa-ubicacion.css.

   Mobile-first, igual que home.css: la base es el frame de 375 y el layout
   de 1366 entra en @media (min-width: 1200px).
   ===================================================================== */

.uc-page {
	--hc-dark:    #302e12;
	--hc-olive:   #4a482a;
	--hc-lime:    #a6a64f;
	--hc-lime-3:  #c4ca85;
	--hc-gold:    #b08524;
	--hc-gold-6:  #9c7420;
	--hc-white:   #ffffff;
	--hc-radius:  24px;
	/* Verde del antetítulo del carrusel. Viene tal cual del Figma, que en
	   esta página reutiliza artboards de Parque Prado (`-pp-`): no es un
	   token de la paleta de Castilla. PENDIENTE (diseño): confirmarlo. */
	--uc-vista-kicker: #18988b;

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

.uc-eyebrow {
	font-size: 14px; line-height: 17px; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase; color: var(--hc-gold);
}
.uc-display {
	font-size: 36px; line-height: 40px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .005em; color: var(--hc-white);
}

/* =====================================================================
   1. TODO A TU ALCANCE — mapa con filtros
   ===================================================================== */
/* En el teléfono el mapa va a sangre, de borde a borde, como en Sotobosque:
   la sección deja de tener padding lateral y se lo pasa al texto y a los
   puntos de paginación, que son lo único que debe respetar el margen. */
.uc-mapa { background: var(--hc-dark); padding: 40px 0 48px; }
.uc-mapa__stage { max-width: 1366px; margin: 0 auto; }
.uc-mapa .uc-eyebrow,
.uc-mapa .uc-display,
.uc-mapa .hc-ubic__leyenda { padding-left: 24px; padding-right: 24px; }
.uc-mapa__col .uc-display { margin-top: 8px; }
.uc-mapa .hc-ubic__map { margin-top: 32px; width: 100%; }

/* Y vertical: el recorte de la página es apaisado (755x663) y a ancho completo
   se queda en una banda baja, mientras el diseño móvil lo quiere más alto que
   ancho (343x419). En vez de exportar otra imagen y calibrarla otra vez, se
   enseña una ventana de 543 px de la misma: el lienzo se ensancha a la medida
   del mapa completo y se corre hasta dejar a la vista la franja que interesa
   —de x=204 a x=747—, que es donde caen todos los puntos. Como los puntos van
   dentro del lienzo, se mueven con él y siguen sobre su calle. */
/* El `!important` es el caso para el que existe: la proporción del encuadre la
   escribe el partial en un estilo en línea —viene de la calibración, que es de
   PHP— y desde la hoja no hay otra forma de pedir una distinta. */
.uc-mapa .hc-ubic__map { --hc-mapa-ratio: 543 / 663 !important; border-radius: 0; }
.uc-mapa .hc-ubic__lienzo { right: auto; width: 139.04%; left: -37.57%; }

/* En el teléfono las categorías son puntos de paginación y su sitio es DEBAJO
   del mapa, que es lo que paginan. En el markup viven en la columna del texto
   —donde van en escritorio—, así que aquí la columna se disuelve con
   `display: contents` y sus hijos se ordenan junto al mapa como si fueran
   hermanos. Es sólo colocación: el orden del DOM, y con él el del teclado y
   el lector de pantalla, no cambia. */
.uc-mapa__stage { display: flex; flex-direction: column; }
.uc-mapa__col { display: contents; }
.uc-mapa .hc-ubic__map { order: 1; }
.uc-mapa .hc-ubic__leyenda { order: 2; }

/* El mapa de esta página es el recorte CLARO del Figma, al revés que el del
   Home. El pin se invierte con él: en lima sobre un fondo casi blanco no se
   ve, así que aquí el cuerpo va oscuro y el azulejo, claro. Las ondas siguen
   al cuerpo, que es de donde toman el color. */
.uc-mapa .hc-ubic__pin {
	--hc-pin-cuerpo: var(--hc-olive, #4a482a);
	color: var(--hc-lime-3, #c4ca85);
}
/* La tarjeta de la categoría nace pensada para el mapa oscuro; sobre el claro
   necesita un filo que la despegue del fondo. */
.uc-mapa .hc-ubic__tarjeta { border: 1px solid rgba(48, 46, 18, .1); }

/* =====================================================================
   2. VISTAS AÉREAS — carrusel
   ===================================================================== */
.uc-vistas { position: relative; height: 420px; overflow: hidden; background: var(--hc-dark); }
.uc-vistas__slide {
	position: absolute; inset: 0; opacity: 0;
	transition: opacity .45s ease; pointer-events: none;
}
.uc-vistas__slide.is-active { opacity: 1; pointer-events: auto; }
.uc-vistas__slide img { width: 100%; height: 100%; object-fit: cover; }
/* El Figma oscurece la foto para que el rótulo se lea sobre la ciudad. */
.uc-vistas__slide::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,20,10,.15) 0%, rgba(20,20,10,.45) 55%, rgba(20,20,10,.2) 100%);
}
.uc-vistas__info {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	z-index: 2; width: 100%; padding: 0 72px; text-align: center;
}
.uc-vistas__kicker {
	font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--uc-vista-kicker);
}
.uc-vistas__titulo {
	margin-top: 6px; font-size: 32px; line-height: 38px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .01em; color: var(--hc-white);
	text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.uc-vistas__nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 0; cursor: pointer;
	border-radius: 50%; border: 1px solid rgba(255,255,255,.85);
	background: transparent; color: #fff;
	transition: background .18s ease;
}
.uc-vistas__nav:hover { background: rgba(255,255,255,.18); }
.uc-vistas__nav:focus-visible { outline: 2px solid var(--hc-lime-3); outline-offset: 3px; }
.uc-vistas__nav--prev { left: 16px; }
.uc-vistas__nav--next { right: 16px; }
.uc-vistas__nav svg { width: 16px; height: 16px; }

/* =====================================================================
   3. MAPA DE GOOGLE — el vivo si hay API key, si no el embed
   ===================================================================== */
.uc-embed { background: var(--hc-dark); }
.uc-embed__marco { position: relative; width: 100%; height: 320px; overflow: hidden; }
.uc-embed__marco iframe { display: block; width: 100%; height: 100%; border: 0; }

/* --------------------------- el mapa vivo -----------------------------
   El lienzo nace transparente y aparece cuando Google confirma que pintó
   sus teselas: mientras tanto se ve el pin sobre el fondo de la sección,
   que es mejor que el gris de un mapa a medio cargar. Si Google no llega a
   responder, el lienzo se queda invisible y el pin es lo que queda. */
.uc-embed__lienzo { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.uc-embed.is-listo .uc-embed__lienzo { opacity: 1; }

.uc-embed__espera {
	position: absolute; inset: 0; display: flex;
	align-items: center; justify-content: center;
	transition: opacity .35s ease, visibility 0s linear .35s;
}
/* `visibility` y no sólo `opacity`: el pin del marcador de Google es un clon
   de éste, y dos elementos con el mismo aria-label le harían anunciar el
   proyecto dos veces al lector de pantalla. Oculto de verdad, sale del árbol. */
.uc-embed.is-listo .uc-embed__espera { opacity: 0; visibility: hidden; pointer-events: none; }

/* Dentro de la banda el pin no se coloca por coordenada —lo hace Google, o el
   centro del hueco mientras carga—, así que aquí manda un tamaño fijo. El
   selector lleva el ancestro a propósito: el componente del pin define su
   ancho en porcentaje del mapa y con una sola clase ganaría el que se cargue
   de último. */
.uc-embed .uc-embed__pin { width: 64px; }
.uc-embed .uc-embed__pin .hc-ubic__pin-gota {
	animation: hc-pin-cae .7s cubic-bezier(.24, 1.4, .5, 1) both;
}

/* El enlace a la app de mapas: lo que de verdad busca quien mira esta banda
   es cómo llegar, y eso lo resuelve mejor su teléfono que un mapa incrustado. */
.uc-embed__ruta {
	position: absolute; right: 16px; bottom: 16px; z-index: 2;
	display: inline-flex; align-items: center; gap: 8px;
	height: 44px; padding: 0 18px; border-radius: 40px;
	background: var(--hc-white, #fff); box-shadow: 0 6px 18px rgba(20, 20, 10, .3);
	font-size: 14px; font-weight: 700; line-height: 1;
	color: var(--hc-olive, #4a482a); text-decoration: none;
}
.uc-embed__ruta:hover { color: var(--hc-gold, #b08524); }
.uc-embed__ruta:focus-visible { outline: 2px solid var(--hc-lime-3, #c4ca85); outline-offset: 3px; }

/* =====================================================================
   4. CERCA DE TI
   ===================================================================== */
.uc-cerca { background: var(--hc-olive); padding: 56px 0 64px; }
.uc-cerca__intro { padding: 0 24px; }
.uc-cerca__intro .uc-display { margin-top: 8px; }
.uc-cerca__lista { margin-top: 40px; }

.uc-cerca__fila { position: relative; padding: 0 24px; }
.uc-cerca__fila + .uc-cerca__fila { margin-top: 40px; }
.uc-cerca__foto { position: relative; z-index: 1; border-radius: 0; overflow: hidden; }
.uc-cerca__foto img { width: 100%; height: auto; aspect-ratio: 839 / 500; object-fit: cover; }

/* El zigzag del Figma también en el teléfono: la foto **sangra hasta el borde
   de la pantalla** —al izquierdo en una fila, al derecho en la siguiente— y el
   rótulo se va con ella. El margen queda sólo del lado contrario, que es lo
   que da el vaivén; dejarlo a los dos lados, como estaba, convierte el zigzag
   en tres fotos centradas casi iguales.

   El artboard de 375 pone la foto de borde a 52, o de 52 a borde: 14%. */
.uc-cerca__fila--der { padding-left: 0; padding-right: 14%; }
.uc-cerca__fila--izq { padding-left: 14%; padding-right: 0; }

.uc-cerca__label {
	position: relative; z-index: 2; margin-top: 16px;
	font-size: 20px; line-height: 26px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .01em; color: var(--hc-white);
}
/* El rótulo se alinea del lado de SU foto. La foto llega al borde, pero el
   texto no: entra los mismos 24 px con que respira el resto de la página. */
.uc-cerca__fila--der .uc-cerca__label { padding-left: 24px; text-align: left; }
.uc-cerca__fila--izq .uc-cerca__label { padding-right: 24px; text-align: right; }

/* La "Ð" de marca asoma por detrás, del lado contrario a la foto: es lo que
   llena el aire que deja el sangrado. */
.uc-cerca__textura {
	position: absolute; z-index: 0; width: 148px; height: 148px;
	background-color: rgba(166, 166, 79, .18);
	-webkit-mask: url(../../images/isotipo-castilla.svg) no-repeat center / contain;
	        mask: url(../../images/isotipo-castilla.svg) no-repeat center / contain;
	top: -34px;
}
.uc-cerca__fila--der .uc-cerca__textura { left: auto; right: 6px; }
.uc-cerca__fila--izq .uc-cerca__textura { right: auto; left: 6px; }

/* =====================================================================
   TABLET
   ===================================================================== */
@media (min-width: 768px) {
	.uc-mapa { padding: 64px 48px 72px; }
	/* De tablet para arriba vuelven las dos columnas del diseño, con las
	   píldoras dentro de la del texto: se deshace el `display: contents` del
	   teléfono y el orden vuelve a ser el del DOM. El mapa deja de ir a sangre
	   y vuelve entero, así que el lienzo se recoloca y el padding regresa a la
	   sección. */
	.uc-mapa .uc-eyebrow,
	.uc-mapa .uc-display,
	.uc-mapa .hc-ubic__leyenda { padding-left: 0; padding-right: 0; }
	.uc-mapa .hc-ubic__map { --hc-mapa-ratio: 755 / 663 !important; border-radius: var(--hc-radius); }
	.uc-mapa .hc-ubic__lienzo { left: 0; right: 0; width: auto; }
	.uc-mapa__col { display: block; }
	.uc-mapa .hc-ubic__map, .uc-mapa .hc-ubic__leyenda { order: 0; }
	.uc-mapa__stage { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); column-gap: 48px; align-items: start; }
	.uc-mapa .hc-ubic__map { margin-top: 0; width: 100%; justify-self: end; }

	.uc-vistas { height: 520px; }
	.uc-vistas__titulo { font-size: 44px; line-height: 50px; }
	.uc-vistas__nav { width: 48px; height: 48px; }
	.uc-vistas__nav--prev { left: 32px; }
	.uc-vistas__nav--next { right: 32px; }

	.uc-embed__marco { height: 460px; }

	.uc-cerca { padding: 80px 0 96px; }
	.uc-cerca__intro { padding: 0 48px; }
	.uc-cerca__lista { margin-top: 56px; }
	.uc-cerca__fila { display: grid; align-items: center; padding: 0 48px; }
	.uc-cerca__fila + .uc-cerca__fila { margin-top: 0; }
	.uc-cerca__fila--der { grid-template-columns: minmax(0, 62%) minmax(0, 38%); }
	.uc-cerca__fila--izq { grid-template-columns: minmax(0, 38%) minmax(0, 62%); }
	.uc-cerca__fila--izq .uc-cerca__foto { order: 2; }
	.uc-cerca__fila--izq .uc-cerca__label { order: 1; }
	/* De tablet para arriba el rótulo va en su propia celda del grid, así que
	   se deshacen la alineación y las sangrías con que el teléfono lo pega al
	   borde de su foto. */
	.uc-cerca__label { margin-top: 0; font-size: 26px; line-height: 32px; }
	.uc-cerca__fila--der .uc-cerca__label,
	.uc-cerca__fila--izq .uc-cerca__label { padding: 0 24px; text-align: left; }
	.uc-cerca__textura { width: 150px; height: 150px; top: 50%; transform: translateY(-50%); }
	.uc-cerca__fila--der .uc-cerca__textura { left: auto; right: 26%; }
	.uc-cerca__fila--izq .uc-cerca__textura { right: auto; left: 26%; }
}

/* =====================================================================
   ESCRITORIO — coordenadas del frame de 1366
   ===================================================================== */
@media (min-width: 1200px) {
	/* El Figma arranca el bloque de texto en x=158 y cierra el mapa en
	   x=1293; de ahí los paddings asimétricos. Y como esos márgenes ya los
	   pone el padding, lo que queda para el contenido son 1135 px, no los
	   1366 del frame: declararlos enteros le regalaba al grid 231 px de más
	   —el mapa se iba al borde derecho y dejaba un hueco en medio—.
	   El reparto del diseño es 356 de texto + 25 de aire + 755 de mapa. */
	.uc-mapa { padding: 107px 73px 96px 158px; }
	.uc-mapa__stage { max-width: 1135px; grid-template-columns: 356px minmax(0, 1fr); column-gap: 25px; }
	/* El mapa ocupa su columna entera, los 755 del Figma. La proporción la
	   escribe el partial a partir del encuadre —aquí el claro apaisado, de
	   755x663—, así que el alto sale solo y queda a 44 px del diseño. */
	.uc-mapa .hc-ubic__map { width: 100%; }
	.uc-mapa__col .uc-display { font-size: 52px; line-height: 56px; }
	/* Las píldoras del Figma miden 242x53 con 18 px entre ellas, más
	   estrechas que la columna de 356 que ocupa el título. Todas iguales: la
	   activa cambia de color, no de tamaño. */
	/* Las cinco miden lo mismo, 242x53 con 18 px entre ellas, como el Figma.
	   El `li` se estira solo con `align-items: stretch`, pero el botón que
	   lleva dentro es `inline-flex` y se quedaba con el ancho de su texto
	   —«Bancos» a menos de la mitad que «Comercios y conveniencia»—, así que
	   la lista salía como una escalera. */
	.uc-mapa .hc-ubic__filtros { max-width: 242px; gap: 18px; }
	.uc-mapa .hc-ubic__filtros li { display: flex; }
	.uc-mapa .hc-ubic__filtro { width: 100%; height: 53px; padding: 0 22px; font-size: 14px; }
	/* La activa sobresale 50 px, como en Sotobosque. Cabe de sobra: la lista
	   mide 242 dentro de una columna de 356, así que crece hacia el aire que
	   queda antes del mapa y no empuja nada. */
	.uc-mapa .hc-ubic__filtro.is-active { width: 292px; }

	.uc-vistas { height: 728px; }
	.uc-vistas__kicker { font-size: 14px; letter-spacing: .14em; }
	.uc-vistas__titulo { margin-top: 8px; font-size: 56px; line-height: 62px; }
	.uc-vistas__nav { width: 56px; height: 56px; }
	.uc-vistas__nav--prev { left: 48px; }
	.uc-vistas__nav--next { right: 48px; }
	.uc-vistas__nav svg { width: 18px; height: 18px; }

	.uc-embed__marco { height: 600px; }

	.uc-cerca { padding: 206px 0 0; }
	/* Las filas colocan sus piezas con las coordenadas exactas del frame de
	   1366 (foto en x=48 o x=479, rótulo en x=1032, la Ð en x=995). Eso sólo
	   se lee como el diseño si el bloque mide 1366: sin límite, en una
	   pantalla de 1920 las medidas se cuentan desde el borde y todo queda
	   apelmazado a la izquierda con medio ancho vacío a la derecha. */
	.uc-cerca__intro { max-width: 1366px; margin: 0 auto; padding: 0 156px; }
	.uc-cerca__intro .uc-eyebrow { font-size: 16px; }
	.uc-cerca__intro .uc-display { margin-top: 20px; font-size: 48px; line-height: 52px; }
	.uc-cerca__lista { max-width: 1366px; margin: 164px auto 0; }

	/* Las filas del Figma miden 500 px y las fotos 839x500: se tocan en
	   vertical y alternan izquierda/derecha formando el zigzag. */
	.uc-cerca__fila { display: block; height: 500px; padding: 0; }
	.uc-cerca__foto { position: absolute; top: 0; width: 839px; height: 500px; }
	.uc-cerca__foto img { height: 100%; aspect-ratio: auto; }
	.uc-cerca__fila--der .uc-cerca__foto { left: 48px; }
	.uc-cerca__fila--izq .uc-cerca__foto { left: 479px; }

	.uc-cerca__label {
		position: absolute; top: 50%; transform: translateY(-50%);
		margin: 0; padding: 0; font-size: 32px; line-height: 38px;
	}
	.uc-cerca__fila--der .uc-cerca__label { left: 1032px; right: 48px; }
	.uc-cerca__fila--izq .uc-cerca__label { left: 48px; right: auto; width: 400px; }

	.uc-cerca__textura { width: 197px; height: 199px; top: 50%; transform: translateY(-50%); }
	.uc-cerca__fila--der .uc-cerca__textura { left: 995px; right: auto; }
	.uc-cerca__fila--izq .uc-cerca__textura { left: 10px; right: auto; }
}