/**
 * @layer utilities — layout específico del home: hero con stagger de
 * entrada por bloque (fila #4) y contador de credenciales (fila #6, vía
 * assets/js/contador.js — ver la nota en credenciales.php sobre por qué no
 * es 100% CSS). Los reveals de las secciones de más abajo (áreas, El
 * Estudio, profesionales, publicaciones) viven en components/motion.css,
 * compartidos con el resto del sitio.
 *
 * `color`/`text-decoration` con !important: ver la nota en buttons.css.
 */

@keyframes santiago-hero-entrada {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@layer utilities {

	/* Hero — panel oscuro + foto a color (ver referencia hero.jpg) -------- */

	.hero {
		display: grid;
		grid-template-columns: 1fr;
		padding-block: 0;
	}

	@media (width >= 1024px) {
		.hero {
			grid-template-columns: 55% 45%;
			min-height: 620px;
		}
	}

	.hero__panel {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-5);
		/* El fondo (panel + foto) va a todo el ancho de la ventana, pero el
		   contenido se alinea al mismo margen que .contenedor (1200px
		   centrado): mismo cálculo que usa .contenedor, sin depender de que
		   el hero esté dentro de uno. */
		padding-inline-start: max(24px, calc((100vw - var(--container-max)) / 2 + 24px));
		padding-block: var(--space-8);
		padding-block-end: calc(var(--space-8) / 2);
		padding-inline-end: var(--gutter);
		/* Luz circular suave en el color primario, apenas asomando abajo. */
		background:
			radial-gradient(circle at 50% 100%, color-mix(in oklab, var(--c-accent-600) 35%, transparent) 0%, transparent 60%),
			var(--c-ink-900);
	}

	@media (width < 768px) {
		.hero__panel {
			padding-block-start: var(--space-9);
			padding-block-end: var(--space-8);
		}
	}

	@media (width >= 768px) {
		.hero__panel {
			padding-inline-start: max(40px, calc((100vw - var(--container-max)) / 2 + 40px));
		}
	}

	@media (width >= 1024px) {
		.hero__panel {
			padding-block: var(--space-9);
			padding-block-end: calc(var(--space-9) / 2);
			padding-inline-end: var(--space-8);
		}
	}

	.hero__panel .eyebrow {
		margin: 0;
		font-size: var(--eyebrow-size);
		font-weight: 600;
		letter-spacing: var(--eyebrow-tracking);
		text-transform: uppercase;
		color: var(--c-accent-400);
	}

	.hero__titular {
		margin: 0;
		font-size: var(--text-3xl) !important;
		color: var(--c-white) !important;
	}

	.hero__bajada {
		max-width: 42ch;
		margin: 0;
		color: color-mix(in oklab, var(--c-white) 70%, transparent);
	}

	.hero__ctas {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-6);
		margin-top: var(--space-2);
	}

	@media (width < 768px) {
		.hero__ctas .boton--secundario-oscuro {
			display: none;
		}
	}

	/* Entrada por bloque (fila #4 del inventario de movimiento): el hero es
	   el único titular "por línea" que anima al cargar, no al scrollear —
	   ya está en el primer pantallazo, así que un timeline de scroll no
	   dispararía nada. Cada línea (eyebrow, título, bajada, CTAs) entra con
	   60ms de diferencia sobre la anterior. */
	.hero__panel .eyebrow,
	.hero__titular,
	.hero__bajada,
	.hero__ctas {
		animation: santiago-hero-entrada var(--dur-3) var(--ease-out) both;
	}

	.hero__panel .eyebrow {
		animation-delay: 0ms;
	}

	.hero__titular {
		animation-delay: 60ms;
	}

	.hero__bajada {
		animation-delay: 120ms;
	}

	.hero__ctas {
		animation-delay: 180ms;
	}

	@media (prefers-reduced-motion: reduce) {
		.hero__panel .eyebrow,
		.hero__titular,
		.hero__bajada,
		.hero__ctas {
			animation: none;
			opacity: 1;
			transform: none;
		}
	}

	.hero__media {
		position: relative;
		min-height: 280px;
		overflow: hidden;
	}

	/* Velo oscuro sobre la foto: la acerca al tono del panel de texto. */
	.hero__media::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 2;
		background: color-mix(in oklab, var(--c-ink-900) 35%, transparent);
		pointer-events: none;
	}

	@media (width >= 1024px) {
		.hero__media {
			min-height: 620px;
		}
	}

	.hero__foto {
		display: block;
		width: 100%;
		height: 100%;
		min-height: inherit;
		object-fit: cover;
		transform: scale(1.2);
		transform-origin: top right;
	}

	/* Fotos rotativas del hero (<santiago-hero-slider>): stack absoluto con
	   fundido cruzado; mientras cada una está activa, zoom lento tipo Ken
	   Burns desde el mismo scale/origen que ya usa la foto única de arriba,
	   así el look es consistente entre los dos modos. */
	santiago-hero-slider {
		display: block;
		width: 100%;
		height: 100%;
	}

	.hero__slide {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity 1.5s ease;
	}

	.hero__slide.es-actual {
		opacity: 1;
		z-index: 1;
	}

	.hero__slide .hero__foto {
		transform-origin: center center;
		transform: scale(1.1);
		transition: transform 9s ease-out;
	}

	.hero__slide.es-actual .hero__foto {
		transform: scale(1.16);
	}

	@media (prefers-reduced-motion: reduce) {
		.hero__slide .hero__foto {
			transition: none;
		}
	}

	.hero__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;
	}

	/* Credenciales ------------------------------------------------------ */

	/* Iluminación asimétrica: un foco de luz circular arriba a la izquierda,
	   apagándose hacia el resto de la franja (sólido en --c-accent-600). */
	.credenciales {
		background:
			radial-gradient(circle at 50% 165%, color-mix(in oklab, var(--c-white) 30%, var(--c-accent-600)) 0%, transparent 65%),
			var(--c-accent-600);
		color: var(--c-white);
		padding-block: var(--space-7);
	}

	.credenciales__grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-6);
		text-align: center;
	}

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

		.credenciales__item {
			position: relative;
		}

		.credenciales__item:not(:first-child)::before {
			content: '';
			position: absolute;
			left: calc(var(--space-6) * -1 / 2);
			top: 0.2em;
			bottom: 0.2em;
			width: 1px;
			background: color-mix(in oklab, var(--c-white) 35%, transparent);
		}
	}

	.credenciales__numero {
		margin: 0 0 var(--space-2);
		font-family: var(--font-body);
		font-size: var(--text-2xl);
		font-weight: 500;
	}

	/* Conteo animado (fila #6 del inventario de movimiento): el número en sí
	   lo cuenta assets/js/contador.js al entrar en viewport; acá sólo se
	   fija el ancho mínimo para que el resto de la fila no salte de lugar
	   mientras cuenta. */
	.credenciales__contador {
		display: inline-block;
		min-width: 1.5ch;
		font-size: 50px;
		line-height: 0px !important;
		font-weight: 600;
	}

	.credenciales__label {
		margin: 0;
		font-size: var(--eyebrow-size);
		font-weight: 600;
		letter-spacing: var(--eyebrow-tracking);
		text-transform: uppercase;
		color: color-mix(in oklab, var(--c-white) 88%, transparent);
	}

	/* Ítems sin número (equipo, ubicación): no tienen un dato aparte, así
	   que el texto del label pasa a hacer de dato — tipografía invertida
	   respecto al eyebrow de arriba: el doble de grande y en bold. */
	.credenciales__label--dato {
		font-family: var(--font-body);
		font-size: calc(var(--eyebrow-size) * 2);
		font-weight: 700;
		letter-spacing: normal;
		text-transform: none;
		color: var(--c-white);
	}

	/* Filosofía ----------------------------------------------------------- */

	.filosofia {
		background: var(--c-ink-100);
		padding-block: var(--space-9);
	}

	@media (width < 768px) {
		.filosofia {
			display: none;
		}
	}

	.filosofia__grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	@media (width >= 1024px) {
		.filosofia__grid {
			grid-template-columns: 7fr 5fr;
			gap: var(--space-9);
		}
	}

	.filosofia__bloque h2 {
		font-size: var(--text-xl) !important;
		margin-bottom: var(--space-4);
	}

	/* Bloque A: la lectura principal, sin más tratamiento que el título más
	   grande — la "voz" que abre la sección. */
	.filosofia__bloque--a h2 {
		font-size: var(--text-2xl) !important;
	}

	/* Slider apaisado arriba del título: equilibra el peso visual de la
	   tarjeta del bloque B en la misma fila. Track/slide/foto son propios
	   de este bloque; flechas y puntos reutilizan los de
	   components/carousel.css (mismo <santiago-carousel>). */
	.filosofia-slider {
		display: block;
		margin-bottom: var(--space-6);
	}

	.filosofia-slider__track {
		display: flex;
		height: 200px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.filosofia-slider__track::-webkit-scrollbar {
		display: none;
	}

	.filosofia-slider__track:focus-visible {
		outline: 2px solid var(--c-focus);
		outline-offset: 4px;
	}

	.filosofia-slider__slide {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}

	.filosofia-slider__foto {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}

	/* Bloque B: se despega como una cita — tarjeta blanca sobre el fondo
	   gris de la sección, corrida hacia abajo en desktop para romper la
	   simetría, con una comilla suelta detrás del título (mismo recurso
	   tipográfico grande-y-suelto que ya usamos en credenciales/estudio). */
	.filosofia__bloque--b {
		position: relative;
		background: var(--c-white);
		padding: var(--space-7);
	}

	.filosofia__bloque--b::before {
		content: '\201C';
		position: absolute;
		top: -0.3em;
		left: var(--space-6);
		font-family: var(--font-display);
		font-style: italic;
		font-size: 6rem;
		line-height: 1;
		color: color-mix(in oklab, var(--c-accent-600) 25%, transparent);
	}

	.filosofia__bloque--b h2 {
		font-style: italic;
	}

	.filosofia__bloque p {
		color: var(--c-ink-700);
		max-width: 52ch;
	}

	/* Áreas de práctica: ver assets/css/components/areas-grid.css (compartido) */

	/* El Estudio (teaser) --------------------------------------------------- */

	.estudio-teaser {
		background: var(--c-ink-100);
	}

	.estudio-teaser__grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-7);
		align-items: center;
	}

	@media (width >= 1024px) {
		.estudio-teaser__grid {
			grid-template-columns: 6fr 6fr;
			gap: var(--space-9);
		}
	}

	.estudio-teaser__media {
		position: relative;
	}

	@media (width < 768px) {
		.estudio-teaser__media {
			display: none;
		}
	}

	/* Marco suelto en oliva, calado detrás de la foto: mismo lenguaje sobrio
	   del resto del sitio (sin sombras, sin esquinas redondeadas), un solo
	   filete de color que le da peso gráfico a la sección sin volverla
	   ilustrativa. */
	.estudio-teaser__media::before {
		content: '';
		position: absolute;
		inset: 0;
		transform: translate(var(--space-5), var(--space-5));
		background: var(--c-accent-600);
	}

	.estudio-teaser__foto {
		position: relative;
		width: 100%;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	.estudio-teaser__foto--placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--c-ink-100);
		color: var(--c-ink-500);
		font-size: var(--text-sm);
		text-align: center;
		padding: var(--space-5);
	}

	.estudio-teaser__texto p {
		color: var(--c-ink-700);
		margin-bottom: var(--space-5);
	}

	/* Profesionales (home): base compartida en
	   assets/css/components/profesionales-grid.css — acá sólo el layout
	   propio de esta sección (foto chica a la izquierda, texto a la
	   derecha), sin tocar el archive ni "profesionales a cargo" de cada
	   área, que siguen con el card apilado de siempre. */

	.profesionales .profesionales__grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	@media (width >= 640px) {
		.profesionales .profesionales__grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.profesionales .profesionales__card {
		display: flex;
		align-items: center;
		gap: var(--space-4);
	}

	.profesionales .profesionales__retrato {
		flex: 0 0 auto;
		width: 45%;
		height: 200px;
		margin-bottom: 0;
	}

	.profesionales .profesionales__foto {
		height: 100%;
		aspect-ratio: auto;
	}

	.profesionales .profesionales__cargo {
		font-size: var(--text-base);
	}

	/* Marcas (home): ver assets/css/components/carousel.css (compartido) */

	/* Publicaciones (home): estilos de card compartidos en
	   components/card-post.css — se usan igual en el home, en la página de
	   Publicaciones (home.php) y en el archive de categoría (archive.php). */

	/* Publicaciones — enlaces externos (home): fondo gris suave a todo el
	   ancho, igual criterio que .filosofia más arriba (la grilla de cards
	   vive en components/links-lista.css). */

	.publicaciones-links {
		background: var(--c-ink-100);
	}

	/* CTA final ----------------------------------------------------------- */

	.cta-final {
		background:
			radial-gradient(circle at 50% 165%, color-mix(in oklab, var(--c-white) 30%, var(--c-accent-600)) 0%, transparent 65%),
			var(--c-accent-600);
	}

	.cta-final__grid {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-6);
		max-width: 800px;
		margin-inline: auto;
	}

	.cta-final__texto h2 {
		font-size: calc(var(--text-xl) * 1.4) !important;
		margin-bottom: var(--space-3);
		color: var(--c-white) !important;
	}

	.cta-final__texto p {
		color: color-mix(in oklab, var(--c-white) 85%, transparent);
		margin-bottom: var(--space-2);
	}

	.cta-final__datos a {
		color: var(--c-white) !important;
		text-decoration: none !important;
	}

	.cta-final__datos a:hover {
		color: var(--c-accent-400) !important;
	}

	.cta-final__boton {
		flex-shrink: 0;
	}
}