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

/* ---------- Ficha ---------- */
body .vv-caso {
max-width:1100px;
margin:0 auto;
padding:clamp(32px,6vw,80px) 20px;
color:var(--vv-texto);
}
body .vv-caso-titulo {
margin:0 0 clamp(24px,4vw,40px);
color:var(--vv-oscuro);
font-size:clamp(1.9rem,1.4rem + 2vw,3rem);
line-height:1.1;
text-align:center;
text-wrap:balance;
}
body .vv-caso-bloque {
margin:0 0 clamp(28px,4vw,48px);
}
body .vv-caso-bloque h2 {
margin:0 0 16px;
color:var(--vv-oscuro);
font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);
line-height:1.2;
}
body .vv-caso-bloque--par h2 {
text-align:center;
}
body .vv-caso-texto p {
margin:0 0 12px;
line-height:1.7;
}
body .vv-caso-lista,
body .vv-caso-pasos {
margin:0;
padding:0 0 0 1.3em;
line-height:1.7;
}
body .vv-caso-lista li,
body .vv-caso-pasos li {
margin:0 0 6px;
}

/* ---------- Antes y después ---------- */
body .vv-caso-par {
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(8px,1.4vw,16px);
}
body .vv-caso-foto {
position:relative;
margin:0;
min-width:0;
}
body .vv-caso-foto img {
display:block;
width:100%;
height:auto;
aspect-ratio:4/3;
object-fit:cover;
border-radius:var(--vv-radio,14px);
background-color:color-mix(in srgb,var(--vv-acento) 10%,#ffffff);
}
body .vv-caso-foto figcaption {
margin:10px 0 0;
color:color-mix(in srgb,var(--vv-texto) 70%,#ffffff);
font-size:12px;
font-weight:700;
letter-spacing:.18em;
text-align:center;
text-transform:uppercase;
}
body .vv-caso-zoom {
display:block;
cursor:zoom-in;
}
body .vv-caso-par--mini {
gap:2px;
}
body .vv-caso-par--mini .vv-caso-foto img {
aspect-ratio:1/1;
border-radius:0;
}
body .vv-caso-par--mini .vv-caso-foto figcaption {
position:absolute;
left:6px;
bottom:6px;
margin:0;
padding:3px 8px;
border-radius:999px;
background-color:rgba(0,0,0,.55);
color:#ffffff;
font-size:10px;
letter-spacing:.12em;
}
body .vv-caso-comparar {
position:relative;
max-width:900px;
margin:0 auto;
}
body .vv-caso-comparar-caja {
position:relative;
overflow:hidden;
border-radius:var(--vv-radio,14px);
aspect-ratio:4/3;
background-color:color-mix(in srgb,var(--vv-acento) 10%,#ffffff);
}
body .vv-caso-comparar-caja img {
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
object-fit:cover;
}
body .vv-caso-comparar-antes {
position:absolute;
inset:0;
clip-path:inset(0 calc(100% - var(--vv-pos)) 0 0);
}
body .vv-caso-comparar-linea {
position:absolute;
top:0;
bottom:0;
left:var(--vv-pos);
width:3px;
margin-left:-1.5px;
background-color:#ffffff;
box-shadow:0 0 12px rgba(0,0,0,.35);
pointer-events:none;
}
body .vv-caso-comparar-linea::after {
content:"";
position:absolute;
top:50%;
left:50%;
width:40px;
height:40px;
margin:-20px 0 0 -20px;
border-radius:50%;
background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat;
box-shadow:0 2px 10px rgba(0,0,0,.25);
}
body .vv-caso-comparar-et {
position:absolute;
top:12px;
padding:4px 10px;
border-radius:999px;
background-color:rgba(0,0,0,.55);
color:#ffffff;
font-size:11px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
pointer-events:none;
}
body .vv-caso-comparar-et--antes {
left:12px;
}
body .vv-caso-comparar-et--despues {
right:12px;
}
body .vv-caso-comparar-rango {
position:absolute;
inset:0;
width:100%;
height:100%;
margin:0;
opacity:0;
cursor:ew-resize;
}
body .vv-caso-comparar-rango:focus-visible + * ,
body .vv-caso-comparar:focus-within .vv-caso-comparar-caja {
outline:3px solid var(--vv-foco,#1a73e8);
outline-offset:3px;
}

/* ---------- Proceso, datos y categoría ---------- */
body .vv-caso-galeria {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:10px;
}
body .vv-caso-galeria img {
display:block;
width:100%;
aspect-ratio:1/1;
object-fit:cover;
border-radius:calc(var(--vv-radio,14px) * .7);
}
body .vv-caso-datos {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
gap:1px;
margin:0 0 clamp(28px,4vw,48px);
overflow:hidden;
border:1px solid color-mix(in srgb,var(--vv-acento) 18%,#ffffff);
border-radius:var(--vv-radio,14px);
background-color:color-mix(in srgb,var(--vv-acento) 18%,#ffffff);
}
body .vv-caso-datos div {
padding:16px 18px;
background-color:#ffffff;
}
body .vv-caso-datos dt {
margin:0 0 4px;
color:color-mix(in srgb,var(--vv-texto) 65%,#ffffff);
font-size:11px;
font-weight:700;
letter-spacing:.16em;
text-transform:uppercase;
}
body .vv-caso-datos dd {
margin:0;
color:var(--vv-oscuro);
font-weight:700;
}
body .vv-caso-datos a {
color:inherit;
}
body .vv-caso-cat {
margin:0 0 clamp(28px,4vw,48px);
padding:clamp(24px,4vw,40px);
border-radius:var(--vv-radio,14px);
background-color:color-mix(in srgb,var(--vv-acento) 8%,#ffffff);
text-align:center;
}
body .vv-caso-cat h2 {
margin:0 0 10px;
color:var(--vv-oscuro);
}
body .vv-caso-cat p {
max-width:60ch;
margin:0 auto 14px;
}
body .vv-caso-boton {
display:inline-flex;
align-items:center;
min-height:46px;
padding:0 22px;
border-radius:calc(var(--vv-radio,14px) * .6);
background-color:var(--vv-acento);
color:#ffffff;
font-weight:700;
text-decoration:none;
}
body .vv-caso-boton:hover {
background-color:var(--vv-oscuro);
color:#ffffff;
}
body .vv-caso-nota {
margin:24px 0 0;
padding-top:16px;
border-top:1px solid color-mix(in srgb,var(--vv-acento) 18%,#ffffff);
color:color-mix(in srgb,var(--vv-texto) 65%,#ffffff);
font-size:13px;
text-align:center;
}

/* ---------- Listado ---------- */
body .vv-casos-archivo {
max-width:1240px;
margin:0 auto;
padding:clamp(32px,6vw,80px) 20px;
}
body .vv-casos-cab {
max-width:760px;
margin:0 auto clamp(24px,4vw,40px);
text-align:center;
}
body .vv-casos-antetitulo {
margin:0 0 10px;
color:var(--vv-acento);
font-size:12px;
font-weight:700;
letter-spacing:.22em;
text-transform:uppercase;
}
body .vv-casos-titulo {
margin:0 0 12px;
color:var(--vv-oscuro);
font-size:clamp(2rem,1.5rem + 2vw,3.2rem);
line-height:1.08;
}
body .vv-casos-filtros {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
margin:0 0 clamp(24px,4vw,40px);
}
body .vv-casos-filtros a {
display:inline-flex;
align-items:center;
min-height:40px;
padding:0 18px;
border:1px solid color-mix(in srgb,var(--vv-acento) 40%,#ffffff);
border-radius:999px;
color:var(--vv-oscuro);
font-size:14px;
font-weight:600;
text-decoration:none;
}
body .vv-casos-filtros a:hover,
body .vv-casos-filtros a[aria-current] {
border-color:var(--vv-oscuro);
background-color:var(--vv-oscuro);
color:#ffffff;
}
body .vv-casos-rejilla,
body .vv-casos-cats {
display:grid;
grid-template-columns:repeat(var(--vv-casos-cols,3),minmax(0,1fr));
gap:clamp(18px,2.4vw,32px);
}
body .vv-caso-tarjeta {
display:flex;
flex-direction:column;
min-width:0;
}
body .vv-caso-tarjeta-fotos {
display:block;
overflow:hidden;
border-radius:var(--vv-radio,14px);
}
body .vv-caso-tarjeta-fotos img {
transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
body .vv-caso-tarjeta:hover .vv-caso-tarjeta-fotos img {
transform:scale(1.03);
}
body .vv-caso-tarjeta-titulo {
margin:14px 0 6px;
font-size:1.05rem;
line-height:1.3;
}
body .vv-caso-tarjeta-titulo a {
color:var(--vv-oscuro);
text-decoration:none;
}
body .vv-caso-tarjeta-titulo a:hover {
color:var(--vv-acento);
}
body .vv-caso-tarjeta-resumen {
margin:0 0 8px;
font-size:.95rem;
line-height:1.55;
}
body .vv-caso-tarjeta-cat {
margin:auto 0 0;
color:var(--vv-acento);
font-size:12px;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
}
body .vv-casos-cat {
display:flex;
flex-direction:column;
gap:4px;
color:var(--vv-oscuro);
text-decoration:none;
}
body .vv-casos-cat-foto {
display:block;
overflow:hidden;
margin:0 0 10px;
border-radius:var(--vv-radio,14px);
aspect-ratio:4/3;
background-color:color-mix(in srgb,var(--vv-acento) 10%,#ffffff);
}
body .vv-casos-cat-foto img {
display:block;
width:100%;
height:100%;
object-fit:cover;
}
body .vv-casos-cat span:last-child {
color:color-mix(in srgb,var(--vv-texto) 65%,#ffffff);
font-size:14px;
}
body .vv-casos-paginas {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:6px;
margin:clamp(24px,4vw,40px) 0 0;
}
body .vv-casos-paginas .page-numbers {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:42px;
min-height:42px;
padding:0 12px;
border-radius:999px;
color:var(--vv-oscuro);
text-decoration:none;
}
body .vv-casos-paginas .current {
background-color:var(--vv-oscuro);
color:#ffffff;
}
body .vv-casos-vacio {
text-align:center;
}

/* ---------- Carrusel ---------- */
body .vv-casos-carrusel {
position:relative;
}
body .vv-casos-carrusel-pista {
display:grid;
grid-auto-flow:column;
grid-auto-columns:calc((100% - 3 * 16px) / 4);
gap:16px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
}
body .vv-casos-carrusel-pista::-webkit-scrollbar {
display:none;
}
body .vv-casos-carrusel-item {
display:flex;
flex-direction:column;
gap:10px;
color:var(--vv-oscuro);
font-size:14px;
font-weight:600;
line-height:1.3;
text-align:center;
text-decoration:none;
scroll-snap-align:start;
}
body .vv-casos-carrusel-item .vv-caso-par {
overflow:hidden;
border-radius:calc(var(--vv-radio,14px) * .7);
}
body .vv-casos-carrusel-flecha {
position:absolute;
top:30%;
display:grid;
place-items:center;
width:42px;
height:42px;
padding:0;
border:0;
border-radius:50%;
background-color:#ffffff;
box-shadow:0 4px 16px rgba(0,0,0,.18);
color:var(--vv-oscuro);
font-size:26px;
line-height:1;
cursor:pointer;
}
body .vv-casos-carrusel-flecha[hidden] {
display:none;
}
body .vv-casos-carrusel-flecha--ant {
left:-10px;
}
body .vv-casos-carrusel-flecha--sig {
right:-10px;
}

/* ---------- Visor ---------- */
html.vv-caso-visor-abierto {
overflow:hidden;
}
body .vv-caso-visor {
position:fixed;
inset:0;
z-index:100000;
display:flex;
align-items:center;
justify-content:center;
padding:56px 12px;
background-color:rgba(10,10,12,.94);
opacity:0;
visibility:hidden;
transition:opacity .25s ease,visibility .25s ease;
}
body .vv-caso-visor.is-abierto {
opacity:1;
visibility:visible;
}
body .vv-caso-visor img {
max-width:100%;
max-height:100%;
object-fit:contain;
border-radius:6px;
}
body .vv-caso-visor button {
position:absolute;
display:grid;
place-items:center;
width:46px;
height:46px;
padding:0;
border:0;
border-radius:50%;
background-color:rgba(255,255,255,.14);
color:#ffffff;
font-size:28px;
line-height:1;
cursor:pointer;
}
body .vv-caso-visor-cerrar {
top:10px;
right:10px;
}
body .vv-caso-visor-ant {
left:10px;
}
body .vv-caso-visor-sig {
right:10px;
}
body .vv-caso-visor.is-una .vv-caso-visor-ant,
body .vv-caso-visor.is-una .vv-caso-visor-sig {
display:none;
}

/* ---------- Móvil ---------- */
@media (max-width:959px) {
body .vv-casos-rejilla,
body .vv-casos-cats {
grid-template-columns:repeat(min(2,var(--vv-casos-cols,3)),minmax(0,1fr));
}
body .vv-casos-carrusel-pista {
grid-auto-columns:calc((100% - 16px) / 2.3);
}
}
@media (max-width:599px) {
body .vv-casos-rejilla,
body .vv-casos-cats {
grid-template-columns:1fr;
}
body .vv-casos-carrusel-pista {
grid-auto-columns:78%;
}
body .vv-casos-carrusel-flecha {
display:none;
}
}
@media (prefers-reduced-motion:reduce) {
body .vv-caso-tarjeta-fotos img,
body .vv-caso-visor,
body .vv-casos-carrusel-pista {
transition:none;
scroll-behavior:auto;
}
}