/* ═══ SEÇÃO AGORA: o fio que se desembola ═══
   Cores da Tecnologizando só aqui dentro. Tudo prefixado com agora-
   para não colidir com o resto do site. */
#agora{
  --tz-fundo:#F5F1EA; --tz-escuro:#1F1933; --tz-rosa:#FE32A5; --tz-branco:#FFFFFF;
  --tz-texto2:#4A4460; --tz-texto3:#6B6485;
  --agora-zona:340vh;
  position:relative; height:var(--agora-zona);
  background:var(--tz-fundo); color:var(--tz-escuro);
}
.agora-palco{position:sticky;top:0;overflow:hidden;background:var(--tz-fundo);
  height:100vh;height:100svh}
/* desktop: moldura de 1440 × 900 escalada, como no site da Tecnologizando;
   celular: medidas reais da tela */
.agora-moldura{position:absolute;left:0;top:0;transform-origin:top left}
.agora-svg{position:absolute;left:0;top:0;overflow:visible}
.agora-fio,.agora-seta{fill:none;stroke:var(--tz-escuro);stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round}
.agora-ponta{fill:var(--tz-rosa)}
.agora-bola{fill:var(--tz-rosa);opacity:0}

/* as dores */
.agora-dores{list-style:none;margin:0;padding:0}
.agora-dor{opacity:0;pointer-events:none;background:var(--tz-branco);
  border:1.5px solid var(--tz-escuro);border-radius:999px;padding:10px 16px;
  font-family:inherit;font-weight:600;font-stretch:100%;font-size:15px;line-height:normal;
  color:var(--tz-escuro)}
.agora-moldura.desk .agora-dores{position:absolute;left:0;top:0;width:0;height:0}
.agora-moldura.desk .agora-dor{position:absolute;left:0;top:0;white-space:nowrap}
.agora-moldura.movel .agora-dores{position:absolute;display:flex;flex-direction:column;
  align-items:center;gap:8px;width:max-content;max-width:calc(100% - 32px);
  transform:translate(-50%,-50%)}
.agora-moldura.movel .agora-dor{position:relative;text-align:center}

/* dicas */
.agora-dica{position:absolute;margin:0;font-family:var(--fonte-mono);
  text-transform:uppercase;white-space:nowrap}
.agora-dica-rolar{display:flex;align-items:center;gap:9px;color:var(--tz-texto2);
  font-size:12px;letter-spacing:.18em}
.agora-dica-rolar svg{flex:none}
.agora-dica-mouse{color:var(--tz-texto3);font-size:12px;letter-spacing:.18em}
.agora-moldura.movel .agora-dica-rolar{font-size:10.5px;letter-spacing:.12em;gap:8px}
.agora-moldura.movel .agora-dica-mouse{display:none}
.agora-area{position:absolute;pointer-events:none}

/* o fecho: "Agora · 100% Tecnologizando" sobe de dentro da linha */
.agora-txt{position:absolute;margin:0}
.agora-ano{display:block;overflow:hidden;margin:0 0 12px;font-family:var(--fonte-mono);
  font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--tz-escuro)}
.agora-tit{margin:0;overflow:hidden;padding-bottom:.05em;white-space:nowrap;
  font-weight:800;font-stretch:118%;font-size:64px;line-height:.98;letter-spacing:-.02em;
  color:var(--tz-escuro)}
.agora-ano>span,.agora-tit>span{display:block;transform:translateY(112%);will-change:transform}
.agora-moldura.movel .agora-ano{font-size:12px}
.agora-moldura.movel .agora-tit{font-stretch:104%;font-size:clamp(28px,min(10vw,8.5vh),46px);
  line-height:1}
.agora-moldura.movel .agora-tit .l2{display:block}

/* a chamada */
.agora-link{position:absolute;padding:12px 4px;white-space:nowrap;
  font-family:var(--fonte-mono);font-size:15px;color:var(--tz-escuro);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
  text-decoration-color:rgba(31,25,51,.32);
  clip-path:inset(-40% 100% -40% 0);transition:text-decoration-color .25s}
.agora-moldura.desk .agora-link{transform:translateY(-50%)}
.agora-moldura.movel .agora-link{font-size:14px}
.agora-link .seta-ext{transition:transform .25s}
.agora-link:hover{text-decoration-color:var(--tz-rosa)}
.agora-link:hover .seta-ext{transform:translate(2px,-2px)}
.agora-link:focus-visible{clip-path:none!important;outline:2px solid var(--tz-rosa);
  outline-offset:4px;border-radius:2px}
.agora-so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  #agora{height:auto}
  .agora-palco{position:relative}
}