/* ============================================================
   Noxcom · Animaciones
   Capa opcional sobre noxcom.css. Solo actúa con html.animar, que
   js/animaciones.js pone antes del primer pintado si el visitante no
   pidió movimiento reducido. Sin JavaScript, todo se ve quieto.
   Solo se animan transform, opacity y stroke-dashoffset.
   ============================================================ */

:root{
  --suave:cubic-bezier(.2,.7,.2,1);
  --firme:cubic-bezier(.3,0,.1,1);
}

/* ------------------------------------------------------------
   Entrada del hero (al cargar)
   ------------------------------------------------------------ */
@keyframes subir{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes emerger{from{opacity:0;transform:translateY(32px) scale(.98)}to{opacity:1;transform:none}}
@keyframes asomar{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
@keyframes palabra{from{transform:translateY(105%)}to{transform:none}}
@keyframes dibujar{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

.animar .hero:not(.listo) :is(.hero__texto > *, .lienzo){opacity:0}
.animar .hero.listo .hero__texto > *{animation:subir .8s var(--suave) both}
.animar .hero.listo .hero__texto > .etiqueta{animation-delay:.05s}
.animar .hero.listo .hero__texto > .titulo-xl{animation:none}
.animar .hero.listo .hero__texto > .sub{animation-delay:.55s}
.animar .hero.listo .hero__texto > .hero__acciones{animation-delay:.68s}
.animar .hero.listo .hero__texto > .hero__micro{animation-delay:.8s}

/* Titular palabra por palabra, como una línea que se compone. */
.titulo-xl .pal{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em 0;margin:-.12em 0}
.titulo-xl .pal > span{display:inline-block}
.animar .hero.listo .titulo-xl .pal > span{animation:palabra .9s var(--firme) both;animation-delay:calc(.12s + var(--i) * 45ms)}

.animar .hero.listo .lienzo{animation:aparecer .9s ease both .1s}
.animar .hero.listo .lienzo__lineas .trazo{stroke-dasharray:1;animation:dibujar 1.6s var(--suave) both;animation-delay:calc(.35s + var(--i) * 120ms)}
.animar .hero.listo .lienzo__lineas circle{animation:aparecer .6s ease both;animation-delay:calc(.9s + var(--i) * 40ms)}

.animar .hero.listo .informe{animation:emerger 1s var(--suave) both .3s}
.animar .hero.listo .informe > *{animation:subir .7s var(--suave) both;animation-delay:calc(.55s + var(--i) * 110ms)}
.animar .hero.listo .flotante--a{animation:asomar .7s var(--suave) both 1.05s,flotar 6s ease-in-out infinite 2s}
.animar .hero.listo .flotante--b{animation:asomar .7s var(--suave) both 1.25s,flotar 7s ease-in-out infinite 2.6s}
.animar .hero.listo .insignia{animation:asomar .8s var(--suave) both .9s}

/* En reposo: las dos etiquetas flotan apenas y el semáforo late. */
@keyframes flotar{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes latido{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(2.8);opacity:0}}
.informe__semaforo i{position:relative}
.animar .informe__semaforo i::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--ambar);
  animation:latido 2.6s ease-out infinite 1.6s;
}
.animar .hero.fuera .flotante,
.animar .hero.fuera .informe__semaforo i::after{animation-play-state:paused}

/* ------------------------------------------------------------
   Revelado al desplazarse (una sola vez)
   ------------------------------------------------------------ */
.animar .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .9s var(--suave)}
.animar .rv-visible .rv{opacity:1;transform:none;transition-delay:calc(var(--i, 0) * 75ms)}
.animar .rv--lado{transform:translateX(-14px)}
.animar .rv--escala{transform:translateY(20px) scale(.97)}

/* Trazos que se dibujan al revelarse. */
.animar .rv-trazo{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--suave)}
.animar .rv-visible .rv-trazo{stroke-dashoffset:0;transition-delay:calc(.25s + var(--i, 0) * 140ms)}

/* Servicios: el icono responde al pasar. */
.servicio__icono svg{transition:transform .35s var(--suave)}
.servicio:hover .servicio__icono svg{transform:rotate(-8deg) scale(1.08)}

/* Enfoque: el número sube dentro de su caja. */
.paso__num > span{display:inline-block}
.animar .enfoque__grid .paso__num > span{opacity:0;transform:translateY(35%);transition:opacity .6s ease,transform 1s var(--firme)}
.animar .enfoque__grid.rv-visible .paso__num > span{opacity:1;transform:none;transition-delay:calc(.25s + var(--i, 0) * 140ms)}

/* Por qué Noxcom: la carta se llena, se firma y se sella. */
.animar .carta-svg .rv-hoja{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .9s var(--suave)}
.animar .carta-svg .rv-campo{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:transform .7s var(--suave)}
.animar .carta-svg .rv-sello{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(1.35) rotate(-14deg);transition:opacity .2s ease,transform .45s var(--firme)}
.animar .rv-visible .carta-svg .rv-hoja{opacity:1;transform:none;transition-delay:.15s}
.animar .rv-visible .carta-svg .rv-campo{transform:none;transition-delay:calc(.5s + var(--i, 0) * 90ms)}
.animar .rv-visible .carta-svg .rv-firma{stroke-dashoffset:0;transition:stroke-dashoffset .9s ease;transition-delay:calc(1.25s + var(--i, 0) * 450ms)}
.animar .rv-visible .carta-svg .rv-sello{opacity:1;transform:none;transition-delay:2.25s}
.animar .rv-visible .carta-svg .rv-palomita{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease;transition-delay:2.6s}
.animar .porque__visual .flotante--carta{opacity:0;transform:translateY(10px) scale(.92);transition:opacity .5s ease,transform .7s var(--suave)}
.animar .porque__visual.rv-visible .flotante--carta{opacity:1;transform:none;transition-delay:2.8s}

/* Cifras: la barra ámbar crece bajo cada número. */
.animar .cifra i{transform-origin:left;transform:scaleX(0);transition:transform .9s var(--suave)}
.animar .cifras__grid.rv-visible .cifra i{transform:none;transition-delay:calc(.35s + var(--i, 0) * 110ms)}
/* El contador envuelve la cifra en un span: que herede del número y no de «.cifra span», que es el pie de texto. */
.cifra b .num{display:inline-block;font:inherit;color:inherit;letter-spacing:inherit;font-variant-numeric:tabular-nums;text-align:right}

/* Llamada final: el nodo ámbar late mientras se ve. */
.animar .llamada__latido{transform-box:fill-box;transform-origin:center;animation:latido 2.8s ease-out infinite}
.animar .llamada.fuera .llamada__latido{animation-play-state:paused}

/* Pie: el wordmark sale desde el corte. */
.animar .pie__wordmark path{transform-box:fill-box;transform:translateY(72%);transition:transform 1.4s var(--firme)}
.animar .pie__wordmark.rv-visible path{transform:none;transition-delay:.1s}

/* Preguntas: la respuesta se despliega (donde el navegador lo admite). */
@supports selector(::details-content){
  .animar{interpolate-size:allow-keywords}
  .animar .acordeon details::details-content{
    block-size:0;overflow:clip;
    transition:block-size .38s var(--suave),content-visibility .38s allow-discrete;
  }
  .animar .acordeon details[open]::details-content{block-size:auto}
}
.animar .acordeon details[open] .acordeon__cuerpo{animation:aparecer .45s ease both}

/* ------------------------------------------------------------
   Progreso de lectura en la barra de navegación
   ------------------------------------------------------------ */
@supports (animation-timeline:scroll()){
  @keyframes progreso{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .animar .nav::before{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
    background:var(--ambar);transform-origin:left;
    animation:progreso linear both;animation-timeline:scroll(root);
  }
}

/* Impresión: todo visible. */
@media print{
  .animar .rv,.animar .rv-hoja,.animar .rv-campo,.animar .rv-sello,.animar .flotante--carta,
  .animar .cifra i,.animar .pie__wordmark path,.animar .paso__num > span{opacity:1 !important;transform:none !important}
  .animar .rv-trazo{stroke-dashoffset:0 !important}
}

/* Movimiento reducido: por si el ajuste cambia con la página abierta. */
@media (prefers-reduced-motion:reduce){
  .animar *,.animar *::before,.animar *::after{animation:none !important;transition:none !important}
  .animar .rv,.animar .rv-hoja,.animar .rv-campo,.animar .rv-sello,.animar .flotante--carta,
  .animar .cifra i,.animar .pie__wordmark path,.animar .paso__num > span{opacity:1 !important;transform:none !important}
  .animar .rv-trazo{stroke-dashoffset:0 !important}
}