/* Bloque «Opiniones de clientes»: tarjetas de reseñas de Google en carrusel. Sin márgenes laterales propios: ocupa el ancho del
   contenedor donde se coloque. Prefijo .dReviews en todas las reglas para ganar a las del sitio (.dContent h2, .dContent a…). */

.dReviews{--gap:24px;--per:3;position:relative}

/* Título: mismas reglas tipográficas que los h4 del sitio (igual que «Proyectos destacados»; ver cases-showcase.css) */
.dReviews .dReviews__title{font-size:calc(19px + .4vw);letter-spacing:-.04em;line-height:1.2em;font-weight:700;margin:0}
.dReviews__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 12px}
.dReviews .dReviews__summary{margin:0 0 24px;font-size:16px;line-height:1.4;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.dReviews .dReviews__summary strong{font-size:18px}

.dReviews .dReviews__stars{display:inline-flex;gap:2px;color:#f5a800}
.dReviews .dReviews__stars svg{fill:currentColor;display:block}

/* Flechas junto al título: se ven solo si hay más tarjetas de las que caben (lo decide reviews.js) */
.dReviews__navs{display:flex;gap:8px}
.dReviews .dReviews__nav{width:40px;height:40px;padding:0;border:1.5px solid rgba(0,0,0,.3);border-radius:50%;background:transparent;color:#111;
	display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,opacity .2s ease}
.dReviews .dReviews__nav[hidden]{display:none}
.dReviews .dReviews__nav:hover:not(:disabled),.dReviews .dReviews__nav:focus-visible{background:rgba(0,0,0,.07)}
.dReviews .dReviews__nav:disabled{opacity:.3;cursor:default}
.dReviews .dReviews__nav:focus-visible{outline:2px solid #FF5640;outline-offset:2px}

/* Fila desplazable, ajustada tarjeta a tarjeta */
.dReviews .dReviews__track{list-style:none;margin:0;padding:0;display:flex;gap:var(--gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
	scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;align-items:stretch}
/* reviews.js fija la altura de la fila a la de la tarjeta más alta de la página visible; con esa altura las tarjetas se estiran.
   .is-measuring (solo durante la medida, sin pintarse) deja a cada tarjeta a su altura natural */
.dReviews.is-js .dReviews__track{transition:height .3s ease}
.dReviews.is-measuring .dReviews__item{align-self:flex-start}
.dReviews .dReviews__track::-webkit-scrollbar{display:none}
.dReviews .dReviews__track:focus-visible{outline:2px solid #FF5640;outline-offset:4px}
.dReviews .dReviews__item{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));scroll-snap-align:start;min-width:0;margin:0;padding:0}
.dReviews .dReviews__item::marker{content:none}

.dReviews .dReviews__card{margin:0;height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;padding:24px;
	background:#fff;border:1px solid #e5e4ea;border-radius:8px}
.dReviews .dReviews__quote{margin:0;padding:0;border:0;font-size:16px;line-height:1.5;color:inherit;quotes:none}
.dReviews .dReviews__quote p{margin:0 0 .6em}
.dReviews .dReviews__quote p:last-child{margin-bottom:0}
/* El recorte solo existe con JavaScript (reviews.js añade .is-js); sin él, el texto sale completo */
.dReviews.is-js .dReviews__card:not(.is-open) .dReviews__quote{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.dReviews .dReviews__toggle{align-self:flex-start;margin:-4px 0 0;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:14px;font-weight:600;
	text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dReviews .dReviews__toggle[hidden]{display:none}
.dReviews .dReviews__toggle:focus-visible{outline:2px solid #FF5640;outline-offset:2px}
.dReviews .dReviews__by{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:6px}
.dReviews .dReviews__author{font-weight:700;font-size:15px}
.dReviews .dReviews__meta{font-size:13px;line-height:1.35;color:var(--c-mute,#6b6b76)}
.dReviews .dReviews__foot{margin:20px 0 0;font-size:14px;line-height:1.5;color:var(--c-mute,#6b6b76)}
.dReviews .dReviews__foot a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Muro de testimonios (/opiniones y /reviews): masonry de 3 columnas. Sin JavaScript, CSS columns; con él (.is-masonry, ver
   reviews-wall.js) una rejilla de filas de 8 px donde cada tarjeta ocupa tantas filas como mide, en el orden del HTML. */
.dReviewsWall .dReviews__title{margin:0 0 12px}
.dReviewsWall .dReviews__wall{--cols:3;column-count:var(--cols);column-gap:var(--gap)}
.dReviewsWall .dReviews__cell{break-inside:avoid;margin:0 0 var(--gap)}
.dReviewsWall .dReviews__card{height:auto}
.dReviewsWall.is-masonry .dReviews__wall{display:grid;column-count:auto;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:8px;row-gap:0}
.dReviewsWall.is-masonry .dReviews__cell{margin:0;align-self:start}
/* Al pasar el cursor por una tarjeta, las demás se atenúan (solo con ratón; :has evita atenuar todo al pasar por los huecos) */
.dReviewsWall .dReviews__card{transition:opacity .25s ease,background-color .25s ease}
@media (hover:hover){
	.dReviewsWall .dReviews__wall:has(.dReviews__card:hover) .dReviews__card:not(:hover){opacity:.75;background-color:#efefef}
}
.dReviewsWall .dReviews__card:target{border-color:#FF5640;box-shadow:0 0 0 2px rgba(255,86,64,.25)}

@media (max-width:1023px){
	.dReviews{--per:2}
	.dReviewsWall .dReviews__wall{--cols:2}
}
@media (max-width:720px){
	.dReviews{--per:1;--gap:16px}
	.dReviews .dReviews__card{padding:20px}
	.dReviewsWall .dReviews__wall{--cols:1}
}
@media (prefers-reduced-motion:reduce){
	.dReviews .dReviews__nav,.dReviews.is-js .dReviews__track,.dReviewsWall .dReviews__card{transition:none}
}