/*
 * Hudratt - main.css (global, loaded on every page).
 * Only shared tokens and components live here. Anything used by a single landing
 * goes in that landing's own file (home.css, contact.css, ...).
 * Naming: BEM with the "hd-" prefix. Bootstrap utilities are preferred over custom CSS.
 */

/* ==========================================================================
   Fonts (self-hosted WOFF2, SIL OFL). Archivo Expanded (static 700/500) for headlines,
   Archivo (variable 400-800) for text. The fallbacks wrap local Arial with calibrated metrics
   so the swap does not shift the layout: do not remove them.
   ========================================================================== */
@font-face {
	font-family: "Archivo Expanded";
	src: url("../fonts/archivo-expanded-700-latin.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo Expanded";
	src: url("../fonts/archivo-expanded-500-latin.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-var-latin.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo Expanded Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 700;
	size-adjust: 129.5%;
	ascent-override: 67.8%;
	descent-override: 16.2%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Archivo Expanded Fallback";
	src: local("Arial"), local("ArialMT");
	font-weight: 500;
	size-adjust: 129.2%;
	ascent-override: 68%;
	descent-override: 16.3%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial"), local("ArialMT");
	font-weight: 400 600;
	size-adjust: 98.4%;
	ascent-override: 89.2%;
	descent-override: 21.3%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 700 800;
	size-adjust: 100.3%;
	ascent-override: 87.5%;
	descent-override: 20.9%;
	line-gap-override: 0%;
}

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	/* Colour */
	--hd-bg: #e4e4e4;
	--hd-grid-line: rgba(0, 0, 0, 0.05);
	/* "+" pattern: one plus per tile (stroke colour lives inside the data URI: change its rgba there). */
	--hd-grid-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M39 50h22M50 39v22' fill='none' stroke='rgba(0,0,0,0.09)' stroke-width='1.2' stroke-linecap='square' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	--hd-grid-size: 2.5vw;
	--hd-surface: rgba(246, 246, 246, 0.46);
	--hd-surface-solid: #f6f6f6;
	--hd-ink: #1b1b1b;
	--hd-ink-muted: #5c5c5c;
	--hd-accent: #1fc4e0;
	--hd-accent-rgb: 31, 196, 224;
	--hd-accent-ink: #1b1b1b;
	--hd-accent-deep: #0b94ad; /* marker band on dark surfaces: white text over it keeps >= 3:1 */
	--hd-accent-text: #045a6a;
	--hd-dark: #1b1b1b;
	--hd-on-dark: #ffffff;
	--hd-danger: #b3261e;
	--hd-success: #176428;
	--hd-line-sport: #fe6b01;
	--hd-line-pre: #77bb20;
	--hd-line-pre-deep: #4f8a10; /* apple green for text and fills on light surfaces (contrast) */
	--hd-line-uva: #9e327f;
	--hd-whatsapp: #25d366; /* WhatsApp brand green */
	--hd-whatsapp-rgb: 37 211 102;
	--hd-whatsapp-deep: #075e54; /* WhatsApp dark teal: white text keeps >= 7:1 */
	--hd-seal-tablet: #ff5ca8; /* buy box seal icons on the black card: tablets pink, caffeine yellow */
	--hd-seal-caffeine: #ffd23f;

	/* Typography */
	--hd-font-display: "Archivo Expanded", "Archivo Expanded Fallback", Arial, sans-serif;
	--hd-font-body: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
	--hd-fs-hero: clamp(2.5rem, 8vw, 8rem);
	--hd-fs-headline: clamp(1.75rem, 4.2vw, 4.25rem);
	--hd-fs-subheadline: clamp(1.375rem, 2.6vw, 2.5rem);
	--hd-fs-title-sm: clamp(1.0625rem, 1.6vw, 1.5rem);
	--hd-fs-label: clamp(0.75rem, 0.9vw, 0.9375rem);
	--hd-fs-body: clamp(1rem, 0.5rem + 0.6vw, 1.1875rem);
	--hd-fs-small: clamp(0.875rem, 0.8vw, 1rem);
	--hd-fs-wordmark: 11vw; /* sized for the 8 letters of the brand name (HUDRAATT) */
	--hd-lh-display: 0.95;

	/* Spacing and shape */
	--hd-gutter: 10vw;
	--hd-section-y: 10vh;
	--hd-gap-xs: 0.5vw;
	--hd-gap-sm: 1vw;
	--hd-gap-md: 2.5vh;
	--hd-gap-lg: 5vh;
	--hd-radius: 10px;
	--hd-border: 1px solid var(--hd-ink);
	--hd-blur: blur(1px);
	--hd-tap: 3rem;
	--hd-fab-size: 3.5rem;
	--hd-scrolltop-size: 3rem;
	--hd-fab-offset: 0px;
	--hd-nav-h: clamp(3.5rem, 4vw, 4.5rem);
	--hd-nav-offset: calc(var(--hd-nav-h) + clamp(0.75rem, 2.5vh, 1.5rem) + clamp(1.5rem, 6vh, 4rem));

	/* Motion */
	--hd-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--hd-ease-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
	--hd-dur-fast: 0.25s;
	--hd-dur-med: 0.5s;
	--hd-dur-reveal: 1.25s;
	--hd-stagger-char: 0.035s;
	--hd-stagger-word: 0.075s;

	/* Bootstrap bridge */
	--bs-body-bg: var(--hd-bg);
	--bs-body-color: var(--hd-ink);
	--bs-body-font-family: var(--hd-font-body);
	--bs-body-font-size: var(--hd-fs-body);
	--bs-body-line-height: 1.6;
	--bs-border-color: var(--hd-ink);
	--bs-border-radius: var(--hd-radius);
	--bs-primary: var(--hd-accent);
	--bs-primary-rgb: var(--hd-accent-rgb);
	--bs-link-color: var(--hd-accent-text);
	--bs-link-color-rgb: 4, 90, 106;
	--bs-link-hover-color: var(--hd-ink);
	--bs-link-hover-color-rgb: 27, 27, 27;
	--bs-focus-ring-color: rgba(27, 27, 27, 0.35);
	--bs-focus-ring-width: 0.2rem;
	--bs-offcanvas-bg: var(--hd-surface-solid);
	--bs-offcanvas-color: var(--hd-ink);
	--bs-offcanvas-width: min(26rem, 88vw);
	--bs-offcanvas-padding-x: 1.5rem;
	--bs-offcanvas-padding-y: 1.25rem;
}

@media (max-width: 768px) {
	:root {
		--hd-grid-size: 10vw;
		--hd-section-y: 15vw;
		--hd-fs-hero: clamp(2rem, 9vw, 3.25rem);
		--hd-fs-headline: clamp(1.5rem, 7vw, 2.5rem);
		--hd-fs-subheadline: clamp(1.25rem, 6vw, 1.875rem);
		--hd-fs-title-sm: 1.125rem;
		--hd-fs-label: 0.8125rem;
		--hd-fs-body: 1rem;
		--hd-fs-wordmark: 11vw; /* sized for the 8 letters of the brand name (HUDRAATT) */
		--hd-gap-sm: 0.75rem;
		--hd-lh-display: 1;
	}
}

/* ==========================================================================
   Base
   ========================================================================== */
html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--hd-nav-offset);
}

body {
	font-family: var(--hd-font-body);
	font-size: var(--hd-fs-body);
	color: var(--hd-ink);
	background-color: var(--hd-bg);
	background-image: var(--hd-grid-pattern);
	background-size: var(--hd-grid-size) var(--hd-grid-size);
	overflow-x: clip;
}

:focus-visible {
	outline: 2px solid var(--hd-ink);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
}

.hd-skip {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 3000;
	padding: 0.75rem 1rem;
	background: var(--hd-ink);
	color: var(--hd-on-dark);
	border-radius: var(--hd-radius);
}

.hd-main {
	min-height: 60vh;
}

/* WordPress/WooCommerce accessible hidden text */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   Typography
   ========================================================================== */
.hd-display,
.hd-hero-title,
.hd-h1,
.hd-h2,
.hd-h3 {
	font-family: var(--hd-font-display);
	font-weight: 700;
	line-height: var(--hd-lh-display);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 0;
}

.hd-hero-title {
	font-size: var(--hd-fs-hero);
}

.hd-h1 {
	font-size: var(--hd-fs-headline);
}

.hd-h2 {
	font-size: var(--hd-fs-subheadline);
}

.hd-h3 {
	font-size: var(--hd-fs-title-sm);
	line-height: 1.15;
}

.hd-label {
	font-family: var(--hd-font-body);
	font-size: var(--hd-fs-label);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0;
}

.hd-lead {
	font-size: var(--hd-fs-body);
	max-width: 42em;
	margin: 0;
}

.hd-small {
	font-size: var(--hd-fs-small);
}

.hd-muted {
	color: var(--hd-ink-muted);
}

.hd-accent-text {
	color: var(--hd-accent-text);
}

/* Split text (server-side markup, animated by main.js) */
.hd-split__word {
	display: inline-block;
	white-space: nowrap;
}

.hd-split__item {
	display: inline-block;
}

/* Accent word: bright celeste marker band behind the lower part of the word (same style on light and
   dark surfaces). The marker is a pseudo-element so it can sweep in. */
.hd-split__item--accent {
	position: relative;
	isolation: isolate;
	color: var(--hd-ink);
}

.hd-split__item--accent::before {
	content: "";
	position: absolute;
	inset: 58% 0 6%;
	z-index: -1;
	background: var(--hd-accent);
	transform-origin: left center;
}

/* Accent over several words: the marker also covers the space up to the next accent word */
.hd-split__item--join::before {
	right: -0.32em;
}

/* On dark surfaces the word keeps the same marker band (same geometry and sweep as everywhere);
   the text turns white and the band uses a deeper shade of the same celeste so white keeps >= 3:1 over it. */
.hd-section--dark .hd-split__item--accent,
.hd-manifesto .hd-split__item--accent {
	color: var(--hd-on-dark);
}

.hd-section--dark .hd-split__item--accent::before,
.hd-manifesto .hd-split__item--accent::before {
	background: var(--hd-accent-deep);
}

/* With JS and motion allowed the marker sweeps in from the left, slowly, after its word appears. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	[data-hd-reveal] .hd-split__item--accent::before {
		transform: scaleX(0);
		transition: transform 0.9s var(--hd-ease-out) calc(var(--hd-i, 0) * var(--hd-stagger-word) + 0.8s);
	}

	[data-hd-reveal].is-in .hd-split__item--accent::before {
		transform: scaleX(1);
	}
}

/* ==========================================================================
   Layout
   ========================================================================== */
.hd-section {
	padding: var(--hd-section-y) var(--hd-gutter);
}

.hd-section--first {
	padding-top: calc(var(--hd-nav-offset) + 1rem);
}

.hd-section--dark {
	background: var(--hd-dark);
	color: var(--hd-on-dark);
}

.hd-stack {
	display: flex;
	flex-direction: column;
	gap: var(--hd-gap-md);
}

/* ==========================================================================
   Surfaces and buttons
   ========================================================================== */
.hd-glass {
	background: var(--hd-surface);
	-webkit-backdrop-filter: var(--hd-blur);
	backdrop-filter: var(--hd-blur);
	border: var(--hd-border);
	border-radius: var(--hd-radius);
}

.hd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: var(--hd-tap);
	padding: 0 1.25rem;
	font-family: var(--hd-font-body);
	font-size: var(--hd-fs-label);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--hd-accent-ink);
	background: var(--hd-accent);
	border: 1px solid var(--hd-accent);
	border-radius: var(--hd-radius);
	cursor: pointer;
	transition: background-color var(--hd-dur-fast) ease, color var(--hd-dur-fast) ease, border-color var(--hd-dur-fast) ease;
}

.hd-btn:hover,
.hd-btn:focus-visible {
	color: var(--hd-ink);
	background: transparent;
	border-color: var(--hd-ink);
}

.hd-btn--ink {
	color: var(--hd-on-dark);
	background: var(--hd-ink);
	border-color: var(--hd-ink);
}

.hd-btn--ink:hover,
.hd-btn--ink:focus-visible {
	color: var(--hd-ink);
	background: transparent;
}

.hd-btn--ghost {
	color: var(--hd-ink);
	background: transparent;
	border-color: var(--hd-ink);
}

.hd-btn--ghost:hover,
.hd-btn--ghost:focus-visible {
	color: var(--hd-accent-ink);
	background: var(--hd-accent);
	border-color: var(--hd-accent);
}

/* WhatsApp: brand palette. Ink label on the brand green (white on it is under 2:1), white on the dark teal on hover. */
.hd-btn--whatsapp {
	color: var(--hd-ink);
	background: var(--hd-whatsapp);
	border-color: var(--hd-whatsapp);
}

.hd-btn--whatsapp:hover,
.hd-btn--whatsapp:focus-visible {
	color: var(--hd-on-dark);
	background: var(--hd-whatsapp-deep);
	border-color: var(--hd-whatsapp-deep);
}

/* Button for dark surfaces: celeste fill; on hover it keeps the label readable (white on a
   translucent celeste, with a white border) instead of turning transparent with ink text. */
.hd-btn--on-dark {
	color: var(--hd-accent-ink);
	background: var(--hd-accent);
	border-color: var(--hd-accent);
}

.hd-btn--on-dark:hover,
.hd-btn--on-dark:focus-visible {
	color: var(--hd-on-dark);
	background: rgb(var(--hd-accent-rgb) / 0.18);
	border-color: var(--hd-on-dark);
}

.hd-btn--on-dark:focus-visible {
	outline-color: var(--hd-on-dark);
}

.hd-btn--block {
	display: flex;
	width: 100%;
}

.hd-btn[disabled],
.hd-btn.disabled {
	opacity: 0.55;
	pointer-events: none;
}

.hd-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	vertical-align: -0.2em;
}

.hd-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hd-tap);
	height: var(--hd-tap);
	padding: 0;
	color: var(--hd-on-dark);
	background: var(--hd-ink);
	border: 1px solid var(--hd-ink);
	border-radius: var(--hd-radius);
	cursor: pointer;
	transition: color var(--hd-dur-fast) ease, background-color var(--hd-dur-fast) ease;
}

.hd-icon-btn:hover,
.hd-icon-btn:focus-visible {
	color: var(--hd-accent);
}

.hd-icon-btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.hd-icon-btn--round {
	border-radius: 50%;
	width: 4rem;
	height: 4rem;
	color: var(--hd-accent-ink);
	background: var(--hd-accent);
	border-color: var(--hd-accent);
	transition: background-color var(--hd-dur-med) ease, color var(--hd-dur-med) ease;
}

.hd-icon-btn--round:hover,
.hd-icon-btn--round:focus-visible {
	color: var(--hd-ink);
	background: transparent;
	border-color: var(--hd-ink);
}

.hd-card-link {
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   Loader (home): CSS-only, fades by itself in 0.5 s
   ========================================================================== */
.hd-loader {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: grid;
	place-items: center;
	pointer-events: none;
	background-color: var(--hd-bg);
	background-image: var(--hd-grid-pattern);
	background-size: var(--hd-grid-size) var(--hd-grid-size);
	animation: hd-loader-out 0.25s ease-in-out 0.25s forwards;
}

.hd-loader__mark {
	font-family: var(--hd-font-display);
	font-size: clamp(2rem, 9vw, 6rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: transparent;
	background: linear-gradient(90deg, var(--hd-ink), var(--hd-accent), var(--hd-ink));
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	animation: hd-gradient-shift 2s ease-in-out infinite alternate;
}

@keyframes hd-loader-out {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes hd-gradient-shift {
	from {
		background-position: 0% 50%;
	}

	to {
		background-position: 100% 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hd-loader {
		display: none;
	}
}

/* ==========================================================================
   Navigation (floating pill) + Offcanvas
   ========================================================================== */
.hd-nav {
	position: fixed;
	z-index: 1030;
	top: clamp(0.5rem, 2.5vh, 1.5rem);
	left: 10%;
	width: 80%;
}

.hd-nav__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--hd-nav-h);
	padding: 0.35rem 0.5rem 0.35rem 1.25rem;
	background: var(--hd-surface-solid);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	border: 1px solid rgba(27, 27, 27, 0.14);
	border-radius: var(--hd-radius);
	transition: background-color 0.3s ease;
}

.hd-nav__brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	min-height: var(--hd-tap);
}

.hd-nav__logo {
	height: 2.5rem;
	width: auto;
}

.hd-nav__list {
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.5rem);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.hd-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--hd-tap);
	font-size: var(--hd-fs-label);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--hd-ink);
	border-bottom: 2px solid transparent;
	transition: border-color var(--hd-dur-fast) ease;
}

.hd-nav__link:hover {
	border-bottom-color: var(--hd-ink);
}

.hd-nav__link[aria-current="page"] {
	border-bottom-color: var(--hd-ink);
}

.hd-nav__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hd-nav__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hd-tap);
	height: var(--hd-tap);
	padding: 0;
	font-size: 1.25rem;
	color: var(--hd-ink);
	background: transparent;
	border: 0;
	border-radius: var(--hd-radius);
	cursor: pointer;
	transition: background-color var(--hd-dur-fast) ease;
}

.hd-nav__icon:hover {
	background: rgba(27, 27, 27, 0.1);
}

.hd-nav__cart-count {
	position: absolute;
	top: 0.15rem;
	right: 0.05rem;
	min-width: 1.25rem;
	padding: 0 0.3rem;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.25rem;
	text-align: center;
	color: var(--hd-accent-ink);
	background: var(--hd-accent);
	border-radius: 999px;
}

/* Mobile menu: full-screen panel with the brand drop in the background, links, CTA and social icons. */
.hd-offcanvas {
	--bs-offcanvas-width: 100vw;
	--bs-offcanvas-bg: var(--hd-dark);
	--bs-offcanvas-color: var(--hd-on-dark);
	--bs-offcanvas-padding-x: clamp(1.25rem, 6vw, 2rem);
	--bs-offcanvas-padding-y: 1rem;
	--bs-offcanvas-border-width: 0;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--hd-dark);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M39 50h22M50 39v22' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	background-size: 10vw 10vw;
}

/* The drop of the logo, large and cropped at the bottom, behind everything. */
.hd-offcanvas::before {
	content: "";
	position: absolute;
	right: -18vw;
	bottom: -12vh;
	z-index: -1;
	width: min(112vw, 70vh);
	aspect-ratio: 485 / 600;
	background: url("../img/gota-hudratt-blanca.webp") center / contain no-repeat;
	opacity: 0.09;
	transform: rotate(-8deg);
	pointer-events: none;
}

/* Soft celeste glow behind the drop. */
.hd-offcanvas::after {
	content: "";
	position: absolute;
	right: -30vw;
	bottom: -25vh;
	z-index: -2;
	width: 120vw;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgb(var(--hd-accent-rgb) / 0.28) 0%, rgb(var(--hd-accent-rgb) / 0) 62%);
	pointer-events: none;
}

.hd-offcanvas__header {
	justify-content: space-between;
	padding-block: 1rem;
}

.hd-offcanvas__title {
	display: inline-flex;
	align-items: center;
}

.hd-offcanvas__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hd-tap);
	height: var(--hd-tap);
	padding: 0;
	font-size: 1.25rem;
	color: var(--hd-on-dark);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	cursor: pointer;
	transition: color var(--hd-dur-fast) ease, border-color var(--hd-dur-fast) ease;
}

.hd-offcanvas__close:hover,
.hd-offcanvas__close:focus-visible {
	color: var(--hd-accent);
	border-color: var(--hd-accent);
}

.hd-offcanvas :focus-visible {
	outline-color: var(--hd-on-dark);
}

.hd-offcanvas__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.hd-offcanvas__nav {
	margin-block: auto;
}

.hd-offcanvas__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hd-offcanvas__list .hd-nav__link {
	width: 100%;
	min-height: calc(4.2rem + 15px); /* 3.5rem + 10% above and below, plus the 15px top padding */
	padding-top: 15px;
	font-family: var(--hd-font-display);
	font-size: clamp(1.75rem, 8.5vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.05;
	color: var(--hd-on-dark);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.hd-offcanvas__list .hd-nav__link:hover {
	opacity: 1;
	color: var(--hd-accent);
}

.hd-offcanvas__list .hd-nav__link[aria-current="page"] {
	color: var(--hd-accent);
	border-bottom-color: var(--hd-on-dark);
}

.hd-offcanvas__foot {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.hd-offcanvas__cta {
	min-height: 3.5rem;
	font-size: 0.9375rem;
}

.hd-offcanvas__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.hd-offcanvas__account {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--hd-tap);
	font-size: var(--hd-fs-label);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--hd-on-dark);
}

.hd-offcanvas__account:hover,
.hd-offcanvas__account:focus-visible {
	color: var(--hd-accent);
}

.hd-offcanvas__social {
	display: flex;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hd-offcanvas__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hd-tap);
	height: var(--hd-tap);
	font-size: 1.25rem;
	color: var(--hd-on-dark);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	transition: color var(--hd-dur-fast) ease, border-color var(--hd-dur-fast) ease, background-color var(--hd-dur-fast) ease;
}

.hd-offcanvas__social-link:hover,
.hd-offcanvas__social-link:focus-visible {
	color: var(--hd-accent-ink);
	background: var(--hd-accent);
	border-color: var(--hd-accent);
}

/* Entrance: links, CTA and socials rise in one after another when the panel opens. */
@media (prefers-reduced-motion: no-preference) {
	.hd-offcanvas .hd-offcanvas__list > .hd-nav__item,
	.hd-offcanvas .hd-offcanvas__foot > * {
		opacity: 0;
		transform: translateY(1.25rem);
		transition: opacity 0.6s var(--hd-ease-out), transform 0.6s var(--hd-ease-out);
	}

	.hd-offcanvas.show .hd-offcanvas__list > .hd-nav__item,
	.hd-offcanvas.show .hd-offcanvas__foot > * {
		opacity: 1;
		transform: none;
	}

	.hd-offcanvas.show .hd-offcanvas__list > .hd-nav__item:nth-child(1) { transition-delay: 0.12s; }
	.hd-offcanvas.show .hd-offcanvas__list > .hd-nav__item:nth-child(2) { transition-delay: 0.18s; }
	.hd-offcanvas.show .hd-offcanvas__list > .hd-nav__item:nth-child(3) { transition-delay: 0.24s; }
	.hd-offcanvas.show .hd-offcanvas__list > .hd-nav__item:nth-child(4) { transition-delay: 0.3s; }
	.hd-offcanvas.show .hd-offcanvas__list > .hd-nav__item:nth-child(5) { transition-delay: 0.36s; }
	.hd-offcanvas.show .hd-offcanvas__list > .hd-nav__item:nth-child(n + 6) { transition-delay: 0.42s; }
	.hd-offcanvas.show .hd-offcanvas__foot > :nth-child(1) { transition-delay: 0.45s; }
	.hd-offcanvas.show .hd-offcanvas__foot > :nth-child(2) { transition-delay: 0.52s; }
}


@media (max-width: 991.98px) {
	.hd-nav {
		left: 4vw;
		width: 92vw;
	}

	.hd-nav__bar {
		padding-left: 1rem;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.hd-footer {
	padding: var(--hd-section-y) var(--hd-gutter) 2rem;
}

.hd-footer__info {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
	gap: 2rem;
	padding: clamp(1.25rem, 2.5vw, 2.5rem);
}

.hd-footer__brand a {
	display: inline-flex;
	align-items: center;
	min-height: var(--hd-tap);
}

.hd-footer__logo {
	width: 7rem;
	height: auto;
}

.hd-footer__col .hd-label {
	margin-bottom: 1rem;
}

.hd-footer__list,
.hd-footer__social {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hd-footer__list li {
	margin-bottom: 0.25rem;
}

.hd-footer__list .hd-nav__link,
.hd-footer__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--hd-tap);
	font-size: var(--hd-fs-small);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--hd-ink);
	border-bottom: 0; /* the menu walker adds .hd-nav__link: a single underline here, not its bottom line too */
}

.hd-footer__list .hd-nav__link:hover,
.hd-footer__link:hover {
	text-decoration: underline;
	text-decoration-color: var(--hd-ink);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.hd-footer__address {
	margin: 0 0 0.75rem;
	font-size: var(--hd-fs-small);
	font-style: normal;
}

.hd-footer__social {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.hd-footer__wordmark {
	margin: clamp(1.5rem, 4vw, 3rem) 0 0;
	font-family: var(--hd-font-display);
	font-size: var(--hd-fs-wordmark);
	font-weight: 700;
	line-height: 0.9;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
}

.hd-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-top: 1.25rem;
	color: var(--hd-ink-muted);
}

.hd-footer__legal a {
	color: var(--hd-ink);
}

@media (max-width: 991.98px) {
	.hd-footer__info {
		grid-template-columns: 1fr 1fr;
	}

	.hd-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 575.98px) {
	.hd-footer__info {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Floating WhatsApp + toasts
   ========================================================================== */
.hd-whatsapp {
	position: fixed;
	z-index: 1020;
	right: 1rem;
	bottom: calc(1rem + var(--hd-fab-offset) + var(--hd-scrolltop-size) + 0.75rem + env(safe-area-inset-bottom, 0px));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hd-fab-size);
	height: var(--hd-fab-size);
	font-size: 1.5rem;
	color: #fff;
	background: var(--hd-whatsapp);
	border-radius: 50%;
	box-shadow: 0 6px 18px rgb(var(--hd-whatsapp-rgb) / 0.45);
	transition: transform var(--hd-dur-med) var(--hd-ease-out), bottom var(--hd-dur-med) var(--hd-ease-out), opacity var(--hd-dur-med) var(--hd-ease-out), background-color var(--hd-dur-fast) ease;
}

/* Phones: the buttons slip away (a) on cart/checkout while scrolling down, so they never cover fields or
   shipping text, and return on scroll up or keyboard focus; (b) while the footer wordmark is in view. */
@media (max-width: 767.98px) {
	.hd-whatsapp.is-tucked:not(:focus-visible),
	.hd-scrolltop.is-tucked:not(:focus-visible),
	.hd-whatsapp.is-over-footer:not(:focus-visible),
	.hd-scrolltop.is-over-footer:not(:focus-visible) {
		opacity: 0;
		transform: translateX(calc(100% + 2rem));
		pointer-events: none;
	}
}

.hd-whatsapp:hover,
.hd-whatsapp:focus-visible {
	color: #fff;
	background: #1ebe5b;
	transform: scale(1.06);
}

.hd-whatsapp:focus-visible {
	outline-color: var(--hd-ink);
	outline-offset: 3px;
}

/* Animated radial light: a glow that breathes plus a soft wave that expands and fades, forever. */
.hd-whatsapp::before,
.hd-whatsapp::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.hd-whatsapp::before {
	inset: -1.5rem;
	z-index: -1;
	background: radial-gradient(circle, rgb(var(--hd-whatsapp-rgb) / 0.6) 0%, rgb(var(--hd-whatsapp-rgb) / 0.25) 42%, rgb(var(--hd-whatsapp-rgb) / 0) 70%);
	animation: hd-aura 2.6s ease-in-out infinite;
}

.hd-whatsapp::after {
	inset: 0;
	z-index: -1;
	background: radial-gradient(circle, rgb(var(--hd-whatsapp-rgb) / 0) 55%, rgb(var(--hd-whatsapp-rgb) / 0.55) 70%, rgb(var(--hd-whatsapp-rgb) / 0) 100%);
	animation: hd-aura-wave 2.6s ease-out infinite;
}

@keyframes hd-aura {
	0%,
	100% {
		opacity: 0.7;
		transform: scale(0.9);
	}

	50% {
		opacity: 1;
		transform: scale(1.12);
	}
}

@keyframes hd-aura-wave {
	0% {
		opacity: 0.9;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(2.1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hd-whatsapp,
	.hd-whatsapp::before,
	.hd-whatsapp::after {
		animation: none;
		transition: none;
	}

	.hd-whatsapp::after {
		display: none;
	}
}

/* Back-to-top: round black button under the WhatsApp button */
.hd-scrolltop {
	position: fixed;
	z-index: 1020;
	right: 1rem;
	bottom: calc(1rem + var(--hd-fab-offset) + env(safe-area-inset-bottom, 0px));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hd-scrolltop-size);
	height: var(--hd-scrolltop-size);
	padding: 0;
	font-size: 1.25rem;
	color: var(--hd-on-dark);
	background: var(--hd-ink);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	cursor: pointer;
	transition: color var(--hd-dur-fast) ease, transform var(--hd-dur-med) var(--hd-ease-out), bottom var(--hd-dur-med) var(--hd-ease-out), opacity var(--hd-dur-med) var(--hd-ease-out);
}

.hd-scrolltop:hover,
.hd-scrolltop:focus-visible {
	color: var(--hd-accent);
	transform: translateY(-2px);
}

.hd-scrolltop:focus-visible {
	outline-color: var(--hd-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.hd-scrolltop {
		transition: none;
	}

	.hd-scrolltop:hover,
	.hd-scrolltop:focus-visible {
		transform: none;
	}
}

.hd-toasts {
	position: fixed;
	z-index: 1090;
	left: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: calc(100vw - 6rem);
}

.hd-toast {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	color: var(--hd-on-dark);
	background: var(--hd-ink);
	border-radius: var(--hd-radius);
}

.hd-toast__action {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: var(--hd-tap);
	padding: 0 0.5rem;
	font-weight: 700;
	color: var(--hd-accent);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.hd-toast--success .hd-icon {
	color: var(--hd-accent);
}

.hd-toast--error {
	background: var(--hd-danger);
}

/* ==========================================================================
   Reveal system (progressive enhancement: only with JS and without reduced motion)
   ========================================================================== */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	[data-hd-reveal="block"] {
		opacity: 0;
		filter: blur(3px);
		transform: translateY(2.5vh);
		transition:
			opacity var(--hd-dur-reveal) var(--hd-ease-out),
			filter var(--hd-dur-reveal) var(--hd-ease-out),
			transform var(--hd-dur-reveal) var(--hd-ease-out);
	}

	[data-hd-reveal="block"].is-in {
		opacity: 1;
		filter: blur(0);
		transform: none;
	}

	[data-hd-reveal="chars"] .hd-split__item,
	[data-hd-reveal="words"] .hd-split__item {
		opacity: 0;
		filter: blur(8px);
		transform: translateY(50%);
		transition:
			opacity var(--hd-reveal-dur, 1s) var(--hd-ease-out),
			filter var(--hd-reveal-dur, 1s) var(--hd-ease-out),
			transform var(--hd-reveal-dur, 1s) var(--hd-ease-out);
		transition-delay: calc(var(--hd-i, 0) * var(--hd-reveal-stagger, var(--hd-stagger-word)));
	}

	[data-hd-reveal="chars"] {
		--hd-reveal-dur: var(--hd-dur-reveal);
		--hd-reveal-stagger: var(--hd-stagger-char);
	}

	[data-hd-reveal="chars"].is-in .hd-split__item,
	[data-hd-reveal="words"].is-in .hd-split__item {
		opacity: 1;
		filter: blur(0);
		transform: none;
	}

	[data-hd-reveal="stagger"] > * {
		opacity: 0;
		transform: translateY(25%);
		transition:
			opacity 1s var(--hd-ease-sine),
			transform 1s var(--hd-ease-sine);
		transition-delay: calc(var(--hd-i, 0) * 0.1s);
	}

	[data-hd-reveal="stagger"].is-in > * {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   First screen: paints without waiting for JavaScript (CSS-only entrance).
   The hero text of inner pages, the article header and the product title are the
   LCP candidates, so they are never hidden until main.js runs (the entrance only
   blurs and shifts them: no opacity, so the browser counts them from the first paint).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	:is(.hd-page-hero, .hd-article__header) [data-hd-reveal="block"],
	.hd-article__figure[data-hd-reveal="block"],
	:is(.hd-page-hero, .hd-article__header, .hd-product__title) .hd-split__item {
		opacity: 1;
		filter: none;
		transform: none;
		transition: none;
		animation: hd-enter var(--hd-dur-reveal) var(--hd-ease-out) backwards;
	}

	:is(.hd-page-hero, .hd-article__header, .hd-product__title) .hd-split__word:nth-child(2) .hd-split__item {
		animation-delay: calc(1 * var(--hd-stagger-word));
	}

	:is(.hd-page-hero, .hd-article__header, .hd-product__title) .hd-split__word:nth-child(3) .hd-split__item {
		animation-delay: calc(2 * var(--hd-stagger-word));
	}

	:is(.hd-page-hero, .hd-article__header, .hd-product__title) .hd-split__word:nth-child(4) .hd-split__item {
		animation-delay: calc(3 * var(--hd-stagger-word));
	}

	:is(.hd-page-hero, .hd-article__header, .hd-product__title) .hd-split__word:nth-child(5) .hd-split__item {
		animation-delay: calc(4 * var(--hd-stagger-word));
	}

	:is(.hd-page-hero, .hd-article__header, .hd-product__title) .hd-split__word:nth-child(6) .hd-split__item {
		animation-delay: calc(5 * var(--hd-stagger-word));
	}

	:is(.hd-page-hero, .hd-article__header, .hd-product__title) .hd-split__word:nth-child(7) .hd-split__item {
		animation-delay: calc(6 * var(--hd-stagger-word));
	}

	:is(.hd-page-hero, .hd-article__header, .hd-product__title) .hd-split__word:nth-child(8) .hd-split__item {
		animation-delay: calc(7 * var(--hd-stagger-word));
	}

	:is(.hd-page-hero, .hd-article__header, .hd-product__title) .hd-split__word:nth-child(9) .hd-split__item {
		animation-delay: calc(8 * var(--hd-stagger-word));
	}

	:is(.hd-page-hero, .hd-article__header, .hd-product__title) .hd-split__word:nth-child(10) .hd-split__item {
		animation-delay: calc(9 * var(--hd-stagger-word));
	}

	:is(.hd-page-hero, .hd-article__header, .hd-product__title) .hd-split__word:nth-child(11) .hd-split__item {
		animation-delay: calc(10 * var(--hd-stagger-word));
	}

	:is(.hd-page-hero, .hd-article__header, .hd-product__title) .hd-split__word:nth-child(12) .hd-split__item {
		animation-delay: calc(11 * var(--hd-stagger-word));
	}
}

@keyframes hd-enter {
	from {
		filter: blur(3px);
		transform: translateY(2.5vh);
	}
}

/* ==========================================================================
   Buy box (Home spotlight + /comprar/): product info, card with the tube(s), form.
   Page layout lives in home.css (hero) and buy.css (buy page); both set
   --hd-spot-card-w / --hd-spot-card-h for the card.
   ========================================================================== */
.hd-spot__info {
	text-align: center;
}

.hd-spot__card {
	position: relative;
	width: var(--hd-spot-card-w);
	height: var(--hd-spot-card-h);
	margin-inline: auto;
	overflow: hidden;
	background: rgba(246, 246, 246, 0.7);
}

.hd-spot__media {
	position: absolute;
	inset: 0;
}

.hd-spot__image,
.hd-spot__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.45;
}

/* Parallax background: taller and wider than the card so the shift never shows an edge. */
.hd-spot__bg {
	position: absolute;
	top: -12%;
	left: -20px;
	width: calc(100% + 40px);
	max-width: none;
	height: 124%;
	object-fit: cover;
	pointer-events: none;
}

.hd-spot__card.is-parallax .hd-spot__bg {
	will-change: transform;
}

.hd-spot__landed {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: calc(var(--hd-spot-card-h) * 0.84);
	max-width: none;
	translate: -50% -50%;
	filter: drop-shadow(0 1.5vw 2vw rgba(27, 27, 27, 0.28));
}

/* Combo: both flavours side by side (the hero keeps a single tube). */
.hd-spot__halves {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.hd-spot__half {
	position: relative;
	overflow: hidden;
}

.hd-spot__pair {
	position: absolute;
	inset: 0;
	display: flex;
	gap: 6%;
	align-items: center;
	justify-content: center;
}

.hd-spot__pair-tube {
	width: auto;
	height: 66%;
	max-width: none;
	filter: drop-shadow(0 1vw 1.5vw rgba(27, 27, 27, 0.28));
}

.hd-spot__toggle {
	position: absolute;
	bottom: 1.25rem;
	left: 1rem;
}

.hd-spot__toggle [data-hd-icon-play],
.hd-spot__toggle.is-paused [data-hd-icon-pause] {
	display: none;
}

.hd-spot__toggle.is-paused [data-hd-icon-play] {
	display: inline-block;
}

/* Variants share one grid cell: the inactive ones fade out (and leave the tab order). 0 grape, 1 apple, 2 combo. */
.hd-spot__stack {
	display: grid;
}

.hd-spot__variant {
	grid-area: 1 / 1;
	transition: opacity var(--hd-dur-med) var(--hd-ease-out), visibility 0s linear var(--hd-dur-med);
}

.hd-spot__variant--card {
	position: absolute;
	inset: 0;
}

.hd-spot[data-active="0"] [data-hd-spot-variant="1"],
.hd-spot[data-active="0"] [data-hd-spot-variant="2"],
.hd-spot[data-active="1"] [data-hd-spot-variant="0"],
.hd-spot[data-active="1"] [data-hd-spot-variant="2"],
.hd-spot[data-active="2"] [data-hd-spot-variant="0"],
.hd-spot[data-active="2"] [data-hd-spot-variant="1"] {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.hd-spot[data-active="0"] [data-hd-spot-variant="0"],
.hd-spot[data-active="1"] [data-hd-spot-variant="1"],
.hd-spot[data-active="2"] [data-hd-spot-variant="2"] {
	transition: opacity var(--hd-dur-med) var(--hd-ease-out), visibility 0s;
}

.hd-spot__name {
	margin: 0.25rem 0 0.5rem;
	font-size: clamp(1.25rem, 2.1vw, 2.25rem);
}

/* Flavour colour: the flavour word of the name and the element symbols (grape purple, apple green) */
.hd-spot__flavor--uva,
.hd-spot__variant--uva .hd-element__symbol {
	color: var(--hd-line-uva);
}

.hd-spot__flavor--pre,
.hd-spot__variant--pre .hd-element__symbol {
	color: var(--hd-line-pre-deep);
}

.hd-spot__format {
	margin: 0 0 0.75rem;
}

.hd-spot__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hd-spot__chip {
	padding: 0.3rem 0.65rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--hd-surface-solid);
	border: var(--hd-border);
	border-radius: var(--hd-radius);
}

/* Periodic-table tile: atomic number, symbol and name (the mineral ingredient chips). */
.hd-spot__chip--element {
	padding: 0;
}

.hd-element {
	display: grid;
	grid-template-columns: 1fr;
	align-content: center;
	justify-items: center;
	min-width: 4rem;
	min-height: 3.75rem;
	padding: 0.3rem 0.55rem 0.4rem;
	line-height: 1;
}


.hd-element__num {
	justify-self: start;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--hd-ink-muted);
}

.hd-element__symbol {
	margin: 0.05rem 0 0.2rem;
	font-family: var(--hd-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.hd-element__name {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Pre-workout ingredient tile (Cit, βA, Caf): same light tile as the minerals, with the kind ("Aminoácido") where the atomic number goes */
.hd-element--compound {
	min-width: 5.25rem;
}

.hd-element--compound .hd-element__num {
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Buy box: black card (proposal 03) with light controls; the celeste buy button sits on it. */
.hd-spot__box {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: 1.1rem 1.25rem;
	color: var(--hd-on-dark);
	background: var(--hd-dark);
	border-radius: var(--hd-radius);
}

.hd-spot__form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hd-spot__fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.hd-spot__legend {
	float: none;
	width: auto;
	margin-bottom: 0.5rem;
	padding: 0;
}

.hd-spot__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.hd-spot__pill,
.hd-spot__pack {
	position: relative;
	display: block;
	cursor: pointer;
}

.hd-spot__check,
.hd-spot__pack-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.hd-spot__pill-body {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	min-height: var(--hd-tap);
	padding: 0 1.1rem;
	font-size: var(--hd-fs-label);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hd-on-dark);
	background: rgb(255 255 255 / 0.06);
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: var(--hd-radius);
	transition: background-color var(--hd-dur-fast) ease, color var(--hd-dur-fast) ease;
}

.hd-spot__check:checked + .hd-spot__pill-body {
	color: var(--hd-ink);
	background: var(--hd-on-dark);
	border-color: var(--hd-on-dark);
}

.hd-spot__check:disabled + .hd-spot__pill-body {
	opacity: 0.45;
	text-decoration: line-through;
}

.hd-spot__check:focus-visible + .hd-spot__pill-body,
.hd-spot__pack-input:focus-visible + .hd-spot__pack-body {
	outline: 2px solid var(--hd-on-dark);
	outline-offset: 2px;
}

.hd-spot__dot {
	flex: none;
	width: 0.75rem;
	height: 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
}

.hd-spot__dot--uva {
	background: var(--hd-line-uva);
}

.hd-spot__dot--pre {
	background: var(--hd-line-pre);
}

.hd-spot__packs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

.hd-spot__pack-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	height: 100%;
	min-height: var(--hd-tap);
	padding: 0.6rem 0.65rem;
	font-size: 0.8125rem;
	line-height: 1.25;
	background: rgb(255 255 255 / 0.06);
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: var(--hd-radius);
	transition: background-color var(--hd-dur-fast) ease, box-shadow var(--hd-dur-fast) ease;
}

.hd-spot__pack-input:checked + .hd-spot__pack-body {
	background: rgb(255 255 255 / 0.14);
	box-shadow: inset 0 0 0 2px var(--hd-on-dark);
}

/* Pack: name, saving chip, then the price per tube big with its label. */
.hd-spot__pack-name {
	order: 1;
	font-weight: 800;
}

.hd-spot__pack-count {
	order: 2;
	color: rgb(255 255 255 / 0.7);
}

.hd-spot__pack-save {
	order: 3;
	align-self: flex-start;
	max-width: 100%;
	padding: 0.1rem 0.35rem;
	font-size: 0.625rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hd-accent-ink);
	background: var(--hd-accent);
	border-radius: 6px;
}

/* "Envío gratis" chip (Hudratt\Woo\FreeShipping::badge_html): truck + text, outlined in the current
   text colour so the same chip reads on the black box and on the light cards. Hidden while its text
   is empty, which is how the spotlight script switches it per flavour. */
.hd-ship {
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
	align-self: flex-start;
	max-width: 100%;
	padding: 0.1rem 0.4rem;
	font-size: 0.625rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid currentColor;
	border-radius: 6px;
}

.hd-ship .hd-icon {
	width: 1.2em;
	height: 1.2em;
}

.hd-ship:has(> [data-hd-pack="ship"]:empty) {
	display: none;
}

/* In the black box the chip is a sticker on the bottom-right corner of the pack card, poking out of it.
   The card (.hd-spot__pack) is the positioned ancestor; the dark fill covers the card border under the
   sticker, and pointer-events lets the click fall through to the radio overlay. */
.hd-spot__pack-ship {
	position: absolute;
	right: -0.4rem;
	bottom: -0.45rem;
	z-index: 1;
	color: var(--hd-on-dark);
	background: var(--hd-dark);
	pointer-events: none;
}

.hd-spot__pack-unit {
	order: 4;
	margin-top: 0.25rem;
	font-family: var(--hd-font-display);
	font-size: clamp(0.9375rem, 5.2cqi, 1.5625rem);
	font-weight: 700;
	line-height: 1.05;
	white-space: nowrap;
}

.hd-spot__pack-label {
	order: 5;
	color: rgb(255 255 255 / 0.7);
}

/* Phones: the three packs share ~250 px, so the price uses the narrower body font and the box gives up padding. */
@media (max-width: 479.98px) {
	.hd-spot__box {
		padding: 1rem;
	}

	.hd-spot__pack-body {
		padding: 0.5rem;
	}

	/* Three packs on ~250 px: the sticker shrinks and pokes out less, so it stays clear of the next card. */
	.hd-spot__pack-ship {
		right: -0.15rem;
		padding-inline: 0.3rem;
		font-size: 0.5625rem;
		letter-spacing: 0;
	}

}

/* The label and the total never wrap. When the form is too narrow for both on one line (phones, the
   tablet range of the home) the total sits under the label, both centred. */
.hd-spot__form {
	container-type: inline-size;
}

.hd-spot__buy span {
	white-space: nowrap;
}

@container (max-width: 27rem) {
	.hd-spot__pack-unit {
		font-family: var(--hd-font-body);
		font-weight: 800;
	}
}

@container (max-width: 22rem) {
	.hd-spot__buy {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.1rem;
		padding-block: 0.5rem;
	}
}

/* Very narrow form (the small-tablet range of the home): packs become rows (name left, price right),
   the ribbons drop their dots and tighten, so nothing is cut. */
@container (max-width: 15.5rem) {
	.hd-spot__packs {
		grid-template-columns: minmax(0, 1fr);
	}

	.hd-spot__pack-body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 0.75rem;
		align-items: center;
	}

	.hd-spot__pack-name {
		grid-column: 1;
		grid-row: 1;
	}

	.hd-spot__pack-count {
		grid-column: 1;
		grid-row: 2;
	}

	.hd-spot__pack-save {
		grid-column: 1;
		grid-row: 3;
	}

	.hd-spot__pack-unit {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
		text-align: right;
	}

	.hd-spot__pack-label {
		grid-column: 2;
		grid-row: 2;
		text-align: right;
	}

	.hd-spot__pills--choice :is(.hd-spot__dot, .hd-spot__dots) {
		display: none;
	}

}

.hd-spot__pack-count:empty,
.hd-spot__pack-save:empty {
	display: none;
}

.hd-spot__buy {
	display: flex;
	width: 100%;
	min-height: 3.5rem;
	font-size: 1rem;
	justify-content: space-between;
}

.hd-spot__more {
	display: inline-flex;
	align-items: center;
	align-self: center;
	min-height: var(--hd-tap);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--hd-on-dark);
	text-underline-offset: 0.2em;
}

.hd-spot__soldout {
	margin: 0;
	font-weight: 700;
}

.hd-spot__seals {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	justify-content: center;
	margin: 0;
	padding: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	list-style: none;
}

.hd-spot__seals li {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
}

.hd-spot__seals .hd-icon {
	flex: none;
	width: 1.1em;
	height: 1.1em;
	color: var(--hd-accent);
}

.hd-spot__seal--tablet .hd-icon {
	color: var(--hd-seal-tablet);
}

.hd-spot__seal--caffeine .hd-icon {
	color: var(--hd-seal-caffeine);
}

/* Selector Uva | Manzana | Ambos, shared by the home and the buy page ("Ambos" shows both colour dots):
   three equal ribbons that still fit one row at 360 px. */
.hd-spot__pills--choice {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.375rem;
}

.hd-spot__pills--choice .hd-spot__pill {
	min-width: 0;
}

.hd-spot__pills--choice .hd-spot__pill-body {
	gap: 0.4rem;
	justify-content: center;
	width: 100%;
	padding-inline: 0.25rem;
	font-size: clamp(0.625rem, 3cqi, var(--hd-fs-label));
	letter-spacing: 0.05em;
}

/* Narrow form: the colour dots (decorative, the flavour is written) give their room to the name. */
@container (max-width: 19rem) {
	.hd-spot__pills--choice :is(.hd-spot__dot, .hd-spot__dots) {
		display: none;
	}
}

.hd-spot__dots {
	display: inline-flex;
}

.hd-spot__dots .hd-spot__dot + .hd-spot__dot {
	margin-left: -0.25rem;
}

.hd-spot__fichas {
	display: grid;
	justify-items: center;
	margin: 0;
}

.hd-spot__fichas-title {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hd-on-dark);
	opacity: 0.7;
}

.hd-spot__fichas-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	justify-content: center;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hd-spot[data-active] .hd-spot__variant[data-hd-spot-variant],
	.hd-spot__pill-body,
	.hd-spot__pack-body {
		transition: none;
	}
}

/* ==========================================================================
   Strip (cells joined by a 1px border)
   ========================================================================== */
.hd-strip {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hd-strip__item {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: clamp(3.5rem, 7.5vh, 5rem);
	padding: 0.5rem 1rem;
	margin-left: -1px;
	text-align: center;
	background: var(--hd-surface);
	-webkit-backdrop-filter: var(--hd-blur);
	backdrop-filter: var(--hd-blur);
	border: var(--hd-border);
}

.hd-strip__item:first-child {
	margin-left: 0;
	border-radius: var(--hd-radius) 0 0 var(--hd-radius);
}

.hd-strip__item:last-child {
	border-radius: 0 var(--hd-radius) var(--hd-radius) 0;
}

.hd-strip__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: var(--hd-tap);
	color: inherit;
	text-decoration: none;
}

@media (max-width: 768px) {
	.hd-strip {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.hd-strip__item {
		min-width: 0;
		padding-inline: 0.5rem;
		letter-spacing: 0.04em;
		overflow-wrap: normal;
		hyphens: auto;
	}

	.hd-strip__item,
	.hd-strip__item:first-child,
	.hd-strip__item:last-child {
		margin-left: 0;
		border-radius: var(--hd-radius);
	}
}

/* ==========================================================================
   Manifesto (dark band with eyebrow, split headline and text)
   ========================================================================== */
.hd-manifesto {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: var(--hd-section-y) var(--hd-gutter);
	text-align: center;
	color: var(--hd-on-dark);
	background: var(--hd-dark);
}

.hd-manifesto__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hd-gap-md);
	max-width: 62rem;
}

.hd-manifesto__text {
	max-width: 44rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
}

.hd-manifesto :focus-visible {
	outline-color: var(--hd-on-dark);
}

@media (max-width: 768px) {
	.hd-manifesto {
		min-height: auto;
	}
}

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.hd-page-hero {
	display: flex;
	flex-direction: column;
	gap: var(--hd-gap-md);
	padding: calc(var(--hd-nav-offset) + 1rem) var(--hd-gutter) var(--hd-gap-lg);
}

.hd-page-hero__lead {
	margin: 0;
	max-width: 42rem;
}

/* ==========================================================================
   Carousel (scroll-snap, drag with the mouse, buttons >= 48 px)
   ========================================================================== */
.hd-carousel {
	padding: var(--hd-section-y) 0;
}

.hd-carousel__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hd-gap-md);
	padding: 0 var(--hd-gutter);
	margin-bottom: var(--hd-gap-lg);
	text-align: center;
}

.hd-carousel__track {
	display: flex;
	gap: var(--hd-gap-sm);
	margin: 0;
	padding: 0 var(--hd-gutter) 0.5rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--hd-gutter);
	scrollbar-width: none;
	cursor: grab;
}

.hd-carousel__track::-webkit-scrollbar {
	display: none;
}

.hd-carousel__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.hd-carousel__item {
	flex: 0 0 clamp(16rem, 24vw, 26rem);
	scroll-snap-align: start;
}

.hd-carousel__controls[hidden] {
	display: none;
}

.hd-carousel__controls {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var(--hd-gap-md);
}

@media (max-width: 768px) {
	.hd-carousel__item {
		flex-basis: 80vw;
	}
}

/* Testimonial and product cards used inside carousels and grids */
.hd-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
	padding: clamp(1.25rem, 2.5vw, 2rem);
	background: var(--hd-surface);
	-webkit-backdrop-filter: var(--hd-blur);
	backdrop-filter: var(--hd-blur);
	border: var(--hd-border);
	border-radius: var(--hd-radius);
}

.hd-card__avatar {
	width: 4rem;
	height: 4rem;
	object-fit: cover;
	border-radius: 50%;
}

.hd-card__quote {
	margin: 0;
	font-size: var(--hd-fs-body);
}

.hd-card__author {
	margin-top: auto;
}

.hd-card__name {
	display: block;
	font-weight: 700;
}

.hd-card__role {
	color: var(--hd-ink-muted);
	font-size: var(--hd-fs-small);
}

.hd-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1rem;
	background: var(--hd-surface);
	-webkit-backdrop-filter: var(--hd-blur);
	backdrop-filter: var(--hd-blur);
	border: var(--hd-border);
	border-radius: var(--hd-radius);
}

.hd-product-card__media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--hd-surface-solid);
	border-radius: calc(var(--hd-radius) - 2px);
}

.hd-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var(--hd-dur-med) var(--hd-ease-out);
}

.hd-product-card:hover .hd-product-card__media img {
	transform: scale(1.04);
}

.hd-product-card__line {
	margin-top: 1rem;
	color: var(--hd-accent-text);
}

.hd-product-card__title {
	margin: 0.25rem 0 0.5rem;
}

.hd-product-card__title a {
	color: inherit;
	text-decoration: none;
}

.hd-product-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.hd-product-card__price {
	margin-top: auto;
	font-family: var(--hd-font-body);
	font-size: 1.125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.hd-product-card__price del {
	color: var(--hd-ink-muted);
	font-weight: 400;
}

.hd-product-card__price ins {
	text-decoration: none;
}

.hd-product-card__badge {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	z-index: 1;
	padding: 0.25rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hd-on-dark);
	background: var(--hd-ink);
	border-radius: 6px;
}

.hd-product-card__cta {
	position: relative;
	z-index: 2;
	margin-top: 0.75rem;
}

/* ==========================================================================
   Marquee (infinite image band; pause button, pause on hover/focus)
   ========================================================================== */
.hd-marquee {
	position: relative;
	padding: var(--hd-section-y) 0;
}

.hd-marquee__text,
.hd-carousel__text {
	max-width: 40rem;
	font-size: var(--hd-fs-body);
	text-align: center;
}

/* Carousel in ticker mode (home reviews): the cards ride the marquee band, slower so they can be read. */
.hd-carousel--ticker .hd-marquee__track {
	align-items: stretch;
	padding: 2px 0;
	animation-duration: 140s;
}

.hd-carousel--ticker .hd-carousel__item {
	flex: 0 0 clamp(17rem, 26vw, 24rem);
	scroll-snap-align: none;
}

.hd-marquee__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.hd-marquee__track {
	display: flex;
	gap: var(--hd-gap-sm);
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: hd-marquee 70s linear infinite;
}

.hd-marquee:hover .hd-marquee__track,
.hd-marquee:focus-within .hd-marquee__track,
.hd-marquee.is-paused .hd-marquee__track {
	animation-play-state: paused;
}

.hd-marquee__item {
	flex: 0 0 clamp(14rem, 25vw, 28rem);
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--hd-radius);
}

.hd-marquee__item {
	position: relative;
}

.hd-marquee__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Instagram corner link (bottom-left, 48 px target) */
.hd-marquee__ig {
	position: absolute;
	bottom: 0.75rem;
	left: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hd-tap);
	height: var(--hd-tap);
	font-size: 1.25rem;
	color: var(--hd-on-dark);
	background: rgba(27, 27, 27, 0.78);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border-radius: var(--hd-radius);
	transition: color var(--hd-dur-fast) ease, background-color var(--hd-dur-fast) ease;
}

.hd-marquee__ig:hover,
.hd-marquee__ig:focus-visible {
	color: var(--hd-accent-ink);
	background: var(--hd-accent);
}

.hd-marquee__ig:focus-visible {
	outline-color: var(--hd-on-dark);
}

.hd-marquee__toggle {
	margin: var(--hd-gap-md) auto 0;
	display: flex;
}

.hd-marquee__toggle [data-hd-icon-play] {
	display: none;
}

.hd-marquee.is-paused .hd-marquee__toggle [data-hd-icon-play] {
	display: inline-block;
}

.hd-marquee.is-paused .hd-marquee__toggle [data-hd-icon-pause] {
	display: none;
}

@keyframes hd-marquee {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hd-marquee__viewport {
		overflow-x: auto;
	}

	.hd-marquee__track {
		animation: none;
	}

	.hd-marquee__toggle {
		display: none;
	}

	/* Still band: the loop copy would only repeat the cards. */
	.hd-carousel--ticker [data-hd-ticker-copy] {
		display: none;
	}
}

@media (max-width: 768px) {
	.hd-marquee__item {
		flex-basis: 70vw;
	}
}

/* ==========================================================================
   FAQ (exclusive accordion built with Bootstrap Collapse)
   ========================================================================== */
.hd-faq {
	display: flex;
	flex-direction: column;
	gap: var(--hd-gap-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hd-faq__item {
	background: var(--hd-surface);
	-webkit-backdrop-filter: var(--hd-blur);
	backdrop-filter: var(--hd-blur);
	border: var(--hd-border);
	border-radius: var(--hd-radius);
}

.hd-faq__question {
	margin: 0;
}

.hd-faq__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 0.75rem 0.75rem 0.75rem clamp(1.25rem, 2.5vw, 2.5rem);
	font-family: var(--hd-font-display);
	font-size: var(--hd-fs-title-sm);
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
	text-transform: uppercase;
	color: var(--hd-ink);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.hd-faq__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--hd-tap);
	height: var(--hd-tap);
	color: var(--hd-on-dark);
	background: var(--hd-ink);
	border-radius: var(--hd-radius);
	transition: transform var(--hd-dur-med) ease, color var(--hd-dur-fast) ease;
}

.hd-faq__button:hover .hd-faq__icon,
.hd-faq__button:focus-visible .hd-faq__icon {
	color: var(--hd-accent);
}

.hd-faq__button[aria-expanded="true"] .hd-faq__icon {
	transform: rotate(90deg);
}

.hd-faq__answer {
	padding: 0 clamp(1.25rem, 2.5vw, 2.5rem) 1.25rem;
	max-width: 52rem;
}

.hd-faq__answer > :last-child {
	margin-bottom: 0;
}

.hd-faq .collapsing {
	transition: height var(--hd-dur-med) ease;
}

/* ==========================================================================
   Forms (shared by contact, account, checkout)
   ========================================================================== */
.hd-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
}

.hd-field__label {
	font-size: var(--hd-fs-label);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hd-input {
	width: 100%;
	min-height: var(--hd-tap);
	padding: 0.65rem 1rem;
	font: inherit;
	color: var(--hd-ink);
	background: var(--hd-surface-solid);
	border: var(--hd-border);
	border-radius: var(--hd-radius);
}

textarea.hd-input {
	min-height: 9rem;
	resize: vertical;
}

.hd-input::placeholder,
.woocommerce input::placeholder,
.woocommerce textarea::placeholder {
	color: var(--hd-ink-muted);
	opacity: 1;
}

.hd-input:focus-visible {
	outline: 2px solid var(--hd-ink);
	outline-offset: 2px;
}

.hd-input[aria-invalid="true"] {
	border-color: var(--hd-danger);
	box-shadow: inset 0 0 0 1px var(--hd-danger);
}

.hd-field__error {
	color: var(--hd-danger);
	font-size: var(--hd-fs-small);
	font-weight: 600;
}

.hd-field__help {
	color: var(--hd-ink-muted);
	font-size: var(--hd-fs-small);
}

.hd-check {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	min-height: var(--hd-tap);
}

.hd-check input {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.15rem;
	accent-color: var(--hd-ink);
}

.hd-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hd-alert {
	padding: 1rem 1.25rem;
	font-weight: 600;
	border: 1px solid currentcolor;
	border-radius: var(--hd-radius);
}

.hd-alert--success {
	color: var(--hd-success);
	background: color-mix(in srgb, var(--hd-success) 8%, transparent);
}

.hd-alert--error {
	color: var(--hd-danger);
	background: rgba(179, 38, 30, 0.08);
}

/* ==========================================================================
   Prose (legal pages, blog posts, long text)
   ========================================================================== */
.hd-prose {
	max-width: 48rem;
}

.hd-prose h2 {
	margin: 2.5rem 0 1rem;
	font-family: var(--hd-font-display);
	font-size: var(--hd-fs-subheadline);
	line-height: 1.05;
	text-transform: uppercase;
}

.hd-prose h3 {
	margin: 2rem 0 0.75rem;
	font-family: var(--hd-font-display);
	font-size: var(--hd-fs-title-sm);
	text-transform: uppercase;
}

.hd-prose a {
	color: var(--hd-accent-text);
	text-underline-offset: 0.2em;
}

.hd-prose a:hover {
	color: var(--hd-ink);
}

.hd-prose img {
	border-radius: var(--hd-radius);
}

.hd-prose ul,
.hd-prose ol {
	padding-left: 1.25rem;
}

/* ==========================================================================
   Brand drop (logo mark) used as a subtle watermark and list bullet
   ========================================================================== */
.hd-page-hero,
.hd-manifesto,
.hd-footer__info {
	position: relative;
}

.hd-page-hero {
	overflow: clip;
}

.hd-page-hero > *,
.hd-footer__info > * {
	position: relative;
	z-index: 1;
}

.hd-page-hero::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(var(--hd-gutter) - 2rem);
	height: min(84%, 27rem);
	aspect-ratio: 485 / 600;
	background: url("../img/gota-hudratt.webp") center / contain no-repeat;
	opacity: 0.09;
	transform: translateY(-50%) rotate(8deg);
	pointer-events: none;
}

.hd-manifesto {
	overflow: hidden;
}

.hd-manifesto::before {
	content: "";
	position: absolute;
	right: -4vw;
	bottom: -8vw;
	width: clamp(14rem, 34vw, 34rem);
	aspect-ratio: 485 / 600;
	background: url("../img/gota-hudratt-blanca.webp") center / contain no-repeat;
	opacity: 0.05;
	transform: rotate(-10deg);
	pointer-events: none;
}

.hd-manifesto__inner {
	position: relative;
	z-index: 1;
}

.hd-footer__info {
	overflow: hidden;
}

.hd-footer__info::after {
	content: "";
	position: absolute;
	right: -1.5rem;
	bottom: -2rem;
	width: clamp(8rem, 15vw, 14rem);
	aspect-ratio: 485 / 600;
	background: url("../img/gota-hudratt.webp") center / contain no-repeat;
	opacity: 0.08;
	transform: rotate(10deg);
	pointer-events: none;
}

.hd-prose ul {
	padding-left: 0;
	list-style: none;
}

.hd-prose ul > li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.4rem;
}

.hd-prose ul > li::before {
	content: "";
	position: absolute;
	top: 0.4em;
	left: 0;
	width: 0.9rem;
	height: 1.1rem;
	background: url("../img/gota-hudratt.webp") center / contain no-repeat;
}

.hd-loader__drop {
	display: block;
	width: clamp(2.5rem, 6vw, 4rem);
	height: auto;
	margin: 0 auto 1rem;
	animation: hd-loader-drop 1.2s ease-in-out infinite alternate;
}

@keyframes hd-loader-drop {
	from {
		transform: translateY(-4px) scale(0.96);
	}

	to {
		transform: translateY(4px) scale(1.04);
	}
}

.hd-offcanvas__logo {
	height: 2.25rem;
	width: auto;
}

@media (max-width: 768px) {
	.hd-page-hero::after {
		top: 1.5rem;
		right: 1rem;
		width: 7rem;
		height: auto;
		transform: rotate(8deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hd-loader__drop {
		animation: none;
	}
}

/* "También lo encuentras en": compact row of retailers (home and "Dónde comprar") */
.hd-also {
	display: flex;
	flex-direction: column;
	gap: var(--hd-gap-md);
}

.hd-also__title {
	margin: 0;
	text-align: center;
}

.hd-also__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--hd-gap-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hd-also__link {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 4.5rem;
	padding: 0.75rem 1.25rem;
	color: var(--hd-ink);
	text-decoration: none;
	transition: background-color var(--hd-dur-fast) ease, color var(--hd-dur-fast) ease;
}

.hd-also__link:hover,
.hd-also__link:focus-visible {
	color: var(--hd-on-dark);
	background: var(--hd-ink);
}

.hd-also__logo {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 2.75rem;
	padding: 0.25rem 0.5rem;
	background: var(--hd-surface-solid);
	border-radius: calc(var(--hd-radius) - 2px);
}

.hd-also__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hd-also__name {
	flex: 1;
	min-width: 0;
	font-weight: 700;
}

/* Flavour band (components/band.php): dark band, outlined flavour name and tube that slide in when it enters the viewport */
.hd-band {
	--hd-band-accent: var(--hd-line-pre);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	justify-content: space-between;
	min-height: clamp(24rem, 36vw, 28rem);
	padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3.5rem);
	overflow: hidden;
	color: var(--hd-on-dark);
	background: var(--hd-dark);
	border-radius: var(--hd-radius);
}

.hd-band--uva {
	--hd-band-accent: var(--hd-seal-tablet);
}

.hd-band__top {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	max-width: 36rem;
}

.hd-band__top .hd-label {
	color: var(--hd-band-accent);
}

.hd-band__title {
	margin: 0;
	font-family: var(--hd-font-display);
	font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
}

.hd-band__word {
	position: absolute;
	left: clamp(1rem, 3.5vw, 2.75rem);
	bottom: -0.05em;
	z-index: 1;
	margin: 0;
	font-family: var(--hd-font-display);
	font-size: clamp(5rem, 17vw, 14.5rem);
	font-weight: 800;
	line-height: 0.9;
	text-transform: uppercase;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 2px rgb(255 255 255 / 0.75);
}

.hd-band__tube {
	position: absolute;
	top: -0.5rem;
	right: clamp(1rem, 9vw, 7.5rem);
	z-index: 1;
	width: auto;
	height: clamp(16rem, 36vw, 29rem);
	transform: rotate(8deg);
	filter: drop-shadow(0 1.5vw 2vw rgba(0, 0, 0, 0.55));
}

.hd-band__link {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 1.25rem;
	align-items: center;
	width: fit-content;
	padding: 0.5rem 1.75rem 0.5rem 0.5rem;
	color: inherit;
	text-decoration: none;
	background: rgb(27 27 27 / 0.86); /* keeps the text readable over the outlined name */
	border-radius: 999px;
}

.hd-band__arrow {
	flex: none;
	aspect-ratio: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	font-size: 1.75rem;
	color: var(--hd-ink);
	background: var(--hd-band-accent);
	border-radius: 50%;
	transition: transform var(--hd-dur-fast) ease;
}

.hd-band__link .hd-label {
	font-size: clamp(1.125rem, 0.9rem + 1vw, 1.75rem);
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--hd-on-dark);
}

.hd-band__link:hover .hd-band__arrow,
.hd-band__link:focus-visible .hd-band__arrow {
	transform: translateX(0.35rem);
}

/* The tube comes in from the left, the name from the right (progressive: needs JS and motion allowed) */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.hd-band[data-hd-reveal="slide"] .hd-band__tube,
	.hd-band[data-hd-reveal="slide"] .hd-band__word {
		opacity: 0;
		transition:
			opacity var(--hd-dur-reveal) var(--hd-ease-out),
			transform 1.4s var(--hd-ease-out);
	}

	.hd-band[data-hd-reveal="slide"] .hd-band__tube {
		transform: translateX(-100vw) rotate(8deg);
	}

	.hd-band[data-hd-reveal="slide"] .hd-band__word {
		transform: translateX(100vw);
	}

	.hd-band[data-hd-reveal="slide"].is-in .hd-band__tube {
		opacity: 1;
		transform: rotate(8deg);
	}

	.hd-band[data-hd-reveal="slide"].is-in .hd-band__word {
		opacity: 1;
		transform: none;
	}
}

/* Optional contents: tiles (mineral tiles or ingredient chips) and text */
.hd-band__tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hd-band__tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 6.5rem;
	min-height: 6.5rem;
	padding: 0.5rem 0.65rem;
	color: var(--hd-ink);
	background: var(--hd-band-accent);
	border-radius: var(--hd-radius);
}

.hd-band__tile-top {
	font-size: 0.75rem;
	font-weight: 700;
}

.hd-band__tile-symbol {
	font-family: var(--hd-font-display);
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
}

.hd-band__tile-name {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hd-band__chip {
	padding: 0.45rem 0.9rem;
	font-size: 0.875rem;
	font-weight: 700;
	background: rgb(255 255 255 / 0.14);
	border-radius: 999px;
}

.hd-band__text {
	max-width: 32rem;
	color: rgb(255 255 255 / 0.85);
}

/* Mirrored band (second of two stacked): text on the right, tube and name on the left, entrances reversed */
.hd-band--flip .hd-band__top {
	align-items: flex-end;
	align-self: flex-end;
	text-align: right;
}

.hd-band--flip .hd-band__tiles {
	justify-content: flex-end;
}

.hd-band--flip .hd-band__word {
	right: clamp(1rem, 3.5vw, 2.75rem);
	left: auto;
}

.hd-band--flip .hd-band__tube {
	right: auto;
	left: clamp(1rem, 9vw, 7.5rem);
	transform: rotate(-8deg);
}

.hd-band--flip .hd-band__link {
	flex-direction: row-reverse;
	align-self: flex-end;
	padding: 0.5rem 0.5rem 0.5rem 1.75rem;
}

.hd-band--flip .hd-band__link:hover .hd-band__arrow,
.hd-band--flip .hd-band__link:focus-visible .hd-band__arrow {
	transform: translateX(-0.35rem);
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.hd-band--flip[data-hd-reveal="slide"] .hd-band__tube {
		transform: translateX(100vw) rotate(-8deg);
	}

	.hd-band--flip[data-hd-reveal="slide"] .hd-band__word {
		transform: translateX(-100vw);
	}

	.hd-band--flip[data-hd-reveal="slide"].is-in .hd-band__tube {
		transform: rotate(-8deg);
	}

	.hd-band--flip[data-hd-reveal="slide"].is-in .hd-band__word {
		transform: none;
	}
}

/* Phones: text on top, tube and name centred in the middle of the band, "Conoce" at the end of the column.
   Same specificity as the desktop and mirrored rules above so the mirror does not leak into phones. */
@media (max-width: 899px) {
	.hd-band {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(15rem, 1fr) auto;
		gap: 1.25rem;
		min-height: 0;
	}

	.hd-band .hd-band__top,
	.hd-band--flip .hd-band__top {
		align-items: flex-start;
		align-self: auto;
		max-width: none;
		text-align: left;
	}

	.hd-band .hd-band__tiles,
	.hd-band--flip .hd-band__tiles {
		justify-content: flex-start;
	}

	.hd-band .hd-band__word,
	.hd-band--flip .hd-band__word,
	.hd-band .hd-band__tube,
	.hd-band--flip .hd-band__tube {
		position: relative;
		inset: auto;
		grid-column: 1;
		grid-row: 2;
		align-self: center;
		justify-self: center;
	}

	.hd-band .hd-band__word,
	.hd-band--flip .hd-band__word {
		z-index: 1;
	}

	/* The name has to fit the band whole: the band is about 80vw wide, so the size depends on the word length */
	.hd-band--manzana .hd-band__word {
		font-size: 11.5vw;
	}

	.hd-band--uva .hd-band__word {
		font-size: min(26vw, 9rem);
	}

	.hd-band .hd-band__tube,
	.hd-band--flip .hd-band__tube {
		z-index: 2;
		height: clamp(14rem, 62vw, 19rem);
	}

	.hd-band .hd-band__link,
	.hd-band--flip .hd-band__link {
		grid-row: 3;
		flex-direction: row;
		align-self: end;
		justify-self: start;
		padding: 0.5rem 1.5rem 0.5rem 0.5rem;
	}
}

/* ==========================================================================
   Ticker: moving ink band with the free-shipping line (home, shop, where to buy)
   ========================================================================== */
.hd-ticker {
	background: var(--hd-ink);
	color: var(--hd-on-dark);
	overflow: hidden;
	padding: 0.85rem 0;
}

.hd-ticker__track {
	display: flex;
	width: max-content;
}

.hd-ticker__group {
	display: flex;
	align-items: center;
	flex: none;
}

.hd-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0 1.4rem;
	font-family: var(--hd-font-display);
	font-size: var(--hd-fs-small);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hd-ticker__icon {
	color: var(--hd-accent);
}

.hd-ticker__dot {
	flex: none;
	width: 0.35rem;
	height: 0.35rem;
	margin-left: 1.4rem;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
}

@media (prefers-reduced-motion: no-preference) {
	.hd-ticker__track {
		animation: hd-ticker-scroll 24s linear infinite;
	}
}

@keyframes hd-ticker-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hd-ticker__track {
		width: 100%;
		justify-content: center;
	}

	.hd-ticker__group[aria-hidden="true"],
	.hd-ticker__group > :not(:first-child) {
		display: none;
	}
}