/* Sección "Te acompañamos en cada paso" (órbita de beneficios) del
   home. Copiado tal cual de index.html, incluyendo DOS capas de
   ajustes finos que vivían al final del archivo y que ganan la
   cascada: una que agranda las burbujas y les da su estilo "activo"
   con blur (antes se veían como miniatura), y otra que afina el
   tamaño de cada ícono en particular (cada dibujo pesa distinto
   visualmente aunque midan lo mismo). Sin estas dos capas, la
   sección se ve con las burbujas chicas y planas, no como el diseño
   final aprobado. */
#s-aco .track{position:relative;height:340vh;}
/* Mismo motivo que en Delta-8 (home-d8.css): 100dvh sigue el alto
   real visible en celular en vez de un 100vh que puede quedar corto
   mientras la barra de direcciones del navegador cambia de tamaño
   durante el scroll. El 100vh de respaldo es solo para navegadores
   que no entienden dvh. */
#s-aco .sticky{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;gap:6px;}
#s-aco .sticky::before{content:"";position:absolute;width:720px;height:720px;border-radius:44% 56% 62% 38% / 50% 42% 58% 50%;background:radial-gradient(circle,rgba(0,165,149,.1),transparent 70%);right:-280px;top:-240px;z-index:0;animation:aco_morf 18s ease-in-out infinite alternate;}
#s-aco .sticky::after{content:"";position:absolute;width:480px;height:480px;border-radius:38% 62% 55% 45% / 45% 55% 45% 55%;background:radial-gradient(circle,rgba(245,148,31,.08),transparent 70%);left:-190px;bottom:-170px;z-index:0;}
@keyframes aco_morf{to{border-radius:56% 44% 40% 60% / 44% 56% 44% 56%;}}
#s-aco .head{text-align:center;position:relative;z-index:2;padding:0 24px;}
#s-aco .eb{display:inline-flex;align-items:center;gap:7px;background:rgba(0,165,149,.09);border:1.5px solid var(--resalte);color:var(--resalte-hondo);font-family:'Poppins';font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;border-radius:999px;padding:6px 15px;margin-bottom:12px;}
#s-aco h2{font-family:'Poppins';font-weight:800;font-size:clamp(25px,3.2vw,36px);letter-spacing:-1px;line-height:1.1;}
#s-aco h2 .cur{font-family:'Caveat';font-weight:700;color:var(--resalte);font-size:1.1em;}
#s-aco .sub{color:var(--tinta-suave);font-size:14px;max-width:480px;margin:6px auto 0;}
#s-aco .stage{position:relative;width:min(680px,94vw);aspect-ratio:1.05;z-index:2;}
#s-aco .masco{position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);width:58%;height:auto;z-index:2;filter:drop-shadow(0 22px 32px rgba(30,43,39,.2));}
#s-aco .benef{position:absolute;top:0;left:0;z-index:3;display:flex;align-items:center;gap:9px;border-radius:18px;border:1.5px solid;padding:0;width:58px;height:58px;justify-content:center;font-size:21px;transition:width .45s cubic-bezier(.2,.8,.25,1),height .45s cubic-bezier(.2,.8,.25,1),background .35s,box-shadow .35s;white-space:nowrap;}
#s-aco .benef .txt{display:none;}
#s-aco .benef.act{width:auto;height:auto;padding:13px 20px;border-radius:18px;box-shadow:0 20px 42px rgba(0,0,0,.22);z-index:6;white-space:normal;max-width:250px;}
#s-aco .benef.act .txt{display:block;text-align:left;}
#s-aco .benef.act .txt small{font-family:'Poppins';font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85;display:block;}
#s-aco .benef.act .txt b{font-family:'Poppins';font-weight:700;font-size:13px;line-height:1.3;display:block;}
#s-aco .c-verde{border-color:var(--verde);background:rgba(91,168,153,.09);color:var(--verde-hondo);}
#s-aco .c-azul{border-color:var(--azul);background:rgba(55,144,200,.09);color:var(--azul-hondo);}
#s-aco .c-morado{border-color:var(--morado);background:rgba(55,35,94,.08);color:var(--morado);}
#s-aco .c-naranja{border-color:var(--cta);background:rgba(245,148,31,.09);color:var(--cta-hover);}
#s-aco .c-cafe{border-color:var(--cafe);background:rgba(122,75,31,.08);color:var(--cafe-hondo);}
@media(max-width:640px){
  #s-aco .masco{width:50%;}
  #s-aco .benef{width:48px;height:48px;font-size:17px;}
  #s-aco .benef.act{max-width:190px;padding:10px 14px;}

  /* "en cada paso ✦" se estaba partiendo mal: el texto cabía pero el
     ✦ solo se iba a su propia línea, huérfano. Al pasar la frase
     completa a su propia línea, el ✦ queda pegado a "paso" como
     debe. */
  #s-aco h2 .cur{display:block;}

  /* Hay aire de sobra entre el texto y la barra inferior de
     navegación: se sube el escenario (gomita + burbujas que orbitan)
     sin tocar el encabezado de arriba, para que respire menos abajo. */
  #s-aco .stage{margin-top:-28px;}
}

/* — ajustes finos: burbujas más grandes + estado "activo" con blur
   (vivían al final del archivo; ganan la cascada sobre todo lo de
   arriba) — */
#s-aco .masco{width:68%;height:auto;}
@media(max-width:900px){
  #s-aco .masco{width:58%;}
}
@media(max-width:640px){
  #s-aco .stage{width:min(560px,132vw);aspect-ratio:1;}
  #s-aco .masco{width:55%;}
}
#s-aco .benef{width:82px;height:82px;font-size:38px;}
#s-aco .benef .icn{fill:currentColor;stroke:none;flex-shrink:0;}
#s-aco .benef.act{max-width:320px;padding:18px 24px;gap:16px;font-size:52px;box-shadow:0 22px 46px rgba(30,43,39,.14);backdrop-filter:blur(10px) brightness(1.3);-webkit-backdrop-filter:blur(10px) brightness(1.3);}
#s-aco .benef.act .txt small{font-size:12.5px;margin-bottom:6px;}
#s-aco .benef.act .txt b{font-size:17px;line-height:1.32;color:var(--tinta);}
#s-aco .c-verde.act{background:rgba(180,211,203,.45);border-color:var(--verde);color:var(--verde-hondo);}
#s-aco .c-azul.act{background:rgba(157,201,228,.45);border-color:var(--azul);color:var(--azul-hondo);}
#s-aco .c-morado.act{background:rgba(157,147,176,.45);border-color:var(--morado);color:var(--morado);}
#s-aco .c-naranja.act{background:rgba(250,203,145,.45);border-color:var(--cta);color:var(--cta-hover);}
#s-aco .c-cafe.act{background:rgba(190,167,145,.45);border-color:var(--cafe);color:var(--cafe-hondo);}

/* — ajuste fino de tamaño por ícono (también vivía al final) — */
#s-aco .benef.act .ic-chatask{transform:scale(1);margin:0px;}
#s-aco .benef.act .ic-chatlive{transform:scale(1);margin:10px;}
#s-aco .benef.act .ic-bullseye{transform:scale(1.2);margin:5px;}
#s-aco .benef.act .ic-truckcheck{transform:scale(1.1);}
#s-aco .benef.act .ic-pinmap{transform:scale(1);}
#s-aco .benef.act .ic-fingerheart{transform:scale(1);}
@media(max-width:640px){
  #s-aco .benef{width:64px;height:64px;font-size:28px;}
  #s-aco .benef.act{font-size:36px;}
}