/* ══════════════════════════════════════════════════════════════
   TABLET Y TELÉFONO
   La composición de escritorio son dos columnas: carátula fija a la
   izquierda y mazo a la derecha. En vertical no hay ancho para las dos,
   así que la escena pasa a una columna — portada arriba, mazo abajo. En
   horizontal el ancho sobra y el alto falta, así que ahí se conservan
   las dos columnas y lo que se ajusta es el alto.
   Va al final de la hoja para ganarle a los bloques de #ov anteriores
   sin tener que tocarlos.
   ══════════════════════════════════════════════════════════════ */

/* ── pantallas anchas: la composición se centra ─────────────────── */
/* La carátula está anclada a la izquierda con un tope de 82px, así que
   pasado cierto ancho queda pegada al borde mientras el mazo se va al
   otro extremo. El sobrante por encima de 1440 se reparte a los dos
   costados: el eje de las tarjetas no se mueve y la columna entra. */
@media(min-width:1441px){
  #ov{--ovg:calc((100% - 1440px)/2)}
  #ov .cover{left:calc(clamp(34px,4.4vw,82px) + var(--ovg))}
  #ov .cover-bg{width:calc(clamp(450px,47vw,735px) + var(--ovg))}
  #ov .stage{left:calc(clamp(320px,32vw,492px) + var(--ovg));right:var(--ovg)}
  #ov .mark{left:calc(clamp(20px,3vw,44px) + var(--ovg))}
  /* la referencia no entra con la composición: queda contra el margen */
}

/* ── composición pareja: mismo margen a los dos costados ─────────────
   El margen no se elige: se deduce. Lo que ocupa la pantalla es la
   columna de la portada, el aire del medio y el ancho visible del mazo
   —la tarjeta del frente más las dos vecinas, que asoman 0,71 de tarjeta
   a cada lado, o sea 1,419 anchos en total—. Lo que sobra se parte al
   medio y ese es el margen; el mazo se centra en la banda que queda a su
   derecha, así que el aire contra el borde derecho da exactamente igual
   que el de la izquierda. Debajo de 1181px mandan los layouts angostos. */
@media(min-width:1181px){
  #ov{--cw:clamp(310px,33vw,500px);
      --cardw:clamp(186px,min(31.5vw,50vh),430px);
      --deckw:calc(var(--cardw) * 1.419);
      --colgap:clamp(48px,5.2vw,104px);
      --M:max(clamp(34px,4.4vw,82px),
             calc((100% - var(--cw) - var(--colgap) - var(--deckw))/2))}
  #ov .cover{left:var(--M);width:var(--cw)}
  #ov .stage{left:calc(var(--M) + var(--cw) + var(--colgap));right:var(--M)}
  #ov .cover-bg{width:calc(var(--M) + var(--cw) + clamp(40px,4.4vw,96px))}
}

/* ── vertical: una sola columna ─────────────────────────────────── */
@media(max-width:1100px) and (orientation:portrait){
  #ov{--frame:clamp(6px,1.6vw,12px)}
  /* En teléfono el alto de la ventana no es una medida fija: la barra del
     navegador entra y sale. Con la escena clavada a la altura de la
     ventana el contenido no tenía a dónde ir y se montaba. Acá la página
     vuelve al flujo normal, la escena pide el alto de la ventana como
     mínimo y si el contenido pide más, se scrollea. */
  html,body{height:auto}
  body:not(.reading){overflow:visible}
  /* el marco lo pone la escena, no el body: si no, se suman dos veces */
  body{padding:0}
  #ov{position:relative;inset:auto;z-index:1}
  #ov .scene{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;
    width:auto;height:auto;margin:var(--frame);
    min-height:calc(100svh - var(--frame) * 2);
    display:flex;flex-direction:column;cursor:default;
    /* el arrastre horizontal sigue siendo nuestro; el vertical, del navegador */
    touch-action:pan-y}
  #ov .cover-bg{display:none}
  #ov .mark,#ov .hint,#ov .arrows{display:none}

  /* En una columna la portada comparte el ancho de la tarjeta y va
     alineada a la izquierda: así el logotipo, el lede y el borde de la
     primera tarjeta arrancan todos sobre la misma línea. El ancho es el
     mismo min(78vw,340px) del mazo, centrado, de modo que el eje se
     mantiene en cualquier pantalla sin tener que repetir el cálculo. */
  #ov .cover{position:static;inset:auto;height:auto;
    flex:0 0 auto;display:block;text-align:left;
    width:min(78vw,340px);margin-inline:auto;
    padding:clamp(46px,11.5vw,84px) 0 0}
  #ov .cover-title{font-size:clamp(43px,13.2vw,84px);line-height:.86}
  #ov .cover-lead{display:block;max-width:none;
    margin:clamp(26px,6.6vw,42px) 0 0;
    font-size:clamp(13px,3.5vw,15.5px);line-height:1.55}
  #ov .cover-index{display:none}

  #ov .stage{position:relative;inset:auto;top:auto;left:auto;right:auto;bottom:auto;
    flex:1 1 auto;min-height:0;
    padding:clamp(34px,9vw,56px) 0 clamp(74px,16vw,104px);
    perspective:1200px}
  /* el mazo mide por sí mismo: la proporción de la tarjeta es 71/100 */
  #ov .deck{width:100%;height:calc(min(78vw,340px) * 1.408);max-height:none}
  /* Todas las tarjetas miden lo mismo: el mazo se lee como un carrusel.
     La proporción es 71/100, así que el ancho se limita también por alto
     (38vh ≈ el alto libre del mazo) para que la tarjeta llene la caja en
     vez de flotar en el medio. */
  #ov .pane,#ov .pane.on{width:min(78vw,340px)}
  /* la tarjeta respira por dentro: el canal sube de 16 a ~22 px */
  #ov .pane{--pad:clamp(20px,5.6vw,28px)}
#ov .pane[data-style="plain"] .art,
#ov .pane.on[data-style="plain"] .art{
    top:clamp(46px,12vw,66px);height:29%}
  #ov .pane.on .card-desc{max-height:none}
  #ov .card-foot{margin-top:clamp(18px,4.6vw,26px)}

  #ov .ov-foot{left:0;right:0;justify-content:center;
    bottom:clamp(26px,6.4vw,44px);font-size:11px;gap:14px}
}

/* ── horizontal angosto: dos columnas, medidas por alto ─────────── */
@media(max-width:1180px) and (orientation:landscape){
  #ov{--frame:clamp(6px,1vw,12px)}
  #ov .scene{touch-action:none}
  #ov .mark,#ov .hint,#ov .arrows{display:none}
  #ov .cover{left:clamp(20px,3vw,46px);width:clamp(230px,32vw,330px);
    top:clamp(14px,2.6vh,44px);bottom:clamp(12px,2.4vh,40px)}
  #ov .cover-bg{width:clamp(300px,46vw,480px)}
  #ov .cover-title{font-size:clamp(32px,5.8vh,64px)}
  #ov .cover-lead{margin-top:clamp(10px,1.8vh,26px);
    font-size:clamp(12px,1.6vh,15px)}
  #ov .stage{inset:clamp(14px,2.4vh,34px) 0 clamp(22px,3.6vh,52px) clamp(256px,38vw,410px)}
  #ov .pane,#ov .pane.on{width:min(42vw,52vh,420px)}
  #ov .ov-foot{bottom:clamp(10px,2.4vh,20px);right:clamp(16px,3vw,34px);font-size:11px}
}
/* con poco alto el índice de la portada no entra: manda la bajada */
@media(max-height:620px) and (orientation:landscape){
  #ov .cover-index{display:none}
}
@media(max-height:460px) and (orientation:landscape){
  #ov .cover-lead{display:none}
}

/* ══════════════════════════════════════════════════════════════════
   v17 · el vector en teléfono
   La caja del dibujo quedaba mucho más ancha que alta, y como el vector
   entra por "meet" se ajustaba por el alto: sobraba aire a los costados
   y el dibujo se leía chico. Se le da a la caja el alto que necesita
   para que el vector llegue al ancho, sin llegar a tocar el bloque de
   texto (que arranca cerca de la mitad de la tarjeta).
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:820px){
  #ov .pane[data-style="plain"] .art,
  #ov .pane.on[data-style="plain"] .art{top:7.5%;height:39%}
}

/* links de referencia: por encima del escenario de tarjetas */
#ov .ov-foot{z-index:40;pointer-events:auto}
#ov .ov-foot a{pointer-events:auto}

#ov .card-go.card-soon{padding:12px 20px;background:rgba(255,255,255,.16);color:#fff;cursor:default;text-decoration:none}
#ov a.card-go{text-decoration:none}

/* 04 Stablecoins: la moneda centrada en la tarjeta, debajo del número */
#ov .pane[data-style="plain"] .art.art-sc{left:0;right:0;width:100%;top:20%;height:36%}
#ov .pane.on[data-style="plain"] .art.art-sc{top:17%;height:40%}
@media(max-width:820px){
  #ov .pane[data-style="plain"] .art.art-sc,#ov .pane.on[data-style="plain"] .art.art-sc{top:14%;height:28%}}

/* ══ Tarjetas de video: en vez del degradé negro, blur debajo del texto
   (como en los heros). El blur sube desde abajo y se apaga en degradé
   antes de la mitad; arriba queda sólo un velo mínimo para el número. ══ */
#ov .pane.pc .fig::after{background:linear-gradient(180deg,rgba(6,10,34,.30) 0%,rgba(6,10,34,0) 24%,
  rgba(6,10,34,0) 52%,rgba(6,10,34,.30) 100%)}
#ov .pane[data-style="photo"] .fig::before{background:rgba(8,14,44,.34);
  -webkit-backdrop-filter:blur(18px) saturate(1.05);backdrop-filter:blur(18px) saturate(1.05);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 42%,rgba(0,0,0,.85) 62%,#000 78%);
          mask-image:linear-gradient(180deg,transparent 0%,transparent 42%,rgba(0,0,0,.85) 62%,#000 78%)}
/* los sellos sólo aparecen con la tarjeta al frente */
#ov .pane:not(.on) .stk{opacity:0;visibility:hidden}

/* flecha del botón: apunta a la diagonal superior derecha */
#ov .card-go i{transform:rotate(-45deg);font-size:14px;line-height:1}

/* bloque de texto de la tarjeta del frente un poco más arriba */
#ov .pane .card-copy,#ov .pane.on:not(.intro) .card-copy{padding-bottom:0}

/* flechas a los costados de la tarjeta del frente (escritorio):
   sólo el trazo, sin fondo ni borde; entran desde afuera cuando el mazo
   ya se repartió y al pasar el mouse se adelantan un poco */
@media(min-width:1181px){
  #ov .arrows{display:flex;left:clamp(320px,32vw,492px);right:0;top:calc(50% - 8px);
    justify-content:center;gap:calc(var(--cw,430px) + clamp(40px,4vw,80px))}
  #ov .arrows button,#ov .arrows button:hover:not(:disabled){width:44px;height:44px;padding:0;
    background:none;border:0;border-radius:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    color:#fff;font-size:30px;line-height:1;cursor:pointer;opacity:.85}
  #ov .arrows button:hover:not(:disabled){opacity:1}
  #ov #prev:hover:not(:disabled){transform:translateX(-5px)}
  #ov #next:hover:not(:disabled){transform:translateX(5px)}
  @media(prefers-reduced-motion:no-preference){
    #ov #prev{animation:arrIn .8s cubic-bezier(.16,1,.3,1) 1.7s backwards;--ax:18px}
    #ov #next{animation:arrIn .8s cubic-bezier(.16,1,.3,1) 1.8s backwards;--ax:-18px}
  }
}
@keyframes arrIn{from{opacity:0;transform:translateX(var(--ax))}to{opacity:.85;transform:none}}

/* misma tipografía que el resto de las páginas (archivos propios) */
@font-face{font-family:'Plus Jakarta Sans dLocal';src:url('../../fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans dLocal';src:url('../../fonts/PlusJakartaSans-Bold.woff2') format('woff2');font-weight:700 800;font-display:swap}
@font-face{font-family:'Roboto dLocal';src:url('../../fonts/Roboto-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
#ov .pane .pt{font-family:'Plus Jakarta Sans dLocal','Plus Jakarta Sans',sans-serif}
#ov .pane .card-desc{font-family:'Roboto dLocal',Roboto,sans-serif;letter-spacing:0;
  font-size:clamp(13px,1vw,14.5px);line-height:1.55}
#ov .pane .card-go{font-family:'Plus Jakarta Sans dLocal','Plus Jakarta Sans',sans-serif;
  font-size:10.5px;font-weight:700;gap:14px;padding:7px 7px 7px 19px}
#ov .pane .card-go i{width:32px;height:32px}

/* ══ Tarjetas sin video · opción C: papel #E7ECFE, el sello grande,
   girado y cortado contra la esquina superior derecha. Al pasar al
   frente las piezas del sello van apareciendo una tras otra. ══ */
#ov .pane[data-style="plain"] .art.art-sc,#ov .pane.on[data-style="plain"] .art.art-sc{
  left:auto;right:-22%;top:-11%;width:86%;height:auto;aspect-ratio:1/1;transform:rotate(-12deg)}
#ov .pane[data-style="plain"] .art.art-sc path{transform-box:fill-box;transform-origin:center}
#ov .pane[data-style="plain"] .art.art-sc{--r:-12deg}
@media(prefers-reduced-motion:no-preference){
  #ov.stk-wait .pane.on .art-sc{animation:none;opacity:0}
}
@keyframes scItem{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@media(max-width:820px){
  #ov .pane[data-style="plain"] .art.art-sc,#ov .pane.on[data-style="plain"] .art.art-sc{right:-16%;top:-8%;width:72%}}

/* número de capítulo en color sólido */
#ov .pane .pn,#ov .pane:not(.on) .pn,#ov .pane.on .pn,#ov .pane.on:not(.intro) .pn{opacity:1;color:var(--ink)}
#ov .pane.pc .pn,#ov .pane.pc.on:not(.intro) .pn{color:#fff}

/* número de capítulo sin sombra */
#ov .pane .pn,#ov .pane[data-style="photo"] .pn{filter:none;text-shadow:none}

/* líneas de fondo: siempre detrás del sello y más tenues */
#ov .pane[data-style="plain"] .art-bg{z-index:0;opacity:.55}
#ov .pane[data-style="plain"] .art{z-index:1}
#ov .pane:not(.pc) .pn,#ov .pane.on:not(.pc):not(.intro) .pn{color:#2143E9!important}
/* degradé tipo portada: base pareja y foco de luz arriba a la izquierda */
#ov .scene{background-color:#2A4CF0}
#ov .scene::before{transform-origin:94% 8%;
  background-image:none}
#ov .cover-bg{background-image:none}
#ov .cover-bg::after{opacity:.6}
/* flecha del botón: dibujada en SVG para que quede centrada en el círculo */
#ov .card-go i{transform:none;font-size:0;line-height:0}
#ov .card-go i::before{content:"";width:13px;height:13px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5l7-7M4.5 3.5h6v6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5l7-7M4.5 3.5h6v6'/%3E%3C/svg%3E") center/contain no-repeat}
#ov .card-go:hover i{transform:none}
/* más aire entre la columna de texto y el mazo */
@media(min-width:1181px){#ov{--colgap:clamp(84px,8.4vw,160px)}}
#ov .card-go i{position:relative}
#ov .card-go i::before{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
/* entrada general un poco más lenta (acompaña RVK=1.35 en 04-reveal.js) */
.rv-rise{transition:opacity 1.15s ease var(--b,0ms),transform 1.28s var(--rve) var(--b,0ms)}
#ov .cover-title.rv-rise.in{animation-duration:1.42s}
#ov .cover-title.in .lc-g{animation-duration:.78s;animation-delay:calc(var(--b,0ms) + var(--d,0ms) * 1.35)}
body.rv-on #ov .scene::before{animation-duration:1.55s}
/* flechas del mazo: centradas sobre el mazo y a la misma distancia de la tarjeta */
@media(min-width:1181px){
  #ov .arrows{left:calc(var(--M) + var(--cw) + var(--colgap));right:var(--M);gap:calc(var(--cardw) + clamp(48px,5vw,84px))}
}
/* las flechas aparecen recién cuando el mazo se acomodó y ya están en su lugar */
@media(min-width:1181px){#ov .arrows{opacity:0;transition:opacity .7s ease}#ov .arrows.fit{opacity:1}}
@media(max-width:820px){#ov .pane.on .pt{font-size:clamp(25px,6.8vw,29px)!important;line-height:1!important}}
/* descripción de la tarjeta: entra más suave */
#ov .pane .card-desc,#ov .pane:not(.on) .card-desc{opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}
#ov .pane.on .card-desc{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.16,1,.3,1) .18s,transform .9s cubic-bezier(.16,1,.3,1) .18s}
/* mobile: el mazo entra después del logo y el texto, suave y desde abajo */
@media(max-width:820px){
  #ov .stage{opacity:0}
  body.rv-on #ov .stage{animation:ovStageIn 1.2s cubic-bezier(.16,1,.3,1) 1.35s both}
  @keyframes ovStageIn{from{opacity:0;transform:translateY(36px) scale(.97)}to{opacity:1;transform:none}}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){body.rv-on #ov .stage{animation:none;opacity:1}}
/* mobile: arranque sin saltos — el fondo no escala, sólo aparece */
@media(max-width:820px){
  body.rv-on #ov .scene::before{animation:none!important;transform:none!important;opacity:1}
  #ov .scene{animation:ovSceneFade .6s ease both}
  @keyframes ovSceneFade{from{opacity:0}to{opacity:1}}
}
/* mobile: textura de cuadraditos un poco más visible */
@media(max-width:820px){
  #ov .scene::after,#ov .cover-bg::after{background-image:var(--texA),var(--texA);opacity:.68}
}

/* vectores un poco más arriba */
#ov .pane[data-style="plain"] .art,#ov .pane.on[data-style="plain"] .art{top:10%}
#ov .pane[data-style="plain"] .art.art-sc,#ov .pane.on[data-style="plain"] .art.art-sc{top:11%}
@media(max-width:820px){
  #ov .pane[data-style="plain"] .art,#ov .pane.on[data-style="plain"] .art{top:4.5%}
  #ov .pane[data-style="plain"] .art.art-sc,#ov .pane.on[data-style="plain"] .art.art-sc{top:9%}}
/* 07 The Road Ahead: la persona del clip un poco más arriba */
#ov .pane[data-i="6"] .art-clip{transform-origin:50% 0;scale:1.14;translate:0 -9%}

/* nitidez: la tarjeta quieta deja de ser capa 3D y se vuelve a dibujar
   a resolución real; los trazos terminan sólidos (sin el guion de 1) */
#ov .pane.still{will-change:auto}
#ov svg.art{shape-rendering:geometricPrecision}
@media(prefers-reduced-motion:no-preference){
  .pane.on .art .a-draw{animation:aDraw 1.15s var(--ease) var(--d,0s) both,aSolid .01s linear calc(var(--d,0s) + 1.2s) forwards}
  @keyframes aSolid{to{stroke-dasharray:none}}
}

/* llegada más suave: el dibujo arranca recién cuando la tarjeta quedó quieta
   (antes se armaba mientras todavía giraba y se veía a saltos) */
@media(prefers-reduced-motion:no-preference){
  .pane.on:not(.still) .art .a-draw{animation:none;stroke-dasharray:1;stroke-dashoffset:1}
  .pane.on:not(.still) .art .a-in{animation:none;opacity:0}
  .pane.on.still .art .a-draw{animation:aDraw 1.4s cubic-bezier(.45,0,.2,1) var(--d,0s) both,aSolid .01s linear calc(var(--d,0s) + 1.45s) forwards}
  .pane.on.still .art .a-in{animation:aIn2 .9s cubic-bezier(.22,1,.36,1) var(--d,0s) both}
  @keyframes aIn2{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
}



/* latido sin salto: arranca en opacidad plena y baja suave (antes empezaba
   en .2 y la forma se apagaba de golpe al iniciar el ciclo) */
@media(prefers-reduced-motion:no-preference){
  .pane.on .art .a-pulse{animation:aPulse2 4.4s ease-in-out var(--d,0s) infinite}
  @keyframes aPulse2{0%,100%{opacity:1}50%{opacity:.3}}
}

/* las lineas decorativas de atras tambien se arman y despues derivan lento */
@media(prefers-reduced-motion:no-preference){
  .pane.on:not(.still) .art-bg .bgp{stroke-dasharray:1;stroke-dashoffset:1}
  .pane.on.still .art-bg .bgp{stroke-dasharray:1;animation:aDraw 2.4s cubic-bezier(.45,0,.2,1) .1s both,aSolid .01s linear 2.6s forwards}
  .pane.on.still .art-bg{animation:aBgDrift 16s ease-in-out 2.6s infinite alternate}
  @keyframes aBgDrift{from{transform:translate(0,0)}to{transform:translate(-14px,8px)}}
  /* el circulo que late no aparece solo antes que el resto */
  .pane.on:not(.still) .art .a-grow{opacity:0}
  .pane.on.still .art .a-grow{animation:aGrow 5s ease-in-out var(--d,0s) infinite,aFade .9s ease calc(var(--d,0s) - .6s) both}
}

/* líneas de fondo un poco más presentes */
#ov .pane.pa .art-bg,#ov .pane[data-style="plain"] .art-bg{opacity:.6!important}
#ov .pane.pa .art-bg g{stroke-opacity:.32!important}

/* mismo grosor de trazo en todos los vectores de tarjeta, sin importar la escala del dibujo */
#ov svg.art path,#ov svg.art circle,#ov svg.art ellipse,#ov svg.art rect{vector-effect:non-scaling-stroke;stroke-width:1.6px}

#ov .pane[data-i="5"][data-style="plain"] .art{top:13%!important}
#ov .pane[data-i="5"][data-style="plain"] .art{translate:-2.5% 0}

/* Local Payments: muchos trazos superpuestos, un pelo más fino para que pese igual que el resto */
#ov .pane[data-i="1"] svg.art path,#ov .pane[data-i="1"] svg.art circle{stroke-width:1.3px}

/* tarjetas laterales: sin vector ni líneas de fondo, solo el papel y el título */
#ov .pane:not(.on) svg.art,#ov .pane:not(.on) .art-bg{opacity:0!important;transition:opacity .35s ease}
#ov .pane.on svg.art,#ov .pane.on .art-bg{transition:opacity .35s ease}

/* rendimiento: las tarjetas laterales no dibujan ni su video ni su vector
   (se ven solo con su color y título); al pasar al centro arrancan de cero */
#ov .pane.pa:not(.on) .fig{display:none!important}

/* hover en la tarjeta activa: el botón solo cambia de fondo */
#ov .card-go{transition:background-color .3s ease,color .3s ease}
@media(hover:hover){
  #ov .pane.pa.on:hover .card-go[href]{background:#0A1240!important}
  #ov .pane.pa.on:hover .card-go[href] i{color:#0A1240!important}
  #ov .pane.pc.on:hover .card-go[href]{background:#2143E9!important;color:#fff!important}
  #ov .pane.pc.on:hover .card-go[href] i{background:#fff!important;color:#2143E9!important}
  #ov .card-go i{transition:background-color .3s ease,color .3s ease}
}



/* llegada más rápida: mismo armado, en menos tiempo */
@media(prefers-reduced-motion:no-preference){
  .pane.on.still .art .a-draw{animation:aDraw .85s cubic-bezier(.45,0,.2,1) calc(var(--d,0s)*.55) both,aSolid .01s linear calc(var(--d,0s)*.55 + .9s) forwards!important}
  .pane.on.still .art .a-in{animation:aIn2 .6s cubic-bezier(.22,1,.36,1) calc(var(--d,0s)*.55) both!important}
  .pane.on.still .art .a-grow{animation:aGrow 5s ease-in-out calc(var(--d,0s)*.55) infinite,aFade .5s ease calc(var(--d,0s)*.55 - .3s) both!important}
  .pane.on.still .art-bg .bgp{animation:aDraw 1.4s cubic-bezier(.45,0,.2,1) 0s both,aSolid .01s linear 1.45s forwards!important}
}

/* hover en la tarjeta activa: todo el bloque (título, bajada y botón) sube como una pieza */
#ov .pane .card-copy{transition:transform .6s cubic-bezier(.33,1,.68,1);will-change:transform}
@media(hover:hover){#ov .pane.on:hover .card-copy{transform:translate3d(0,-8px,0)}}
#ov .pane.on:hover .card-go[href]{transform:none}
@media(max-width:820px){#ov .pane[data-i="5"] svg.art:not(#x){top:9%!important;height:33%!important}}