/*
 * Grilla de marcas con hover: el logo sube y achica, el producto sube desde abajo,
 * el fondo se tiñe con el color de la marca.
 *
 * En Elementor:
 *   Contenedor (grid 2 col mobile / 4 col desktop) → brand-grid
 *     Contenedor (link a la marca)                  → brand-card brand-card--blue
 *       Imagen (logo)                               → brand-card__logo
 *       Imagen (producto)                           → brand-card__product   (opcional)
 *       Texto  (categoría)                          → brand-card__cat
 *   Última celda                                    → brand-card brand-card--all
 */

.brand-grid {
	display: grid !important; /* pisa el flex que Elementor pone al contenedor */
	grid-template-columns: repeat(2, 1fr);
	border-top: 1px solid var(--color-line);
	border-left: 1px solid var(--color-line);
	gap: 0 !important;
}

.brand-card {
	--brand-tint: #F1EFF6;

	position: relative;
	display: grid !important;
	place-items: center;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	background: #fff;
	border-right: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
	text-decoration: none;
	transition: background-color var(--dur-fast);
}

/* Tintes por marca */
.brand-card--blue   { --brand-tint: #EDF2FF; }
.brand-card--red    { --brand-tint: #FFEFEB; }
.brand-card--amber  { --brand-tint: #FFF5E3; }
.brand-card--pink   { --brand-tint: #FFEDF3; }
.brand-card--brown  { --brand-tint: #F8EFE8; }
.brand-card--yellow { --brand-tint: #FFF8E0; }
.brand-card--green  { --brand-tint: #E9F6EE; }
.brand-card--purple { --brand-tint: #F3EDFE; }

.brand-card__logo {
	width: 52% !important;
	transition: transform .45s var(--ease-out);
}
.brand-card__logo img { max-height: 70px; width: 100%; object-fit: contain; }

.brand-card__product {
	position: absolute !important;
	right: -6%;
	bottom: -40%;
	width: 52% !important;
	transition: bottom .45s var(--ease-out);
}
.brand-card__product img { mix-blend-mode: multiply; }

.brand-card__cat {
	position: absolute !important;
	left: 18px;
	bottom: 14px;
	font-size: 13px;
	color: var(--color-muted);
}

.brand-card:hover,
.brand-card:focus-within { background: var(--brand-tint); }
@media (min-width: 768px) {
	.brand-card:hover .brand-card__logo,
	.brand-card:focus-within .brand-card__logo { transform: translateY(-22%) scale(.9); }
}
.brand-card:hover .brand-card__product,
.brand-card:focus-within .brand-card__product { bottom: -4%; }

.brand-card--all {
	background: var(--color-brand-red);
	color: #fff;
	text-align: center;
	padding: var(--space-6);
}
.brand-card__all .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(16px, 1.6vw, 22px);
	letter-spacing: -.02em;
	line-height: 1.15;
	color: #fff;
}
.brand-card--all:hover,
.brand-card--all:focus-within { background: var(--color-brand-red-dark); }

/* Mobile: la celda es chica, así que va solo el logo y la categoría, sobre blanco. */
@media (max-width: 767px) {
	.brand-card { aspect-ratio: 1 / 1.1; }
	.brand-card:hover,
	.brand-card:focus-within { background: #fff; }
	.brand-card__logo { width: 60% !important; transform: translateY(-14%); }
	.brand-card__product { display: none; }
	.brand-card__cat { left: 10px; right: 10px; bottom: 10px; font-size: 11px; line-height: 1.25; }
	.brand-card--all:hover,
	.brand-card--all:focus-within { background: var(--color-brand-red-dark); }
}

@media (min-width: 768px) {
	.brand-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1025px) {
	.brand-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (hover: none) and (min-width: 768px) {
	/* En touch no hay hover: mostramos el producto asomado siempre */
	.brand-card__product { bottom: -18%; }
}

@media (prefers-reduced-motion: reduce) {
	.brand-card,
	.brand-card__logo,
	.brand-card__product { transition: none; }
}