/* ==========================================================================
   Lulu — Secciones
   Una sección por cada archivo de template-parts/sections/.
   ========================================================================== */

.section { padding-block: var(--space-8); }

/* Grids genéricos */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.category-grid { display: grid; gap: 20px; }
.category-grid + .category-grid { margin-top: 20px; }
.category-grid--lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.category-grid--sm { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
	.card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.category-grid--lg, .category-grid--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.category-grid--lg .category-card:first-child { grid-column: 1 / -1; }
	.category-card--lg { min-height: 240px; }
}
@media (max-width: 560px) {
	.card-grid { grid-template-columns: 1fr; }
	.category-card, .category-card--lg { min-height: 180px; padding: var(--space-3); }
}

/* Hero ------------------------------------------------------------------- */
.hero {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 43%); min-height: 660px;
	background: radial-gradient(ellipse 60% 70% at 15% 40%, rgb(200 24 35 / 14%), transparent 70%);
}
.hero__copy {
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 26px;
	padding: 96px 72px 96px max(var(--gutter), calc((100vw - var(--container)) / 2));
}
.hero__title { margin: 0; font-size: var(--fs-hero); line-height: 1.06; }
.hero__text { max-width: 480px; margin: 0; color: var(--color-muted); font-size: 1.03125rem; line-height: 1.65; }
.hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-6); padding-top: 22px; }
.hero__media { position: relative; display: flex; align-items: flex-end; justify-content: flex-end; padding: 28px; background: var(--color-surface-2); overflow: hidden; }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media .media-tag { position: relative; }

@media (max-width: 960px) {
	.hero { grid-template-columns: 1fr; min-height: 0; }
	.hero__copy { padding: var(--space-7) var(--gutter); }
	.hero__media { min-height: 360px; order: -1; }
}

/* Barra de ventajas ------------------------------------------------------ */
.features-bar { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.features-bar__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-5); padding-block: 26px; }
@media (max-width: 900px) {
	.features-bar__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.features-bar__inner { grid-template-columns: 1fr; }
}

/* Banner dividido -------------------------------------------------------- */
.split-banner {
	display: grid; grid-template-columns: minmax(0, 43%) minmax(0, 1fr); min-height: 520px;
	background: radial-gradient(ellipse 50% 80% at 85% 50%, rgb(224 46 109 / 10%), transparent 70%), var(--color-surface);
}
.split-banner--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 43%); }
.split-banner--reverse .split-banner__media { order: 2; }
.split-banner__media { position: relative; background: var(--color-surface-2); }
.split-banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-banner__copy {
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px;
	padding: var(--space-8) max(var(--gutter), calc((100vw - var(--container)) / 2)) var(--space-8) 80px;
}
.split-banner--reverse .split-banner__copy { padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); padding-right: 80px; }
.split-banner__title { margin: 0; font-size: clamp(1.875rem, 3.4vw, 2.625rem); line-height: 1.14; }
.split-banner__text { max-width: 520px; margin: 0; color: var(--color-muted); }

@media (max-width: 900px) {
	.split-banner, .split-banner--reverse { grid-template-columns: 1fr; }
	.split-banner__media { min-height: 300px; order: 0 !important; }
	.split-banner__copy, .split-banner--reverse .split-banner__copy { padding: var(--space-7) var(--gutter); }
}

@media (max-width: 600px) {
	.hero__media { min-height: 260px; }
	.hero__stats { gap: var(--space-5); }
}

/* Cabecera de listado (tienda, categorías, búsqueda, blog) */
.archive-header {
	display: grid; align-items: center; gap: var(--space-5);
	margin-bottom: var(--space-5); padding: var(--space-6);
	background: radial-gradient(ellipse 60% 120% at 0% 0%, rgb(200 24 35 / 16%), transparent 70%), var(--color-surface);
	border-radius: var(--radius);
	overflow: hidden;
}
.archive-header--image { grid-template-columns: minmax(0, 1fr) minmax(0, 38%); padding-block: var(--space-5); }
.archive-header__copy { display: flex; flex-direction: column; gap: var(--space-3); }
.archive-header__title { margin: 0; font-size: var(--fs-2xl); }
.archive-header__text { max-width: 620px; color: var(--color-muted); }
.archive-header__text p:last-child { margin-bottom: 0; }
.archive-header__count { margin: 0; color: var(--color-secondary-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.archive-header__media { position: relative; align-self: stretch; min-height: 200px; margin: calc(var(--space-5) * -1) calc(var(--space-6) * -1) calc(var(--space-5) * -1) 0; }
.archive-header__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(90deg, transparent, #000 35%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); }
@media (max-width: 700px) {
	.archive-header { padding: var(--space-5); }
	.archive-header--image { grid-template-columns: 1fr; }
	.archive-header__media { order: -1; min-height: 140px; margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0; }
	.archive-header__media img { mask-image: linear-gradient(0deg, transparent, #000 50%); -webkit-mask-image: linear-gradient(0deg, transparent, #000 50%); }
}

/* Blog ------------------------------------------------------------------- */
.blog .archive-header { margin-bottom: var(--space-6); }
.blog-pagination .nav-links { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-7); }
.blog-pagination .page-numbers { display: grid; place-items: center; min-width: 40px; height: 40px; padding-inline: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.blog-pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }