/**
 * @layer utilities — página "El Estudio".
 */

@layer utilities {
	.el-estudio__foto--placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		background: repeating-linear-gradient(135deg, var(--c-ink-100) 0 12px, var(--c-ink-200) 12px 24px);
		color: var(--c-ink-500);
		font-size: var(--text-sm);
		text-align: center;
	}

	.el-estudio__hero {
		position: relative;
	}

	.el-estudio__hero-media {
		height: 320px;
	}

	.el-estudio__hero-media .el-estudio__foto {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.el-estudio__hero .contenedor {
		padding-block: var(--space-6);
	}

	.el-estudio__hero h1 {
		font-size: var(--text-3xl) !important;
	}

	.el-estudio__destacado {
		margin: var(--space-6) 0;
		padding-left: var(--space-5);
		border-left: 2px solid var(--c-accent-600);
		font-family: var(--font-display);
		font-style: italic;
		font-size: var(--text-xl);
		color: var(--c-ink-900);
	}

	.linea-tiempo {
		display: flex;
		flex-direction: column;
	}

	.linea-tiempo__item {
		display: grid;
		grid-template-columns: 100px 1fr;
		gap: var(--space-5);
		padding-block: var(--space-5);
		border-top: 1px solid var(--c-ink-200);
	}

	.linea-tiempo__item:first-child {
		border-top: 0;
	}

	.linea-tiempo__anio {
		font-family: var(--font-display);
		font-size: var(--text-lg);
		color: var(--c-accent-600);
	}

	.linea-tiempo__texto {
		max-width: 56ch;
		color: var(--c-ink-700);
	}

	.el-estudio__fundador {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	@media (width >= 768px) {
		.el-estudio__fundador {
			grid-template-columns: 5fr 7fr;
		}
	}

	.el-estudio__dos-columnas {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-6);
		margin-top: var(--space-6);
	}

	@media (width >= 768px) {
		.el-estudio__dos-columnas {
			grid-template-columns: 1fr 1fr;
		}
	}

	.el-estudio__galeria {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
	}

	@media (width >= 768px) {
		.el-estudio__galeria {
			grid-template-columns: repeat(3, 1fr);
		}

		.el-estudio__galeria-item:first-child {
			grid-column: span 2;
			grid-row: span 2;
		}
	}

	.el-estudio__galeria-item {
		position: relative;
		display: block;
		padding: 0;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		cursor: zoom-in;
	}

	.el-estudio__galeria-item:first-child {
		/* Sin proporción propia: al ocupar 2 filas, su alto lo define el
		   grid (fila 1 + fila 2), no un aspect-ratio fijo. */
		aspect-ratio: auto;
	}

	.el-estudio__galeria-item .el-estudio__foto {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}

	.el-estudio__galeria-overlay {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: color-mix(in oklab, var(--c-accent-600) 82%, transparent);
		opacity: 0;
		transition: opacity var(--dur-2) var(--ease-out);
	}

	.el-estudio__galeria-overlay .icono {
		width: 32px;
		height: 32px;
		color: var(--c-white);
		transform: scale(0.85);
		transition: transform var(--dur-2) var(--ease-out);
	}

	.el-estudio__galeria-item:hover .el-estudio__galeria-overlay,
	.el-estudio__galeria-item:focus-visible .el-estudio__galeria-overlay {
		opacity: 1;
	}

	.el-estudio__galeria-item:hover .el-estudio__galeria-overlay .icono,
	.el-estudio__galeria-item:focus-visible .el-estudio__galeria-overlay .icono {
		transform: scale(1);
	}

	.el-estudio__lightbox {
		padding: 0;
		border: 0;
		max-width: 90vw;
		max-height: 90vh;
		background: transparent;
		opacity: 0;
		transform: scale(0.98);
		transition:
			opacity var(--dur-3) var(--ease-out),
			transform var(--dur-3) var(--ease-out),
			overlay var(--dur-3) allow-discrete,
			display var(--dur-3) allow-discrete;
	}

	.el-estudio__lightbox[open] {
		opacity: 1;
		transform: scale(1);
	}

	@starting-style {
		.el-estudio__lightbox[open] {
			opacity: 0;
			transform: scale(0.98);
		}
	}

	.el-estudio__lightbox::backdrop {
		background: oklch(0.15 0.01 100 / 0);
		backdrop-filter: blur(0);
		transition:
			background var(--dur-3) var(--ease-out),
			backdrop-filter var(--dur-3) var(--ease-out),
			overlay var(--dur-3) allow-discrete,
			display var(--dur-3) allow-discrete;
	}

	.el-estudio__lightbox[open]::backdrop {
		background: oklch(0.15 0.01 100 / .75);
		backdrop-filter: blur(6px);
	}

	@starting-style {
		.el-estudio__lightbox[open]::backdrop {
			background: oklch(0.15 0.01 100 / 0);
			backdrop-filter: blur(0);
		}
	}

	.el-estudio__lightbox-contenido {
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--c-ink-100);
		color: var(--c-ink-500);
	}

	.el-estudio__lightbox-contenido img {
		/* La imagen clonada trae la clase .el-estudio__foto de la miniatura
		   (position: absolute; inset: 0; width/height: 100%, para la celda
		   del grid) — acá se resetea todo eso para que se vea con su
		   proporción real, contenida en el diálogo. */
		position: static;
		inset: auto;
		width: auto;
		height: auto;
		max-width: 90vw;
		max-height: 85vh;
		object-fit: contain;
	}

	.el-estudio__lightbox-cerrar {
		position: absolute;
		top: var(--space-4);
		right: var(--space-4);
		z-index: 1;
		color: var(--c-white);
		padding: var(--space-2);
	}

	.el-estudio__lightbox-flecha {
		position: absolute;
		top: 50%;
		z-index: 1;
		color: var(--c-white);
		padding: var(--space-2);
		transform: translateY(-50%);
		transition: opacity var(--dur-2) var(--ease-out);
	}

	.el-estudio__lightbox-flecha:hover {
		opacity: 0.7;
	}

	.el-estudio__lightbox-flecha.es-oculto {
		display: none;
	}

	.el-estudio__lightbox-flecha .icono {
		width: 32px;
		height: 32px;
	}

	.el-estudio__lightbox-flecha--prev {
		left: var(--space-4);
	}

	.el-estudio__lightbox-flecha--prev .icono {
		transform: rotate(180deg);
	}

	.el-estudio__lightbox-flecha--next {
		right: var(--space-4);
	}

	.el-estudio .cta-contacto {
		margin-bottom: 48px;
	}
}