/* ==========================================================================
   ROCKYOURPET LANDINGREEL DESIGN SYSTEM
   Mobile-First 100dvh Vertical Reel Experience
   Theme: Pure Black (#000000) & RockYourPet Red (#D92F27)
   Typography: Anton (Display) & Oswald (Body)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@300;400;500;600;700&display=swap');

:root {
	/* Tipografías Oficiales RockYourPet */
	--font-display: "Anton", Impact, "Arial Black", sans-serif;
	--font-body: "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Paleta Neutral Dark Total */
	--color-black: #000000;
	--color-white: #ffffff;
	--color-surface-1: #0a0a0a;
	--color-surface-2: #141414;
	--color-surface-3: #1f1f22;
	--color-border-dark: #27272a;
	--color-border-subtle: rgba(255, 255, 255, 0.12);
	--color-grey-dark: #121214;
	--color-grey-mid: #8e8e93;
	--color-grey-light: #d4d4d8;

	/* Acento RockYourPet */
	--color-accent: #D92F27;
	--color-accent-glow: rgba(217, 47, 39, 0.45);
	--color-accent-hover: #b7251e;
	--color-accent-subtle: rgba(217, 47, 39, 0.15);

	/* Transiciones */
	--ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
	--duration-fast: 0.2s;
	--duration-normal: 0.35s;

	/* UI Chrome */
	--header-height: 64px;
	--footer-safe-bottom: 24px;
	--dots-width: 32px;
}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.reel-preloader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background-color: var(--color-black, #000000);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	transition: opacity 0.5s ease, visibility 0.5s ease;
	opacity: 1;
	visibility: visible;
}

.reel-preloader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.reel-preloader__logo {
	width: clamp(140px, 35vw, 210px);
	height: auto;
	animation: rypPulse 1.8s ease-in-out infinite alternate;
}

.reel-preloader__bar {
	width: 140px;
	height: 3px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 3px;
	overflow: hidden;
	position: relative;
}

.reel-preloader__bar-inner {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 40%;
	background: var(--color-accent, #D92F27);
	box-shadow: 0 0 10px var(--color-accent, #D92F27);
	border-radius: 3px;
	animation: rypTrack 1.3s ease-in-out infinite;
}

.reel-preloader__text {
	font-family: var(--font-body, "Oswald", sans-serif);
	font-size: 13px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--color-grey-mid, #8e8e93);
}

@keyframes rypPulse {
	0% {
		transform: scale(0.96);
		filter: drop-shadow(0 0 0 rgba(217, 47, 39, 0));
	}

	100% {
		transform: scale(1.02);
		filter: drop-shadow(0 0 16px rgba(217, 47, 39, 0.5));
	}
}

@keyframes rypTrack {
	0% {
		left: -40%;
		width: 30%;
	}

	50% {
		width: 60%;
	}

	100% {
		left: 100%;
		width: 30%;
	}
}

/* ==========================================================================
   RESET & SETUP GLOBAL
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	height: 100vh;
	height: -webkit-fill-available;
	height: 100dvh;
	overflow: hidden;
	overscroll-behavior: none;
	overscroll-behavior-y: none;
	background-color: var(--color-black);
	color: var(--color-white);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	user-select: none;
	-webkit-user-select: none;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

p {
	margin: 0 0 0.8em;
}

p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   CONTENEDOR EMBLA REEL (VERTICAL 100dvh)
   ========================================================================== */

.reel {
	position: relative;
	width: 100vw;
	height: 100%;
	height: 100vh;
	height: -webkit-fill-available;
	height: 100dvh;
	overflow: hidden;
	overscroll-behavior: none;
	overscroll-behavior-y: none;
	touch-action: none;
	background-color: var(--color-black);
	max-width: 500px;
	margin: 0 auto;
}

.reel__container {
	display: flex;
	flex-direction: column;
	height: 100%;
	touch-action: none;
}

.reel__slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	height: 100vh;
	height: -webkit-fill-available;
	height: 100dvh;
	min-height: 0;
	width: 100%;
	overflow: hidden;
	touch-action: none;
	background-color: var(--color-black);
	color: var(--color-white);
}

/* Marca de paginación opcional en slides con data-page */
.reel__slide[data-page]::after {
	display: none;
	content: attr(data-page);
	position: absolute;
	left: 6vw;
	bottom: 3.5dvh;
	font-family: var(--font-display);
	font-size: clamp(16px, 2vw, 24px);
	letter-spacing: 0.1em;
	color: var(--color-grey-mid);
	opacity: 0.4;
	z-index: 5;
	pointer-events: none;
}

/* ==========================================================================
   CAPAS DE FONDO Y OVERLAYS CINEMATOGRÁFICOS
   ========================================================================== */

.slide-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.opacidad-70 {
	opacity: 0.7;
}

.slide-bg img,
.slide-bg video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.slide-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
			rgba(0, 0, 0, 0.45) 0%,
			rgba(0, 0, 0, 0.65) 45%,
			rgba(0, 0, 0, 0.95) 100%);
	z-index: 1;
}

.slide-overlay--darker {
	background: linear-gradient(180deg,
			rgba(0, 0, 0, 0.7) 0%,
			rgba(0, 0, 0, 0.85) 50%,
			#000000 100%);
}

.slide-overlay--radial {
	background: radial-gradient(circle at center 30%, rgba(217, 47, 39, 0.08) 0%, rgba(0, 0, 0, 0.85) 65%, #000000 100%);
}

/* ==========================================================================
   COMPONENTES GLOBALES Y JERARQUÍA TIPOGRÁFICA
   ========================================================================== */

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

.text-bold {
	font-weight: 700;
}

.text-white {
	color: var(--color-white);
}

.text-muted {
	color: var(--color-grey-mid);
}

.eyebrow-box {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25em;
	padding: 0.6em 1em;
	background: rgba(20, 20, 20, 0.8);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--color-border-subtle);
	border-left: 3px solid var(--color-accent);
	border-radius: 2px;
	width: fit-content;
}

.eyebrow {
	font-family: var(--font-body);
	font-size: clamp(11px, 1.1vw, 13px);
	letter-spacing: 0.25em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--color-accent);
}

.chip-title {
	font-family: var(--font-display);
	font-size: clamp(42px, 3.2vw, 36px);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.1;
	margin: 0;
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	padding: 0.45em 1.2em;
	font-family: var(--font-body);
	font-size: clamp(12px, 1.1vw, 14px);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-grey-light);
	background: rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}

.pill--accent {
	border-color: rgba(217, 47, 39, 0.5);
	background: var(--color-accent-subtle);
	color: #ffffff;
}

.pill:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: var(--color-white);
	color: #ffffff;
}

.highlight-box {
	margin-top: 1.5vh;
	padding: 1em 1.2em;
	background: rgba(18, 18, 20, 0.85);
	border-left: 3px solid var(--color-accent);
	border-radius: 2px;
	font-family: var(--font-body);
	font-size: clamp(16px, 1.05vw, 15px);
	letter-spacing: 0.04em;
	color: var(--color-white);
	text-transform: uppercase;
	max-width: 60%;
}

.highlight-box2 {
	margin-top: 1.0vh;
	padding: 1em 1.2em;
	background: rgba(0, 0, 0, 0.8);
	border-left: 3px solid var(--color-accent);
	border-radius: 2px;
	font-family: var(--font-body);
	font-size: clamp(20px, 1.05vw, 15px);
	letter-spacing: 0.04em;
	color: var(--color-grey-light);
	text-transform: uppercase;
	/* max-height: 15vh; */
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 69%;
}

.highlight-box3 {
	margin-top: 1.0vh;
	padding: 1em 1.2em;
	background: rgba(0, 0, 0, 0.8);
	border-left: 3px solid var(--color-accent);
	border-radius: 2px;
	font-family: var(--font-body);
	font-size: clamp(20px, 1.05vw, 15px);
	letter-spacing: 0.04em;
	color: var(--color-grey-light);
	text-transform: uppercase;

	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 80%;

}

.highlight-box4 {
	margin-top: 1.0vh;
	padding: 1em 1.2em;
	background: rgba(0, 0, 0, 0.8);
	border-left: 3px solid var(--color-accent);
	border-radius: 2px;
	font-family: var(--font-body);
	font-size: clamp(20px, 1.05vw, 15px);
	letter-spacing: 0.04em;
	color: var(--color-grey-light);
	text-transform: uppercase;

	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 60%;
}

.highlight-box2 img {
	width: auto;
	max-height: 13vh;

}

/* ==========================================================================
   SHOT 01: ACTITUD (HERO DE ALTO IMPACTO)
   ========================================================================== */

.slide-shot01 {
	background-color: #000000;
	cursor: pointer;
}

/* Degradado en el pie desde height 80% a 100% de transparente a negro para mejorar la legibilidad del logo */
.slide-shot01::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 70%;
	bottom: 0;
	height: 30%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 50%, #000000 100%);
	pointer-events: none;
	z-index: 1;
}

.slide-shot01__content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	padding: 10%;
}

.slide-shot01__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35em;
	margin-top: 2vh;
}

.slide-shot01__line1 {
	font-family: var(--font-display);
	font-size: clamp(36px, 5vw, 36px);
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--color-white);
	margin: 0;
	text-transform: uppercase;
	font-weight: 500;
}

.slide-shot01__line2 {
	font-family: var(--font-display);
	font-size: clamp(65px, 6.8vw, 65px);
	line-height: 1;

	color: var(--color-accent);
	margin: 0;
	text-transform: uppercase;
}

.slide-shot01__line3 {
	font-family: var(--font-display);
	font-size: clamp(25px, 5vw, 25px);
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--color-white);
	margin: 0;
	text-transform: uppercase;
	font-weight: 500;
}

.slide-shot01__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2vh;
	margin-bottom: 0;
	width: 100%;
}

.slide-shot01__brand-logo {
	width: 140px;
	width: clamp(120px, 30vw, 160px);
	max-width: 160px;
	height: auto;
	object-fit: contain;
}

.slide-shot01__amazon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--font-body);
	font-size: clamp(20px, 1.4vw, 17px);
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 1);
}

.slide-shot01__amazon img {
	width: 98px;
	margin-top: 15px;
}

.slide-shot01__amazon-logo {
	height: 1.3em;
	width: 10vw;
	vertical-align: middle;
	fill: currentColor;
}

/* ==========================================================================
   ARQUETIPO QUOTE / MANIFIESTO (Shots 02, 09, 10, 12)
   ========================================================================== */

.slide-quote__container {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 10vh 8vw;
	gap: 3.5vh;
	max-width: 900px;
	margin: 0 auto;
}

.slide-quote__title {
	font-family: var(--font-display);
	font-size: clamp(28px, 5.2vw, 62px);
	line-height: 1.15;
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 0.02em;
}

.slide-quote__title span.block {
	display: block;
}

/* ==========================================================================
   ARQUETIPO HERO ESTÁNDAR (Shots 03, 04, 06, 08)
   ========================================================================== */

.slide-hero__container {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 5%;
	gap: 20px;
	max-width: 860px;
	margin: 0 auto;
}

.slide-hero__title {
	font-family: var(--font-display);
	font-size: clamp(25px, 25px, 56px);
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
	font-weight: 400;
}

.slide-hero__body {
	font-family: var(--font-body);
	font-size: clamp(21px, 1.4vw, 20px);
	color: var(--color-white);
	line-height: 1.5;
	max-width: 580px;
}

.product-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 1vh 0;
	max-height: 25vh;
}

.product-preview img {
	max-height: 24vh;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.7));
}

/* ==========================================================================
   ARQUETIPO CHECKLIST / ESPECIFICACIONES (Shots 05, 07)
   ========================================================================== */

.slide-check__container {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 5%;
	gap: 2.8vh;
	max-width: 860px;
	margin: 5vh auto;
}

.check-list {
	display: flex;
	flex-direction: column;


	max-height: 48vh;
	padding-right: 0.5vw;
}

.check-list li {
	display: flex;
	align-items: center;
	gap: 1.1em;
	font-family: var(--font-body);
	font-size: clamp(15px, 1.4vw, 20px);
	font-weight: 400;
	letter-spacing: 0px;
	color: #ffffff;
	background: rgba(18, 18, 20, 0.65);
	padding: 0.65em 1.2em;
	border-radius: 6px;
	border: none;
}

.check-icon {
	flex-shrink: 0;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--color-accent);
	color: #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: sans-serif;
	font-weight: 900;
	font-size: 13px;
}

/* ==========================================================================
   ARQUETIPO SERVICES / COLECCIÓN (Shot 11)
   ========================================================================== */

.slide-collection__container {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 10vh 6vw 11vh;
	gap: 2.5vh;
	max-width: 900px;
	margin: 0 auto;
}

.collection-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2vw;
	overflow-y: auto;
	max-height: 52vh;
}

.collection-card {
	display: flex;
	flex-direction: column;
	background: rgba(18, 18, 20, 0.85);
	border: 1px solid var(--color-border-subtle);
	border-radius: 8px;
	padding: 2.2vh 1.8vw;
	gap: 1.2vh;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: transform var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.collection-card:hover {
	transform: translateY(-4px);
	border-color: var(--color-accent);
	box-shadow: 0 10px 30px var(--color-accent-subtle);
}

.collection-card__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2em;
	height: 2.2em;
	border-radius: 50%;
	background: var(--color-accent);
	color: #000000;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
}

.collection-card__thumb {
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.collection-card__thumb img {
	max-height: 90px;
	width: auto;
	object-fit: contain;
}

.collection-card__content h3 {
	font-family: var(--font-display);
	font-size: clamp(16px, 1.5vw, 22px);
	text-transform: uppercase;
	margin: 0 0 0.3em;
	letter-spacing: 0.03em;
	color: #ffffff;
}

.collection-card__content p {
	font-family: var(--font-body);
	font-size: clamp(13px, 1.1vw, 15px);
	color: var(--color-grey-light);
	line-height: 1.4;
	margin: 0;
}

/* ==========================================================================
   ARQUETIPO CONTACT / CTA FINAL (Shot 13)
   ========================================================================== */

.slide-contact__container {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 5%;
	gap: 20px;
	max-width: 860px;
	margin: 0 auto;
}

.slide-contact__brand {
	max-width: clamp(180px, 28vw, 260px);
	margin-bottom: 0.5vh;
}

.slide-contact__title {
	font-family: var(--font-display);
	font-size: clamp(64px, 5.5vw, 64px);
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0;
	/* letter-spacing: 0.02em; */
	font-weight: 100;
}

.slide-contact__copy {
	font-family: var(--font-body);
	font-size: clamp(16px, 1.6vw, 22px);
	color: var(--color-grey-light);
	line-height: 1.4;
	max-width: 46ch;
	margin: 0;
}

.cta-button-main {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.8em;
	background: var(--color-accent);
	color: #ffffff;
	font-family: var(--font-display);
	font-size: clamp(16px, 1.8vw, 22px);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.85em 2.4em;
	border-radius: 999px;
	box-shadow: 0 6px 30px var(--color-accent-glow);
	transition: transform var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
	margin-top: 1vh;
}

.cta-button-main:hover {
	background: var(--color-accent-hover);
	transform: scale(1.04);
	box-shadow: 0 8px 36px var(--color-accent-glow);
}

/* ==========================================================================
   UI CHROME: HEADER, FOOTER Y DOTS LATERALES
   ========================================================================== */

/* Header Fijo */
.reel-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0.5vh 6vw;
	padding-top: max(0.5vh, env(safe-area-inset-top));
	z-index: 990;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	pointer-events: none;
	transition: opacity var(--duration-normal), transform var(--duration-normal);
}

.reel-header a {
	pointer-events: auto;
}

.reel-header__brand {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.reel-header__brand img {
	height: 48px;
	height: 8vh;
	height: 8dvh;
	max-height: 56px;
	width: auto;
	object-fit: contain;
}

.reel-header__text {
	font-family: var(--font-display);
	font-size: 20px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #ffffff;
}

/* Footer CTA Fijo */
.reel-footer {
	position: fixed;
	right: 0;
	bottom: 0;
	margin-bottom: var(--footer-safe-bottom);
	margin-bottom: max(var(--footer-safe-bottom), env(safe-area-inset-bottom));
	z-index: 992;
	pointer-events: auto;
	transition: opacity var(--duration-normal), transform var(--duration-normal);
}

.reel-footer__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	background: transparent;
	color: #ffffff;
	font-family: var(--font-display);
	font-size: clamp(13px, 1vw, 15px);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.8em 1.8em;

	transition: transform var(--duration-fast), background var(--duration-fast);
	max-width: 26vw;
}

.reel-footer__btn img {
	max-width: 150px;
}

.reel-footer__btn:hover {
	background: transparent;
	transform: translateX(-4px);
}

/* Dots de Navegación Vertical con Barra de Progreso (Historias) */
.reel-dots,
.reel-dots.is-dark-theme {
	position: fixed;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);

	height: 40vh;
	height: 40dvh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	z-index: 995;
	pointer-events: none;
}

.reel-dot {
	position: relative;
	width: 6px;
	height: 52px;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	border-radius: 99px;
	pointer-events: auto;
	transition: width var(--duration-fast), height var(--duration-fast);
}

.reel-dot::before {
	content: '';
	position: absolute;
	top: -6px;
	bottom: -6px;
	left: -12px;
	right: -8px;
}

/* Barra base contenedora con máscara de redondeo */
.reel-dot__bar {
	position: absolute;
	inset: 0;
	border-radius: 99px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.35);
	pointer-events: none;
	transition: background var(--duration-fast), box-shadow var(--duration-fast);
}

.reel-dots.is-dark-theme .reel-dot__bar {
	background: rgba(255, 255, 255, 0.35);
}

.reel-dots.is-dark-theme .reel-dot:hover .reel-dot__bar {
	background: rgba(255, 255, 255, 0.7);
}

.reel-dots.is-light-theme .reel-dot__bar {
	background: rgba(0, 0, 0, 0.25);
}

.reel-dots.is-light-theme .reel-dot:hover .reel-dot__bar {
	background: rgba(0, 0, 0, 0.6);
}

/* Relleno de progreso rojo (Instagram Story style) */
.reel-dot__fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-accent, #D92F27);
	transform-origin: top center;
	transform: scaleY(0);
	border-radius: 99px;
	pointer-events: none;
	will-change: transform;
}

/* Slide activa */
.reel-dot.is-selected,
.reel-dots.is-dark-theme .reel-dot.is-selected {
	height: 52px;
	width: 8px;
}

.reel-dot.is-selected .reel-dot__bar {
	box-shadow: 0 0 10px var(--color-accent-glow);
}

/* Slides visitadas: permanecen completamente en rojo */
.reel-dot.is-visited .reel-dot__fill {
	transform: scaleY(1);
}

.reel-dot__label {
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: #111111;
	border: 1px solid var(--color-border-dark);
	color: var(--color-white);
	padding: 4px 10px;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-fast);
}

.reel-dot:hover .reel-dot__label {
	opacity: 1;
}

/* ==========================================================================
   ADAPTACIÓN RESPONSIVE: MÓVIL (< 768px)
   ========================================================================== */

@media screen and (max-width: 767px) {


	.slide-shot01__content {
		position: relative;
		z-index: 2;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		padding: 5vh 5vw 6vh;
	}

	.slide-check__container {
		position: relative;
		z-index: 2;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding: 10vh 7vw 11vh;
		gap: 2.8vh;
		max-width: 860px;
		margin: 5vh auto;
	}

	.slide-quote__container,
	.slide-hero__container,
	.slide-check__container,
	.slide-collection__container,
	.slide-contact__container {
		padding: 10vh 6vw 4vh;
		gap: 1.2vh;
	}

	.slide-shot01__brand-logo {
		width: 120px;
		width: clamp(100px, 26vw, 135px);
		max-width: 135px;
		height: auto;
		object-fit: contain;
	}

	.slide-contact__title {
		font-family: var(--font-display);
		font-size: clamp(35px, 5.5vw, 64px);
		line-height: 1.1;
		text-transform: uppercase;
		margin: 0;
		/* letter-spacing: 0.02em; */
		font-weight: 100;
	}

	.collection-grid {
		grid-template-columns: 1fr;
		gap: 1.5vh;
		max-height: 54vh;
	}

	.collection-card {
		padding: 1.5vh 4vw;
		flex-direction: row;
		align-items: center;
	}

	.collection-card__thumb {
		display: none;
	}

	.check-list {
		max-height: 52vh;
	}

	.check-list li {
		padding: 2px 2px;
		font-size: 18px;

	}

	.slide-hero__container {
		position: relative;
		z-index: 2;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding: 10vh 7vw 11vh;
		gap: 3vh;
		max-width: 860px;
		margin: 0 auto;
	}

	.reel-dots,
	.reel-dots.is-dark-theme {
		right: 6px;

		height: 40vh;
		height: 40dvh;
	}

	.reel-dot {
		width: 4px;
		height: 48px;
		height: 7vh;
		height: 7dvh;
	}

	.reel-dot.is-selected,
	.reel-dots.is-dark-theme .reel-dot.is-selected {
		height: 48px;
		height: 7vh;
		height: 7dvh;
		width: 6px;
	}

	.reel-dot__label {
		display: none;
	}

	.reel-footer {
		margin-bottom: max(16px, env(safe-area-inset-bottom));
	}

	.reel-footer__btn {
		padding: 0.7em 1.3em;
		font-size: 12px;
	}

	.reel-footer__btn img {
		width: 75px
	}
}

/* ==========================================================================
   ADAPTACIÓN RESPONSIVE: TABLET / ESCRITORIO WIDESCREEN
   ========================================================================== */

@media screen and (min-width: 1200px) {

	.slide-quote__container,
	.slide-hero__container,
	.slide-check__container,
	.slide-collection__container,
	.slide-contact__container {
		max-width: 960px;
	}
}