/* Home (MOCKUP-1) */

.hero-banner {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-block: var(--space-5);
	min-height: 360px;
	display: flex;
	align-items: center;
	background: #111;
}
.hero-banner picture { display: block; }
.hero-banner img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
}
.hero-banner__content {
	position: relative;
	z-index: 1;
	padding: var(--space-6);
	max-width: 520px;
}
.hero-banner__title {
	font-size: clamp(1.8rem, 4vw, 3rem);
	color: var(--color-accent);
	margin: 0 0 var(--space-4);
	line-height: 1.1;
}

/* La franja de promos (.promo-strip) se movió a base.css: el mega-menú del
   header (global, todas las páginas) también la usa, y home.css solo carga
   en la home/landing de categoría — ver assets/css/base.css. */

.home-section { padding-block: var(--space-5); }
.home-section--bestsellers { padding-top: 0; }
.home-section__title {
	font-size: 1.3rem;
	text-transform: uppercase;
	margin-bottom: var(--space-4);
	color: var(--color-text);
}

/* Los estilos base de .brand-grid/.brand-grid__item se movieron a base.css:
   el mega-menú del header (global, todas las páginas) también usa esta
   grilla, y home.css solo carga en la home/landing de categoría — ver
   assets/css/base.css. */

/* ---- Landing de categoría (MOCKUP-2): banner + grid de marcas lado a lado ---- */
.category-hero {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-glow-strong);
	overflow: hidden;
	background: #111;
	margin-block: var(--space-5);
}
@media (min-width: 1024px) {
	.category-hero { flex-direction: row; align-items: stretch; }
}

.category-hero__visual {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}
@media (min-width: 1024px) {
	.category-hero__visual { flex: 0 0 38%; min-height: 460px; }
}
.category-hero__visual img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
}
.category-hero__content {
	position: relative;
	z-index: 1;
	padding: var(--space-6);
}
.category-hero__title {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.05;
	margin: 0 0 var(--space-4);
}

.category-hero__brands {
	flex: 1;
	padding: var(--space-5);
	border-top: 1px solid var(--color-border-soft);
}
@media (min-width: 1024px) {
	.category-hero__brands { border-top: 0; border-left: 1px solid var(--color-border-soft); }
}

.brand-grid--in-hero { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
	.brand-grid--in-hero { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.brand-grid--in-hero { grid-template-columns: repeat(4, 1fr); }
}
.brand-grid--in-hero .brand-grid__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-2);
	min-height: 96px;
	padding: var(--space-4);
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-md);
}
.brand-grid--in-hero .brand-grid__item img { max-height: 28px; margin-inline: 0; }
.brand-grid--in-hero .brand-grid__fallback { font-weight: 700; }
.brand-grid--in-hero .brand-grid__name {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-text);
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.brand-grid--in-hero .brand-grid__arrow {
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-3);
	color: var(--color-accent);
	transition: transform var(--transition-smooth);
}
.brand-grid--in-hero .brand-grid__item:hover .brand-grid__arrow { transform: translateX(4px); }

/* ==========================================================================
   Carrusel liviano (productos destacados / banners rotativos).
   Nativo: CSS scroll-snap + JS mínimo para flechas y autoplay. Sin librerías.
   ========================================================================== */
.carousel { position: relative; }
.carousel__track {
	display: flex;
	gap: var(--space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: var(--space-2);
	scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 220px;
}
@media (min-width: 640px) {
	.carousel__track > * { width: 260px; }
}
.carousel__nav {
	display: none;
}
@media (min-width: 1024px) {
	.carousel__nav {
		display: flex;
		position: absolute;
		top: 50%;
		left: 0; right: 0;
		transform: translateY(-50%);
		justify-content: space-between;
		pointer-events: none;
		padding-inline: -18px;
	}
	.carousel__nav button {
		pointer-events: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		padding: 0;
		width: 44px; height: 44px;
		border-radius: 50%;
		background: var(--color-bg-elevated);
		border: 1px solid var(--color-border);
		color: var(--color-accent);
		font-size: 1.2rem;
		transform: translateX(-50%);
	}
	.carousel__nav button:last-child { transform: translateX(50%); margin-left: auto; }
}

/* Carrusel de fotos del local (minimalista: solo imágenes redondeadas, sin
   título/texto encima). Cinta continua que se mueve sola (animación CSS,
   la lista está duplicada en el PHP para que el loop no se corte); al
   pasar el mouse por una foto, toda la cinta se frena y esa foto se agranda. */
.store-gallery { overflow: hidden; padding-block: var(--space-3); }
.store-gallery__track {
	display: flex;
	gap: var(--space-4);
	width: max-content;
	animation: tienda365-gallery-scroll 40s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.store-gallery__track { animation: none; }
}
@keyframes tienda365-gallery-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.store-gallery__item {
	flex: 0 0 auto;
	width: 150px;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--transition-smooth);
}
@media (min-width: 640px) {
	.store-gallery__item { width: 210px; }
}
@media (min-width: 1024px) {
	.store-gallery__item { width: 260px; }
}
.store-gallery__item:hover {
	transform: scale(1.12);
	z-index: 2;
	position: relative;
}
.store-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Secciones de productos configurables de la home (Más vendidos,
   Productos seleccionados, Categoría destacada): el admin elige cuántas
   columnas/cards por vista — 3, 4 o 5 — ver Personalizar → Secciones de
   productos (Home). Solo a partir de escritorio; en celular/tablet se
   mantiene el ajuste automático de siempre. ---- */
@media (min-width: 1024px) {
	.products-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.products-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
	.products-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }

	.products-carousel--cols-3 .carousel__track > * { width: calc((100% - 2 * var(--space-5)) / 3); }
	.products-carousel--cols-4 .carousel__track > * { width: calc((100% - 3 * var(--space-5)) / 4); }
	.products-carousel--cols-5 .carousel__track > * { width: calc((100% - 4 * var(--space-5)) / 5); }
}

/* ---- Módulo de flyers internos — sección propia entre "Más vendidos" y
   "Productos seleccionados" (o justo después de esta última), NO adentro
   del carrusel/cuadrícula de productos (ver Personalizar → Secciones de
   productos (Home) y front-page.php). "1" = un banner ancho. "4" = hasta
   4 juntos en Masonry (columnas de alturas libres, tipo Pinterest, no una
   grilla pareja — cada imagen conserva su propia proporción). ---- */
.flyer-module__item {
	display: block;
	border-radius: var(--radius-md);
	overflow: hidden;
}
.flyer-module__item a { display: block; }
.flyer-module__item img { display: block; width: 100%; height: auto; }

.flyer-module--1 .flyer-module__item { aspect-ratio: 16 / 9; }
.flyer-module--1 .flyer-module__item img { height: 100%; object-fit: cover; }
@media (min-width: 768px) {
	.flyer-module--1 .flyer-module__item { aspect-ratio: 21 / 6; }
}

.flyer-module--4 {
	column-count: 2;
	column-gap: var(--space-3);
}
@media (min-width: 640px) {
	.flyer-module--4 { column-count: 4; }
}
.flyer-module--4 .flyer-module__item {
	break-inside: avoid;
	margin-bottom: var(--space-3);
}

/* Variante "misma altura" (checkbox en Personalizar): en vez de Masonry,
   los 4 quedan en una fila con la misma altura, recortados a lo que haga
   falta (object-fit: cover) — más prolijo/parejo, a cambio de perder la
   proporción original de cada imagen. */
.flyer-module--equal-height {
	column-count: initial;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}
.flyer-module--equal-height .flyer-module__item {
	break-inside: auto;
	margin-bottom: 0;
	flex: 1 1 220px;
	height: 220px;
}
.flyer-module--equal-height .flyer-module__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Franja de banners rotativos (full-bleed, 1 por vista) */
.banner-strip .carousel__track > * {
	width: 100%;
	scroll-snap-align: center;
}
.banner-strip__slide {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	min-height: 220px;
	display: flex;
	align-items: center;
	background: #111;
}
.banner-strip__slide img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
}
.banner-strip__content {
	position: relative;
	z-index: 1;
	padding: var(--space-5);
}
.banner-strip__content h3 { color: var(--color-accent); margin: 0 0 var(--space-2); font-size: 1.3rem; }
.banner-strip__dots {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
}
.banner-strip__dots button {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--color-border-soft);
	border: 0;
	padding: 0;
}
.banner-strip__dots button.is-active { background: var(--color-accent); }

/* Banner secundario fijo */
.secondary-banner {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	min-height: 200px;
	display: flex;
	align-items: center;
	background: #111;
}
.secondary-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.secondary-banner__content { position: relative; z-index: 1; padding: var(--space-5); max-width: 480px; }
.secondary-banner__content h3 { color: var(--color-accent); font-size: 1.4rem; margin: 0 0 var(--space-2); }

/* ---- Popup promocional al entrar ---- */
.entry-popup-overlay {
	position: fixed; inset: 0;
	background: rgba(0,0,0,0.75);
	z-index: 90;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
}
.entry-popup-overlay.is-open { display: flex; }
.entry-popup {
	position: relative;
	max-width: 480px;
	width: 100%;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-bg-elevated);
}
.entry-popup img { width: 100%; display: block; }
.entry-popup__content { padding: var(--space-5); text-align: center; }
.entry-popup__content h3 { color: var(--color-accent); margin: 0 0 var(--space-2); }
.entry-popup__close {
	position: absolute;
	top: var(--space-2); right: var(--space-2);
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(0,0,0,0.6);
	color: #fff;
	border: 0;
	font-size: 1.2rem;
	z-index: 2;
}

/* ---- Testimonios (carrusel: 3 por vista en desktop, van pasando si hay
   más) ---- */
.testimonials .carousel__track > * {
	width: 85%;
}
@media (min-width: 640px) {
	.testimonials .carousel__track > * { width: calc((100% - var(--space-4)) / 2); }
}
@media (min-width: 1024px) {
	.testimonials .carousel__track > * { width: calc((100% - 2 * var(--space-4)) / 3); }
}
.testimonial-card { padding: var(--space-4); }
.testimonial-card__stars { color: var(--color-accent); font-size: 0.85rem; margin-bottom: var(--space-2); }
.testimonial-card__quote { font-size: 0.9rem; color: var(--color-text); margin: 0 0 var(--space-3); }
.testimonial-card__author { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8rem; color: var(--color-text-muted); }
.testimonial-card__author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* ---- Carrusel de videos verticales (estilo reels), centrado: el video del
   medio se ve más grande y se reproduce solo; al navegar, el que pasa al
   centro toma su lugar y se reproduce, los demás se frenan. Navegación
   infinita (vuelve al principio/final sin cortarse). ---- */
/* Sin padding propio: .home-section ya pone el espacio arriba/abajo —
   tenerlo acá también duplicaba el aire entre "Mirá y elegí" y la
   siguiente sección. */
.video-showcase { position: relative; }
.video-showcase__track {
	position: relative;
	height: 300px;
}
@media (min-width: 640px) {
	.video-showcase__track { height: 380px; }
}
.video-showcase__slide {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 140px;
	opacity: 0;
	pointer-events: none;
	z-index: 1;
	cursor: pointer;
	transition: transform var(--transition-smooth), opacity var(--transition-smooth);
}
@media (min-width: 640px) {
	.video-showcase__slide { width: 180px; }
}
.video-showcase__slide.is-visible { opacity: 1; pointer-events: auto; }
.video-showcase__slide.is-center { z-index: 3; cursor: default; }
.video-showcase__slide .video-reel { transform: none; }
.video-showcase__slide:hover .video-reel { transform: none; box-shadow: none; }
.video-showcase__slide.is-center .video-reel { box-shadow: var(--shadow-glow-strong); }
.video-showcase__nav {
	display: flex;
	justify-content: center;
	gap: var(--space-4);
	margin-top: var(--space-5);
}
.video-showcase__nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	color: var(--color-accent);
	font-size: 1.2rem;
}
.video-reel {
	position: relative;
	aspect-ratio: 9 / 16;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #000;
	border: 1px solid var(--color-border-soft);
	transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth), transform var(--transition-smooth);
}
.video-reel video,
.video-reel iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	border: 0;
}
.video-reel__mute {
	position: absolute;
	top: var(--space-2); right: var(--space-2);
	z-index: 3;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: rgba(0,0,0,0.55);
	color: #fff;
	border: 0;
	font-size: 0.9rem;
}
.video-reel__title {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 2;
	padding: var(--space-3);
	background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	pointer-events: none;
}

/* ---- Banners dobles (2 en fila) ---- */
.double-banners {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
@media (min-width: 640px) {
	.double-banners { grid-template-columns: repeat(2, 1fr); }
}
.double-banners .secondary-banner { min-height: 220px; }

/* ---- Mapa / visitá la tienda ---- */
.store-map {
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border-soft);
}
.store-map iframe { width: 100%; height: 360px; border: 0; display: block; filter: grayscale(0.3) invert(0.92) contrast(0.9); }
.store-map__info { padding: var(--space-4) 0; }
.store-map__info h3 { color: var(--color-accent); margin: 0 0 var(--space-2); }

/* ---- Splash de bienvenida al cargar la home: una pelota de tenis que
   "viene de lejos" y se agranda hasta impactar la pantalla, seguida del
   título de bienvenida con el branding dorado. Se muestra una sola vez
   por sesión (ver assets/js/home.js) y se salta directo con un click. En
   prefers-reduced-motion se oculta entera para no dejar una pausa vacía. */
.intro-splash {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: radial-gradient(circle at center, #161616 0%, #000 75%);
	cursor: pointer;
	animation: tienda365-splash-hide 0.7s ease 3.5s forwards;
}
@media (prefers-reduced-motion: reduce) {
	.intro-splash { display: none; }
}
@keyframes tienda365-splash-hide {
	to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.intro-splash__ball {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 30%, #f4ff9c, #c8e600 55%, #93aa00 100%);
	box-shadow: 0 0 60px 18px rgba(255, 212, 0, 0.55), 0 0 130px 46px rgba(255, 212, 0, 0.25);
	transform: translate(-50%, -50%) scale(0.04);
	opacity: 0;
	animation: tienda365-splash-ball 1.8s cubic-bezier(0.6, 0.05, 0.85, 0.4) forwards;
}
/* Costura de la pelota: las dos curvas van en el MISMO SVG (una sola
   imagen) para que queden pegadas entre sí sin desfasarse, y se rotan
   juntas como una sola unidad para imitar la inclinación de una pelota
   real. */
.intro-splash__ball::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M27 6 C50 6 50 94 27 94' stroke='%23ffffff' stroke-width='4.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M73 6 C50 6 50 94 73 94' stroke='%23ffffff' stroke-width='4.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	transform: rotate(-24deg);
}
@keyframes tienda365-splash-ball {
	0%   { transform: translate(-50%, -50%) scale(0.04); opacity: 0; }
	10%  { opacity: 1; }
	78%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
	88%  { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
	100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

.intro-splash__flash {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle, rgba(255, 212, 0, 0.9), rgba(255, 212, 0, 0) 70%);
	opacity: 0;
	animation: tienda365-splash-flash 1.8s ease forwards;
}
@keyframes tienda365-splash-flash {
	0%, 84% { opacity: 0; }
	88% { opacity: 0.6; }
	100% { opacity: 0; }
}

.intro-splash__welcome {
	position: relative;
	z-index: 1;
	text-align: center;
	opacity: 0;
	animation: tienda365-splash-welcome 2s ease 1.7s forwards;
}
@keyframes tienda365-splash-welcome {
	0%, 100% { opacity: 0; transform: translateY(16px) scale(0.94); }
	20%, 75% { opacity: 1; transform: translateY(0) scale(1); }
}
.intro-splash__eyebrow {
	display: block;
	font-family: 'Archivo', var(--font-base);
	font-weight: 500;
	font-size: 1.1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--space-2);
}
.intro-splash__brand {
	display: block;
	font-family: 'Archivo', var(--font-base);
	font-size: clamp(2.4rem, 8vw, 5rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	/* Acá va blanco con resplandor blanco (como el letrero del local),
	   no dorado — por eso pisa el .glow-text que trae por defecto. */
	color: #ffffff;
	text-shadow: 0 0 12px rgba(255, 255, 255, 0.75), 0 0 34px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}