/*
 * La columna visual usa 50vw a propósito (no --container-max): tiene que
 * llegar siempre del centro de la pantalla al borde izquierdo real,
 * salga o no del ancho de 1400px del resto del sitio.
 *
 * El collage de fotos está posicionado en % (no en los px fijos de
 * Figma) para que escale con ese 50vw en vez de quedar pixel-locked.
 * Referencia usada para convertir: mitad del ancho de sección de Figma
 * (1551/2 ≈ 775.5) y el alto total de esa sección (867).
 *
 * Se simplificó la forma orgánica del mapa de fondo (un mask-image de
 * Figma con un recorte irregular) a un rectángulo simple con las
 * mismas esquinas redondeadas que el resto del sitio -- el mask no
 * escala de forma predecible a anchos de viewport arbitrarios.
 */

.donde-es-editor-preview {
	background-color: var(--color-amarillo);
	border: 3px solid var(--color-negro);
	color: var(--color-negro);
	padding: 24px;
	font-family: var(--font-body);
}

.donde-es-editor-preview strong {
	display: block;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.donde-es-editor-preview p {
	margin: 0;
}

/*
 * ⚠️ min-height: las 4 fotos del collage (.donde-es__foto--*) están
 * posicionadas en % de la altura de `.donde-es__visual`, calculados
 * contra la referencia original de Figma (867px de alto). Achicar la
 * tipografía/espaciado del texto de la derecha (La Plata, "es en",
 * Argentina — ver más abajo) bajó la altura natural de esa columna
 * por debajo del piso original de 600px, así que la fila terminó
 * midiendo justo esos 600px — mucho menos que los ~867px contra los
 * que se calcularon los porcentajes del collage, y las fotos
 * quedaron visualmente más juntas de lo esperado. Primer intento:
 * 820px (acercando a la referencia original) — el usuario lo vio de
 * más y pidió un punto medio entre el original (600px) y ese primer
 * intento: quedó en **710px**.
 */
.donde-es {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background-color: var(--color-amarillo);
	min-height: 710px;
	/*
	 * position:relative acá (no solo en .donde-es__visual) es lo que
	 * hace que, cuando una foto se desborda por el parallax, se dibuje
	 * por ENCIMA de la sección siguiente en vez de quedar tapada por
	 * ella. Un elemento posicionado siempre pinta por delante de sus
	 * hermanos no posicionados en flujo normal, sin importar el orden
	 * en el HTML.
	 */
	position: relative;
}

.donde-es__visual {
	width: 50vw;
	flex-shrink: 0;
	position: relative;
	isolation: isolate;
	background-color: var(--color-amarillo);
	/*
	 * El mapa se desborda de este contenedor a propósito por izquierda
	 * (y las fotos por abajo, con el parallax) — pero por ARRIBA no:
	 * ahí el mapa queda visiblemente "asomado" por fuera de la
	 * sección, cosa que no se quiere. clip-path con top:0 recorta
	 * justo en el borde superior de este contenedor, dejando los otros
	 * tres lados sin límite (valores negativos grandes) para que el
	 * resto de los desbordes intencionales sigan funcionando igual.
	 */
	clip-path: inset(0 -100vw -100vw -100vw);
}

/*
 * Mapa nuevo (mapa-laplata.jpg, portado del frame node-id=3-454
 * actualizado): ya no es un rectángulo de bordes duros — el archivo
 * mismo difumina sus bordes a blanco, que con mix-blend-mode:multiply
 * se funde con el amarillo de fondo y desaparece solo, sin necesitar
 * un recorte con esquina redondeada como el mapa viejo. Por eso ya no
 * hay overflow:hidden ni border-radius acá.
 *
 * El mapa además se desborda del contenedor (antes solo pasaba en
 * mobile) — posición y tamaño convertidos a % de la columna de 50vw,
 * misma referencia que el resto del collage (1551/2 ≈ 775.5 de ancho,
 * 867 de alto): Figma lo ubica en left:-111px/top:-12.55px con
 * 922×839px sobre esa referencia.
 */
.donde-es__mapa-clip {
	position: absolute;
	left: -14.31%;
	top: -1.45%;
	width: 118.89%;
	/*
	 * ⚠️ Corregido: antes tenía height:96.77% calculado con una
	 * referencia distinta a la del width (867px de alto vs 775.5px de
	 * ancho de columna) — la caja resultante no tenía la misma
	 * proporción que la imagen real, y object-fit:cover recortaba el
	 * borde inferior para "llenar" esa caja desproporcionada.
	 * aspect-ratio con las dimensiones reales del archivo (1200×1168)
	 * hace que la altura salga sola de esa misma proporción, así la
	 * caja SIEMPRE tiene la relación de aspecto exacta de la imagen —
	 * no hay margen para que cover (ni contain) tengan que recortar.
	 */
	aspect-ratio: 1200 / 1168;
	/*
	 * ⚠️ Corregido: sin techo, en pantallas anchas el `aspect-ratio`
	 * podía darle al mapa más alto del que realmente mide
	 * `.donde-es__visual` — y como el `clip-path` de ahí solo recorta
	 * el borde SUPERIOR (el inferior queda libre a propósito, para que
	 * las fotos con parallax puedan desbordar hacia la sección
	 * siguiente), el mapa se estiraba de más y terminaba tapando el
	 * contenido de la sección de abajo (Sedes) con su fondo amarillo
	 * opaco. `max-height:100%` lo topea a la altura real de la
	 * columna — `object-fit:contain` en `.donde-es__mapa` se encarga
	 * de que la imagen igual se vea completa (más chica si hace
	 * falta) en vez de recortarse.
	 */
	max-height: 100%;
	/* Si el borde del contenedor no queda 100% cubierto por la imagen
	   (recorte de object-fit:cover, offsets del desborde en mobile),
	   que se vea amarillo ahí en vez del blanco de fondo por defecto. */
	background-color: var(--color-amarillo);
}

.donde-es__mapa {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/*
	 * contain, no cover: pedido explícito de que la imagen nunca se
	 * recorte. Con el aspect-ratio de arriba ya coincidiendo con el
	 * de la imagen real, contain y cover dan el mismo resultado en la
	 * práctica — contain es la opción a prueba de futuros cambios de
	 * imagen que no respeten esa proporción exacta.
	 */
	object-fit: contain;
	display: block;
	/* Multiply sobre el fondo amarillo: el blanco de la imagen se
	   funde con el amarillo (desaparece a la vista) y solo quedan
	   visibles los negros del mapa. Estaba en el Figma original
	   (mix-blend-multiply) y se había perdido al simplificar la
	   máscara orgánica a un rectángulo. */
	mix-blend-mode: multiply;
}

.donde-es__foto {
	position: absolute;
	overflow: hidden;
	box-sizing: border-box;
	will-change: transform;
}

.donde-es__foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/*
 * Alto en cada caja: en vez de un % fijo (que asumía un recorte
 * específico de Figma), se usa aspect-ratio con las proporciones
 * reales de cada archivo — así la foto nunca se recorta ni cambia de
 * relación de aspecto, solo escala. Los valores salen de las
 * dimensiones nativas de cada PNG en assets/.
 */

.donde-es__foto--srico {
	left: 4.26%;
	top: 17.31%;
	width: 40.75%;
	max-width: 316px;
	aspect-ratio: 816 / 756;
	border-top-left-radius: 40px;
	border-bottom-right-radius: 40px;
}

.donde-es__foto--gentelinda {
	left: 53.38%;
	top: 3.86%;
	width: 49.78%;
	max-width: 386px;
	aspect-ratio: 1020 / 756;
	border-top-right-radius: 40px;
	border-bottom-left-radius: 40px;
}

.donde-es__foto--gentelinda img {
	transform: scaleX(-1);
}

.donde-es__foto--rarabn {
	left: 4.26%;
	top: 67.07%;
	width: 46.55%;
	max-width: 361px;
	aspect-ratio: 1036 / 625;
	border-top-left-radius: 30px;
	border-bottom-right-radius: 30px;
}

.donde-es__foto--puravida {
	left: 57%;
	top: 51.38%;
	width: 39.2%;
	max-width: 304px;
	aspect-ratio: 1036 / 844;
	border-top-left-radius: 40px;
	border-bottom-right-radius: 40px;
}

.donde-es__texto {
	flex: 1 1 0%;
	min-width: 320px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 96px var(--container-padding) 96px calc(var(--container-padding) + 24px);
	color: var(--color-negro);
}

.donde-es__heading {
	margin: 0;
}

/*
 * ⚠️ margin-bottom negativo (node-id=3-454/227-70): corrige el leading
 * propio de Fit/Inter en esta línea para acercarla a "La Plata" de
 * abajo. El frame trae -20px literal, pero el usuario lo vio
 * demasiado apretado y pidió más aire — quedó en **-10px** (desktop),
 * ajustado a ojo por encima del valor del frame, no un dato de Figma.
 */
.donde-es__linea1 {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: -10px;
}

.donde-es__wordmark {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(40px, 6vw, 96px);
	line-height: 1;
	letter-spacing: 0.02em;
}

.donde-es__wordmark-outline,
.donde-es__wordmark-solid {
	display: inline-block;
}

.donde-es__wordmark-outline {
	color: transparent;
	-webkit-text-stroke: 0.006em var(--color-negro);
	text-stroke: 0.006em var(--color-negro);
}

.donde-es__wordmark-solid {
	color: var(--color-negro);
	margin-left: 0.008em;
}

.donde-es__es-en {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(20px, 2.5vw, 36px);
	/* Literal, no em: el frame usa el mismo -1.3px tanto en desktop (36px) como en mobile (24px), no una proporción. */
	letter-spacing: -1.3px;
}

/*
 * ⚠️ "La Plata" pasó de Fit a **Inter Black (900)** (node-id=3-454
 * actualizado) — antes compartía el wordmark tipográfico `Fit` del
 * resto del sitio, ahora es la primera vez que este elemento puntual
 * usa Inter en vez de Fit. El tope del clamp bajó de 248px a 150px
 * (el frame ya no llega tan grande); el mínimo (64px) se mantuvo
 * igual al no tener una razón para cambiarlo. Letter-spacing literal
 * (-3px, no em) porque el frame repite el mismo valor en desktop
 * (150px) y mobile (96px) sin escalar proporcionalmente.
 */
.donde-es__ciudad {
	display: block;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: clamp(64px, 13vw, 120px);
	line-height: 1;
	letter-spacing: -3px;
}

.donde-es__pais {
	display: block;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(22px, 3.5vw, 36px);
	margin-top: 12px;
}

/* ⚠️ Bajó de 32px a 16px (node-id=3-454 actualizado). */
.donde-es__heading + .donde-es__parrafo {
	margin-top: 16px;
}

/* ⚠️ Bajó de 20px a 16px, igual en desktop y mobile (ambos frames coinciden en 16px). */
.donde-es__parrafo {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: normal;
	max-width: 620px;
	margin: 0;
}

/* 16px entre el bloque de párrafos y el botón, mismo gap que separa el resto de los grupos de este título. */
.donde-es__parrafo + .donde-es__cta {
	margin-top: 16px;
}

/*
 * Botón nuevo "Ver sedes" (node-id=3-454/227-70) — no existía antes.
 * Mismo tratamiento visual que los botones "secundarios" del resto
 * del sitio (borde sin relleno, sobre fondo amarillo): reposo borde+
 * texto negro, hover relleno negro deslizante + texto amarillo. Ver
 * "Hover de botones" en CLAUDE.md para el patrón completo.
 */
.donde-es__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	padding: 24px;
	border: 2px solid var(--color-negro);
	border-radius: 2px;
	border-bottom-right-radius: 16px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--color-negro);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: color 0.35s ease;
}

/*
 * ⚠️ `inset: -2px` (no `0`) — este botón, a diferencia de los
 * primarios, tiene un borde real (2px). Un hijo `position:absolute`
 * con `inset:0` se posiciona desde el borde INTERNO del padre (el
 * "containing block" de un elemento absoluto es la caja de padding,
 * no la de borde) — con `inset:0` el relleno quedaba 2px más chico
 * que el botón completo, pero heredaba (`border-radius:inherit`) el
 * radio pensado para la caja GRANDE, así que la curva no cerraba
 * bien contra el borde real durante la animación (mismo síntoma que
 * tuvieron los primarios, causa distinta). Con `inset:-2px` el
 * relleno ocupa la caja de borde completa — incluso "de más" no
 * importa, `overflow:hidden` del botón igual lo recorta — y ahí sí
 * el radio heredado coincide con el borde real.
 */
.donde-es__cta::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: var(--color-negro);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s cubic-bezier(0.7, 0, 0.2, 1);
	z-index: -1;
}

@media (hover: hover) {
	.donde-es__cta:hover {
		color: var(--color-amarillo);
	}

	.donde-es__cta:hover::before {
		transform: scaleX(1);
		transform-origin: left;
	}
}

.donde-es__cta:focus-visible {
	color: var(--color-amarillo);
	outline: 3px solid var(--color-negro);
	outline-offset: 3px;
}

.donde-es__cta:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
	.donde-es__cta,
	.donde-es__cta::before {
		transition: none;
	}
}

.donde-es__cta-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url('assets/icon-flecha-abajo.svg') no-repeat center / contain;
	mask: url('assets/icon-flecha-abajo.svg') no-repeat center / contain;
}

/*
 * ⚠️ Breakpoint propio de 920px (no el 768px general del sitio) —
 * pedido explícito: el layout de 50vw se ve raro en el punto medio
 * entre 768 y ~920px (columna visual angosta pero todavía al lado del
 * texto en vez de apilada), así que acá se apila antes que el resto
 * de las secciones. Único bloque del sitio con su propio breakpoint
 * — si en algún momento --container-padding deja de combinar bien
 * con esto (cambia a 24px recién a los 768px globales, no a los 920
 * de acá), revisar.
 */
@media (max-width: 920px) {
	.donde-es {
		flex-direction: column;
		/*
		 * El desborde hacia la sección SIGUIENTE (fotos con parallax)
		 * ya funcionaba solo por orden de DOM (donde-es pinta después
		 * de postulate). Pero para que el mapa se superponga hacia
		 * ARRIBA, sobre el final de postulate, hace falta forzarlo con
		 * z-index — si no, sin una pila explícita, quedaba un corte
		 * justo en el borde en vez de superponerse.
		 */
		position: relative;
		z-index: 1;
		/*
		 * El min-height:600px de desktop (pensado para la columna de
		 * 50vw + texto en fila) sobraba en mobile: si el contenido
		 * apilado (visual + texto) medía menos que eso, flex lo dejaba
		 * arriba (justify-content:flex-start por default) y quedaba
		 * espacio de más del color de fondo de la sección abajo, antes
		 * de la sección siguiente — se ve como un salto/espacio en
		 * blanco. Con min-height:0 la sección mide justo lo que ocupa
		 * su contenido, sin sobrante arriba ni abajo.
		 */
		min-height: 0;
	}

	/*
	 * El collage absoluto de desktop (pensado para una columna de 50vw)
	 * pasa a zigzag apilado en flujo normal: cada foto en flex-column
	 * con gap, sin left/top fijos. El alto ya no se fuerza con
	 * min-height — lo da el contenido apilado.
	 */
	.donde-es__visual {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 24px;
		/*
		 * Sin padding-top: cualquier espacio ahí, aunque el mapa
		 * bordee por detrás, se leía como un salto entre el mapa y el
		 * borde de la sección. El padding-bottom sí queda, para no
		 * pegar la última foto directo contra .donde-es__texto.
		 */
		padding: 0 0 40px;
	}

	/*
	 * ⚠️ En mobile el criterio es DISTINTO al de desktop: acá el mapa
	 * tiene que funcionar como fondo que sostiene visualmente las 4
	 * fotos apiladas — tiene que cubrir toda esa altura sí o sí, y para
	 * eso puede (tiene que) recortarse solo por los costados con los
	 * bordes del viewport. No aplica la regla de "nunca se recorta" de
	 * desktop, que ahí es porque hay que ver el mapa completo; acá es
	 * una textura de fondo. Por eso `aspect-ratio` se anula (`auto`) y
	 * la altura la da directamente `top`+`bottom` (estira a la altura
	 * real de `.donde-es__visual`, que es la de las 4 fotos apiladas +
	 * gaps), no una proporción fija — y el `object-fit` pasa a `cover`
	 * más abajo, pisando el `contain` de desktop.
	 */
	.donde-es__mapa-clip {
		top: -64px;
		left: -80px;
		right: -80px;
		bottom: 0;
		width: auto;
		height: auto;
		aspect-ratio: auto;
	}

	.donde-es__mapa {
		object-fit: cover;
	}

	/*
	 * Zigzag: cada foto pasa de position:absolute (collage superpuesto)
	 * a position:relative (flujo normal, se apilan en el orden del
	 * HTML). A diferencia de desktop, acá cada foto tiene que "cruzar"
	 * su mitad de ancho (izquierda o derecha) en vez de quedarse
	 * contenida en ella — por eso el ancho pasa a un 68% fijo (pisando
	 * el % y el max-width por foto pensados para el collage de
	 * desktop), para que al alinearse a un extremo sobrepase el centro
	 * hacia el otro lado.
	 */
	.donde-es__foto {
		position: relative;
		left: auto;
		top: auto;
		width: 68%;
		max-width: none;
	}

	/*
	 * Margen de 16px del lado externo de cada foto (referencia:
	 * node-id=227-70, srico/puravida quedan a 16px del borde izquierdo,
	 * gentelinda/rarabn casi pegadas al derecho) — antes quedaban
	 * pegadas al borde real del viewport, sin ningún aire.
	 */
	.donde-es__foto--srico,
	.donde-es__foto--rarabn {
		align-self: flex-start;
		margin-left: 16px;
	}

	.donde-es__foto--gentelinda,
	.donde-es__foto--puravida {
		align-self: flex-end;
		margin-right: 16px;
	}

	/* ⚠️ Bajó de 96px a 80px (node-id=227-70 actualizado). */
	.donde-es__wordmark {
		font-size: 80px;
	}

	/* ⚠️ Mismo criterio que desktop: el frame trae -11px, se aflojó a ojo por pedido del usuario. */
	.donde-es__linea1 {
		margin-bottom: -5px;
	}

	.donde-es__es-en {
		font-size: 24px;
	}

	/*
	 * ⚠️ Bajó de 120px a 96px (node-id=227-70 actualizado), y después a
	 * **92px** — a 96px el usuario vio que "La Plata" saltaba a una
	 * segunda línea en mobile, pedido explícito de achicarlo un toque
	 * para que entre en una sola línea. El letter-spacing ya es -3px
	 * literal desde la regla base, no cambia por breakpoint.
	 */
	.donde-es__ciudad {
		font-size: 92px;
	}

	.donde-es__pais {
		font-size: 24px;
	}

	.donde-es__texto {
		padding: 48px var(--container-padding);
	}
}