/* ===========================================================
   MATRIX NEGOCIAÇÕES — Estilo principal
   Paleta: verde musgo + dourado
   Tipografia: Fraunces (títulos) + Manrope (corpo)
=========================================================== */
*,*::before,*::after{box-sizing:border-box}
:root{
  --verde-900:#141F19;
  --verde-800:#1C2E23;
  --verde-700:#25392B;   /* verde principal da marca */
  --verde-600:#324B39;
  --verde-500:#42604A;
  --verde-300:#7B9683;
  --dourado-800:#8A6318;
  --dourado-700:#A67A22;
  --dourado-600:#BE8F2B; /* dourado principal (mais escuro, como pedido) */
  --dourado-500:#CE9F3B;
  --dourado-300:#E4C173;
  --dourado-100:#F1DFB0;
  --creme:#F7F4EC;
  --creme-2:#EFE9D8;
  --branco:#FFFFFF;
  --texto:#1B241E;
  --muted:#5B6459;
  --muted-2:#8C9389;
  --border:#E1DBC7;
  --radius:16px;
  --shadow-card:0 4px 24px -6px rgba(20,31,25,.14);
  --shadow-elegant:0 24px 60px -24px rgba(20,31,25,.4);
  --grad-dourado:linear-gradient(120deg,var(--dourado-700) 0%,var(--dourado-300) 50%,var(--dourado-600) 100%);
  --grad-verde-escuro:linear-gradient(180deg,#1A2A20 0%,#0E1712 100%);
  --fonte-titulo:'Fraunces', Georgia, serif;
  --fonte-corpo:'Manrope', system-ui, -apple-system, sans-serif; font-size: 1em;
}

html,body{margin:0;padding:0;width:100%;height:100%;overflow-x:hidden;}
body{font-family:var(--fonte-corpo);color:var(--texto);background:var(--branco);line-height:1.55;-webkit-font-smoothing:antialiased;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--fonte-titulo);margin:0;font-weight:600;letter-spacing:-0.01em;line-height:1.15}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
svg{display:block}

.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container.narrow{max-width:800px}
.center{text-align:center}
.muted{color:var(--muted)}
.rounded{border-radius:var(--radius)}
.label{font-size:1em;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--dourado-700)}

/* Divisor assinatura — swoosh dourado inspirado no logo */
.divisor-matrix{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 18px}
.divisor-matrix svg{width:34px;height:18px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:999px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;transition:transform .2s,box-shadow .2s;cursor:pointer;border:0}
.btn:hover{transform:scale(1.03);box-shadow:0 10px 30px -8px rgba(20,31,25,.5)}
.btn-primary{background:var(--grad-dourado);color:var(--verde-900)}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn-white{background:var(--creme);color:var(--verde-800)}
.btn-sm{padding:11px 20px;font-size:11px}
.ic{width:22px;height:22px}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(247,244,236,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 24px}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo-img{height:38px;width:auto}
.nav-links{display:none;gap:30px;font-size:14px;font-weight:600;color:var(--verde-800)}
.nav-links a{transition:color .15s}
.nav-links a:hover{color:var(--dourado-700)}
.nav-toggle{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--verde-800);border-radius:2px;transition:transform .3s,opacity .3s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;flex-direction:column;background:var(--creme);border-bottom:1px solid var(--border)}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:14px 24px;font-size:15px;font-weight:600;color:var(--verde-800);border-bottom:1px solid var(--border)}
.mobile-menu-cta{padding:16px 24px}
@media(min-width:768px){
  .nav-links{display:flex}
  .nav-toggle{display:none}
  .mobile-menu{display:none !important}
}

/* ============================
   HERO
   ============================ */
/* ============================
   HERO
   ============================ */
.hero{position:relative;
  display: flex;
  overflow:hidden;
  color:#fff;
  height:100%;
  min-height:90vh;
  width: 100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  flex-direction:column;
  justify-content:center;
  background:var(--grad-verde-escuro)
}
.hero-bg{position:absolute;inset:0;z-index:1;opacity:.95;
  background-image: url('assets/ajeitandoseulado_bg_hero_esfumacado_matrix.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  animation:hero-bg-drift 24s ease-in-out infinite alternate}
@keyframes hero-bg-drift{0%{transform:scale(1) translateX(0)}100%{transform:scale(1.08) translateX(-14px)}}

.hero-overlay{position:absolute;z-index:2;inset:0;background:linear-gradient(160deg,rgba(10,16,12,.35) 0%,rgba(10,16,12,.75) 100%)}

/* FIX DEFINITIVO: o .hero-grid tem 3 filhos reais (.hero-text, .hero-swoosh-wrap, .hero-visual),
   mas só havia 2 colunas definidas — o 3º item (que carrega os cards com texto) caía numa
   linha implícita do grid, fora da área visível do .hero (overflow:hidden), e sumia.
   Agora usamos grid-template-areas explícitas:
   - Mobile: 3 linhas empilhadas (texto / imagem / cards), sem sobreposição.
   - Tablet/Desktop: 2 colunas — texto à esquerda; imagem e cards dividem a MESMA área à
     direita (é o efeito pretendido: cards flutuando por cima da imagem). */
.hero-grid{
  display:grid;
  height:100%;
  min-height:90vh;
  z-index:3;
  gap:30px;
  padding:104px 20px 40px;
  align-items:center;
  width:100%;
  max-width:1440px;
  margin:0 auto;
  grid-template-columns:1fr;
  grid-template-areas:
    "text"
    "imagem"
    "visual";
}
@media(min-width:768px){
  .hero-grid{
    grid-template-columns:1.25fr 1fr;
    grid-template-areas:"text visual";
    padding:90px 48px;
  }
}
@media(min-width:1280px){
  .hero-grid{padding:100px 100px}
}

.chip{display:inline-block;border:1px solid rgba(228,193,115,.45);background:rgba(228,193,115,.08);border-radius:999px;padding:7px 16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--dourado-300);animation:fade-up .7s ease both}
.hero-text{grid-area:text;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;text-align:left;height:100%;min-width:0}
.hero-text h1{position:relative;max-width:100%;margin-top:16px;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.12;font-weight:600;animation:fade-up .7s .15s ease both}
.hero-text .accent{color:var(--dourado-300);font-style:italic}
.hero-text p.lead{max-width:100%;margin-top:18px;font-size:1em;color:rgba(255,255,255,.82);line-height:1.7;animation:fade-up .7s .3s ease both;font-family:var(--fonte-corpo)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:28px;animation:fade-up .7s .45s ease both}
.link-arrow{font-size:1.1em;font-weight:600;color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(228,193,115,.5)}
.hero-stats{display:flex;flex-wrap:wrap;gap:26px;border-top:1px solid rgba(255,255,255,.15);padding-top:22px;margin-top:28px;font-size:1em;color:rgba(255,255,255,.65);animation:fade-up .7s .6s ease both;font-family:var(--fonte-corpo)}
.hero-stats strong{display:block;font-size:1.1em;color:var(--dourado-300);font-weight:700;font-family:var(--fonte-titulo)}

@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* HERO VISUAL — imagem à base, cards flutuantes saindo por cima dela para a direita */
.hero-visual{grid-area:visual;position:relative;height:100%;width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:auto;min-height:350px;overflow:visible}
/* FIX: removido padding-right:-500px (valor negativo é inválido em CSS e era ignorado).
   No mobile fica na sua própria linha (área "imagem"); no desktop passa a ocupar a MESMA
   área do .hero-visual (grid-area:visual) para os cards flutuarem por cima dela. */
.hero-swoosh-wrap{grid-area:imagem;position:relative;width:100%;height:100%;max-width:none;flex:1;display:flex;align-items:flex-start;justify-content:flex-start;margin-bottom:-50px}
@media(min-width:768px){
  .hero-swoosh-wrap{grid-area:visual}
}
/* FIX: a <img> dentro do hero-swoosh-wrap não tinha nenhum controle de tamanho
   (só herdava max-width:100% do reset global) — em algumas proporções de tela ela
   ficava alta demais e empurrava o resto do grid para fora da área visível. */
.hero-swoosh-wrap img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
.hero-swoosh-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(206,159,59,.35),transparent 65%);filter:blur(40px);animation:pulse-glow 4s ease-in-out infinite alternate}
@keyframes pulse-glow{0%{opacity:.35;transform:scale(1)}100%{opacity:.6;transform:scale(1.1)}}
.hero-swoosh-svg{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}

/* FIX: removido margin-right:200px fixo (empurrava o card pra fora da tela no mobile).
   FIX: mantido position:absolute em todos os breakpoints desktop (768/1024/1280) em vez
   de voltar para "relative" em 1024px — era esse reset que quebrava/cortava o card
   contra o overflow:hidden do .hero, fazendo o texto sumir em telas de notebook. */
.hero-anims{position:relative;z-index:30;display:flex;flex-direction:column;justify-content:flex-start;gap:14px;color:#fff;margin-top:20px;width:100%}
@media(min-width:768px){
  .hero-anims{position:absolute;top:-10%;right:-8%;width:220px;height:auto;margin-top:0;padding:0}
}
@media(min-width:1024px){
  .hero-anims{right:-15%;width:230px}
}
@media(min-width:1280px){
  .hero-anims{right:-22%;width:260px}
}

/* FIX: font-weight:100 era fino demais e ficava quase ilegível — subido para 500/600 */
.anim-card{width:100%;max-width:none;flex:1;border-radius:18px;border:2px solid rgba(228,193,115,.22);background:rgba(20,31,25,.78);padding:25px 25px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);transition:border-color .3s;display:flex;flex-direction:column;justify-content:center}
.anim-card:hover{border-color:rgba(228,193,115,.5)}
.anim-card-head{display:flex;justify-content:space-between;font-size:.85em;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.55);font-weight:500}
.anim-value{margin-top:6px;font-size:30px;font-weight:700;letter-spacing:-.02em;font-family:var(--fonte-titulo);color:var(--dourado-300)}
.bars{display:flex;align-items:flex-end;gap:5px;height:40px;margin-top:10px}
.bars span{flex:1;background:linear-gradient(180deg,var(--dourado-300),var(--dourado-700));border-radius:3px 3px 2px 2px;height:var(--h);transform-origin:bottom;animation:bar-grow 2.8s cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:var(--d)}

.ring-wrap{position:relative;width:96px;height:96px;margin:10px auto 2px}
.ring-svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:9}
.ring-fg{
  fill:none;
  stroke:var(--dourado-300);
  stroke-width:9;
  stroke-linecap:round;
  stroke-dasharray:360;
  stroke-dashoffset:0;
  animation:ring-fill 20s ease-in-out infinite;
}

@keyframes ring-fill{
  0%{stroke-dashoffset:360}
  10%{stroke-dashoffset:140}
  20%{stroke-dashoffset:130}
  30%{stroke-dashoffset:145}
  40%{stroke-dashoffset:130}
  50%{stroke-dashoffset:150}
  60%{stroke-dashoffset:200}
  70%{stroke-dashoffset:150}
  80%{stroke-dashoffset:130}
  90%{stroke-dashoffset:150}
  100%{stroke-dashoffset:110}
}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ring-center strong{font-size:22px;font-weight:700;color:var(--dourado-300);font-family:var(--fonte-titulo)}
.ring-center small{font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.6);margin-top:2px}

.anim-badge-icon{gap:2px;padding:0 6px}
.anim-badge-icon svg{background:var(--dourado-300);border-radius:50%;padding:9px;box-sizing:content-box}
.anim-badge-icon small{font-size:8.5px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.65);margin-top:4px}

.steps-list{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.step-item{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.5);font-weight:600;animation:step-glow 5.7s ease-in-out infinite;animation-delay:var(--sd)}
.step-dot{width:9px;height:9px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--dourado-300);background:transparent;animation:step-dot-fill 5.7s ease-in-out infinite;animation-delay:var(--sd)}
@keyframes step-glow{0%,12%{color:rgba(255,255,255,.5)}20%,85%{color:#50fa7b}95%,100%{color:rgba(255,255,255,.5)}}
@keyframes step-dot-fill{0%,12%{background:transparent}20%,85%{background:var(--dourado-300)}95%,100%{background:transparent}}
@keyframes bar-grow{0%{transform:scaleY(.15);opacity:.6}60%{transform:scaleY(1.08);opacity:1}80%{transform:scaleY(.95)}100%{transform:scaleY(1);opacity:1}}

.anim-row{display:flex;align-items:center;gap:12px}
.badge-circle{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100px;height:100px;flex-shrink:0;border-radius:50%;border:1.5px solid rgba(228,193,115,.35);background:rgba(20,31,25,.78);box-shadow:0 8px 32px rgba(0,0,0,.35);text-align:center;transition:transform .3s}
.badge-circle strong{font-size:14px;font-weight:600;line-height:1;color:var(--dourado-300);font-family:var(--fonte-titulo)}
.badge-circle small{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.6);margin-top:2px}

.type-lines{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.type-lines>div{height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.type-line{display:block;height:100%;background:linear-gradient(90deg,var(--dourado-700),var(--dourado-300));border-radius:999px;width:0;animation:type-line 2.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes type-line{0%{width:0;opacity:.6}70%{width:100%;opacity:1}90%{width:100%;opacity:.8}100%{width:0;opacity:.6}}
.anim-foot{margin-top:10px;font-size:16px;color:var(--dourado-700);font-weight:600}

.float-slow{animation:float-slow 7s ease-in-out infinite}
.float-mid{animation:float-mid 5s ease-in-out infinite}
.float-fast{animation:float-fast 3s ease-in-out infinite}
@keyframes float-slow{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-16px) rotate(-1.2deg)}80%{transform:translateY(-8px) rotate(1deg)}}
@keyframes float-mid{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(1.6deg)}}
@keyframes float-fast{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.02)}}

/* FIX: no mobile o .hero-anims volta a ser position:relative e empilha em coluna
   (herda do bloco base), então os cards nunca ficam escondidos atrás da imagem. */
@media(max-width:767px){
  .hero{min-height:100svh}
  .hero-grid{grid-template-columns:1fr;padding:104px 20px 40px;gap:32px;height:auto;min-height:100svh}
  .hero-visual{min-height:280px}
  .hero-anims{flex-direction:row;flex-wrap:wrap;justify-content:center;height:auto;margin-top:16px}
  .anim-card{max-width:calc(50% - 7px);flex:1 1 140px}
}

/* ============================
   Stats strip
   ============================ */

.stats{background:var(--verde-900);color:#fff;border-bottom:1px solid rgba(228,193,115,.15)}
.stats-grid{display:grid;gap:0;padding:0;text-align:center;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stats-grid>div{padding:40px 24px;border-right:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);transition:background .25s}
.stats-grid>div:hover{background:rgba(228,193,115,.05)}
@media(min-width:768px){.stats-grid>div{border-bottom:none}}
.stats-grid strong{display:block;font-size:32px;font-weight:700;letter-spacing:-.02em;font-family:var(--fonte-titulo);color:var(--dourado-300)}
@media(min-width:768px){.stats-grid strong{font-size:38px}}
.stats-grid span{display:block;margin-top:6px;font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.6)}

/* Sections */
.section{padding:96px 0}
.section-gray{background:var(--creme)}
.section-head{max-width:640px;margin:0 auto;text-align:center}
.section-head h2{margin-top:14px;font-size:28px}
@media(min-width:768px){.section-head h2{font-size:2.6rem}}
.section-head p{margin-top:16px;color:var(--muted)}
.two-col{display:grid;gap:52px;align-items:center}
@media(min-width:768px){.two-col{grid-template-columns:1fr 1fr}}
.two-col h2{margin-top:14px;font-size:28px}
@media(min-width:768px){.two-col h2{font-size:34px}}

.check-list{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.check-list li{display:flex;gap:12px;font-size:15px;line-height:1.55}
.check-list i{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;border-radius:50%;background:var(--grad-dourado);color:var(--verde-900);font-style:normal;font-size:11px;font-weight:800;margin-top:1px}
.section .btn{margin-top:32px}

/* Grids */
.grid-3,.grid-4{display:grid;gap:22px;margin-top:56px}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media(min-width:480px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:640px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

/* Card */
.card{background:var(--branco);color:var(--texto);border:1.5px solid var(--border);border-radius:var(--radius);padding:30px;transition:border-color .15s,transform .15s,box-shadow .15s}
.card:hover{border-color:var(--dourado-500);transform:translateY(-3px);box-shadow:var(--shadow-card)}
.card.center{text-align:center}
.card h3{margin-top:18px;font-size:1.3em}
.card p{margin-top:8px;font-size:1em;color:var(--muted);line-height:1.65}

.ic-box{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:10px;background:var(--creme-2);border:1px solid var(--border);font-size:28px}
.ic-box svg{width:100px;height:100px;color:var(--verde-700)}
.ic-box png{width:100px;height:100px;color:var(--verde-700)}
.card:hover .ic-box{transform:scale(1.08)}
.ic-box.dark{background:var(--verde-800);border-color:var(--verde-800)}
.ic-box.dark svg{color:var(--dourado-300)}
.ic-box.big{width:56px;height:56px;margin:0 auto}
.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* Service cards (imagem substituída por gráfico) */
.service-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);border:1px solid var(--border);transition:transform .15s cubic-bezier(.34,1.2,.64,1),box-shadow .15s}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-elegant)}
.img-wrap{aspect-ratio:4/3;overflow:hidden;position:relative}
.img-wrap svg{width:100%;height:100%;transition:transform .7s cubic-bezier(.25,.46,.45,.94)}
.service-card:hover .img-wrap svg{transform:scale(1.06)}
.pad{padding:28px}
.pad h3{font-size:19px}
.pad p{margin-top:8px;font-size:1em;color:var(--muted);line-height:1.65}

/* Diferenciais - ícone circular ao invés de foto */
.icone-diferencial{width:72px;height:72px;border-radius:50%;background:var(--verde-800);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.icone-diferencial svg{width:32px;height:32px;color:var(--dourado-300)}

/* FAQ */
.faq{margin-top:48px;display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);padding:22px 26px;transition:border-color .2s,box-shadow .2s}
.faq details:hover{border-color:var(--dourado-500)}
.faq details[open]{border-color:var(--dourado-600);box-shadow:var(--shadow-card)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none;cursor:pointer;font-weight:700;font-size:1.3em;line-height:1.5;font-family:var(--fonte-titulo)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{color:var(--dourado-600);font-style:normal;font-size:26px;transition:transform .15s cubic-bezier(.34,1.56,.64,1);flex-shrink:0}
.faq details[open] summary i{transform:rotate(45deg)}
.faq p{margin-top:14px;font-size:1em;color:var(--muted);line-height:1.7;font-family:var(--fonte-corpo)}

/* CTA */
.cta{position:relative;color:#fff;padding:110px 0;background:var(--grad-verde-escuro);overflow:hidden}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 700px 400px at 80% 20%,rgba(206,159,59,.18),transparent 60%)}
.cta .container{position:relative}
.cta h2{font-size:28px;line-height:1.15}
@media(min-width:768px){.cta h2{font-size:46px}}
.cta p{margin:20px auto 0;max-width:620px;color:rgba(255,255,255,.75);font-size:16px}
.cta .btn{margin-top:36px}

/* Notice */
.notice-section{padding:56px 0;background:var(--creme)}
.notice-section .card{background:var(--creme-2);border-color:var(--dourado-500)}
.notice-section h3{font-size:1.3em;color:var(--verde-800)}
.notice-section p{margin-top:12px;font-size:14.5px;line-height:1.7;color:var(--muted)}

/* Footer */
.footer{background:var(--verde-900);color:#fff}
.footer-grid{display:grid;gap:44px;padding:64px 24px;grid-template-columns:1fr}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.footer-brand-logo{height:40px;width:auto}
.footer-brand p{margin-top:20px;max-width:400px;font-size:14px;color:rgba(255,255,255,.6);line-height:1.65}
.footer h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--dourado-300)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08)}
.footer-bottom .container{display:flex;flex-direction:column;gap:8px;padding:24px;font-size:12px;color:rgba(255,255,255,.4)}
@media(min-width:768px){.footer-bottom .container{flex-direction:row;justify-content:space-between;align-items:center}}

/* WhatsApp float */
.wa-float{position:fixed;bottom:28px;right:28px;z-index:100;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 4px 20px rgba(37,211,102,.45);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.wa-float:hover{transform:scale(1.12);box-shadow:0 8px 30px rgba(37,211,102,.6)}
.wa-float svg{width:26px;height:26px}

/* Responsive geral */
@media(max-width:767px){
  .two-col{grid-template-columns:1fr;gap:36px}
  .section{padding:68px 0}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:1fr 1fr}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .container{padding:0 18px}
  .section-head h2{font-size:26px}
  .two-col h2{font-size:26px}
  .cta h2{font-size:26px}
  .faq summary{font-size:14.5px}
}
@media(min-width:480px) and (max-width:767px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
}

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* =======================================================
CLASSE SOLICITADA: .imagem-interativa
Você só precisa copiar este bloco para o seu CSS
======================================================= */

.imagem-interativa {
  /* Define o tamanho base (ajustado para 640px) */
  width: 100%;
  max-width: 640px;
  height: auto;
  object-fit: cover; /* Evita distorções na imagem */
  
  /* Estética base moderna */
  border-radius: 16px; /* Bordas um pouco mais arredondadas */
  border: 2px solid rgba(212, 175, 55, 0.15); /* Borda sutil dourada (Matrix) */
  cursor: pointer;
  
  /* CAIXA COM SOMBRA: Combina uma sombra preta densa para profundidade e uma luz dourada difusa para destacar a caixa no fundo escuro */
  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 175, 55, 0.15);
  
  /* A propriedade transition é o segredo para a animação suave. */
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ANIMAÇÃO 1: AO PASSAR O MOUSE (HOVER) */
.imagem-interativa:hover {
  /* Movimento visível e elegante */
  transform: scale(1.03) translateY(-10px);
  
  /* Borda "acende" no hover, dando muito destaque */
  border: 2px solid rgba(212, 175, 55, 0.9);
  
  /* CAIXA COM SOMBRA (HOVER): Projeta a caixa para frente, aumentando a profundidade e intensificando o brilho dourado */
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.9), 0 0 35px rgba(212, 175, 55, 0.4);
  
  /* Aumenta o brilho e contraste para destacar a imagem na tela */
  filter: brightness(1.05) contrast(1.05);
}

/* ANIMAÇÃO 2: AO CLICAR (ACTIVE) */
.imagem-interativa:active {
  /* Efeito de clique moderno (afunda suavemente) */
  transform: scale(0.97) translateY(0);
  
  /* Borda diminui a intensidade */
  border: 2px solid rgba(212, 175, 55, 0.5);
  
  /* CAIXA COM SOMBRA (ACTIVE): A sombra encolhe e fica mais dura, simulando o impacto físico no fundo da página */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.9), 0 0 10px rgba(212, 175, 55, 0.2);
  
  /* Escurece levemente para dar contraste com o hover */
  filter: brightness(0.95);
  
  /* A transição no clique deve ser mais rápida para parecer responsiva */
  transition: all 0.1s ease;
}
.footer-dev {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 11px;
  color: rgba(255, 255, 255, .3);
  letter-spacing: .04em;
  text-align: center;
}

.footer-dev-link {
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .04em;
  transition: color .2s;
}

.footer-dev-link:hover {
  color: var(--dourado-700)
}