/* ==========================================================================
   Caso Virtest (/casos/virtest/), 24/10/26.
   Sobre el motor común (assets/css/ma-caso.css). Lo propio: el somos / no somos que se tacha al leer; la voz,
   con cada rasgo que se desplaza hasta su sitio; la idea, la promesa y la firma, que se anticipan en tenue y
   se encienden al bajar, en Stack Sans; el símbolo, que se dibuja como un visto bueno; la paleta, que pinta la
   página color a color; los sellos, que giran hasta quedar firmes, y Coraal en su ventana. Las fuentes de la
   marca (Stack Sans y Source Sans) se cargan desde assets/casos/virtest/. Prefijo vt-.
   ========================================================================== */

.vt-st{font-family:'vt-stack',var(--f-text)}

.vt-so{font-family:'vt-source',var(--f-text)}

.c-6{grid-column:span 6}


/* ---------- Portada ---------- */
.vt-hero-k{margin:0 0 clamp(10px,1.4svh,16px);font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-fg3);animation:cx-aparece .9s ease .5s both}

.vt-hero .cx-hero-f img{object-position:58% 50%}


/* ---------- Ritmo de las secciones ---------- */
.vt-in{padding-bottom:clamp(110px,16svh,190px)}

.vt-es,.vt-ty,.vt-fi,.vt-cr,.vt-ap,.vt-ma{padding:clamp(120px,18svh,200px) 0 clamp(100px,14svh,170px)}

.vt-fi{padding-bottom:0}

.vt-lg{padding:0 0 clamp(120px,16svh,190px)}

.vt-bleed.cx-f--bleed{margin:clamp(70px,10vw,130px) 0 0}

.vt-bleed+.wrap{margin-top:clamp(12px,1.6vw,22px)}

.vt-r8{grid-column:5/span 8}

.vt-l8{grid-column:1/span 8}


/* ---------- 02 · Somos / no somos: lo que no es se tacha al leer ---------- */
.vt-sn{margin:clamp(70px,9vw,130px) 0 0;border-top:1px solid var(--cx-line)}

.vt-sn-k,.vt-sn-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(16px,2vw,28px);margin:0}

.vt-sn-k{padding:16px 0 8px;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-fg3)}

.vt-sn-r{--s:clamp(0, calc((var(--vp,1) * 1.7 - var(--k) * .16) / .45), 1);padding:clamp(10px,1.3vw,18px) 0;border-bottom:1px solid var(--cx-line);font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(28px,3.7vw,62px);line-height:1.1;letter-spacing:-.025em}

.vt-sn-a{color:var(--cx-fg)}

.vt-sn-b{color:var(--cx-fg3)}

.vt-sn-b>span{background:linear-gradient(#A55B5B,#A55B5B) no-repeat 0 58% / calc(var(--s) * 100%) 2px;-webkit-box-decoration-break:slice;box-decoration-break:slice}


/* ---------- 02 · La voz: cada rasgo se desplaza hasta su sitio ---------- */
.vt-voz{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:28px;margin-top:clamp(90px,11vw,150px)}

.vt-voz-x{grid-column:1/span 4}

.vt-h3{margin:0 0 16px;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(34px,3.4vw,56px);line-height:1.04;letter-spacing:-.025em;color:var(--cx-fg)}

.vt-voz-l{grid-column:6/span 7;list-style:none;margin:0;padding:0;border-top:1px solid var(--cx-line)}

.vt-voz-l li{--s:clamp(0, calc((var(--vp,1) * 1.6 - var(--k) * .09) / .5), 1);position:relative;display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr) minmax(0,8.5em);align-items:center;column-gap:clamp(14px,1.8vw,26px);padding:clamp(16px,1.6vw,22px) 0;border-bottom:1px solid var(--cx-line)}

.vt-voz-a,.vt-voz-b{font-family:var(--f-light);font-weight:300;font-size:clamp(15px,1.15vw,17px);line-height:1.3;color:var(--cx-fg3);transition:color .6s ease}

.vt-voz-a{text-align:right}

.vt-voz-l li.a .vt-voz-a,.vt-voz-l li.b .vt-voz-b{color:var(--cx-fg)}

.vt-voz-t{position:relative;height:1px;background:var(--cx-line)}

.vt-voz-t::before{content:"";position:absolute;left:50%;top:-4px;width:1px;height:9px;background:var(--cx-line)}

.vt-voz-d,.vt-voz-f{position:absolute;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%}

.vt-voz-d{z-index:1;left:calc((.5 + (var(--x) - .5) * var(--s)) * 100%);background:var(--cx-fg)}

.vt-voz-f{left:calc(var(--f) * 100%);border:1px solid var(--cx-fg);opacity:clamp(0, calc((var(--s) - .6) / .4), 1)}

.vt-voz-f em{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-family:var(--f-label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cx-fg3)}


/* ---------- 02 · Los pilares ---------- */
.vt-pil{list-style:none;margin:clamp(90px,11vw,150px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:44px;border-top:1px solid var(--cx-line)}

.vt-pil li{padding-top:22px}

.vt-pil span{display:block;font-family:var(--f-label);font-size:11px;letter-spacing:.16em;color:var(--cx-fg3)}

.vt-pil h3{margin:clamp(26px,3vw,44px) 0 14px;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(28px,2.6vw,42px);line-height:1.06;letter-spacing:-.02em;color:var(--cx-fg)}

.vt-pil p{margin:0;max-width:30ch;font-family:var(--f-light);font-weight:300;font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:var(--cx-fg2)}


/* ---------- 03 · La idea: se anticipa en tenue y se enciende al bajar ---------- */
.vt-id{height:calc(var(--n,3) * 62svh + 100svh)}

.vt-id-st{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}

.vt-id-st>.wrap{padding-top:79px}

.vt-id-l{display:grid;row-gap:clamp(20px,4svh,52px);margin-top:clamp(8px,2svh,22px)}

.vt-id-r{--a:clamp(0, calc((var(--p,1) * (var(--n,3) - .4) - var(--k) + .5) * 2.2), 1);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:clamp(16px,2vw,28px);align-items:baseline;margin:0;padding-top:clamp(12px,2svh,22px);border-top:1px solid var(--cx-line);opacity:calc(.14 + var(--a) * .86)}

.vt-id-k{font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-fg3)}

.vt-id-t{display:block;font-family:'vt-stack',var(--f-text);font-weight:200;font-size:clamp(36px,5.8vw,100px);line-height:1;letter-spacing:-.035em;color:var(--cx-fg);transform:translateY(calc((1 - var(--a)) * 26px))}

.vt-id-r:first-child .vt-id-t{font-weight:500;letter-spacing:-.04em}

html:not(.cx-js) .vt-id{height:auto;padding:120px 0}

html:not(.cx-js) .vt-id-st{position:static;height:auto}

html:not(.cx-js) .vt-id-r{opacity:1}

html:not(.cx-js) .vt-id-t{transform:none}


/* ---------- 04 · El símbolo: se dibuja como un visto bueno ---------- */
.vt-si{height:230svh}

.vt-si-st{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}

.vt-si-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,90px);align-items:center;padding-top:79px}

.vt-si-x .cx-p{margin-top:clamp(20px,2.4vw,30px)}

.vt-si-v{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:clamp(28px,5svh,56px);width:min(100%,calc((100svh - 250px) * .82))}

.vt-ck{display:block;width:100%;height:auto;overflow:visible;color:var(--cx-fg)}

.vt-ck-g{opacity:calc(.12 * (1 - clamp(0, calc((var(--p,1) - .4) / .1), 1)))}

.vt-ck-r{opacity:clamp(0, calc((var(--p,1) - .48) / .1), 1)}

.vt-si-lg{--l:clamp(0, calc((var(--p,1) - .58) / .16), 1);display:block;width:64%;height:auto;opacity:var(--l);transform:translateY(calc((1 - var(--l)) * 18px))}

html:not(.cx-js) .vt-si{height:auto;padding:120px 0}

html:not(.cx-js) .vt-si-st{position:static;height:auto}


/* ---------- 04 · El logotipo y sus versiones ---------- */
.vt-lg-g{row-gap:clamp(12px,1.6vw,22px)}

.vt-lg-f{display:flex;align-items:center;justify-content:center;margin:0;aspect-ratio:16/10;border-radius:18px;overflow:hidden}

.vt-lg-f img{display:block;height:auto}

.vt-lg-f--a{background:#252A3C;box-shadow:inset 0 0 0 1px rgba(242,242,240,.16)}

.vt-lg-f--b{background:#F2F2F0}

.vt-lg-f--a img,.vt-lg-f--b img{width:min(66%,440px)}

.vt-lg-f--c,.vt-lg-f--d,.vt-lg-f--e{aspect-ratio:1}

.vt-lg-f--c,.vt-lg-f--e{background:#B5C1D4}

.vt-lg-f--d{background:#F2F2F0}

.vt-app{display:flex;align-items:center;justify-content:center;width:46%;aspect-ratio:1;border-radius:22.5%;background:#F2F2F0;box-shadow:0 22px 44px rgba(37,42,60,.2),0 2px 5px rgba(37,42,60,.12)}

.vt-app img{width:64%;height:auto}

.vt-lg-ck{width:40%}

.vt-lg-se{width:58%}


/* ---------- 05 · El color: la paleta pinta la página ---------- */
.vt-co{height:calc(var(--n,4) * 70svh + 100svh)}

.vt-co-st{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}

.vt-co-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,90px);align-items:center;padding-top:79px}

.vt-co-k{display:flex;gap:16px;margin:0 0 clamp(10px,1.6svh,18px);font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-fg)}

.vt-co-k span{color:var(--cx-fg3)}

.vt-co-w{margin:0;font-family:'nh-ultralight',var(--f-text);font-weight:200;font-size:clamp(46px,5.6vw,98px);line-height:1;letter-spacing:-.04em;color:var(--cx-fg)}

.vt-co-w .cx-dom-a{padding-bottom:.1em}

.vt-co-p{margin:clamp(14px,2.4svh,26px) 0 0;max-width:34ch;font-family:var(--f-light);font-weight:300;font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:var(--cx-fg2)}

.vt-co-l{list-style:none;display:grid;margin:clamp(18px,3.4svh,38px) 0 0;padding:16px 0 0;max-width:34ch;border-top:1px solid var(--cx-line)}

.vt-co-l li{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease}

.vt-co-l li.on{opacity:1;transform:none}

.vt-co-l b{display:block;font-family:var(--f-label);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-fg)}

.vt-co-l small{display:block;margin-top:8px;font-family:var(--f-light);font-weight:300;font-size:clamp(15px,1.15vw,17px);line-height:1.45;color:var(--cx-fg2)}

.vt-co-v{position:relative;justify-self:end;width:100%;height:min(62svh,620px)}

.vt-co .cx-sm-f{display:none}

.vt-co-bars{position:absolute;inset:0;display:flex;gap:clamp(8px,1vw,14px)}

.vt-co-bars i{position:relative;flex:1 1 0;min-width:0;border-radius:14px;background:var(--c);box-shadow:inset 0 0 0 1px var(--cx-line);transition:flex-grow 1.1s cubic-bezier(.65,0,.35,1)}

.vt-co-bars i.on{flex-grow:3.4}

.vt-co-bars span{position:absolute;left:clamp(12px,1.2vw,18px);bottom:clamp(14px,1.4vw,20px);writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f-label);font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--t)}

html:not(.cx-js) .vt-co{height:auto;padding:120px 0}

html:not(.cx-js) .vt-co-st{position:static;height:auto}

html:not(.cx-js) .vt-co-l li{grid-area:auto;opacity:1;transform:none;margin-bottom:12px}

html:not(.cx-js) .vt-co-bars i{flex-grow:1}


/* ---------- 06 · La tipografía ---------- */
.vt-ty-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:44px;margin-top:clamp(70px,9vw,120px)}

.vt-ty-c{grid-column:span 3;padding-top:18px;border-top:1px solid var(--cx-line)}

.vt-ty-aa{margin:0;font-weight:300;font-size:clamp(110px,12.5vw,210px);line-height:.92;letter-spacing:-.035em;color:var(--cx-fg)}

.vt-ty-n{margin:18px 0 0;font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--cx-fg)}

.vt-ty-d{margin:8px 0 0;max-width:26ch;font-family:var(--f-light);font-weight:300;font-size:clamp(15px,1.1vw,17px);line-height:1.5;color:var(--cx-fg2)}

.vt-ty-j{grid-column:8/span 5;align-self:end;padding-top:18px;border-top:1px solid var(--cx-line)}

.vt-ty-1{margin:0;font-weight:500;font-size:clamp(34px,3.5vw,58px);line-height:1.04;letter-spacing:-.03em;color:var(--cx-fg)}

.vt-ty-2{margin:10px 0 0;font-weight:200;font-size:clamp(22px,2vw,32px);line-height:1.15;letter-spacing:-.015em;color:var(--cx-fg)}

.vt-ty-3{margin:24px 0 0;max-width:38ch;font-weight:300;font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:var(--cx-fg2)}

.vt-ty-3 span{color:var(--cx-fg)}


/* ---------- 07 · La firma: los sellos giran hasta quedar firmes ---------- */
.vt-fi-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:48px;align-items:center;margin-top:clamp(40px,6vw,80px)}

.vt-fi-g>.cx-lede{grid-column:1/span 6}

.vt-fi-s{grid-column:8/span 5;display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,40px)}

.vt-fi-a{display:block;width:50%;height:auto;transform:rotate(calc((1 - var(--vp,1)) * -110deg))}

.vt-fi-b{display:flex;align-items:center;justify-content:center;width:42%;aspect-ratio:1;border-radius:50%;background:#252A3C;transform:rotate(calc((1 - var(--vp,1)) * 110deg))}

.vt-fi-b img{display:block;width:80%;height:auto}


/* ---------- 08 · Coraal ---------- */
.vt-cr-lk{margin:clamp(60px,8vw,110px) 0 0;width:min(52%,400px)}

.vt-cr-lk img{display:block;width:100%;height:auto}

.vt-cr-s{margin-top:clamp(60px,8vw,110px)}

.vt-cr-s .cx-scr-d{background:#0F1320;box-shadow:0 44px 110px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.28)}

.vt-cr-s .cx-scr-bar{position:relative;background:#1B2030;border-bottom-color:rgba(242,242,240,.08)}

.vt-cr-s .cx-scr-bar i{background:#3B4258}

.vt-cr-u{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--f-label);font-size:11px;letter-spacing:.1em;color:rgba(242,242,240,.5);white-space:nowrap}

.vt-cr-w{aspect-ratio:16/9;overflow:hidden}

.vt-cr-w img{display:block;width:100%;height:100%;object-fit:cover}


/* ---------- 09 · Las aplicaciones ---------- */
.vt-ap-m img{object-position:50% 40%}


/* ---------- 10 · El manual ---------- */
.vt-band{margin-top:clamp(56px,7vw,100px);padding:10px 0 46px}

.vt-band-f{--bh:clamp(200px,38svh,420px);width:calc(var(--bh) * 16 / 9);height:var(--bh);aspect-ratio:16/9;border-radius:10px;background:#fff;box-shadow:0 20px 44px rgba(37,42,60,.16),0 1px 3px rgba(37,42,60,.1)}

.vt-band-f img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}


/* ---------- Cierre ---------- */
.vt-fin{min-height:100svh;display:flex;align-items:center;padding:clamp(110px,16svh,200px) 0}

.vt-fin-t{margin:0;text-align:center;font-family:'vt-stack',var(--f-text);font-weight:500;font-size:clamp(44px,8vw,140px);line-height:1;letter-spacing:-.045em;color:var(--cx-fg)}


/* ---------- Tableta y móvil ---------- */
@media (max-width:900px){
  .vt-r8,.vt-l8,.c-6{grid-column:1/-1}

  .vt-voz-x,.vt-voz-l{grid-column:1/-1}

  .vt-voz-l li{grid-template-columns:minmax(0,6.6em) minmax(0,1fr) minmax(0,6.6em);column-gap:12px}

  .vt-voz-a,.vt-voz-b{font-size:14px}

  .vt-pil{grid-template-columns:repeat(2,minmax(0,1fr))}

  .vt-id-st>.wrap{padding-top:71px}

  .vt-id-r{grid-template-columns:minmax(0,1fr);row-gap:8px}

  .vt-id-t{font-size:clamp(32px,9.4vw,56px)}

  .vt-si-g,.vt-co-g{grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,3.4svh,34px);align-content:center;padding-top:71px}

  .vt-si-x .cx-h{font-size:clamp(34px,9vw,52px)}

  .vt-si-x .cx-p{margin-top:14px;font-size:15px;line-height:1.55}

  .vt-si-v{width:min(78%,calc((100svh - 470px) * .95));gap:clamp(18px,3svh,30px)}

  .vt-co-w{font-size:clamp(40px,11vw,72px)}

  .vt-co-p{font-size:15px}

  .vt-co-l{margin-top:clamp(12px,2svh,20px);padding-top:12px}

  .vt-co-v{justify-self:stretch;height:clamp(150px,28svh,260px)}

  .vt-ty-c{grid-column:span 6}

  .vt-ty-j{grid-column:1/-1}

  .vt-fi-g>.cx-lede,.vt-fi-s{grid-column:1/-1}

  .vt-fi-s{justify-content:flex-start}

  .vt-cr-lk{width:min(64%,340px)}
}

@media (max-width:900px) and (min-width:600px){
  .cx-grid>.c-6{grid-column:span 6}
}

@media (max-width:760px){
  .vt-lg-g>.c-6{grid-column:1/-1}

  .vt-lg-f--c,.vt-lg-f--d{grid-column:span 6}

  .vt-lg-f--e{grid-column:1/-1;aspect-ratio:16/10}

  .vt-lg-se{width:44%}

  .vt-sn-r{font-size:clamp(24px,7.4vw,40px)}

  .vt-pil{grid-template-columns:minmax(0,1fr);row-gap:30px}

  .vt-pil h3{margin-top:18px}

  .vt-ty-aa{font-size:clamp(84px,26vw,140px)}

  .vt-co-bars span{font-size:9.5px;letter-spacing:.12em;left:10px}

  .vt-band-f{--bh:clamp(170px,30svh,260px)}

  .vt-cr-u{display:none}

  .vt-ofi.cx-f--bleed{height:auto;aspect-ratio:3/2}
}

@media (prefers-reduced-motion:reduce){
  .vt-sn-r,.vt-voz-l li{--s:1}

  .vt-id-r{--a:1}

  .vt-ck-r,.vt-si-lg{opacity:1;transform:none}

  .vt-co-l li,.vt-co-bars i,.vt-voz-a,.vt-voz-b{transition:none}

  .vt-fi-a,.vt-fi-b{transform:none}
}