/* Valoraciones de la tienda (inc/resenas.php). Diseño nuevo (Raúl, 04/10/2026): sin foto en las tarjetas («así parece
   que todos sean del mismo retrato y queda fake»), tarjetas claras con las esquinas de la casa (arriba a la izquierda y
   abajo a la derecha a canto vivo), cabecera en una fila (título, nota media y flechas) y sin el recuadro rosa. */
.istrice-resenas {
	--istrice-estrella: #ce953d;
	--istrice-resena-fondo: #ffffff;
	--istrice-resena-tinta: #181818;
	--istrice-resena-suave: #5f6068;
	--istrice-resena-linea: rgba(24, 24, 24, .09);
	--istrice-resenas-hueco: 16px;
	margin-top: 56px;
	color: var(--istrice-resena-tinta);
}
html.istrice-noche .istrice-resenas {
	--istrice-estrella: #ffa832;
	--istrice-resena-fondo: #262838;
	--istrice-resena-tinta: #eeeadb;
	--istrice-resena-suave: #c4c0b2;
	--istrice-resena-linea: rgba(255, 255, 255, .12);
}
.istrice-resenas__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.istrice-resenas__titulo { margin: 0; font-size: 2.125rem; line-height: 1.1; color: inherit; }
.istrice-resenas__media { margin: 0 auto 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.875rem; color: var(--istrice-resena-suave); }
.istrice-resenas__numero { font-family: var(--wp--preset--font-family--outfit); font-weight: 700; font-size: 1.25rem; line-height: 1; color: var(--istrice-resena-tinta); }
.istrice-resenas__estrellas { color: var(--istrice-estrella); letter-spacing: 2px; white-space: nowrap; }
.istrice-resenas__estrellas .is-vacia { opacity: .25; }
.istrice-resenas__cuenta { color: var(--istrice-resena-suave); }
.istrice-resenas__flechas { display: flex; gap: 8px; }
.istrice-resenas__flecha {
	width: 42px; height: 42px; padding: 0 0 3px; border: 0; border-radius: 0 9px 0 9px;
	background: var(--istrice-resena-fondo); color: var(--istrice-resena-tinta); box-shadow: inset 0 0 0 1px var(--istrice-resena-linea);
	font-family: inherit; font-size: 24px; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.istrice-resenas__flecha:hover:not(:disabled) { background: #b53e30; color: #fbeee6; }
.istrice-resenas__flecha:disabled { opacity: .35; cursor: default; }
.istrice-resenas__flecha:focus-visible, .istrice-resenas__ver:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.istrice-resenas.sin-flechas .istrice-resenas__flechas { display: none; }

/* La pista: tres tarjetas a la vista que se pasan con las flechas o deslizando */
.istrice-resenas__pista {
	position: relative; list-style: none; margin: 0 0 -12px; padding: 4px 2px 18px;
	display: grid; grid-auto-flow: column; gap: var(--istrice-resenas-hueco);
	grid-auto-columns: calc((100% - 2 * var(--istrice-resenas-hueco)) / 3);
	overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.istrice-resenas__pista::-webkit-scrollbar { display: none; }
@media (max-width: 1100px) { .istrice-resenas__pista { grid-auto-columns: calc((100% - var(--istrice-resenas-hueco)) / 2); } }
@media (max-width: 640px) {
	.istrice-resenas__titulo { font-size: 1.75rem; }
	.istrice-resenas__flechas { display: none; }
	.istrice-resenas__pista { grid-auto-columns: 86%; }
}

.istrice-resena {
	position: relative; scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden;
	border-radius: 0 18px 0 18px; background: var(--istrice-resena-fondo); color: var(--istrice-resena-tinta);
	box-shadow: inset 0 0 0 1px var(--istrice-resena-linea), 0 2px 10px rgba(24, 24, 24, .05);
}
.istrice-resena__foto { display: none; }
.istrice-resena__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; }
.istrice-resena__nota { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--istrice-resena-suave); }
.istrice-resena__nota .istrice-resenas__estrellas { letter-spacing: 3px; font-size: 15px; }
.istrice-resena__texto {
	margin: 0; padding: 0; border: 0; font-family: inherit; font-style: normal; font-size: 15.5px; line-height: 1.55; color: inherit;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
.istrice-resena__mas { align-self: flex-start; font-size: 14px; font-weight: 600; color: #b53e30; }
html.istrice-noche .istrice-resena__mas { color: #f0a07c; }
.istrice-resena__quien {
	margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--istrice-resena-linea);
	display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.35;
}
.istrice-resena__quien span, .istrice-resena__quien a { color: var(--istrice-resena-suave); font-size: 13px; text-decoration: none; }
/* Toda la tarjeta se pulsa: un botón transparente encima que abre la ventana */
.istrice-resena__abrir { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; border: 0; border-radius: 0 18px 0 18px; background: transparent; cursor: pointer; }
.istrice-resena__abrir:focus-visible { outline: 3px solid #b53e30; outline-offset: -3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.istrice-resena { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease; }
	.istrice-resena:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--istrice-resena-linea), 0 12px 26px rgba(24, 24, 24, .1); }
}
@media (prefers-reduced-motion: no-preference) { .istrice-resenas__pista { scroll-behavior: smooth; } }

/* «Leer entera»: la valoración completa en una ventana encima de la página (la tarjeta no cambia de tamaño) */
html.istrice-ventana-abierta { overflow: hidden; }
.istrice-resenas__ventana {
	width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 0 18px 0 18px;
	background: var(--istrice-resena-fondo); color: var(--istrice-resena-tinta); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); overflow: hidden;
}
.istrice-resenas__ventana::backdrop { background: rgba(20, 24, 34, .55); }
.istrice-resenas__ventana-dentro { display: block; max-height: calc(100vh - 48px); overflow-y: auto; }
.istrice-resenas__ventana-foto { display: none; }
.istrice-resenas__ventana-texto { display: flex; flex-direction: column; gap: 16px; padding: 54px 30px 26px; }
.istrice-resena__texto.is-entera { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 16.5px; line-height: 1.65; }
.istrice-resenas__ventana .istrice-resena__quien { margin-top: 6px; }
.istrice-resenas__ver { align-self: flex-start; display: inline-block; padding: 12px 22px; border-radius: 3px; background: #ed9698; color: #181818; font-size: 14px; font-weight: 500; text-decoration: none; }
.istrice-resenas__ver:hover { background: #181818; color: #ffffff; }
.istrice-resenas__cerrar {
	position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; padding: 0 0 2px; border: 0; border-radius: 0 9px 0 9px;
	background: var(--istrice-resena-fondo); color: var(--istrice-resena-tinta); box-shadow: inset 0 0 0 1px var(--istrice-resena-linea);
	font-family: inherit; font-size: 24px; line-height: 1; cursor: pointer;
}
.istrice-resenas__cerrar:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* El tema pinta un anillo en :focus; la × recibe el foco al abrir la ventana: el anillo, solo con el teclado */
.istrice-resenas__cerrar:focus:not(:focus-visible), .istrice-resena__abrir:focus:not(:focus-visible) { outline: none; }
@media (max-width: 640px) { .istrice-resenas__ventana-texto { padding: 52px 20px 22px; } }