/*
 * Diacash Magento Bridge — estilos de tarjetas, carrusel y mega menú.
 *
 * Los colores y la fuente salen de las variables globales del kit de Elementor (Editor V4).
 * Nombre real en el CSS del front: el kit las publica en :root con su etiqueta tal cual,
 * p. ej. --azul (archivo uploads/elementor/css/post-<kit>.css, cargado en todas las páginas).
 * El identificador interno e-gv-xxxx solo existe en el editor; NO es el nombre de la variable CSS.
 * El hex de respaldo solo actúa si el kit no está cargado.
 *
 *   --dcb-azul        ← --azul          (e-gv-f01f325)  #175AA4
 *   --dcb-azul-hover  ← --azul-hover    (e-gv-92b939c)  #0F4A8C
 *   --dcb-azul-claro  ← --azul-claro    (e-gv-74bdff7)  #84C5E3
 *   --dcb-gris-fondo  ← --gris-fondo    (e-gv-df17b4d)  #F0F0F0
 *   --dcb-gris-texto  ← --gris-texto    (e-gv-118c2e9)  #909090
 *   --dcb-gris-acc    ← --gris-texto-accesible (e-gv-c9443d5) #6B6B6B  (texto gris: ≥ 4,5:1 sobre blanco y sobre gris-fondo)
 *   --dcb-rojo        ← --rojo-precio   (e-gv-457bd8c)  #E56469
 *   --dcb-rojo-acc    ← --rojo-precio-accesible (e-gv-9596437) #C8363D  (importe y etiqueta de descuento: ≥ 4,5:1)
 *   --dcb-negro       ← --negro         (e-gv-f8ca937)  #000000
 *   --dcb-blanco      ← --blanco        (e-gv-38ec521)  #FFFFFF
 *   --dcb-fuente      ← --familia-base  (e-gv-d9449ef)  Figtree
 */
:root {
	--dcb-azul: var(--azul, #175aa4);
	--dcb-azul-hover: var(--azul-hover, #0f4a8c);
	--dcb-azul-claro: var(--azul-claro, #84c5e3);
	--dcb-gris-fondo: var(--gris-fondo, #f0f0f0);
	--dcb-gris-texto: var(--gris-texto, #909090);
	--dcb-gris-acc: var(--gris-texto-accesible, #6B6B6B);
	--dcb-rojo: var(--rojo-precio, #e56469);
	--dcb-rojo-acc: var(--rojo-precio-accesible, #C8363D);
	--dcb-negro: var(--negro, #000);
	--dcb-blanco: var(--blanco, #fff);
	--dcb-radio-cat: 16px;
	--dcb-radio-prod: 20px;
	--dcb-sombra: 0 4px 20px rgba(0, 0, 0, .08);
	--dcb-fuente: var(--familia-base, "Figtree"), system-ui, sans-serif;
	--dcb-gap: 28px;
	--dcb-dur: .25s;
}

/* ---------- Rejilla de categorías ---------- */
.dcb-categorias {
	display: grid;
	/* --dcb-cols lo fija el shortcode en línea (cols=N); los breakpoints usan variables propias. */
	--dcb-cols: 6;
	--dcb-cols-lg: 4;
	--dcb-cols-md: 3;
	--dcb-cols-sm: 2;
	grid-template-columns: repeat(var(--dcb-cols), minmax(0, 1fr));
	gap: 48px var(--dcb-gap);
	font-family: var(--dcb-fuente);
}
/* La clase repetida (a.x.x) sube la especificidad por encima del color de enlace del kit, que si
   no pinta de azul los textos de las tarjetas, sea o no una página de Elementor. */
.dcb-cat,
a.dcb-cat.dcb-cat,
a.dcb-cat.dcb-cat:hover,
a.dcb-cat.dcb-cat:focus {
	display: block;
	color: var(--dcb-negro);
	text-decoration: none;
}
.dcb-cat__media {
	position: relative;
	display: block;
	aspect-ratio: 252 / 210;
	border-radius: var(--dcb-radio-cat);
	overflow: hidden;
	background: var(--dcb-blanco);
	box-shadow: var(--dcb-sombra);
	isolation: isolate;
}
.dcb-cat__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dcb-dur) ease;
}
.dcb-cat__ver {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(23, 90, 164, .85);
	color: var(--dcb-blanco);
	font-weight: 500;
	font-size: 25px;
	transform: translateY(100%);
	opacity: 0;
	transition: transform var(--dcb-dur) ease, opacity var(--dcb-dur) ease;
}
.dcb-cat:hover .dcb-cat__ver,
.dcb-cat:focus-visible .dcb-cat__ver {
	transform: translateY(0);
	opacity: 1;
}
.dcb-cat:hover .dcb-cat__media img {
	transform: scale(1.04);
}
.dcb-cat__nombre {
	display: block;
	margin-top: 18px;
	font-size: var(--card-titulo, 22px);
	font-weight: 500;
	line-height: 1.1;
}
.dcb-cat__texto {
	display: block;
	margin-top: 8px;
	font-size: var(--card-texto, 18px);
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Tarjeta de producto ---------- */
.dcb-productos {
	display: grid;
	--dcb-cols-lg: 3;
	--dcb-cols-md: 2;
	--dcb-cols-sm: 1;
	grid-template-columns: repeat(var(--dcb-cols, 4), minmax(0, 1fr));
	gap: var(--dcb-gap);
	font-family: var(--dcb-fuente);
}
.dcb-prod,
a.dcb-prod.dcb-prod,
a.dcb-prod.dcb-prod:hover,
a.dcb-prod.dcb-prod:focus {
	display: flex;
	flex-direction: column;
	color: var(--dcb-negro);
	text-decoration: none;
	height: 100%;
}
.dcb-prod__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--dcb-blanco);
	border-radius: var(--dcb-radio-prod);
	padding: 40px;
	box-shadow: var(--dcb-sombra);
	overflow: hidden;
}
.dcb-prod__media picture,
.dcb-prod__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var(--dcb-dur) ease;
}
.dcb-prod:hover .dcb-prod__media img {
	transform: scale(1.05);
}
.dcb-prod__oferta {
	position: absolute;
	top: 16px;
	left: 16px;
	background: var(--dcb-rojo-acc);
	color: var(--dcb-blanco);
	font-size: 14px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
}
.dcb-prod__cat {
	margin-top: 20px;
	font-size: var(--card-texto, 18px);
	color: var(--dcb-gris-acc);
}
.dcb-prod__nombre {
	margin-top: 6px;
	font-size: var(--card-titulo, 22px);
	font-weight: 500;
	line-height: 1.1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dcb-prod__desc {
	margin-top: 8px;
	font-size: 16px;
	line-height: 1.3;
	color: #444;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dcb-prod__precio {
	margin-top: auto;
	padding-top: 12px;
	font-size: var(--card-precio, 20px);
	line-height: 1.2;
}
.dcb-prod__precio strong {
	color: var(--dcb-rojo-acc);
	font-weight: 400;
}
.dcb-prod__precio s {
	color: var(--dcb-gris-acc);
	margin-right: 6px;
}
.dcb-prod__precio small {
	display: block;
	font-size: 20px;
}
.dcb-mas {
	text-align: center;
	margin-top: 40px;
}
.dcb-boton {
	display: inline-block;
	background: var(--dcb-azul);
	color: var(--dcb-blanco);
	font-family: var(--dcb-fuente);
	font-weight: 500;
	font-size: 20px;
	line-height: 43px;
	padding: 0 22px;
	border-radius: 999px;
	text-decoration: none;
	transition: background var(--dcb-dur) ease;
}
/* Texto siempre blanco. La clase repetida (a.x.x) sube la especificidad por encima del color de
   enlace del kit (.elementor-kit-N a, normal y hover) también en páginas que no son de Elementor. */
a.dcb-boton.dcb-boton,
a.dcb-boton.dcb-boton:visited { color: var(--dcb-blanco); }
.dcb-boton:hover,
.dcb-boton:focus-visible,
a.dcb-boton.dcb-boton:hover,
a.dcb-boton.dcb-boton:focus,
a.dcb-boton.dcb-boton:focus-visible {
	background: var(--dcb-azul-hover);
	color: var(--dcb-blanco);
}

/* ---------- Carrusel ---------- */
.dcb-carrusel {
	position: relative;
	font-family: var(--dcb-fuente);
}
.dcb-carrusel__pista {
	display: flex;
	gap: var(--dcb-gap);
	overflow-x: auto;
	/* El snap y el scroll suave se activan con .is-lista (bridge.js, tras la carga o al primer toque):
	   puestos desde el principio, el ajuste inicial del snap cuenta como desplazamiento y Chrome deja
	   de medir el LCP de la página. */
	scroll-snap-type: none;
	scroll-behavior: auto;
	scrollbar-width: none;
	padding: 8px 4px 24px;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
}
.dcb-carrusel__pista.is-lista {
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
}
.dcb-carrusel__pista::-webkit-scrollbar {
	display: none;
}
.dcb-carrusel__pista.is-dragging,
.dcb-carrusel__pista.is-lista.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
}
/* Durante la transición de 600 ms que mueve bridge.js, sin snap ni scroll suave nativo. */
.dcb-carrusel__pista.is-animando,
.dcb-carrusel__pista.is-lista.is-animando {
	scroll-behavior: auto;
	scroll-snap-type: none;
}
.dcb-carrusel__item {
	flex: 0 0 calc((100% - 3 * var(--dcb-gap)) / 4);
	scroll-snap-align: start;
}
.dcb-carrusel__nav {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 4px;
}
.dcb-carrusel__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--dcb-azul);
	background: var(--dcb-blanco);
	color: var(--dcb-azul);
	font-size: 20px;
	cursor: pointer;
	transition: background var(--dcb-dur) ease, color var(--dcb-dur) ease;
}
.dcb-carrusel__btn:hover {
	background: var(--dcb-azul);
	color: var(--dcb-blanco);
}

/* ---------- Subcategorías (chips) ---------- */
.dcb-subcategorias {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-family: var(--dcb-fuente);
}
.dcb-subcategorias a {
	display: inline-block;
	border: 1px solid var(--dcb-azul);
	color: var(--dcb-azul);
	background: var(--dcb-blanco);
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 16px;
	text-decoration: none;
	transition: background var(--dcb-dur) ease, color var(--dcb-dur) ease;
}
.dcb-subcategorias a:hover {
	background: var(--dcb-azul);
	color: var(--dcb-blanco);
}

/* ---------- Aparición en cascada ---------- */
.dcb-reveal > * {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s ease, transform .5s ease;
	transition-delay: calc(var(--dcb-i, 0) * 60ms);
}
.dcb-reveal.is-visible > * {
	opacity: 1;
	transform: none;
}
.dcb-carrusel.dcb-reveal > * {
	opacity: 1;
	transform: none;
}
.dcb-aviso {
	background: #fff8e1;
	border-left: 4px solid #f0b429;
	padding: 12px 16px;
	font-family: var(--dcb-fuente);
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
	.dcb-categorias, .dcb-productos { grid-template-columns: repeat(var(--dcb-cols-lg), minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
	/* Carrusel: 2 tarjetas visibles en tableta */
	.dcb-carrusel__item { flex-basis: calc((100% - var(--dcb-gap)) / 2); }
}
@media (max-width: 900px) {
	.dcb-categorias, .dcb-productos { grid-template-columns: repeat(var(--dcb-cols-md), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	:root { --dcb-gap: 16px; }
	.dcb-categorias, .dcb-productos { grid-template-columns: repeat(var(--dcb-cols-sm), minmax(0, 1fr)); }
	.dcb-categorias { gap: 28px 16px; }
	.dcb-cat__nombre { font-size: 18px; }
	.dcb-cat__texto { font-size: 15px; }
	.dcb-carrusel__item { flex-basis: calc((100% - var(--dcb-gap)) / 1.2); } /* 1,2 tarjetas visibles en móvil */
	.dcb-prod__media { padding: 24px; }
	.dcb-prod__nombre { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
	.dcb-reveal > *, .dcb-cat__ver, .dcb-cat__media img, .dcb-prod__media img {
		transition: none;
	}
	.dcb-reveal > * { opacity: 1; transform: none; }
	.dcb-carrusel__pista { scroll-behavior: auto; }
}