/* ==========================================================================
   home.css — Hero, benefits bar, featured products, flavor cards, story
   ========================================================================== */

/* ---- HERO ESTÁTICO (rojo oscuro/negro + patrón de ajíes + glows) ---- */
.esp-hero {
	position: relative; overflow: hidden;
	background:
		radial-gradient(120% 100% at 80% 6%, rgba(159, 21, 21, 0.55), transparent 56%),
		linear-gradient(158deg, #2a0a08 0%, #160706 46%, #0a0605 100%);
	border-bottom: 1px solid rgba(255, 198, 46, 0.14);
}
/* Patrón sutil de ajíes, tileado y muy tenue. */
.esp-hero::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: url("../img/textures/chili-pattern.svg") repeat;
	background-size: 120px 120px; opacity: 0.06;
}
/* Velo para legibilidad del texto a la izquierda. */
.esp-hero::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(100deg, rgba(10, 6, 5, 0.86) 2%, rgba(10, 6, 5, 0.42) 40%, transparent 70%);
}
.esp-hero__bg { position: absolute; inset: 0; z-index: 0; }
/* Video de fondo: oculto por defecto; visible (muy sutil) solo en hero animado. */
.esp-hero__video { display: none; }
.esp-hero--video .esp-hero__video {
	display: block; position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: 0.9; z-index: 0; pointer-events: none;
}
/* Desktop con video: el splash es el protagonista → texto a un lado, botellas ocultas. */
@media (min-width: 769px) {
	.esp-hero--video .esp-hero__inner { grid-template-columns: 1fr; }
	.esp-hero--video .esp-hero__visual { display: none; }
	.esp-hero--video .esp-hero__copy { max-width: 640px; }
	/* Velo más fuerte a la izquierda para que el texto resalte sobre el video. */
	.esp-hero--video.esp-hero::after {
		background: linear-gradient(100deg, rgba(8, 4, 3, 0.92) 0%, rgba(8, 4, 3, 0.55) 38%, rgba(8, 4, 3, 0.08) 72%);
	}
}
/* Móvil: sin video → queda el hero estático aprobado con botellas.
   (El video del hero es ambiente y silenciado, así que se mantiene aunque el
   sistema pida reduce-motion; las animaciones decorativas sí se desactivan.) */
@media (max-width: 768px) { .esp-hero--video .esp-hero__video { display: none; } }
.esp-hero__glow { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; }
.esp-hero__glow--rojo { width: 480px; height: 480px; background: var(--color-red); top: -130px; right: -30px; opacity: .45; }
.esp-hero__glow--dorado { width: 360px; height: 360px; background: var(--color-gold); bottom: -150px; left: 6%; opacity: .16; }
.esp-hero__inner {
	position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr;
	align-items: center; gap: var(--esp-space-6); min-height: clamp(560px, 86vh, 840px); padding-block: var(--esp-space-8);
}
.esp-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--esp-font-body); font-weight: 700;
	font-size: var(--esp-fs-300); text-transform: uppercase; letter-spacing: var(--esp-tracking-caps);
	color: var(--esp-dorado); margin-bottom: var(--esp-space-4);
}
.esp-hero__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--esp-rojo); display: inline-block; }
.esp-hero__title { font-size: var(--esp-fs-900); line-height: var(--esp-lh-tight); color: var(--esp-crema); }
.esp-hero__title-1 { display: block; }
/* "BORICUA" como protagonista: relleno dorado + contorno. */
.esp-hero__title-2 {
	display: block; color: var(--esp-dorado);
	text-shadow: 0 0 1px var(--esp-dorado), 0 6px 40px rgba(255, 198, 46, 0.25);
}
.esp-hero__title-3 {
	display: block; font-family: var(--esp-font-body); font-weight: 600;
	font-size: clamp(1rem, 2.1vw, 1.4rem); text-transform: none; letter-spacing: 0;
	color: var(--esp-text-muted); margin-top: var(--esp-space-4);
}
.esp-hero__lede { color: var(--esp-text-muted); max-width: 44ch; margin-top: var(--esp-space-4); font-size: var(--esp-fs-500); }
.esp-hero__cta { display: flex; gap: var(--esp-space-3); margin-top: var(--esp-space-6); flex-wrap: wrap; }
.esp-hero__visual { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: stretch; gap: var(--esp-space-3); }
/* Logo animado: blend screen elimina el negro del video → flota sobre el hero. */
/* Logo animado (WebP con transparencia real → flota sin recuadro, sin blend). */
.esp-hero__logo-anim {
	width: min(560px, 100%); height: auto; z-index: 2;
	filter: drop-shadow(0 26px 44px rgba(0,0,0,.6)); animation: esp-float 7s ease-in-out infinite;
}
.esp-hero__mascot {
	width: clamp(240px, 30vw, 400px); height: auto; z-index: 2;
	filter: drop-shadow(0 26px 44px rgba(0,0,0,.65)); animation: esp-float 7s ease-in-out infinite;
}
/* Botellas agrupadas: lineup con overlap + leve stagger vertical, reflejo cálido. */
.esp-hero__bottles { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 0; z-index: 1; width: 100%; }
.esp-hero__bottles::after {
	content: ""; position: absolute; bottom: -6px; left: 4%; right: 4%; height: 34px;
	background: radial-gradient(60% 100% at 50% 0%, rgba(255, 198, 46, 0.20), transparent 70%);
	filter: blur(8px);
}
.esp-hero__bottle-wrap {
	position: relative; flex: 0 0 auto; margin-inline: clamp(-28px, -1.7vw, -14px);
	transition: transform var(--esp-dur) var(--esp-ease-emph);
}
.esp-hero__bottle-wrap:nth-child(odd) { transform: translateY(-16px); } /* stagger */
.esp-hero__bottle-wrap:hover { transform: translateY(-24px); z-index: 3; }
.esp-hero__bottle {
	height: clamp(170px, 18vw, 270px); width: auto; max-width: none; object-fit: contain; display: block;
	filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.6));
}
.esp-hero__bottles--placeholder .esp-hero__bottle { width: clamp(46px, 7vw, 80px); height: clamp(120px, 18vw, 220px); }

/* ---- MARQUEE de sabores (elemento firma — rótulo de colmado) ---- */
.esp-marquee {
	position: relative; overflow: hidden; background: var(--esp-rojo); color: var(--esp-crema);
	border-block: 2px solid var(--esp-dorado);
}
.esp-marquee__track {
	display: inline-flex; align-items: center; gap: var(--esp-space-5); padding-block: 0.7rem;
	white-space: nowrap; will-change: transform; animation: esp-marquee 32s linear infinite;
}
.esp-marquee:hover .esp-marquee__track { animation-play-state: paused; }
.esp-marquee__item {
	font-family: var(--esp-font-display); font-size: 1.5rem; text-transform: uppercase;
	letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: var(--esp-space-5);
}
.esp-marquee__item::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--esp-dorado); display: inline-block; }

/* ---- BENEFITS BAR ---- */
.esp-benefits { background: linear-gradient(180deg, var(--esp-ember-2), var(--esp-surface)); border-bottom: 1px solid var(--esp-border); }
.esp-benefits__inner { display: flex; flex-wrap: wrap; gap: var(--esp-space-5); justify-content: space-between; align-items: center; padding-block: var(--esp-space-5); }
.esp-benefits .esp-badge { background: transparent; border: none; flex: 1 1 auto; justify-content: center; font-size: var(--esp-fs-400); }
.esp-benefits .esp-badge + .esp-badge { border-left: 1px solid var(--esp-border); }

/* ---- FEATURED ---- */
.esp-featured__more { text-align: center; margin-top: var(--esp-space-6); }
.esp-empty { text-align: center; color: var(--esp-text-muted); padding-block: var(--esp-space-6); }

/* ---- FLAVOR CARD (Sabores Destacados) — dark + borde dorado sutil + glow rojo ---- */
.esp-flavors { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-space-5); }
.esp-flavor-card {
	position: relative; display: flex; flex-direction: column; height: 100%; will-change: transform;
	background: var(--esp-surface); border: 1px solid rgba(255, 198, 46, 0.14);
	border-radius: var(--radius-lg); overflow: hidden;
	transition: transform 360ms var(--esp-ease-emph), border-color 280ms var(--esp-ease-emph), box-shadow 360ms var(--esp-ease-emph);
}
.esp-flavor-card:hover {
	transform: translateY(-8px); border-color: rgba(255, 198, 46, 0.45);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5), 0 12px 40px rgba(226, 42, 35, 0.18);
}
.esp-flavor-card__media {
	position: relative; display: block; aspect-ratio: 1 / 1;
	background: radial-gradient(60% 50% at 50% 42%, rgba(255, 198, 46, 0.07), transparent 72%);
}
.esp-flavor-card__img {
	width: 100%; height: 100%; object-fit: contain; object-position: center; padding: var(--esp-space-3);
	filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.55)); transition: transform 420ms var(--esp-ease);
}
.esp-flavor-card:hover .esp-flavor-card__img { transform: translateY(-6px); }
/* Video de sabor en hover (desktop): overlay sobre la botella, oculto por defecto. */
.esp-flavor-card__video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
	opacity: 0; pointer-events: none; z-index: 1; transition: opacity 0.32s var(--esp-ease);
}
.esp-flavor-card:hover .esp-flavor-card__video { opacity: 1; }
.esp-flavor-card__body { display: flex; flex-direction: column; gap: var(--esp-space-2); padding: var(--esp-space-4); flex: 1 1 auto; }
.esp-flavor-card__name { font-family: var(--font-body); font-weight: 700; font-size: var(--esp-fs-500); text-transform: none; letter-spacing: 0; line-height: 1.2; }
.esp-flavor-card__name a { color: var(--color-cream); }
.esp-flavor-card__name a:hover { color: var(--color-gold); }
.esp-flavor-card__desc { color: var(--esp-text-muted); font-size: var(--esp-fs-300); line-height: 1.5; }
.esp-flavor-card__foot { margin-top: auto; padding-top: var(--esp-space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--esp-space-3); }
.esp-flavor-card__price { color: var(--color-gold); font-weight: 700; font-size: var(--esp-fs-600); }
.esp-flavor-card__btn, .esp-flavor-card .add_to_cart_button, .esp-flavor-card .button {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-space-2);
	font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: var(--esp-tracking-caps);
	font-size: var(--esp-fs-300); padding: 0.62rem 1rem; border-radius: var(--esp-radius-pill);
	background: var(--color-red); color: #fff; border: 0; cursor: pointer; white-space: nowrap;
	transition: background 160ms var(--esp-ease-emph), transform var(--esp-press) var(--esp-press-ease);
}
.esp-flavor-card__btn:hover, .esp-flavor-card .button:hover { background: #ef332c; transform: translateY(-2px); color: #fff; }
.esp-flavor-card__btn:active, .esp-flavor-card .button:active { transform: translateY(0) scale(0.98); }
.esp-flavor-card .added_to_cart { display: none; }

/* ---- PACKS MÁS VENDIDOS ---- */
.esp-packs { background: linear-gradient(180deg, var(--esp-bg), #140b09); }
.esp-packs__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-space-5); }
.esp-pack-card {
	display: grid; grid-template-columns: 0.95fr 1.05fr; background: var(--esp-surface);
	border: 1px solid rgba(255, 198, 46, 0.14); border-radius: var(--radius-lg); overflow: hidden; will-change: transform;
	transition: transform 360ms var(--esp-ease-emph), border-color 280ms var(--esp-ease-emph), box-shadow 360ms var(--esp-ease-emph);
}
.esp-pack-card:hover { transform: translateY(-6px); border-color: rgba(255, 198, 46, 0.45); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5), 0 12px 40px rgba(226, 42, 35, 0.18); }
.esp-pack-card__media { position: relative; display: block; background: var(--esp-surface-2); }
.esp-pack-card__img { width: 100%; height: 100%; object-fit: cover; min-height: 240px; }
.esp-pack-card__media .esp-pill { position: absolute; top: var(--esp-space-3); left: var(--esp-space-3); }
.esp-pack-card__body { display: flex; flex-direction: column; gap: var(--esp-space-3); justify-content: center; padding: var(--esp-space-5); }
.esp-pack-card__name { font-size: var(--esp-fs-700); }
.esp-pack-card__name a { color: var(--color-cream); }
.esp-pack-card__name a:hover { color: var(--color-gold); }
.esp-pack-card__desc { color: var(--esp-text-muted); font-size: var(--esp-fs-400); }
.esp-pack-card__foot { display: flex; align-items: center; gap: var(--esp-space-4); margin-top: var(--esp-space-2); flex-wrap: wrap; }
.esp-pack-card__price { color: var(--color-gold); font-weight: 700; font-size: var(--esp-fs-700); }

/* ---- NIVEL DE PIQUE (escala de picante) ---- */
.esp-heatscale__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--esp-space-4); }
.esp-heatscale__item {
	text-align: center; background: var(--esp-surface); border: 1px solid var(--esp-border);
	border-radius: var(--radius-lg); padding: var(--esp-space-6) var(--esp-space-4);
	transition: transform 320ms var(--esp-ease-emph), border-color 280ms var(--esp-ease-emph), box-shadow 320ms var(--esp-ease-emph);
}
.esp-heatscale__item:hover { transform: translateY(-6px); border-color: rgba(226, 42, 35, 0.45); box-shadow: 0 16px 40px rgba(226, 42, 35, 0.15); }
.esp-heatscale__meter { display: flex; justify-content: center; margin-bottom: var(--esp-space-3); }
.esp-heatscale__meter .esp-picante { gap: 3px; }
.esp-heatscale__meter .esp-icon--pepper { width: 22px; height: 22px; }
.esp-heatscale__label { font-family: var(--font-heading); font-size: var(--esp-fs-600); color: var(--color-cream); text-transform: uppercase; letter-spacing: var(--esp-tracking-display); }
.esp-heatscale__note { color: var(--esp-text-muted); font-size: var(--esp-fs-300); margin-top: var(--esp-space-1); }

/* ---- HECHO EN PUERTO RICO ---- */
.esp-madeinpr { position: relative; background: var(--esp-ember-2) url("../img/textures/leaf-shadow.webp") center/cover no-repeat; }
.esp-madeinpr::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 6, 5, 0.9) 35%, rgba(10, 6, 5, 0.5) 100%); }
.esp-madeinpr__inner { position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--esp-space-7); align-items: center; }
.esp-madeinpr__media { text-align: center; }
.esp-madeinpr__media img { width: clamp(220px, 26vw, 380px); height: auto; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.6)); animation: subtle-float 6s ease-in-out infinite; }
.esp-madeinpr__text { color: var(--esp-text-muted); margin-top: var(--esp-space-3); }
.esp-madeinpr__points { display: grid; gap: var(--esp-space-2); margin-top: var(--esp-space-4); }
.esp-madeinpr__points li { display: inline-flex; align-items: center; gap: var(--esp-space-2); color: var(--color-cream); font-weight: 600; }
.esp-madeinpr__points svg { color: var(--color-gold); flex: 0 0 auto; }
.esp-madeinpr__cta { margin-top: var(--esp-space-5); }

/* ---- CTA FINAL ---- */
.esp-finalcta__card {
	text-align: center; border-radius: var(--radius-xl); padding: var(--esp-space-8) var(--esp-space-6);
	background: radial-gradient(120% 140% at 0% 0%, rgba(255, 198, 46, 0.16), transparent 55%), var(--color-red);
	color: #fff; box-shadow: var(--shadow-red);
}
.esp-finalcta__card .eyebrow { color: #fff; justify-content: center; }
.esp-finalcta__card .eyebrow::before { background: #fff; }
.esp-finalcta__title { font-family: var(--font-heading); font-size: var(--esp-fs-900); line-height: var(--esp-lh-tight); color: #fff; margin: var(--esp-space-2) 0; }
.esp-finalcta__text { color: rgba(255, 255, 255, 0.9); max-width: 52ch; margin: 0 auto var(--esp-space-5); }
.esp-finalcta__actions { display: flex; gap: var(--esp-space-3); justify-content: center; flex-wrap: wrap; }
.esp-finalcta__card .esp-btn--primary { background: #fff; color: var(--color-red); box-shadow: none; }
.esp-finalcta__card .esp-btn--primary:hover { background: var(--color-gold); color: var(--color-black); }
.esp-finalcta__card .esp-btn--secondary { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.esp-finalcta__card .esp-btn--secondary:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.1); }

/* ---- BRAND BAND (logo animado con Higgsfield) ---- */
.esp-brandband {
	position: relative; overflow: hidden; text-align: center;
	background: radial-gradient(80% 120% at 50% 0%, var(--esp-ember), var(--esp-bg) 70%);
	border-block: 1px solid var(--esp-border);
	padding-block: var(--esp-space-7);
}
.esp-brandband__kicker {
	font-family: var(--esp-font-body); font-weight: 700; font-size: var(--esp-fs-300);
	text-transform: uppercase; letter-spacing: var(--esp-tracking-caps); color: var(--esp-dorado);
	margin-bottom: var(--esp-space-4);
}
.esp-brandband__media {
	width: min(680px, 92%); margin: 0 auto; aspect-ratio: 16/9; border-radius: var(--esp-radius-lg);
	overflow: hidden; box-shadow: var(--esp-shadow-lg);
}
.esp-brandband__media video, .esp-brandband__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.esp-brandband__tagline {
	margin-top: var(--esp-space-4); color: var(--esp-text-muted); font-size: var(--esp-fs-500); max-width: 48ch; margin-inline: auto;
}

/* ---- ENVÍOS BANNER ---- */
.esp-envios__card {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--esp-space-5);
	background: radial-gradient(120% 160% at 0% 0%, rgba(255,198,46,.16), transparent 55%), var(--esp-rojo);
	color: #fff; padding: var(--esp-space-6); border-radius: var(--esp-radius-lg); box-shadow: var(--esp-glow-rojo);
}
.esp-envios__icon { color: #fff; opacity: .9; }
.esp-envios__title { font-size: var(--esp-fs-700); color: #fff; }
.esp-envios__text { color: rgba(255,255,255,.85); max-width: 52ch; }
.esp-envios__card .esp-btn--primary { background: #fff; color: var(--esp-rojo); box-shadow: none; }
.esp-envios__card .esp-btn--primary:hover { background: var(--esp-dorado); color: var(--esp-text-on-dorado); }