/* © Fernando Martínez Marín · VEOVIRTUAL® · veovirtual.com */

/* Reseñas */
.vvr {
--vvr-acento:var(--vv-acento, #1a73e8);
--vvr-texto:var(--vv-texto, #222222);
--vvr-suave:#6b6b6b;
--vvr-estrella:#f5b301;
--vvr-radio:18px;
--vvr-ver:3;
--vvr-hueco:20px;
position:relative;
box-sizing:border-box;
width:min(1240px, 100% - 2 * clamp(16px, 4vw, 40px));
margin:0 auto;
padding:clamp(40px, 6vw, 80px) 0;
color:var(--vvr-texto);
}
.vvr *,
.vvr *::before,
.vvr *::after {
box-sizing:border-box;
}
.vvr-sr {
position:absolute !important;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;
}

/* Cabecera */
.vvr__cab {
margin-bottom:clamp(22px, 3vw, 34px);
}
.vvr__pre {
margin:0 0 8px;
color:var(--vvr-suave);
font-size:13px;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
}
.vvr__tit {
margin:0;
font-size:clamp(1.7rem, 3.2vw, 2.4rem);
line-height:1.15;
}

/* Cuerpo */
.vvr__cuerpo {
display:grid;
grid-template-columns:minmax(0, 1fr);
gap:20px;
}
.vvr__cuerpo--resumen {
grid-template-columns:minmax(220px, 300px) minmax(0, 1fr);
align-items:stretch;
}

/* Resumen */
.vvr__resumen {
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
gap:14px;
padding:clamp(22px, 3vw, 30px);
border:1px solid rgba(0,0,0,.08);
border-radius:var(--vvr-radio);
background-color:#ffffff;
color:#222222;
box-shadow:0 10px 30px -18px rgba(0,0,0,.35);
}
.vvr-g {
flex:none;
width:18px;
height:18px;
}
.vvr-g--grande {
width:40px;
height:40px;
}
.vvr__nota {
display:grid;
gap:4px;
font-size:14px;
line-height:1.3;
}
.vvr__nota strong {
color:#222222;
font-size:18px;
letter-spacing:.06em;
text-transform:uppercase;
}
.vvr__nota .vvr-estrellas svg {
width:22px;
height:22px;
}
.vvr__nota > span:last-child {
color:var(--vvr-suave);
}
.vvr__opinar {
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:44px;
padding:0 18px;
border-radius:999px;
background-color:var(--vvr-acento);
color:#ffffff;
font-size:14px;
font-weight:600;
text-align:center;
text-decoration:none;
}
.vvr__opinar:hover {
filter:brightness(.92);
}

/* Estrellas */
.vvr-estrellas {
display:inline-flex;
gap:2px;
}
.vvr-estrellas svg {
width:18px;
height:18px;
}
.vvr-e-f {
fill:#dadce0;
}
.vvr-e-l {
fill:var(--vvr-estrella);
}

/* Lista */
.vvr__carrusel {
position:relative;
min-width:0;
}
.vvr__lista {
display:grid;
grid-auto-flow:column;
grid-auto-columns:calc((100% - 2 * 20px) / 3);
gap:20px;
margin:0;
padding:6px 4px 18px;
overflow-x:auto;
list-style:none;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:thin;
overscroll-behavior-x:contain;
}
.vvr__cuerpo--resumen .vvr__lista {
grid-auto-columns:calc((100% - 20px) / 2);
}
.vvr__lista:focus-visible {
outline:3px solid var(--vv-foco, #1a73e8);
outline-offset:4px;
}
.vvr__item {
margin:0;
padding:0;
scroll-snap-align:start;
}
.vvr__tarjeta {
display:flex;
flex-direction:column;
gap:12px;
height:100%;
padding:22px;
border:1px solid rgba(0,0,0,.07);
border-radius:var(--vvr-radio);
background-color:#ffffff;
color:#222222;
box-shadow:0 12px 32px -22px rgba(0,0,0,.45);
}
.vvr__autor {
display:flex;
align-items:center;
gap:12px;
}
.vvr__autor > div {
flex:1;
min-width:0;
}
.vvr__foto {
flex:none;
width:44px;
height:44px;
border-radius:50%;
object-fit:cover;
}
.vvr__foto--ini {
display:grid;
place-items:center;
background-color:var(--vvr-acento);
color:#ffffff;
font-size:18px;
font-weight:700;
}
.vvr__nombre {
margin:0;
overflow:hidden;
color:#222222;
font-size:15px;
font-weight:700;
line-height:1.3;
text-overflow:ellipsis;
white-space:nowrap;
}
.vvr__autor time {
color:var(--vvr-suave);
font-size:13px;
}
.vvr__texto {
display:-webkit-box;
overflow:hidden;
font-size:15px;
line-height:1.6;
-webkit-line-clamp:6;
-webkit-box-orient:vertical;
}
.vvr__texto p {
margin:0;
color:#222222;
}
.vvr__tarjeta.is-abierta .vvr__texto {
display:block;
}
.vvr__mas {
align-self:flex-start;
min-height:32px;
margin-top:auto;
padding:0;
border:0;
background:none;
color:#222222;
font:inherit;
font-size:14px;
font-weight:600;
text-decoration:underline;
cursor:pointer;
}
.vvr__mas[hidden] {
display:none;
}
.vvr__mas:focus-visible,
.vvr__opinar:focus-visible {
outline:3px solid var(--vv-foco, #1a73e8);
outline-offset:3px;
}

/* Carrusel */
.vvr.is-carrusel .vvr__carrusel {
display:contents;
}
.vvr.is-carrusel .vvr__cuerpo {
row-gap:14px;
}
.vvr.is-carrusel .vvr__cuerpo--resumen .vvr__resumen {
grid-column:1;
grid-row:1;
}
.vvr.is-carrusel .vvr__cuerpo--resumen .vvr__ventana {
grid-column:2;
grid-row:1;
}
.vvr.is-carrusel .vvr__cuerpo--resumen .vvr__controles {
grid-column:2;
grid-row:2;
}
.vvr__ventana {
min-width:0;
margin:-14px 0;
padding:14px 0;
overflow:hidden;
}
.vvr.is-carrusel .vvr__lista {
display:flex;
gap:var(--vvr-hueco);
padding:0;
overflow:visible;
scroll-snap-type:none;
touch-action:pan-y;
transition:transform .6s ease;
}
.vvr.is-carrusel .vvr__item {
flex:0 0 calc((100% - (var(--vvr-ver) - 1) * var(--vvr-hueco)) / var(--vvr-ver));
min-width:0;
}
.vvr__controles[hidden] {
display:none;
}
.vvr__controles {
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}
.vvr__ctl {
display:grid;
place-items:center;
width:44px;
height:44px;
padding:0;
border:1px solid rgba(0,0,0,.12);
border-radius:50%;
background-color:#ffffff;
color:#222222;
cursor:pointer;
}
.vvr__ctl svg {
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
.vvr__ctl--pausa svg {
width:16px;
height:16px;
fill:currentColor;
stroke:none;
}
.vvr__puntos {
display:flex;
align-items:center;
gap:2px;
}
.vvr__punto {
display:grid;
place-items:center;
width:28px;
height:28px;
padding:0;
border:0;
background:none;
color:inherit;
cursor:pointer;
}
.vvr__punto::before {
content:"";
display:block;
width:9px;
height:9px;
border-radius:5px;
background-color:currentColor;
opacity:.35;
transition:width .3s ease, opacity .3s ease;
}
.vvr__punto[aria-current="true"]::before {
width:22px;
opacity:1;
}
.vvr__ctl:focus-visible,
.vvr__punto:focus-visible {
outline:3px solid var(--vv-foco, #1a73e8);
outline-offset:2px;
}
.vvr__aviso {
margin:18px 0 0;
color:var(--vvr-suave);
font-size:13px;
text-align:center;
}

@media only screen and (max-width:1100px) {
.vvr {
--vvr-ver:2;
}
}

@media only screen and (max-width:959px) {
.vvr__lista,
.vvr__cuerpo--resumen .vvr__lista {
grid-auto-columns:calc((100% - 20px) / 2);
}
}

@media only screen and (max-width:760px) {
.vvr__cuerpo--resumen {
grid-template-columns:minmax(0, 1fr);
}
.vvr__resumen {
flex-direction:row;
flex-wrap:wrap;
align-items:center;
}
.vvr__resumen .vvr__opinar {
width:auto;
}
.vvr.is-carrusel .vvr__cuerpo--resumen .vvr__resumen,
.vvr.is-carrusel .vvr__cuerpo--resumen .vvr__ventana,
.vvr.is-carrusel .vvr__cuerpo--resumen .vvr__controles {
grid-column:auto;
grid-row:auto;
}
}

@media only screen and (max-width:640px) {
.vvr {
--vvr-ver:1;
}
.vvr__lista,
.vvr__cuerpo--resumen .vvr__lista {
grid-auto-columns:86%;
gap:14px;
}
}

@media (prefers-reduced-motion:reduce) {
.vvr__lista {
scroll-behavior:auto;
}
.vvr.is-carrusel .vvr__lista,
.vvr__punto::before {
transition:none;
}
}

/* Versión accesible */
html.vv-accesible .vvr__cuerpo--resumen {
grid-template-columns:minmax(0, 1fr);
}
html.vv-accesible .vvr__lista,
html.vv-accesible .vvr.is-carrusel .vvr__lista {
grid-auto-flow:row;
grid-template-columns:1fr;
grid-auto-columns:auto;
gap:16px;
overflow:visible;
}
html.vv-accesible .vvr__ventana {
margin:0;
padding:0;
overflow:visible;
}
html.vv-accesible .vvr.is-carrusel .vvr__lista {
flex-direction:column;
transform:none !important;
}
html.vv-accesible .vvr.is-carrusel .vvr__item {
flex:none;
}
html.vv-accesible .vvr__item.is-clon {
display:none !important;
}
html.vv-accesible .vvr__texto {
display:block;
}
html.vv-accesible .vvr__mas,
html.vv-accesible .vvr__controles {
display:none !important;
}
html.vv-accesible .vvr__opinar {
background-color:#000000;
}