/* ===== Selo PUBLICIDADE animado (seção de publicidade da home) ===== */

/* --- Espaçamento harmônico no topo: #paineis agora é a 1ª seção, sob o header fixo --- */
#paineis{padding-top:150px}
@media(max-width:640px){
  #paineis{padding-top:115px}
}

/* --- Faixa PUBLICIDADE: banner animado (edge-to-edge no mobile, proporcional no desktop) --- */
#paineis .section-badge{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,2.6vw,16px);
  width:100%;margin-bottom:30px;
  padding:clamp(14px,3.4vw,20px) clamp(20px,5vw,34px);
  border-radius:16px;
  font:800 clamp(15px,3.6vw,22px)/1 "Space Grotesk",sans-serif;letter-spacing:.14em;
  background:linear-gradient(100deg,#ff4d00,#ff9a3d,#ff3d00,#ff7a1a);background-size:300% 100%;
  box-shadow:0 10px 34px rgba(255,90,0,.45),inset 0 0 0 1px rgba(255,255,255,.28);
  animation:pub-flow 5s ease-in-out infinite,pub-glow 2.2s ease-in-out infinite;
  text-shadow:0 2px 10px rgba(120,30,0,.35);
  color:#fff;
}
#paineis .section-badge:before{ /* brilho que passa */
  content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-22deg);animation:pub-shine 2.8s ease-in-out infinite;
}
@media(max-width:640px){
  #paineis .section-badge{
    width:100vw;
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    border-radius:0;
  }
}
@keyframes pub-flow{0%,100%{background-position:0 0}50%{background-position:100% 0}}
@keyframes pub-glow{0%,100%{box-shadow:0 10px 30px rgba(255,90,0,.40),0 0 0 0 rgba(255,90,0,.50),inset 0 0 0 1px rgba(255,255,255,.28)}60%{box-shadow:0 14px 44px rgba(255,90,0,.70),0 0 0 16px rgba(255,90,0,0),inset 0 0 0 1px rgba(255,255,255,.28)}}
@keyframes pub-shine{0%{left:-60%}55%,100%{left:130%}}

/* --- Ícone: dardo acertando o alvo, antes da palavra PUBLICIDADE --- */
#paineis .section-badge .pub-target-wrap{position:relative;flex:none;z-index:1;width:clamp(26px,6vw,38px);height:clamp(26px,6vw,38px)}
#paineis .section-badge .pub-target-wrap svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#paineis .section-badge .pub-dart{animation:pub-dart-throw 3.2s ease-in-out infinite}
#paineis .section-badge .pub-impact{position:absolute;inset:0;border-radius:50%;border:2px solid #fff;opacity:0;pointer-events:none;animation:pub-impact-ring 3.2s ease-out infinite}
@keyframes pub-dart-throw{
  0%{transform:translate(-13px,-11px) scale(.5) rotate(-6deg);opacity:0}
  9%{opacity:1}
  38%{transform:translate(0,0) scale(1) rotate(0deg)}
  44%{transform:translate(.5px,.5px) scale(1.06) rotate(2deg)}
  50%,78%{transform:translate(0,0) scale(1) rotate(0deg);opacity:1}
  88%{opacity:0;transform:translate(3px,-2px) scale(.7) rotate(5deg)}
  100%{transform:translate(-13px,-11px) scale(.5) rotate(-6deg);opacity:0}
}
@keyframes pub-impact-ring{
  0%,36%{opacity:0;transform:scale(.6)}
  40%{opacity:.9;transform:scale(1)}
  60%,100%{opacity:0;transform:scale(1.7)}
}

/* --- "VISTO" 30% maior --- */
#paineis .section-heading h2 .word-visto{font-size:1.3em;line-height:.9}

/* --- Título "Quem é VISTO, é LEMBRADO!" 20% menor, acompanhando a faixa acima --- */
.media-exterior-heading h2{font-size:clamp(35px,3.5vw,54px)}

@media (prefers-reduced-motion:reduce){
  #paineis .section-badge,#paineis .section-badge:before,
  #paineis .section-badge .pub-dart,#paineis .section-badge .pub-impact{animation:none}
}

/* --- Subtítulo da seção de publicidade --- */
#paineis .section-heading .pub-lead{color:#e9e9e9;letter-spacing:.04em}

/* --- Botão "Veja o catálogo completo": ícone de totem passando anúncios --- */
.catalog-teaser-icon .tt{position:relative;display:block;width:24px;height:42px}
.tt-screen{position:absolute;inset:0 0 6px;border:2px solid #fff;border-radius:4px;background:#0d0d0d;overflow:hidden;box-shadow:0 0 10px rgba(255,255,255,.35)}
.tt-slides{display:flex;flex-direction:column;width:100%;height:400%;animation:tt-slide 8s cubic-bezier(.65,0,.35,1) infinite}
.tt-slides i{display:block;flex:1;min-height:0}
.tt-slides .s1{background:radial-gradient(circle at 50% 38%,#fff 0 20%,transparent 22%),linear-gradient(#ff7a1a,#c43d00)}
.tt-slides .s2{background:linear-gradient(#fff,#fff) 50% 50%/70% 12% no-repeat,repeating-linear-gradient(135deg,#ff5a00 0 4px,#161616 4px 8px)}
.tt-slides .s3{background:linear-gradient(#fff,#fff) 50% 18%/62% 9% no-repeat,linear-gradient(#ff8a3d,#ff8a3d) 50% 52%/82% 34% no-repeat,linear-gradient(#5a5a5a,#5a5a5a) 50% 86%/52% 7% no-repeat,#151515}
.tt-screen:after{content:"";position:absolute;left:0;right:0;top:-40%;height:40%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.35),transparent);animation:tt-scan 2.6s linear infinite}
.tt-foot{position:absolute;left:50%;bottom:0;width:16px;height:4px;margin-left:-8px;border-radius:2px;background:#fff}
.tt-foot:before{content:"";position:absolute;left:50%;top:-3px;width:4px;height:3px;margin-left:-2px;background:#fff}
@keyframes tt-slide{0%,20%{transform:translateY(0)}27%,45%{transform:translateY(-25%)}52%,70%{transform:translateY(-50%)}77%,100%{transform:translateY(-75%)}}
@keyframes tt-scan{to{top:110%}}
@media (prefers-reduced-motion:reduce){.tt-slides,.tt-screen:after{animation:none}}

/* --- Título do simulador (texto mais longo): cabe em uma linha no desktop --- */
.quick-simulator-heading{max-width:1100px}
.quick-simulator-heading h2{text-wrap:balance}