/* ══════════════════════════════════════════════════════════════
   TARJETAS DE FOTO — foto a sangre, tipografía en blanco
   ══════════════════════════════════════════════════════════════ */
#ov .pane.pc,#ov .pane.pc.on{background:#0A0F32;color:#fff;
  border-color:rgba(255,255,255,.14)}
#ov .pane.pc .fig{display:block;opacity:1}
#ov .pane.pc.on .fig{opacity:1}
#ov .pane .fig,
#ov .pane .art-clip{border-radius:inherit}
#ov .pane.pc .art-clip{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:saturate(.94) contrast(1.03);
  transform:scale(1.02);transition:transform .9s var(--ease)}
#ov .pane.pc.on .art-clip{transform:scale(1)}
#ov .pane.pc .fig::after{display:block;content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,10,34,.46) 0%,rgba(6,10,34,.10) 34%,
    rgba(6,10,34,.52) 68%,rgba(6,10,34,.9) 100%)}
#ov .pane.pc .pn{color:rgba(255,255,255,.92)}
#ov .pane.pc.on:not(.intro) .pn{color:rgba(255,255,255,.82)}
#ov .pane.pc .card-tag{color:rgba(255,255,255,.66)}
#ov .pane.pc .pt{color:#fff}
#ov .pane.pc:not(.on) .pt{opacity:.92}
#ov .pane.pc .card-desc{color:rgba(255,255,255,.78)}
/* video: botón blanco y la flecha sobre azul */
#ov .pane.pc .card-go{background:#fff;color:#0A1240}
#ov .pane.pc .card-go i{background:var(--gob);color:#fff}
#ov .pane.pc:not(.on){box-shadow:0 14px 34px rgba(8,16,58,.24)}
#ov .pane.pc.on{box-shadow:0 34px 84px rgba(8,16,58,.36)}

/* ══════════════════════════════════════════════════════════════
   TARJETAS DE ANIMACIÓN — papel celeste, trazo azul
   El mazo alterna: 01 video · 02 animación · 03 video · 04 animación ·
   05 video · 06 animación. Las de animación van sobre la gama pálida
   acordada (#E7ECFE · #CED9FF · #B5C6FF, de la 02 a la 06), así que el
   fondo pasa a ser papel y todo lo que estaba calculado para fondo
   oscuro se corrige acá: el trazo sube de peso, las etiquetas ganan
   contraste y el botón se invierte.
   ══════════════════════════════════════════════════════════════ */
#ov .pane.pa .fig{opacity:1}
/* Las curvas de fondo se quedan como textura, no como dibujo: a este
   nivel se sienten y no compiten con el vector. */
#ov .pane.pa .art-bg{opacity:.28}
#ov .pane.pa .art-bg g{stroke-opacity:.13}
#ov .pane.pa .pn,
#ov .pane.pa .card-tag{color:var(--ink-70)}
#ov .pane.pa .card-desc{color:var(--ink-70)}
/* El azul del botón sale de una sola variable, acá arriba, para poder
   moverlo sin tocar las dos reglas. */
#ov{--gob:#2B46E2}
/* papel claro: botón azul con la flecha calada en blanco */
#ov .pane.pa .card-go{background:var(--gob);color:#fff}
#ov .pane.pa .card-go i{background:#fff;color:var(--gob)}
#ov .pane.pa:not(.on){box-shadow:0 12px 30px rgba(4,10,44,.18)}

/* Los clips van con la saturación un punto abajo: el mazo tiene que
   leerse como una colección y no como seis piezas de stock. */
#ov .pane.pc .art-clip{filter:saturate(.88) contrast(1.03)}

/* ═══ pista de scroll ═══
   Una sola línea con un punto que la recorre: alcanza para insinuar que
   el mazo se mueve, sin competir con la portada. Se apaga al primer gesto. */
#ov .hint{display:none;align-items:center;gap:11px;opacity:1;pointer-events:none;
  transition:opacity .6s var(--ease)}
#ov .hint.gone{opacity:0}
#ov .hint .k{font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.58)}
#ov .hint-rail{position:relative;display:block;width:46px;height:1px;order:1;
  background:rgba(255,255,255,.15)}
#ov .hint-rail i{position:absolute;top:-1.5px;left:0;width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.55);animation:hintDrift 3.6s var(--ease) infinite}
@keyframes hintDrift{
  0%{transform:translateX(0);opacity:0}
  20%{opacity:1}
  70%{opacity:1}
  100%{transform:translateX(42px);opacity:0}}
@media(prefers-reduced-motion:reduce){#ov .hint-rail i{animation:none;left:21px}}
@media(max-width:820px){#ov .hint{display:none}}