/* Bloque «Proyectos destacados»: casillas cuadradas de los casos, en carrusel con flechas o en grilla.
   Se carga en las páginas de casos y en cualquier página del sitio que lo incluya (includes/content/cases-showcase.inc.php).
   No lleva márgenes laterales: ocupa el ancho del contenedor donde se coloque. Las reglas llevan prefijo .dCasesShowcase para ganar
   a las del sitio (.dContent a, .dContent h2…) sin depender del orden de carga. */

.dCasesShowcase{--gap:32px;--per:4;position:relative}

/* Título del bloque: mismas reglas tipográficas que los títulos h4 del sitio (p. ej. «Obtén un presupuesto en minutos»), copiadas
   de layout.css «.dContent h4». Si cambian allí, cambiar aquí. */
.dCasesShowcase .dCasesShowcase__title{font-size:calc(19px + .4vw);letter-spacing:-.04em;line-height:1.2em;font-weight:700;margin:0 0 32px}

/* Casilla: foto cuadrada. El título está siempre en el HTML (es el texto del enlace).
   Con ratón (más de 1080 px): solo se ve al pasar el cursor o enfocar, con un velo del 20 % de negro sobre la foto y el título
   abajo a la izquierda, a 25 px de los bordes, ambos con fundido. */
.dCasesShowcase a.dCasesTile{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:4px;background:#e9e8ee;
	color:#fff;text-decoration:none;padding:0;border:0}
.dCasesShowcase a.dCasesTile:hover,.dCasesShowcase a.dCasesTile:focus-visible{color:#fff;text-decoration:none}
.dCasesTile picture,.dCasesTile img{display:block;width:100%;height:100%}
.dCasesTile img{object-fit:cover}
.dCasesTile::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.2);opacity:0;transition:opacity .35s ease;pointer-events:none}
.dCasesTile__cap{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:0 25px 25px;opacity:0;transition:opacity .35s ease;pointer-events:none}
.dCasesTile__title{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
	font-size:clamp(16px,1.5vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.dCasesShowcase a.dCasesTile:hover::after,.dCasesShowcase a.dCasesTile:focus-visible::after,
.dCasesShowcase a.dCasesTile:hover .dCasesTile__cap,.dCasesShowcase a.dCasesTile:focus-visible .dCasesTile__cap{opacity:1}
.dCasesShowcase a.dCasesTile:focus-visible{outline:2px solid #FF5640;outline-offset:2px}

/* Carrusel: una fila que se desplaza (con el dedo, la rueda o las flechas) y se ajusta casilla a casilla */
.dCasesShowcase__wrap{position:relative}
.dCasesShowcase__track{list-style:none;margin:0;padding:0;display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
	scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.dCasesShowcase__track::-webkit-scrollbar{display:none}
.dCasesShowcase__track .dCasesShowcase__item{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));scroll-snap-align:start;min-width:0}
.dCasesShowcase__item{margin:0;padding:0}
.dCasesShowcase__item::marker{content:none}

/* Flechas: sobre las casillas de los extremos; solo aparecen si hay más casos de los que caben */
.dCasesShowcase .dCasesShowcase__nav{position:absolute;z-index:2;top:50%;width:48px;height:48px;margin:-24px 0 0;padding:0;border:0;border-radius:50%;
	background:rgba(0,0,0,.4);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,opacity .2s ease}
.dCasesShowcase .dCasesShowcase__nav[hidden]{display:none}
.dCasesShowcase .dCasesShowcase__nav:hover,.dCasesShowcase .dCasesShowcase__nav:focus-visible{background:rgba(0,0,0,.65)}
.dCasesShowcase .dCasesShowcase__nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.dCasesShowcase .dCasesShowcase__nav.is-prev{left:12px}
.dCasesShowcase .dCasesShowcase__nav.is-next{right:12px}

/* Grilla (listado /casos y /cases): 4 por fila, casillas cuadradas */
.dCasesShowcase__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}

/* Cabecera del listado */
.dCasesList .dCasesList__title{font-size:calc(19px + .4vw);letter-spacing:-.04em;line-height:1.2em;font-weight:700;margin:18px 0 12px} /* igual que el título del bloque */
.dCasesList .dCasesList__intro{max-width:760px;margin:0 0 32px;font-size:17px;line-height:1.5;color:var(--c-mute,#6b6b76)}

@media (max-width:1023px){
	.dCasesShowcase{--gap:24px;--per:3}
	.dCasesShowcase__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
}
@media (max-width:720px){
	.dCasesShowcase{--per:2}
	.dCasesShowcase .dCasesShowcase__nav{width:40px;height:40px;margin-top:-20px}
	.dCasesShowcase__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Tablets y móviles (1080 px o menos) y cualquier pantalla sin ratón: no hay «hover». El título se ve siempre, abajo a la izquierda,
   sobre un degradado suave que va de más oscuro (abajo) a transparente y que empieza 40 px por encima del título (el relleno
   superior de la franja del título), así que se adapta a títulos de una o varias líneas. Se quita el velo de la foto entera. */
@media (max-width:1080px),(hover:none){
	.dCasesTile::after{display:none}
	.dCasesTile__cap{opacity:1;padding:40px 25px 25px;
		background:linear-gradient(to top,rgba(0,0,0,.58) 0%,rgba(0,0,0,.34) 50%,rgba(0,0,0,.12) 80%,rgba(0,0,0,0) 100%)}
}

/* Móvil (640 px o menos): casillas pequeñas, el título entra con menos margen; las flechas salen de encima de la foto y pasan a
   las esquinas inferiores del bloque, más pequeñas y discretas, para no tapar la foto ni el título. */
@media (max-width:640px){
	.dCasesShowcase{--gap:16px}
	.dCasesTile__cap{padding:40px 14px 14px}
	.dCasesTile__title{font-size:14px;-webkit-line-clamp:3}
	.dCasesShowcase.has-nav .dCasesShowcase__wrap{padding-bottom:50px}
	.dCasesShowcase .dCasesShowcase__nav{top:auto;bottom:0;width:36px;height:36px;margin:0;background:transparent;color:#111;border:1.5px solid rgba(0,0,0,.35)}
	.dCasesShowcase .dCasesShowcase__nav:hover,.dCasesShowcase .dCasesShowcase__nav:focus-visible{background:rgba(0,0,0,.07)}
	.dCasesShowcase .dCasesShowcase__nav:focus-visible{outline-color:#111}
	.dCasesShowcase .dCasesShowcase__nav svg{width:18px;height:18px}
	.dCasesShowcase .dCasesShowcase__nav.is-prev{left:0}
	.dCasesShowcase .dCasesShowcase__nav.is-next{right:0}
}
/* Móviles estrechos (450 px o menos): el carrusel enseña UNA casilla por vista, a todo el ancho; el título gana tamaño y margen.
   (La grilla del listado sigue a 2 columnas.) */
@media (max-width:450px){
	.dCasesShowcase{--per:1}
	.dCasesShowcase__track .dCasesTile__cap{padding:40px 20px 20px}
	.dCasesShowcase__track .dCasesTile__title{font-size:18px;-webkit-line-clamp:4}
}
@media (max-width:560px){
	.dCasesShowcase__grid{gap:16px}
}
@media (prefers-reduced-motion:reduce){
	.dCasesTile::after,.dCasesTile__cap,.dCasesShowcase .dCasesShowcase__nav{transition:none}
}