/* Cancionita — capa de animación (criterio de solutionsala.com: rv / shine / bob / pop / fill).
   Todo se apaga con prefers-reduced-motion. No se anima nada del hero que retrase el LCP. */

@keyframes cn-rwin { from{transform:translateY(100%);opacity:0} to{transform:none;opacity:1} }
@keyframes cn-pop  { from{transform:scale(.82);opacity:0} to{transform:none;opacity:1} }
@keyframes cn-bob  { 50%{transform:translateY(-7px)} }
@keyframes cn-shine{ 0%{background-position:180% 0} 100%{background-position:-80% 0} }
@keyframes cn-fill { to{width:var(--w,100%)} }
@keyframes cn-float{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-12px,0)} }

/* ---- reveal con escalonado: .rv + .rv-l / .rv-r / .rv-s ---- */
.rv{opacity:0;transform:translateY(28px);
    transition:opacity .72s cubic-bezier(.16,.84,.44,1), transform .72s cubic-bezier(.16,.84,.44,1);
    transition-delay:var(--d,0ms)}
.rv-l{transform:translateX(-34px)} .rv-r{transform:translateX(34px)}
.rv-s{transform:scale(.94)} .rv-b{transform:translateY(0);clip-path:inset(0 100% 0 0)}
.rv.in{opacity:1;transform:none}
.rv-b.in{clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.16,.84,.44,1) var(--d,0ms),opacity .4s}

/* ---- brillo que recorre los títulos en degradado ---- */
.shine{background-size:220% 100%;animation:cn-shine 5.5s linear infinite}

/* ---- flotación suave (tarjetas, discos, iconos) ---- */
.bob{animation:cn-bob 4.2s ease-in-out infinite}
.floaty{animation:cn-float 7s ease-in-out infinite;will-change:transform}

/* ---- barra de progreso de lectura en el nav ---- */
.cn-prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:70;
  background:linear-gradient(90deg,var(--a1),var(--a2));transition:width .12s linear;pointer-events:none}

/* ---- tarjetas: levantan y se iluminan ---- */
.lift{transition:transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s, border-color .35s}
.lift:hover{transform:translateY(-6px);box-shadow:0 28px 60px -28px rgba(0,0,0,.85);border-color:var(--line-2)}

/* ---- parallax muy sutil del arte del hero (se mueve con el cursor) ---- */
.tiltwrap{perspective:900px}
.tilt{transition:transform .5s cubic-bezier(.16,.84,.44,1);transform-style:preserve-3d;will-change:transform}

/* ---- números que suben ---- */
[data-count]{font-variant-numeric:tabular-nums}

/* ---- barras que se llenan al entrar ---- */
.fillbar{height:5px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.fillbar>i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--a1),var(--a2))}
.fillbar.in>i{animation:cn-fill 1.1s cubic-bezier(.16,.84,.44,1) forwards}

@media (prefers-reduced-motion: reduce){
  .rv,.rv-b{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .shine,.bob,.floaty,.fillbar>i{animation:none!important}
  .cn-prog{display:none}
  .tilt{transform:none!important}
}

/* selector de idioma: nombre completo en escritorio, codigo de 2 letras en movil */
.langsel{display:flex;gap:2px;align-items:center;background:rgba(255,255,255,.06);
  border:1px solid var(--line-2);border-radius:99px;padding:3px}
.langsel a{font-size:.78rem;font-weight:700;color:var(--muted);padding:.3rem .55rem;border-radius:99px;
  text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.langsel a:hover{color:var(--text);background:rgba(255,255,255,.08)}
.langsel a[aria-current]{color:#fff;background:linear-gradient(120deg,var(--a1),var(--a2))}
.langsel .lgc{display:none}
@media(max-width:1040px){
  .langsel .lgf{display:none}
  .langsel .lgc{display:inline}
  .langsel a{padding:.3rem .42rem;font-size:.72rem}
}

/* barra de redes (iconos) */
.redes{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.redes-t{font-size:.86rem;font-weight:700;color:var(--muted)}
.redes-ic{display:flex;gap:9px}
.redes-ic a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);
  transition:transform .25s cubic-bezier(.16,.84,.44,1), background .25s, border-color .25s}
.redes-ic a:hover{transform:translateY(-3px) scale(1.06);border-color:transparent;
  background:linear-gradient(120deg,var(--a1),var(--a2))}
.redes-ic svg{width:19px;height:19px;fill:var(--text);opacity:.85;transition:opacity .25s}
.redes-ic a:hover svg{fill:#fff;opacity:1}
@media (prefers-reduced-motion: reduce){.redes-ic a:hover{transform:none}}

/* Credito «Powered by ALA Solutions» (regla de Ana 2026-10-23 · spec: _vault/Runbooks/Credito-Powered-by-ALA.md).
   Portada: abajo a la derecha del hero, dentro de su padding inferior (no mueve nada del diseno).
   Footer: pildora oscura junto a la linea del ©. El sitio no tiene variable --sans: va su fuente directa. */
.ala-cr-hero{display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,.75);font:500 10px/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:color .25s ease}
.ala-cr-hero:hover{color:#fff}
.ala-cr-hero img{width:auto;height:17px}
.ala-cr-hero.ink{color:rgba(14,21,18,.7)}
.ala-cr-hero.ink:hover{color:#0E1512}
.ala-cr{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 12px;border-radius:999px;background:#05080B;border:1px solid rgba(255,255,255,.14);color:#E9EFEB;font:500 10px/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.ala-cr:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(5,8,11,.25)}
.ala-cr img{width:auto;height:18px}
.ala-cr span:first-child{opacity:.7}
@media (max-width:720px){.ala-cr-hero span{display:none}}
.hero-wrap>.ala-cr-hero{position:absolute;right:30px;bottom:-46px;z-index:2}
@media (min-width:861px){.hero-stats~.ala-cr-hero{bottom:2px}} /* portada ES: a la derecha de la fila de cifras, visible sin scroll */
.ala-cr-row{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;width:100%}
.ala-cr-row--c{justify-content:center}
.ala-cr-row .ala-cr{flex:none}
@media (max-width:400px){footer:has(~ .float-wa) .ala-cr-row--c{margin-bottom:40px}} /* idiomas, celular angosto: que el boton flotante de WhatsApp no tape la pildora */