/* ============================================================
   DOCAMPO LÓPEZ — Widget de Elementor "Catálogo de Productos"
   Prefijo: dl- / dlp-  ·  Ants Solutions
   Solo estiliza el propio widget (filtros + grilla + paginación).
   El resto de la página (hero, etc.) lo diseña Elementor aparte.
   ============================================================ */

.dlp-catalogo-widget{
	--dl-paper:      #F2F3F5;
	--dl-paper-2:    #E7E8EA;
	--dl-ink:        #1E1E1E;
	--dl-ink-soft:   #4B4F56;
	--dl-brand:      var(--dlp-color-marca, #BF2E1B);
	--dl-brand-dark: var(--dlp-color-marca-oscuro, #8F2313);
	--dl-blueprint:  var(--dlp-paginacion-color, #1E1E1E);
	--dl-line:       rgba(30,30,30,0.18);
	--dl-line-strong:rgba(30,30,30,0.34);
	--dl-radius:     2px;
	font-family: 'Montserrat', sans-serif;
	color: var(--dl-ink);
}

.dlp-catalogo-widget *{ box-sizing:border-box; }
.dlp-catalogo-widget img{ max-width:100%; display:block; }
.dlp-catalogo-widget a{ color:inherit; text-decoration:none; }
.dlp-catalogo-widget button{ font-family:inherit; cursor:pointer; }

.dl-cat-count{ font-size:12px; color:var(--dl-ink-soft); margin:0 0 18px; }
.dl-cat-count b{ color:var(--dl-ink); font-weight:600; }

/* filtros */
.dl-filters{ margin-bottom:28px; }
.dl-filters-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.dl-filters-row + .dl-filters-row{ margin-top:10px; }
.dl-chip{
	font-weight:600; font-size:12.5px; white-space:nowrap;
	padding:8px 16px; border:1px solid var(--dl-line-strong); background:transparent;
	color:var(--dl-ink-soft); border-radius:var(--dl-radius); flex:none; transition:all .15s ease;
}
.dl-chip:hover{ border-color:var(--dl-ink); color:var(--dl-ink); }
.dl-chip.is-active{ background:var(--dl-blueprint); border-color:var(--dl-blueprint); color:#FFFFFF; }
.dl-chip-sub{ font-size:11.5px; padding:6px 13px; opacity:.92; }
.dl-chip-sub.is-active{ background:var(--dl-brand); border-color:var(--dl-brand); }
.dl-sub-row{ display:none; }
.dl-sub-row.is-visible{ display:flex; }

.dl-filters-lineas{ margin-top: 14px; }
.dl-filters-label{
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--dl-brand); margin: 0 0 8px;
}

/* grid */
.dl-grid-wrap{ position:relative; min-height:200px; }
.dl-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:24px; transition:opacity .18s ease; }
.dl-card-ancha{ grid-column:span 2; }
.dl-card-ancha .dl-card-img{ aspect-ratio:16/9; }
@media (max-width:640px){ .dl-card-ancha{ grid-column:span 1; } }
.dl-grid.is-loading{ opacity:.35; pointer-events:none; }

.dl-card{
	position:relative;
	overflow: hidden;
	border-style: solid;
	border-width: var(--dl-card-border-width, var(--dlp-borde-ancho, 1px));
	border-color: var(--dl-card-border, var(--dl-line-strong));
	background: var(--dl-card-bg, var(--dlp-fondo-tarjeta, var(--dl-paper)));
	border-radius: var(--dl-card-radius, var(--dlp-radio, 14px));
	box-shadow: var(--dl-card-shadow, var(--dlp-sombra, 0 4px 16px rgba(30,30,30,.07)));
	transition:
		transform var(--dl-card-hover-speed, 200ms) ease,
		box-shadow var(--dl-card-hover-speed, 200ms) ease,
		border-color var(--dl-card-hover-speed, 200ms) ease;
}
.dl-card:hover{
	border-color: var(--dl-card-border-hover, var(--dl-brand));
	box-shadow: var(--dl-card-shadow-hover, 0 12px 30px rgba(30,30,30,.13));
	transform:
		translateY(calc(var(--dl-card-lift, 4px) * -1))
		scale(calc(1 + var(--dl-card-grow, 1.5) / 100));
}
/* Si se apaga el efecto hover desde el widget, no se mueve ni escala nada
   (el borde y la sombra normal/hover siguen funcionando si están activados). */
.dlp-catalogo-widget.dlp-sin-hover .dl-card:hover{ transform:none; }
.dlp-catalogo-widget.dlp-sin-hover .dl-card-img img{ transform:none !important; }

.dl-card-link-wrap{ position:absolute; inset:0; z-index:2; }
.dl-card-img{
	position:relative; aspect-ratio: var(--dl-card-img-ratio, 1/1); overflow:hidden; display:flex; align-items:center; justify-content:center;
	background:repeating-linear-gradient(45deg, rgba(30,30,30,.06) 0 1px, transparent 1px 12px), var(--dl-paper-2);
	font-size:11px; color:var(--dl-ink-soft);
}
.dl-card-img img{
	width:100%; height:100%; object-fit:cover;
	transition: transform var(--dl-card-img-speed, 350ms) ease;
}
.dl-card:hover .dl-card-img img{
	transform: scale(calc(1 + var(--dl-card-zoom, 4.5) / 100));
}
.dl-card-body{ padding: var(--dl-card-padding, 16px) var(--dl-card-padding, 16px) var(--dl-card-padding, 16px); }
.dl-card-title{ font-size:16px; margin:0; font-weight:600; }

.dl-empty{ grid-column:1/-1; padding:60px 20px; text-align:center; color:var(--dl-ink-soft); font-size:14px; }

.dl-spinner-wrap{ position:absolute; top:80px; left:0; right:0; display:none; justify-content:center; pointer-events:none; }
.dl-grid-wrap.is-loading .dl-spinner-wrap{ display:flex; }
.dl-spinner{
	width:26px; height:26px; border:2px solid var(--dl-line-strong); border-top-color:var(--dl-brand);
	border-radius:50%; animation:dl-spin .7s linear infinite;
}
@keyframes dl-spin{ to{ transform:rotate(360deg); } }

/* paginación */
.dl-pagination{ padding-top:26px; display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.dl-page-btn{
	font-weight:600; font-size:12.5px; padding:8px 14px;
	border:1px solid var(--dl-line-strong); background:transparent; color:var(--dl-ink-soft); border-radius:var(--dl-radius);
}
.dl-page-btn:hover:not(:disabled){ border-color:var(--dl-brand); color:var(--dl-brand); }
.dl-page-btn.is-active{ background:var(--dl-blueprint); border-color:var(--dl-blueprint); color:#FFFFFF; }
.dl-page-btn:disabled{ opacity:.35; cursor:default; }

/* ajustes finos en mobile */
@media (max-width: 600px){
	.dl-chip{ font-size:11.5px; padding:7px 13px; }
	.dl-chip-sub{ font-size:10.5px; padding:5px 11px; }
	.dl-card-title{ font-size:14.5px; }
	.dl-card-body{ padding:12px 14px 16px; }
	.dl-cat-count{ margin-bottom:14px; }
}