/* ============================================================
   home-pauta.css — Home Pauta landing page template
   Paleta y tipografías alineadas a Guia_de_Marca_Leidy_Garibello.pdf

   Los colores y tipografías de marca (--brand-*) están definidos una
   sola vez en style.css (tema hijo) y se reutilizan aquí.

   Tipografías de marca:
   - Logo: "Kind Avenue" (fuente Canva, solo en el logotipo — no aplica aquí)
   - Títulos: Impact / League Spartan  → usamos League Spartan (Google Fonts)
   - Cuerpo: Nexa (fuente de pago, no disponible en Google Fonts)
             → sustituto más cercano: Poppins
   - Acentos / llamadas a la acción: sin cursiva por decisión de marca —
             misma fuente que los títulos (League Spartan), resaltada con
             el color fucsia (--brand-fucsia).
   Si compras la licencia de Nexa, cambia --brand-font-body en style.css.
   ============================================================ */

#home-pauta {
	font-family: var(--brand-font-body);
}

#home-pauta .hp-hero__title,
#home-pauta .hp-section-title,
#home-pauta .hp-benefit__title,
#home-pauta .hp-card__title,
#home-pauta .hp-review__name,
#home-pauta .hp-step__title,
#home-pauta .hp-promo__title,
#home-pauta .hp-final-cta__title,
#home-pauta .hp-cats__tab {
	font-family: var(--brand-font-title);
}

#home-pauta .hp-hero__accent {
	font-family: var(--brand-font-accent);
	font-weight: 800;
}

/* ── Reset ─────────────────────────────────────────────────── */
#home-pauta *,
#home-pauta *::before,
#home-pauta *::after { box-sizing: border-box; }

/* ── Layout ─────────────────────────────────────────────────── */
.hp-wrap {
	width: 100%;
	overflow-x: hidden;
}

.hp-container {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* ── Common heading ─────────────────────────────────────────── */
.hp-section-title {
	font-size: clamp(1.35rem, 2.8vw, 2rem);
	font-weight: 700;
	color: #1a0a1e;
	text-align: center;
	margin: 0 0 2rem;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.hp-btn {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	border-radius: 50px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.25s ease;
	border: 2px solid transparent;
	line-height: 1;
	white-space: nowrap;
}

.hp-btn:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

.hp-btn--hero {
	background-color: #9F3969;
	color: #fff;
	border-color: #9F3969;
	padding: 0.9rem 2.25rem;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	/* no align-self here — let context control it */
}

/* Hero CTA: constrain to content width inside flex column */
.hp-hero__text .hp-btn--hero {
	align-self: flex-start;
}

/* Final CTA button: always centered */
.hp-final-cta .hp-btn {
	align-self: center;
}

.hp-btn--primary {
	background-color: #9F3969;
	color: #fff;
	border-color: #9F3969;
}

/* Cart button */
.hp-btn--cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background-color: #9F3969;
	color: #fff;
	border-color: #9F3969;
	width: 100%;
	white-space: nowrap;
}

/* Force white text+icon on both button states, overriding any theme cascade */
#home-pauta .hp-btn--cart,
#home-pauta .hp-btn--added {
	color: #fff !important;
}

/* Icon spans and their SVG/i children always track the parent text color */
#home-pauta .hp-btn__icon,
#home-pauta .hp-btn__icon svg,
#home-pauta .hp-btn__icon i {
	color: currentColor !important;
	fill: currentColor !important;
}

/* Icon and text spans inside hp-btn */
.hp-btn__icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	flex-shrink: 0;
}

.hp-btn__text {
	white-space: nowrap;
	min-width: 0;
}

.hp-btn--outline {
	background-color: transparent;
	color: #9F3969;
	border-color: #9F3969;
	width: 100%;
	text-align: center;
	white-space: nowrap;
}

/* Added-to-cart state */
.hp-btn--added {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background-color: #2bbcb4 !important;
	border-color: #2bbcb4 !important;
	color: #fff !important;
	white-space: nowrap;
}

/* Promo CTA */
.hp-btn--promo {
	background-color: #fff;
	color: #9F3969;
	border-color: #fff;
	padding: 0.9rem 2.25rem;
	font-size: 1.05rem;
}

.hp-btn--promo:hover {
	background-color: #E5BFCB;
	opacity: 1;
}

/* Hide WooCommerce injected "View cart" link */
#home-pauta a.added_to_cart.wc-forward {
	display: none !important;
}

/* ============================================================
   HERO — Desktop split layout
   ============================================================ */
.hp-hero {
	background-color: #F8F3E8;
	padding: 3rem 0;
}

.hp-hero__inner {
	display: flex;
	align-items: center;
	gap: 4rem;
}

.hp-hero__text {
	flex: 0 0 44%;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.hp-hero__tag {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9F3969;
}

.hp-hero__title {
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	font-weight: 800;
	line-height: 1.2;
	color: #1a0a1e;
	margin: 0;
}

.hp-hero__sub {
	font-size: clamp(0.95rem, 1.5vw, 1.1rem);
	color: #4a3550;
	line-height: 1.65;
	margin: 0;
	max-width: 420px;
}

.hp-hero__slider {
	flex: 1;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	max-height: 480px;
	background-color: #f0eaf0;
	box-shadow: 0 16px 48px rgba(26, 10, 30, 0.12);
}

.hp-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.9s ease;
}

.hp-slide.is-active { opacity: 1; }

.hp-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ============================================================
   S1 · QUICK BENEFITS
   ============================================================ */
.hp-benefits {
	padding: 3rem 0;
	background-color: #fff;
}

.hp-benefits__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.hp-benefit {
	background: #fff;
	border: 1px solid rgba(159, 57, 105, 0.12);
	border-radius: 16px;
	padding: 2rem 1.5rem;
	text-align: center;
	transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.hp-benefit:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 32px rgba(200, 84, 122, 0.18);
	border-color: var(--brand-rosa-plum);
}

.hp-benefit__icon {
	font-size: 2.25rem;
	display: block;
	margin-bottom: 0.75rem;
	transition: transform 0.25s ease;
}

.hp-benefit:hover .hp-benefit__icon {
	transform: scale(1.15);
}

.hp-benefit__title {
	font-size: 1rem;
	font-weight: 700;
	color: #1a0a1e;
	margin: 0 0 0.5rem;
}

.hp-benefit__text {
	font-size: 0.875rem;
	color: #5a4060;
	margin: 0;
	line-height: 1.65;
}

/* ============================================================
   HERO — versión banner fotográfico (Aprende, crea y emprende)
   Se apoya en las mismas clases .hp-hero / .hp-benefit ya
   existentes arriba; estas reglas solo añaden lo nuevo.
   ============================================================ */
.hp-hero--classes {
	padding: 0;
	background-color: #F8F3E8; /* debe coincidir con el fondo de Banner.png */

	/* Full-bleed: rompe el ancho máximo del contenedor del tema
	   para que el banner llegue de borde a borde de la pantalla. */
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* padding-top = colchón para que el título nunca quede debajo del
   menú fijo/sticky. Si tu header sticky mide más o menos, ajusta esto.
   aspect-ratio = 3200/1312, la proporción exacta de Banner.png, para
   que el contenedor SIEMPRE tenga la misma forma que la imagen y
   nunca se recorte arriba/abajo ni a los lados. */
.hp-hero__banner {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	aspect-ratio: 3200 / 1312;
	min-height: 650px;
	padding-top: 110px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

@media (max-width: 782px) {
	/* En móvil dejamos de superponer el texto centrado sobre la foto
	   (así es como se recortaba el banner y se montaba con el menú).
	   En su lugar apilamos: 1) la imagen completa, sin recortes, con su
	   aspect-ratio real, y 2) el texto debajo, en flujo normal. El
	   padding-top de la caja reserva el espacio del menú fijo/sticky
	   ANTES de la imagen, así nunca se tocan. */
	.hp-hero__banner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		aspect-ratio: auto;
		min-height: 0;
		/* Separación fija entre el menú y el banner (pedida por el cliente). */
		padding-top: 70px;
		padding-bottom: 2rem;
		background-image: none !important;
	}

	/* La imagen real vive en este pseudo-elemento: ancho completo +
	   aspect-ratio de Banner.png = se ve el banner ENTERO, sin recortar
	   arriba/abajo como pasaba con background-size:cover en una caja
	   más baja que la foto. background-image:inherit toma la misma URL
	   que trae el style inline del elemento padre. */
	.hp-hero__banner::before {
		content: '';
		display: block;
		width: 100%;
		/* OJO: la foto de móvil (Banner-mobile.avif) es otra imagen, con
		   otra proporción, no la panorámica de escritorio (3200/1312) —
		   por eso aquí usamos un aspect-ratio propio para vertical, y
		   background-size:cover (no "contain") para que SIEMPRE llene el
		   ancho completo, recortando arriba/abajo si hace falta, en vez
		   de dejar franjas vacías a los lados cuando la foto no calza
		   exacto con la proporción de la caja. */
		aspect-ratio: 4 / 3;
		/* OJO: no usar "background-image: inherit" aqui. El padre
		   (.hp-hero__banner) tiene su propio background-image forzado a
		   "none !important" un poco mas arriba en este mismo breakpoint
		   para que la foto no se dibuje detras del texto - y "inherit"
		   toma el valor YA CALCULADO del padre (o sea "none"), asi que la
		   imagen desaparecia por completo. Por eso la URL real se guarda
		   en variables (ver estilo inline en el PHP), que SI se siguen
		   heredando sin que el "none !important" las afecte.
		   Aqui en movil usamos --hp-banner-img-mobile (foto propia para
		   vertical), no --hp-banner-img (la panoramica de escritorio). */
		background-image: var(--hp-banner-img-mobile);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}

	.hp-hero--classes .hp-hero__banner-inner {
		padding-left: clamp(20px, 6vw, 32px);
		padding-right: clamp(20px, 6vw, 32px);
	}

	.hp-hero__banner-inner {
		padding-top: 1.5rem;
	}
}

@media (max-width: 480px) {
	.hp-hero__banner {
		padding-top: 70px;
	}
}

.hp-hero--classes .hp-hero__banner-inner {
	width: 100%;
	margin-left: 0;
	margin-right: auto;
	max-width: none;
	padding-left: clamp(24px, 6vw, 90px);
}

.hp-hero__banner-inner {
	width: 100%;
}

.hp-hero--classes .hp-hero__text {
	flex: 0 0 auto;
	max-width: 480px;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.hp-hero--classes .hp-hero__title {
	font-size: clamp(1.85rem, 3.2vw, 2.5rem);
	font-weight: 700;
	color: #1a0a1e;
	line-height: 1.2;
	margin: 0;
}

.hp-hero__accent {
	color: #9F3969;
	font-weight: 800;
}

.hp-hero--classes .hp-hero__sub {
	max-width: 38ch;
}

/* Franja de cierre del hero */
.hp-hero-cta-band {
	background-color: #CC7DA3;
	height: 64px;
	position: relative;
}

.hp-hero-cta-band__sparkle {
	position: absolute;
	right: 6%;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	font-size: 1.6rem;
	opacity: 0.85;
}

/* Beneficios en 4 columnas — tarjeta flotante que se monta sobre
   el banner del hero, igual que en llamada_a_la_accion.png */
.hp-benefits--four .hp-benefits__grid {
	grid-template-columns: repeat(4, 1fr);
}

.hp-benefits--four {
	position: relative;
	z-index: 2;
	margin-top: -120px;
	padding-top: 2.5rem !important;
	background: transparent !important;
}

.hp-benefits--four .hp-benefit {
	position: relative;
	background: transparent;
	border: none;
	padding: 0.5rem 1rem;
}

.hp-benefits--four .hp-container {
	background: #FBF3E9;
	border-radius: 20px 20px;
	box-shadow: 0 -10px 30px rgba(26, 10, 30, 0.08);
	padding: 2.5rem 1.5rem 2rem;
	transition: box-shadow 0.6s ease;
}


/* Líneas divisorias finas entre columnas, como en el mockup de referencia */
.hp-benefits--four .hp-benefit:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 10%;
	bottom: 10%;
	right: 0;
	width: 1px;
	background: #E5BFCB;
}

.hp-benefits--four .hp-benefit__icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 52px !important;
	height: 52px !important;
	max-width: 52px;
	max-height: 52px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--brand-rosa-claro);
	color: var(--brand-fucsia);
	margin: 0 auto 0.75rem;
}

.hp-benefits--four .hp-benefit__icon svg {
	width: 24px !important;
	height: 24px !important;
	max-width: 24px;
	max-height: 24px;
	display: block;
}

@media (max-width: 900px) {
	.hp-benefits--four .hp-benefits__grid { grid-template-columns: repeat(2, 1fr); }
	.hp-benefits--four .hp-benefit:nth-child(2n)::after { display: none; }
}

@media (max-width: 560px) {
	/* Ya no hace falta la tarjeta blanca semitransparente: el texto ya
	   no va encima de la foto (ver bloque de arriba), va debajo, sobre
	   el fondo crema del hero, así que se lee bien sin ese recurso. */
	.hp-hero--classes .hp-hero__text {
		max-width: 100%;
	}
	.hp-benefits--four { margin-top: -40px; }
	.hp-benefits--four .hp-benefits__grid { grid-template-columns: 1fr; }
	.hp-benefits--four .hp-benefit::after { display: none; }
}

/* ============================================================
   S2 · CATEGORIES TABS
   ============================================================ */
.hp-categories {
	padding: 2rem 0;
	
}

.hp-cats__tabs {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.hp-cats__tab {
	flex-shrink: 0;
	padding: 0.5rem 1.25rem;
	border-radius: 50px;
	border: 1.5px solid #E5BFCB;
	background: #fff;
	color: #5a4060;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	white-space: nowrap;
}

.hp-cats__tab.is-active,
.hp-cats__tab:hover {
	background: #9F3969;
	color: #fff;
	border-color: #9F3969;
}

.hp-cats__panel { display: none; }
.hp-cats__panel.is-active { display: block; }

/* Category panel uses the same 4-col grid as the main product section */
.hp-cats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

/* "Ver todos los diseños de [categoría]" — añadido en la auditoría SEO
   (sept. 2026), junto con el enlace en page-home-pauta.php. Reutiliza
   .hp-btn--outline (ya definido arriba) para que combine con el resto
   de los botones secundarios del sitio. */
.hp-cats__view-all {
	display: flex;
	justify-content: center;
	margin-top: 1.75rem;
}

/* ============================================================
   SHARED SLIDER STRUCTURE (S3 + S4)
   ============================================================ */

/* Wrapper: padding reserves space for arrows so overflow-x:hidden
   on .hp-wrap never clips them */
.hp-pslider,
.hp-rslider {
	position: relative;
	padding: 0 2.75rem;   /* ← key fix: arrows live inside this space */
}

.hp-slider__viewport {
	overflow: hidden;
}

.hp-slider__track {
	display: flex;
	align-items: stretch;  /* equal-height cards/reviews across a row */
	transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

.hp-slider__item {
	flex-shrink: 0;
	padding: 0 0.5rem;
	display: flex;
	flex-direction: column;
}

.hp-slider__item > * { flex: 1; }  /* card/review fills item height */

/* ── Arrow buttons ── */
.hp-slider__prev,
.hp-slider__next {
	position: absolute;
	top: calc(50% - 1.5rem);  /* centre relative to viewport, not dots */
	z-index: 10;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid #9F3969;
	color: #9F3969;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(200, 84, 122, 0.15);
	transition: background 0.2s, color 0.2s, box-shadow 0.2s;
	padding: 0;
}

.hp-slider__prev:hover,
.hp-slider__next:hover {
	background: #9F3969;
	color: #fff;
	box-shadow: 0 4px 16px rgba(200, 84, 122, 0.35);
}

.hp-slider__prev:disabled,
.hp-slider__next:disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

.hp-slider__prev { left: 0; }   /* ← inside padding, never clipped */
.hp-slider__next { right: 0; }

/* ── Dots ── */
.hp-slider__dots {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-top: 1.25rem;
	min-height: 14px;  /* prevents layout jump while JS populates */
}

.hp-slider__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #E5BFCB;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background 0.22s ease, transform 0.22s ease;
}

.hp-slider__dot.is-active {
	background: #9F3969;
	transform: scale(1.35);
}

.hp-slider__dot:hover:not(.is-active) {
	background: #CC7DA3;
}

/* ============================================================
   S3 · TOP SELLERS SLIDER
   ============================================================ */
.hp-sellers {
	padding: 4rem 0;
	background-color: #fff;
}

/* ============================================================
   PRODUCT CARD (shared — S2 tabs, S3 slider, S7 grid)
   ============================================================ */
.hp-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.hp-card:hover {
	box-shadow: 0 10px 28px rgba(200, 84, 122, 0.18);
	transform: translateY(-4px);
}

.hp-card__img-link {
	display: block;
    aspect-ratio: 820 / 680;
	overflow: hidden;
	background-color: #f5f0f2;
}

.hp-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.hp-card:hover .hp-card__img { transform: scale(1.05); }

.hp-card__body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.5rem;
}

.hp-card__title {
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
}

.hp-card__title a { color: #1a0a1e; text-decoration: none; }
.hp-card__title a:hover { color: #9F3969; }

.hp-card__price { font-size: 1rem; font-weight: 700; color: #9F3969; }
.hp-card__price .price { color: #9F3969; }
.hp-card__price del { color: #aaa; font-size: 0.85em; font-weight: 400; }

/* CTA wrapper: fixed height stops WC injected link from shifting layout.
   position:relative + z-index:2 ensures the button area sits above any
   position:absolute overlay that the Blocksy parent theme may inject. */
.hp-card__cta {
	margin-top: auto;
	overflow: hidden;
	height: 2.6rem;
	display: flex;
	align-items: stretch;
	position: relative;
	z-index: 2;
}

.hp-card__cta .hp-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 0;
	height: 100%;
	font-size: 0.875rem;
}

/* ============================================================
   S4 · REVIEWS SLIDER
   ============================================================ */
.hp-reviews {
	padding: 4rem 0;
	background-color: #F8F3E8;
}

.hp-review {
	background: #fff;
	border-radius: 16px;
	border: 1px solid rgba(200, 84, 122, 0.1);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	height: 100%;
}

.hp-review__stars { display: flex; gap: 2px; }
.hp-star { color: #E4C697; font-size: 1.05rem; }

.hp-review__text {
	font-size: 0.9rem;
	color: #3a2540;
	line-height: 1.7;
	margin: 0;
	flex: 1;
	font-style: italic;
}

.hp-review__author {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	border-top: 1px solid rgba(200, 84, 122, 0.1);
	padding-top: 0.875rem;
}

.hp-review__name { font-size: 0.9rem; font-weight: 700; color: #1a0a1e; }
.hp-review__role { font-size: 0.78rem; color: #9F3969; }

/* ============================================================
   S5 · HOW IT WORKS
   ============================================================ */
.hp-how {
	padding: 4rem 0;
	background-color: #fff;
}

.hp-how__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	position: relative;
}

.hp-how__steps::before {
	content: '';
	position: absolute;
	top: 2.5rem;
	left: calc(100% / 6);
	right: calc(100% / 6);
	height: 2px;
	background: linear-gradient(to right, #9F3969, #2bbcb4);
	opacity: 0.2;
	z-index: 0;
}

.hp-step {
	text-align: center;
	position: relative;
	z-index: 1;
	padding: 1.5rem 1rem;
	border-radius: 16px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hp-step:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 28px rgba(43, 188, 180, 0.15);
}

.hp-step__circle {
	width: 5rem;
	height: 5rem;
	background: linear-gradient(135deg, #E5BFCB, #e0f7fa);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
	font-size: 2rem;
	box-shadow: 0 4px 16px rgba(200, 84, 122, 0.12);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.hp-step:hover .hp-step__circle {
	box-shadow: 0 6px 20px rgba(43, 188, 180, 0.3);
	transform: scale(1.08);
}

.hp-step__num {
	display: block;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9F3969;
	margin-bottom: 0.4rem;
}

.hp-step__title { font-size: 1rem; font-weight: 700; color: #1a0a1e; margin: 0 0 0.5rem; }
.hp-step__desc  { font-size: 0.875rem; color: #5a4060; line-height: 1.65; margin: 0; }

/* ============================================================
   S6 · PROMO BANNER
   ============================================================ */
.hp-promo {
	padding: 4rem 0;
	background: linear-gradient(135deg, #E5BFCB 0%, #e0f7fa 60%, #E5BFCB 100%);
}

.hp-promo__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
	max-width: 680px;
	margin-inline: auto;
}

.hp-promo__title {
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 800;
	color: #1a0a1e;
	margin: 0;
	line-height: 1.25;
}

.hp-promo__sub { font-size: clamp(0.9rem, 1.5vw, 1.05rem); color: #4a3550; margin: 0; }

/* ============================================================
   S7 · BEST SELLING PRODUCTS GRID
   ============================================================ */
.hp-grid {
	padding: 4.5rem 0;
	background-color: #f8f9fa;
}

.hp-grid__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

/* ============================================================
   S8 · FINAL CTA
   ============================================================ */
.hp-final-cta {
	padding: 4rem 0;
	background-color: #fff;
	text-align: center;
}

.hp-final-cta .hp-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.hp-final-cta__title {
	font-size: clamp(1.3rem, 2.5vw, 1.9rem);
	font-weight: 700;
	color: #1a0a1e;
	margin: 0;
	max-width: 640px;
}

.hp-final-cta__sub { font-size: 0.95rem; color: #5a4060; margin: 0; }

/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */
.hp-whatsapp {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 9999;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: #25d366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	text-decoration: none;
}

.hp-whatsapp:hover {
	transform: scale(1.12);
	box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6);
	color: #fff;
}

/* ============================================================
   ENTRANCE ANIMATIONS (IntersectionObserver driven)
   ============================================================ */
.hp-fade-in {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.hp-fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.hp-fade-in {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Empty state */
.hp-no-products { text-align: center; color: #888; padding: 2rem 0; }

/* ============================================================
   RESPONSIVE — Tablet (≤900px)
   ============================================================ */
@media (max-width: 900px) {
	.hp-hero__inner { gap: 2.5rem; }
	.hp-hero__text  { flex: 0 0 46%; }

	.hp-cats__grid        { grid-template-columns: repeat(2, 1fr); }
	.hp-grid__inner       { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   RESPONSIVE — Mobile (≤768px)
   ============================================================ */
@media (max-width: 768px) {

	/* Hero (versión slider antigua — no aplica al hero nuevo de banner
	   fotográfico, ver .hp-hero--classes más abajo) */
	.hp-hero:not(.hp-hero--classes) {
		padding: 0;
		position: relative;
		min-height: 142vw;
		max-height: 100svh;
		overflow: hidden;
	}

	.hp-hero__inner {
		position: relative;
		display: block;
		min-height: inherit;
		padding: 0;
		gap: 0;
	}

	.hp-hero__slider {
		position: absolute;
		inset: 0;
		border-radius: 0;
		aspect-ratio: unset;
		box-shadow: none;
		z-index: 0;
	}

	.hp-hero:not(.hp-hero--classes) .hp-hero__text {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
		flex: none;
		gap: 0.65rem;
		padding: 4rem 1.5rem 1.75rem;
		background: linear-gradient(
			to top,
			rgba(26, 10, 30, 0.88) 0%,
			rgba(26, 10, 30, 0.52) 38%,
			rgba(26, 10, 30, 0.12) 62%,
			transparent 100%
		);
	}

	.hp-hero:not(.hp-hero--classes) .hp-hero__tag { display: none; }

	.hp-hero:not(.hp-hero--classes) .hp-hero__title {
		font-size: clamp(1.5rem, 6vw, 2rem);
		color: #fff;
		line-height: 1.25;
		text-shadow: 0 2px 12px rgba(26, 10, 30, 0.55);
	}

	.hp-hero:not(.hp-hero--classes) .hp-hero__sub {
		color: rgba(255, 255, 255, 0.88);
		font-size: 0.9rem;
		max-width: 100%;
		text-shadow: 0 1px 8px rgba(26, 10, 30, 0.45);
	}

	/* Hero nuevo (banner fotográfico) en móvil */
	.hp-hero--classes .hp-hero__title {
		font-size: clamp(1.5rem, 6vw, 2rem);
	}

	/* S1 Benefits: 1 per row */
	.hp-benefits { padding: 2.5rem 0; }
	.hp-benefits__grid { grid-template-columns: 1fr; }

	/* S2 Categories */
	.hp-categories { padding: 2.5rem 0; }

	.hp-cats__tabs {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 0.25rem;
	}
	.hp-cats__tabs::-webkit-scrollbar { display: none; }
	.hp-cats__grid { grid-template-columns: repeat(2, 1fr); }

	/* S3 Sellers */
	.hp-sellers { padding: 2.5rem 0; }
	.hp-pslider { padding: 0 2.25rem; }

	/* S4 Reviews */
	.hp-reviews { padding: 2.5rem 0; }
	.hp-rslider { padding: 0 2.25rem; }

	/* S5 How it works: vertical */
	.hp-how { padding: 2.5rem 0; }

	.hp-how__steps {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.hp-how__steps::before { display: none; }

	.hp-step:not(:last-child)::after {
		content: '';
		display: block;
		width: 2px;
		height: 1.25rem;
		background: linear-gradient(to bottom, #9F3969, #2bbcb4);
		opacity: 0.25;
		margin: 0.5rem auto 0;
	}

	/* S6 Promo */
	.hp-promo { padding: 2.5rem 0; }
	.hp-promo__title { font-size: 1.35rem; }

	/* S7 Products grid */
	.hp-grid { padding: 2.5rem 0; }
	.hp-grid__inner { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
	.hp-card__body  { padding: 0.75rem; }

	/* Add-to-cart button inside 2-column cards: reclaim horizontal space so
	   "Añadir al carrito" fits on one line without truncation.
	   The base .hp-btn padding (1.75rem per side) is designed for standalone
	   hero buttons; inside a narrow card CTA it leaves no room for the text. */
	#home-pauta .hp-card__cta .hp-btn--cart,
	#home-pauta .hp-card__cta .hp-btn--added {
		padding-inline: 0.35rem;
		font-size: 0.73rem;
	}

	/* S8 Final CTA */
	.hp-final-cta { padding: 2.5rem 0; }

	/* WhatsApp: a bit smaller on mobile, avoid covering cart bar */
	.hp-whatsapp {
		width: 50px;
		height: 50px;
		bottom: 1.25rem;
		right: 1rem;
	}
}

/* ============================================================
   RESPONSIVE — Small mobile (≤380px)
   ============================================================ */
@media (max-width: 380px) {
	.hp-cats__grid  { gap: 0.75rem; }
	.hp-grid__inner { grid-template-columns: 1fr; }
}