/* ==========================================================================
   Banner animado "Anéis vivos" — SST
   Cores e velocidade ficam nas variáveis abaixo.
   ========================================================================== */

.sst-banner{
  --sst-accent:#4ec13f;         /* verde da marca */
  --sst-accent-hover:#63d94f;
  --sst-bg:#0a1016;             /* fundo grafite */
  --sst-ink:#eef3f2;            /* texto claro */
  --sst-ink-soft:rgba(232,240,238,.62);
  --sst-speed:1;                /* 1 = normal · 0.6 = mais rápido · 1.6 = mais lento */

  position:relative;
  display:flex;
  align-items:center;
  min-height:600px;
  padding:0 clamp(24px,7vw,112px);
  background:var(--sst-bg);
  overflow:hidden;
  font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  isolation:isolate;
}

/* --- fundos ------------------------------------------------------------- */
.sst-banner__glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 520px at 74% 50%, rgba(78,193,63,.10), transparent 70%);
}
.sst-banner__scrim{
  position:absolute;left:0;top:0;bottom:0;width:56%;pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.55), transparent);
}

/* --- texto -------------------------------------------------------------- */
.sst-banner__copy{
  position:relative;z-index:3;max-width:820px;
  animation:sst-rise .9s cubic-bezier(.2,.7,.2,1) both;
}
.sst-banner__eyebrow{
  margin:0 0 22px;
  font-family:"Barlow Condensed",Archivo,sans-serif;font-weight:600;
  font-size:clamp(15px,1.2vw,22px);letter-spacing:.32em;text-transform:uppercase;
  color:var(--sst-accent);
}
.sst-banner__title{
  margin:0;font-weight:800;font-size:clamp(38px,4.6vw,76px);
  line-height:1.02;letter-spacing:-.02em;color:var(--sst-ink);text-wrap:pretty;
}
.sst-banner__title span{color:var(--sst-accent)}
.sst-banner__lead{
  margin:26px 0 0;max-width:620px;
  font-size:clamp(16px,1.25vw,22px);line-height:1.55;color:var(--sst-ink-soft);
  text-wrap:pretty;
}
.sst-banner__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}

.sst-btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:19px 34px;border-radius:4px;
  font-weight:600;font-size:clamp(16px,1.1vw,19px);text-decoration:none;
  transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.sst-btn span{font-size:1.15em;line-height:1}
.sst-btn--solid{
  background:var(--sst-accent);color:#07120a;
  box-shadow:0 10px 34px rgba(78,193,63,.28);
}
.sst-btn--solid:hover{background:var(--sst-accent-hover);box-shadow:0 14px 40px rgba(78,193,63,.42)}
.sst-btn--ghost{
  color:#dfe8e6;border:1px solid rgba(223,232,230,.28);padding:19px 30px;
}
.sst-btn--ghost:hover{border-color:var(--sst-accent);color:var(--sst-accent)}

/* --- arte animada -------------------------------------------------------- */
.sst-banner__art{
  position:absolute;right:40px;top:50%;
  width:768px;height:600px;margin-top:-300px;
  transform-style:preserve-3d;
  transform:perspective(1400px)
            rotateY(calc(var(--sst-mx,0) * -9deg))
            rotateX(calc(var(--sst-my,0) * 6deg));
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.sst-art__img,
.sst-art__rings{position:absolute;inset:0;width:100%;height:100%}
.sst-art__img{object-fit:contain}
.sst-art__rings{mix-blend-mode:screen;overflow:visible}

.sst-ring{transform-box:view-box;transform-origin:566px 442px}
.sst-ring--dashed{animation:sst-spin calc(var(--sst-speed) * 26s) linear infinite}
.sst-ring--outer {animation:sst-spin-r calc(var(--sst-speed) * 44s) linear infinite}
.sst-ring--arc   {animation:sst-spin calc(var(--sst-speed) * 18s) linear infinite}
/* acelera o anel principal quando o mouse está sobre o banner */
.sst-banner:hover .sst-ring--dashed{animation-duration:calc(var(--sst-speed) * 7s)}

.sst-node{animation:sst-halo calc(var(--sst-speed) * 3.2s) ease-out infinite}
.sst-node:nth-of-type(2){animation-delay:.8s}
.sst-node:nth-of-type(3){animation-delay:1.6s}
.sst-node:nth-of-type(4){animation-delay:2.4s}

.sst-art__sweep{
  position:absolute;left:50%;top:50%;width:44%;height:56%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0 62%, rgba(157,245,138,.20) 84%, transparent 100%);
  mix-blend-mode:screen;
  animation:sst-spin calc(var(--sst-speed) * 11s) linear infinite;
}
.sst-art__core{
  position:absolute;left:50%;top:50%;width:30%;height:38%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(78,193,63,.30), transparent 68%);
  mix-blend-mode:screen;
  animation:sst-bloom calc(var(--sst-speed) * 5s) ease-in-out infinite;
}

/* --- keyframes ----------------------------------------------------------- */
@keyframes sst-spin  {to{transform:rotate(360deg)}}
@keyframes sst-spin-r{to{transform:rotate(-360deg)}}
@keyframes sst-halo  {0%{r:9;opacity:.85} 100%{r:38;opacity:0}}
@keyframes sst-bloom {0%,100%{opacity:.25;transform:translate(-50%,-50%) scale(.94)}
                      50%{opacity:.6;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes sst-rise  {from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none}}

/* --- tablet -------------------------------------------------------------- */
@media (max-width:1400px){
  .sst-banner__art{right:-40px;width:640px;height:520px;margin-top:-260px}
  .sst-banner__copy{max-width:58%}
}

/* --- mobile -------------------------------------------------------------- */
@media (max-width:880px){
  .sst-banner{
    flex-direction:column;justify-content:flex-start;
    min-height:0;padding:26px 32px 44px;text-align:center;
  }
  .sst-banner__scrim{display:none}
  .sst-banner__glow{background:radial-gradient(520px 460px at 50% 26%, rgba(78,193,63,.14), transparent 68%)}
  .sst-banner__art{
    position:relative;right:auto;top:auto;margin:0 0 8px;
    width:100%;max-width:430px;height:min(78vw,336px);
    transform:perspective(900px) rotateY(calc(var(--sst-mx,0) * -7deg));
    align-self:center;
  }
  .sst-banner__copy{max-width:100%;order:2}
  .sst-banner__title{font-size:clamp(32px,9vw,40px);line-height:1.06}
  .sst-banner__title br{display:none}
  .sst-banner__lead{margin:16px auto 0;font-size:16px}
  .sst-banner__actions{flex-direction:column;align-items:stretch;margin-top:26px}
  .sst-btn{justify-content:center;padding:17px 24px}
  .sst-btn--ghost{display:none}
}

/* --- acessibilidade: respeita "reduzir movimento" ------------------------ */
@media (prefers-reduced-motion:reduce){
  .sst-banner *,
  .sst-banner *::before,
  .sst-banner *::after{animation:none !important;transition:none !important}
  .sst-banner__art{transform:none !important}
}


/* ==========================================================================
   Integração Monitora
   Mantém o banner original, reservando espaço para o menu fixo do site.
   ========================================================================== */
@media (min-width:881px){
  .sst-banner{
    min-height:calc(600px + var(--header-height));
    padding-top:var(--header-height);
  }
  .sst-banner__art{
    top:calc(50% + (var(--header-height) / 2));
  }
}

@media (max-width:880px){
  .sst-banner{
    padding-top:calc(var(--header-height) + 26px);
  }
}


/* Ajuste de integração para notebooks e resoluções intermediárias.
   Não altera o desenho do banner; apenas evita colisão entre texto e arte. */
@media (max-width:1280px) and (min-width:1101px){
  .sst-banner__copy{
    max-width:54%;
  }
  .sst-banner__art{
    right:-70px;
    width:600px;
    height:488px;
    margin-top:-244px;
  }
}

@media (max-width:1100px) and (min-width:881px){
  .sst-banner__copy{
    max-width:52%;
  }
  .sst-banner__title{
    font-size:clamp(38px,5vw,58px);
  }
  .sst-banner__lead{
    max-width:460px;
    font-size:16px;
  }
  .sst-banner__actions{
    gap:12px;
    margin-top:30px;
  }
  .sst-btn{
    padding:16px 22px;
    font-size:15px;
  }
  .sst-btn--ghost{
    padding:16px 20px;
  }
  .sst-banner__art{
    right:-90px;
    width:560px;
    height:460px;
    margin-top:-230px;
  }
}


/* Botão principal do banner alinhado ao CTA do menu — 2026-08-11 */
.sst-banner .sst-btn--solid {
  color: var(--white);
  background: var(--red);
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.sst-banner .sst-btn--solid:hover {
  color: var(--white);
  background: var(--red-dark);
  box-shadow: none;
  transform: translateY(-2px);
}

.sst-banner .sst-btn--solid:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}


/* Ajuste fino do título do banner — 2026-08-11 */
.sst-banner__title {
  font-size: clamp(34px, 4.05vw, 64px);
  line-height: 1.04;
}

.sst-banner__eyebrow {
  font-size: clamp(13px, 1vw, 18px);
}

.sst-banner__lead {
  max-width: 590px;
  font-size: clamp(15px, 1.08vw, 18px);
}

@media (max-width: 1280px) and (min-width: 881px) {
  .sst-banner__title {
    font-size: clamp(34px, 4.3vw, 56px);
  }
}

@media (max-width: 880px) {
  .sst-banner__title {
    font-size: clamp(34px, 9vw, 52px);
  }

  .sst-banner__lead {
    font-size: 15px;
  }
}

@media (max-width: 520px) {
  .sst-banner__title {
    font-size: clamp(32px, 10vw, 44px);
  }
}


/* Correção refinada do fundo do banner — 2026-08-11
   Objetivo: aproximar o fundo do banner ao fundo real da imagem
   e eliminar o verde chapado atrás da animação, principalmente no mobile. */
.sst-banner{
  background:
    radial-gradient(780px 420px at 74% 50%, rgba(255, 255, 255, 0.035), transparent 72%),
    linear-gradient(115deg, #0b1117 0%, #0b141b 48%, #0a1117 100%);
}

.sst-banner__glow{
  background:
    radial-gradient(900px 520px at 74% 50%, rgba(255,255,255,.025), transparent 70%);
  opacity:.55;
}

.sst-banner__scrim{
  background:linear-gradient(90deg, rgba(3,7,10,.62), transparent);
}

.sst-banner__art{
  isolation:isolate;
}

.sst-banner__art::before{
  content:"";
  position:absolute;
  inset:8% 6%;
  z-index:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(11,17,23,.94) 0%, rgba(11,17,23,.86) 34%, rgba(11,17,23,.46) 58%, rgba(11,17,23,0) 78%);
  filter:blur(8px);
  pointer-events:none;
}

.sst-art__img,
.sst-art__rings,
.sst-art__sweep,
.sst-art__core{
  z-index:1;
}

/* Reduz o brilho verde que estava “pintando” o fundo da ilustração */
.sst-art__sweep{
  background:conic-gradient(from 0deg, transparent 0 66%, rgba(157,245,138,.08) 84%, transparent 100%);
  opacity:.65;
}

.sst-art__core{
  background:radial-gradient(circle, rgba(188, 217, 198, .10), rgba(123, 165, 135, .05) 32%, transparent 68%);
  opacity:.72;
}

/* Mobile e tablet: fundo ainda mais limpo, quase sem verde aparente. */
@media (max-width: 880px){
  .sst-banner{
    background:
      linear-gradient(180deg, #0b1117 0%, #0b141b 44%, #0a1117 100%);
  }

  .sst-banner__glow{
    background:none;
    opacity:0;
  }

  .sst-banner__art::before{
    inset:10% 4%;
    background:
      radial-gradient(circle at 50% 54%, rgba(10,16,22,.96) 0%, rgba(10,16,22,.88) 34%, rgba(10,16,22,.54) 58%, rgba(10,16,22,0) 80%);
    filter:blur(7px);
  }

  .sst-art__sweep{
    background:conic-gradient(from 0deg, transparent 0 72%, rgba(157,245,138,.045) 86%, transparent 100%);
    opacity:.45;
  }

  .sst-art__core{
    background:radial-gradient(circle, rgba(210, 224, 216, .05), transparent 70%);
    opacity:.34;
  }
}

@media (max-width: 520px){
  .sst-banner{
    background:#0b1117;
  }

  .sst-banner__scrim{
    background:linear-gradient(180deg, rgba(4,8,11,.68), rgba(4,8,11,.16), transparent);
  }

  .sst-art__sweep,
  .sst-art__core{
    display:none;
  }

  .sst-banner__art::before{
    inset:12% 2%;
    filter:blur(6px);
  }
}