/* Pagina Info — Un Poema Studio
   Medidas del Figma "Cambios web": desktop 2:289 (frame 1920), mobile 2:452 (frame 1080).
   Ver docs/figma-specs.md */

.ups-info {
	display: grid;
	grid-template-columns: minmax(0, 33%) minmax(0, 47%);
	column-gap: 20%;
	align-items: start;
}

/* WordPress envuelve los hijos de un grupo en .wp-block-group__inner-container,
   asi que sin esto los items del grid serian el wrapper y no los grupos. */
.ups-info > .wp-block-group__inner-container { display: contents; }

/* --- columna de texto (izquierda en desktop) --- */
.ups-info__texto { grid-column: 1; grid-row: 1; }
.ups-info__foto  { grid-column: 2; grid-row: 1; }

/* Figma: ES 24px, pero Flor lo vio muy grande → 18px (pedido de Matias 2026-09-10).
   lh 29.04 (=1.21) / #000 / columna 591px */
.ups-info__es {
	max-width: 591px;
	margin: 0;
	font-size: 18px;
	line-height: 1.21;
	color: #000000;
}
/* Separacion entre parrafos del castellano: la daba WordPress en 32px via
   margin-block-end. Ojo: el `margin-bottom` de la regla de arriba NO la pisa
   (logica gana sobre fisica), hay que declararla como margin-block-end y con
   mas especificidad. Bajada a 1.35em = 24.3px (pedido de Matias 2026-09-10). */
.ups-info p.ups-info__es { margin-block-end: 1.35em; }

/* Figma: EN 18px / columna 388px. Bajado a 14px y columna mas angosta para
   agrandar el aire contra la foto (pedido de Matias 2026-09-10). */
.ups-info__en {
	max-width: 320px;
	margin: 2em 0 0;
	font-size: 14px;
	line-height: 1.21;
	color: #6B6B6B;
}
.ups-info__en a { color: inherit; }

/* --- foto --- */
.ups-info__foto figure { margin: 0; }
.ups-info__img img {
	display: block;
	width: 100%;
	height: auto;
}
/* Hover de foto (decision de la reu): en desktop la foto 2 (estudio, attachment
   3257, activada 2026-09-24) va superpuesta a la foto 1 y aparece al pasar el
   mouse. Las dos tienen distinta proporcion (1154x858 vs 1600x1068), por eso
   la 2 se recorta con object-fit al tamaño de la 1 y la caja no salta. */
@media (min-width: 1025px) {
	.ups-info__foto { position: relative; }
	.ups-info__img--2 {
		position: absolute;
		inset: 0;
		margin: 0;
		opacity: 0;
		transition: opacity .25s ease;
		pointer-events: none;
	}
	.ups-info__img--2 img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.ups-info__foto:hover .ups-info__img--2 { opacity: 1; }
}

/* el mail al pie es solo del layout mobile */
.ups-info__mail { display: none; }

/* ---------- MOBILE (frame 1080 = 360 CSS px) ----------
   Orden del Figma: foto, texto ES, texto EN, foto 2, mail. */
@media (max-width: 1024px) {
	.ups-info {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	/* Separacion header -> foto. Dos cosas la producian:
	   1) 24px de padding-top que mete el tema en .entry-content-wrap;
	   2) 26px de un margen colapsado del tema, que no sale de ningun
	      margin/padding visible en la cadena de ancestros (revisado uno por uno)
	      y que solo se mueve con margen negativo. NO es el clearfix de
	      main.wrap::before: probado con display:none y no cambia.
	   Resultado medido a 390px: 26 - 8 = 18px, que es lo pedido.
	   Ojo: el -8px es un offset contra esos 26px, no un valor absoluto. Si algun
	   dia el tema cambia ese margen, hay que volver a medir. Esta hoja se encola
	   solo en la page 89, asi que nada de esto afecta al resto del sitio. */
	.entry-content-wrap { padding-top: 0; margin-top: -8px; }
	.ups-info__foto,
	.ups-info__foto > .wp-block-group__inner-container { display: contents; }
	.ups-info__texto { order: 2; }

	/* Figma: img1 y=190 x=30 w=1019 h=1409 sobre 1080 → 94.4% y recorte vertical */
	/* Ojo: `margin: 0 auto` NO centra ni separa acá — WordPress define los
	   margenes como propiedades logicas y le ganan a las fisicas. Hay que
	   escribir margin-inline / margin-block-end. Mismo caso que los parrafos. */
	.ups-info__img--1 {
		order: 1;
		width: 100%;
		margin-inline: 0;
		margin-block-end: 2rem;
	}
	.ups-info__img--1 img {
		aspect-ratio: 1019 / 1409;
		object-fit: cover;
	}

	/* Figma: img2 x=177 w=725 h=1002 sobre 1080 → 67% centrada */
	.ups-info__img--2 {
		display: block;
		order: 3;
		width: 67%;
		margin-block-start: 3rem;
	}
	/* especificidad extra para ganarle al margin-inline de WordPress */
	.ups-info .ups-info__img--2 { margin-inline: auto; }
	.ups-info__img--2 img {
		aspect-ratio: 725 / 1002;
		object-fit: cover;
	}

	/* Mismos costados que la foto (pedido de Matias 2026-09-10): las dos al
	   ancho del contenedor, que ya trae 24px de padding del tema. */
	.ups-info__texto { order: 2; width: 100%; margin-inline: 0; }

	/* Figma mobile: ES 40px y EN 34px sobre un frame de 1080 (=360 CSS) */
	.ups-info__es {
		max-width: none;
		font-size: clamp(14px, 3.7vw, 22px);
		line-height: 1.2;
	}
	.ups-info__en {
		max-width: 59%;
		font-size: clamp(12px, 3.15vw, 18px);
	}

	/* mail al pie: Flor lo pidio para mobile porque el footer fijo le parecia raro */
	.ups-info__mail {
		display: block;
		order: 4;
		width: 100%;
		margin-inline: 0;
		font-size: clamp(14px, 3.7vw, 22px);
	}
	.ups-info__mail a { color: inherit; text-decoration: none; }

	/* Aire entre la foto 2 y el mail: igualado al que hay entre el texto en
	   ingles y la foto 2 (32px). Con un solo selector de clase no alcanza,
	   WordPress pisa el margen logico. */
	.ups-info .ups-info__mail { margin-block-start: 2rem; }
}

/* Columna del ingles: la refe (2:452) la tiene al 59%. Estaba al 80% y Flor la
   vio ancha; bajada a 70% (pedido de Matias 2026-09-10). */
@media (max-width: 600px) {
	.ups-info__en { max-width: 70%; }
}

/* Sombra del contenido "boxed" de Kadence: con fondo blanco sobre blanco
   solo se veia como una franja gris abajo del bloque (reportado 2026-09-21). */
.entry.single-entry { box-shadow: none; }