/* ===== Unificação visual — alinha as páginas antigas à home nova (Estúdio Win) =====
   Carregado por último; usa !important pra sobrepor o estudiowin.css e os estilos inline. */

/* 1) Header sem glow (igual à home) */
.body-2 .navbar-left{box-shadow:none!important;border:1px solid rgba(233,243,240,.10)!important;background:rgba(6,14,12,.82)!important;-webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important}
.body-2 .navbar{box-shadow:none!important}

/* 2) Fundo unificado */
body.body-2{background:#05100E!important}

/* 3) Palavra de destaque em degradê TEAL, sem itálico — igual à home */
.gradiente-text,
h1 em, h2 em, h3 em,
.hub-h1 em, .hero-heading em{
  font-style:normal!important;
  background-image:linear-gradient(96deg,#33C0B8,#00ADA4 62%,#0a9d92)!important;
  -webkit-background-clip:text!important; background-clip:text!important;
  -webkit-text-fill-color:transparent!important; color:transparent!important;
}
@media(max-width:480px){
  .gradiente-text, h1 em, h2 em, .hero-heading em{
    background-image:linear-gradient(96deg,#33C0B8,#00ADA4 62%,#0a9d92)!important;
    -webkit-text-fill-color:transparent!important; color:transparent!important;
  }
}

/* 4) Eyebrow (rótulo acima do título) em MONO, sem pílula — igual à home */
.hero-tag,.time-tag,.services-tag,.hire-tag,.method-tag,.faq-tag,.podcast-spotify-tag,.hub-block-tag,.hub-tag,.mar-hero-badge,.mar-section-tag{
  background:transparent!important;border:0!important;padding:0!important;
  font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace!important;
  font-size:12px!important;font-weight:500!important;letter-spacing:.2em!important;
  text-transform:uppercase!important;color:#33C0B8!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}

/* 5) Botões de CTA com cantos 12px — igual à home (não pílula) */
.hero-button,a.hero-button,.hub-btn,.section-cta .hero-button,.cta-button,a.cta-button{border-radius:12px!important}

/* 6) Mobile: eyebrow numa linha só (o .2em de letter-spacing + o cap de largura quebravam feio no celular) */
.hero-tag,.time-tag,.services-tag,.hire-tag,.method-tag,.faq-tag,.podcast-spotify-tag,.hub-block-tag,.hub-tag,.mar-hero-badge,.mar-section-tag{text-wrap:balance}
@media(max-width:600px){
  .hero-tag,.time-tag,.services-tag,.hire-tag,.method-tag,.faq-tag,.podcast-spotify-tag,.hub-block-tag,.hub-tag,.mar-hero-badge,.mar-section-tag{
    font-size:10px!important;letter-spacing:.06em!important;line-height:1.5!important;max-width:100%!important;
  }
}
@media(max-width:400px){
  .hero-tag,.time-tag,.services-tag,.hire-tag,.method-tag,.faq-tag,.podcast-spotify-tag,.hub-block-tag,.hub-tag,.mar-hero-badge,.mar-section-tag{
    font-size:9px!important;letter-spacing:.03em!important;
  }
}
/* 7) Headlines quebram equilibradas no mobile — sem palavra órfã solta */
h1,h2,h3,.mar-hero-title,.hero-heading,.hub-h1,.mar-section-title{text-wrap:balance}

/* 8) Cards-link (ferramentas etc.) sem sublinhado herdado do <a> */
.hub-card,.hub-card *{text-decoration:none!important}

/* 9) Ícones dos cards de "problema" em teal (o vermelho/laranja inline destoava do brand) */
.mar-card-icon{
  background:rgba(0,173,164,.10)!important;
  border:1px solid rgba(0,173,164,.24)!important;
  color:#33C0B8!important;
}

/* ===== 10) Camada TECH — sobe o nível das páginas de serviço ===== */
/* glow ambiente teal no topo de cada seção (profundidade, sem grid pesado) */
.mar-section{background:radial-gradient(72% 46% at 50% -6%,rgba(0,173,164,.07),transparent 62%)!important}

/* cards viram "vidro" tech */
.mar-card,.mar-num-card{
  position:relative!important;overflow:hidden!important;
  background:linear-gradient(180deg,rgba(19,32,28,.82),rgba(9,18,16,.9))!important;
  border:1px solid rgba(0,173,164,.14)!important;
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s!important;
}
/* fio de brilho no topo do card, aparece no hover */
.mar-card::before,.mar-num-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(51,192,184,.7),transparent);
  opacity:0;transition:opacity .3s;
}
.mar-card:hover,.mar-num-card:hover{
  transform:translateY(-6px)!important;
  border-color:rgba(0,173,164,.42)!important;
  box-shadow:0 0 0 1px rgba(0,173,164,.14),0 30px 60px -28px rgba(0,173,164,.38)!important;
}
.mar-card:hover::before,.mar-num-card:hover::before{opacity:1}

/* números grandes em degradê teal com brilho (era cinza #fff->#9aa0a6) */
.mar-num-card .num{
  background-image:linear-gradient(120deg,#EAF3F0,#33C0B8 58%,#00ADA4)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:drop-shadow(0 0 22px rgba(0,173,164,.28));
}

/* chips de nicho com leve teal */
.mar-chip{border-color:rgba(0,173,164,.22)!important;background:rgba(0,173,164,.05)!important}
.mar-chip:hover{border-color:rgba(0,173,164,.4)!important;color:#EAF3F0!important}

/* cards de formato (.mar-prod) no mesmo vidro tech */
.mar-prod{
  position:relative!important;overflow:hidden!important;
  background:linear-gradient(180deg,rgba(19,32,28,.82),rgba(9,18,16,.9))!important;
  border:1px solid rgba(0,173,164,.14)!important;
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s!important;
}
.mar-prod:hover{
  transform:translateY(-6px)!important;
  border-color:rgba(0,173,164,.42)!important;
  box-shadow:0 0 0 1px rgba(0,173,164,.14),0 30px 60px -28px rgba(0,173,164,.38)!important;
}

/* pinos do cronograma + números de etapa = nós teal com glow (era #121212 chapado) */
.mar-tl-pin,.mar-step-num{
  background:linear-gradient(180deg,rgba(0,173,164,.16),rgba(0,173,164,.05))!important;
  border:1px solid rgba(0,173,164,.34)!important;color:#EAF3F0!important;
  box-shadow:0 0 26px -8px rgba(0,173,164,.5);
  transition:border-color .3s,box-shadow .3s,transform .3s!important;
}
.mar-tl-step:hover .mar-tl-pin,.mar-step:hover .mar-step-num{
  border-color:rgba(0,173,164,.66)!important;transform:translateY(-3px)!important;
  box-shadow:0 0 34px -4px rgba(0,173,164,.7)!important;
}

/* ===== 11) Motion — entrada mais rica + cascata (tipo a abertura dos forms) ===== */
.mar-reveal{
  transform:translateY(34px) scale(.985)!important;
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)!important;
  will-change:opacity,transform;
}
.mar-reveal.visible{transform:none!important}
@media(prefers-reduced-motion:reduce){.mar-reveal{transform:none!important;transition:none!important}}

/* cabeçalho de seção entra em sequência (tag -> título -> sub) */
.mar-section>.mar-reveal:nth-child(2){transition-delay:.09s!important}
.mar-section>.mar-reveal:nth-child(3){transition-delay:.18s!important}

/* grids em cascata: cada card entra depois do anterior */
.mar-cards>.mar-reveal:nth-child(2),.mar-num-cards>.mar-reveal:nth-child(2),.mar-produtos>.mar-reveal:nth-child(2),.mar-timeline>.mar-reveal:nth-child(2),.mar-steps>.mar-reveal:nth-child(2){transition-delay:.1s!important}
.mar-cards>.mar-reveal:nth-child(3),.mar-num-cards>.mar-reveal:nth-child(3),.mar-produtos>.mar-reveal:nth-child(3),.mar-timeline>.mar-reveal:nth-child(3),.mar-steps>.mar-reveal:nth-child(3){transition-delay:.2s!important}
.mar-cards>.mar-reveal:nth-child(4),.mar-num-cards>.mar-reveal:nth-child(4),.mar-produtos>.mar-reveal:nth-child(4),.mar-timeline>.mar-reveal:nth-child(4),.mar-steps>.mar-reveal:nth-child(4){transition-delay:.3s!important}
.mar-produtos>.mar-reveal:nth-child(5){transition-delay:.4s!important}
.mar-produtos>.mar-reveal:nth-child(6){transition-delay:.5s!important}

/* HERO: sequência de abertura no load (eyebrow -> título -> texto -> botões -> stats) */
.hero-content>.mar-reveal:nth-child(1){transition-delay:.1s!important}
.hero-content>.mar-reveal:nth-child(2){transition-delay:.24s!important}
.hero-content>.mar-reveal:nth-child(3){transition-delay:.38s!important}
.hero-content>.mar-reveal:nth-child(4){transition-delay:.52s!important}
.hero-content>.mar-reveal:nth-child(5){transition-delay:.66s!important}

/* ===== Footer novo (mesmo da home), pra funcionar nas páginas antigas via include ===== */
.hx-wrap{max-width:1200px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.hx-wrap{padding:0 20px}}
.hxf{background:#060D0B;border-top:1px solid rgba(233,243,240,.09);padding:84px 0 40px}
.hxf a{text-decoration:none!important}
.hxf-top{display:grid;grid-template-columns:1.05fr 1.5fr;gap:60px}
.hxf-brand-logo{height:30px;width:auto}
.hxf-tag{color:#96A8A3;font-size:16px;line-height:1.55;max-width:36ch;margin:22px 0 24px;font-family:Inter,system-ui,sans-serif}
.hxf-contact{display:flex;flex-direction:column;gap:9px;margin-bottom:28px}
.hxf-contact a{color:#EAF3F0;font-size:15px;font-weight:500;width:fit-content;transition:color .2s;font-family:Inter,system-ui,sans-serif}
.hxf-contact a.wa{color:#33C0B8}
.hxf-contact a:hover{color:#33C0B8}
.hxf-social{display:flex;gap:12px}
.hxf-social a{width:42px;height:42px;border:1px solid rgba(233,243,240,.16);border-radius:11px;display:grid;place-items:center;transition:border-color .2s,background .2s,transform .2s}
.hxf-social a:hover{border-color:#00ADA4;background:rgba(0,173,164,.10);transform:translateY(-2px)}
.hxf-social img{width:18px;height:18px}
.hxf-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.hxf-col h4{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#33C0B8;font-weight:500;margin:0 0 20px}
.hxf-col a{display:block;color:#96A8A3;font-size:14.5px;line-height:1.5;margin-bottom:13px;transition:color .2s;font-family:Inter,system-ui,sans-serif}
.hxf-col a:hover{color:#EAF3F0}
.hxf-col address{font-style:normal;color:#5F726D;font-size:14px;line-height:1.7;font-family:Inter,system-ui,sans-serif}
.hxf-div{height:1px;background:rgba(233,243,240,.09);margin:56px 0 28px}
.hxf-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.hxf-copy{color:#5F726D;font-size:12.5px;line-height:1.6;font-family:Inter,system-ui,sans-serif}
.hxf-copy b{color:#96A8A3;font-weight:600}
.hxf-legal{display:flex;gap:24px}
.hxf-legal a{color:#5F726D;font-size:13px;transition:color .2s;font-family:Inter,system-ui,sans-serif}
.hxf-legal a:hover{color:#33C0B8}
@media(max-width:820px){.hxf-top{grid-template-columns:1fr;gap:44px}}
@media(max-width:560px){.hxf-cols{grid-template-columns:1fr 1fr;gap:34px 20px}.hxf-bottom{flex-direction:column;align-items:flex-start;gap:20px}}

/* ===== Tipografia igual à home: títulos em Geist, corpo em Inter =====
   (o template Webflow usava 'scandia-web', que não carrega e destoava da home) */
.body-2 .hero-heading,.body-2 .time-heading,.body-2 .services-heading,.body-2 .slider-heading,
.body-2 .hire-heading,.body-2 .method-heading,.body-2 .podcast-spotify-heading,.body-2 .faq-heading,
.body-2 .cta-heading-primary,.body-2 .hire-card-title,.body-2 .service-card-title,.body-2 .slider-card-title,
.body-2 .hero-button-text,.body-2 h1,.body-2 h2,.body-2 h3{
  font-family:Geist,Inter,system-ui,sans-serif!important;
}
.body-2,.body-2 p,.body-2 li,.body-2 .hero-description,.body-2 .time-description,.body-2 .services-description,
.body-2 .hire-description,.body-2 .method-description,.body-2 .cta-heading-secondary,.body-2 .faq-question-description{
  font-family:Inter,system-ui,sans-serif!important;
}

/* Link "Ferramentas" no menu (hambúrguer) */
.ew-menu-link{display:inline-flex;align-items:center;color:#EAF3F0!important;font-family:Geist,Inter,sans-serif;font-weight:600;font-size:19px;letter-spacing:-.01em;text-decoration:none!important;padding:14px 0;transition:color .2s}
.ew-menu-link:hover{color:#33C0B8!important}

/* Sem sublinhado em nenhum link (preferência do cliente) */
.body-2 a{text-decoration:none!important}
