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

/* ---------- Galerías y visor ---------- */
body .vv-gal {
display:grid;
grid-template-columns:repeat(var(--vv-gal-cols,4),minmax(0,1fr));
gap:.8rem;
}
body .vv-gal-foto {
position:relative;
display:block;
overflow:hidden;
aspect-ratio:1/1;
border-radius:4px;
background-color:color-mix(in srgb,var(--vv-acento) 10%,#ffffff);
}
body .vv-gal-foto img {
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
body .vv-gal-foto:hover img {
transform:scale(1.04);
}
body .vv-gals-pestanas {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
margin:0 0 26px;
}
body .vv-gals-pestana {
padding:10px 20px;
border:1px solid var(--vv-acento);
border-radius:999px;
background:none;
color:var(--vv-oscuro);
font-family:inherit;
font-size:14px;
font-weight:600;
letter-spacing:.04em;
cursor:pointer;
transition:background-color .45s cubic-bezier(.22,.61,.36,1),color .45s cubic-bezier(.22,.61,.36,1);
}
body .vv-gals-pestana:hover,
body .vv-gals-pestana.is-activa {
background-color:var(--vv-acento);
color:#ffffff;
}
html.vv-lb-activo {
overflow:hidden;
}
body .vv-lb {
position:fixed;
inset:0;
z-index:100000;
display:flex;
align-items:center;
justify-content:center;
background-color:rgba(20,16,13,.94);
opacity:0;
visibility:hidden;
transition:opacity .3s ease,visibility .3s ease;
}
body .vv-lb.is-abierta {
opacity:1;
visibility:visible;
}
body .vv-lb-fig {
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
margin:0;
padding:0;
}
body .vv-lb-fig img {
width:auto;
height:auto;
max-width:calc(100vw - 140px);
max-height:calc(100vh - 120px);
max-height:calc(100dvh - 120px);
border-radius:4px;
box-shadow:0 20px 60px rgba(0,0,0,.5);
opacity:0;
transition:opacity .45s cubic-bezier(.22,.61,.36,1);
}
body .vv-lb-fig img.is-lista {
opacity:1;
}
body .vv-lb-cerrar,
body .vv-lb-ant,
body .vv-lb-sig {
position:absolute;
z-index:2;
width:48px;
height:48px;
border:0;
border-radius:50%;
background:rgba(255,255,255,.1) center / 22px no-repeat;
cursor:pointer;
transition:background-color .4s cubic-bezier(.22,.61,.36,1);
}
body .vv-lb-cerrar:hover,
body .vv-lb-ant:hover,
body .vv-lb-sig:hover {
background-color:color-mix(in srgb,var(--vv-acento) 85%,transparent);
}
body .vv-lb-cerrar {
top:14px;
right:14px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
body .vv-lb-ant,
body .vv-lb-sig {
top:50%;
margin-top:-24px;
}
body .vv-lb-ant {
left:14px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
}
body .vv-lb-sig {
right:14px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}
body .vv-lb.is-una .vv-lb-ant,
body .vv-lb.is-una .vv-lb-sig {
display:none;
}
body .vv-lb-cont {
position:absolute;
bottom:18px;
left:50%;
color:rgba(255,255,255,.75);
font-size:13px;
letter-spacing:.1em;
transform:translateX(-50%);
}
@media only screen and (max-width:1023px) {
body .vv-gal {
grid-template-columns:repeat(min(var(--vv-gal-cols,4),3),minmax(0,1fr));
}
}
@media only screen and (max-width:767px) {
body .vv-gal {
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px;
}
body .vv-lb-fig img {
max-width:calc(100vw - 20px);
max-height:calc(100dvh - 150px);
}
body .vv-lb-ant,
body .vv-lb-sig {
top:auto;
bottom:10px;
margin-top:0;
}
body .vv-lb-ant {
left:calc(50% - 110px);
}
body .vv-lb-sig {
right:calc(50% - 110px);
}
body .vv-lb-cont {
bottom:26px;
}
}
body .vv-gals-panel[hidden] {
display:none;
}

/* ---------- Pase de fotos ---------- */
body .vv-pase {
position:relative;
}
body .vv-pase-fotos {
position:relative;
}
body .vv-pase-foto {
display:block;
width:100%;
height:auto;
opacity:0;
transition:opacity 1s ease;
}
body .vv-pase-foto:not(.is-primera) {
position:absolute;
inset:0;
height:100%;
object-fit:cover;
}
body .vv-pase-foto.is-activa {
opacity:1;
}
body .vv-pase-puntos {
position:absolute;
left:50%;
bottom:16px;
z-index:2;
display:flex;
gap:8px;
padding:8px 12px;
border-radius:999px;
background-color:rgba(20,16,13,.35);
transform:translateX(-50%);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
body .vv-pase-punto {
width:8px;
height:8px;
padding:0;
border:0;
border-radius:50%;
background-color:rgba(255,255,255,.5);
cursor:pointer;
transition:background-color .3s ease,transform .3s ease;
}
body .vv-pase-punto.is-activo {
background-color:var(--vv-acento);
transform:scale(1.3);
}
@media (prefers-reduced-motion:reduce) {
body .vv-pase-foto {
transition:opacity .3s ease;
}
}
body .vv-pase--fondo,
body .vv-pase--fondo .vv-pase-fotos {
position:absolute;
inset:0;
overflow:hidden;
}
body .vv-pase--fondo .vv-pase-foto {
position:absolute;
inset:0;
width:100%;
height:100%;
max-width:none;
object-fit:cover;
opacity:0;
transform:scale(1.08);
transition:opacity 1.4s ease,transform 7s ease-out;
}
body .vv-pase--fondo .vv-pase-foto.is-activa {
opacity:1;
transform:scale(1);
}
body .vv-pase-controles {
position:absolute;
left:50%;
bottom:14px;
z-index:6;
display:flex;
align-items:center;
gap:8px;
padding:0 6px;
border-radius:999px;
background:rgba(20,16,13,.4);
translate:-50% 0;
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
}
body .vv-pase--fondo .vv-pase-controles {
left:auto;
right:3%;
bottom:28px;
translate:none;
padding:0;
background:none;
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
body .vv-pase-flecha,
body .vv-pase-pausa {
display:flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
padding:0;
border:1px solid rgba(255,255,255,.35);
border-radius:50%;
background:rgba(17,17,17,.35);
color:#ffffff;
cursor:pointer;
transition:background-color .25s ease,border-color .25s ease;
}
body .vv-pase-flecha:hover,
body .vv-pase-pausa:hover {
border-color:var(--vv-acento);
background:color-mix(in srgb,var(--vv-acento) 35%,transparent);
}
body .vv-pase-flecha svg,
body .vv-pase-pausa svg {
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
body .vv-pase-pausa .vv-pase-play-ico {
display:none;
fill:currentColor;
stroke:none;
}
body .vv-pase-pausa[aria-pressed="true"] .vv-pase-pausa-ico {
display:none;
}
body .vv-pase-pausa[aria-pressed="true"] .vv-pase-play-ico {
display:block;
}
body .vv-pase-puntos {
position:static;
display:flex;
align-items:center;
gap:0;
padding:0;
background:none;
transform:none;
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
body .vv-pase-punto,
body .vv-pase-punto.is-activo {
position:relative;
width:26px;
height:44px;
padding:0;
border:0;
border-radius:0;
background:transparent;
transform:none;
cursor:pointer;
}
body .vv-pase-punto::before {
content:"";
position:absolute;
top:50%;
left:50%;
width:8px;
height:8px;
border-radius:50%;
background:rgba(255,255,255,.5);
translate:-50% -50%;
transition:background-color .3s ease,width .3s ease;
}
body .vv-pase-punto.is-activo::before {
width:20px;
border-radius:6px;
background:var(--vv-acento);
}
@media only screen and (max-width:767px) {
body .vv-pase--fondo .vv-pase-controles {
top:16px;
bottom:auto;
right:4%;
}
body .vv-pase-flecha {
display:none;
}
body .vv-pase-punto,
body .vv-pase-punto.is-activo {
width:22px;
}
}
@media (prefers-reduced-motion:reduce) {
body .vv-pase--fondo .vv-pase-foto {
transition:opacity .01s linear;
transform:none;
}
}