/* ==========================================================================
   Aprop · Home (carga condicional en is_front_page)
   Estilos de las secciones de front-page.php.
   ========================================================================== */

/* --- Section heads -------------------------------------------------------- */
.section-head { margin-bottom: var(--space-6); }
.section-head__title { margin-top: var(--space-1); }
.section-head--center { text-align: center; margin-inline: auto; max-width: 36rem; }
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.section-head__link { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); color: var(--color-primary); white-space: nowrap; }
.section-head__link:hover { gap: 10px; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
	background: linear-gradient(120deg, var(--aprop-green) 0%, var(--aprop-green-dark) 100%);
	background-size: cover;
	background-position: center;
	color: #fff;
}
.hero__inner { padding-block: clamp(3rem, 8vw, 6.5rem); max-width: 46rem; }
.hero__eyebrow { color: var(--aprop-green-light); }
.hero__title { color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); margin-block: var(--space-3); }
.hero__subtitle { font-size: var(--fs-lg); color: rgba(255, 255, 255, 0.92); max-width: 34rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* --- Value props ---------------------------------------------------------- */
.value-prop { text-align: left; }
.value-prop__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: var(--radius);
	background: var(--aprop-green-light); color: var(--aprop-green-dark);
	margin-bottom: var(--space-3);
}
.value-prop__title { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.value-prop__text { color: var(--color-text-muted); }

/* --- Categorías ----------------------------------------------------------- */
.cat-card {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
	overflow: hidden; transition: box-shadow var(--t), transform var(--t);
}
.cat-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.cat-card__media {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 16 / 10; background: var(--color-bg-alt); color: var(--aprop-green);
	overflow: hidden;
}
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cat-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.cat-card__title { font-weight: var(--fw-bold); color: var(--color-heading); }
.cat-card__count { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* --- Cómo funciona -------------------------------------------------------- */
.how__steps { counter-reset: step; margin-top: var(--space-2); }
.how-step { position: relative; padding-top: var(--space-5); }
.how-step__num {
	display: inline-flex; align-items: center; justify-content: center;
	font-size: var(--fs-xl); font-weight: var(--fw-black);
	color: var(--aprop-ink-900); background: var(--aprop-green-light);
	width: 54px; height: 54px; border-radius: 50%; margin-bottom: var(--space-3);
}
.how-step__title { color: #fff; margin-bottom: var(--space-2); }
.how-step__text { color: var(--color-on-dark); }

/* --- Vendors (carrusel) --------------------------------------------------- */
.vendors__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr);
	gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory;
	padding-bottom: var(--space-3); margin: 0 calc(-1 * var(--gutter)); padding-inline: var(--gutter);
	-webkit-overflow-scrolling: touch;
}
.vendors__track::-webkit-scrollbar { height: 6px; }
.vendors__track::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
.vendor-card {
	scroll-snap-align: start; position: relative;
	background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
	padding-bottom: var(--space-4); text-align: center; overflow: hidden;
	transition: box-shadow var(--t), transform var(--t);
}
.vendor-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.vendor-card__cover { display: block; height: 84px; background: linear-gradient(120deg, var(--aprop-green-light), var(--aprop-cream)); background-size: cover; background-position: center; }
.vendor-card__avatar { display: block; width: 64px; height: 64px; margin: -32px auto var(--space-2); border-radius: 50%; border: 3px solid #fff; overflow: hidden; box-shadow: var(--shadow-sm); }
.vendor-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.vendor-card__name { display: block; font-weight: var(--fw-bold); color: var(--color-heading); padding-inline: var(--space-3); }
.vendor-card__city { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); }

/* --- Productos (grid del shortcode WC) ------------------------------------ */
.products__grid ul.products { margin: 0; }

/* --- CTA vendedores ------------------------------------------------------- */
.cta-vendor { color: #fff; }
.cta-vendor .container { background: linear-gradient(120deg, var(--aprop-green) 0%, var(--aprop-green-dark) 100%); }
.cta-vendor__inner {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
	flex-wrap: wrap; padding: clamp(2rem, 5vw, 3.5rem); border-radius: var(--radius-lg);
}
.cta-vendor__title { color: #fff; }
.cta-vendor__sub { color: rgba(255, 255, 255, 0.92); max-width: 42ch; margin-top: var(--space-2); }
.cta-vendor__btn { flex: 0 0 auto; }

/* --- App download --------------------------------------------------------- */
.app-download__inner { max-width: 46rem; }
.app-download__sub { color: var(--color-text-muted); margin-top: var(--space-2); }
.app-download__badges { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.badge-soon {
	display: inline-flex; align-items: center; padding: 0.7rem 1.25rem;
	border: 2px dashed var(--color-border); border-radius: var(--radius-pill);
	color: var(--color-text-muted); font-weight: var(--fw-medium);
}

/* --- Responsive ----------------------------------------------------------- */
@media (min-width: 1024px) {
	.cta-vendor__inner { flex-wrap: nowrap; }
}