/**
 * Sections: composición particular de las secciones de la página de
 * inicio (hero, líneas de negocio, secciones divididas, dos caminos
 * de compra y banda de llamado a la acción). Los componentes que
 * reutilizan (botones, tarjetas, listas, insignias) están definidos
 * en components.css; aquí solo vive el layout que las combina.
 *
 * @package Induscore
 */

/* ---------------------------------------------------
   Hero: ocupa la altura visible bajo el header, con la franja
   de unidades superpuesta en su borde inferior.
   --------------------------------------------------- */
/* min-height (nunca height) para que el contenido jamás se corte,
   sin importar cuánto texto tenga el título o la bajada. Padding
   vertical reducido en móvil, gradual hasta el valor de escritorio. */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	background-color: var(--color-azul-oscuro);
	overflow: hidden;
	min-height: calc(100vh - var(--alto-header));
	padding: var(--e-56) 0;
}

@media (min-width: 768px) {
	.hero {
		padding: var(--e-64) 0;
	}
}

@media (min-width: 1024px) {
	.hero {
		padding: var(--e-80) 0;
	}
}

/* top/bottom con margen de sobra (var(--e-60), el mismo tope que usa
   el parallax de assets/js/animaciones.js): así el translateY del
   parallax nunca deja un hueco sin imagen en el borde del hero. */
.hero__fondo {
	position: absolute;
	top: calc(-1 * var(--e-60));
	left: 0;
	right: 0;
	bottom: calc(-1 * var(--e-60));
	background-image: repeating-linear-gradient(135deg, var(--color-azul-medio) 0px, var(--color-azul-medio) var(--e-2), var(--color-azul-oscuro) var(--e-2), var(--color-azul-oscuro) 42px);
	background-size: cover;
	background-position: center;
	opacity: 0.7;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.hero__fondo {
		will-change: auto;
	}
}

/* Foto del hero (<img>, Fase 7): cubre .hero__fondo igual que el antiguo
   background-size: cover. Dos clases para ganarle a reglas genéricas de
   img (height: auto). El patrón de rayas de .hero__fondo queda debajo
   como respaldo si no hay foto. */
.hero__fondo .hero__imagen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* Doble degradado: horizontal para legibilidad del texto a la
   izquierda, vertical para oscurecer el borde inferior de la foto y
   que la transición hacia la barra blanca flotante de abajo se vea
   más suave. */
.hero__superposicion {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, var(--color-azul-oscuro) 32%, var(--overlay-azul-oscuro-35) 100%),
		linear-gradient(transparent 55%, var(--overlay-azul-oscuro-55) 100%);
}

.hero .contenedor {
	position: relative;
	z-index: var(--z-hero-contenido);
}

.hero__contenido {
	max-width: var(--ancho-contenido-3xl);
}

.hero__marca-grupo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--e-8);
	margin-bottom: var(--e-12);
	color: var(--overlay-blanco-55);
	font-size: var(--fs-xs);
	font-weight: var(--peso-negrita);
	text-transform: uppercase;
	letter-spacing: var(--letras-abiertas-xl);
}

/* El enlace al sitio de Multiaceros (si hay URL) lo genera
   induscore_logo_multiaceros_html() sin clase propia. */
.hero__marca-grupo a {
	display: flex;
	align-items: center;
}

/* Logo del grupo Multiaceros: alto fijo por breakpoint, ancho auto
   (igual criterio que el logo del header, para que nunca se deforme). */
.hero__marca-grupo-logo {
	height: var(--alto-logo-grupo);
	width: auto;
	max-width: none;
}

@media (min-width: 1024px) {
	.hero__marca-grupo-logo {
		height: var(--alto-logo-grupo-escritorio);
	}
}

.hero__contenido h1 {
	color: var(--color-blanco);
}

.hero__contenido h1 em {
	color: var(--color-texto-atenuado);
	font-style: normal;
	font-weight: var(--peso-ligero);
}

.hero__contenido p {
	color: var(--overlay-blanco-75);
	/* Bajada fluida: en móvil se achica un poco, en tablet/escritorio
	   siempre llega al tope (var(--fs-xl)), igual que antes. */
	font-size: clamp(var(--fs-md), 4vw, var(--fs-xl));
}

/* En móvil los dos botones quedan apilados a ancho completo; desde
   768px (tablet) vuelven a la fila original. */
.hero__acciones {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--e-16);
	margin-top: var(--e-32);
}

@media (min-width: 768px) {
	.hero__acciones {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}
}

/* ---------------------------------------------------
   Barra de unidades. En escritorio (1024px+) es una tarjeta blanca
   flotante que se superpone al borde inferior del hero con un
   margin-top negativo, en 4 columnas. En móvil y tablet deja de ser
   flotante: va en flujo normal debajo del hero, en una cuadrícula
   2x2, sin superponerse a nada.
   --------------------------------------------------- */
.franja-unidades {
	position: relative;
	z-index: var(--z-franja-unidades);
	background-color: var(--color-blanco);
	box-shadow: 0 var(--e-8) 32px var(--overlay-azul-oscuro-12);
}

@media (min-width: 1024px) {
	.franja-unidades {
		margin-top: calc(-1 * var(--e-64));
		margin-bottom: var(--e-64);
	}
}

.franja-unidades__lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1024px) {
	.franja-unidades__lista {
		grid-template-columns: repeat(4, 1fr);
	}
}

.franja-unidades__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--e-4);
	padding: var(--e-24) var(--e-24) var(--e-28);
	border-left: none;
	transition: background-color var(--transicion-base);
}

/* Líneas divisorias: en la cuadrícula 2x2 (móvil/tablet) solo el
   segundo elemento de cada fila lleva línea a la izquierda; en la
   fila única de escritorio la lleva cualquiera menos el primero.
   Los dos bloques son mutuamente excluyentes (nunca están activos a
   la vez), así que no compiten por especificidad entre sí. */
@media (max-width: 1023px) {
	.franja-unidades__item:nth-child(even) {
		border-left: var(--linea-divisoria);
	}
}

@media (min-width: 1024px) {
	.franja-unidades__item {
		border-left: var(--linea-divisoria);
	}

	.franja-unidades__item:first-child {
		border-left: none;
	}
}

.franja-unidades__numero {
	font-size: var(--fs-sm);
	font-weight: var(--peso-negrita);
	color: var(--color-naranjo-texto);
	letter-spacing: var(--letras-abiertas-lg);
}

.franja-unidades__nombre {
	display: flex;
	align-items: center;
	gap: var(--e-6);
	font-size: var(--fs-lg);
	font-weight: var(--peso-medio);
	color: var(--color-azul-oscuro);
}

.franja-unidades__flecha {
	display: inline-block;
	transition: transform var(--transicion-base);
}

.franja-unidades__item:focus-visible {
	background-color: var(--color-gris-claro);
}

.franja-unidades__item:focus-visible .franja-unidades__flecha {
	transform: translateX(var(--e-5));
}

@media (hover: hover) {
	.franja-unidades__item:hover {
		background-color: var(--color-gris-claro);
	}

	.franja-unidades__item:hover .franja-unidades__flecha {
		transform: translateX(var(--e-5));
	}
}

.franja-unidades__descriptor {
	font-size: var(--fs-sm);
	color: var(--color-texto-secundario);
}

@media (prefers-reduced-motion: reduce) {
	.franja-unidades__item,
	.franja-unidades__flecha {
		transition: none;
	}
}

/* Anclas de navegación (#soluciones, #servicios, #nosotros): al saltar
   desde el menú, deja el título de la sección visible bajo el header
   fijo (64px) en vez de tapado por él. Cualquier salto a estas
   secciones baja más de 80px, así que el header ya está en su estado
   fijo cuando el scroll termina. */
#soluciones,
#servicios,
#nosotros {
	scroll-margin-top: var(--alto-header-fijo);
}

/* ---------------------------------------------------
   Sección de líneas de negocio (tarjetas numeradas)
   --------------------------------------------------- */
.seccion-unidades {
	padding-top: var(--e-48);
	padding-bottom: var(--e-48);
	border-bottom: var(--linea-divisoria);
}

@media (min-width: 768px) {
	.seccion-unidades {
		padding-top: var(--e-64);
		padding-bottom: var(--e-64);
	}
}

@media (min-width: 1024px) {
	.seccion-unidades {
		padding-top: var(--e-88);
		padding-bottom: var(--e-88);
	}
}

.seccion-unidades__encabezado {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--e-32);
	margin-bottom: var(--e-48);
}

@media (min-width: 768px) {
	.seccion-unidades__encabezado {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		flex-wrap: wrap;
	}
}

.seccion-unidades__encabezado h2 {
	max-width: var(--ancho-contenido-xl);
	margin-bottom: 0;
}

.seccion-unidades__intro {
	max-width: var(--ancho-contenido-sm);
}

.seccion-unidades__intro p {
	margin-bottom: 0;
}

.tarjetas-unidades {
	display: grid;
	grid-template-columns: 1fr;
	border-top: var(--linea-divisoria);
	border-left: var(--linea-divisoria);
}

@media (min-width: 768px) {
	.tarjetas-unidades {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.tarjetas-unidades {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Tarjeta de unidad de negocio (Indus Steel, Inox, Weld, Safety):
   fondo siempre blanco. Al pasar el mouse aparece una luz suave que
   sigue el puntero (::before con radial-gradient posicionado con las
   variables --x/--y que actualiza assets/js/cards.js vía
   requestAnimationFrame), el borde se tiñe de naranjo muy suave, el
   logo hace zoom y la flecha del enlace avanza. Todas las tarjetas
   comparten alto gracias al stretch por defecto de CSS Grid. */
/* min-height:auto en móvil (una sola columna: no hace falta forzar
   alto, así la tarjeta no deja espacio vacío); desde 768px, con 2 o 4
   tarjetas por fila, vuelve al alto mínimo original para que todas
   la compartan gracias al stretch por defecto de CSS Grid. */
/* Fondo en dos capas: la luz que sigue al mouse (::before, ver abajo)
   pinta por encima de este degradado vertical, que es el fondo base
   siempre visible de la tarjeta. Blanco puro en la zona del número y
   el logo (0%-38%, para que mix-blend-mode:multiply del logo no note
   ningún tinte) y de ahí hacia abajo pasa a un azul muy pálido. */
.tarjeta-unidad {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: auto;
	padding: var(--e-32) var(--e-28) var(--e-40);
	background-color: var(--color-blanco);
	background-image: linear-gradient(
		to bottom,
		var(--color-blanco) 0%,
		var(--color-blanco) 38%,
		var(--color-tarjeta-degradado-medio) 68%,
		var(--color-tarjeta-degradado-final) 100%
	);
	border-right: var(--linea-divisoria);
	border-bottom: var(--linea-divisoria);
	box-shadow: inset 0 0 0 1px transparent;
	transition: box-shadow var(--transicion-base);
}

@media (min-width: 768px) {
	.tarjeta-unidad {
		min-height: var(--e-420);
	}
}

/* Luz que sigue al mouse: un círculo naranjo muy tenue centrado en
   la posición del puntero dentro de la tarjeta. Oculta en reposo. */
.tarjeta-unidad::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: radial-gradient(var(--e-260) circle at var(--x, 50%) var(--y, 50%), var(--overlay-naranjo-13), transparent 70%);
	transition: opacity var(--transicion-base);
	pointer-events: none;
}

.tarjeta-unidad:focus-within {
	box-shadow: inset 0 0 0 1px var(--overlay-naranjo-40);
}

.tarjeta-unidad:focus-within::before {
	opacity: 1;
}

@media (hover: hover) {
	.tarjeta-unidad:hover {
		box-shadow: inset 0 0 0 1px var(--overlay-naranjo-40);
	}

	.tarjeta-unidad:hover::before {
		opacity: 1;
	}
}

.tarjeta-unidad__numero {
	font-size: var(--fs-sm);
	font-weight: var(--peso-negrita);
	color: var(--color-naranjo-texto);
	letter-spacing: var(--letras-abiertas-lg);
	margin-bottom: var(--e-24);
}

/* Logo grande y protagonista, centrado dentro de su contenedor. Más
   pequeño en móvil (ancho máximo 220px) que en tablet/escritorio
   (260px, valor original). */
.tarjeta-unidad__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--e-90);
	margin-bottom: var(--e-24);
}

@media (min-width: 768px) {
	.tarjeta-unidad__logo {
		height: var(--e-110);
	}
}

.tarjeta-unidad__logo img {
	width: 100%;
	max-width: var(--e-220);
	height: 100%;
	object-fit: contain;
	/* Suaviza el borde/fondo claro del archivo de logo contra la
	   tarjeta blanca (útil sobre todo si el admin sube un JPG). */
	mix-blend-mode: multiply;
	transition: transform var(--transicion-base);
}

@media (min-width: 768px) {
	.tarjeta-unidad__logo img {
		max-width: var(--e-260);
	}
}

.tarjeta-unidad:focus-within .tarjeta-unidad__logo img {
	transform: scale(1.06);
}

@media (hover: hover) {
	.tarjeta-unidad:hover .tarjeta-unidad__logo img {
		transform: scale(1.06);
	}
}

.tarjeta-unidad__texto {
	font-size: var(--fs-base);
	color: var(--color-azul-oscuro);
	margin-bottom: var(--e-20);
}

/* Subcategorías de la unidad (hasta 4 + "+N más"), en vivo desde
   WooCommerce. Van entre el texto y "Ver productos": el enlace sigue
   empujado al fondo con margin-top:auto y la grilla iguala el alto de
   las 4 tarjetas, así nunca queda tapado. position/z-index: por encima
   de la luz que sigue al mouse (::before). */
.tarjeta-unidad__subcategorias {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-6);
	margin-bottom: var(--e-20);
}

/* 44px de alto (área táctil) en móvil/tablet; 32px en escritorio. */
.tarjeta-unidad__chip {
	display: inline-flex;
	align-items: center;
	min-height: var(--e-44);
	padding: var(--e-4) var(--e-10);
	background-color: var(--color-blanco);
	border: 1px solid var(--color-gris-borde);
	font-size: var(--fs-xs);
	font-weight: var(--peso-semi);
	color: var(--color-azul-oscuro);
	transition: border-color var(--transicion-base), color var(--transicion-base);
}

@media (hover: hover) {
	.tarjeta-unidad__chip:hover {
		border-color: var(--color-naranjo);
		color: var(--color-azul-oscuro);
	}
}

.tarjeta-unidad__chip:focus-visible {
	border-color: var(--color-naranjo);
}

@media (min-width: 1024px) {
	.tarjeta-unidad__chip {
		min-height: var(--e-32);
	}
}

.tarjeta-unidad__chip--mas {
	background-color: transparent;
	border-style: dashed;
	color: var(--color-naranjo-texto);
}

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

.tarjeta-unidad__enlace {
	display: inline-flex;
	align-items: center;
	gap: var(--e-6);
	margin-top: auto;
	font-size: var(--fs-base);
	font-weight: var(--peso-negrita);
	color: var(--color-azul-oscuro);
}

.tarjeta-unidad__flecha {
	display: inline-block;
	transition: transform var(--transicion-base);
}

.tarjeta-unidad:focus-within .tarjeta-unidad__flecha {
	transform: translateX(var(--e-5));
}

@media (hover: hover) {
	.tarjeta-unidad:hover .tarjeta-unidad__flecha {
		transform: translateX(var(--e-5));
	}
}

@media (prefers-reduced-motion: reduce) {
	.tarjeta-unidad__logo img,
	.tarjeta-unidad__flecha {
		transition: none;
	}

	/* Sin movimiento: la luz que sigue al mouse, el zoom del logo y el
	   avance de la flecha quedan desactivados; solo cambia el borde. */
	.tarjeta-unidad::before {
		display: none;
	}

	.tarjeta-unidad:hover .tarjeta-unidad__logo img,
	.tarjeta-unidad:focus-within .tarjeta-unidad__logo img {
		transform: none;
	}

	.tarjeta-unidad:hover .tarjeta-unidad__flecha,
	.tarjeta-unidad:focus-within .tarjeta-unidad__flecha {
		transform: none;
	}
}

/* ---------------------------------------------------
   Sección dividida (imagen + contenido, alternable)
   --------------------------------------------------- */
.seccion-dividida {
	padding-top: var(--e-48);
	padding-bottom: var(--e-48);
	border-bottom: var(--linea-divisoria);
}

@media (min-width: 768px) {
	.seccion-dividida {
		padding-top: var(--e-64);
		padding-bottom: var(--e-64);
	}
}

@media (min-width: 1024px) {
	.seccion-dividida {
		padding-top: var(--e-88);
		padding-bottom: var(--e-88);
	}
}

.seccion-dividida--clara {
	background-color: var(--color-gris-claro);
}

/* Base = móvil/tablet: imagen arriba, texto abajo, ambos a ancho
   completo. Desde 1024px (escritorio) vuelve a la fila original lado
   a lado; ahí es donde tiene sentido la variante invertida. */
.seccion-dividida__grid {
	display: flex;
	flex-direction: column;
	gap: var(--e-40);
}

.seccion-dividida__media {
	flex: 1;
	min-width: 0;
	width: 100%;
	position: relative;
}

.seccion-dividida__contenido {
	flex: 1;
	min-width: 0;
}

@media (min-width: 1024px) {
	.seccion-dividida__grid {
		flex-direction: row;
		align-items: center;
		gap: var(--e-64);
	}

	.seccion-dividida--invertida .seccion-dividida__media {
		order: 2;
	}
}

.seccion-dividida__contenido > p {
	font-size: var(--fs-lg);
}

/* ---------------------------------------------------
   Sección "Dos caminos" (B2B / B2C)
   --------------------------------------------------- */
.seccion-caminos {
	background-color: var(--color-azul-oscuro);
	color: var(--color-blanco);
	padding-top: var(--e-48);
	padding-bottom: var(--e-48);
}

@media (min-width: 768px) {
	.seccion-caminos {
		padding-top: var(--e-64);
		padding-bottom: var(--e-64);
	}
}

@media (min-width: 1024px) {
	.seccion-caminos {
		padding-top: var(--e-88);
		padding-bottom: var(--e-88);
	}
}

/* Base = móvil: todo apilado en una sola columna (intro, tarjeta B2B,
   tarjeta B2C, en ese orden). Desde 768px (tablet) la intro pasa a
   ocupar su propia fila completa y las dos tarjetas quedan lado a
   lado debajo. Desde 1024px (escritorio) vuelve a la disposición
   original de 3 columnas en una sola fila. */
.seccion-caminos__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--e-32);
	align-items: stretch;
}

@media (min-width: 768px) {
	.seccion-caminos__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.seccion-caminos__intro {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.seccion-caminos__grid {
		grid-template-columns: 1.1fr 1fr 1fr;
	}

	.seccion-caminos__intro {
		grid-column: auto;
	}
}

.seccion-caminos__intro h2 {
	color: var(--color-blanco);
	max-width: var(--ancho-contenido-md);
}

.seccion-caminos__intro p {
	color: var(--overlay-blanco-70);
	max-width: var(--ancho-contenido-md);
}

/* El max-width que ajusta el bloque de texto a la columna angosta de
   escritorio no tiene sentido en móvil/tablet (la intro ocupa todo
   el ancho disponible ahí). Bloque acotado a 1023px, complementario
   del de 1024px de arriba: nunca están activos los dos a la vez. */
@media (max-width: 1023px) {
	.seccion-caminos__intro h2,
	.seccion-caminos__intro p {
		max-width: none;
	}
}

/* ---------------------------------------------------
   Banda CTA (llamado a la acción naranjo). Todo el texto va en azul
   oscuro: sobre el naranjo de marca el blanco no alcanza contraste.
   --------------------------------------------------- */
.banda-cta {
	background-color: var(--color-naranjo);
	color: var(--color-azul-oscuro);
	padding-top: var(--e-40);
	padding-bottom: var(--e-40);
}

@media (min-width: 768px) {
	.banda-cta {
		padding-top: var(--e-64);
		padding-bottom: var(--e-64);
	}
}

.banda-cta__grid {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--e-32);
}

@media (min-width: 768px) {
	.banda-cta__grid {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
}

.banda-cta .etiqueta {
	color: var(--color-azul-oscuro);
}

.banda-cta .etiqueta::before {
	background-color: var(--color-azul-oscuro);
}

.banda-cta__texto h2 {
	color: var(--color-azul-oscuro);
	margin-bottom: var(--e-8);
}

.banda-cta__texto p {
	color: var(--color-azul-oscuro);
	margin-bottom: 0;
	max-width: var(--ancho-contenido-lg);
}

/* Botón blanco sobre la banda: texto en la variante de texto del
   naranjo (5,42:1 sobre blanco); el relleno del hover es azul oscuro
   con texto blanco. */
.banda-cta .boton {
	background-color: var(--color-blanco);
	color: var(--color-naranjo-texto);
	flex-shrink: 0;
}

.banda-cta .boton::before {
	background-color: var(--color-azul-oscuro);
}

@media (hover: hover) {
	.banda-cta .boton:hover {
		background-color: var(--color-azul-oscuro);
		color: var(--color-blanco);
	}
}

.banda-cta .boton:focus-visible {
	background-color: var(--color-azul-oscuro);
	color: var(--color-blanco);
}