/* ==========================================================================
   assets/css/pages-home.css — Portada editorial (index.php)
   --------------------------------------------------------------------------
   Complemento de assets/css/theme.css + assets/css/shop.css. Acá vive SOLO lo
   que el sistema de diseño todavía no cubre para la home:

     1. Detalles del hero que el tema no define (.hero-labels). El offset del
        header fijo NO se toca acá: lo resuelve `.hero-editorial` en theme.css
        junto con `$header_spacer = false;` en index.php.
     2. Encabezados de sección (.section-head / .section-eyebrow /
        .section-title), que el tema no define.
     3. Tarjetas de producto de la selección de portada.
     4. Bloques propios de la home: newsletter como CTA y contacto a dos
        columnas sobre .contacto-split.

   Reglas de la plantilla: cero hex de marca. Todos los colores salen de las
   variables que emite brand_css_vars() y las escalas de theme.css.

   ORDEN DE CARGA: después de theme.css y shop.css.
   ========================================================================== */

/* ---------- 1. Hero editorial ---------- */

/* `.hero-editorial` (theme.css) ya trae `min-height: 100svh` y el
   `padding-top: var(--header-height)` que compensa el header fijo; index.php
   desactiva el espaciador del header para que ese offset no se duplique.
   Acá solo se agrega la fila de chips, que el tema no define. */
.hero-labels {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

/* ---------- 2. Encabezados de sección ---------- */

.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-6);
	margin-bottom: var(--space-10);
}

.section-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.section-eyebrow {
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-secondary);
}

.section-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	color: var(--color-primary);
}

/* En bloques centrados (valores) el título necesita aire antes de la grilla. */
.nosotros-values .section-title {
	margin-bottom: var(--space-2);
}

/* ---------- 3. Selección de productos ---------- */

.home-products {
	padding-block: var(--space-20);
	background-color: var(--color-background);
}

/* shop.css define .product-grid a 3 columnas (grilla de catálogo); la portada
   muestra una fila de 4. */
.home-products .product-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
}

.home-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.home-product-visual {
	position: relative;
}

.home-product-media {
	display: block;
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background-color: var(--color-surface-low);
}

/* shop.css desvanece `img:first-child` en :hover para hacer el crossfade con
   la segunda imagen. Sin segunda imagen la tarjeta quedaría en blanco, así que
   acotamos el efecto a las que sí la tienen (convención `has-second-image`
   que ya usa theme.css). */
.home-products .marandre-product-image-wrap:not(.has-second-image):hover img:first-child {
	opacity: 1;
}

.home-product-flag {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 2;
}

/* Gana a `.product-grid .artisan-chip` (variante neutra de shop.css) sin
   depender del orden de carga de las hojas. */
.home-products .product-grid .home-product-flag {
	background: var(--color-tertiary-fixed);
	color: var(--color-on-tertiary-fixed);
}

.home-card-actions {
	position: absolute;
	inset-inline: 0;
	bottom: var(--space-4);
	display: flex;
	justify-content: center;
	opacity: 0;
	transform: translateY(var(--space-2));
	transition: opacity var(--transition), transform var(--transition);
}

.home-product-card:hover .home-card-actions,
.home-product-card:focus-within .home-card-actions {
	opacity: 1;
	transform: none;
}

/* Sin hover (táctil) la acción tiene que estar siempre visible. */
@media (hover: none) {
	.home-card-actions {
		opacity: 1;
		transform: none;
	}
}

.home-product-info {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-4) var(--space-6);
}

.home-product-title {
	margin: 0;
	font-size: var(--text-md);
	line-height: 1.3;
}

.home-product-title a {
	transition: color var(--transition);
}

.home-product-title a:hover {
	color: var(--color-secondary);
}

.home-product-price {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	margin-top: auto;
}

.home-product-price .price {
	font-size: var(--text-md);
	font-weight: 700;
	color: var(--color-secondary);
}

.home-price-old {
	font-size: var(--text-sm);
	color: var(--color-on-surface-faint);
	text-decoration: line-through;
}

.home-empty {
	padding-block: var(--space-10);
	text-align: center;
	color: var(--color-on-surface-faint);
}

/* ---------- 4. Valores ---------- */

.value-item .value-icon {
	display: block;
	margin-bottom: var(--space-4);
	font-size: var(--text-2xl);
	color: var(--color-secondary);
}

.value-item h3 {
	margin-bottom: var(--space-3);
	font-size: var(--text-lg);
}

.value-item p {
	font-size: var(--text-sm);
	line-height: 1.7;
	color: var(--color-on-surface-muted);
}

/* ---------- 5. Newsletter como CTA ---------- */

.newsletter-section .newsletter-title {
	margin-bottom: var(--space-4);
}

.newsletter-lead {
	max-width: 560px;
	margin: 0 auto var(--space-8);
	opacity: 0.85;
}

.newsletter-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
}

/* Sobre el fondo primario el degradado del botón principal se pierde: se
   invierte igual que hace theme.css con `.newsletter-form .btn-primary`. */
.newsletter-actions .btn-primary {
	background: var(--color-on-primary);
	color: var(--color-primary);
	box-shadow: none;
}

.newsletter-actions .btn-primary:hover,
.newsletter-actions .btn-primary:focus-visible {
	background: var(--color-tertiary-fixed);
	color: var(--color-on-tertiary-fixed);
}

.newsletter-actions .btn-tertiary {
	color: var(--color-on-primary);
}

/* ---------- 6. Contacto ---------- */

/* El padding inferior lo aporta el margin-top del .site-footer. */
.home-contacto {
	padding-block: var(--space-24) 0;
}

.home-contact-form .field-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 var(--space-6);
}

.home-contact-form .btn-primary {
	width: 100%;
	margin-top: var(--space-2);
}

.home-contacto .contacto-info p {
	color: var(--color-on-surface-muted);
	line-height: 1.7;
}

.home-contacto .whatsapp-card {
	text-decoration: none;
}

/* ---------- 7. Responsive ---------- */

@media (max-width: 1024px) {
	.home-products .product-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 992px) {
	/* theme.css centra el hero y la historia a partir de este breakpoint. */
	.hero-content {
		align-items: center;
	}

	.hero-labels {
		justify-content: center;
	}
}

@media (max-width: 768px) {
	.section-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.section-head--center {
		align-items: center;
	}

	.home-products .product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
	}

	.home-contact-form .field-row {
		grid-template-columns: 1fr;
	}
}