/* HairSafe — Tienda Nube theme stylesheet
   Design tokens come from CSS custom properties set in style-colors.scss.tpl
   (--hs-primary, --hs-accent, --hs-bg, --hs-text, --hs-font-headings, --hs-font-rest) */

* { box-sizing: border-box; }

html, body { overflow-x: hidden; max-width: 100%; }

body {
	margin: 0;
	background: var(--hs-bg);
	color: var(--hs-text);
	font-family: var(--hs-font-rest);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .hs-heading {
	font-family: var(--hs-font-headings);
	margin: 0;
}

a { color: var(--hs-primary); text-decoration: none; }
a:hover { opacity: 0.85; }

button { font-family: var(--hs-font-rest); }

img { max-width: 100%; display: block; }

.hs-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 48px;
}

.hs-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Benefits marquee ---------- */

@keyframes hsMarquee { from { transform: translateX(0%); } to { transform: translateX(-50%); } }

.hs-marquee {
	background: var(--hs-primary);
	overflow: hidden;
}
.hs-marquee__track {
	display: flex;
	width: max-content;
	animation: hsMarquee 31.2s linear infinite;
}
.hs-marquee__group {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 9px 24px;
	flex-shrink: 0;
}
.hs-marquee__item {
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}
.hs-marquee__dot {
	width: 5px; height: 5px;
	border-radius: 50%;
	background: #fff;
	display: inline-block;
	flex-shrink: 0;
}

/* ---------- Header ---------- */

.hs-header {
	background: #111111;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 48px;
	position: relative;
	z-index: 20;
}
.hs-header__nav {
	display: flex;
	align-items: center;
	gap: 32px;
	font-size: 14px;
	font-weight: 500;
}
.hs-header__nav a { color: #fff; }
.hs-header__nav a.hs-active { color: var(--hs-accent); }
.hs-header__logo {
	/* `justify-content: space-between` on .hs-header only balances the GAPS between its 3
	   children, not their true centers — since the nav (4 links) is wider than the actions
	   (2 icon buttons), that skewed the logo right of true center. Taking it out of flow with
	   absolute + translate centers it against the header itself, independent of the other two. */
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	font-family: var(--hs-font-headings);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: 0.12em;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 8px;
}
.hs-header__logo-dot {
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--hs-primary);
	display: inline-block;
}
.hs-footer__logo {
	font-family: var(--hs-font-headings);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: 0.12em;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 8px;
}
.hs-header__actions {
	display: flex;
	align-items: center;
	gap: 22px;
}
.hs-icon-btn {
	position: relative;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	line-height: 0;
	color: #fff;
}
.hs-cart-badge {
	position: absolute;
	top: -6px; right: -8px;
	background: var(--hs-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	width: 16px; height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hs-header__menu-toggle {
	display: none;
}

.hs-search-bar {
	background: #1a1a1a;
	padding: 14px 48px;
	display: none;
	justify-content: center;
}
.hs-search-bar.hs-open { display: flex; }
.hs-search-bar__input {
	width: 420px;
	max-width: 100%;
	padding: 10px 16px;
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,0.2);
	background: rgba(255,255,255,0.08);
	color: #fff;
	font-size: 14px;
	font-family: var(--hs-font-rest);
}
.hs-search-bar__input::placeholder { color: rgba(255,255,255,0.5); }

/* Mobile nav drawer */

.hs-nav-drawer {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: none;
}
.hs-nav-drawer.hs-open { display: block; }
.hs-nav-drawer__overlay {
	position: absolute; inset: 0;
	background: rgba(0,0,0,0.45);
}
.hs-nav-drawer__panel {
	position: absolute; top: 0; left: 0;
	height: 100%; width: 270px;
	background: #fff;
	box-shadow: 10px 0 30px rgba(0,0,0,0.2);
	display: flex; flex-direction: column;
	padding: 20px 0;
}
.hs-nav-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 20px 16px;
	border-bottom: 1px solid #eee;
}
.hs-nav-drawer__title {
	font-family: var(--hs-font-headings);
	font-weight: 600; font-size: 15px; letter-spacing: 0.1em;
	color: var(--hs-text);
}
.hs-nav-drawer__close {
	background: none; border: none; cursor: pointer; font-size: 18px; color: #666; line-height: 1;
}
.hs-nav-drawer a {
	padding: 16px 20px;
	font-size: 15px; font-weight: 600;
	color: var(--hs-text);
	border-bottom: 1px solid #f1f1f1;
}

/* ---------- Cart drawer ---------- */

.hs-cart-drawer {
	position: fixed; inset: 0;
	z-index: 400;
	display: none;
}
.hs-cart-drawer.hs-open { display: block; }
.hs-cart-drawer__overlay {
	position: absolute; inset: 0;
	background: rgba(0,0,0,0.45);
}
.hs-cart-drawer__panel {
	position: absolute;
	top: 0; right: 0;
	width: 400px; max-width: 100%;
	height: 100%;
	background: #fff;
	box-shadow: -10px 0 30px rgba(0,0,0,0.2);
	display: flex; flex-direction: column;
}
.hs-cart-drawer__head {
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	padding: 24px 28px;
	border-bottom: 1px solid #eee;
	flex-shrink: 0;
}
.hs-cart-drawer__grabber { display: none; }
.hs-cart-drawer__title { font-size: 18px; font-weight: 700; }
.hs-cart-drawer__close {
	background: none; border: none; cursor: pointer; font-size: 24px; color: #666; line-height: 1;
	width: 36px; height: 36px; flex-shrink: 0;
}
.hs-cart-drawer__body {
	flex: 1; overflow-y: auto; padding: 20px 28px;
}
.hs-cart-empty {
	text-align: center; padding: 60px 0 16px; color: #888; font-size: 14px;
}
.hs-cart-empty__continue { display: block; width: fit-content; margin: 0 auto 40px; padding: 14px 32px; }
.hs-cart-item {
	display: flex; align-items: center; gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid #f0f0f0;
}
.hs-cart-item__thumb {
	width: 56px; height: 56px; border-radius: 8px;
	background: #111; flex-shrink: 0; overflow: hidden;
}
.hs-cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hs-cart-item__name { font-size: 14px; font-weight: 600; }
.hs-cart-item__variant {
	font-size: 12px; color: #888; margin-top: 2px;
	display: flex; align-items: center; gap: 5px;
}
.hs-cart-item__qty {
	display: flex; align-items: center; gap: 10px; margin-top: 8px;
}
.hs-qty-btn {
	width: 24px; height: 24px; border-radius: 6px;
	border: 1px solid #ddd; background: #fff;
	cursor: pointer; font-size: 14px; line-height: 1;
}
.hs-cart-item__totals { text-align: right; }
.hs-cart-item__original { font-size: 11.5px; color: #999; text-decoration: line-through; }
.hs-cart-item__total { font-size: 14px; font-weight: 700; }
.hs-cart-item__remove {
	background: none; border: none; color: #999; font-size: 12px;
	cursor: pointer; margin-top: 6px; text-decoration: underline; padding: 0;
}
.hs-upsell {
	display: flex; align-items: center; gap: 10px;
	padding: 12px; margin: 16px 0;
	background: #f7f6f4; border-radius: 8px; cursor: pointer;
}
.hs-upsell input { width: 16px; height: 16px; accent-color: var(--hs-primary); cursor: pointer; flex-shrink: 0; }
.hs-upsell span { flex: 1; font-size: 12.5px; line-height: 1.4; }
.hs-cart-drawer__footer {
	padding: 16px 28px 24px;
	border-top: 1px solid #eee;
	flex-shrink: 0;
}
.hs-cart-drawer__total-row {
	display: flex; align-items: center; justify-content: space-between;
	font-size: 15px; font-weight: 700; margin-bottom: 16px;
}
.hs-btn-checkout {
	width: 100%; background: var(--hs-primary); color: #fff; border: none;
	padding: 16px; font-size: 14px; font-weight: 600; border-radius: 6px; cursor: pointer;
}
.hs-cart-blocked-notice {
	background: #fdf1ef; color: var(--hs-primary); border: 1px solid rgba(163,30,46,0.25);
	border-radius: 8px; padding: 14px; font-size: 12.5px; line-height: 1.5; text-align: center;
}

/* ---------- Buttons ---------- */

.hs-btn {
	display: inline-block;
	border: none; cursor: pointer;
	padding: 16px 34px;
	font-size: 14px; font-weight: 600;
	border-radius: 6px;
	font-family: var(--hs-font-rest);
	text-decoration: none;
	text-align: center;
}
.hs-btn-dark { background: #111; color: #fff; }
.hs-btn-primary { background: var(--hs-primary); color: #fff; }
.hs-btn-secondary { background: #4a4a4a; color: #fff; }
.hs-btn-outline { background: #fff; color: var(--hs-text); border: 1px solid #ddd; }
.hs-btn-block { width: 100%; }

/* ---------- Hero ---------- */

.hs-hero {
	position: relative;
	min-height: 560px;
	overflow: hidden;
	background: #1a1a1a;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
}
/* Photos are uploaded at 1600x900 (16:9, see settings.txt gallery_width/height). A short fixed
   min-height forces background-size:cover to blow the image up and show only a thin vertical
   sliver of it (the smaller the container height relative to its width, the more that sliver
   gets "zoomed in" and crops the product out of frame). Matching the section's own aspect ratio
   to the source photo's 16:9 keeps the scale at ~1x with no zoom, so nothing gets cropped —
   capped so it never gets absurdly tall/short on very wide or narrow desktop windows. */
@media (min-width: 961px) {
	.hs-hero {
		/* `aspect-ratio` + `max-height` together backfired: once max-height capped the box, the
		   browser shrank the WIDTH to keep satisfying the ratio instead of just letting the extra
		   height get cropped — leaving a blank strip on the right on wide screens. A vw-based
		   height avoids that box-constraint fight entirely: width stays 100% always (untouched),
		   height scales with viewport width at the same 16:9 ratio (56.25% = 9/16), and min/max
		   just clamp it at the edges — background-size:cover still does the actual cropping. */
		height: 56.25vw;
		min-height: 480px;
		max-height: 820px;
	}
}
.hs-hero__slide {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
}
.hs-hero__slide--mobile { display: none; overflow: hidden; }
.hs-hero__mobile-track {
	display: flex; width: 100%; height: 100%;
	overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.hs-hero__mobile-track::-webkit-scrollbar { display: none; }
.hs-hero__mobile-slide {
	flex: 0 0 100%; height: 100%;
	background-size: cover; background-position: center;
	scroll-snap-align: start;
	position: relative;
}
.hs-hero__mobile-slide--video { background: #111; display: flex; align-items: center; justify-content: center; }
.hs-hero__mobile-slide--video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hs-hero__mobile-slide-play {
	width: 60px; height: 60px; border-radius: 50%;
	background: rgba(255,255,255,0.92); color: #111;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; cursor: pointer; z-index: 1;
}
.hs-hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0) 100%);
}
.hs-hero__content {
	position: relative;
	width: 100%;
	max-width: 680px;
	padding: 0 64px 0 110px;
	box-sizing: border-box;
}
.hs-hero__eyebrow {
	font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--hs-accent); font-weight: 600; margin-bottom: 20px;
}
.hs-hero__title {
	font-size: 56px; font-weight: 700; color: #fff; line-height: 1.15;
}
.hs-hero__price-row {
	display: flex; align-items: center; gap: 16px; margin-top: 32px; flex-wrap: wrap;
}
.hs-hero__price { font-size: 40px; font-weight: 700; color: #fff; }
.hs-hero__badge {
	background: var(--hs-primary); color: #fff; font-size: 14px; font-weight: 700;
	padding: 6px 14px; border-radius: 999px;
}
.hs-hero__fine-print { font-size: 14px; color: rgba(255,255,255,0.75); margin-top: 6px; }
.hs-hero__ctas { display: flex; align-items: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hs-hero__rating {
	display: flex; align-items: center; gap: 8px; font-size: 14px;
	color: rgba(255,255,255,0.85); margin-top: 16px;
}
.hs-stars { color: rgba(255,255,255,0.3); position: relative; display: inline-block; font-size: 14px; line-height: 1; }
.hs-stars__fill { position: absolute; top: 0; left: 0; overflow: hidden; width: 90%; color: #fff; white-space: nowrap; }

/* ---------- Trust strip ---------- */

.hs-trust-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: #e6e4e0;
}
.hs-trust-strip__item {
	background: #fff; padding: 32px 40px; text-align: center;
}
.hs-trust-strip__head {
	display: flex; align-items: center; justify-content: center; gap: 8px;
}
.hs-trust-strip__title { font-size: 17px; font-weight: 600; }
.hs-trust-strip__desc { font-size: 14px; color: #777; margin-top: 4px; }

/* ---------- Home "¿Cómo funciona?" banner ---------- */

.hs-how-it-works { padding: 40px 48px 0; background: #fff; }
.hs-how-it-works__box {
	display: flex; align-items: center; gap: 48px;
	border: 1.5px solid rgba(163,30,46,0.3); background: linear-gradient(180deg, #fffafa, #ffffff);
	border-radius: 18px; box-shadow: 0 8px 28px rgba(163,30,46,0.08); padding: 48px;
}
.hs-how-it-works__intro { flex: 0 0 auto; width: 320px; }
.hs-how-it-works__kicker { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hs-primary); font-weight: 700; margin-bottom: 10px; }
.hs-how-it-works__title { font-size: 30px; font-weight: 800; color: var(--hs-text); line-height: 1.2; margin: 0; }
.hs-how-it-works__text { font-size: 14.5px; color: #666; line-height: 1.55; margin-top: 14px; }
.hs-how-it-works__cta { display: inline-block; margin-top: 20px; color: var(--hs-primary); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.hs-how-it-works__cta:hover { text-decoration: underline; }
.hs-how-it-works__steps { flex: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hs-how-it-works__step { flex: 1; min-width: 0; text-align: center; }
.hs-how-it-works__circle {
	width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: 26px;
	background: #fff; border: 1.5px solid rgba(163,30,46,0.25); box-shadow: 0 4px 12px rgba(163,30,46,0.08);
}
.hs-how-it-works__step-title { font-size: 13.5px; font-weight: 700; color: var(--hs-text); line-height: 1.3; }
.hs-how-it-works__step-text { font-size: 12px; color: #888; margin-top: 5px; line-height: 1.4; }
.hs-how-it-works__arrow { flex: 0 0 auto; color: rgba(163,30,46,0.35); font-size: 20px; margin-top: 20px; }
@media (max-width: 900px) {
	/* Matches the standard mobile section rhythm (.hs-section uses 32px top/bottom at this
	   breakpoint too) — this had no vertical padding at all before, so it visually ran straight
	   into whatever section sat above it with zero gap. */
	.hs-how-it-works { padding: 32px 20px; }
	.hs-how-it-works__box { flex-direction: column; align-items: stretch; gap: 24px; padding: 22px; border-radius: 16px; }
	.hs-how-it-works__intro { width: auto; }
	.hs-how-it-works__title { font-size: 20px; }
	.hs-how-it-works__steps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; }
	.hs-how-it-works__arrow { display: none; }
}

/* ---------- Section titles ---------- */

.hs-section { padding: 72px 48px; background: #fff; }
.hs-section--alt { background: #f4f3f0; }
.hs-section--tight-top { padding-top: 24px; }
.hs-section__title { font-size: 28px; font-weight: 700; text-align: center; }
.hs-section__subtitle { font-size: 15px; color: #777; text-align: center; margin-top: 8px; margin-bottom: 40px; }

/* ---------- Branded title block: kicker + heading + accent bar, all centered ---------- */

.hs-title-block { text-align: center; margin-bottom: 40px; }
.hs-title-block__kicker {
	font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--hs-primary); margin-bottom: 14px;
}
.hs-title-block__heading {
	font-size: 32px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; margin: 0;
	color: var(--hs-text);
}
.hs-title-block__underline { width: 88px; height: 4px; background: var(--hs-text); margin: 20px auto 0; border-radius: 2px; }
.hs-title-block__link { color: inherit; text-decoration: none; }
.hs-title-block__link:hover { text-decoration: underline; }
@media (max-width: 640px) {
	.hs-title-block__kicker { font-size: 10.5px; margin-bottom: 10px; }
	.hs-title-block__heading { font-size: 20px; }
	.hs-title-block__underline { width: 60px; height: 3px; margin-top: 12px; }
}

/* ---------- Cuotas sin interés / Envío gratis progress bar ---------- */

.hs-progress-bar { max-width: 640px; margin: 0 auto; padding: 14px 20px; text-align: center; }
.hs-progress-bar--sticky {
	position: sticky; top: 0; z-index: 45; max-width: none;
	background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.hs-progress-bar--boxed {
	background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: 14px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 28px;
}
.hs-progress-bar__text { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: var(--hs-text); }
.hs-progress-bar__track {
	position: relative; height: 7px; border-radius: 4px; background: #e8e6e2;
}
.hs-progress-bar__fill {
	position: absolute; top: 0; left: 0; height: 100%; border-radius: 4px;
	background: var(--hs-primary); transition: width 0.4s ease;
}
.hs-progress-bar__marker {
	position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%;
	background: #fff; border: 2px solid #ccc; transform: translate(-50%, -50%);
	transition: background 0.3s ease, border-color 0.3s ease;
}
.hs-progress-bar__marker--reached { background: var(--hs-primary); border-color: var(--hs-primary); }
.hs-progress-bar__labels { display: flex; justify-content: space-between; margin-top: 9px; font-size: 12px; color: #888; }
.hs-progress-bar__label--reached { color: var(--hs-primary); font-weight: 600; }
.hs-progress-bar__label strong { font-weight: inherit; }

/* ---------- Product grid / cards ---------- */

.hs-product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	max-width: 1152px;
	margin: 0 auto;
}
.hs-product-card {
	position: relative;
	background: #f7f6f4;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 2px solid transparent;
}
.hs-product-card--highlight {
	border-color: var(--hs-primary);
	border-width: 3px;
	box-shadow: 0 10px 26px rgba(163, 30, 46, 0.2);
}
.hs-product-card--sale {
	border-color: var(--hs-primary);
	border-width: 2px;
	box-shadow: 0 8px 20px rgba(163, 30, 46, 0.18);
}
.hs-product-card--sale .hs-price { color: var(--hs-primary); }
.hs-product-card__badge {
	/* Desktop: top-left of the cover photo (original spot). Mobile overrides to bottom-left,
	   right above the product name, so it never overlaps the sale-tag — see @media max-width:960px. */
	position: absolute; top: 12px; left: 12px; z-index: 2;
	background: var(--hs-primary); color: #fff; font-size: 11px; font-weight: 700;
	padding: 5px 10px; border-radius: 999px;
}
.hs-product-card__sale-tag {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	background: var(--hs-primary); color: #fff; font-size: 12px; font-weight: 800;
	padding: 5px 10px; border-radius: 999px;
}
.hs-product-card__media {
	position: relative;
	aspect-ratio: 1;
	background: #111;
	display: block;
	overflow: hidden;
}
.hs-product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.hs-product-card__body {
	padding: 22px; text-align: center; flex: 1; display: flex; flex-direction: column;
}
.hs-product-card__name {
	font-size: 15px; font-weight: 600; color: var(--hs-text);
	min-height: 38px; display: flex; align-items: center; justify-content: center;
}
.hs-product-card__prices {
	display: flex; align-items: baseline; justify-content: center; gap: 8px;
	margin-top: 8px; flex-wrap: wrap;
}
.hs-price { font-size: 19px; font-weight: 700; }
.hs-price--compare { font-size: 13px; color: #999; text-decoration: line-through; }
.hs-discount-label {
	background: var(--hs-primary); color: #fff; font-size: 10.5px; font-weight: 700;
	padding: 3px 8px; border-radius: 999px;
}
.hs-product-card__colors {
	display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 4px;
}
.hs-color-swatch {
	width: 26px; height: 26px; border-radius: 50%;
	border: 2px solid transparent; box-shadow: 0 0 0 1px #ddd;
	cursor: pointer; padding: 0;
}
.hs-color-swatch.hs-selected { border-color: #111; }
.hs-product-card__color-label { font-size: 12px; color: #777; text-align: center; margin-bottom: 12px; }
.hs-promo-note {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	background: #fbeceb; border: 1.5px solid var(--hs-primary); color: var(--hs-primary);
	font-size: 13px; font-weight: 700; padding: 9px 10px; border-radius: 8px;
	margin-bottom: 12px; line-height: 1.3;
}
.hs-product-card__buy {
	width: 100%; background: #111; color: #fff; border: none;
	padding: 12px; font-size: 13px; font-weight: 600; border-radius: 6px;
	margin-top: auto; cursor: pointer;
}

/* ---------- Home: progress bar shown on mobile only (desktop drops it per request) ---------- */

.hs-home-progress-mobile-only { display: none; }

/* ---------- Home: desktop-only product carousel (infinite loop, edge-to-edge, bigger covers) ----------
   Reuses the exact same infinite-scroll mechanism as the videos carousel (data-carousel-loop in
   theme.js): the product list is server-rendered twice back to back, and JS keeps recentering
   scrollLeft by one set-width so it loops forever without ever visibly snapping.
   Mobile is NOT touched — the @media override below restores the plain 2-col grid and hides the
   duplicated (aria-hidden) copy, so mobile looks exactly like it did before this feature. */

.hs-product-carousel__track {
	display: flex;
	overflow-x: auto;
	/* No scroll-snap: `mandatory` fights the infinite-loop JS (data-carousel-loop in theme.js) —
	   the browser's snap engine kept forcibly re-snapping right after the JS repositioned
	   scrollLeft to wrap around, which looked like the carousel "restarting" instead of smoothly
	   continuing. Same trade-off already made for the reviews carousel. */
	scroll-snap-type: none;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	max-width: none;
}
.hs-product-carousel__track::-webkit-scrollbar { display: none; }
.hs-product-carousel__track .hs-product-card {
	flex: 0 0 400px;
	scroll-snap-align: start;
}
#productos.hs-home-order--productos { padding-left: 0; padding-right: 0; }
#productos.hs-home-order--productos .hs-title-block,
#productos.hs-home-order--productos .hs-home-progress-mobile-only { padding: 0 48px; }
#productos.hs-home-order--productos .hs-product-carousel__track { padding: 4px 48px 12px; }

/* Home videos carousel — edge-to-edge on desktop only, scoped to the home wrapper so the
   product-page video slots (which reuse the same .hs-social-track class) aren't affected. */
.hs-home-order--videos .hs-section { padding-left: 0; padding-right: 0; }
.hs-home-order--videos .hs-videos-hint { padding: 0 48px; }
.hs-home-order--videos .hs-social-track { max-width: none; padding: 4px 48px 12px; }

/* ---------- Home: section reorder (different order per breakpoint) ----------
   Same DOM everywhere; each breakpoint below just assigns its own flex `order` —
   see the class names sprinkled through templates/home.tpl. */

.hs-home-reorder { display: flex; flex-direction: column; }

@media (min-width: 961px) {
	.hs-home-reorder > .hs-home-order--trust-new { order: 1; }
	.hs-home-reorder > .hs-home-order--productos { order: 2; }
	.hs-home-reorder > .hs-home-order--videos { order: 3; }
	.hs-home-reorder > .hs-home-order--trust-original { order: 4; }
	.hs-home-reorder > .hs-home-order--reviews { order: 5; }
	.hs-home-reorder > .hs-home-order--why-us { order: 6; }
	.hs-home-reorder > .hs-home-order--how-it-works { order: 7; }
	.hs-home-reorder > .hs-home-order--faq { order: 8; }
	.hs-home-reorder > .hs-home-order--badges { order: 9; }
	.hs-home-reorder > .hs-home-order--newsletter { order: 10; }
}

@media (max-width: 960px) {
	.hs-home-reorder > .hs-home-order--trust-new { order: 1; }
	.hs-home-reorder > .hs-home-order--videos { order: 2; }
	.hs-home-reorder > .hs-home-order--productos { order: 3; }
	.hs-home-reorder > .hs-home-order--reviews { order: 4; }
	.hs-home-reorder > .hs-home-order--trust-original { order: 5; }
	.hs-home-reorder > .hs-home-order--how-it-works { order: 6; }
	.hs-home-reorder > .hs-home-order--why-us { order: 7; }
	.hs-home-reorder > .hs-home-order--faq { order: 8; }
	.hs-home-reorder > .hs-home-order--badges { order: 9; }
	.hs-home-reorder > .hs-home-order--newsletter { order: 10; }

	/* Mobile keeps the plain grid (no carousel, no loop, no edge-to-edge) — exactly as before. */
	.hs-product-carousel__track {
		display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
		overflow-x: visible; max-width: none; padding: 0;
	}
	.hs-product-carousel__track .hs-product-card { flex: unset; }
	.hs-product-carousel__track .hs-product-card[aria-hidden="true"] { display: none; }
	#productos.hs-home-order--productos { padding-left: 20px; padding-right: 20px; }
	#productos.hs-home-order--productos .hs-title-block,
	#productos.hs-home-order--productos .hs-home-progress-mobile-only { padding: 0; }
	#productos.hs-home-order--productos .hs-product-carousel__track { padding: 0; }
	.hs-home-progress-mobile-only { display: block; }

	.hs-home-order--videos .hs-section { padding-left: 20px; padding-right: 20px; }
	.hs-home-order--videos .hs-videos-hint { padding: 0; }
	.hs-home-order--videos .hs-social-track { max-width: 1152px; padding: 4px 4px 12px; }
}

/* ---------- Why us / compare table ---------- */

.hs-why-us { padding: 88px 48px; background: #fff; }
.hs-why-us__intro { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.hs-why-us__title { font-size: 32px; font-weight: 700; }
.hs-why-us__text { font-size: 16px; color: #666; margin-top: 14px; line-height: 1.6; }
.hs-compare {
	max-width: 900px; margin: 0 auto;
	border: 1px solid #e2e0dc; border-radius: 8px; overflow: hidden;
}
.hs-compare__row {
	display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
	border-top: 1px solid #eee;
}
.hs-compare__row--head {
	background: #111; border-top: none; color: #fff;
}
.hs-compare__cell { padding: 18px 24px; font-size: 14px; min-width: 0; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.hs-compare__cell--feature { font-weight: 500; }
.hs-compare__cell--us, .hs-compare__cell--them {
	display: flex; align-items: flex-start; gap: 6px; text-align: left; font-size: 13px;
}
.hs-compare__cell--us { background: #fbeceb; }
.hs-compare__cell--them { color: #999; }
.hs-check { color: var(--hs-primary); font-weight: 700; flex: 0 0 auto; }
.hs-cross { color: #bbb; font-weight: 700; flex: 0 0 auto; }

/* ---------- Social proof / reels placeholder ---------- */

.hs-social-track {
	display: flex; gap: 14px; overflow-x: auto;
	max-width: 1152px; margin: 24px auto 0; padding: 4px 4px 12px;
	/* No scroll-snap on the looping (data-carousel-loop) home track — `mandatory` fought the
	   infinite-loop JS and made it look like it "restarted" instead of continuing seamlessly.
	   Same trade-off as products/reviews. The non-looping product-page video-slot row reuses this
	   same class but only has 4 cards, so it's a minor, acceptable loss of snap-to-card feel there. */
	scroll-snap-type: none;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* legacy Edge */
}
.hs-social-track::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.hs-social-card {
	position: relative; flex: 0 0 auto;
	width: 170px; height: 300px; border-radius: 14px; overflow: hidden;
	background: #111;
	box-shadow: 0 4px 16px rgba(0,0,0,0.1);
	scroll-snap-align: start;
	cursor: pointer;
}
.hs-social-card__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-videos-hint {
	text-align: center; font-size: 13.5px; color: #888; margin-top: -8px; margin-bottom: 20px;
}

/* ---------- Instagram-Stories-style video viewer ---------- */

.hs-story-viewer {
	display: none; position: fixed; inset: 0; z-index: 500;
	align-items: center; justify-content: center;
}
.hs-story-viewer.hs-open { display: flex; }
.hs-story-viewer__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.92); }
.hs-story-viewer__frame {
	position: relative; z-index: 1;
	width: min(420px, 100vw); height: min(746px, 100vh);
	background: #000; overflow: hidden;
	border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.hs-story-viewer__progress {
	position: absolute; top: 0; left: 0; right: 0; z-index: 3;
	display: flex; gap: 4px; padding: 8px 8px 0;
}
.hs-story-viewer__progress-seg {
	flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,0.35); overflow: hidden;
}
.hs-story-viewer__progress-fill { height: 100%; width: 0%; background: #fff; }
.hs-story-viewer__close {
	position: absolute; top: 14px; right: 12px; z-index: 3;
	background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; line-height: 1;
	width: 32px; height: 32px;
}
.hs-story-viewer__video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.hs-story-viewer__tap-zone { position: absolute; top: 0; bottom: 0; width: 35%; z-index: 2; cursor: pointer; }
.hs-story-viewer__tap-zone--prev { left: 0; }
.hs-story-viewer__tap-zone--next { left: 65%; right: 0; width: auto; }
.hs-story-viewer__nav {
	position: relative; z-index: 1; flex: 0 0 auto;
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,0.9); border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	margin: 0 20px;
}
@media (max-width: 640px) {
	/* 100vh on mobile browsers is the LARGEST possible viewport (address bar collapsed), taller
	   than what's actually visible when the address bar is showing — that pushed the progress bar
	   and close button (both pinned to the frame's top) off-screen above the real fold. 100dvh
	   tracks the actual visible viewport instead; 100vh stays as the fallback for older browsers. */
	.hs-story-viewer__frame { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
	.hs-story-viewer__nav { display: none; }
	.hs-story-viewer__tap-zone--prev { width: 30%; }
	.hs-story-viewer__tap-zone--next { left: 30%; }
}

/* ---------- Reviews ---------- */

.hs-reviews { padding: 80px 0; background: #f4f3f0; }
.hs-reviews__title { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 44px; }
.hs-reviews__track {
	display: flex; gap: 24px; overflow-x: auto;
	max-width: 1152px; margin: 0 auto; padding: 4px 48px 12px;
	/* No scroll-snap on mobile either — `proximity` still fights the infinite-loop JS and can pull
	   the track back after the wrap-around correction, looking like a restart. */
	scroll-snap-type: none;
	scrollbar-width: none; -ms-overflow-style: none;
}
.hs-reviews__track::-webkit-scrollbar { display: none; }
.hs-review-card {
	flex: 0 0 340px; scroll-snap-align: start;
	background: #fff; border-radius: 10px; padding: 32px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
/* Desktop: infinite edge-to-edge loop, same mechanism as videos/products (data-carousel-loop
   in theme.js). The card set is rendered twice by home.tpl; the 2nd copy is aria-hidden. */
@media (min-width: 961px) {
	.hs-reviews { padding-left: 0; padding-right: 0; }
	.hs-reviews__track { max-width: none; scroll-snap-type: none; }
}
.hs-review-card__stars { color: var(--hs-primary); font-size: 16px; letter-spacing: 2px; }
.hs-review-card__text { font-size: 15px; color: #333; line-height: 1.6; margin-top: 14px; }
.hs-review-card__name { font-size: 14px; font-weight: 600; margin-top: 18px; }
.hs-reviews__placeholder-note {
	text-align: center; font-size: 12px; color: #b08; margin-top: 12px;
}

/* ---------- Trust badges ---------- */

.hs-badges-row {
	background: #fff; padding: 36px 48px;
	display: flex; align-items: center; justify-content: center; gap: 48px;
	flex-wrap: wrap;
}
.hs-badges-row img { width: 110px; height: 55px; object-fit: contain; }

/* ---------- CTA band ---------- */

.hs-cta-band {
	background: #f8e9e6; padding: 64px 48px;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	flex-wrap: wrap;
}
.hs-cta-band__title { font-size: 26px; font-weight: 700; }
.hs-cta-band__sub { font-size: 16px; color: #555; margin-top: 8px; }

/* ---------- Newsletter ---------- */

.hs-newsletter { background: #1a1a1a; padding: 64px 48px; text-align: center; }
.hs-newsletter__title { font-size: 24px; font-weight: 700; color: #fff; }
.hs-newsletter__text {
	font-size: 15px; color: rgba(255,255,255,0.7); margin-top: 10px;
	max-width: 480px; margin-left: auto; margin-right: auto;
}
.hs-newsletter__form {
	display: flex; gap: 10px; max-width: 440px; margin: 26px auto 0;
}
.hs-newsletter__form input[type="email"] {
	flex: 1; padding: 14px 18px; border-radius: 6px;
	border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08);
	color: #fff; font-size: 14px; font-family: var(--hs-font-rest);
}
.hs-newsletter__form input[type="email"]::placeholder { color: rgba(255,255,255,0.5); }
.hs-newsletter__form button {
	background: var(--hs-primary); color: #fff; border: none;
	padding: 14px 26px; font-size: 14px; font-weight: 600; border-radius: 6px;
	cursor: pointer; white-space: nowrap;
}

/* ---------- Footer ---------- */

.hs-footer {
	background: #111; padding: 48px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
}
.hs-footer__nav { display: flex; gap: 28px; font-size: 14px; flex-wrap: wrap; }
.hs-footer__nav a { color: rgba(255,255,255,0.7); }
.hs-footer__meta { font-size: 13px; color: rgba(255,255,255,0.45); text-align: right; }
/* Own full-width row at the bottom of the footer (flex-basis:100% forces the wrap) so the four
   items above keep their existing space-between layout untouched. Quieter than the main footer nav
   on purpose: these are reference links people look for deliberately, not browsing destinations. */
.hs-footer__legal {
	flex-basis: 100%;
	display: flex; flex-wrap: wrap; gap: 10px 22px;
	padding-top: 22px; margin-top: 4px;
	border-top: 1px solid rgba(255,255,255,0.1);
	font-size: 12.5px;
}
.hs-footer__legal a { color: rgba(255,255,255,0.5); }
.hs-footer__legal a:hover { color: rgba(255,255,255,0.85); }
.hs-footer__meta .hs-disclaimer { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 4px; max-width: 340px; }
.hs-footer__social { display: flex; gap: 20px; flex-wrap: wrap; }
.hs-footer__social a { color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 7px; font-size: 13px; }
.hs-footer__social a:hover { color: #fff; }
.hs-footer__social img { filter: grayscale(1) brightness(3); }

/* ---------- WhatsApp floating button ---------- */

.hs-whatsapp-float {
	position: fixed; right: 20px; bottom: 20px; z-index: 200;
	width: 56px; height: 56px; border-radius: 50%;
	background: #25D366; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

/* ---------- Breadcrumbs ---------- */

.hs-breadcrumb {
	padding: 20px 48px 0;
	font-size: 13px; color: #999;
	max-width: 1240px; margin: 0 auto;
}
.hs-breadcrumb a { color: #999; }
.hs-breadcrumb .hs-current { color: var(--hs-text); }

/* ---------- Product detail ---------- */

.hs-product-detail {
	padding: 32px 48px 72px;
	background: #fff;
	display: flex; gap: 56px; flex-wrap: wrap;
	max-width: 1240px; margin: 0 auto;
}
.hs-product-detail__gallery { width: 480px; max-width: 100%; flex-shrink: 0; }
.hs-product-detail__cover {
	position: relative; aspect-ratio: 1; background: #111; border-radius: 12px; overflow: hidden;
	cursor: zoom-in;
}
.hs-product-detail__cover img { width: 100%; height: 100%; object-fit: cover; }
.hs-product-detail__hero-badge {
	position: absolute; top: 14px; left: 14px; z-index: 2;
	color: #fff; font-size: 13px; font-weight: 700;
	padding: 7px 13px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.hs-product-detail__thumbs {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px;
}
.hs-product-detail__thumbs a { aspect-ratio: 1; background: #111; border-radius: 8px; overflow: hidden; display: block; }
.hs-product-detail__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* Post-style single-image infinite carousel (product detail gallery). */
.hs-product-post-carousel { position: relative; }
.hs-product-post-carousel__track {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
	border-radius: 12px;
}
.hs-product-post-carousel__track::-webkit-scrollbar { display: none; }
.hs-product-post-carousel__slide {
	flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: center;
	background: #111; cursor: zoom-in;
}
.hs-product-post-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Desktop-only: extra photos stacked below the carousel, filling the whitespace next to the
   taller info column. Hidden on mobile — see @media max-width:960px. */
.hs-product-detail__extra-photos { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.hs-product-detail__extra-photo { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #111; cursor: zoom-in; }
.hs-product-detail__extra-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-product-detail__info { flex: 1; min-width: 280px; padding-top: 8px; position: relative; }
.hs-product-detail__promo-badge {
	position: absolute; top: 0; right: 0;
	background: var(--hs-primary); color: #fff;
	font-size: 12px; font-weight: 700;
	padding: 8px 14px; border-radius: 8px;
	max-width: 220px; text-align: center;
}
.hs-product-detail__brand {
	font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--hs-primary); font-weight: 600;
}
.hs-product-detail__name { font-size: 30px; font-weight: 700; margin-top: 8px; line-height: 1.2; }
.hs-product-detail__rating {
	display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: #888;
}
.hs-product-detail__price-row {
	display: flex; align-items: baseline; gap: 10px; margin-top: 18px; flex-wrap: wrap;
}
.hs-product-detail__price { font-size: 32px; font-weight: 800; }
.hs-product-detail__price--discount { color: var(--hs-primary); }
.hs-product-detail__discount-pill {
	background: var(--hs-primary); color: #fff; font-weight: 700; font-size: 13px;
	padding: 4px 10px; border-radius: 999px;
}
.hs-product-detail__fine-print { font-size: 13px; color: #777; margin-top: 6px; }
.hs-product-detail__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.hs-chip { font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 8px; }
.hs-chip--light { background: #f4f3f0; color: var(--hs-text); }
.hs-chip--dark { background: #111111; color: #fff; }
/* Plain-text benefits row (cuotas / transferencia / envío gratis) — no chip frame, red text. */
.hs-benefit-plain-row { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.hs-benefit-plain { font-size: 13px; font-weight: 600; color: var(--hs-primary); }
/* Red "marker highlight" band behind the product name + price — solid HairSafe red, same as the
   top benefits bar (.hs-marquee), square corners, white text for contrast on the solid fill. */
.hs-product-detail__title-price-band {
	background: var(--hs-primary);
	border-radius: 0; padding: 16px 20px; margin-top: 8px;
}
.hs-product-detail__title-price-band .hs-product-detail__name { margin-top: 0; color: #fff; }
.hs-product-detail__title-price-band .hs-product-detail__price { color: #fff; }
.hs-product-detail__title-price-band .hs-product-detail__price--discount { color: #fff; }
.hs-product-detail__title-price-band .hs-price--compare { color: rgba(255,255,255,0.75); }
.hs-product-detail__tagline { color: var(--hs-primary); font-weight: 700; font-size: 15px; margin-top: 32px; }
.hs-product-detail__tagline + .hs-product-detail__description { margin-top: 10px; }
.hs-swatch-badges-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; }
.hs-swatch-badges-row--solo { justify-content: center; }
.hs-swatch-badges-row--solo .hs-product-detail__mini-badges { justify-content: center; }
.hs-product-detail__mini-badges { display: flex; align-items: center; justify-content: center; gap: 10px; flex: 1; flex-wrap: nowrap; min-width: 0; }
.hs-product-detail__mini-badges img { width: 64px; height: 32px; object-fit: contain; flex-shrink: 0; }
.hs-product-detail__variants { margin-top: 28px; }
.hs-product-detail__variant-label { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.hs-qty-stepper {
	display: flex; align-items: center; gap: 10px;
	border: 1px solid #ddd; border-radius: 6px; padding: 6px 8px;
	width: fit-content;
}
.hs-qty-stepper input {
	width: 32px; border: none; text-align: center; font-size: 14px; font-weight: 600;
	font-family: var(--hs-font-rest);
}
.hs-add-to-cart-row {
	display: flex; align-items: center; gap: 14px; margin-top: 28px; flex-wrap: wrap;
}
.hs-add-to-cart-row .hs-btn { flex: 1; min-width: 200px; }
.hs-product-detail__description {
	font-size: 14.5px; color: #444; line-height: 1.7; margin-top: 32px;
}
.hs-product-detail__description ul {
	list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 12px;
}
.hs-product-detail__description ul li { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; font-weight: 500; }
.hs-feature-emoji { flex: 0 0 auto; line-height: 1.4; }
.hs-feature-list { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.hs-feature-list li {
	display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #444; list-style: none;
}
.hs-feature-list { padding: 0; margin: 20px 0 0; }
.hs-feature-list .hs-check { margin-right: 0; }
.hs-ingredients {
	margin-top: 32px; padding-top: 24px; border-top: 1px solid #eee;
}
.hs-ingredients__title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.hs-ingredient-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.hs-ingredient-tags li {
	list-style: none;
	background: #f7f6f4; border-radius: 20px; padding: 6px 14px; font-size: 12.5px; color: #444;
}

/* ---------- Product page video slots (reuses .hs-social-card / story viewer) ---------- */

.hs-product-videos { margin-top: 40px; padding-top: 28px; border-top: 1px solid #eee; }
/* Now an <h2> (was a div) so the product page has a real heading outline for SEO — margin-top is
   zeroed so the visual spacing is identical to before the tag change. */
.hs-product-videos__title { font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.hs-product-videos .hs-social-track { margin: 0; max-width: none; justify-content: flex-start; }
.hs-product-videos .hs-social-card { width: 130px; height: 230px; }
.hs-product-videos .hs-videos-hint { text-align: left; margin: 0 0 14px; }

/* ---------- Raspadita (scratch-card popup) ---------- */

.hs-rasp-trigger {
	display: flex; align-items: center; gap: 6px;
	background: rgba(163,30,46,0.12); border: 1.5px solid var(--hs-primary); color: var(--hs-text);
	padding: 6px 10px; font-size: 12px; font-weight: 700; border-radius: 7px; cursor: pointer;
	font-family: var(--hs-font-rest); font-variant-numeric: tabular-nums;
}
#hs-rasp-trigger-header { color: #fff; }
/* "Pending" state — the customer closed the popup without claiming, so the offer now lives here
   and has to earn a second look on its own. A filled red pill (instead of the countdown's quiet
   outline) plus a slow breathing glow: noticeable in peripheral vision while scrolling, but never
   covering content and never demanding a click. Honors reduced-motion. */
.hs-rasp-trigger--pending {
	background: var(--hs-primary);
	border-color: var(--hs-primary);
	color: #fff;
	animation: hsRaspPulse 2.4s ease-in-out infinite;
}
#hs-rasp-trigger-header.hs-rasp-trigger--pending { color: #fff; }
@keyframes hsRaspPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(163,30,46,0.55); }
	50%      { box-shadow: 0 0 0 7px rgba(163,30,46,0); }
}
@media (prefers-reduced-motion: reduce) {
	.hs-rasp-trigger--pending { animation: none; }
}

.hs-raspadita {
	display: none; position: fixed; inset: 0; z-index: 600;
	align-items: center; justify-content: center; padding: 20px;
}
.hs-raspadita.hs-open { display: flex; }
.hs-raspadita__backdrop { position: absolute; inset: 0; background: rgba(10,10,10,0.6); }
.hs-raspadita__card {
	position: relative; z-index: 1; width: 100%; max-width: 380px;
	background: #fff; border-radius: 16px; padding: 30px 28px 26px;
	box-shadow: 0 24px 60px rgba(0,0,0,0.35); text-align: center;
	max-height: 90vh; overflow-y: auto;
}
.hs-raspadita__close {
	position: absolute; top: 14px; right: 14px; background: none; border: none;
	cursor: pointer; font-size: 17px; color: #999; line-height: 1;
}
.hs-raspadita__logo {
	font-family: var(--hs-font-headings); font-weight: 600; font-size: 14px; letter-spacing: 0.12em;
	color: var(--hs-text); display: flex; align-items: center; justify-content: center; gap: 5px;
	margin-bottom: 16px;
}
.hs-raspadita__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--hs-primary); display: inline-block; }
.hs-raspadita__title { font-size: 19px; font-weight: 700; color: var(--hs-text); line-height: 1.25; }
.hs-raspadita__subtitle { font-size: 13px; color: #777; margin-top: 7px; margin-bottom: 20px; }
.hs-raspadita__scratch-wrap {
	position: relative; width: 100%; max-width: 300px; height: 150px; margin: 0 auto;
	border-radius: 13px; overflow: hidden; box-shadow: 0 1px 0 rgba(0,0,0,0.06), inset 0 0 0 1px #eee;
}
.hs-raspadita__prize-preview {
	position: absolute; inset: 0; background: linear-gradient(135deg,#fff8f0,#f5efe6);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hs-raspadita__prize-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #999; }
.hs-raspadita__prize-value { font-size: 25px; font-weight: 700; color: var(--hs-primary); }
.hs-raspadita__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.hs-raspadita__hint { font-size: 11.5px; color: #999; margin-top: 13px; }
.hs-raspadita__prize-preview--static { position: static; width: 100%; max-width: 300px; height: 150px; margin: 0 auto 16px; border-radius: 13px; box-shadow: 0 1px 0 rgba(0,0,0,0.06), inset 0 0 0 1px #eee; }
.hs-raspadita__emoji { font-size: 30px; margin-bottom: 6px; }
.hs-raspadita__input {
	width: 100%; box-sizing: border-box; padding: 13px 15px; border-radius: 8px;
	border: 1px solid #ddd; font-size: 13.5px; font-family: var(--hs-font-rest); margin-bottom: 10px;
}
.hs-raspadita__warning {
	display: flex; align-items: flex-start; gap: 7px; text-align: left; background: #fff8ee;
	border: 1px solid #f0d9a8; border-radius: 8px; padding: 10px 11px; margin-bottom: 16px;
	font-size: 11.5px; color: #8a6215; line-height: 1.4;
}
.hs-raspadita__fineprint { font-size: 10.5px; color: #aaa; margin-top: 13px; line-height: 1.5; }
.hs-raspadita__confirm { font-size: 14px; font-weight: 600; color: var(--hs-text); }
.hs-raspadita__email-echo { font-size: 11px; color: #999; margin-top: 4px; margin-bottom: 18px; }
.hs-raspadita__code-box { border: 1.5px dashed var(--hs-primary); border-radius: 10px; padding: 13px; margin-bottom: 14px; }
.hs-raspadita__code-label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #999; }
.hs-raspadita__code-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.hs-raspadita__code { font-size: 23px; font-weight: 700; color: var(--hs-primary); letter-spacing: 0.05em; }
.hs-raspadita__copy-btn {
	flex-shrink: 0; border: 1.5px solid var(--hs-primary); color: var(--hs-primary); background: #fff;
	border-radius: 6px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.hs-raspadita__copy-btn.hs-copied { background: var(--hs-primary); color: #fff; }
.hs-raspadita__howto {
	text-align: left; background: #f7f6f4; border-radius: 8px; padding: 12px 14px; margin-bottom: 16px;
}
.hs-raspadita__howto-title { font-size: 12px; font-weight: 700; color: var(--hs-text); margin-bottom: 6px; }
.hs-raspadita__howto ol { margin: 0; padding-left: 18px; font-size: 12px; color: #444; line-height: 1.6; }
.hs-raspadita__howto-note { font-size: 11px; color: var(--hs-primary); font-weight: 600; margin-top: 8px; }
.hs-raspadita__valid-label { font-size: 11px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.06em; }
.hs-raspadita__countdown { font-size: 36px; font-weight: 700; color: var(--hs-text); font-variant-numeric: tabular-nums; margin: 4px 0 18px; }
@media (max-width: 480px) {
	.hs-raspadita__card { padding: 26px 20px 22px; }
	.hs-raspadita__countdown { font-size: 30px; }
	/* iOS Safari auto-zooms the viewport when focusing an input with font-size below 16px, and
	   never zooms back out on its own after the popup closes — keep this at 16px to avoid triggering it. */
	.hs-raspadita__input { font-size: 16px; }
}

/* ---------- Product FAQ accordion ---------- */

.hs-faq { margin-top: 40px; padding-top: 28px; border-top: 1px solid #eee; }
.hs-faq__title { font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.hs-faq__item { border-bottom: 1px solid #eee; }
/* The question button is wrapped in an <h3> for SEO/GEO (real heading tags are how search and AI
   answer engines locate the question half of a Q&A pair). This strips the h3's default margin and
   font sizing so the accordion looks exactly as it did when the button stood alone. */
.hs-faq__question-heading { margin: 0; font-size: inherit; font-weight: inherit; }
.hs-faq__question {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: none; border: none; text-align: left; cursor: pointer;
	padding: 15px 0; font-size: 14.5px; font-weight: 600; color: var(--hs-text);
	font-family: var(--hs-font-rest);
}
.hs-faq__chevron { flex: 0 0 auto; transition: transform 0.25s ease; color: var(--hs-primary); font-size: 18px; }
.hs-faq__item.hs-open .hs-faq__chevron { transform: rotate(180deg); }
.hs-faq__answer {
	max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease;
	font-size: 13.5px; color: #666; line-height: 1.6;
}
.hs-faq__item.hs-open .hs-faq__answer { padding-bottom: 16px; }

/* ---------- Product image lightbox ---------- */

.hs-lightbox { display: none; position: fixed; inset: 0; z-index: 480; align-items: center; justify-content: center; }
.hs-lightbox.hs-open { display: flex; }
.hs-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.92); }
.hs-lightbox__img { position: relative; z-index: 1; max-width: 88vw; max-height: 88vh; object-fit: contain; border-radius: 4px; }
.hs-lightbox__close {
	position: absolute; top: 18px; right: 20px; z-index: 2;
	background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; line-height: 1;
	width: 36px; height: 36px;
}
.hs-lightbox__nav {
	position: relative; z-index: 1; flex: 0 0 auto;
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,0.9); border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	margin: 0 18px;
}
@media (max-width: 640px) {
	.hs-lightbox__nav { width: 38px; height: 38px; margin: 0 10px; }
}

/* ---------- Category / catalog page ---------- */

.hs-category-header { text-align: center; padding: 48px 48px 0; }
.hs-category-header__title { font-size: 30px; font-weight: 700; }
.hs-category-controls {
	display: flex; align-items: center; justify-content: space-between;
	max-width: 1240px; margin: 24px auto 0; padding: 0 48px; gap: 16px; flex-wrap: wrap;
}
.hs-filter-link {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14px; font-weight: 600; color: var(--hs-text);
	border: 1px solid #ddd; border-radius: 6px; padding: 10px 16px; cursor: pointer; background: #fff;
}
.hs-sort-select {
	padding: 10px 14px; border-radius: 6px; border: 1px solid #ddd;
	font-size: 14px; font-family: var(--hs-font-rest); background: #fff;
}
.hs-category-body { max-width: 1240px; margin: 0 auto; padding: 40px 48px 72px; }
.hs-empty-state { text-align: center; padding: 64px 0; color: #888; }

.hs-filters-panel { padding: 24px; }
.hs-filters-panel h4 { font-size: 14px; margin-bottom: 12px; }
.hs-filters-panel label { display: block; font-size: 13px; margin-bottom: 8px; cursor: pointer; }

.hs-pagination {
	display: flex; justify-content: center; gap: 8px; margin-top: 40px;
}
.hs-pagination a, .hs-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 6px; font-size: 14px;
	border: 1px solid #ddd; color: var(--hs-text);
}
.hs-pagination .hs-current-page { background: #111; color: #fff; border-color: #111; }

/* ---------- Estudios page (/estudios — not linked from any menu) ---------- */

.hs-studies-hero { background: #111111; padding: 90px 48px; text-align: center; }
.hs-studies-hero__kicker { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #e08a92; font-weight: 700; }
.hs-studies-hero__title { font-size: 38px; font-weight: 800; color: #fff; margin: 16px auto 0; max-width: 720px; line-height: 1.25; }
.hs-studies-hero__text { font-size: 15px; color: rgba(255,255,255,0.65); max-width: 620px; margin: 18px auto 0; line-height: 1.6; }

.hs-studies-section { padding: 64px 48px; background: #fff; max-width: 980px; margin: 0 auto; }
.hs-studies-section--alt { background: #f4f3f0; max-width: none; }
.hs-studies-section--alt > * { max-width: 980px; margin-left: auto; margin-right: auto; }
.hs-studies-section__kicker { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hs-primary); font-weight: 700; display: block; }
.hs-studies-section__kicker--flag { display: flex; align-items: center; gap: 8px; }
.hs-studies-section__title { font-size: 26px; font-weight: 800; color: var(--hs-text); margin: 12px 0 0; }
.hs-studies-section__text { font-size: 14.5px; color: #666; line-height: 1.6; margin-top: 12px; max-width: 640px; }

.hs-studies-card {
	background: #f4f3f0; border-radius: 12px; padding: 28px 30px; margin-top: 28px;
}
.hs-studies-card__author { font-size: 17px; font-weight: 700; color: var(--hs-text); }
.hs-studies-card__affiliation { font-size: 12.5px; color: #888; margin-top: 3px; }
.hs-studies-card__pub-title { font-size: 14.5px; font-weight: 600; color: var(--hs-text); margin-top: 16px; font-style: italic; }
.hs-studies-card__conclusion { font-size: 13.5px; color: #666; line-height: 1.6; margin-top: 10px; }
.hs-studies-card__link { display: inline-block; margin-top: 14px; color: var(--hs-primary); font-weight: 700; font-size: 13px; text-decoration: none; }
.hs-studies-card__link:hover { text-decoration: underline; }

.hs-studies-experts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 32px; }
.hs-studies-expert { background: #fff; border-radius: 12px; padding: 26px 24px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.hs-studies-expert__avatar {
	width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px; background: var(--hs-text);
	color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.hs-studies-expert__name { font-size: 15px; font-weight: 700; color: var(--hs-text); }
.hs-studies-expert__affiliation { font-size: 12px; color: #888; margin-top: 3px; }
.hs-studies-expert__quote { font-size: 13px; color: #666; line-height: 1.55; margin-top: 12px; min-height: 40px; }

.hs-studies-evidence-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
.hs-studies-evidence-card { background: #f4f3f0; border-radius: 12px; padding: 22px 20px; }
.hs-studies-evidence-card__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hs-primary); }
.hs-studies-evidence-card__journal { font-size: 12px; color: #999; font-style: italic; margin-top: 12px; }

.hs-studies-library { display: flex; flex-direction: column; gap: 1px; background: #e5e3df; border-radius: 10px; overflow: hidden; margin-top: 28px; }
.hs-studies-library__row {
	background: #fff; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
}
.hs-studies-library__title { font-size: 14.5px; font-weight: 700; color: var(--hs-text); }
.hs-studies-library__meta { font-size: 12.5px; color: #888; margin-top: 5px; }
.hs-studies-library__btn { flex-shrink: 0; font-size: 12.5px; padding: 10px 18px; }

.hs-studies-disclaimer { background: #f4f3f0; padding: 40px 48px; }
.hs-studies-disclaimer__text { max-width: 780px; margin: 0 auto; font-size: 12.5px; color: #888; line-height: 1.6; text-align: center; }

@media (max-width: 900px) {
	.hs-studies-hero { padding: 56px 20px; }
	.hs-studies-hero__title { font-size: 24px; }
	.hs-studies-section { padding: 44px 20px; }
	.hs-studies-experts { grid-template-columns: 1fr; }
	.hs-studies-evidence-grid { grid-template-columns: 1fr 1fr; }
	.hs-studies-library__row { flex-direction: column; align-items: flex-start; }
	.hs-studies-library__btn { width: 100%; text-align: center; }
}
@media (max-width: 560px) {
	.hs-studies-evidence-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact page ---------- */

.hs-page-hero {
	background: #111; padding: 70px 48px; text-align: center;
}
.hs-page-hero__eyebrow {
	font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--hs-accent); font-weight: 600;
}
.hs-page-hero__title { font-size: 44px; font-weight: 700; color: #fff; margin-top: 14px; }

.hs-contact-content { padding: 80px 48px; background: #fff; text-align: center; }
.hs-contact-content__intro {
	font-size: 16px; color: #666; max-width: 560px; margin: 0 auto 48px; line-height: 1.6;
}
.hs-contact-cards { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.hs-contact-card {
	background: #f4f3f0; border-radius: 10px; padding: 32px 40px; min-width: 280px; text-align: left;
}
.hs-contact-card__label {
	font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #888; font-weight: 600;
}
.hs-contact-card__value { font-size: 20px; font-weight: 700; margin-top: 10px; }
.hs-contact-card__value--accent { color: var(--hs-primary); }
.hs-contact-card .hs-btn { margin-top: 20px; }

.hs-contact-form { max-width: 560px; margin: 56px auto 0; text-align: left; }
.hs-contact-form h3 { font-size: 20px; margin-bottom: 20px; text-align: center; }
.hs-form-group { margin-bottom: 18px; }
.hs-form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.hs-form-group input,
.hs-form-group textarea {
	width: 100%; padding: 12px 14px; border-radius: 6px; border: 1px solid #ddd;
	font-size: 14px; font-family: var(--hs-font-rest);
}
.hs-honeypot { position: absolute; left: -9999px; }
.hs-alert { padding: 14px 18px; border-radius: 6px; font-size: 14px; margin-bottom: 20px; }
.hs-alert--success { background: #e8f5e9; color: #1e7d3a; }
.hs-alert--danger { background: #fdecea; color: #a31e2e; }

/* ---------- Shipping page ---------- */

.hs-shipping-section {
	padding: 80px 48px; background: #fff;
	display: flex; align-items: center; gap: 64px; flex-wrap: wrap;
}
.hs-shipping-section--alt { background: #f4f3f0; }
.hs-shipping-section__copy { flex: 1; min-width: 260px; }
.hs-shipping-section__eyebrow {
	font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--hs-primary); font-weight: 600;
}
.hs-shipping-section__title { font-size: 28px; font-weight: 700; margin-top: 12px; }
.hs-shipping-section__text { font-size: 15px; color: #666; margin-top: 14px; line-height: 1.65; max-width: 440px; }
.hs-shipping-rates { display: flex; flex-direction: column; gap: 14px; min-width: 280px; }
.hs-shipping-rate {
	display: flex; align-items: center; justify-content: space-between;
	background: #f4f3f0; padding: 18px 24px; border-radius: 8px;
}
.hs-shipping-rate__label { font-size: 14px; font-weight: 500; }
.hs-shipping-rate__value { font-size: 14px; font-weight: 700; color: var(--hs-primary); }
.hs-zone-list { display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 8px; overflow: hidden; }
.hs-zone-row {
	display: flex; align-items: center; justify-content: space-between; padding: 14px 20px;
	border-top: 1px solid #eee;
}
.hs-zone-row:first-child { border-top: none; }
.hs-zone-row__label { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.hs-zone-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.hs-zone-row__value { font-size: 14px; font-weight: 700; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
	.hs-header { padding: 16px 20px; }
	.hs-header__nav { display: none; }
	.hs-header__menu-toggle { display: inline-flex; }
	/* On mobile the raspadita countdown button in .hs-header__actions can grow wide enough to
	   collide with the logo when it's absolute-centered over the whole header — so on mobile the
	   logo drops out of that centering and sits in normal flow right next to the menu toggle instead. */
	.hs-header__logo {
		position: static; transform: none; font-size: 17px;
		margin-right: auto; margin-left: 10px;
	}
	.hs-search-bar { padding: 10px 20px; }
	.hs-search-bar__input { width: 100%; }

	.hs-hero { min-height: auto; }
	.hs-hero__content { padding: 32px 20px; max-width: none; }
	.hs-hero__title { font-size: 26px; }
	.hs-hero--has-mobile-media .hs-hero__slide--desktop { display: none !important; }
	.hs-hero--has-mobile-media .hs-hero__slide--mobile { display: block; }
	/* Shift the background crop to the right so more of the product shows and it's less covered
	   by the text block (which sits on the left). Pushed further right than before (80% wasn't
	   enough per feedback — the product was still mostly hidden behind the text). */
	.hs-hero__slide, .hs-hero__mobile-slide { background-position: 100% center; }
	.hs-hero__price { font-size: 24px; }

	.hs-trust-strip { grid-template-columns: 1fr; }
	.hs-trust-strip__item { padding: 16px 20px; border-bottom: 1px solid #eee; }

	.hs-section { padding: 32px 20px; }
	.hs-product-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.hs-product-card__badge { top: auto; bottom: 12px; }

	/* 32px is the shared mobile section rhythm (see .hs-section below) — every full-width section
	   uses it so the gaps between sections read as deliberate and even instead of arbitrary. */
	.hs-why-us { padding: 32px 20px; }
	.hs-compare__row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(0, 0.6fr); }
	.hs-compare__cell { padding: 10px 8px; font-size: 11px; }

	/* Was 80px top/bottom (inherited from the desktop rule, never overridden here) — double the
	   32px every other mobile section uses, which read as reviews being oddly far from both the
	   products grid above it and the benefits list below it. */
	.hs-reviews { padding: 32px 0; }
	.hs-reviews__track { padding: 4px 20px 12px; }
	.hs-review-card { flex-basis: 280px; padding: 22px; }

	.hs-badges-row { padding: 32px 20px; gap: 24px; }
	.hs-social-card { width: 108px; height: 190px; }
	.hs-badges-row img { width: 80px; height: 40px; }

	.hs-cta-band { padding: 32px 20px; flex-direction: column; text-align: center; }
	.hs-newsletter { padding: 32px 20px; }
	.hs-newsletter__form { flex-direction: column; max-width: none; }
	.hs-newsletter__form button { width: 100%; }
	.hs-footer { padding: 32px 20px; flex-direction: column; text-align: center; }
	.hs-footer__meta { text-align: center; }

	.hs-product-detail { padding: 12px 20px 40px; gap: 24px; }
	.hs-product-detail__gallery { width: 100%; }
	.hs-product-detail__extra-photos { display: none; }
	.hs-product-detail__promo-badge { position: static; display: inline-block; margin-bottom: 10px; max-width: none; }
	.hs-product-detail__price { font-size: 25px; }
	.hs-product-detail__description ul li { font-size: 13.5px; }
	.hs-swatch-badges-row { justify-content: space-between; gap: 8px; }
	.hs-product-detail__mini-badges { gap: 8px; justify-content: flex-end; }
	.hs-product-detail__mini-badges img { width: 58px; height: 29px; }

	.hs-category-header { padding: 24px 20px 0; }
	.hs-category-controls { padding: 0 20px; }
	.hs-category-body { padding: 20px 20px 48px; }

	.hs-page-hero { padding: 40px 20px; }
	.hs-page-hero__title { font-size: 26px; }
	.hs-contact-content { padding: 36px 20px; }
	.hs-contact-cards { flex-direction: column; align-items: stretch; }

	.hs-shipping-section { padding: 32px 20px; flex-direction: column; }

	.hs-cart-drawer__panel {
		top: auto; bottom: 0; left: 0; right: 0;
		width: 100%; height: 88vh; max-height: 88vh;
		border-radius: 18px 18px 0 0;
	}
	.hs-cart-drawer__grabber {
		display: block; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
		width: 40px; height: 4px; border-radius: 2px; background: #ddd;
	}
	.hs-cart-drawer__head { padding-top: 22px; touch-action: none; }
}