/* ==========================================================================
   §109 · RESEÑAS PROPIAS EN CARRUSEL
   Sustituyen al widget de Trustindex. Cero peticiones a terceros.

   Medidas copiadas del CSS original del plugin y del widget en produccion,
   el 12/08/2026. Tarjeta de 359px con relleno 20 y radio 12, sombra
   1px 4px 10px, texto a 15px recortado a cuatro lineas, estrellas de 17px,
   nombre a 15px en 600, fecha a 13px en #6b6b6b, "Leer mas" a 13,5px al
   50% de opacidad, avatar de 40px con 15px de separacion, y flechas de
   30x30 con el chevron hecho de bordes.

   La firma va FUERA de la caja blanca, como en el original, con un pico
   que baja de la tarjeta hacia el avatar.
   ========================================================================== */

/* Las variables son las del tema de David. El segundo valor
   de cada var() es el respaldo, para que el plugin funcione igual en un
   sitio que no las tenga. */
/* Con el atributo y no solo con la clase, por si el tema ya usa ese nombre.
   La portada lo usa, y sin esto se aplicaba tambien
   a la seccion de alrededor. */
.pd-resenas[data-pd-resenas] {
	margin-block: var(--e-seccion, 3.5rem);
}

.pd-resenas__titulo {
	margin: 0 0 1.75rem;
	text-align: center;
}

/* ---------- marco y flechas ---------- */

.pd-resenas__marco {
	position: relative;
}

/* El chevron es CSS puro, como el de Trustindex. Una caja de 9x9 con solo
   dos bordes, girada. Ni SVG ni fuente de iconos. */
.pd-resenas__flecha {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: block;
	/* 30x30 como Trustindex. Supera el minimo de 24x24 del criterio 2.5.8. */
	width: 30px;
	height: 30px;
	padding: 0;
	transform: translateY(-50%);
	background-color: #fff;
	border: 0;
	border-radius: 50%;
	/* el aro va en sombra y no en outline, para dejar el outline libre
	   y que el indicador de foco no compita con el borde */
	box-shadow: 0 0 0 1px #d9d9d9, 0 2px 8px rgba(0, 0, 0, 0.08);
	cursor: pointer;
}

.pd-resenas__flecha::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border: 0 solid #5e5e5e;
	border-bottom-width: 2px;
	border-left-width: 2px;
}

.pd-resenas__flecha[data-sentido="-1"] { left: -14px; }
.pd-resenas__flecha[data-sentido="-1"]::before { transform: translate(-35%, -50%) rotate(45deg); }
.pd-resenas__flecha[data-sentido="1"] { right: -14px; }
.pd-resenas__flecha[data-sentido="1"]::before { transform: translate(-65%, -50%) rotate(-135deg); }

.pd-resenas__flecha:focus-visible {
	outline: 3px solid var(--accent, #b0472c);
	outline-offset: 3px;
}

.pd-resenas__flecha[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* ---------- carril ---------- */

.pd-resenas__carril {
	overflow-x: auto;
	scroll-behavior: smooth;
	/* sitio para que la sombra no se recorte al desplazar */
	padding: 6px 4px 8px;
	margin: -6px -4px -8px;
	/* la barra sobra, para eso estan las flechas y el arrastre */
	scrollbar-width: none;
}

.pd-resenas__carril::-webkit-scrollbar { display: none; }

/* El ajuste por tarjetas se activa desde JavaScript al terminar de cargar.
   Puesto en el CSS de salida, "scroll-snap-type: x mandatory" impide que
   Chrome registre el Largest Contentful Paint de TODA la pagina, y la deja
   sin nota de rendimiento y sin datos de Core Web Vitals. Comprobado el
   12/08/2026 midiendo con y sin el, 305 candidatos frente a cero. */
.pd-resenas__carril.con-ajuste {
	scroll-snap-type: x mandatory;
}

.pd-resenas__carril:focus-visible {
	outline: 3px solid var(--accent, #b0472c);
	outline-offset: 4px;
}

.pd-resenas__lista {
	display: flex;
	gap: 16px;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Rejilla calcada de Trustindex. Tarjetas porcentuales que llenan el ancho
   exacto, con sus mismos cortes en 1160 y 767. Tres, dos o una. */
.pd-resena {
	flex: 0 0 calc((100% - 32px) / 3);
	max-width: calc((100% - 32px) / 3);
	scroll-snap-align: start;
}

@media (max-width: 1159px) {
	.pd-resena {
		flex-basis: calc((100% - 16px) / 2);
		max-width: calc((100% - 16px) / 2);
	}
}

@media (max-width: 767px) {
	.pd-resena {
		flex-basis: 100%;
		max-width: 100%;
	}
}

.pd-resena figure {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 0;
}

/* ---------- la caja blanca ---------- */

.pd-resena__caja {
	position: relative;
	box-sizing: border-box;
	flex: 1;
	padding: 20px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.1), 0 0 2px rgba(0, 0, 0, 0.05);
}

/* el pico que baja hacia el avatar */
.pd-resena__caja::after {
	content: "";
	position: absolute;
	bottom: -9px;
	left: 26px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 9px 0 0;
	border-color: #fff transparent transparent transparent;
	filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.07));
}

.pd-resena__google {
	position: absolute;
	top: 20px;
	right: 20px;
}

.pd-resena__nota {
	margin: 0 0 10px;
	/* dorado de Google. Ver la nota de contraste al final. */
	color: #fbbc04;
	font-size: 17px;
	letter-spacing: 1px;
	line-height: 1;
}

/* Muchos temas ponen el blockquote en cursiva, con borde lateral o con
   comillas automaticas. Se neutraliza para que el componente se vea igual
   en cualquier sitio donde se instale el plugin. */
.pd-resena__texto {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	font-style: normal;
	background: none;
}

.pd-resena__texto::before,
.pd-resena__texto::after {
	content: none;
}

.pd-resena__texto p {
	margin: 0;
	color: #000;
	font-size: 15px;
	font-style: normal;
	line-height: 1.45;
	/* cuatro lineas, igual que Trustindex */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

.pd-resena.esta-abierta .pd-resena__texto p {
	-webkit-line-clamp: none;
	line-clamp: none;
	overflow: visible;
}

.pd-resena__mas {
	display: block;
	margin: 0;
	padding: 8px 0 0;
	/* Trustindex usa negro al 50%, que sobre blanco da 3,95:1 y no llega al
	   4,5:1 que pide el criterio 1.4.3 para texto de este tamano. Se usa el
	   mismo gris que la fecha, que da 5,3:1 y a simple vista es igual. */
	color: #6b6b6b;
	font-family: inherit;
	font-size: 13.5px;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
}

.pd-resena__mas:focus-visible {
	outline: 3px solid var(--accent, #b0472c);
	outline-offset: 2px;
}

/* ---------- la firma, fuera de la caja ---------- */

.pd-resena__firma {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 0;
	padding: 18px 0 0 6px;
}

.pd-resena__avatar {
	display: flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-right: 15px;
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	border-radius: 50%;
}

.pd-resena__quien {
	min-width: 0;
}

.pd-resena__nombre {
	display: block;
	overflow: hidden;
	color: #000;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.pd-resena__firma time {
	display: block;
	color: #6b6b6b;
	font-size: 13px;
}

/* ---------- puntos indicadores ---------- */

.pd-resenas__puntos {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	justify-content: center;
	margin-top: 14px;
}

/* El punto se ve de 8px pero el boton mide 24x24, que es el minimo que pide
   el criterio 2.5.8 de la WCAG 2.2 para un objetivo tactil. */
.pd-resenas__punto {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.pd-resenas__punto::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	transform: translate(-50%, -50%);
	/* 3,2:1 sobre blanco, por encima del 3:1 del criterio 1.4.11 */
	background: #8f8f8f;
	border-radius: 50%;
	transition: background-color 200ms ease-out, width 200ms ease-out, height 200ms ease-out;
}

.pd-resenas__punto[aria-current="true"]::before {
	width: 10px;
	height: 10px;
	background: #4d4d4d;
}

.pd-resenas__punto:hover::before {
	background: #4d4d4d;
}

.pd-resenas__punto:focus-visible {
	outline: 3px solid var(--accent, #b0472c);
	outline-offset: -2px;
}

.pd-resenas__pie {
	margin-top: 1.5rem;
	font-size: 0.9rem;
	text-align: center;
}

/* sin esto el enlace mide 18px de alto y no llega al objetivo de 24x24 */
.pd-resenas__pie a {
	display: inline-block;
	padding: 4px 6px;
}

@media (prefers-reduced-motion: reduce) {
	.pd-resenas__carril { scroll-behavior: auto; }
	.pd-resenas__flecha,
	.pd-resenas__punto::before,
	.pd-resena__mas { transition: none; }
}

@media (max-width: 767px) {
	/* al llenar la tarjeta el ancho no queda nada asomando, asi que las
	   flechas son la unica pista de que hay mas reseñas. Se quedan. */
	.pd-resenas__flecha[data-sentido="-1"] { left: -10px; }
	.pd-resenas__flecha[data-sentido="1"] { right: -10px; }
}

/* Nota de contraste. El dorado #fbbc04 es el de Google y se usa para que el
   componente sea indistinguible del widget que sustituye, pero sobre blanco
   da 1,9:1 y no llega al 3:1 del criterio 1.4.11 de la WCAG 2.2. La nota va
   ademas como texto en el aria-label de cada bloque de estrellas, asi que la
   informacion no depende del color. Si algun dia se quiere cumplir tambien
   en lo visual, el equivalente oscuro es #a16207, que da 4,7:1. */

/* Ni al pasar por encima ni al pulsar cambian de color. El tema tiene una
   regla button:hover que pinta todos los botones con su color de marca, asi
   que se le gana por especificidad con el atributo del componente, sin
   recurrir a !important. El foco sigue marcandose con el contorno, que es
   lo que pide el criterio 2.4.7 y no es un cambio de color del boton. */
[data-pd-resenas] .pd-resenas__flecha,
[data-pd-resenas] .pd-resenas__flecha:hover,
[data-pd-resenas] .pd-resenas__flecha:focus,
[data-pd-resenas] .pd-resenas__flecha:active {
	color: inherit;
	background-color: #fff;
	box-shadow: 0 0 0 1px #d9d9d9, 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-pd-resenas] .pd-resenas__flecha:hover::before,
[data-pd-resenas] .pd-resenas__flecha:focus::before,
[data-pd-resenas] .pd-resenas__flecha:active::before {
	border-color: #5e5e5e;
}

[data-pd-resenas] .pd-resena__mas,
[data-pd-resenas] .pd-resena__mas:hover,
[data-pd-resenas] .pd-resena__mas:focus,
[data-pd-resenas] .pd-resena__mas:active {
	color: #6b6b6b;
	background: none;
}

[data-pd-resenas] .pd-resena__mas:hover {
	text-decoration: underline;
}