@font-face{
  font-family: "Manrope";
  src: url("../fonts/Manrope-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Manrope";
  src: url("../fonts/Manrope-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Manrope";
  src: url("../fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Manrope";
  src: url("../fonts/Manrope-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Manrope";
  src: url("../fonts/Manrope-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Manrope";
  src: url("../fonts/Manrope-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Manrope";
  src: url("../fonts/Manrope-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root{
  --red: #E30613;
  --red2:#FF2A2A;
  --ink:#0F1115;
  --muted:#5B6270;
  --bg:#FFFFFF;
  --soft:#F6F7FA;
  --card:#FFFFFF;
  --stroke: rgba(15,17,21,.10);
  --shadow: 0 24px 80px rgba(15,17,21,.10);
  --radius: 18px;
  --radius2: 26px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ overflow-x:hidden; } /* ✅ evita scroll lateral fantasma no mobile */
body{
  margin:0;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }

/* ✅ container mais confortável no mobile */
.container{
  width: min(1140px, 100% - 32px);
  margin-inline: auto;
}
@media (max-width: 520px){
  .container{ width: min(1140px, 100% - 24px); }
}


/* ✅ foco visível (acessibilidade) */
:focus-visible{
  outline: 3px solid rgba(227,6,19,.35);
  outline-offset: 3px;
}

.topbar{
  border-bottom:1px solid var(--stroke);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
}
/* ✅ topbar quebra linha no mobile */
@media (max-width: 760px){
  .topbar__inner{ gap:10px; flex-wrap:wrap; }
  .toplink{ padding:8px 10px; }
}

.toplink{
  font-weight:700;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, #fff, #fafafa);
}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.70);
  font-weight:700;
  color: rgba(15,17,21,.85);
}
.pill--soft{ background: rgba(227,6,19,.06); border-color: rgba(227,6,19,.16); }
.dot{ width:8px; height:8px; border-radius:999px; background: var(--red); box-shadow: 0 0 0 6px rgba(227,6,19,.12); }

.nav{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:900; letter-spacing:-.02em;
}
.brand__mark{
  width:14px; height:14px; border-radius:6px;
  background: linear-gradient(135deg, var(--red), var(--red2));
  box-shadow: 0 10px 24px rgba(227,6,19,.25);
}
.brand--sm .brand__mark{ width:12px; height:12px; }
.nav__links{
  display:flex; gap:18px; align-items:center;
  color: rgba(15,17,21,.78);
  font-weight:700;
}
.nav__links a{
  position:relative;
  padding:8px 8px;
  border-radius:10px;
}


.nav__links a::after{
  content:"";
  position:absolute; left:10px; right:10px; bottom:4px;
  height:2px; transform:scaleX(0);
  transform-origin:left;
  background: linear-gradient(90deg, var(--red), transparent);
  transition: transform .22s ease;
}

.nav__links > a.nav__link:is(.is-active) {

  &::after {
    transform:scaleX(1);
  }
}

.nav__links a:hover::after{ transform:scaleX(1); }


.nav__actions{ display:flex; gap:10px; align-items:center; margin-left: 1rem;}
.nav__burger{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:#fff;
}
.nav__burger span{
  display:block; width:18px; height:2px; background: var(--ink);
  margin:5px auto; border-radius:999px;
}

/* ✅ mobile/tablet: mostra burger e esconde links/ações */
@media (width <= 1200px) {
  .nav__actions{ display:none; }
}

@media (width <= 980px){
  .nav__burger{ display:inline-flex; align-items:center; justify-content:center; }
  .nav__links { display:none; }
}


/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--stroke);
  font-weight:800;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  will-change: transform;
}
.btn--lg{ padding:12px 18px; }
.btn--primary{
  border-color: rgba(227,6,19,.35);
  background: linear-gradient(135deg, var(--red), var(--red2));
  color:#fff;
  box-shadow: 0 18px 40px rgba(227,6,19,.25);
}
.btn--ghost{
  background: rgba(255,255,255,.80);
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 20px 60px rgba(15,17,21,.12); }
.btn--primary:hover{ box-shadow: 0 26px 70px rgba(227,6,19,.28); }
.btn:active{ transform: translateY(0); }

/* HERO */
.hero{
  position:relative;
  padding:78px 0 36px;
  overflow:hidden;
}
.hero__grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:44px;
  align-items:center;
  z-index:2;
}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:900;
  color: rgba(15,17,21,.80);
}
.spark{
  width:12px; height:12px; border-radius:5px;
  background: rgba(227,6,19,.14);
  border:1px solid rgba(227,6,19,.20);
  position:relative;
}
.spark::after{
  content:"";
  position:absolute; inset:-8px;
  border-radius:12px;
  background: radial-gradient(circle, rgba(227,6,19,.18), transparent 60%);
  filter: blur(2px);
}
.hero__title{
  margin:12px 0 12px;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height:1.02;
  letter-spacing:-.04em;
}
.grad{
  background: linear-gradient(120deg, var(--red), #111);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__subtitle{
  margin:0 0 18px;
  color: var(--muted);
  font-size: 18px;
  line-height:1.55;
  max-width: 54ch;
}
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 18px; }

.trust{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-top:18px;
}
.trust__item{
  flex: 1 1 160px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.70);
  border-radius: var(--radius);
  padding:12px 12px;
}
.trust__item strong{ display:block; font-weight:900; }
.trust__item span{ display:block; color: var(--muted); font-weight:700; font-size: 13px; margin-top:2px; }

/* ✅ HERO responsivo */
@media (max-width: 980px){
  .hero{ padding: 64px 0 28px; }
  .hero__grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .hero__subtitle{ font-size: 16px; }
}
@media (max-width: 520px){
  .hero{ padding: 58px 0 24px; }
  .hero__title{ font-size: clamp(30px, 8vw, 40px); }
  .trust__item{ flex: 1 1 100%; }
}



/* Visual card */
.hero__visual{ 
  position:relative; 
  min-height: 420px; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.card3d{
  position:relative;
  border-radius: var(--radius2);
  border:1px solid rgba(227,6,19,.14);
  background:
    radial-gradient(1200px 500px at 20% 10%, rgba(227,6,19,.10), transparent 45%),
    radial-gradient(900px 380px at 80% 30%, rgba(15,17,21,.06), transparent 45%),
    rgba(255,255,255,.88);
  box-shadow: var(--shadow);
  overflow:hidden;
  transform-style: preserve-3d;
  width: 100%;
}
.card3d__content{ padding:18px; }
.card3d__glow{
  position:absolute; inset:-40%;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(227,6,19,.22), transparent 40%);
  filter: blur(12px);
  opacity:.7;
  pointer-events:none;
  transform: translateZ(-1px);
}

.minihead{ display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.minihead__tag{
  font-weight:900; font-size:12px; letter-spacing:.02em;
  padding:7px 10px; border-radius:999px;
  background: rgba(227,6,19,.08);
  border:1px solid rgba(227,6,19,.14);
}
.minihead__dot{ width:8px; height:8px; border-radius:999px; background:#2ECC71; box-shadow:0 0 0 6px rgba(46,204,113,.12); }
.minihead__muted{ color: var(--muted); font-weight:800; font-size: 12px; }

.metric{
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  background: rgba(255,255,255,.80);
  padding:14px;
}
.metric__label{ color: var(--muted); font-weight:800; font-size:13px; }
.metric__value{ font-weight:900; font-size: 28px; letter-spacing:-.02em; margin-top:6px; }
.metric__chip{
  display:inline-flex; margin-top:10px;
  font-weight:900; font-size:12px;
  padding:6px 10px; border-radius:999px;
  background: rgba(15,17,21,.06);
  border:1px solid rgba(15,17,21,.08);
}

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.tile{
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  background: rgba(255,255,255,.80);
  padding:12px;
}
.tile__k{ color: var(--muted); font-weight:900; font-size:12px; }
.tile__v{ font-weight:900; font-size:18px; margin-top:6px; }
.bar{
  height:8px; border-radius:999px; background: rgba(15,17,21,.06);
  margin-top:10px; overflow:hidden;
}
.bar span{
  display:block; height:100%;
  background: linear-gradient(90deg, var(--red), rgba(227,6,19,.30));
  border-radius:999px;
}

.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.chip{
  font-weight:900; font-size:12px;
  padding:7px 10px; border-radius:999px;
  background: #fff;
  border:1px solid var(--stroke);
}

.float{
  position:absolute;
  width:160px; height:160px;
  border-radius: 50%;
  filter: blur(18px);
  opacity:.55;
  z-index: -1;
}
.float--a{ background: rgba(227,6,19,.18); left:-30px; bottom: 40px; }
.float--b{ background: rgba(15,17,21,.10); right:-40px; top: 60px; }
.float--c{ background: rgba(227,6,19,.10); right: 40px; bottom: -40px; }

.hero__bg{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.blob{
  position:absolute; border-radius: 999px; filter: blur(40px);
  opacity:.45;
}
.blob--1{
  width:720px; height:420px;
  background: radial-gradient(circle at 30% 30%, rgba(227,6,19,.20), transparent 55%);
  left:-220px; top:-120px;
}
.blob--2{
  width:680px; height:420px;
  background: radial-gradient(circle at 70% 40%, rgba(15,17,21,.12), transparent 55%);
  right:-240px; top:-120px;
}
.grain{
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity:.22;
}

/* Sections */
.section{ padding:52px 0; }
.section--soft{ background: var(--soft); border-top:1px solid rgba(15,17,21,.06); border-bottom:1px solid rgba(15,17,21,.06); }
.section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:24px; }
.section__head h2{
  margin:0; font-size: clamp(26px, 3vw, 36px);
  letter-spacing:-.03em;
}
.section__head p{
  margin:0;
  color: var(--muted);
  font-weight:700;
  max-width: 58ch;
}

.featuregrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

@media (width <= 900px) {
  .featuregrid{
    grid-template-columns: repeat(1, 1fr) !important;
  }
}


.fcard{
  border:1px solid var(--stroke);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.82);
  padding:18px;
  box-shadow: 0 14px 42px rgba(15,17,21,.06);
}
.icon{ font-size:22px; }
.fcard h3{ margin:10px 0 8px; letter-spacing:-.02em; }
.fcard p{ margin:0; color: var(--muted); font-weight:650; line-height:1.55; }

.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(227,6,19,.35), rgba(15,17,21,.12), transparent);
  margin-top:28px;
}

.bento{
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  grid-auto-rows: minmax(160px, auto);
  gap:14px;
}
.bento__item{
  border:1px solid var(--stroke);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.85);
  padding:18px;
  box-shadow: 0 14px 42px rgba(15,17,21,.06);
}
.bento__item--big{ grid-row: span 2; }
.bento__item h3{ margin:0 0 8px; letter-spacing:-.02em; }
.bento__item p{ margin:0; color: var(--muted); font-weight:650; line-height:1.55; }
.list{ margin:12px 0 0; padding-left:18px; color: rgba(15,17,21,.80); font-weight:700; }
.list li{ margin:8px 0; }

.modules{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.mcard{
  border:1px solid var(--stroke);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.90);
  padding:18px;
  box-shadow: 0 14px 42px rgba(15,17,21,.06);
  position:relative;
  overflow:hidden;
}
.mcard::before{
  content:"";
  position:absolute; inset:-40px -40px auto auto;
  width:160px; height:160px; border-radius: 999px;
  background: radial-gradient(circle, rgba(227,6,19,.18), transparent 60%);
  filter: blur(10px);
}
.mcard h3{ margin:0 0 8px; letter-spacing:-.02em; }
.mcard p{ margin:0 0 12px; color: var(--muted); font-weight:650; line-height:1.55; }
.link{ font-weight:900; color: var(--red); }

.testimonials{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.tcard{
  border:1px solid var(--stroke);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.90);
  padding:18px;
  box-shadow: 0 14px 42px rgba(15,17,21,.06);
}
.tcard p{ margin:0 0 14px; font-weight:750; line-height:1.55; color: rgba(15,17,21,.85); }
.tmeta{ display:flex; gap:12px; align-items:center; }
.avatar{
  width:36px; height:36px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(227,6,19,.22), rgba(15,17,21,.06));
  border:1px solid rgba(227,6,19,.12);
}
.tmeta strong{ display:block; font-weight:900; }
.tmeta span{ display:block; color: var(--muted); font-weight:750; font-size: 13px; }

.faq{ display:grid; gap:12px; }
.faq__item{
  border:1px solid var(--stroke);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.88);
  padding: 14px 16px;
}
.faq__item summary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item p{ margin:10px 0 0; color: var(--muted); font-weight:650; line-height:1.55; }

/* CTA */
.cta{
  padding:74px 0;
  background:
    radial-gradient(900px 360px at 15% 20%, rgba(227,6,19,.14), transparent 55%),
    radial-gradient(900px 360px at 85% 40%, rgba(15,17,21,.10), transparent 55%),
    #fff;
  border-top:1px solid rgba(15,17,21,.06);
}
.cta__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
  align-items:stretch;
}
.cta__copy h2{ margin:0 0 10px; letter-spacing:-.03em; font-size: clamp(26px, 3vw, 38px); }
.cta__copy p{ margin:0; color: var(--muted); font-weight:700; line-height:1.55; }
.cta__badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

.form{
  border:1px solid rgba(227,6,19,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  border-radius: var(--radius2);
  padding:22px;
  box-shadow: 0 26px 80px rgba(15,17,21,.10);
}
.contactForm{
  position: relative;
  overflow: hidden;
}
.contactForm::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:3px;
  background: linear-gradient(90deg, var(--red), var(--red2));
}
.contactForm__head{
  margin-bottom: 16px;
}
.contactForm__head .brand{
  margin-bottom: 10px;
}
.contactForm__head h3{
  margin:0 0 6px;
  letter-spacing:-.02em;
  font-size: clamp(20px, 2vw, 24px);
}
.contactForm__head p{
  margin:0;
  color: var(--muted);
  font-weight:700;
  line-height:1.5;
}
.contactForm__fields{
  display:grid;
  gap: 2px;
}
.form label{ display:block; font-weight:900; font-size: 13px; margin-bottom:10px; }
.form input{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: #fff;
  font: inherit;
  font-weight:750;
}
.form input:focus{
  outline:none;
  border-color: rgba(227,6,19,.38);
  box-shadow: 0 0 0 6px rgba(227,6,19,.10);
}
.form .btn{ width:100%; margin-top:10px; }
.form small{ display:block; color: var(--muted); font-weight:650; margin-top:10px; }

.footer{
  border-top:1px solid var(--stroke);
  padding:18px 0;
}
.footer__inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.footer__left p{ margin:8px 0 0; color: var(--muted); font-weight:750; }
.footer__right{ display:flex; gap:14px; color: rgba(15,17,21,.80); font-weight:800; }

/* ==========================
   RESPONSIVO (para este trecho)
========================== */
@media (max-width: 980px){
  .hero__visual{ min-height: 0; }

  .section__head{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .section__head p{ max-width: 70ch; }

  .featuregrid{ grid-template-columns: 1fr; }

  .modules{ grid-template-columns: repeat(2, 1fr); }
  .testimonials{ grid-template-columns: 1fr; }

  .cta__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  .section{ padding: 56px 0; }

  .card3d__content{ padding: 16px; }
  .metric__value{ font-size: 24px; }

  .grid2{ grid-template-columns: 1fr; }

  .float{
    width: 120px; height: 120px;
    filter: blur(16px);
  }

  .modules{ grid-template-columns: 1fr; }
  .form{ padding:18px; }
  .contactForm__head h3{ font-size: 21px; }

  .footer__inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__right{ flex-wrap: wrap; }
}

@media (max-width: 520px){
  .section{ padding: 48px 0; }

  .blob--1{ width: 520px; height: 340px; left: -260px; top: -160px; }
  .blob--2{ width: 520px; height: 340px; right: -260px; top: -160px; }

  .metric{ padding: 12px; }
  .tile{ padding: 10px; }
}




/* Reveal animations */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1),
              transform .8s cubic-bezier(.2,.8,.2,1),
              filter .8s cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity, filter;
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ✅ REMOVIDO: bloco "Responsive" antigo/duplicado daqui
   (ele conflita com os ajustes globais e pode sobrescrever coisas)
*/

/* ==========================
   ECOSSISTEMA eco3 (FIX REAL)
========================== */

.eco3{
  background:
    radial-gradient(1000px 420px at 20% 30%, rgba(227,6,19,.10), transparent 60%),
    radial-gradient(1000px 420px at 80% 40%, rgba(15,17,21,.08), transparent 60%);
}

/* ✅ eco3 agora centralizado */
.eco3__layout{
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 0;
}

.eco3__orbital{
  margin-inline: auto;
}

/* ===== Modal Premium ===== */
.ecoModal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.ecoModal.is-open{ display: block; }

.ecoModal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15,17,21,.40);
  backdrop-filter: blur(10px);
}

.ecoModal__dialog{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100% - 28px));
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.92);
  box-shadow: 0 40px 120px rgba(0,0,0,.30);
  padding: 22px 22px 18px;
}

.ecoModal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(15,17,21,.10);
  background: rgba(255,255,255,.85);
  font-weight: 900;
  cursor: pointer;
}

.ecoModal__tag{
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(227,6,19,.08);
  border: 1px solid rgba(227,6,19,.18);
  font-weight: 900;
  font-size: 12px;
}

.ecoModal__title{
  margin: 12px 0 10px;
  letter-spacing: -.02em;
}

.ecoModal__desc{
  margin: 0;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.6;
}

.ecoModal__badges{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 18px;
}
.ecoModal__badges span{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,17,21,.10);
  background: rgba(255,255,255,.80);
  font-weight: 850;
  font-size: 12px;
}

/* Animação de entrada */
.ecoModal.is-open .ecoModal__dialog{
  animation: ecoModalIn .22s ease both;
}
@keyframes ecoModalIn{
  from{ transform: translate(-50%,-52%) scale(.98); opacity:0; }
  to{ transform: translate(-50%,-50%) scale(1); opacity:1; }
}

.eco3__layout{
  display:grid;
  grid-template-columns: 1.25fr .75fr; /* mais espaço pro orbital, painel mais à direita */
  gap: 24px; /* ✅ mantém consistente (não usar 75px fixo) */
  align-items: center;
}

/* painel */
.eco3__panel{
  justify-self: end;          /* empurra o painel para o lado direito */
  width: min(640px, 100%);    /* mantém um tamanho bonito */
  background:#fff;
  border:1px solid rgba(15,17,21,.1);
  border-radius:24px;
  padding:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.12);
}

/* orbital */
.eco3__orbital{
  position: relative;
  width: 520px;
  height: 520px;
  margin: 0 auto;
}

/* anéis */
.eco3__rings{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at center, transparent 46%, rgba(227,6,19,.12) 47%, transparent 48%),
    radial-gradient(circle at center, transparent 64%, rgba(15,17,21,.10) 65%, transparent 66%);
}

/* núcleo */
.eco3__core{
  position:absolute;
  inset:50%;
  transform:translate(-50%,-50%);
  width: 180px;
  height: 180px;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(227,6,19,.2);
  box-shadow:0 20px 60px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:2;
}

.eco3__dot{
  width:10px;
  height:10px;
  background:#e30613;
  border-radius:50%;
  margin-bottom:8px;
}

/* item orbital */
.eco3__item{
  position:absolute;
  inset:50%;
  transform:
    rotate(var(--a))
    translate(210px)
    rotate(calc(var(--a) * -1));
  transform-origin:0 0;
}

/* ponto */
.eco3__pin{
  width:12px;
  height:12px;
  background:#e30613;
  border-radius:50%;
  box-shadow:0 0 0 6px rgba(227,6,19,.15);
}

/* card */
.eco3__card{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  border:1px solid rgba(15,17,21,.1);
  border-radius:999px;
  padding:10px 16px;
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}

/* direção do crescimento (ANTI-BUG) */
.eco3__item.right .eco3__card{ left:22px; }
.eco3__item.left  .eco3__card{ right:22px; }
.eco3__item.top .eco3__card{
  bottom:22px;
  top:auto;
  transform:none;
}
.eco3__item.bottom .eco3__card{
  top:22px;
  transform:none;
}

.eco3__tag{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(227,6,19,.08);
  border:1px solid rgba(227,6,19,.18);
  font-weight:800;
  font-size:12px;
}

.eco3__badges{
  display:flex;
  gap:10px;
  margin:14px 0;
  flex-wrap: wrap; /* ✅ no mobile não estoura */
}
.eco3__badges span{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.1);
  font-weight:800;
  font-size:12px;
}

/* ==========================
   EFEITOS ORBITA (PULSE)
========================== */

/* pulse suave nos pontos (eco3__pin) */
.eco3__pin{
  position: relative;
  animation: pinPulse 2.4s ease-in-out infinite;
}

/* anel pulsando muito leve */
.eco3__rings{
  animation: ringBreathe 3.6s ease-in-out infinite;
}

/* delays diferentes para não “piscar” tudo junto
   ✅ use nth-of-type para não depender de posição no DOM */
.eco3__item:nth-of-type(1) .eco3__pin{ animation-delay: 0ms; }
.eco3__item:nth-of-type(2) .eco3__pin{ animation-delay: 320ms; }
.eco3__item:nth-of-type(3) .eco3__pin{ animation-delay: 640ms; }
.eco3__item:nth-of-type(4) .eco3__pin{ animation-delay: 960ms; }
.eco3__item:nth-of-type(5) .eco3__pin{ animation-delay: 1280ms; }
.eco3__item:nth-of-type(6) .eco3__pin{ animation-delay: 1600ms; }
.eco3__item:nth-of-type(7) .eco3__pin{ animation-delay: 1920ms; }
.eco3__item:nth-of-type(8) .eco3__pin{ animation-delay: 2240ms; }

/* blips correndo no anel (efeito “scanner”) */
.eco3__orbital::before,
.eco3__orbital::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
}

/* Blip 1 */
.eco3__orbital::before{
  background:
    radial-gradient(circle, rgba(227,6,19,.55) 0 5px, transparent 6px) 50% 8% / 12px 12px no-repeat;
  opacity:.85;
  filter: blur(.2px);
  animation: blipSpin 6.5s linear infinite;
}

/* Blip 2 (contra rotação) */
.eco3__orbital::after{
  background:
    radial-gradient(circle, rgba(15,17,21,.28) 0 5px, transparent 6px) 50% 10% / 12px 12px no-repeat;
  opacity:.65;
  animation: blipSpinReverse 9s linear infinite;
}

/* animações */
@keyframes pinPulse{
  0%   { transform: scale(.92); box-shadow: 0 0 0 6px rgba(227,6,19,.12); opacity:.65; }
  45%  { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(227,6,19,.16); opacity:1; }
  100% { transform: scale(.92); box-shadow: 0 0 0 6px rgba(227,6,19,.12); opacity:.65; }
}

@keyframes ringBreathe{
  0%,100% { filter: blur(0px); opacity: 1; }
  50%     { filter: blur(.2px); opacity: .92; }
}

@keyframes blipSpin{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes blipSpinReverse{
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* acessibilidade: respeita reduzir movimento */
@media (prefers-reduced-motion: reduce){
  .eco3__pin,
  .eco3__rings,
  .eco3__orbital::before,
  .eco3__orbital::after{
    animation: none !important;
  }
}

/* ==========================
   RESPONSIVO (eco3)
========================== */
@media (max-width: 980px){
  .eco3__layout{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .eco3__panel{
    justify-self: center;
    width: min(720px, 100%);
  }
  .eco3__orbital{
    width: 420px;
    height: 420px;
  }
  .eco3__item{
    transform:
      rotate(var(--a))
      translate(170px)
      rotate(calc(var(--a) * -1));
  }
}

@media (max-width: 520px){
  .eco3__orbital{
    width: 340px;
    height: 340px;
  }
  .eco3__core{
    width: 140px;
    height: 140px;
  }
  .eco3__item{
    transform:
      rotate(var(--a))
      translate(135px)
      rotate(calc(var(--a) * -1));
  }
  .eco3__card{
    padding: 8px 12px;
    font-size: 12px;
  }
}






/* ==========================
   ECO3 - Chips dos módulos (hover + blink)
========================== */

/* ✅ mantém o eco3__card definido aqui, mas evita duplicar "position/top/transform"
   (se este bloco vier depois do eco3 base, ele sobrescreve naturalmente) */
.eco3__card{
  position:absolute;
  top:50%;
  transform: translateY(-50%);

  min-width: 160px;
  max-width: 220px;
  padding: 12px 20px;

  background:#fff;
  border:1px solid rgba(15,17,21,.10);
  border-radius:999px;

  font-weight:800;
  font-size:14px;
  white-space: nowrap;

  box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    filter .18s ease;

  overflow: hidden;
}

/* Efeito de "piscar" no chip (sutil e elegante) */
.eco3__card{
  animation: chipBlink 2.9s ease-in-out infinite;
}

/* Cada módulo com delay diferente */
.eco3__item:nth-of-type(1) .eco3__card{ animation-delay: 0ms; }
.eco3__item:nth-of-type(2) .eco3__card{ animation-delay: 260ms; }
.eco3__item:nth-of-type(3) .eco3__card{ animation-delay: 520ms; }
.eco3__item:nth-of-type(4) .eco3__card{ animation-delay: 780ms; }
.eco3__item:nth-of-type(5) .eco3__card{ animation-delay: 1040ms; }
.eco3__item:nth-of-type(6) .eco3__card{ animation-delay: 1300ms; }
.eco3__item:nth-of-type(7) .eco3__card{ animation-delay: 1560ms; } /* ✅ cobre 8 itens */
.eco3__item:nth-of-type(8) .eco3__card{ animation-delay: 1820ms; } /* ✅ cobre 8 itens */

/* Brilho atravessando (shine) */
.eco3__card::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 70%;
  height: 180%;
  transform: rotate(22deg);
  background: linear-gradient(90deg,
    transparent,
    rgba(227,6,19,.14),
    transparent
  );
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events:none;
}

/* Hover no item (chip + pin) */
.eco3__item:hover .eco3__card{
  border-color: rgba(227,6,19,.55);
  box-shadow: 0 24px 70px rgba(227,6,19,.16), 0 18px 50px rgba(15,17,21,.12);
  transform: translateY(-50%) translateY(-2px) scale(1.02); /* ✅ preserva o centro vertical */
  filter: saturate(1.05);
  background: rgba(255,255,255,.98);
}
.eco3__item:hover .eco3__card::after{
  opacity: 1;
  animation: chipShine 1.1s ease forwards;
}

/* Pin também reage no hover */
.eco3__item:hover .eco3__pin{
  box-shadow: 0 0 0 8px rgba(227,6,19,.18);
  transform: scale(1.08);
}

/* ✅ remover/evitar a "linha" que pode ficar estranha no mobile
   (mantém no desktop, desliga em telas pequenas) */
.eco3__item:hover::before{
  content:"";
  position:absolute;
  left: 6px;
  top: 6px;
  width: 1px;
  height: 120px;
  background: linear-gradient(180deg, rgba(227,6,19,.0), rgba(227,6,19,.28), rgba(15,17,21,.08));
  opacity: .55;
  transform: rotate(var(--a));
  transform-origin: top;
  pointer-events:none;
}

/* Animações */
@keyframes chipBlink{
  0%, 100%{
    box-shadow: 0 10px 30px rgba(15,17,21,.10);
    border-color: rgba(15,17,21,.10);
  }
  45%{
    box-shadow: 0 18px 55px rgba(227,6,19,.10), 0 10px 30px rgba(15,17,21,.08);
    border-color: rgba(227,6,19,.22);
  }
}

@keyframes chipShine{
  0%   { left:-60%; opacity:.0; }
  30%  { opacity:.85; }
  100% { left:120%; opacity:0; }
}

/* Acessibilidade: respeita reduzir movimento */
@media (prefers-reduced-motion: reduce){
  .eco3__card{ animation: none !important; }
  .eco3__card::after{ animation: none !important; }
}

/* ativo */
.eco3__item.is-active .eco3__card{
  border-color: rgba(227,6,19,.55);
  box-shadow: 0 26px 80px rgba(227,6,19,.16), 0 18px 50px rgba(15,17,21,.12);
}
.eco3__item.is-active .eco3__pin{
  box-shadow: 0 0 0 10px rgba(227,6,19,.18);
}

/* Centro com logo */
.eco3__core{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding: 18px;

  /* anel suave combinando com a paleta */
  background:
    radial-gradient(circle at 30% 25%, rgba(227,6,19,.10), transparent 60%),
    rgba(255,255,255,.92);
  border: 1px solid rgba(227,6,19,.18);
}

.eco3__logoImg{
  width: 92px;
  height: 92px;
  object-fit: contain;
  border-radius: 999px;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.10));
}

/* ✅ ajustes responsivos para eco3__card (chips) */
@media (max-width: 980px){
  .eco3__card{
    min-width: 148px;
    max-width: 200px;
    padding: 10px 16px;
    font-size: 13px;
  }
}

@media (max-width: 520px){
  .eco3__card{
    min-width: 132px;
    max-width: 180px;
    padding: 9px 14px;
    font-size: 12px;
  }
  .eco3__item:hover::before{ display:none; } /* ✅ evita ruído visual no mobile */
}





/* ==========================
   CLIENTES (CARD + LOGOS FLUTUANTES)
========================== */
.clients{
  background:
    radial-gradient(1000px 420px at 20% 30%, rgba(227,6,19,.08), transparent 60%),
    radial-gradient(1000px 420px at 80% 40%, rgba(15,17,21,.06), transparent 60%);
}

.clientsCard{
  border-radius: 34px;
  border: 1px solid rgba(15,17,21,.08);
  background: rgba(255,255,255,.88);
  box-shadow: 0 30px 90px rgba(0,0,0,.10);
  padding: 34px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.clientsCard::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 20% 20%, rgba(227,6,19,.12), transparent 45%),
    radial-gradient(circle at 80% 40%, rgba(0,0,0,.08), transparent 45%);
  filter: blur(18px);
  opacity:.9;
  pointer-events:none;
}

.clientsCopy{
  position: relative;
  z-index: 2;
}

.clientsCopy h2{
  margin:0 0 10px;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing:-.03em;
}

.clientsCopy p{
  margin:0 0 14px;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.55;
  max-width: 52ch;
}

.clientsList{
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: rgba(15,17,21,.84);
  font-weight: 700;
}

.clientsList li{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.check{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 6px;
  background: rgba(227,6,19,.10);
  border: 1px solid rgba(227,6,19,.18);
  position: relative;
  flex: 0 0 18px; /* ✅ evita “amassar” no mobile */
}

.check::after{
  content:"";
  position:absolute;
  left:5px; top:3px;
  width:6px; height:10px;
  border-right:2px solid rgba(227,6,19,.85);
  border-bottom:2px solid rgba(227,6,19,.85);
  transform: rotate(40deg);
}

/* LOGOS */
.clientsLogos{
  position: relative;
  z-index: 2;
  display:flex;
  justify-content:center;
  align-items:center;
}

.logoGrid{
  width: min(420px, 100%);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items:center;
  justify-items:center;
}

.logoBubble{
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,17,21,.08);
  box-shadow: 0 16px 50px rgba(0,0,0,.10);
  display:grid;
  place-items:center;
  overflow:hidden;
  transform: translateY(0);
  will-change: transform;
}

.logoBubble img{
  width: 82%;
  height: 82%;
  object-fit: contain;
  filter: grayscale(.05);
  opacity: .95;
}

/* animações (subir/descer) */
.float1{ animation: floatY 4.6s ease-in-out infinite; }
.float2{ animation: floatY 5.4s ease-in-out infinite; animation-delay: .35s; }
.float3{ animation: floatY 6.2s ease-in-out infinite; animation-delay: .7s; }

@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}

/* hover suave */
.logoBubble:hover{
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(8, 7, 7, 0.22);
  box-shadow: 0 22px 70px rgba(227,6,19,.14), 0 16px 50px rgba(0,0,0,.12);
}

/* responsivo */
@media (max-width: 980px){
  .clientsCard{
    grid-template-columns: 1fr;
    padding: 26px;
  }
  .logoGrid{
    width: min(520px, 100%);
    gap: 14px;
  }
  .logoBubble{
    width: 96px;
    height: 96px;
  }
}

/* ✅ mobile pequeno: reduz grid das logos e melhora espaçamento */
@media (max-width: 520px){
  .clientsCard{ padding: 20px; }
  .clientsList{ gap: 8px; }
  .logoGrid{
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .logoBubble{
    width: 82px;
    height: 82px;
  }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .float1,.float2,.float3{ animation: none !important; }
}

/* ==========================
   INTEGRAÇÕES (logos grandes | loop infinito)
========================== */
.integrations-marquee{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}

/* coluna */
.im-col{
  position:relative;
  height: 320px;
  border-radius: var(--radius2);
  border: 1px solid rgba(15,17,21,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 42px rgba(15,17,21,.06);
  overflow:hidden;

  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
}

/* trilho */
.im-track{
  position:absolute;
  inset: 10px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  height: max-content;
  will-change: transform;
}

/* animações — CONTROLE A VELOCIDADE AQUI */
.im-col[data-dir="up"] .im-track{
  animation: imUp 53s linear infinite;
}

.im-col[data-dir="down"] .im-track{
  animation: imDown 53s linear infinite;
}

/* keyframes */
@keyframes imUp{
  from{ transform: translateY(0); }
  to{ transform: translateY(-50%); }
}

@keyframes imDown{
  from{ transform: translateY(-50%); }
  to{ transform: translateY(0); }
}

/* pausa ao hover */
.im-col:hover .im-track{
  animation-play-state: paused;
}

/* cards */
.im-item{
  width: clamp(120px, 16vw, 170px);
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  border: 1px solid rgba(15,17,21,.10);
  background: rgba(255,255,255,.94);
  display:grid;
  place-items:center;
  box-shadow: 0 18px 50px rgba(15,17,21,.08);
}

.im-item img{
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

/* responsivo */
@media (max-width: 980px){
  .integrations-marquee{
    grid-template-columns: 1fr;
  }
  .im-col{
    height: 420px;
  }
}

/* ✅ mobile pequeno: suaviza alturas e garante cards confortáveis */
@media (max-width: 520px){
  .im-col{ height: 380px; }
  .im-item{ width: clamp(112px, 42vw, 160px); }
}




/* ==========================
   ECO3 — FORÇA CENTRALIZAÇÃO (override)
   Cole no FINAL do CSS
========================== */

.eco3__layout{
  width: 100%;
  display: grid !important;
  grid-template-columns: 1fr !important; /* mata o layout antigo de 2 colunas */
  justify-items: center !important;
  align-items: center !important;
  gap: 0 !important; /* remove o gap antigo (ex: 75px) */
}

.eco3__orbital{
  justify-self: center !important;
  margin: 0 auto !important;
}

/* (opcional) se quiser o título e o texto centralizados também */
.eco3 .section__head{
  justify-content: center;
}
.eco3 .section__head p{
  text-align: center;
}



/* ==========================
   ECO3 — CHIPS PREMIUM + ÍCONES
========================== */

.eco3__card{
  /* base premium */
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding: 12px 18px;
  min-width: 170px;
  max-width: 240px;

  border-radius: 999px;
  border: 1px solid rgba(15,17,21,.10);
  background: rgba(255,255,255,.92);

  font-weight: 900;
  font-size: 14px;
  letter-spacing: -.01em;

  box-shadow:
    0 18px 50px rgba(15,17,21,.10),
    0 1px 0 rgba(255,255,255,.65) inset;

  cursor: pointer;
  user-select: none;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    filter .18s ease;
}

/* ícone (bolinha premium) */
.eco3__card::before{
  content:"";
  width: 34px;
  height: 34px;
  border-radius: 14px;

  background: rgba(227,6,19,.08);
  border: 1px solid rgba(227,6,19,.18);

  box-shadow:
    0 10px 26px rgba(227,6,19,.10),
    0 1px 0 rgba(255,255,255,.85) inset;

  flex: 0 0 34px;

  /* o SVG entra via mask (abaixo) */
  -webkit-mask: var(--eco-ic) center / 18px 18px no-repeat;
  mask: var(--eco-ic) center / 18px 18px no-repeat;
}

/* define a "cor" do ícone via currentColor */
.eco3__card{
  color: rgba(15,17,21,.92);
}
.eco3__card::before{
  background-color: rgba(227,6,19,.08);
}
.eco3__card::before{
  /* usamos currentColor no mask através de background */
  background: rgba(227,6,19,.10);
}
.eco3__card::before{
  /* o ícone em si */
  background: linear-gradient(135deg, rgba(227,6,19,.95), rgba(255,42,42,.85));
}

/* hover premium */
.eco3__item:hover .eco3__card{
  transform: translateY(-50%) translateY(-3px) scale(1.02);
  border-color: rgba(227,6,19,.35);
  background: rgba(255,255,255,.98);
  box-shadow:
    0 28px 80px rgba(15,17,21,.14),
    0 18px 60px rgba(227,6,19,.10);
}

/* estado ativo (clicado) */
.eco3__item.is-active .eco3__card{
  border-color: rgba(227,6,19,.55);
  box-shadow:
    0 34px 90px rgba(227,6,19,.14),
    0 24px 70px rgba(15,17,21,.14);
}

/* melhora foco teclado */
.eco3__card:focus-visible{
  outline: 3px solid rgba(227,6,19,.25);
  outline-offset: 3px;
}

/* ==========================
   ÍCONES (SVG INLINE via CSS)
   Cada data-icon seta --eco-ic
========================== */

.eco3__card[data-icon="fiscal"]{
  --eco-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h8l4 4v16H7V2zm8 1.5V7h3.5L15 3.5zM9 10h8v2H9v-2zm0 4h8v2H9v-2zm0 4h6v2H9v-2z'/%3E%3C/svg%3E");
}

.eco3__card[data-icon="financeiro"]{
  --eco-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1a11 11 0 100 22 11 11 0 000-22zm1 17.9V20h-2v-1.1c-1.8-.3-3.2-1.5-3.4-3.2h2.1c.2.9 1 1.5 2.3 1.5 1.2 0 2-.5 2-1.3 0-.7-.5-1.1-2.2-1.5-2.4-.6-4-1.4-4-3.7 0-1.8 1.3-3.1 3.2-3.4V4h2v1.2c1.6.3 2.8 1.4 3.1 3H14c-.2-.8-.8-1.3-1.9-1.3-1 0-1.7.5-1.7 1.2 0 .8.7 1.1 2.4 1.6 2.2.6 3.8 1.4 3.8 3.7 0 1.9-1.3 3.2-3.6 3.5z'/%3E%3C/svg%3E");
}

.eco3__card[data-icon="comercial"]{
  --eco-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 4h-2l-1 2v2h2l3.6 7.6-1.35 2.45A1 1 0 009 22h12v-2H9.4l1.1-2H18a1 1 0 00.9-.55l3.1-6.45A1 1 0 0021.1 9H7.4L6.7 7H22V5H7.2L7 4z'/%3E%3C/svg%3E");
}

.eco3__card[data-icon="integracoes"]{
  --eco-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 7a4 4 0 017.9-1H17a5 5 0 00-9.8 0H7zm10 10a4 4 0 01-7.9 1H7a5 5 0 009.8 0H17zM8 12a3 3 0 013-3h2v2h-2a1 1 0 100 2h2v2h-2a3 3 0 01-3-3zm8 0a3 3 0 01-3 3h-2v-2h2a1 1 0 100-2h-2V9h2a3 3 0 013 3z'/%3E%3C/svg%3E");
}

.eco3__card[data-icon="producao"]{
  --eco-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 20V8l8-4 8 4v12h-5v-6H9v6H4zm7-8h2v2h-2v-2z'/%3E%3C/svg%3E");
}

.eco3__card[data-icon="bi"]{
  --eco-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 9h3v10H5V9zm5-4h3v14h-3V5zm5 7h3v7h-3v-7z'/%3E%3C/svg%3E");
}

.eco3__card[data-icon="almox"]{
  --eco-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 8V7l-3-3H6L3 7v1h18zM3 10v10h18V10H3zm4 2h4v6H7v-6z'/%3E%3C/svg%3E");
}

.eco3__card[data-icon="web"]{
  --eco-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm6.9 9h-3.1a15 15 0 00-1.2-5.1A8 8 0 0118.9 11zM12 4c.9 1.2 1.7 3.4 2 7H10c.3-3.6 1.1-5.8 2-7zM5.1 13h3.1c.2 1.9.7 3.7 1.3 5.1A8 8 0 015.1 13zm3.1-2H5.1a8 8 0 014.3-5.1A15 15 0 008.2 11zm1.8 2h4c-.3 3.6-1.1 5.8-2 7-.9-1.2-1.7-3.4-2-7zm5.8 0h3.1a8 8 0 01-4.3 5.1c.6-1.4 1.1-3.2 1.2-5.1z'/%3E%3C/svg%3E");
}

/* mobile: chips menores */
@media (max-width: 520px){
  .eco3__card{
    min-width: 150px;
    padding: 10px 14px;
    font-size: 13px;
  }
  .eco3__card::before{
    width: 30px;
    height: 30px;
    border-radius: 12px;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
  }
}



/* ==========================
   ECO3 — NÚCLEO (CARD ANIMADO PREMIUM) — FIX
   Paleta Redsis: vermelho/branco/preto
========================== */

.eco3__core.ecoCoreCard{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: 132px;
  height: 132px;

  /* ✅ base mais “premium” */
  /* border-radius: 28px;
  border: 1px solid rgba(227,6,19,.18); */
  background:
    radial-gradient(700px 320px at 30% 25%, rgba(227,6,19,.12), transparent 55%),
    rgba(255,255,255,.92);

  box-shadow:
    0 30px 90px rgba(15,17,21,.18),
    0 1px 0 rgba(255,255,255,.65) inset;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  z-index: 3;

  transition:
    width .45s ease,
    height .45s ease,
    border-radius .45s ease,
    transform .45s ease,
    box-shadow .45s ease;
}

/* ✅ no hover, expande COMO CARD (não elipse) */
@media (hover:hover){
  .eco3__core.ecoCoreCard:hover{
    width: 520px;
    height: 300px;        /* ⬅️ um pouco mais alto pra ficar “card” */
    border-radius: 38px;  /* ⬅️ borda arredondada premium */
    box-shadow:
      0 40px 120px rgba(15,17,21,.22),
      0 24px 80px rgba(227,6,19,.14);
  }
}

/* círculo interno (efeito “ring”) */
.ecoCoreCard__circle{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;

  /* ✅ acompanha o formato do card */
  border-radius: inherit;
}

.ecoCoreCard__circle::before{
  content:"";
  position:absolute;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 8px solid rgba(227,6,19,.85);

  box-shadow:
    0 0 0 10px rgba(227,6,19,.08),
    0 18px 70px rgba(227,6,19,.12);

  transition: .45s ease;
}

/* ✅ no hover, a camada vira “fundo vermelho” e segue as bordas do card */
@media (hover:hover){
  .eco3__core.ecoCoreCard:hover .ecoCoreCard__circle::before{
    width: 100%;
    height: 100%;
    border-radius: inherit; 
    background: linear-gradient(135deg, var(--red), var(--red2));
    border-color: rgba(255,255,255,.22);
  }
}

/* logo (some no hover, igual ao exemplo) */
.ecoCoreCard__logo{
  position: relative;
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 999px;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.16));
  transition: transform .35s ease, opacity .35s ease;
}

@media (hover:hover){
  .eco3__core.ecoCoreCard:hover .ecoCoreCard__logo{
    transform: scale(.6);
    opacity: .05;
  }
}

/* “produto” (imagem que aparece e desloca) */
.ecoCoreCard__product{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%) scale(0.0) rotate(-20deg);
  width: 250px;
  height: auto;
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.20));
  pointer-events:none;
}

@media (hover:hover){
  .eco3__core.ecoCoreCard:hover .ecoCoreCard__product{
    opacity: 1;
    transform: translate(115px,-70px) scale(1) rotate(8deg);
  }
}

/* conteúdo (aparece no hover) */
.ecoCoreCard__content{
  position: relative;
  z-index: 2;

  max-width: 420px;
  text-align: left;

  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease .15s, transform .35s ease .15s;
  color:#fff; /* no hover o fundo vira vermelho */
}

@media (hover:hover){
  .eco3__core.ecoCoreCard:hover .ecoCoreCard__content{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.ecoCoreCard__content h3{
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -.02em;
  font-weight: 900;
}

.ecoCoreCard__content p{
  margin: 0 0 12px;
  line-height: 1.55;
  font-weight: 650;
  opacity: .95;
}

/* CTA */
.ecoCoreCard__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 10px 14px;
  border-radius: 14px; /* ⬅️ mais arredondado */
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  color:#fff;
  font-weight: 900;
  text-decoration:none;

  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.ecoCoreCard__cta:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.20);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

/* MOBILE: não expande (fica bonito e estável) */
@media (max-width: 520px){
  .eco3__core.ecoCoreCard{
    width: 190px;
    height: 190px;
    border-radius: 22px;
  }
  .ecoCoreCard__circle::before{
    width: 180px;
    height: 180px;
    border-width: 8px;
  }
  .ecoCoreCard__logo{
    width: 82px;
    height: 82px;
  }

}

@media (width <= 380px) {
  .ecoCoreCard__content {
    text-align: center;
    max-width: 20rem;
    
    & > h3 {
      font-size: 1.5rem;
    }

    & > p {
      font-size: 0.9rem;
      word-wrap: break-word;
      word-break: keep-all;
    }

    & > a {
      margin-top: 0.5rem;
      font-size: 1rem;
    }
  }
}
/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .eco3__core.ecoCoreCard,
  .ecoCoreCard__circle::before,
  .ecoCoreCard__logo,
  .ecoCoreCard__product,
  .ecoCoreCard__content{
    transition: none !important;
  }
}




/* ==========================
   INTEGRAÇÕES — MOBILE PREMIUM (1 LINHA HORIZONTAL)
========================== */
@media (max-width: 980px){

  /* vira uma faixa horizontal */
  .integrations-marquee{
    display: block !important;
    max-width: 100%;
  }

  /* esconde as outras colunas, fica só a primeira */
  .integrations-marquee .im-col{ display:none; }
  .integrations-marquee .im-col:first-child{ 
    display:block;
    height: 140px;
    border-radius: 26px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 60px rgba(15,17,21,.10);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  }

  /* track vira horizontal */
  .integrations-marquee .im-col:first-child .im-track{
    position: absolute;
    inset: 14px;
    display: flex !important;
    flex-direction: row !important;
    gap: 14px;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: imLeft 40s linear infinite !important;
  }

  /* cards menores e retangulares */
  .integrations-marquee .im-col:first-child .im-item{
    width: 150px;
    height: 90px;
    aspect-ratio: auto;
    border-radius: 18px;
    display: grid;
    place-items: center;
  }

  .integrations-marquee .im-col:first-child .im-item img{
    max-width: 72%;
    max-height: 72%;
  }

  @keyframes imLeft{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }
}

/* ==========================
   INTEGRAÇÕES — MOBILE (3 LINHAS HORIZONTAIS INFINITAS)
   mantém desktop como está
========================== */
@media (max-width: 980px){

  /* 3 linhas empilhadas */
  .integrations-marquee{
    display: grid !important;
    grid-template-columns: 1fr !important; /* uma coluna (vertical) */
    gap: 14px;
    max-width: 560px;
    margin-inline: auto;
  }

  /* cada coluna vira uma faixa horizontal */
  .im-col{
    height: 112px;                 /* altura da faixa */
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 55px rgba(15,17,21,.10);
    overflow: hidden;

    /* fade lateral premium */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  }

  /* track agora é horizontal */
  .im-track{
    position: absolute;
    inset: 12px;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px;
    align-items: center;
    width: max-content;
    height: 100%;
    will-change: transform;
  }

  /* cards ficam retangulares no mobile */
  .im-item{
    width: 150px;
    height: 88px;
    aspect-ratio: auto;
    border-radius: 18px;
    flex: 0 0 auto;
  }

  .im-item img{
    max-width: 74%;
    max-height: 74%;
    object-fit: contain;
  }

  /* animação esquerda/direita controlada por variável */
  .im-col[data-dir="left"]  .im-track{ animation: imLeft  var(--im-speed, 36s) linear infinite; }
  .im-col[data-dir="right"] .im-track{ animation: imRight var(--im-speed, 40s) linear infinite; }

  @keyframes imLeft{
    from{ transform: translateX(0); }
    to  { transform: translateX(-50%); }
  }
  @keyframes imRight{
    from{ transform: translateX(-50%); }
    to  { transform: translateX(0); }
  }
}


/* ==========================
   FIX: GARANTIR 3 LINHAS NO MOBILE
   (anula CSS antigo da opção B)
========================== */
@media (max-width: 980px){
  .integrations-marquee .im-col{
    display: block !important;   /* 👈 força exibir as 3 */
  }
}


/* ==========================
   INTEGRAÇÕES — MOBILE: 3 LINHAS HORIZONTAIS ANIMADAS (FORÇADO)
   (não depende de JS / ignora data-dir)
========================== */
@media (max-width: 980px){

  .integrations-marquee{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px;
    max-width: 560px;
    margin-inline: auto;
  }

  .im-col{
    position: relative;
    height: 112px;
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 55px rgba(15,17,21,.10);
    overflow: hidden;

    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  }

  .im-track{
    position: absolute;
    inset: 12px;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px;
    align-items: center;
    width: max-content;
    height: 100%;
    will-change: transform;
  }

  .im-item{
    width: 150px;
    height: 88px;
    border-radius: 18px;
    flex: 0 0 auto;
  }

  .im-item img{
    max-width: 74%;
    max-height: 74%;
    object-fit: contain;
  }

  /* FORÇA animação horizontal nas 3 linhas */
  .integrations-marquee .im-col:nth-child(1) .im-track{
    animation: imLeft 36s linear infinite !important;
  }
  .integrations-marquee .im-col:nth-child(2) .im-track{
    animation: imRight 42s linear infinite !important;
  }
  .integrations-marquee .im-col:nth-child(3) .im-track{
    animation: imLeft 48s linear infinite !important;
  }

  @keyframes imLeft{
    from{ transform: translateX(0); }
    to  { transform: translateX(-50%); }
  }
  @keyframes imRight{
    from{ transform: translateX(-50%); }
    to  { transform: translateX(0); }
  }

  /* no mobile não faz sentido pausar no hover */
  .im-col:hover .im-track{ animation-play-state: running !important; }
}



/* ==========================
   ECOCORECARD — MOBILE SIZE FIX
   Quadrado ≈ círculo (sem sobra)
========================== */

@media (max-width: 520px){

  /* container do núcleo */
  .eco3__core.ecoCoreCard{
    width: 110px;        /* 👈 menor */
    height: 110px;
    border-radius: 24px; /* levemente arredondado */
  }

  /* camada interna */
  .ecoCoreCard__circle{
    border-radius: 24px;
  }

  /* círculo / anel vermelho */
  .ecoCoreCard__circle::before{
    width: 150px;        /* 👈 quase igual ao container */
    height: 150px;
    border-width: 3px;   /* fino e elegante */
    border-radius: 999px;
    box-shadow:
      0 0 0 6px rgba(227,6,19,.06),
      0 14px 40px rgba(227,6,19,.10);
  }

  /* logo central */
  .ecoCoreCard__logo{
    width: 72px;
    height: 72px;
  }

}



/* ==========================
   ECO3 — MOBILE TEXT FIT FIX
   Apenas reduz tamanho para caber
========================== */
@media (max-width: 520px){

  /* reduz levemente o raio da órbita */
  .eco3__item{
    transform:
      rotate(var(--a))
      translate(132px)
      rotate(calc(var(--a) * -1));
  }

  /* BOTÕES DOS MÓDULOS */
  .eco3__card{
    font-size: 11.5px;        /* 👈 menor */
    line-height: 1.15;        /* compacto */
    padding: 8px 10px;        /* menos largura */
    max-width: 150px;         /* evita estourar tela */
    min-width: 110px;

    white-space: normal;      /* permite quebrar */
    text-align: center;
  }

  /* aproxima do pin para não sair da tela */
  .eco3__item.right .eco3__card{ left: 10px; }
  .eco3__item.left  .eco3__card{ right: 10px; }

  /* topo e base não encostam no texto */
  .eco3__item.top .eco3__card{
    bottom: 10px;
    top:auto;
    transform:none;
  }
  .eco3__item.bottom .eco3__card{
    top: 10px;
    transform:none;
  }
}

/* ==========================
   ECO3 — MOBILE: CHIP MAIS COMPACTO
========================== */
@media (max-width: 520px){

  .eco3__card{
    font-size: 9px;          /* 👈 menor ainda */
    line-height: 1.1;
    padding: 4px 6px;         /* menos espaço lateral */
    min-height: 20px;

    display: inline-flex;
    align-items: center;
    gap: 0px;                 /* 👈 MENOS espaço entre ícone e texto */

    border-radius: 999px;
  }

  /* ícone dentro do chip */
  .eco3__card svg,
  .eco3__card img{
    width: 14px;              /* ícone menor */
    height: 14px;
    flex-shrink: 0;
  }
}


/* =========================================================
   ECO3 — PATCH FINAL (cole no FINAL do CSS)
   - restaura ancoragem dos chips (position absolute)
   - evita embolar no mobile
   - reduz fonte + gap ícone/texto no mobile
========================================================= */

/* --- GARANTE ÓRBITA CENTRAL E ÁREA RESERVADA --- */
#ecosistema .eco3__layout{
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 0 !important;
}

#ecosistema .eco3__orbital{
  position: relative !important;
  width: 520px;
  height: 520px;
  margin: 10px auto 26px !important;
  overflow: visible !important;
}

/* --- ITENS EM ÓRBITA (ESSENCIAL PRA NÃO EMBOLOAR) --- */
#ecosistema .eco3__item{
  position: absolute !important;
  inset: 50% !important;              /* ancora no centro */
  transform:
    rotate(var(--a))
    translate(210px)                  /* raio desktop */
    rotate(calc(var(--a) * -1)) !important;
  transform-origin: 0 0 !important;
}

/* pin */
#ecosistema .eco3__pin{
  position: relative !important;
  display: block;
}

/* --- CHIP: VOLTA A SER ABSOLUTO, ANCORADO NO PIN --- */
#ecosistema .eco3__card{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 12px 18px !important;
  min-width: 170px !important;
  max-width: 240px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(15,17,21,.10) !important;
  background: rgba(255,255,255,.92) !important;

  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: -.01em !important;

  box-shadow:
    0 18px 50px rgba(15,17,21,.10),
    0 1px 0 rgba(255,255,255,.65) inset !important;

  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

/* direção do chip (pra não atravessar o círculo) */
#ecosistema .eco3__item.right .eco3__card{ left: 22px !important; }
#ecosistema .eco3__item.left  .eco3__card{ right: 22px !important; }
#ecosistema .eco3__item.top .eco3__card{
  top: auto !important;
  bottom: 22px !important;
  transform: none !important;
}
#ecosistema .eco3__item.bottom .eco3__card{
  top: 22px !important;
  transform: none !important;
}

/* --- HOVER (remove aquele translate duplicado que bagunça) --- */
@media (hover:hover){
  #ecosistema .eco3__item:hover .eco3__card{
    transform: translateY(-50%) translateY(-3px) scale(1.02) !important;
    border-color: rgba(227,6,19,.35) !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow:
      0 28px 80px rgba(15,17,21,.14),
      0 18px 60px rgba(227,6,19,.10) !important;
  }

  #ecosistema .eco3__item.top:hover .eco3__card{
    transform: translateY(-3px) scale(1.02) !important; /* top não usa -50% */
  }
  #ecosistema .eco3__item.bottom:hover .eco3__card{
    transform: translateY(3px) scale(1.02) !important;
  }
}

/* --- ÍCONE (se você estiver usando ::before com mask) --- */
#ecosistema .eco3__card::before{
  content:"";
  width: 34px;
  height: 34px;
  border-radius: 14px;
  flex: 0 0 34px;

  background: linear-gradient(135deg, rgba(227,6,19,.95), rgba(255,42,42,.85));
  -webkit-mask: var(--eco-ic) center / 18px 18px no-repeat;
  mask: var(--eco-ic) center / 18px 18px no-repeat;

  box-shadow:
    0 10px 26px rgba(227,6,19,.10),
    0 1px 0 rgba(255,255,255,.85) inset;
}

/* =========================================================
   MOBILE (apenas tamanho/spacing para caber)
========================================================= */
@media (max-width: 520px){

  /* reserva espaço e evita invadir texto */
  #ecosistema .section__head{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  #ecosistema .eco3__orbital{
    width: min(360px, 100%) !important;
    height: 360px !important;
    margin: 12px auto 26px !important;
  }

  /* raio menor no mobile */
  #ecosistema .eco3__item{
    transform:
      rotate(var(--a))
      translate(138px)
      rotate(calc(var(--a) * -1)) !important;
  }

  /* 🔻 AQUI: fonte menor + menos espaço entre ícone e texto */
  #ecosistema .eco3__card{
    font-size: 10.5px !important;
    padding: 3px 5px !important;
    gap: 1px !important;

    min-width: 0 !important;
    max-width: 140px !important;

    white-space: normal !important;     /* permite quebrar */
    line-height: 1.1 !important;
    text-align: center !important;
  }

  #ecosistema .eco3__card::before{
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
    border-radius: 10px !important;
    -webkit-mask-size: 14px 14px !important;
    mask-size: 14px 14px !important;
  }

  /* aproxima mais do pin */
  #ecosistema .eco3__item.right .eco3__card{ left: 12px !important; }
  #ecosistema .eco3__item.left  .eco3__card{ right: 12px !important; }
  #ecosistema .eco3__item.top .eco3__card{ bottom: 12px !important; }
  #ecosistema .eco3__item.bottom .eco3__card{ top: 12px !important; }
}


/* ==========================
   ECO3 — MOBILE: RAIO MENOR (chips mais pra dentro)
   Cole no FINAL do CSS
========================== */
@media (max-width: 520px){

  /* deixa a área da órbita um pouco menor pra sobrar espaço lateral */
  .eco3__orbital{
    width: min(360px, 100%);
    height: 360px;
    margin: 10px auto 18px;
  }

  /* ✅ RAIO MENOR: traz tudo mais pra dentro */
  .eco3__item{
    transform:
      rotate(var(--a))
      translate(98px)                 /* 👈 aqui é o raio (menor) */
      rotate(calc(var(--a) * -1));
  }

  /* aproxima ainda mais os chips do pin (menos “salto” lateral) */
  .eco3__item.right .eco3__card{ left: 4px; }
  .eco3__item.left  .eco3__card{ right: 4px; }

  .eco3__item.top .eco3__card{ bottom: 4px; }
  .eco3__item.bottom .eco3__card{ top: 4px; }
}


@media (max-width: 380px){
  .eco3__item{
    transform:
      rotate(var(--a))
      translate(88px)
      rotate(calc(var(--a) * -1));
  }
}


/* ==========================
   ECO3 — MOBILE: REDUZ ANEL DA ÓRBITA
   (isso resolve o corte de vez)
========================== */
@media (max-width: 520px){

  /* reduz a área TOTAL da órbita */
  .eco3__orbital{
    width: 300px;
    height: 300px;
  }

  /* anel externo (principal culpado) */
  .eco3__rings{
    width: 100%;
    height: 100%;
    transform: scale(0.82); /* 👈 reduz o anel visual */
    transform-origin: center;
  }

  /* se existir pseudo-elemento de anel */
  .eco3__orbital::before,
  .eco3__orbital::after{
    transform: scale(0.82);
    transform-origin: center;
  }

  /* agora SIM ajustamos o raio dos módulos */
  .eco3__item{
    transform:
      rotate(var(--a))
      translate(82px)          /* 👈 bem mais pra dentro */
      rotate(calc(var(--a) * -1));
  }
}


/* =========================================
   ECO3 — MOBILE: puxar TUDO pra dentro (FORÇADO)
   Cole no FINAL do CSS
========================================= */

/* pega praticamente todo mobile (seu site já usa 980px como breakpoint) */
@media (max-width: 980px){

  /* 1) reduz o raio: move os módulos (botões + pins) pra dentro */
  #ecosistema .eco3__orbital .eco3__item{
    transform:
      rotate(var(--a))
      translate(105px) /* 👈 diminua mais se precisar: 95px / 85px */
      rotate(calc(var(--a) * -1)) !important;
  }

  /* 2) aproxima o chip do pin para não estourar as laterais */
  #ecosistema .eco3__item.right .eco3__card{ left: 8px !important; }
  #ecosistema .eco3__item.left  .eco3__card{ right: 8px !important; }

  #ecosistema .eco3__item.top .eco3__card{
    bottom: 8px !important;
    top: auto !important;
    transform: none !important;
  }
  #ecosistema .eco3__item.bottom .eco3__card{
    top: 8px !important;
    transform: none !important;
  }
}

/* mobile bem pequeno: raio ainda menor */
@media (max-width: 520px){
  #ecosistema .eco3__orbital .eco3__item{
    transform:
      rotate(var(--a))
      translate(112px)  /* 👈 ajuste fino: 82px / 76px */
      rotate(calc(var(--a) * -1)) !important;
  }
}




/* ==========================
   ECO3 — TÍTULO PREMIUM
========================== */

.eco3-head{
  text-align: center;
  max-width: 880px;
  margin: 0 auto 28px;
}

/* TÍTULO PRINCIPAL */
.eco3-title{
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.1;

  /* gradiente premium */
  background: linear-gradient(
    90deg,
    #0f1115 0%,
    #0f1115 40%,
    #e30613 55%,
    #ff4a4a 65%,
    #0f1115 80%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  position: relative;
}

/* SUBTÍTULO */
.eco3-subtitle{
  margin-top: 14px;
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 600;
  color: rgba(15,17,21,.65);
  max-width: 620px;
  margin-inline: auto;
}

/* ==========================
   ANIMAÇÃO PREMIUM (SUTIL)
========================== */

/* anima apenas quando entra na tela */
.reveal.is-visible .eco3-title{
  animation: titleShine 1.6s ease forwards;
}

@keyframes titleShine{
  from{
    background-position: 0% 50%;
    opacity: 0;
    transform: translateY(12px);
  }
  to{
    background-position: 100% 50%;
    opacity: 1;
    transform: translateY(0);
  }
}

/* subtexto entra depois */
.reveal.is-visible .eco3-subtitle{
  animation: subtitleFade .9s ease .25s forwards;
  opacity: 0;
}

@keyframes subtitleFade{
  from{
    opacity: 0;
    transform: translateY(8px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================
   MOBILE AJUSTES
========================== */
@media (max-width: 520px){
  .eco3-head{
    text-align: left;
  }

  .eco3-title{
    letter-spacing: -0.025em;
  }

  .eco3-subtitle{
    margin-inline: 0;
  }
}


/* ==========================
   ECO3 — HEAD PREMIUM (sem cortar + com respiro)
========================== */
.eco3-head{
  display: grid;
  gap: 12px;
  text-align: center;

  /* respiro do próximo elemento */
  margin: 0 auto 34px;
  max-width: 980px;
}

/* garante que nada “corte” a animação */
.eco3-title{
  margin: 0;
  padding-bottom: 10px;  /* evita cortar embaixo */
  overflow: visible;
}

/* ==========================
   ECO3 — TÍTULO PREMIUM + CONECTIVIDADE
========================== */
.eco3-title__text{
  display: inline-block;
  position: relative;

  font-size: clamp(28px, 4vw, 46px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.15;       /* importante pra não cortar */
  padding: 0 2px 12px;     /* espaço para a “rede” embaixo */

  /* texto premium (escuro + toque Redsis) */
  background: linear-gradient(90deg,
    rgba(15,17,21,.95) 0%,
    rgba(15,17,21,.95) 55%,
    rgba(227,6,19,.95) 78%,
    rgba(15,17,21,.95) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}



/* Animação dos “nós” */
@keyframes ecoNodes{
  from { background-position: 0 50%; }
  to   { background-position: 120px 50%; }
}

/* brilho sutil no texto (bem enterprise) */
@media (hover:hover){
  .eco3-title__text{
    transition: filter .25s ease, transform .25s ease;
  }
  .eco3-title__text:hover{
    filter: drop-shadow(0 14px 28px rgba(227,6,19,.10));
    transform: translateY(-1px);
  }
}

/* Subtítulo */
.eco3-subtitle{
  margin: 0 auto;
  max-width: 680px;
  color: rgba(15,17,21,.65);
  font-weight: 650;
  line-height: 1.6;
  font-size: clamp(14px, 1.6vw, 18px);
}

/* ==========================
   REVEAL: anima a “rede” só quando entrar na tela
   (usa sua classe .reveal.is-in)
========================== */
.reveal:not(.is-in) .eco3-title__text::before,
.reveal:not(.is-in) .eco3-title__text::after{
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
}

.reveal.is-in .eco3-title__text::before,
.reveal.is-in .eco3-title__text::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity .5s ease, transform .5s ease;
}

/* ==========================
   MOBILE: alinhamento e tamanho da “rede”
========================== */
@media (max-width: 520px){
  .eco3-head{
    text-align: left;
    margin-bottom: 26px;
  }

  .eco3-title__text::after,
  .eco3-title__text::before{
    left: 0;
    transform: none;
    width: 100%;
  }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  .eco3-title__text::before{
    animation: none !important;
  }
}


/* ==========================
   ECO3 — CENTRALIZAR SUBTITLE
========================== */

/* garante coluna e centralização */
.eco3-head{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* centraliza o texto do subtitle */
.eco3-subtitle{
  text-align: center;
  margin-top: 6px;        /* pequeno respiro abaixo do h2 */
  margin-left: auto;
  margin-right: auto;
}


/* ==========================
   ECO3 — MOBILE: CENTRALIZA TÍTULO + SUBTITLE + DECORAÇÃO
========================== */
@media (max-width: 980px){

  /* força centralização do header da seção */
  #ecosistema .section__head{
    display: flex;
    flex-direction: column;
    align-items: center !important;
    text-align: center !important;
  }

  /* h2 */
  #ecosistema .section__head h2{
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* subtítulo */
  #ecosistema .eco3-subtitle,
  #ecosistema .section__head p{
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* linhas / decoração animada (se houver ::before / ::after) */
  #ecosistema .section__head::before,
  #ecosistema .section__head::after{
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}


/* ==========================
   ECO3 — MOBILE: CENTRALIZA O PONTILHADO (h2 underline/dots)
========================== */
@media (max-width: 980px){

  /* garante que o título seja referência do pseudo-elemento */
  #ecosistema .section__head h2{
    position: relative !important;
    display: inline-block;           /* chave: largura vira a do texto */
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* se o pontilhado estiver no ::after */
  #ecosistema .section__head h2::after{
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
  }

  /* se o pontilhado estiver no ::before */
  #ecosistema .section__head h2::before{
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
  }
}


/* ==========================
   ECO3 — MOBILE: CENTRALIZA O PONTILHADO (h2 underline/dots)
========================== */
@media (max-width: 980px){

  /* garante que o título seja referência do pseudo-elemento */
  #ecosistema .section__head h2{
    position: relative !important;
    display: inline-block;           /* chave: largura vira a do texto */
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* se o pontilhado estiver no ::after */
  #ecosistema .section__head h2::after{
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
  }

  /* se o pontilhado estiver no ::before */
  #ecosistema .section__head h2::before{
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
  }
}



/* Head do ecossistema: centralizado sempre */
.eco3-head{
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
}

.eco3-title{
  margin: 0;
  line-height: 1.08;
}

.eco3-subtitle{
  margin: 0;
  max-width: 58ch;
}

/* destaque premium */
.eco3-title__accent{
  background: linear-gradient(120deg, var(--red), var(--red2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ✅ Pontilhado separado, 100% centralizado */
.eco3-title__line{
  width: min(560px, 92%);
  height: 12px;
  position: relative;
  margin: 0 auto; /* centraliza sempre */
  opacity: .95;
  pointer-events: none;

  background:
    radial-gradient(circle, rgba(227,6,19,.55) 0 2px, transparent 3px) 0 50% / 26px 10px repeat-x,
    linear-gradient(90deg, transparent, rgba(227,6,19,.35), transparent) 50% 50% / 100% 2px no-repeat;
}

/* “nós” animados correndo pela linha */
.eco3-title__line::before{
  content:"";
  position:absolute;
  inset: 1px 0 0 0;
  height: 10px;

  background:
    radial-gradient(circle, rgba(227,6,19,.95) 0 3px, transparent 4px) 0 50% / 120px 10px repeat-x;

  animation: ecoNodes 2.8s linear infinite;
  opacity: .85;
}

@keyframes ecoNodes{
  from { background-position: 0 50%; }
  to   { background-position: 120px 50%; }
}

/* mobile: mantém tudo central e com respiro */
@media (max-width: 980px){
  .eco3-head{ gap: 10px; }
  .eco3-title__line{ width: min(520px, 90%); }
}


/* ==========================
   ECO3 — AJUSTE DE ESPAÇAMENTO
========================== */

#ecosistema.section{
  padding-top: 36px;   /* antes devia estar 72px */
  padding-bottom: 64px;
}


#ecosistema .section__head{
  margin-bottom: 24px; /* antes podia estar 48px+ */
}




/* TOPBAR base */
.topbar{
  margin: 20px 0 8px;
  border-top: 1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.72));
  backdrop-filter: blur(12px);
}

.topbar__inner{
  display: grid;
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.topbar__label{
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,17,21,.56);
}

/* ticker full width */
.topTicker{
  position: relative;
  width: 100%;
  height: 48px;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-inline: 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,17,21,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.7));
  box-shadow:
    0 14px 32px rgba(15,17,21,.06),
    inset 0 1px 0 rgba(255,255,255,.85);
}

/* fades laterais */
.topTicker__fade{
  position:absolute;
  top:0; bottom:0;
  width: 72px;
  pointer-events:none;
  z-index: 2;
}
.topTicker__fade--l{
  left:0;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.topTicker__fade--r{
  right:0;
  background: linear-gradient(270deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}

.topTicker__track{
  display:flex;
  width: max-content;
  will-change: transform;
  animation: topMarquee 22s linear infinite;
}

.topTicker__row{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 0 18px;
  white-space: nowrap;
}

/* item */
.ttItem{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(15,17,21,.82);
  border: 1px solid rgba(15,17,21,.08);
  background: rgba(255,255,255,.80);
  box-shadow: 0 10px 22px rgba(15,17,21,.06);
}

/* ícone via mask */
.ttItem::before{
  content:"";
  width: 18px;
  height: 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--red), var(--red2));
  box-shadow: 0 10px 18px rgba(227,6,19,.16);
  -webkit-mask: var(--tt-ic) center / 12px 12px no-repeat;
  mask: var(--tt-ic) center / 12px 12px no-repeat;
}

@keyframes topMarquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

@media (hover:hover){
  .topTicker:hover .topTicker__track{ animation-play-state: paused; }
}

@media (max-width: 520px){
  .topbar{
    margin: 14px 0 6px;
  }
  .topbar__inner{
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .topbar__label{
    font-size: 11px;
    letter-spacing: .07em;
  }
  .topTicker{
    height: 42px;
    border-radius: 12px;
    padding-inline: 10px;
  }
  .ttItem{ font-size: 11px; padding: 5px 9px; }
}

@media (prefers-reduced-motion: reduce){
  .topTicker__track{ animation: none !important; }
}


.topTicker__track{
  display:flex;
  width: max-content;
  will-change: transform;
  animation: topMarquee var(--tt-speed, 22s) linear infinite;
}

.topTicker__row{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 0 18px;
  white-space: nowrap;
  flex: 0 0 auto; /* importante: não encolher */
}

@keyframes topMarquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(calc(-1 * var(--tt-shift, 50%))); }
}


.ttItem{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 14px 6px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,.9);
  border: 1px solid rgba(15,17,21,.08);

  font-size: 13px;
  font-weight: 700;
  color: rgba(15,17,21,.85);

  box-shadow:
    0 10px 30px rgba(15,17,21,.08),
    0 1px 0 rgba(255,255,255,.7) inset;

  white-space: nowrap;
}


.ttItem::before{
  content:"";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;

  border-radius: 8px;
  background: linear-gradient(135deg, #e30613, #ff4b4b);

  -webkit-mask: var(--tt-ic) center / 14px 14px no-repeat;
  mask: var(--tt-ic) center / 14px 14px no-repeat;

  box-shadow:
    0 6px 16px rgba(227,6,19,.35);
}


.ttItem[data-ic="erp"]{
  --tt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v4H4V4zm0 6h10v4H4v-4zm0 6h16v4H4v-4z'/%3E%3C/svg%3E");
}

.ttItem[data-ic="sales"]{
  --tt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 4h-2l-1 2v2h2l3.6 7.6-1.3 2.4A1 1 0 009 22h12v-2H9.4l1.1-2H18a1 1 0 00.9-.5l3.1-6.4A1 1 0 0021 9H7.4L6.7 7H22V5H7.2L7 4z'/%3E%3C/svg%3E");
}

.ttItem[data-ic="cash"]{
  --tt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1a11 11 0 100 22 11 11 0 000-22zm1 17.9V20h-2v-1.1c-1.8-.3-3.2-1.5-3.4-3.2h2.1c.2.9 1 1.5 2.3 1.5 1.2 0 2-.5 2-1.3 0-.7-.5-1.1-2.2-1.5-2.4-.6-4-1.4-4-3.7 0-1.8 1.3-3.1 3.2-3.4V4h2v1.2c1.6.3 2.8 1.4 3.1 3H14c-.2-.8-.8-1.3-1.9-1.3-1 0-1.7.5-1.7 1.2 0 .8.7 1.1 2.4 1.6 2.2.6 3.8 1.4 3.8 3.7 0 1.9-1.3 3.2-3.6 3.5z'/%3E%3C/svg%3E");
}

.ttItem[data-ic="stock"]{
  --tt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 8V7l-3-3H6L3 7v1h18zM3 10v10h18V10H3z'/%3E%3C/svg%3E");
}

.ttItem[data-ic="doc"]{
  --tt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h8l4 4v16H7V2z'/%3E%3C/svg%3E");
}

.ttItem[data-ic="link"]{
  --tt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 13a5 5 0 007.1 0l2.8-2.8a5 5 0 10-7.1-7.1L11 4.9'/%3E%3C/svg%3E");
}

.ttItem[data-ic="chart"]{
  --tt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 9h3v10H5V9zm5-4h3v14h-3V5zm5 7h3v7h-3v-7z'/%3E%3C/svg%3E");
}

.ttItem[data-ic="gear"]{
  --tt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.4 12.9a7.7 7.7 0 000-1.8l2.1-1.6-2-3.5-2.5 1a7.8 7.8 0 00-1.5-.9L15 2h-6l-.5 2.1a7.8 7.8 0 00-1.5.9l-2.5-1-2 3.5 2.1 1.6a7.7 7.7 0 000 1.8L2.5 14.5l2 3.5 2.5-1c.5.4 1 .7 1.5.9L9 22h6l.5-2.1c.5-.2 1-.5 1.5-.9l2.5 1 2-3.5-2.1-1.6z'/%3E%3C/svg%3E");
}

.ttItem[data-ic="shield"]{
  --tt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l8 4v6c0 5-3.5 9.7-8 10-4.5-.3-8-5-8-10V6l8-4z'/%3E%3C/svg%3E");
}

.ttItem[data-ic="tag"]{
  --tt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.6 13.4l-8.5 8.5-9.1-9.1V2h10.8l6.8 6.8z'/%3E%3C/svg%3E");
}


.ttItem[data-ic="crm"]{
  --tt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zM8 11c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}


/* ==========================
   WHATSAPP FLOAT — MOBILE FIX (não corta)
   Cole no FINAL do CSS
========================== */
@media (max-width: 520px){

  .whatsapp-float{
    right: 12px;
    bottom: 12px;

    /* nunca estoura a tela */
    max-width: calc(100vw - 24px);

    /* por padrão no mobile fica compacto */
    padding: 8px;
    gap: 10px;
    height: 52px;

    border-radius: 999px;
  }

  /* texto: não quebra / não estoura */
  .whatsapp-text{
    font-size: 12.5px;
    max-width: 210px;            /* ajuste se quiser */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: none;               /* ✅ some no mobile para não cortar */
  }

  /* bolinha do ícone */
  .whatsapp-bubble{
    width: 40px;
    height: 40px;
  }
  .whatsapp-icon{
    width: 20px;
    height: 20px;
  }

  /* ✅ ao tocar/focar (mobile) mostra o texto sem cortar */
  .whatsapp-float:focus-visible,
  .whatsapp-float:active{
    padding: 8px 12px 8px 14px;
  }
  .whatsapp-float:focus-visible .whatsapp-text,
  .whatsapp-float:active .whatsapp-text{
    display: inline-block;
  }
}

/* Para telas um pouco maiores que celular (melhor UX):
   já pode mostrar texto sempre, mas limitado */
@media (min-width: 521px) and (max-width: 820px){
  .whatsapp-float{
    max-width: calc(100vw - 48px);
  }
  .whatsapp-text{
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand__logo {
  height: 32px;
  width: auto;
  display: block;
}


.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand__logo {
  height: 32px;
  width: auto;
  display: block;
}


.nav__burger {
  width: 42px;
  height: 42px;
  border: 0;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav__burger svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  position: absolute;
  transition: opacity .25s ease, transform .25s ease;
}

/* estado inicial */
.nav__burger .icon--close {
  opacity: 0;
  transform: scale(0.8);
}

/* menu aberto */
.nav--open .nav__burger .icon--menu {
  opacity: 0;
  transform: scale(0.8);
}

.nav--open .nav__burger .icon--close {
  opacity: 1;
  transform: scale(1);
}

/* desktop continua igual */
@media (min-width: 981px) {
  .nav__burger {
    display: none;
  }
}


.nav__burger {
  color: #0b1220; /* cor escura – desktop claro */
}



/* ===== Hover premium nos cards ===== */
.modules { gap: 18px; } /* se você já tem, ignore */

.mcard{
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform;
}

.mcard::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  transition: opacity .22s ease;
  background: radial-gradient(600px 180px at 20% 0%, rgba(255,255,255,.10), transparent 55%),
              radial-gradient(520px 200px at 100% 30%, rgba(255,255,255,.07), transparent 60%);
}

.mcard:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
}

.mcard:hover::after{ opacity: 1; }

.mcard h3{
  transition: transform .22s ease, opacity .22s ease;
}
.mcard:hover h3{ transform: translateY(-1px); }

/* ===== Link com ícone play ===== */
.mcard .link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  opacity: .95;
  transition: transform .2s ease, opacity .2s ease;
}

.mcard:hover .link{
  transform: translateX(2px);
  opacity: 1;
}

.playIcon{
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  line-height: 1;
}

/* reduz movimento */
@media (prefers-reduced-motion: reduce){
  .mcard, .mcard::after, .mcard h3, .mcard .link { transition: none !important; }
  .mcard:hover{ transform:none !important; }
}

/* ===== Card flutuante de vídeo (overlay) ===== */
.demoVideo{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.demoVideo[aria-hidden="false"]{
  opacity: 1;
  pointer-events: auto;
}

.demoVideo__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.demoVideo__card{
  position: relative;
  width: min(92vw, 920px);
  border-radius: 16px;
  background: rgba(12, 18, 32, .92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 90px rgba(0,0,0,.50);
  overflow: hidden;
  transform: translateY(10px) scale(.98);
  transition: transform .18s ease;
  z-index: 2;
}

.demoVideo[aria-hidden="false"] .demoVideo__card{
  transform: translateY(0) scale(1);
}

.demoVideo__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.10);
  color: #fff;
  cursor: pointer;
  z-index: 3;
}

.demoVideo__frame{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.demoVideo__frame iframe{
  width: 100%;
  height: 100%;
  display: block;
}



.videoStrip__media{
  position: relative;
  width: 100%;
  height: clamp(320px, 52vw, 520px);
  overflow: hidden;
  /* border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: #0b1220; */
}

.videoStrip__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.05);
}

.videoStrip__overlay{
  position: absolute;
  inset: 0;
  /* background:
    radial-gradient(900px 320px at 20% 15%, rgba(0,0,0,.18), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.38));
  pointer-events: none; */
}

.videoStrip__content{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: clamp(18px, 3.5vw, 34px);
}

.videoStrip__content h2{ color:#fff; max-width: 680px; }
.videoStrip__content p{ color: rgba(255,255,255,.85); max-width: 720px; }

.videoStrip__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

@media (max-width: 560px){
  .videoStrip__media{
    border-radius: 16px;
    height: 380px;
  }
}





/* Card3D com imagem real */
.card3d__content--img{
  padding: 0 !important;         /* remove padding do layout antigo */
  overflow: hidden;              /* corta as bordas certinho */
  border-radius: inherit;        /* mantém o mesmo raio do card */
}

/* imagem “encaixada” sem distorcer */
.card3d__img{
  width: 100%;
  height: 100%;
  display: block;                /* evita linha/gap */
  object-fit: cover;             /* preenche com crop elegante */
}

/* Se você preferir ver a tela inteira sem crop, use contain */
.card3d__content--img.is-contain .card3d__img{
  object-fit: contain;
  background: rgba(0,0,0,.06);   /* opcional, só se ficar “sobrando” */
}

/* Dá um toque premium (opcional, bem sutil) */
.card3d__img{
  transform: translateZ(0);      /* ajuda no tilt/render */
  filter: saturate(1.03) contrast(1.02);
}



/* ===== Video strip: texto preto ===== */
.videoStrip__content h2,
.videoStrip__content p{
  color: #0b1220;
}

/* ===== Efeito premium: “estrela/LED” percorrendo o texto ===== */
.videoTitle{
  margin: 0;
  line-height: 1.05;
}

.videoTitle__text{
  position: relative;
  display: inline-block;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(26px, 3vw, 44px);
  color: #0b1220; /* preto/grafite */

  /* deixa o efeito confinado ao texto */
  -webkit-background-clip: text;
  background-clip: text;
}

/* “scanner” brilhante */
.videoTitle__text::after{
  content: "";
  position: absolute;
  inset: -6px -10px; /* dá folga pro brilho */
  pointer-events: none;

  /* faixa brilhante que atravessa o texto */
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,.0) 44%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,.0) 56%,
    transparent 60%,
    transparent 100%
  );

  /* máscara: aparece só onde tem texto */
  mix-blend-mode: screen;
  opacity: .9;

  transform: translateX(-120%);
  animation: titleShine 2.8s ease-in-out infinite;
}

/* deixa mais “LED” com um micro brilho */
.videoTitle__text{
  text-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* animação */
@keyframes titleShine{
  0%   { transform: translateX(-120%); }
  45%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* opcional: leve pontinho “estrela” passando junto */
.videoTitle__text::before{
  content: "";
  position: absolute;
  top: 55%;
  left: -18px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow:
    0 0 18px rgba(255,255,255,.75),
    0 0 40px rgba(255,255,255,.45);
  transform: translate(-120%, -50%);
  animation: starRun 2.8s ease-in-out infinite;
  pointer-events: none;
  opacity: .9;
}

@keyframes starRun{
  0%   { transform: translate(-120%, -50%); opacity: 0; }
  12%  { opacity: 1; }
  45%  { transform: translate(calc(100% + 120px), -50%); opacity: 1; }
  70%  { opacity: 0; }
  100% { transform: translate(calc(100% + 120px), -50%); opacity: 0; }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .videoTitle__text::before,
  .videoTitle__text::after{
    animation: none !important;
    opacity: 0 !important;
  }
}


.videoSubtitle{
  position: relative;
  font-weight: 600;
  color: #0b1220;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.45;
  max-width: 68ch;
}

/* brilho sutil */
.videoSubtitle--shine::after{
  content: "";
  position: absolute;
  inset: -4px -8px;
  pointer-events: none;

  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 45%,
    rgba(0,0,0,.18) 50%,
    transparent 55%,
    transparent 100%
  );

  opacity: .6;
  transform: translateX(-120%);
  animation: subtitleShine 3.6s ease-in-out 1;
}

@keyframes subtitleShine{
  to { transform: translateX(120%); }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .videoSubtitle--shine::after{
    animation: none;
    opacity: 0;
  }
}


/* ===== Scroll-in: vem de fora da tela ===== */
.scrollIn{
  opacity: 0;
  transform: translate3d(0, 0, 0);
  filter: blur(6px);
  transition:
    transform .9s cubic-bezier(.2,.8,.2,1),
    opacity .9s cubic-bezier(.2,.8,.2,1),
    filter .9s cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity, filter;
}

/* direções (bem “fora”) */
.scrollIn--left{  transform: translate3d(-18vw, 0, 0); }
.scrollIn--right{ transform: translate3d( 18vw, 0, 0); }
.scrollIn--up{    transform: translate3d(0, 40px, 0); }

/* quando entra */
.scrollIn.in{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* cascata (ordem natural) */
.videoStrip__content .scrollIn:nth-of-type(1){ transition-delay: .00s; }
.videoStrip__content .scrollIn:nth-of-type(2){ transition-delay: .10s; }
.videoStrip__content .scrollIn:nth-of-type(3){ transition-delay: .18s; }

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .scrollIn{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}


/* mobile: desliga */
@media (max-width: 560px){
  .videoStrip{ transform: none; }
}


/* ===== CONTEÚDO ABAIXO DO VÍDEO ===== */
.videoStrip__content--below{
  position: static !important; /* tira de cima do vídeo */
  inset: auto !important;
  padding: 32px 0 0;           /* espaço entre vídeo e texto */
  margin: 0;
  background: transparent;
}


/* ===== Layout split (texto / vídeo / ações) ===== */

.videoStrip--split{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* texto acima */
.videoStrip__text{
  max-width: 720px;
  text-align: left;
}

/* vídeo normal */
.videoStrip__media{
  width: 100%;
}

/* botões abaixo, alinhados à direita */
.videoStrip__actions--below{
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* mobile: tudo centralizado (melhor UX) */
@media (max-width: 560px){
  .videoStrip__text{
    text-align: center;
    margin: 0 auto;
  }

  .videoStrip__actions--below{
    justify-content: center;
    flex-wrap: wrap;
  }
}


/* Ajusta os botões para não encostar no limite direito */
.videoStrip__actions--below{
  display: flex;
  justify-content: flex-end;
  gap: 12px;

  padding-right: 24px; /* empurra para dentro */
}


/* =========================
   SOLUÇÃO — premium upgrade
========================= */

#solucao .section__head{
  max-width: 820px;
}

#solucao .section__head h2{
  letter-spacing: -0.02em;
}

#solucao .section__head p{
  color: rgba(11,18,32,.78);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* grid mais premium */
#solucao .featuregrid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-top: 22px;
}

#solucao .featuregrid .fcard{
  grid-column: span 4;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  min-height: 100%;
  display: flex;
  flex-direction: column;

  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 50px rgba(2,6,23,.06);

  padding: 20px 18px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform;
}

/* brilho suave no card */
#solucao .featuregrid .fcard::before{
  content:"";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(700px 220px at 15% 0%, rgba(225,29,46,.16), transparent 55%),
    radial-gradient(620px 240px at 100% 30%, rgba(15,23,42,.10), transparent 60%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}

/* hover */
#solucao .featuregrid .fcard:hover{
  transform: translateY(-6px);
  border-color: rgba(225,29,46,.22);
  box-shadow: 0 26px 70px rgba(2,6,23,.10);
}

#solucao .featuregrid .fcard:hover::before{
  opacity: 1;
}

/* ícone vira badge premium */
#solucao .fcard .icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.10);
  color: #0b1220;

  font-size: 20px;
  margin: 0;
}

#solucao .fcard .fcard__head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

#solucao .fcard .fcard__kicker{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(15,23,42,.04);
  color: rgba(11,18,32,.78);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* tipografia */
#solucao .fcard h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: #0b1220;
}

#solucao .fcard p{
  margin: 0;
  color: rgba(11,18,32,.72);
  line-height: 1.55;
}

/* divider mais elegante */
#solucao .divider{
  height: 1px;
  margin-top: 28px;
  background: linear-gradient(90deg,
    transparent,
    rgba(15,23,42,.14),
    transparent
  );
}

/* responsivo */
@media (max-width: 900px){
  #solucao .featuregrid .fcard{ grid-column: span 6; }
}
@media (max-width: 560px){
  #solucao .featuregrid{ gap: 12px; }
  #solucao .featuregrid .fcard{ grid-column: span 12; }
  #solucao .featuregrid .fcard{ padding: 18px 16px; }
  #solucao .fcard .fcard__head{
    gap: 10px;
    margin-bottom: 12px;
  }
  #solucao .fcard .fcard__kicker{
    font-size: .7rem;
    letter-spacing: .06em;
  }
}

/* =========================
   SOLUÇÃO — linha conectando cards
========================= */

/* precisa ser relative pra linha ficar “por baixo” */
#solucao .featuregrid{
  position: relative;
  isolation: isolate;
}

/* pontinhos nos “nós” (abaixo do ícone de cada card) */
#solucao .featuregrid .fcard::after{
  content:"";
  position: absolute;
  top: 40px;              /* ajusta p/ ficar no centro do badge */
  left: 34px;             /* alinhado com o badge (44px) + padding */
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(225,29,46,.25);
  box-shadow: 0 0 0 6px rgba(225,29,46,.08);
  z-index: 1;
  pointer-events: none;
}

/* garante que cards fiquem acima da linha */
#solucao .featuregrid .fcard{
  z-index: 1;
}

/* mobile/tablet: remove linha horizontal (grid quebra) */
@media (max-width: 900px){
  #solucao .featuregrid .fcard::after{ display: none; }
}

/* =========================
   SOLUÇÃO — stagger reveal
========================= */

#solucao .fcard{
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .7s cubic-bezier(.2,.8,.2,1),
    transform .7s cubic-bezier(.2,.8,.2,1);
}

#solucao .fcard.is-in{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  #solucao .fcard{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* =========================
   CLIENTES — stats (NOVO, sem conflito)
========================= */

/* garante que nada antigo corte o conteúdo */
#clientes .clientsCopy{
  overflow: visible !important;
  max-height: none !important;
}

/* grade dos cards */
#clientes .trustStats{
  margin-top: 14px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 520px;
}

/* card */
#clientes .trustStat{
  position: relative;
  border-radius: 16px;
  padding: 14px 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 44px rgba(2,6,23,.06);
  overflow: hidden;
}

/* brilho sutil */
#clientes .trustStat::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 180px at 15% 0%, rgba(225,29,46,.12), transparent 60%),
    radial-gradient(420px 160px at 100% 30%, rgba(15,23,42,.07), transparent 60%);
  opacity: .9;
  pointer-events:none;
}

/* número */
#clientes .trustStat__value{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: #0b1220;
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1;
}

#clientes .trustStat__prefix,
#clientes .trustStat__suffix{
  color: rgba(225,29,46,.95);
  font-weight: 850;
}

/* label */
#clientes .trustStat__label{
  position: relative;
  z-index: 1;
  margin-top: 8px;
  color: rgba(11,18,32,.72);
  font-weight: 650;
  font-size: .95rem;
}

/* mobile */
@media (max-width: 560px){
  #clientes .trustStats{
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}


/* =========================
   HERO TRUST — 3 colunas + animação (garantido)
========================= */

.hero .trust{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 colunas */
  gap: 12px;
  max-width: 100%;
  padding-top: 1rem;
}

/* card */
.hero .trust .trust__item{
  position: relative;
  border-radius: 16px;
  padding: 14px 14px 14px 40px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 44px rgba(2,6,23,.06);
  overflow: hidden;

  /* animação blindada */
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  filter: blur(8px);

  animation-name: heroTrustIn !important;
  animation-duration: .8s !important;
  animation-timing-function: cubic-bezier(.2,.8,.2,1) !important;
  animation-fill-mode: forwards !important;
}

/* stagger */
.hero .trust .trust__item:nth-child(1){ animation-delay: .08s !important; }
.hero .trust .trust__item:nth-child(2){ animation-delay: .18s !important; }
.hero .trust .trust__item:nth-child(3){ animation-delay: .28s !important; }

/* glow */
.hero .trust .trust__item::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 180px at 10% 0%, rgba(225,29,46,.12), transparent 60%),
    radial-gradient(420px 160px at 100% 30%, rgba(15,23,42,.07), transparent 60%);
  opacity: .9;
  pointer-events:none;
}

/* dot */
.hero .trust .trust__item::after{
  content:"";
  position:absolute;
  left: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(225,29,46,.92);
  box-shadow: 0 0 0 6px rgba(225,29,46,.10);
  pointer-events:none;
}

/* tipografia */
.hero .trust .trust__item strong{
  position: relative;
  z-index: 1;
  display: block;
  color: #0b1220;
  font-weight: 850;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.hero .trust .trust__item span{
  position: relative;
  z-index: 1;
  display: block;
  color: rgba(11,18,32,.72);
  font-weight: 650;
}

/* hover premium */
@media (hover:hover){
  .hero .trust .trust__item{
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .hero .trust .trust__item:hover{
    transform: translate3d(0,-2px,0);
    border-color: rgba(225,29,46,.22);
    box-shadow: 0 22px 64px rgba(2,6,23,.10);
  }
}

/* keyframes (nome único p/ não conflitar) */
@keyframes heroTrustIn{
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

/* responsivo */
@media (max-width: 900px){
  .hero .trust{
    grid-template-columns: 1fr;
  }
  .hero .trust .trust__item{
    animation-delay: 0s !important; /* entra direto no mobile */
  }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .hero .trust .trust__item{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* =========================
   INTEGRAÇÕES — upgrade premium (sem quebrar animação)
   NÃO altera estrutura/anim das logos
========================= */

#integracoes .section__head{
  max-width: 860px;
}

#integracoes .section__head h2{
  letter-spacing: -0.02em;
  line-height: 1.12;
}

#integracoes .section__head p{
  color: rgba(11,18,32,.74);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* “card” premium do bloco das logos */
#integracoes .integrations-marquee{
  position: relative;
  margin-top: 22px;
  padding: 18px;
  border-radius: 22px;

  background: rgba(255,255,255,.68);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 26px 80px rgba(2,6,23,.08);

  overflow: hidden;
  isolation: isolate;
}

/* glow suave por trás */
#integracoes .integrations-marquee::before{
  content:"";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(780px 260px at 10% 0%, rgba(225,29,46,.12), transparent 60%),
    radial-gradient(720px 280px at 100% 40%, rgba(15,23,42,.08), transparent 62%);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}

/* fade lateral (efeito premium) */
#integracoes .integrations-marquee::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(90deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,0) 14%,
    rgba(255,255,255,0) 86%,
    rgba(255,255,255,.95) 100%
  );
  opacity: .85;
}

/* garante que colunas/itens fiquem acima do glow */
#integracoes .integrations-marquee > *{
  position: relative;
  z-index: 1;
}

/* tiles das logos: mais “clean” e consistentes */
#integracoes .im-item{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.82);
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  overflow: hidden;

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* imagem mais “premium”: menos estourada */
#integracoes .im-item img{
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(1.02) contrast(1.02);
  opacity: .92;
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
}

/* hover (sem interferir na animação do track) */
@media (hover:hover){
  #integracoes .im-item:hover{
    transform: translateY(-2px);
    border-color: rgba(225,29,46,.18);
    box-shadow: 0 22px 64px rgba(2,6,23,.10);
  }
  #integracoes .im-item:hover img{
    opacity: 1;
    transform: scale(1.02);
    filter: saturate(1.06) contrast(1.04);
  }
}

/* mobile: reduz padding e mascara */
@media (max-width: 560px){
  #integracoes .integrations-marquee{
    padding: 14px;
    border-radius: 18px;
  }
  #integracoes .integrations-marquee::after{
    opacity: .55;
  }
}

/* =========================
   INTEGRAÇÕES — badge premium
========================= */

#integracoes .intBadge{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 6px;
}

#integracoes .intBadge__item{
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 28px rgba(2,6,23,.06);

  color: rgba(11,18,32,.80);
  font-weight: 750;
  font-size: .92rem;
  letter-spacing: -0.01em;
}

#integracoes .intBadge__dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(225,29,46,.85);
  box-shadow: 0 0 0 6px rgba(225,29,46,.10);
}

/* hover leve */
@media (hover:hover){
  #integracoes .intBadge__item:hover{
    border-color: rgba(225,29,46,.18);
    transform: translateY(-1px);
    transition: transform .18s ease, border-color .18s ease;
  }
}

/* =========================
   INTEGRAÇÕES — HEAD premium (novo, sem conflito)
========================= */

#integracoes .intHead{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* linha do título */
#integracoes .intHead__top h2{
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

/* linha de baixo: texto + tags */
#integracoes .intHead__bottom{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  justify-content: center;
}
/* texto */
#integracoes .intHead__text{
  margin: 0;
  max-width: 560px;
  color: rgba(11,18,32,.72);
  font-size: 1.05rem;
  line-height: 1.55;
  margin-left: auto;
margin-right: auto;
}

/* tags à direita */
#integracoes .intHead__tags{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 420px; /* evita estourar */
}

/* tag premium minimalista */
#integracoes .intTag{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);

  color: rgba(11,18,32,.78);
  font-weight: 750;
  font-size: .92rem;
  letter-spacing: -0.01em;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

@media (hover:hover){
  #integracoes .intTag:hover{
    transform: translateY(-1px);
    border-color: rgba(225,29,46,.18);
    box-shadow: 0 18px 46px rgba(2,6,23,.10);
  }
}

/* responsivo */
@media (max-width: 900px){
  #integracoes .intHead__bottom{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #integracoes .intHead__tags{
    justify-content: flex-start;
    max-width: 100%;
  }
}

#integracoes .intHead__top h2{
  background: linear-gradient(
    90deg,
    #0b1220,
    #e11d2e
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#integracoes .intHead__text{
  color: rgba(11,18,32,.75);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

#integracoes .intTag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ícone */
#integracoes .intTag::before{
  content: attr(data-icon);
  font-size: 0.95rem;
  line-height: 1;
  opacity: .85;
}


@media (max-width: 900px){
  #integracoes .intHead__bottom{
    grid-template-columns: 1fr;
    text-align: center;
  }

  #integracoes .intHead__tags{
    justify-content: center;
  }
}




/* 
TITULO ANIMADO HERO */

.heroTitle__text{
  position: relative;
  display: inline-block;
  /* font-weight: 800; */
  letter-spacing:-.04em;
  font-size: clamp(36px, 4.2vw, 56px);
  color: #0b1220; /* preto/grafite */

  /* deixa o efeito confinado ao texto */
  -webkit-background-clip: text;
  background-clip: text;


  margin:12px 0 12px;

  line-height:1.02;

}

/* “scanner” brilhante */
.heroTitle__text::after{
  content: "";
  position: absolute;
  inset: -6px -10px; /* dá folga pro brilho */
  pointer-events: none;

  /* faixa brilhante que atravessa o texto */
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,.0) 44%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,.0) 56%,
    transparent 60%,
    transparent 100%
  );

  /* máscara: aparece só onde tem texto */
  mix-blend-mode: screen;
  opacity: .9;

  transform: translateX(-120%);
  animation: titleShine 2.8s ease-in-out infinite;
}

/* deixa mais “LED” com um micro brilho */
.heroTitle__text{
  text-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* animação */
@keyframes titleShine{
  0%   { transform: translateX(-120%); }
  45%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* opcional: leve pontinho “estrela” passando junto */
.heroTitle__text::before{
  content: "";
  position: absolute;
  top: 55%;
  left: -18px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow:
    0 0 18px rgba(255,255,255,.75),
    0 0 40px rgba(255,255,255,.45);
  transform: translate(-120%, -50%);
  animation: starRun 2.8s ease-in-out infinite;
  pointer-events: none;
  opacity: .9;
}

@keyframes starRun{
  0%   { transform: translate(-120%, -50%); opacity: 0; }
  12%  { opacity: 1; }
  45%  { transform: translate(calc(100% + 120px), -50%); opacity: 1; }
  70%  { opacity: 0; }
  100% { transform: translate(calc(100% + 120px), -50%); opacity: 0; }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .heroTitle__text::before,
  .heroTitle__text::after{
    animation: none !important;
    opacity: 0 !important;
  }
}




/* =========================
   FAQ — premium / moderno
========================= */

#faq .faqHead{
  max-width: 920px;
}

#faq .faqHead h2{
  letter-spacing: -0.02em;
  line-height: 1.12;
}

/* subtítulo com ar mais premium */
#faq .faqHead__sub{
  margin-top: 8px;
  color: rgba(11,18,32,.72);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* lista */
#faq .faq{
  margin-top: 22px;
  display: grid;
  gap: 12px;
  max-width: 980px;
}

/* item */
#faq .faq__item{
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 52px rgba(2,6,23,.06);
  overflow: hidden;
  position: relative;
}

/* glow discreto */
#faq .faq__item::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(720px 240px at 10% 0%, rgba(225,29,46,.10), transparent 60%),
    radial-gradient(640px 220px at 100% 30%, rgba(15,23,42,.06), transparent 60%);
  opacity: .9;
  pointer-events:none;
}

/* summary */
#faq .faq__item > summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;

  /* melhora toque / acessibilidade */
  -webkit-tap-highlight-color: transparent;
}

#faq .faq__item > summary::-webkit-details-marker{
  display: none;
}

/* pergunta */
#faq .faq__q{
  color: #0b1220;
  font-weight: 850;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* ícone (chevron premium) */
#faq .faq__icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;

  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);

  position: relative;
  flex: 0 0 auto;
}

/* desenha um “V” */
#faq .faq__icon::before,
#faq .faq__icon::after{
  content:"";
  position: absolute;
  width: 10px;
  height: 2px;
  background: rgba(11,18,32,.82);
  border-radius: 999px;
  top: 50%;
  left: 50%;
  transform-origin: center;
}

#faq .faq__icon::before{
  transform: translate(-70%, -50%) rotate(45deg);
}
#faq .faq__icon::after{
  transform: translate(-10%, -50%) rotate(-45deg);
}

/* resposta (wrapper) */
#faq .faq__a{
  padding: 0 16px 16px;
  position: relative;
  z-index: 1;
}

/* texto */
#faq .faq__a p{
  margin: 0;
  color: rgba(11,18,32,.72);
  line-height: 1.6;
  font-weight: 600;
}

/* animação suave ao abrir */
#faq .faq__a{
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height .35s cubic-bezier(.2,.8,.2,1),
    opacity .25s ease,
    transform .25s ease;
}

/* aberto */
#faq .faq__item[open] .faq__a{
  max-height: 220px; /* suficiente p/ textos curtos */
  opacity: 1;
  transform: translateY(0);
}

/* rotaciona o chevron */
#faq .faq__item[open] .faq__icon{
  border-color: rgba(225,29,46,.20);
}

#faq .faq__item[open] .faq__icon::before{
  transform: translate(-70%, -50%) rotate(-45deg);
}
#faq .faq__item[open] .faq__icon::after{
  transform: translate(-10%, -50%) rotate(45deg);
}

/* hover premium */
@media (hover:hover){
  #faq .faq__item{
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  #faq .faq__item:hover{
    transform: translateY(-2px);
    border-color: rgba(225,29,46,.16);
    box-shadow: 0 26px 78px rgba(2,6,23,.10);
  }
}

/* foco teclado */
#faq .faq__item > summary:focus-visible{
  outline: 2px solid rgba(225,29,46,.35);
  outline-offset: 3px;
  border-radius: 16px;
}

/* mobile */
@media (max-width: 560px){
  #faq .faq__item > summary{
    padding: 14px 14px;
  }
  #faq .faq__a{
    padding: 0 14px 14px;
  }
}

/* =========================
   FAQ — centralizado + stagger + CTA
========================= */

/* centraliza todo o "section__head" + lista */
#faq .faqHead{
  max-width: 920px;
  margin-inline: auto;   /* <<< centraliza */
  text-align: center;    /* <<< título/sub centralizados */
}

#faq .faqHead h2{
  letter-spacing: -0.02em;
  line-height: 1.12;
}

#faq .faqHead__sub{
  margin-top: 8px;
  color: rgba(11,18,32,.72);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* lista centralizada */
#faq .faq{
  margin-top: 22px;
  max-width: 980px;
  margin-inline: auto;   /* <<< centraliza */
  display: grid;
  gap: 12px;
}

/* item */
#faq .faq__item{
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 52px rgba(2,6,23,.06);
  overflow: hidden;
  position: relative;
}

/* glow discreto */
#faq .faq__item::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(720px 240px at 10% 0%, rgba(225,29,46,.10), transparent 60%),
    radial-gradient(640px 220px at 100% 30%, rgba(15,23,42,.06), transparent 60%);
  opacity: .9;
  pointer-events:none;
}

/* summary */
#faq .faq__item > summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

#faq .faq__item > summary::-webkit-details-marker{ display: none; }

#faq .faq__q{
  color: #0b1220;
  font-weight: 850;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* ícone */
#faq .faq__icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  position: relative;
  flex: 0 0 auto;
}

#faq .faq__icon::before,
#faq .faq__icon::after{
  content:"";
  position: absolute;
  width: 10px;
  height: 2px;
  background: rgba(11,18,32,.82);
  border-radius: 999px;
  top: 50%;
  left: 50%;
  transform-origin: center;
}
#faq .faq__icon::before{ transform: translate(-70%, -50%) rotate(45deg); }
#faq .faq__icon::after{  transform: translate(-10%, -50%) rotate(-45deg); }

/* resposta */
#faq .faq__a{
  padding: 0 16px 16px;
  position: relative;
  z-index: 1;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height .35s cubic-bezier(.2,.8,.2,1),
    opacity .25s ease,
    transform .25s ease;
}

#faq .faq__a p{
  margin: 0;
  color: rgba(11,18,32,.72);
  line-height: 1.6;
  font-weight: 600;
}

#faq .faq__item[open] .faq__a{
  max-height: 220px;
  opacity: 1;
  transform: translateY(0);
}

#faq .faq__item[open] .faq__icon{ border-color: rgba(225,29,46,.20); }
#faq .faq__item[open] .faq__icon::before{ transform: translate(-70%, -50%) rotate(-45deg); }
#faq .faq__item[open] .faq__icon::after{  transform: translate(-10%, -50%) rotate(45deg); }

/* hover */
@media (hover:hover){
  #faq .faq__item{
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  #faq .faq__item:hover{
    transform: translateY(-2px);
    border-color: rgba(225,29,46,.16);
    box-shadow: 0 26px 78px rgba(2,6,23,.10);
  }
}

/* foco */
#faq .faq__item > summary:focus-visible{
  outline: 2px solid rgba(225,29,46,.35);
  outline-offset: 3px;
  border-radius: 16px;
}

/* ✅ STAGGER (funciona com seu reveal: só adiciona delays) */
#faq .faq .faq__item:nth-child(1){ transition-delay: .00s; }
#faq .faq .faq__item:nth-child(2){ transition-delay: .08s; }
#faq .faq .faq__item:nth-child(3){ transition-delay: .16s; }
#faq .faq .faq__item:nth-child(4){ transition-delay: .24s; }
#faq .faq .faq__item:nth-child(5){ transition-delay: .32s; }

/* CTA abaixo do FAQ */
#faq .faqCta{
  margin-top: 18px;
  display: flex;
  justify-content: center;  /* <<< centraliza botão */
}

/* mobile */
@media (max-width: 560px){
  #faq .faq__item > summary{ padding: 14px 14px; }
  #faq .faq__a{ padding: 0 14px 14px; }
}


/* =========================
   FOOTER — premium / moderno
========================= */

.footer{
  margin-top: 80px;
  padding: 26px 0;
  background: rgba(255,255,255,.65);
  border-top: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 -20px 60px rgba(2,6,23,.04);
}

.footer__inner{
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 24px;
}

/* left */
.footer__left{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer__copy{
  font-size: .9rem;
  color: rgba(11,18,32,.65);
}

/* nav */
.footer__nav{
  display: flex;
  gap: 18px;
}

.footer__nav a{
  font-weight: 650;
  font-size: .95rem;
  color: rgba(11,18,32,.75);
  text-decoration: none;
  position: relative;
}

.footer__nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:2px;
  background: linear-gradient(90deg, #e11d2e, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}

.footer__nav a:hover::after{
  transform: scaleX(1);
}

/* social */
.footer__social{
  display: flex;
  gap: 12px;
}

.footer__social a{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);

  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.footer__social svg{
  width: 18px;
  height: 18px;
  fill: rgba(11,18,32,.75);
}

.footer__social a:hover{
  transform: translateY(-2px);
  border-color: rgba(225,29,46,.25);
  box-shadow: 0 18px 46px rgba(2,6,23,.10);
}

.footer__social a:hover svg{
  fill: #e11d2e;
}

/* mobile */
@media (max-width: 720px){
  .footer__inner{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer__nav,
  .footer__social{
    justify-content: center;
  }
}



.eco3__item{
  position: absolute;
  top: 50%;
  left: 50%;
  transform:
    rotate(var(--item-angle))
    translateY(-180px); /* raio do botão */
}

/* botão */
.eco3__card{
  transform: rotate(calc(-1 * var(--item-angle)));
}

/* PIN totalmente independente */
.eco3__pin{
  position: absolute;
  top: 50%;
  left: 50%;

  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e11d2e;

  transform:
    rotate(var(--pin-angle))
    translateY(calc(-1 * var(--pin-radius)))
    translate(var(--pin-offset-x), var(--pin-offset-y));

  transform-origin: center;
}

/* =========================
   ECO3 — PIN com posição independente (sem ir pro núcleo)
   Uso:
   - no item:  style="--a: 115deg"
   - no pin:   style="--pin-a: 50deg; --pin-x: 0px; --pin-y: 0px; --pin-dr: 0px"
========================= */

/* garanta que o item seja o "referencial" do pin */
.eco3__item{
  position: relative;
}

/* define um raio padrão (ajuste se o seu layout usar outro) */
.eco3{
  --eco3-radius: 230px; /* <<< ajuste fino: 200~280px */
}

/* PIN orbitando (mesma ideia do card) + ajuste livre */
.eco3__pin{
  position: absolute;
  left: 50%;
  top: 50%;

  /* controles do pin */
  --pin-a: var(--a);     /* ângulo do pin (independente) */
  --pin-dr: 0px;         /* delta do raio (aproxima/afasta do botão) */
  --pin-x: 0px;          /* ajuste fino X */
  --pin-y: 0px;          /* ajuste fino Y */

  /* visual do pin (mantém o que você já tinha) */
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(225,29,46,.92);
  box-shadow:
    0 0 0 6px rgba(225,29,46,.12),
    0 10px 22px rgba(2,6,23,.16);
  animation: pinPulse 2.2s infinite;

  /* >>> aqui é o segredo: mesma órbita + offset próprio */
  transform:
    translate(-50%, -50%)
    rotate(var(--pin-a))
    translateX(calc(var(--eco3-radius) + var(--pin-dr)))
    translate(var(--pin-x), var(--pin-y));
}

/* pulso (se você já tiver, pode remover este) */
@keyframes pinPulse{
  0%{ box-shadow: 0 0 0 0 rgba(225,29,46,.35); }
  100%{ box-shadow: 0 0 0 10px rgba(225,29,46,0); }
}

/* ECO3 — offset independente do PIN (sem mexer na órbita atual)
   uso no HTML: style="--pin-x: 10px; --pin-y: -4px;"
*/
.eco3__pin{
  --pin-x: 0px;
  --pin-y: 0px;

  /* aplica deslocamento sem quebrar transform existente */
  transform: translate(var(--pin-x), var(--pin-y)) !important;
}


/* ECO3 — esconder pins no mobile */
@media (max-width: 768px){
  .eco3__pin{
    display: none !important;
  }
}


/* Compensa o header fixo ao navegar por âncoras */
:root{
  --header-h: 90px; /* ajuste */
}

/* qualquer seção que seja alvo de âncora */
section[id]{
  scroll-margin-top: calc(var(--header-h) + 14px);
}

/* se seus alvos não forem section, pode incluir: */
[id]{
  scroll-margin-top: calc(var(--header-h) + 14px);
}

@media (max-width: 768px){
  :root{ --header-h: 74px; }
}



/* DAQUI PRA BAIXO NAO!!!! */

.themeBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor:pointer;
  user-select:none;
  font-weight:900;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.themeBtn:hover{ transform: translateY(-1px); box-shadow: 0 18px 60px rgba(15,17,21,.10); }
.themeBtn:active{ transform: translateY(0px); box-shadow:none; }
.themeBtn__dot{
  width:10px; height:10px; border-radius:50%;
  background: rgba(15,17,21,.55);
  box-shadow: 0 0 0 6px rgba(227,6,19,.10);
}
.themeBtn__label{ font-size:13px; opacity:.9; }


/* =========================
   DARK MODE (Redsis)
   - Light permanece intacto
   - Dark troca apenas os tokens e corrige superfícies com rgba branco
   ========================= */

body[data-theme="dark"]{
  /* tokens */
  --bg: #070A10;
  --soft:#0B101A;
  --card:#0B101A;

  --ink:#E9ECF2;
  --muted: rgba(233,236,242,.70);

  --stroke: rgba(255,255,255,.10);
  --shadow: 0 26px 90px rgba(0,0,0,.55);

  background: var(--bg);
  color: var(--ink);
}

/* links continuam bons */
body[data-theme="dark"] a{ color: inherit; }

/* NAV / TOPBAR (seu CSS usa fundo branco com alpha) */
body[data-theme="dark"] .topbar,
body[data-theme="dark"] .nav{
  background: rgba(7,10,16,.72);
  border-bottom-color: rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* nav links ficam claros */
body[data-theme="dark"] .nav__links{ color: rgba(233,236,242,.78); }

/* burger */
body[data-theme="dark"] .nav__burger{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
body[data-theme="dark"] .nav__burger span{ background: rgba(233,236,242,.85); }

/* pills e toplink (são claros no light) */
body[data-theme="dark"] .pill{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(233,236,242,.82);
}
body[data-theme="dark"] .toplink{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(233,236,242,.86);
}

/* botões */
body[data-theme="dark"] .btn--ghost{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

/* HERO — seu grad usa #111 (fica “sujo” no dark). Ajuste para ficar premium */
body[data-theme="dark"] .grad{
  background: linear-gradient(120deg, var(--red), rgba(233,236,242,.92));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

body[data-theme="dark"] .kicker{
  color: rgba(233,236,242,.78);
}

/* TRUST cards (usam fundo branco alpha) */
body[data-theme="dark"] .trust__item{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
body[data-theme="dark"] .trust__item span{ color: rgba(233,236,242,.65); }

/* CARD 3D do hero (tem rgba branco e sombras claras) */
body[data-theme="dark"] .card3d{
  border-color: rgba(227,6,19,.18);
  background:
    radial-gradient(1200px 500px at 20% 10%, rgba(227,6,19,.16), transparent 45%),
    radial-gradient(900px 380px at 80% 30%, rgba(0,0,0,.35), transparent 45%),
    rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}

/* métricas / tiles que usam rgba branco */
body[data-theme="dark"] .metric,
body[data-theme="dark"] .tile{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
body[data-theme="dark"] .metric__chip{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: rgba(233,236,242,.78);
}
body[data-theme="dark"] .bar{ background: rgba(255,255,255,.08); }

/* grain no dark: multiply escurece demais — troca blend */
body[data-theme="dark"] .grain{
  mix-blend-mode: overlay;
  opacity:.18;
}

/* sections soft */
body[data-theme="dark"] .section--soft{
  background: var(--soft);
  border-top-color: rgba(255,255,255,.06);
  border-bottom-color: rgba(255,255,255,.06);
}

/* cards gerais do trecho */
body[data-theme="dark"] .fcard,
body[data-theme="dark"] .mcard,
body[data-theme="dark"] .tcard,
body[data-theme="dark"] .bento__item,
body[data-theme="dark"] .faq__item{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

body[data-theme="dark"] .fcard p,
body[data-theme="dark"] .mcard p,
body[data-theme="dark"] .tcard p,
body[data-theme="dark"] .bento__item p,
body[data-theme="dark"] .faq__item p,
body[data-theme="dark"] .section__head p{
  color: rgba(233,236,242,.70);
}

/* divider */
body[data-theme="dark"] .divider{
  background: linear-gradient(90deg, transparent, rgba(227,6,19,.35), rgba(255,255,255,.10), transparent);
}

/* link em vermelho continua ok, só dá um “lift” no contraste */
body[data-theme="dark"] .link{ color: #FF4A4A; }

/* botão em dark */
body[data-theme="dark"] .themeBtn{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  box-shadow:none;
}
body[data-theme="dark"] .themeBtn__dot{
  background: rgba(233,236,242,.80);
  box-shadow: 0 0 0 6px rgba(227,6,19,.14);
}


/* =========================================================
   DARK MODE — Overrides para CTA + FORM + FOOTER + ECO3 + MODAL
   (colar depois do bloco "DARK MODE (Redsis)" que já adicionamos)
   ========================================================= */

body[data-theme="dark"] .cta{
  background:
    radial-gradient(900px 360px at 15% 20%, rgba(227,6,19,.18), transparent 55%),
    radial-gradient(900px 360px at 85% 40%, rgba(0,0,0,.40), transparent 55%),
    var(--bg);
  border-top-color: rgba(255,255,255,.08);
}

body[data-theme="dark"] .cta__copy p{
  color: rgba(233,236,242,.70);
}

/* FORM */
body[data-theme="dark"] .form{
  background: rgba(255,255,255,.06);
  border-color: rgba(227,6,19,.22);
  box-shadow: 0 30px 110px rgba(0,0,0,.55);
}

body[data-theme="dark"] .contactForm__head p{
  color: rgba(233,236,242,.70);
}

body[data-theme="dark"] .form label{
  color: rgba(233,236,242,.86);
}

body[data-theme="dark"] .form input{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(233,236,242,.90);
}

body[data-theme="dark"] .form input::placeholder{
  color: rgba(233,236,242,.55);
}

body[data-theme="dark"] .form input:focus{
  border-color: rgba(227,6,19,.45);
  box-shadow: 0 0 0 6px rgba(227,6,19,.14);
}

body[data-theme="dark"] .form small{
  color: rgba(233,236,242,.62);
}

/* FOOTER */
body[data-theme="dark"] .footer{
  border-top-color: rgba(255,255,255,.10);
}

body[data-theme="dark"] .footer__left p{
  color: rgba(233,236,242,.62);
}

/* caso você use footer__right em algum lugar (no HTML atual está footer__nav e footer__social)
   mantenho este override porque pode existir em outras partes do CSS */
body[data-theme="dark"] .footer__right{
  color: rgba(233,236,242,.76);
}

/* ECO3 section bg */
body[data-theme="dark"] .eco3{
  background:
    radial-gradient(1000px 420px at 20% 30%, rgba(227,6,19,.16), transparent 60%),
    radial-gradient(1000px 420px at 80% 40%, rgba(0,0,0,.40), transparent 60%);
}

/* ECO3 orbital / rings */
body[data-theme="dark"] .eco3__rings{
  background:
    radial-gradient(circle at center, transparent 46%, rgba(227,6,19,.18) 47%, transparent 48%),
    radial-gradient(circle at center, transparent 64%, rgba(255,255,255,.12) 65%, transparent 66%);
}

/* núcleo */
body[data-theme="dark"] .eco3__core{
  background:
    radial-gradient(circle at 30% 25%, rgba(227,6,19,.14), transparent 60%),
    rgba(255,255,255,.06);
  border-color: rgba(227,6,19,.24);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}

/* chips dos módulos */
body[data-theme="dark"] .eco3__card{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(233,236,242,.88);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* hover no dark (mantém premium sem “branco estourado”) */
body[data-theme="dark"] .eco3__item:hover .eco3__card{
  border-color: rgba(227,6,19,.55);
  background: rgba(255,255,255,.10);
  box-shadow: 0 26px 90px rgba(0,0,0,.60), 0 22px 70px rgba(227,6,19,.10);
}

/* pin */
body[data-theme="dark"] .eco3__pin{
  background: #FF3A3A;
  box-shadow: 0 0 0 6px rgba(227,6,19,.20);
}

/* linha/efeito ::before do hover (mais suave no dark) */
body[data-theme="dark"] .eco3__item:hover::before{
  background: linear-gradient(180deg, rgba(227,6,19,.0), rgba(227,6,19,.22), rgba(255,255,255,.10));
  opacity:.45;
}

/* blips do anel */
body[data-theme="dark"] .eco3__orbital::after{
  background:
    radial-gradient(circle, rgba(255,255,255,.22) 0 5px, transparent 6px) 50% 10% / 12px 12px no-repeat;
}

/* ECO MODAL */
body[data-theme="dark"] .ecoModal__backdrop{
  background: rgba(0,0,0,.60);
}

body[data-theme="dark"] .ecoModal__dialog{
  background: rgba(10,14,22,.92);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 50px 160px rgba(0,0,0,.70);
}

body[data-theme="dark"] .ecoModal__close{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(233,236,242,.88);
}

body[data-theme="dark"] .ecoModal__desc{
  color: rgba(233,236,242,.70);
}

body[data-theme="dark"] .ecoModal__badges span{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(233,236,242,.78);
}


/* =========================================================
   DARK MODE — CLIENTES + INTEGRAÇÕES + ECO3 CHIPS + ECOCORECARD
   Cole no FINAL do styles.css (depois de todos os blocos dark)
   ========================================================= */

/* CLIENTES (seção + card) */
body[data-theme="dark"] .clients{
  background:
    radial-gradient(1000px 420px at 20% 30%, rgba(227,6,19,.14), transparent 60%),
    radial-gradient(1000px 420px at 80% 40%, rgba(0,0,0,.45), transparent 60%);
}

body[data-theme="dark"] .clientsCard{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
}

body[data-theme="dark"] .clientsCard::before{
  background:
    radial-gradient(circle at 20% 20%, rgba(227,6,19,.18), transparent 45%),
    radial-gradient(circle at 80% 40%, rgba(0,0,0,.45), transparent 45%);
  opacity: .95;
}

body[data-theme="dark"] .clientsCopy p{
  color: rgba(233,236,242,.70);
}

body[data-theme="dark"] .clientsList{
  color: rgba(233,236,242,.78);
}

/* bubbles das logos */
body[data-theme="dark"] .logoBubble{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
}

body[data-theme="dark"] .logoBubble img{
  filter: grayscale(.15);
  opacity: .92;
}

body[data-theme="dark"] .logoBubble:hover{
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 28px 90px rgba(0,0,0,.60), 0 20px 70px rgba(227,6,19,.10);
}

/* INTEGRAÇÕES (colunas e itens) */
body[data-theme="dark"] .im-col{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

body[data-theme="dark"] .im-item{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
}

/* ECO3 — chips premium com ícones */
body[data-theme="dark"] .eco3__card{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(233,236,242,.88);
  box-shadow:
    0 22px 70px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.08) inset;
}

/* bloco do ícone (antes) */
body[data-theme="dark"] .eco3__card::before{
  border-color: rgba(227,6,19,.28);
  box-shadow:
    0 12px 34px rgba(227,6,19,.10),
    0 1px 0 rgba(255,255,255,.10) inset;
}

/* hover premium no dark */
body[data-theme="dark"] .eco3__item:hover .eco3__card{
  background: rgba(255,255,255,.10);
  border-color: rgba(227,6,19,.45);
  box-shadow:
    0 32px 100px rgba(0,0,0,.62),
    0 22px 80px rgba(227,6,19,.10);
}

/* foco teclado (no dark mais suave) */
body[data-theme="dark"] .eco3__card:focus-visible{
  outline-color: rgba(227,6,19,.35);
}

/* ECO3 — núcleo ecoCoreCard (estado padrão fechado) */
body[data-theme="dark"] .eco3__core.ecoCoreCard{
  background:
    radial-gradient(700px 320px at 30% 25%, rgba(227,6,19,.14), transparent 55%),
    rgba(255,255,255,.06);
  box-shadow:
    0 40px 130px rgba(0,0,0,.60),
    0 1px 0 rgba(255,255,255,.10) inset;
}

/* círculo interno (ring) no estado fechado */
body[data-theme="dark"] .ecoCoreCard__circle::before{
  background: rgba(7,10,16,.65);
  border-color: rgba(227,6,19,.85);
  box-shadow:
    0 0 0 10px rgba(227,6,19,.12),
    0 22px 90px rgba(0,0,0,.45);
}

/* hover: fundo vira grad vermelho (já é bonito, só ajusta borda e brilho) */
@media (hover:hover){
  body[data-theme="dark"] .eco3__core.ecoCoreCard:hover{
    box-shadow:
      0 60px 170px rgba(0,0,0,.70),
      0 28px 110px rgba(227,6,19,.12);
  }

  body[data-theme="dark"] .eco3__core.ecoCoreCard:hover .ecoCoreCard__circle::before{
    border-color: rgba(255,255,255,.18);
  }

  body[data-theme="dark"] .ecoCoreCard__cta{
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.22);
  }

  body[data-theme="dark"] .ecoCoreCard__cta:hover{
    background: rgba(255,255,255,.22);
    box-shadow: 0 22px 70px rgba(0,0,0,.30);
  }
}

/* MOBILE: estado fechado do núcleo (fica “premium” no dark) */
@media (max-width: 520px){
  body[data-theme="dark"] .eco3__core.ecoCoreCard{
    background:
      radial-gradient(700px 320px at 30% 25%, rgba(227,6,19,.14), transparent 55%),
      rgba(255,255,255,.06);
  }
}



/* =========================================================
   DARK MODE — INTEGRAÇÕES MOBILE + ECO3 HEAD/TÍTULOS
   Cole no FINAL do styles.css (bem no fim)
   ========================================================= */

/* -------- INTEGRAÇÕES (mobile) -------- */
@media (max-width: 980px){

  /* Você tem várias versões repetidas no mobile com background branco.
     Aqui a gente “fecha” o visual no dark com !important. */

 @media (max-width: 980px){
  body[data-theme="dark"] .integrations-marquee{
    /* mantém o layout do seu mobile; só “escurece” o container geral */
    background: transparent !important;
  }
}

  body[data-theme="dark"] .im-col{
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 22px 80px rgba(0,0,0,.55) !important;
  }

  body[data-theme="dark"] .im-item{
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 18px 60px rgba(0,0,0,.45) !important;
  }
}

/* -------- ECO3 HEAD / TÍTULO (dark) -------- */
/* Seu título usa #0f1115 e “rede/shine” pensados pro light.
   No dark a gente troca o gradiente pra ficar legível e premium. */

body[data-theme="dark"] .eco3-subtitle{
  color: rgba(233,236,242,.70) !important;
}

/* Versão do título que usa .eco3-title (grad com #0f1115) */
body[data-theme="dark"] .eco3-title{
  background: linear-gradient(
    90deg,
    rgba(233,236,242,.95) 0%,
    rgba(233,236,242,.92) 38%,
    rgba(227,6,19,.95) 55%,
    rgba(255,74,74,.92) 66%,
    rgba(233,236,242,.92) 84%,
    rgba(233,236,242,.95) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Versão do título que usa .eco3-title__text */
body[data-theme="dark"] .eco3-title__text{
  background: linear-gradient(
    90deg,
    rgba(233,236,242,.95) 0%,
    rgba(233,236,242,.92) 55%,
    rgba(227,6,19,.95) 78%,
    rgba(233,236,242,.92) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hover do título no dark (menos “sujo”) */
@media (hover:hover){
  body[data-theme="dark"] .eco3-title__text:hover{
    filter: drop-shadow(0 16px 34px rgba(227,6,19,.14));
  }
}


/* =========================================================
   DARK MODE — ECO3 HEAD + TOP TICKER (PATCH)
   Cole no FINAL do styles.css
========================================================= */

/* ECO3 — head/subtitle + pontilhado */
body[data-theme="dark"] .eco3-subtitle{
  color: rgba(233,236,242,.72);
}

body[data-theme="dark"] .eco3-title{
  /* mantém o estilo premium, mas evita “sumir” no fundo escuro */
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
}

/* destaque vermelho do texto (já é grad, só garante contraste no dark) */
body[data-theme="dark"] .eco3-title__accent{
  filter: drop-shadow(0 12px 26px rgba(227,6,19,.18));
}

/* linha pontilhada */
body[data-theme="dark"] .eco3-title__line{
  opacity: .95;
  background:
    radial-gradient(circle, rgba(227,6,19,.52) 0 2px, transparent 3px) 0 50% / 26px 10px repeat-x,
    linear-gradient(90deg, transparent, rgba(227,6,19,.28), transparent) 50% 50% / 100% 2px no-repeat;
}

body[data-theme="dark"] .eco3-title__line::before{
  opacity: .85;
  background:
    radial-gradient(circle, rgba(227,6,19,.92) 0 3px, transparent 4px) 0 50% / 120px 10px repeat-x;
}

/* TOPBAR / TOP TICKER */
body[data-theme="dark"] .topbar{
  background: linear-gradient(180deg, rgba(12,16,24,.82), rgba(12,16,24,.72));
  border-top-color: rgba(255,255,255,.10);
  border-bottom-color: rgba(255,255,255,.10);
}

body[data-theme="dark"] .topbar__label{
  color: rgba(233,236,242,.62);
}

body[data-theme="dark"] .topTicker{
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow:
    0 16px 30px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* ticker container (só garante que o fundo/blur combine) */

/* fades laterais no dark (crítico pra não ficar “branco”) */
body[data-theme="dark"] .topTicker__fade--l{
  background: linear-gradient(90deg, rgba(12,16,24,.98), rgba(12,16,24,0));
}
body[data-theme="dark"] .topTicker__fade--r{
  background: linear-gradient(270deg, rgba(12,16,24,.98), rgba(12,16,24,0));
}

/* pills do ticker */
body[data-theme="dark"] .ttItem{
  color: rgba(233,236,242,.82);
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* ícone do ticker: mantém o grad vermelho, só ajusta sombra */
body[data-theme="dark"] .ttItem::before{
  box-shadow: 0 10px 22px rgba(227,6,19,.22);
}

/* Burger (quando ele estiver visível no mobile) */
body[data-theme="dark"] .nav__burger{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(233,236,242,.90);
}


/* scanner brilhante (renomeado p/ não conflitar com eco3) */
.videoTitle__text::after{
  content:"";
  position:absolute;
  inset:-6px -10px;
  pointer-events:none;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,0) 44%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,0) 56%,
    transparent 60%,
    transparent 100%
  );
  mix-blend-mode: screen;
  opacity:.9;
  transform: translateX(-120%);
  animation: videoTitleShine 2.8s ease-in-out infinite;
}

@keyframes videoTitleShine{
  0%   { transform: translateX(-120%); }
  45%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* pontinho estrela (renomeado) */
.videoTitle__text::before{
  content:"";
  position:absolute;
  top:55%;
  left:-18px;
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.95);
  box-shadow:
    0 0 18px rgba(255,255,255,.75),
    0 0 40px rgba(255,255,255,.45);
  transform: translate(-120%, -50%);
  animation: videoStarRun 2.8s ease-in-out infinite;
  pointer-events:none;
  opacity:.9;
}

@keyframes videoStarRun{
  0%   { transform: translate(-120%, -50%); opacity: 0; }
  12%  { opacity: 1; }
  45%  { transform: translate(calc(100% + 120px), -50%); opacity: 1; }
  70%  { opacity: 0; }
  100% { transform: translate(calc(100% + 120px), -50%); opacity: 0; }
}

/* subtitle shine (renomeado) */
.videoSubtitle--shine::after{
  content:"";
  position:absolute;
  inset:-4px -8px;
  pointer-events:none;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 45%,
    rgba(0,0,0,.18) 50%,
    transparent 55%,
    transparent 100%
  );
  opacity:.6;
  transform: translateX(-120%);
  animation: videoSubtitleShine 3.6s ease-in-out 1;
}
@keyframes videoSubtitleShine{
  to{ transform: translateX(120%); }
}

/* cascata (mais confiável que nth-of-type) */
.videoStrip__content .scrollIn{ transition-delay: 0s; }
.videoStrip__content .scrollIn:nth-child(1){ transition-delay: .00s; }
.videoStrip__content .scrollIn:nth-child(2){ transition-delay: .10s; }
.videoStrip__content .scrollIn:nth-child(3){ transition-delay: .18s; }



/* HERO — renomear keyframes para não conflitar */
.heroTitle__text::after{
  animation: heroTitleShine 2.8s ease-in-out infinite;
}
@keyframes heroTitleShine{
  0%   { transform: translateX(-120%); }
  45%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

.heroTitle__text::before{
  animation: heroStarRun 2.8s ease-in-out infinite;
}
@keyframes heroStarRun{
  0%   { transform: translate(-120%, -50%); opacity: 0; }
  12%  { opacity: 1; }
  45%  { transform: translate(calc(100% + 120px), -50%); opacity: 1; }
  70%  { opacity: 0; }
  100% { transform: translate(calc(100% + 120px), -50%); opacity: 0; }
}


/* =========================================================
   BLOCO FINAL — HERO TRUST + INTEGRAÇÕES (UPGRADE) + HERO TITLE
   + FAQ (VERSÃO ÚNICA) + FOOTER
   Cole no FINAL do styles.css
========================================================= */

/* =========================
   HERO TRUST — 3 colunas + animação (garantido)
========================= */

.hero .trust{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 100%;
}

.hero .trust .trust__item{
  position: relative;
  border-radius: 16px;
  padding: 14px 14px 14px 40px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 44px rgba(2,6,23,.06);
  overflow: hidden;

  opacity: 0;
  transform: translate3d(0, 10px, 0);
  filter: blur(8px);

  animation-name: heroTrustIn !important;
  animation-duration: .8s !important;
  animation-timing-function: cubic-bezier(.2,.8,.2,1) !important;
  animation-fill-mode: forwards !important;
}

.hero .trust .trust__item:nth-child(1){ animation-delay: .08s !important; }
.hero .trust .trust__item:nth-child(2){ animation-delay: .18s !important; }
.hero .trust .trust__item:nth-child(3){ animation-delay: .28s !important; }

.hero .trust .trust__item::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 180px at 10% 0%, rgba(225,29,46,.12), transparent 60%),
    radial-gradient(420px 160px at 100% 30%, rgba(15,23,42,.07), transparent 60%);
  opacity: .9;
  pointer-events:none;
}

.hero .trust .trust__item::after{
  content:"";
  position:absolute;
  left: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(225,29,46,.92);
  box-shadow: 0 0 0 6px rgba(225,29,46,.10);
  pointer-events:none;
}

.hero .trust .trust__item strong{
  position: relative;
  z-index: 1;
  display: block;
  color: #0b1220;
  font-weight: 850;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.hero .trust .trust__item span{
  position: relative;
  z-index: 1;
  display: block;
  color: rgba(11,18,32,.72);
  font-weight: 650;
}

@media (hover:hover){
  .hero .trust .trust__item{
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .hero .trust .trust__item:hover{
    transform: translate3d(0,-2px,0);
    border-color: rgba(225,29,46,.22);
    box-shadow: 0 22px 64px rgba(2,6,23,.10);
  }
}

@keyframes heroTrustIn{
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@media (max-width: 900px){
  .hero .trust{
    grid-template-columns: 1fr;
  }
  .hero .trust .trust__item{
    animation-delay: 0s !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .hero .trust .trust__item{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}


/* =========================
   INTEGRAÇÕES — upgrade premium (sem quebrar animação)
========================= */

#integracoes .section__head{ max-width: 860px; }

#integracoes .section__head h2{
  letter-spacing: -0.02em;
  line-height: 1.12;
}

#integracoes .section__head p{
  color: rgba(11,18,32,.74);
  font-size: 1.05rem;
  line-height: 1.55;
}

#integracoes .integrations-marquee{
  position: relative;
  margin-top: 22px;
  padding: 18px;
  border-radius: 22px;

  background: rgba(255,255,255,.68);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 26px 80px rgba(2,6,23,.08);

  overflow: hidden;
  isolation: isolate;
}

#integracoes .integrations-marquee::before{
  content:"";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(780px 260px at 10% 0%, rgba(225,29,46,.12), transparent 60%),
    radial-gradient(720px 280px at 100% 40%, rgba(15,23,42,.08), transparent 62%);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}

#integracoes .integrations-marquee::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(90deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,0) 14%,
    rgba(255,255,255,0) 86%,
    rgba(255,255,255,.95) 100%
  );
  opacity: .85;
}

#integracoes .integrations-marquee > *{
  position: relative;
  z-index: 1;
}

#integracoes .im-item{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.82);
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

#integracoes .im-item img{
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(1.02) contrast(1.02);
  opacity: .92;
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
}

@media (hover:hover){
  #integracoes .im-item:hover{
    transform: translateY(-2px);
    border-color: rgba(225,29,46,.18);
    box-shadow: 0 22px 64px rgba(2,6,23,.10);
  }
  #integracoes .im-item:hover img{
    opacity: 1;
    transform: scale(1.02);
    filter: saturate(1.06) contrast(1.04);
  }
}

@media (max-width: 560px){
  #integracoes .integrations-marquee{
    padding: 14px;
    border-radius: 18px;
  }
  #integracoes .integrations-marquee::after{
    opacity: .55;
  }
}

/* badge premium */
#integracoes .intBadge{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 6px;
}

#integracoes .intBadge__item{
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
  color: rgba(11,18,32,.80);
  font-weight: 750;
  font-size: .92rem;
  letter-spacing: -0.01em;
}

#integracoes .intBadge__dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(225,29,46,.85);
  box-shadow: 0 0 0 6px rgba(225,29,46,.10);
}

@media (hover:hover){
  #integracoes .intBadge__item:hover{
    border-color: rgba(225,29,46,.18);
    transform: translateY(-1px);
    transition: transform .18s ease, border-color .18s ease;
  }
}


/* =========================
   INTEGRAÇÕES — HEAD premium (novo, sem conflito)
========================= */

#integracoes .intHead{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#integracoes .intHead__top h2{
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.12;

  background: linear-gradient(90deg, #0b1220, #e11d2e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#integracoes .intHead__bottom{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  justify-content: center;
}

#integracoes .intHead__text{
  margin: 0;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;

  color: rgba(11,18,32,.75);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  font-size: 1.05rem;
  line-height: 1.55;
}

#integracoes .intHead__tags{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 420px;
}

#integracoes .intTag{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);

  color: rgba(11,18,32,.78);
  font-weight: 750;
  font-size: .92rem;
  letter-spacing: -0.01em;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#integracoes .intTag::before{
  content: attr(data-icon);
  font-size: 0.95rem;
  line-height: 1;
  opacity: .85;
}

@media (hover:hover){
  #integracoes .intTag:hover{
    transform: translateY(-1px);
    border-color: rgba(225,29,46,.18);
    box-shadow: 0 18px 46px rgba(2,6,23,.10);
  }
}

@media (max-width: 900px){
  #integracoes .intHead__bottom{
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }
  #integracoes .intHead__tags{
    justify-content: center;
    max-width: 100%;
  }
}


/* =========================
   HERO — TÍTULO ANIMADO (keyframes únicos)
========================= */

.heroTitle__text{
  position: relative;
  display: inline-block;
  letter-spacing: -.04em;
  font-size: clamp(36px, 4.2vw, 56px);
  color: #0b1220;

  -webkit-background-clip: text;
  background-clip: text;

  margin: 12px 0 12px;
  line-height: 1.02;

  text-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.heroTitle__text::after{
  content:"";
  position:absolute;
  inset: -6px -10px;
  pointer-events:none;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,0) 44%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,0) 56%,
    transparent 60%,
    transparent 100%
  );
  mix-blend-mode: screen;
  opacity: .9;
  transform: translateX(-120%);
  animation: heroTitleShine 2.8s ease-in-out infinite;
}

.heroTitle__text::before{
  content:"";
  position: absolute;
  top: 55%;
  left: -18px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow:
    0 0 18px rgba(255,255,255,.75),
    0 0 40px rgba(255,255,255,.45);
  transform: translate(-120%, -50%);
  animation: heroStarRun 2.8s ease-in-out infinite;
  pointer-events: none;
  opacity: .9;
}

@keyframes heroTitleShine{
  0%   { transform: translateX(-120%); }
  45%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

@keyframes heroStarRun{
  0%   { transform: translate(-120%, -50%); opacity: 0; }
  12%  { opacity: 1; }
  45%  { transform: translate(calc(100% + 120px), -50%); opacity: 1; }
  70%  { opacity: 0; }
  100% { transform: translate(calc(100% + 120px), -50%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .heroTitle__text::before,
  .heroTitle__text::after{
    animation: none !important;
    opacity: 0 !important;
  }
}


/* =========================
   FAQ — centralizado + premium (VERSÃO ÚNICA)
========================= */

#faq .faqHead{
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}

#faq .faqHead h2{
  letter-spacing: -0.02em;
  line-height: 1.12;
}

#faq .faqHead__sub{
  margin-top: 8px;
  color: rgba(11,18,32,.72);
  font-size: 1.05rem;
  line-height: 1.55;
}

#faq .faq{
  margin-top: 22px;
  max-width: 980px;
  margin-inline: auto;
  display: grid;
  gap: 12px;
}

#faq .faq__item{
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 52px rgba(2,6,23,.06);
  overflow: hidden;
  position: relative;
}

#faq .faq__item::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(720px 240px at 10% 0%, rgba(225,29,46,.10), transparent 60%),
    radial-gradient(640px 220px at 100% 30%, rgba(15,23,42,.06), transparent 60%);
  opacity: .9;
  pointer-events:none;
}

#faq .faq__item > summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

#faq .faq__item > summary::-webkit-details-marker{ display: none; }

#faq .faq__q{
  color: #0b1220;
  font-weight: 850;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

#faq .faq__icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  position: relative;
  flex: 0 0 auto;
}

#faq .faq__icon::before,
#faq .faq__icon::after{
  content:"";
  position: absolute;
  width: 10px;
  height: 2px;
  background: rgba(11,18,32,.82);
  border-radius: 999px;
  top: 50%;
  left: 50%;
  transform-origin: center;
}
#faq .faq__icon::before{ transform: translate(-70%, -50%) rotate(45deg); }
#faq .faq__icon::after{  transform: translate(-10%, -50%) rotate(-45deg); }

#faq .faq__a{
  padding: 0 16px 16px;
  position: relative;
  z-index: 1;

  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height .35s cubic-bezier(.2,.8,.2,1),
    opacity .25s ease,
    transform .25s ease;
}

#faq .faq__a p{
  margin: 0;
  color: rgba(11,18,32,.72);
  line-height: 1.6;
  font-weight: 600;
}

#faq .faq__item[open] .faq__a{
  max-height: 220px;
  opacity: 1;
  transform: translateY(0);
}

#faq .faq__item[open] .faq__icon{ border-color: rgba(225,29,46,.20); }
#faq .faq__item[open] .faq__icon::before{ transform: translate(-70%, -50%) rotate(-45deg); }
#faq .faq__item[open] .faq__icon::after{  transform: translate(-10%, -50%) rotate(45deg); }

@media (hover:hover){
  #faq .faq__item{
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  #faq .faq__item:hover{
    transform: translateY(-2px);
    border-color: rgba(225,29,46,.16);
    box-shadow: 0 26px 78px rgba(2,6,23,.10);
  }
}

#faq .faq__item > summary:focus-visible{
  outline: 2px solid rgba(225,29,46,.35);
  outline-offset: 3px;
  border-radius: 16px;
}

/* stagger (somente delay visual; não depende de JS) */
#faq .faq .faq__item:nth-child(1){ transition-delay: .00s; }
#faq .faq .faq__item:nth-child(2){ transition-delay: .08s; }
#faq .faq .faq__item:nth-child(3){ transition-delay: .16s; }
#faq .faq .faq__item:nth-child(4){ transition-delay: .24s; }
#faq .faq .faq__item:nth-child(5){ transition-delay: .32s; }

#faq .faqCta{
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

@media (max-width: 560px){
  #faq .faq__item > summary{ padding: 14px 14px; }
  #faq .faq__a{ padding: 0 14px 14px; }
}


/* =========================
   FOOTER — premium / moderno
========================= */

.footer{
  margin-top: 80px;
  padding: 26px 0;
  background: rgba(255,255,255,.65);
  border-top: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 -20px 60px rgba(2,6,23,.04);
}

.footer__inner{
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 24px;
}

.footer__left{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer__copy{
  font-size: .9rem;
  color: rgba(11,18,32,.65);
}

.footer__nav{
  display: flex;
  gap: 18px;
}

.footer__nav a{
  font-weight: 650;
  font-size: .95rem;
  color: rgba(11,18,32,.75);
  text-decoration: none;
  position: relative;
}

.footer__nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:2px;
  background: linear-gradient(90deg, #e11d2e, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}

.footer__nav a:hover::after{
  transform: scaleX(1);
}

.footer__social{
  display: flex;
  gap: 12px;
}

.footer__social a{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);

  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.footer__social svg{
  width: 18px;
  height: 18px;
  fill: rgba(11,18,32,.75);
}

.footer__social a:hover{
  transform: translateY(-2px);
  border-color: rgba(225,29,46,.25);
  box-shadow: 0 18px 46px rgba(2,6,23,.10);
}

.footer__social a:hover svg{
  fill: #e11d2e;
}

@media (max-width: 720px){
  .footer__inner{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer__nav,
  .footer__social{
    justify-content: center;
  }
}


/* =====================================
   HERO TITLE — cor branca no DARK MODE
===================================== */

body[data-theme="dark"] .heroTitle__text{
  color: #ffffff;
  text-shadow: 0 12px 34px rgba(0,0,0,.55);
}

/* garante que spans SEM gradiente também fiquem brancos */
body[data-theme="dark"] .heroTitle__text span:not(.grad){
  color: #ffffff;
}


/* =========================================
   eco3-title__accent — vermelho SEMPRE
========================================= */

/* regra global (light + dark) */
.eco3-title__accent{
  color: #e11d2e;
}

/* blindagem contra overrides do dark */
body[data-theme="dark"] .eco3-title__accent{
  color: #e11d2e !important;
}



/* =====================================
   HERO TRUST — DARK MODE
===================================== */

body[data-theme="dark"] .hero .trust .trust__item{
  background: rgba(255,255,255,.06); /* dark/translúcido premium */
  border-color: rgba(255,255,255,.12);
  box-shadow:
    0 22px 70px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;
}

/* glow ajustado pro dark */
body[data-theme="dark"] .hero .trust .trust__item::before{
  background:
    radial-gradient(520px 180px at 10% 0%, rgba(225,29,46,.18), transparent 60%),
    radial-gradient(420px 160px at 100% 30%, rgba(0,0,0,.55), transparent 60%);
  opacity: 1;
}

/* texto principal */
body[data-theme="dark"] .hero .trust .trust__item strong{
  color: #ffffff;
}

/* texto secundário */
body[data-theme="dark"] .hero .trust .trust__item span{
  color: rgba(233,236,242,.72);
}

/* hover no dark */
@media (hover:hover){
  body[data-theme="dark"] .hero .trust .trust__item:hover{
    border-color: rgba(225,29,46,.35);
    box-shadow:
      0 32px 90px rgba(0,0,0,.65),
      0 18px 60px rgba(225,29,46,.12);
  }
}


/* =========================================================
   HERO — DARK MODE: remover fundo/overlay do hero + title branco
   Cole no FINAL do styles.css
========================================================= */

/* ✅ eco3-title__accent SEMPRE vermelho (light e dark) */
.eco3-title__accent{
  background: none !important;
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
}

/* ✅ DARK: remove totalmente o fundo próprio do HERO */
body[data-theme="dark"] .hero{
  background: transparent !important;
}

/* Se existir overlay via pseudo-elementos */
body[data-theme="dark"] .hero::before,
body[data-theme="dark"] .hero::after{
  background: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
}

/* Mata a camada do background que você mostrou no HTML */
body[data-theme="dark"] .hero__bg,
body[data-theme="dark"] .hero__bg .blob,
body[data-theme="dark"] .hero__bg .grain{
  display: none !important;
}

/* Alguns layouts colocam fundo no grid/container — garantimos transparente */
body[data-theme="dark"] .hero .container,
body[data-theme="dark"] .hero__grid{
  background: transparent !important;
}

/* ✅ DARK: título do HERO branco */
body[data-theme="dark"] .heroTitle__text{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

/* (opcional, recomendado) textos do hero em branco/cinza claro no dark */
body[data-theme="dark"] .hero__subtitle{
  color: rgba(233,236,242,.72) !important;
}
body[data-theme="dark"] .hero .kicker{
  color: rgba(233,236,242,.78) !important;
}


/* =====================================
   SOLUÇÃO — texto branco no DARK
===================================== */

body[data-theme="dark"] #solucao .section__head p{
  color: #ffffff !important;
}

/* =====================================
   SOLUÇÃO — FEATURE CARDS (fcard) DARK MODE
===================================== */

body[data-theme="dark"] #solucao .featuregrid .fcard{
  background: rgba(255,255,255,.06); /* mesmo padrão do trust_item */
  border-color: rgba(255,255,255,.12);
  box-shadow:
    0 22px 70px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;
}

/* brilho de fundo ajustado pro dark */
body[data-theme="dark"] #solucao .featuregrid .fcard::before{
  background:
    radial-gradient(700px 220px at 15% 0%, rgba(225,29,46,.18), transparent 55%),
    radial-gradient(620px 240px at 100% 30%, rgba(0,0,0,.55), transparent 60%);
  opacity: 1;
}

/* título */
body[data-theme="dark"] #solucao .featuregrid .fcard h3{
  color: #ffffff !important;
}

/* texto */
body[data-theme="dark"] #solucao .featuregrid .fcard p{
  color: rgba(233,236,242,.72) !important;
}

/* ícone/badge */
body[data-theme="dark"] #solucao .featuregrid .fcard .icon{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: #ffffff;
}

body[data-theme="dark"] #solucao .featuregrid .fcard .fcard__kicker{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}

/* hover no dark */
@media (hover:hover){
  body[data-theme="dark"] #solucao .featuregrid .fcard:hover{
    border-color: rgba(225,29,46,.35);
    box-shadow:
      0 32px 90px rgba(0,0,0,.65),
      0 18px 60px rgba(225,29,46,.12);
  }
}


/* =====================================
   VIDEO STRIP — TEXTOS BRANCOS (DARK MODE)
===================================== */

/* Texto principal do título (trechos sem span especial) */
body[data-theme="dark"] .videoTitle__text{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Garante que spans SEM classe dentro do título também fiquem brancos */
body[data-theme="dark"] .videoTitle__text span:not(.eco3-title__accent){
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Subtitle abaixo do título */
body[data-theme="dark"] .videoSubtitle{
  color: rgba(233,236,242,.78) !important;
}

/* =====================================
   VIDEO TITLE — NEON MAIS SUAVE (DARK)
===================================== */

body[data-theme="dark"] .videoTitle__text::after{
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 42%,
    rgba(225,29,46,0) 46%,
    rgba(225,29,46,.55) 50%,
    rgba(225,29,46,0) 54%,
    transparent 58%,
    transparent 100%
  );
  opacity: .75;
}

/* pontinho “estrela” acompanha o tom */
body[data-theme="dark"] .videoTitle__text::before{
  background: rgba(225,29,46,.85);
  box-shadow:
    0 0 14px rgba(225,29,46,.55),
    0 0 32px rgba(225,29,46,.35);
}




/* =========================================================
   ECO3 — DARK MODE (BOTÕES) — OVERRIDE ULTRA BLINDADO
   Cole no FINAL do styles.css
========================================================= */

body[data-theme="dark"] #ecosistema .eco3__item .eco3__card,
body[data-theme="dark"] #ecosistema button.eco3__card{
  /* mata qualquer branco/gradiente vindo de outros lugares */
  background: transparent !important;
  background-image: none !important;
  background-color: rgba(255,255,255,.06) !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;

  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset !important;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* evita aparência nativa do botão */
  -webkit-appearance: none;
  appearance: none;
}

/* se algum ::before/::after estiver pintando de branco por cima */
body[data-theme="dark"] #ecosistema .eco3__item .eco3__card::before,
body[data-theme="dark"] #ecosistema .eco3__item .eco3__card::after,
body[data-theme="dark"] #ecosistema button.eco3__card::before,
body[data-theme="dark"] #ecosistema button.eco3__card::after{
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* pino no dark */
body[data-theme="dark"] #ecosistema .eco3__pin{
  background: rgba(225,29,46,.95) !important;
  box-shadow:
    0 0 0 6px rgba(225,29,46,.12),
    0 0 22px rgba(225,29,46,.45) !important;
}

/* hover premium */
@media (hover:hover){
  body[data-theme="dark"] #ecosistema .eco3__item .eco3__card:hover,
  body[data-theme="dark"] #ecosistema button.eco3__card:hover{
    background-color: rgba(255,255,255,.10) !important;
    border-color: rgba(225,29,46,.45) !important;
    box-shadow:
      0 26px 90px rgba(0,0,0,.65),
      0 18px 60px rgba(225,29,46,.18) !important;
  }
}

/* foco teclado */
body[data-theme="dark"] #ecosistema .eco3__item .eco3__card:focus-visible,
body[data-theme="dark"] #ecosistema button.eco3__card:focus-visible{
  outline: 2px solid rgba(225,29,46,.45) !important;
  outline-offset: 3px;
}


/* =========================================================
   ECO3 — DARK: ÍCONES VERMELHOS (SEM MATAR ::before/::after)
   Cole NO FINAL do styles.css
========================================================= */

body[data-theme="dark"] #ecosistema .eco3__item .eco3__card{
  background: transparent !important;
  background-image: none !important;
  background-color: rgba(255,255,255,.06) !important;

  border: 1px solid rgba(255,255,255,.14) !important;

  color: #fff !important;
  -webkit-text-fill-color: #fff !important;

  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset !important;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  -webkit-appearance: none;
  appearance: none;
}

/* ✅ ícone (seja font-icon OU mask/background): força vermelho e visível */
body[data-theme="dark"] #ecosistema .eco3__item .eco3__card::before,
body[data-theme="dark"] #ecosistema .eco3__item .eco3__card::after{
  opacity: 1 !important;
  visibility: visible !important;

  /* se for ícone por fonte/content */
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;

  /* se for ícone por máscara/background */
  background-color: var(--red) !important;

  filter: none !important;
}

/* pino no dark */
body[data-theme="dark"] #ecosistema .eco3__pin{
  background: rgba(225,29,46,.95) !important;
  box-shadow:
    0 0 0 6px rgba(225,29,46,.12),
    0 0 22px rgba(225,29,46,.45) !important;
}

/* hover premium */
@media (hover:hover){
  body[data-theme="dark"] #ecosistema .eco3__item .eco3__card:hover{
    background-color: rgba(255,255,255,.10) !important;
    border-color: rgba(225,29,46,.45) !important;

    box-shadow:
      0 26px 90px rgba(0,0,0,.65),
      0 18px 60px rgba(225,29,46,.18) !important;
  }
}

/* =========================================================
   ECO3 — DARK: HOVER DISCRETO (REFINO FINAL)
   Cole NO FINAL do styles.css
========================================================= */

/* estado normal: ainda premium, porém calmo */
body[data-theme="dark"] #ecosistema .eco3__item .eco3__card{
  transition:
    background-color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}

/* hover SUAVE (menos vermelho e menos glow) */
@media (hover:hover){
  body[data-theme="dark"] #ecosistema .eco3__item .eco3__card:hover{
    background-color: rgba(255,255,255,.08) !important;

    /* vermelho mais discreto */
    border-color: rgba(225,29,46,.28) !important;

    /* glow bem mais controlado */
    box-shadow:
      0 18px 48px rgba(0,0,0,.55),
      0 0 0 1px rgba(225,29,46,.18) inset,
      0 10px 28px rgba(225,29,46,.10) !important;

    transform: translateY(-1px);
  }
}

/* ícone no hover: mantém vermelho, mas sem "gritar" */
@media (hover:hover){
  body[data-theme="dark"] #ecosistema .eco3__item .eco3__card:hover::before,
  body[data-theme="dark"] #ecosistema .eco3__item .eco3__card:hover::after{
    color: rgba(225,29,46,.85) !important;
    background-color: rgba(225,29,46,.85) !important;
  }
}

/* =========================================================
   ECO3 — DARK MODE (ÍCONES + BORDAS DISCRETOS)
   Estado inicial SUAVE + hover elegante
========================================================= */

/* ---------- ESTADO NORMAL ---------- */
body[data-theme="dark"] #ecosistema .eco3__item .eco3__card{
  border-color: rgba(255,255,255,.12) !important;
  box-shadow:
    0 14px 36px rgba(0,0,0,.85),
    0 1px 0 rgba(255,255,255,.04) inset !important;
}

/* ícone em repouso: menor impacto visual */
body[data-theme="dark"] #ecosistema .eco3__item .eco3__card::before,
body[data-theme="dark"] #ecosistema .eco3__item .eco3__card::after{
  color: rgba(225,29,46,.45) !important;          /* vermelho mais fechado */
  background-color: rgba(225,29,46,.95) !important;

  transform: scale(.85);                          /* reduz presença visual */
  opacity: .85 !important;

  transition:
    color .35s ease,
    background-color .35s ease,
    transform .35s ease,
    opacity .35s ease;
}

/* ---------- HOVER ---------- */
@media (hover:hover){
  body[data-theme="dark"] #ecosistema .eco3__item .eco3__card:hover{
    border-color: rgba(225,29,46,.1) !important;

    box-shadow:
      0 20px 48px rgba(0,0,0,.55),
      0 10px 26px rgba(225,29,46,.95) !important;
  }

  /* ícone no hover: aparece mais, mas sem exagero */
  body[data-theme="dark"] #ecosistema .eco3__item .eco3__card:hover::before,
  body[data-theme="dark"] #ecosistema .eco3__item .eco3__card:hover::after{
    color: rgba(225,29,46,.80) !important;
    background-color: rgba(225,29,46,.80) !important;

    transform: scale(1);          /* cresce suavemente */
    opacity: 1 !important;
  }
}


/* =========================================================
   INTEGRAÇÕES — LAYOUT (LIGHT + DARK)
   Texto à esquerda embaixo do título | tags à direita no final
========================================================= */

#integracoes .intHead{
  text-align: left; /* antes estava center */
}

#integracoes .intHead__top{
  text-align: left;
}

/* duas colunas: esquerda (texto) | direita (tags) */
#integracoes .intHead__bottom{
  display: flex;
  align-items: flex-end;          /* tags “no final” embaixo */
  justify-content: space-between; /* empurra tags pra direita */
  gap: 22px;
  margin-top: 14px;
}

/* texto à esquerda */
#integracoes .intHead__text{
  margin: 0;
  max-width: 560px;
}

/* tags à direita */
#integracoes .intHead__tags{
  margin-left: auto;
  justify-content: flex-end;
  max-width: 520px;
}

/* responsivo: empilha e centraliza */
@media (max-width: 900px){
  #integracoes .intHead{
    text-align: center;
  }

  #integracoes .intHead__top{
    text-align: center;
  }

  #integracoes .intHead__bottom{
    flex-direction: column;
    align-items: center;
  }

  #integracoes .intHead__tags{
    margin-left: 0;
    justify-content: center;
    max-width: 100%;
  }
}


/* =========================================================
   INTEGRAÇÕES — DARK MODE
   Remove o fundo/retângulo escuro da section e deixa textos brancos
========================================================= */

/* remove o “retângulo” do section--soft e qualquer overlay */
body[data-theme="dark"] #integracoes.section--soft,
body[data-theme="dark"] #integracoes.section{
  background: transparent !important;
}

/* caso o fundo venha por pseudo-elementos do section */
body[data-theme="dark"] #integracoes.section--soft::before,
body[data-theme="dark"] #integracoes.section--soft::after,
body[data-theme="dark"] #integracoes.section::before,
body[data-theme="dark"] #integracoes.section::after{
  background: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
}

/* garante que container/head não estejam “pintando” um bloco */
body[data-theme="dark"] #integracoes .container,
body[data-theme="dark"] #integracoes .intHead{
  background: transparent !important;
}

/* textos brancos no dark (eco3-title__accent continua vermelho pelo seu CSS global) */
body[data-theme="dark"] #integracoes .intHead__top h2{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;

  /* se você ainda tiver gradient antigo aplicado no h2, isso neutraliza */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

body[data-theme="dark"] #integracoes .intHead__text{
  color: rgba(233,236,242,.78) !important;
  text-shadow: none !important;
}

/* tags no dark (pra não ficar “claro demais”) */
body[data-theme="dark"] #integracoes .intTag{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(233,236,242,.90) !important;
}




/* =========================================================
   INTEGRAÇÕES — MARQUEE (LOGOS) — DARK MODE
   Fundo dark + cards discretos
========================================================= */

/* container principal (tira o branco) */
body[data-theme="dark"] #integracoes .integrations-marquee{
  background: rgba(255,255,255,.04) !important; /* dark translúcido */
  border-color: rgba(255,255,255,.12) !important;

  box-shadow:
    0 28px 90px rgba(0,0,0,.65) !important;

  overflow: hidden;
}

/* remove gradientes claros que vêm do light */
body[data-theme="dark"] #integracoes .integrations-marquee::before,
body[data-theme="dark"] #integracoes .integrations-marquee::after{
  background: none !important;
  opacity: 0 !important;
}

/* cards individuais das logos */
body[data-theme="dark"] #integracoes .im-item{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;

  box-shadow:
    0 16px 48px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset !important;
}

/* imagens — mantém cores reais, só reduz brilho excessivo */
body[data-theme="dark"] #integracoes .im-item img{
  opacity: .92;
  filter: saturate(.95) contrast(.98);
}

/* hover mais sutil no dark */
@media (hover:hover){
  body[data-theme="dark"] #integracoes .im-item:hover{
    border-color: rgba(225,29,46,.35) !important;
    box-shadow:
      0 22px 70px rgba(0,0,0,.70),
      0 14px 40px rgba(225,29,46,.12) !important;
  }

  body[data-theme="dark"] #integracoes .im-item:hover img{
    opacity: 1;
    filter: saturate(1) contrast(1);
  }
}


/* =========================================================
   TEXTO — DESTAQUE VERMELHO (LIGHT + DARK)
========================================================= */

.text-red,
.highlight-red{
  color: var(--red);
  font-weight: 700;
}

/* ajuste fino no dark (ligeiramente menos agressivo) */
body[data-theme="dark"] .text-red,
body[data-theme="dark"] .highlight-red{
  color: rgba(225,29,46,.92);
}

/* =========================================================
   TEXTO — DESTAQUE VERMELHO (FORÇA SOBRE H2 BRANCO)
========================================================= */

#integracoes h2 .highlight-red,
#integracoes h2 .text-red{
  color: var(--red) !important;
  -webkit-text-fill-color: var(--red) !important;
}


/* =========================================================
   CLIENTES & PARCEIROS — LOGOS COM BORDA VERMELHA (DARK)
========================================================= */

body[data-theme="dark"] .clientsLogos .logoBubble{
  border: 1px solid rgba(225, 29, 46, .28); /* vermelho discreto */
  background: rgba(255,255,255,.03);       /* mantém dark elegante */

  box-shadow:
    0 14px 40px rgba(0,0,0,.55),
    0 0 0 1px rgba(225,29,46,.06);          /* halo bem sutil */

  transition:
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}

/* garante que a imagem não “estoure” o visual */
body[data-theme="dark"] .clientsLogos .logoBubble img{
  opacity: .9;
  filter: saturate(.95) contrast(.98);
}

/* hover elegante (sem vermelho forte demais) */
@media (hover:hover){
  body[data-theme="dark"] .clientsLogos .logoBubble:hover{
    border-color: rgba(225,29,46,.45);

    box-shadow:
      0 20px 60px rgba(0,0,0,.65),
      0 0 0 1px rgba(225,29,46,.18),
      0 12px 30px rgba(225,29,46,.12);

    transform: translateY(-2px);
  }
}


/* =========================================================
   FAQ — DARK MODE (fundo, cards, textos, ícone)
   Cole NO FINAL do styles.css
========================================================= */

/* (opcional) se a section #faq tiver algum fundo claro vindo do tema */
body[data-theme="dark"] #faq.section,
body[data-theme="dark"] #faq.section::before,
body[data-theme="dark"] #faq.section::after{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* título e subtítulo */
body[data-theme="dark"] #faq .faqHead h2{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body[data-theme="dark"] #faq .faqHead__sub{
  color: rgba(233,236,242,.78) !important;
}

/* cards (details) */
body[data-theme="dark"] #faq .faq__item{
  background: rgba(255,255,255,.05) !important; /* dark translúcido */
  border-color: rgba(255,255,255,.12) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.60),
    0 1px 0 rgba(255,255,255,.06) inset !important;
}

/* glow interno mais discreto no dark */
body[data-theme="dark"] #faq .faq__item::before{
  background:
    radial-gradient(720px 240px at 10% 0%, rgba(225,29,46,.14), transparent 60%),
    radial-gradient(640px 220px at 100% 30%, rgba(0,0,0,.55), transparent 60%) !important;
  opacity: 1 !important;
}

/* pergunta (texto do summary) */
body[data-theme="dark"] #faq .faq__q{
  color: #fff !important;
}

/* resposta */
body[data-theme="dark"] #faq .faq__a p{
  color: rgba(233,236,242,.78) !important;
}

/* “botão” do ícone */
body[data-theme="dark"] #faq .faq__icon{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset !important;
}

/* setinhas do ícone */
body[data-theme="dark"] #faq .faq__icon::before,
body[data-theme="dark"] #faq .faq__icon::after{
  background: rgba(255,255,255,.85) !important;
}

/* hover mais sutil */
@media (hover:hover){
  body[data-theme="dark"] #faq .faq__item:hover{
    border-color: rgba(225,29,46,.25) !important;
    box-shadow:
      0 28px 90px rgba(0,0,0,.70),
      0 18px 60px rgba(225,29,46,.10) !important;
    transform: translateY(-2px);
  }
}

/* aberto (open): destaque mais suave */
body[data-theme="dark"] #faq .faq__item[open] .faq__icon{
  border-color: rgba(225,29,46,.28) !important;
  box-shadow:
    0 16px 44px rgba(0,0,0,.65),
    0 0 0 1px rgba(225,29,46,.12) inset !important;
}

/* foco por teclado */
body[data-theme="dark"] #faq .faq__item > summary:focus-visible{
  outline: 2px solid rgba(225,29,46,.35) !important;
  outline-offset: 3px;
  border-radius: 16px;
}

/* =========================================================
   FOOTER — DARK MODE (fundo, textos, links, social)
   Cole NO FINAL do styles.css
========================================================= */

/* fundo geral do footer */
body[data-theme="dark"] .footer{
  background: linear-gradient(
    180deg,
    rgba(10,12,15,0) 0%,
    rgba(10,12,15,.75) 30%,
    rgba(10,12,15,.95) 100%
  ) !important;

  border-top: 1px solid rgba(255,255,255,.08);
}

/* container interno (garantia) */
body[data-theme="dark"] .footer__inner{
  background: transparent !important;
}

/* marca */
body[data-theme="dark"] .footer .brand__text{
  color: #fff !important;
}

body[data-theme="dark"] .footer .brand__mark{
  background: var(--red) !important;
  box-shadow:
    0 0 0 6px rgba(225,29,46,.12),
    0 0 18px rgba(225,29,46,.35);
}

/* texto de copyright */
body[data-theme="dark"] .footer__copy{
  color: rgba(233,236,242,.65) !important;
}

/* links do footer */
body[data-theme="dark"] .footer__nav a{
  color: rgba(233,236,242,.75) !important;
  position: relative;
  transition: color .25s ease;
}

body[data-theme="dark"] .footer__nav a:hover{
  color: #fff !important;
}

/* underline sutil no hover */
body[data-theme="dark"] .footer__nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background: var(--red);
  transition: width .25s ease;
}
body[data-theme="dark"] .footer__nav a:hover::after{
  width:100%;
}

/* ícones sociais */
body[data-theme="dark"] .footer__social a{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 10px 30px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;
}

/* SVGs (LinkedIn / Instagram) */
body[data-theme="dark"] .footer__social svg{
  fill: rgba(233,236,242,.85);
  transition: fill .25s ease;
}

/* hover social */
@media (hover:hover){
  body[data-theme="dark"] .footer__social a:hover{
    border-color: rgba(225,29,46,.35);
    box-shadow:
      0 16px 44px rgba(0,0,0,.65),
      0 0 0 1px rgba(225,29,46,.12) inset;
  }

  body[data-theme="dark"] .footer__social a:hover svg{
    fill: var(--red);
  }
}

/* acessibilidade */
body[data-theme="dark"] .footer a:focus-visible{
  outline: 2px solid rgba(225,29,46,.45);
  outline-offset: 3px;
  border-radius: 6px;
}

/* =========================================================
   THEME SWITCH — premium (interruptor)
   Cole no FINAL do styles.css
========================================================= */

.themeSwitch{
  --h: 40px;
  --w: 76px;
  --pad: 4px;
  --thumb: calc(var(--h) - (var(--pad) * 2));

  position: relative;
  width: var(--w);
  height: var(--h);
  border-radius: 999px;

  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.70);
  box-shadow: 0 18px 50px rgba(2,6,23,.10);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  outline: none;

  display: inline-grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;

  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* trilho */
.themeSwitch__track{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  opacity: 1;
}

/* thumb (bolinha) */
.themeSwitch__thumb{
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 999px;

  background: rgba(11,18,32,.92);
  box-shadow:
    0 10px 26px rgba(2,6,23,.25),
    0 1px 0 rgba(255,255,255,.20) inset;

  transform: translateX(0);
  transition: transform .24s cubic-bezier(.2,.8,.2,1), background .22s ease;
  z-index: 2;
}

/* ícones */
.themeSwitch__icon{
  position: absolute;
  top: 54%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
  z-index: 3;
  opacity: .75;
  transition: opacity .22s ease, transform .22s ease;
}

.themeSwitch__icon--sun{ left: 12px; }
.themeSwitch__icon--moon{ right: 12px; }

/* estado ON (dark) via aria */
.themeSwitch[aria-checked="true"]{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow:
    0 22px 70px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;
}

.themeSwitch[aria-checked="true"] .themeSwitch__track{
  background: radial-gradient(120px 60px at 20% 0%, rgba(225,29,46,.18), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

.themeSwitch[aria-checked="true"] .themeSwitch__thumb{
  background: rgba(255,255,255,.92);
  transform: translateX(calc(var(--w) - var(--thumb) - (var(--pad) * 2)));
}

.themeSwitch[aria-checked="true"] .themeSwitch__icon--sun{
  opacity: .35;
  transform: translateY(-50%) scale(.96);
}
.themeSwitch[aria-checked="true"] .themeSwitch__icon--moon{
  opacity: .95;

  & > svg > circle{
    fill: var(--red);
    stroke: var(--red);
  }

  & > svg > path{
    fill: var(--red);
    stroke: var(--red);
  }
}

.themeSwitch[aria-checked="false"] .themeSwitch__icon--sun  {
  & > svg > circle{
    fill: var(--soft);
    stroke: var(--soft);
  }

  & > svg > path{
    fill: var(--soft);
    stroke: var(--soft);
  }
}

/* hover/foco */
@media (hover:hover){
  .themeSwitch:hover{
    border-color: rgba(225,29,46,.22);
    box-shadow: 0 24px 70px rgba(2,6,23,.14);
  }
  .themeSwitch[aria-checked="true"]:hover{
    border-color: rgba(225,29,46,.30);
    box-shadow:
      0 30px 90px rgba(0,0,0,.65),
      0 16px 50px rgba(225,29,46,.10);
  }
}

.themeSwitch:focus-visible{
  outline: 2px solid rgba(225,29,46,.45);
  outline-offset: 3px;
}

/* =========================================================
   POSICIONAMENTO RECOMENDADO (topo-direita)
   Ajuste os seletores conforme seu header/topbar.
========================================================= */

/* Se você tiver topbar/header fixo, coloque o botão dentro dele e use isso: */
.topbar .themeSwitch{ margin-left: 10px; }

/* Se NÃO tiver: opção flutuante discreta */
.themeSwitch--floating{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;
}
@media (max-width: 560px){
  .themeSwitch--floating{
    top: 14px;
    right: 14px;
  }
}

.themeSwitch__icon svg{
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.themeSwitch__icon{
  color: rgba(15,23,42,.55); /* light */
}

.themeSwitch[aria-checked="true"] .themeSwitch__icon{
  color: rgba(233,236,242,.65); /* dark */
}

@media (max-width: 980px){


  /* garante que apareça no navbar e não quebre layout */
  .nav__actions #themeSlotMobile{
    align-items: center;
    margin-left: 10px;
  }
}


/* =========================================================
   MENU MOBILE — DARK MODE
   (fundo do painel + textos)
========================================================= */

/* Quando o menu abrir, normalmente .nav__links vira painel/overlay.
   Aqui garantimos que NO DARK ele fique escuro. */
body[data-theme="dark"] .nav__links{
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.70) !important;
}


/* links do menu no dark */
body[data-theme="dark"] .nav__links a{
  color: rgba(233,236,242,.88) !important;
}

@media (hover:hover){
  body[data-theme="dark"] .nav__links a:hover{
    color: #fff !important;
  }

  body[data-theme="dark"] .nav__links a:is(.is-active){
    color: #fff !important;
  }
}

/* ícones do burger no dark (se precisar) */
body[data-theme="dark"] .nav__burger .icon{
  color: #fff;
}
body[data-theme="dark"] .nav__burger .icon path{
  stroke: #fff;
}


/* =========================================================
   NAV — Switch responsivo (blindado)
========================================================= */

.nav__themeSlot{
  display: none;
  align-items: center;
}

/* MOBILE: mostra no navbar (fora do menu) */
@media (max-width: 900px){
  #themeSlotMobile.nav__themeSlot{
    display: inline-flex !important;
  }
  #themeSlotDesktop{
    display: none !important;
  }

  /* coloca o switch alinhado à direita, antes do burger
     (não depende de nav__actions existir) */
  .nav__inner{
    position: relative;
  }
  #themeSlotMobile.nav__themeSlot{
    position: absolute;
    right: 64px;  /* ajuste fino: espaço do burger */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000;
  }
}

/* (extra) garante que o botão em si nunca fique hidden por herança */
#themeBtn{
  display: inline-grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   NAV — corrigir “moldura” no DESKTOP + manter painel só no MOBILE
   Cole NO FINAL do styles.css
========================================================= */

/* 1) DESKTOP: garante que .nav__links NÃO vire um painel com borda */
@media (min-width: 980px){
  body[data-theme="dark"] .nav__links{
    border: none !important;
    box-shadow: none !important;
  }

  /* se algum estilo estiver colocando “pill/borda” em cada link */
  body[data-theme="dark"] .nav__links > a{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}
@media (max-width: 980px){
  body[data-theme="dark"] .nav__links{
    background: rgba(10,12,15,.96) !important;
  }
}

/* 2) MOBILE: painel escuro APENAS quando o menu estiver aberto
   (usa aria-expanded do burger) */
@media (max-width: 900px){


  body[data-theme="dark"] .nav__burger[aria-expanded="true"] ~ .nav__links{
    background: rgba(10,12,15,.96) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.70) !important;
  }

  /* quando fechado, não deixa “moldura” aparecer */
  body[data-theme="dark"] .nav__burger[aria-expanded="false"] ~ .nav__links{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}





/* =========================================================
   PATCH — HERO TITLE SHIMMER (DARK only)
   Cola no FINAL do styles.css
   - Não quebra light
   - Reativa pseudo se algum dark tiver matado
   - Troca o branco por grafite/vermelho sutil premium
========================================================= */

body[data-theme="dark"] .heroTitle__text{
  position: relative; /* garante base do pseudo */
  isolation: isolate; /* evita blend estranho com overlays */
}

/* Shimmer (faixa) */
body[data-theme="dark"] .heroTitle__text::after{
  /* “desmata” qualquer regra que tenha desativado no dark */
  content: "" !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: heroTitleShine 2.8s ease-in-out infinite !important;

  /* aparência premium no dark */
  background: linear-gradient(
    110deg,
    rgba(0,0,0,0) 0%,
    rgba(255,70,70,0.08) 34%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,70,70,0.08) 66%,
    rgba(0,0,0,0) 100%
  ) !important;

  /* ajuda o brilho ficar “premium”, sem branco estourado */
  mix-blend-mode: screen;
  filter: blur(.2px);
  z-index: 1;
  pointer-events: none;
}

/* “estrela” (seu ::before) — mantém rodando e mais sutil no dark */
body[data-theme="dark"] .heroTitle__text::before{
  content: "" !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: heroStarRun 2.8s ease-in-out infinite !important;

  /* se seu before usa cor fixa branca, isso suaviza */
  filter: drop-shadow(0 0 10px rgba(255,70,70,.14));
  z-index: 2;
  pointer-events: none;
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  body[data-theme="dark"] .heroTitle__text::after,
  body[data-theme="dark"] .heroTitle__text::before{
    animation: none !important;
  }
}


/* =========================================================
   PATCH — .grad (DARK) — vermelho vivo / premium
========================================================= */

body[data-theme="dark"] .grad{
  /* base para gradiente em TEXTO */
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;

  /* vermelho vivo com passagem dramática */
  background-image: linear-gradient(
    90deg,
    #ff2a2a 0%,
    #ff4d4d 18%,
    #ff1f1f 36%,
    #ff6a6a 52%,
    #ff1f1f 68%,
    #ff4d4d 82%,
    #ff2a2a 100%
  ) !important;

  /* brilho forte porém limpo */
  text-shadow:
    0 0 18px rgba(255,40,40,.55),
    0 0 42px rgba(255,40,40,.25);

  filter: saturate(1.35) contrast(1.15);
}

/* Se existir algum “kill switch” no dark */
body[data-theme="dark"] .grad::before,
body[data-theme="dark"] .grad::after{
  opacity: 1;
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  body[data-theme="dark"] .grad{
    text-shadow: none;
  }
}

/* =========================================================
   VIDEO SHOWCASE — SEM MOLDURA + ENTRADA LATERAL (ROBUSTO)
   Só anima quando o JS ativar .devices-ready
========================================================= */

.videoShowcase{ padding: 44px 0; }

#devicesShowcase.deviceStage{
  position: relative;
  width: min(1120px, 92vw);
  margin: 0 auto;
  aspect-ratio: 16/9;

  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* base visível (fallback: sem JS, aparece normal) */
#devicesShowcase .device{
  position: absolute;
  height: auto;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 26px 70px rgba(0,0,0,.35));
}

/* posições FINAIS */
#devicesShowcase .device--desktop{
  width: min(74%, 860px);
  left: 50%;
  top: 48%;
  transform: translate(-50%, -55%);
  z-index: 1;
}
#devicesShowcase .device--phone{
  /* MAIOR */
  width: min(42%, 520px);
  left: 18%;
  top: 62%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
#devicesShowcase .device--tablet{
  width: min(36%, 460px);
  left: 74%;
  top: 58%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* =========================================================
   Animação só quando JS ativar .devices-ready
========================================================= */

#devicesShowcase.devices-ready .device{
  will-change: transform, opacity, filter;
  transition:
    transform 1400ms cubic-bezier(.16,.85,.25,1),
    opacity 900ms ease,
    filter 1400ms ease;
}

/* estado inicial: fora da tela (só com JS ativo) */
#devicesShowcase.devices-ready .device{
  opacity: 0;
  filter: blur(14px) drop-shadow(0 26px 70px rgba(0,0,0,.35));
}

#devicesShowcase.devices-ready .device--desktop{
  transform: translate(-50%, 140%) scale(.92);
}
#devicesShowcase.devices-ready .device--phone{
  transform: translate(-240%, -50%) scale(.90) rotate(-10deg);
}
#devicesShowcase.devices-ready .device--tablet{
  transform: translate(240%, -50%) scale(.92) rotate(10deg);
}

/* final: em cena */
#devicesShowcase.devices-ready.is-inview .device{
  opacity: 1;
  filter: blur(0) drop-shadow(0 26px 70px rgba(0,0,0,.35));
}

#devicesShowcase.devices-ready.is-inview .device--desktop{
  transform: translate(-50%, -55%) scale(1);
  transition-delay: 120ms;
}
#devicesShowcase.devices-ready.is-inview .device--phone{
  transform: translate(-50%, -50%) scale(1) rotate(-3deg);
  transition-delay: 280ms;
}
#devicesShowcase.devices-ready.is-inview .device--tablet{
  transform: translate(-50%, -50%) scale(1) rotate(3deg);
  transition-delay: 420ms;
}


/* =========================================================
   VIDEO SHOWCASE — ANIMAÇÃO GARANTIDA (entrada lateral)
========================================================= */

/* (mantém suas posições finais) */
#devicesShowcase.deviceStage{ overflow: visible !important; }

/* garante que nada “mate” transição */
#devicesShowcase.devices-ready .device{
  transition:
    transform 1600ms cubic-bezier(.16,.85,.25,1),
    opacity 900ms ease,
    filter 1600ms ease !important;
  will-change: transform, opacity, filter;
}

/* ======= ESTADO INICIAL (fora da tela) ======= */
#devicesShowcase.devices-ready:not(.is-inview) .device{
  opacity: 0 !important;
  filter: blur(14px) drop-shadow(0 26px 70px rgba(0,0,0,.35)) !important;
}

/* desktop sobe de baixo */
#devicesShowcase.devices-ready:not(.is-inview) .device--desktop{
  transform: translate(-50%, 140%) scale(.92) !important;
}

/* phone entra da esquerda (fora da tela) */
#devicesShowcase.devices-ready:not(.is-inview) .device--phone{
  transform: translate(-260%, -50%) scale(.90) rotate(-10deg) !important;
}

/* tablet entra da direita (fora da tela) */
#devicesShowcase.devices-ready:not(.is-inview) .device--tablet{
  transform: translate(260%, -50%) scale(.92) rotate(10deg) !important;
}

/* ======= ESTADO FINAL (em cena) ======= */
#devicesShowcase.devices-ready.is-inview .device{
  opacity: 1 !important;
  filter: blur(0) drop-shadow(0 26px 70px rgba(0,0,0,.35)) !important;
}

/* IMPORTANTÍSSIMO: o final precisa forçar o transform também */
#devicesShowcase.devices-ready.is-inview .device--desktop{
  transform: translate(-50%, -55%) scale(1) !important;
  transition-delay: 120ms !important;
}

#devicesShowcase.devices-ready.is-inview .device--phone{
  transform: translate(-50%, -50%) scale(1) rotate(-3deg) !important;
  transition-delay: 320ms !important;
}

#devicesShowcase.devices-ready.is-inview .device--tablet{
  transform: translate(-50%, -50%) scale(1) rotate(3deg) !important;
  transition-delay: 480ms !important;
}


/* =========================================================
   VIDEO SECTION — reduzir espaçamento texto ↔ devices
========================================================= */

/* bloco geral da seção */
#demo-video .videoStrip{
  row-gap: 24px; /* se for grid/flex */
}

/* título + subtítulo */
#demo-video .videoStrip__text{
  margin-bottom: 12px !important;
}

/* título */
#demo-video .videoTitle{
  margin-bottom: 6px !important;
}

/* subtítulo */
#demo-video .videoSubtitle{
  margin-bottom: 10px !important;
}

/* aproxima os devices do texto */
#demo-video .videoShowcase{
  margin-top: -18px; /* 🔥 puxa as imagens pra cima */
}

/* aproxima os botões das imagens */
#demo-video .videoStrip__actions{
  margin-top: 14px !important;
}

#demo-video .videoStrip__actions--below{
  align-items: center;
  gap: 10px;
}

#demo-video .videoStrip__actions--below .btn{
  min-height: 44px;
  padding-inline: 18px;
  font-size: .92rem;
  letter-spacing: .01em;
}


/* ajuste mobile */
@media (max-width: 900px){
  #demo-video .videoShowcase{
    margin-top: -10px;
  }

  #demo-video .videoStrip__actions{
    margin-top: 10px !important;
  }

  #demo-video .videoStrip__actions--below .btn{
    min-width: 100%;
  }
}

#devicesShowcase.devices-ready:not(.is-inview) .device--desktop{
  transform: translate(-50%, -220%) scale(.92) !important; /* sai pra CIMA */
}


/* =========================================================
   VIDEO SHOWCASE — AUMENTAR TAMANHO DOS DEVICES
========================================================= */

/* DESKTOP */
#devicesShowcase .device--desktop{
  width: min(82%, 980px); /* antes ~74% / 860px */
}

/* PHONE (bem maior, protagonista) */
#devicesShowcase .device--phone{
  width: min(58%, 620px); /* antes ~38% / 460px */
}

/* TABLET */
#devicesShowcase .device--tablet{
  width: min(42%, 560px); /* antes ~36% / 460px */
}



/* =========================================================
   CLIENTES — logoBubble fundo claro (DARK only)
========================================================= */

body[data-theme="dark"] .clientsLogos .logoBubble{
  background: linear-gradient(
    180deg,
    rgba(241,245,249,0.92),
    rgba(226,232,240,0.88)
  );
  
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.6);

  backdrop-filter: blur(6px);
}

/* garante contraste da logo */
body[data-theme="dark"] .clientsLogos .logoBubble img{
  filter: none;
  opacity: 1;
}

/* hover premium (bem sutil) */
@media (hover:hover){
  body[data-theme="dark"] .clientsLogos .logoBubble:hover{
    transform: translateY(-2px) scale(1.04);
    box-shadow:
      0 18px 42px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.75);
  }
}

/* =========================================================
   CLIENTES — restaurar borda vermelha (DARK only)
========================================================= */

body[data-theme="dark"] .clientsLogos .logoBubble{
  border: 1px solid rgba(225,29,46,0.55); /* vermelho Redsis */
  box-shadow:
    0 10px 28px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(225,29,46,0.35),  /* LED interno */
    inset 0 1px 0 rgba(255,255,255,0.6);
}

/* hover: borda vermelha ganha presença */
@media (hover:hover){
  body[data-theme="dark"] .clientsLogos .logoBubble:hover{
    border-color: rgba(225,29,46,0.9);
    box-shadow:
      0 18px 42px rgba(0,0,0,0.45),
      inset 0 0 0 1px rgba(225,29,46,0.65),
      0 0 22px rgba(225,29,46,0.35);
  }
}

/* =========================================================
   FAQ PRO - acabamento premium e consistente
   ========================================================= */
#faq.faqPro{
  position: relative;
  background:
    radial-gradient(860px 300px at 12% 8%, rgba(227,6,19,.07), transparent 58%),
    radial-gradient(760px 260px at 88% 24%, rgba(15,17,21,.05), transparent 60%),
    var(--bg);
}

#faq.faqPro .faqHead{
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}

#faq.faqPro .faqHead__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(227,6,19,.18);
  background: rgba(227,6,19,.06);
  color: rgba(15,17,21,.86);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#faq.faqPro .faqHead h2{
  margin: 0;
  font-size: clamp(30px, 3.2vw, 44px);
  letter-spacing: -.03em;
}

#faq.faqPro .faqHead__sub{
  margin: 0;
  max-width: 70ch;
  color: var(--muted);
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 700;
  line-height: 1.6;
}

#faq.faqPro .faq{
  display: grid;
  gap: 14px;
}

#faq.faqPro .faq__item{
  border: 1px solid rgba(15,17,21,.10);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  box-shadow: 0 12px 44px rgba(15,17,21,.06);
  overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

#faq.faqPro .faq__item:hover{
  transform: translateY(-2px);
  border-color: rgba(227,6,19,.24);
  box-shadow: 0 22px 58px rgba(15,17,21,.10);
}

#faq.faqPro .faq__item > summary{
  min-height: 72px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

#faq.faqPro .faq__q{
  max-width: 92%;
  color: rgba(15,17,21,.96);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 850;
  line-height: 1.45;
}

#faq.faqPro .faq__icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(227,6,19,.20);
  background: rgba(227,6,19,.07);
}

#faq.faqPro .faq__a{
  padding: 0 20px 20px;
}

#faq.faqPro .faq__a p{
  margin: 0;
  color: rgba(15,17,21,.75);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.75;
}

#faq.faqPro .faq__item[open]{
  border-color: rgba(227,6,19,.32);
  box-shadow: 0 26px 72px rgba(227,6,19,.10);
}

#faq.faqPro .faqCta{
  margin-top: 18px;
}

#faq.faqPro .faqCta .btn{
  box-shadow: 0 14px 40px rgba(227,6,19,.22);
}

@media (max-width: 760px){
  #faq.faqPro .faqHead h2{ font-size: clamp(26px, 8.4vw, 34px); }
  #faq.faqPro .faq__item > summary{ padding: 16px; min-height: 66px; }
  #faq.faqPro .faq__a{ padding: 0 16px 16px; }
  #faq.faqPro .faq__q{ max-width: 88%; }
}

body[data-theme="dark"] #faq.faqPro{
  background:
    radial-gradient(860px 300px at 12% 8%, rgba(227,6,19,.16), transparent 58%),
    radial-gradient(760px 260px at 88% 24%, rgba(0,0,0,.42), transparent 60%),
    var(--bg);
}

body[data-theme="dark"] #faq.faqPro .faqHead__eyebrow{
  color: rgba(233,236,242,.90);
  border-color: rgba(227,6,19,.32);
  background: rgba(227,6,19,.14);
}

body[data-theme="dark"] #faq.faqPro .faqHead__sub{
  color: rgba(233,236,242,.70);
}

body[data-theme="dark"] #faq.faqPro .faq__item{
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.05));
  box-shadow: 0 18px 56px rgba(0,0,0,.42);
}

body[data-theme="dark"] #faq.faqPro .faq__item:hover{
  border-color: rgba(227,6,19,.36);
  box-shadow: 0 22px 70px rgba(0,0,0,.52);
}

body[data-theme="dark"] #faq.faqPro .faq__q{
  color: rgba(233,236,242,.94);
}

body[data-theme="dark"] #faq.faqPro .faq__a p{
  color: rgba(233,236,242,.74);
}

body[data-theme="dark"] #faq.faqPro .faq__icon{
  border-color: rgba(227,6,19,.30);
  background: rgba(227,6,19,.14);
}