/* ==========================================================================
   Mascotas: inicio (inc/home.php) y página de marcas.
   Los carruseles usan los estilos de single-product.css.
   ========================================================================== */

.site-main--home { padding-top: 0; }

.home [data-home-section] { transition: opacity .2s ease; }
.home .is-updating { opacity: .45; pointer-events: none; }

.home-block { margin-top: 52px; }
.home .product-carousel { margin-top: 0; }

.home-section-title { margin: 0 0 6px; font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 800; line-height: 1.2; }
.home-section-intro { margin: 0 0 18px; color: var(--color-muted); }

.home-empty { padding: 28px 16px; text-align: center; color: var(--color-muted); background: var(--color-bg-alt); border-radius: 6px; }

/* Carruseles de productos en un recuadro blanco (como Mercado Libre): las
   tarjetas van sin borde ni separación propia. Solo las tarjetas sobre el
   banner se ven sueltas. */
.home-panel {
	padding: 24px 24px 18px;
	background: var(--color-bg);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.home-panel:empty { display: none; }

.home-panel ul.products.product-carousel__track li.product.product-card,
.home-panel .product-card {
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.home-panel .product-card:hover { box-shadow: none; }
.home-panel .product-card:hover .product-card__title { color: var(--color-primary); }

/* Banners -------------------------------------------------------------------
   En escritorio el banner ocupa todo el ancho, con proporción 2,9:1 (diseño
   recomendado: 2400 × 830 px, con lo importante fuera de la franja de abajo)
   y su franja inferior queda detrás de las tarjetas; ahí se funde con el
   fondo gris con un degradado de transparente a gris. */
.site-main--home {
	--home-bg: #ededed; /* Gris claro: las tarjetas blancas se distinguen del fondo. */
	padding-bottom: 64px;
	background: var(--home-bg);
}

.home-hero { padding-top: 0; }

.home-banners {
	--banner-overlap: 155px; /* Franja del banner detrás de las tarjetas. */
	--banner-head: 48px; /* Título «Los más vendidos» sobre el banner. */
	position: relative;
	overflow: hidden;
	background: var(--color-bg-alt);
}

/* Degradado inferior: empieza donde empiezan las tarjetas y llega rápido al
   gris del fondo (como Mercado Libre); por encima, el banner sin velo. */
.home-banners::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--banner-overlap);
	background: linear-gradient(180deg, rgba(237, 237, 237, 0) 0, var(--home-bg) 100px);
	pointer-events: none;
}

.home-banners__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.home-banners__track::-webkit-scrollbar { display: none; }

.home-banners__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.home-banners__slide img { display: block; width: 100%; height: auto; }

.home-banners__arrow {
	position: absolute;
	z-index: 2;
	top: calc((100% - var(--banner-overlap) - var(--banner-head)) / 2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--color-primary);
	background: rgba(255, 255, 255, .92);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
	transform: translateY(-50%);
	cursor: pointer;
	transition: background-color .15s ease;
}

.home-banners__arrow:hover { background: #fff; }
.home-banners__arrow[data-dir="-1"] { left: 24px; }
.home-banners__arrow[data-dir="1"] { right: 24px; }
.home-banners__arrow[data-dir="-1"] svg { transform: rotate(90deg); }
.home-banners__arrow[data-dir="1"] svg { transform: rotate(-90deg); }

.home-banners__dots {
	position: absolute;
	z-index: 2;
	bottom: calc(var(--banner-overlap) + var(--banner-head) + 10px);
	left: 50%;
	display: flex;
	gap: 6px;
	transform: translateX(-50%);
}

.home-banners__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	background: rgba(255, 255, 255, .55);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: width .2s ease, background-color .2s ease;
}

.home-banners__dot.is-active { width: 24px; background: #fff; }

/* Banners solo para computador o solo para celular. */
@media (max-width: 767px) {
	.home-banners .is-desktop-only { display: none; }
}

@media (min-width: 768px) {
	.home-banners .is-mobile-only { display: none; }
}

/* Escritorio: a todo el ancho, sin márgenes ni esquinas, y más alto que la
   imagen original si hace falta (se recorta a los lados, centrada). */
@media (min-width: 768px) {
	.home-banners-wrap { max-width: none; padding-inline: 0; }
	.home-banners__slide { display: block; aspect-ratio: 2.9 / 1; max-height: 520px; min-height: 400px; }
	.home-banners__slide picture,
	.home-banners__slide img { width: 100%; height: 100%; }
	.home-banners__slide img { object-fit: cover; object-position: center; }
}

/* Tarjetas sobre el banner. */
.home-hero__products { position: relative; z-index: 2; margin-top: -203px; } /* = --banner-overlap + --banner-head */
.home-hero--empty .home-hero__products { margin-top: 28px; } /* Sin banners vigentes. */

.home-carousel--hero .product-carousel__head { margin-bottom: 12px; }

.home-carousel--hero .product-carousel__title {
	padding: 6px 16px;
	font-size: 1rem;
	color: var(--color-primary);
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(4, 30, 64, .2);
}

.home-carousel--hero .product-carousel__arrow { color: var(--color-primary); background: #fff; box-shadow: 0 4px 12px rgba(4, 30, 64, .2); }

.home-carousel--hero ul.products.product-carousel__track li.product {
	box-shadow: 0 6px 18px rgba(4, 30, 64, .12);
	border-radius: 6px;
}

/* Carruseles del inicio: 6 tarjetas por página, sin selector de cantidad
   («Comprar» agrega una unidad) y sin barra de desplazamiento (hay puntos
   de página). */
.home-carousel ul.products.product-carousel__track li.product { --carousel-card: calc((100% - 80px) / 6); }
.home-carousel ul.products.product-carousel__track { scrollbar-width: none; }
.home-carousel ul.products.product-carousel__track::-webkit-scrollbar { display: none; }
.home-carousel .product-card__qty { display: none; }
.home-carousel .product-card__buy { width: 100%; }

.home-carousel__tools { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.home-carousel__all { font-weight: 700; white-space: nowrap; }

/* Puntos de página. */
.product-carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.product-carousel__dots[hidden] { display: none; }

.product-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	background: var(--color-border);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: width .2s ease, background-color .2s ease;
}

.product-carousel__dot.is-active { width: 22px; background: var(--color-primary); }

/* ¿Perros o gatos? ------------------------------------------------------------ */
.home-pets { margin-top: 52px; }

.home-pets__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* Botones azules con el animal a la derecha; al pasar el mouse o al
   elegirlos, fondo blanco y letras azules. */
.home-pet {
	position: relative;
	display: flex;
	align-items: center;
	aspect-ratio: 2.9 / 1;
	min-height: 170px;
	padding: 0 0 0 4%;
	overflow: hidden;
	font: inherit;
	color: #fff;
	text-align: center;
	background: var(--color-primary);
	border: 2px solid var(--color-primary);
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.home-pet:focus-visible,
.home-pet.is-active { color: var(--color-primary); background: #fff; }

/* En pantallas táctiles el «hover» se queda pegado tras tocar: solo con mouse. */
@media (hover: hover) {
	.home-pet:hover { color: var(--color-primary); background: #fff; }
}

.home-pet:focus-visible { outline: 3px solid rgba(18, 88, 165, .35); outline-offset: 2px; }
.home-pet.is-active { box-shadow: 0 6px 18px rgba(18, 88, 165, .2); }

.home-pet__text { position: relative; z-index: 1; display: grid; gap: 6px; width: 46%; }

.home-pet__text strong {
	font-size: clamp(2rem, 3.8vw, 3.6rem);
	font-weight: 800;
	line-height: .9;
	letter-spacing: -.04em;
	text-transform: uppercase;
}

.home-pet__text span { font-size: clamp(.85rem, 1.25vw, 1.1rem); line-height: 1.25; }

/* El animal ocupa la mitad derecha y se corta en el borde de abajo. */
.home-pet__image {
	position: absolute;
	right: -9%;
	bottom: 0;
	width: auto;
	height: 100%;
	max-width: none;
	pointer-events: none;
}

.home-pets__all {
	display: block;
	margin: 14px auto 0;
	padding: 0;
	font: inherit;
	font-size: .9rem;
	font-weight: 700;
	color: var(--color-primary);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

.home-pets__all[hidden] { display: none; }

/* Pestañas de categorías ---------------------------------------------------- */
.home-tabs {
	display: flex;
	gap: 4px;
	margin: 14px 0 20px;
	overflow-x: auto;
	border-bottom: 1px solid var(--color-border);
	scrollbar-width: none;
}

.home-tabs::-webkit-scrollbar { display: none; }

.home-tabs__tab {
	flex: 1 0 auto;
	padding: 12px 18px;
	font: inherit;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--color-muted);
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}

/* Computador: la elegida en azul con texto blanco; al pasar el mouse, azul
   claro (sin esto el estilo general de botones la pinta de azul oscuro). */
.home-tabs__tab { border-radius: 6px 6px 0 0; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.home-tabs__tab:hover,
.home-tabs__tab:focus-visible { color: var(--color-primary); background: #e1edf9; }
.home-tabs__tab.is-active,
.home-tabs__tab.is-active:hover { color: #fff; background: var(--color-primary); border-bottom-color: var(--color-primary); }

.home-tabs__panel { min-height: 200px; transition: opacity .2s ease; }

/* Franja de beneficios ---------------------------------------------------- */
.home-strip { margin-top: 24px; }

.home-strip__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	gap: 10px 24px;
	margin: 0;
	padding: 14px 20px;
	color: #fff;
	list-style: none;
	background: var(--color-primary);
	border-radius: 6px;
}

.home-strip__item { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.home-strip__item svg { flex-shrink: 0; }

/* Marcas -------------------------------------------------------------------- */
.home-brands { margin-top: 52px; }

.brand-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.brand-tile {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 12px;
	color: var(--color-text);
	text-decoration: none;
	background: var(--color-bg);
	border: 2px solid transparent;
	border-radius: 6px;
	transition: border-color .15s ease, background-color .15s ease;
}

.brand-tile:hover { color: var(--color-primary); background: var(--color-bg); border-color: var(--color-primary); }

.brand-tile__logo {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 6px;
	background: #fff;
	border-radius: 12px;
}

.brand-tile__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-tile__name { font-weight: 700; line-height: 1.25; }

/* Puntos del carrusel de marcas (solo celular). */
.home-brands__dots { display: none; }

.home-brands__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	background: var(--color-border);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: width .2s ease, background-color .2s ease;
}

.home-brands__dot.is-active { width: 22px; background: var(--color-primary); }

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 1100px) {
	.home-carousel ul.products.product-carousel__track li.product { --carousel-card: calc((100% - 48px) / 4); }
}

@media (max-width: 767px) {
	.home-hero { padding-top: 14px; }
	.home-banners { --banner-overlap: 0px; --banner-head: 0px; border-radius: 6px; }
	.home-banners::after { display: none; }
	.home-banners__dots { bottom: 10px; }
	.home-banners__arrow { display: none; }
	.home-hero__products { margin-top: 18px; }
	.home-block,
	.home-pets,
	.home-brands { margin-top: 40px; }

	/* Celular: el texto encima del animal. */
	.home-pets__options { gap: 10px; }
	.home-pet { flex-direction: column; justify-content: flex-start; aspect-ratio: auto; min-height: 0; padding: 16px 8px 0; }
	.home-pet__text { width: 100%; gap: 4px; }
	.home-pet__text strong { font-size: clamp(1.6rem, 8.5vw, 2.3rem); }
	.home-pet__text span { font-size: .78rem; }
	.home-pet__image { position: static; align-self: center; width: 150%; height: auto; margin-top: 6px; }

	.home-panel { padding: 16px 14px 12px; }

	/* Categorías como botones: 3 arriba y 2 abajo (sin mascota) o 2 × 2. */
	.home-tabs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin: 14px 0 18px;
		padding: 0;
		overflow: visible;
		border-bottom: 0;
	}

	.home-tabs--count-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.home-tabs--count-5 .home-tabs__tab { grid-column: span 2; }
	.home-tabs--count-5 .home-tabs__tab:nth-child(n + 4) { grid-column: span 3; }

	.home-tabs__tab {
		min-height: 44px;
		padding: 10px 6px;
		font-size: .8rem;
		color: var(--color-text);
		background: var(--color-bg);
		border: 1.5px solid var(--color-border);
		border-radius: 6px;
	}

	.home-tabs__tab:hover { color: var(--color-primary); border-color: var(--color-primary); }
	.home-tabs__tab.is-active { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }

	/* Franja: justo bajo el banner y un mensaje a la vez. */
	.home-hero { display: flex; flex-direction: column; }
	.home-hero > .home-banners-wrap { order: 1; }
	.home-hero > .home-strip { order: 2; margin-top: 14px; }
	.home-hero > .home-hero__products { order: 3; }

	.home-strip__list { display: grid; padding: 12px 16px; }
	.home-strip__item {
		grid-area: 1 / 1;
		justify-content: center;
		font-size: .92rem;
		text-align: center;
		opacity: 0;
		transform: translateY(6px);
		transition: opacity .35s ease, transform .35s ease;
	}
	.home-strip__item.is-active { opacity: 1; transform: none; }

	.brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.brand-tile { flex-direction: column; gap: 8px; text-align: center; }
	.brand-tile__name { font-size: .88rem; }

	/* Inicio: carrusel de 3 filas × 2 columnas (6 marcas por página). */
	.home-brands .brand-grid {
		grid-template-rows: repeat(3, auto);
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - 10px) / 2);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.home-brands .brand-grid::-webkit-scrollbar { display: none; }
	.home-brands .brand-grid > li:nth-child(6n + 1) { scroll-snap-align: start; }

	.home-brands__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
	.home-brands__dots[hidden] { display: none; }
}

@media (max-width: 640px) {
	/* Dos tarjetas completas y la tercera asomando (como el resto de carruseles). */
	.home-carousel ul.products.product-carousel__track li.product { --carousel-card: calc((100% - 24px) / 2.35); }
	.product-carousel__dots { display: none; }
	.home-carousel__tools .product-carousel__nav { display: none; }
}