/* ===========================================================
   LP — Assessoria de Marketing (tema light)
   Marca: Acerte Operate
   Paleta: Navy #182852 | Purple #573697 | Branco #fff | CTA Verde
   Arquivo: lp-operate.css
=========================================================== */

/* --------- Design tokens --------- */
:root{
	
  --ac-primary: #573697; 
  --ac-navy: #182852;
  --ac-navy-900:#111a3b;
  --ac-navy-700:#203368;

  --ac-purple:#573697;            /* accent principal (Operate) */
  --ac-purple-700:#482c84;

  --ac-white:#ffffff;

  /* CTA verde (acessível) */
  --ac-green:#22c55e;
  --ac-green-600:#16a34a;

  --text:#0f1221;
  --muted:#5d6380;
  --line: #e9ecf4;
  --glass: rgba(255,255,255,.65);
  --shadow: 0 8px 28px rgba(16, 26, 58, .12);
}

/* --------- Reset mínimo --------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%; display:block}
a{color:var(--ac-navy); text-decoration:none}
a:hover{opacity:.9}

/* --------- Layout utilitários --------- */
.container{width:min(1120px, 92vw); margin-inline:auto}
.center{text-align:center}
.section{padding:64px 0}
.section--alt{background:#f6f8ff}
.section--cta{padding:80px 0}

/* --------- Header translucido --------- */
.lp-header{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.65);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid rgba(24,40,82,.08);
}
.lp-header__inner{
  height:76px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand img{height:44px}
.lp-actions .btn{margin-left:8px}

/* --------- Botões --------- */
.btn{
  --h:48px;
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--h); padding:0 20px; border-radius:10px;
  font-weight:700; letter-spacing:.2px; border:1px solid transparent;
  box-shadow: var(--shadow);
  transition:.18s ease-in-out;
}
.btn--xl{--h:56px; padding:0 26px; font-size:1rem}
.btn--full{width:100%}
.btn--primary{
  background:var(--ac-navy); color:#fff;
}
.btn--primary:hover{background:var(--ac-navy-700)}
.btn--success{
  background:var(--ac-green); color:#fff;
}
.btn--success:hover{background:var(--ac-green-600)}

/* --------- BG decor --------- */
.bg-blobs{ position:fixed; inset:0; overflow:hidden; z-index:-1 }
.blob{
  position:absolute; filter:blur(48px); opacity:.35; transform:translate(-50%,-50%);
  border-radius:999px;
}
.blob--a{ left:12%; top:10%; width:520px; height:520px; background:radial-gradient(closest-side, var(--ac-purple), transparent 70%) }
.blob--b{ right:8%; top:30%; width:640px; height:640px; background:radial-gradient(closest-side, var(--ac-navy), transparent 70%) }
.blob--c{ left:40%; bottom:-8%; width:680px; height:680px; background:radial-gradient(closest-side, #5ac38a, transparent 70%) }

/* --------- HERO --------- */
.hero{padding:84px 0 40px}
.hero__grid{
  display:grid; grid-template-columns: 1.06fr .94fr; gap:40px; align-items:center;
}
.hero__title{
  font-size:clamp(28px, 3.2vw, 44px);
  line-height:1.1; margin:0 0 14px; color:var(--ac-navy);
}
.hi.hi--marker{
  background: linear-gradient(180deg, rgba(87,54,151,.16), rgba(87,54,151,.16));
  padding:0 .25em; border-radius:6px;
}
.hero__highlight{font-weight:700; color:var(--ac-purple); margin:.25rem 0 .75rem}
.hero__sub{color:var(--muted); margin:0 0 16px}

.hero__bullets--ticks{list-style:none; padding:0; margin:0 0 20px}
.hero__bullets--ticks li{
  margin:8px 0; padding-left:28px; position:relative; color:#2a3150;
}
.hero__bullets--ticks li::before{
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:0; top:0; color:var(--ac-green);
}

.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.hero__sep{height:16px}

.hero__media picture{
  display:block; border-radius:16px; background:var(--glass);
  box-shadow: var(--shadow);
  overflow:hidden; border:1px solid rgba(24,40,82,.06);
}

/* --------- Micro CTA --------- */
.mid-cta{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 18px; border:1px solid var(--line); border-radius:14px;
  background:#fff; box-shadow: var(--shadow);
}
.mid-cta h3{margin:0; font-size:1.05rem; color:var(--ac-navy)}

/* --------- Logo slider --------- */
:root{
  /* filtros prontos para as cores desejadas */
  /* ≈ #182852 (base) */
  --logo-filter-navy: brightness(0) saturate(100%) invert(9%) sepia(23%) saturate(2287%) hue-rotate(197deg) brightness(88%) contrast(96%);
  /* ≈ #573697 (hover) — aproximação prática */
  --logo-filter-purple: brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(1823%) hue-rotate(238deg) brightness(88%) contrast(95%);
}

.logos{ padding:40px 0; }
.logos--triple .container{ display:grid; gap:18px; }
.logos__wrap{
  overflow:hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.logos__track{
  --speed:32s;
  --row-distance:1200px;
  display:flex; gap:24px; align-items:center;
  will-change:transform;
  animation: logos-move var(--speed) linear infinite;
}
.logos__track--ltr{ animation-direction:reverse; }
.logos--fast .logos__track{ --speed:22s; }

/* pausa ao hover em QUALQUER faixa */
.logos__wrap:hover .logos__track,
.logos__item:hover ~ .logos__track{ animation-play-state: paused; }

/* itens */
.logos__item{ flex:0 0 auto; padding:10px 18px; opacity:.95; transition:transform .2s ease, opacity .2s ease; }
.logos__item img{
  height:38px; width:auto;
  /* cor base navy (mantém “a atual”) */
  filter: var(--logo-filter-navy);
  transition: filter .2s ease, transform .2s ease, opacity .2s ease;
}
.logos__item:hover{ transform:scale(1.05); opacity:1; }
/* hover roxo (#573697) */
.logos__item:hover img{ filter: var(--logo-filter-purple); }

@keyframes logos-move{
  from{ transform: translateX(0); }
  to{   transform: translateX(calc(-1 * var(--row-distance))); }
}

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

/* --------- Section head --------- */
.section__head{margin-bottom:24px; text-align:center}
.section__tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; color:#334; background:#fff; border:1px solid var(--line);
  padding:6px 12px; border-radius:999px; box-shadow: var(--shadow);
}
.section__head h2{
  margin:12px 0 6px; font-size:clamp(24px,2.6vw,34px); color:var(--ac-navy)
}
.section__head p{color:var(--muted); margin:0}

/* --------- Pilares (sectors) --------- */
.sectors{
  display:grid; gap:18px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.sector{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:18px; box-shadow: var(--shadow);
}
.sector__ico{
  font-size:22px; color:#fff;
  width:44px; height:44px; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(87,54,151,.95), rgba(87,54,151,.75));
  border-radius:10px; margin-bottom:10px;
}
.sector h3{margin:0 0 6px; color:var(--ac-navy)}
.sector p{margin:0 0 8px; color:#2c3355}
.sector__row{display:flex; align-items:center; gap:10px}
.kpi-chip{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; padding:0 10px; border-radius:999px; font-weight:700; font-size:.82rem;
  color:#fff; background:var(--ac-navy);
}

/* --------- Processo (steps) --------- */
.steps{display:grid; gap:18px; grid-template-columns:repeat(4,1fr)}
.steps--xl .step{padding:18px}
.step{
  background:var(--glass); border:1px solid rgba(24,40,82,.08);
  backdrop-filter: blur(6px);
  border-radius:16px; box-shadow: var(--shadow);
}
.step__top{display:flex; justify-content:flex-start}
.step__badge{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  color:#fff; font-weight:800;
  background: linear-gradient(180deg, var(--ac-purple), var(--ac-purple-700));
  box-shadow: 0 6px 16px rgba(87,54,151,.28);
}
.step h3{margin:10px 0 6px; color:var(--ac-navy)}
.step p{margin:0; color:#2c3355}

/* --------- Benefícios --------- */
.benefits{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }
.benefit{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow: var(--shadow);
}
.benefit__ico{font-size:22px}
.benefit h3{margin:8px 0 6px; color:var(--ac-navy)}
.benefit p{margin:0; color:#2c3355}
.benefit.is-accent{
  border-color:rgba(87,54,151,.28);
  outline:2px solid rgba(87,54,151,.12);
}

/* --------- Antes x Depois --------- */
.compare{display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:stretch}
.cmp{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow: var(--shadow);
}
.cmp h3{margin:0 0 10px; display:flex; align-items:center; gap:8px; color:var(--ac-navy)}
.cmp__badge{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:.9rem;
}
.cmp__badge--before{background:#9aa2c3}
.cmp__badge--after{background:var(--ac-green)}
.cmp__list{list-style:none; padding:0; margin:0}
.cmp__list li{display:flex; align-items:center; gap:10px; padding:8px 0; color:#2c3355}
.cmp__arrow{display:grid; place-items:center}
.cmp__arrow-line{
  width:2px; height:100%; 
  background:linear-gradient(180deg, var(--ac-navy), transparent);
  border-radius:2px; display:inline-block;
}

/* --------- Comparativo (Assessoria x Agência) --------- */
.compare-table{
  display:grid; gap:10px;
  border-radius:16px; overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid var(--line); background:#fff;
}
.ct-row{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:0; }
.ct-row > div{
  padding:12px 14px; border-top:1px solid var(--line); color:#2c3355;
}
.ct-row div:first-child{font-weight:700; color:var(--ac-navy); background:#fafbff}
.ct-head{background: linear-gradient(180deg, rgba(24,40,82,.06), rgba(87,54,151,.10));}
.ct-head > div{
  font-weight:800; color:var(--ac-navy); border-top:0;
}

/* --------- Integrações --------- */
.integrations{display:grid; gap:14px; grid-template-columns:repeat(4,1fr)}
.int-item{
  display:flex; gap:12px; align-items:flex-start; padding:16px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow);
}
.int-item h3{
  display:flex; align-items:center; gap:10px;
  margin:0 0 8px; color:var(--ac-navy);
}
.int-ico-inline{
  font-size:22px; line-height:1;
  color:transparent;
  background: linear-gradient(135deg, var(--ac-navy) 0%, #263a7a 55%, var(--ac-purple) 100%);
  -webkit-background-clip:text; background-clip:text;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
.int-item p{
  margin:0; color:#2c3355; line-height:1.55;
  min-height:4.7em;
}

/* --------- FAQ --------- */
.faq-v2{display:grid; gap:12px}
.faq-item{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:6px 12px; box-shadow: var(--shadow);
}
.faq-q{
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer;
  font-weight:700; color:var(--ac-navy);
}
.faq-chip{
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px;
  background:rgba(24,40,82,.08); color:var(--ac-navy);
  margin-right:8px;
}
.faq-a{color:#2c3355; padding:0 6px 10px}

/* ===== FAQ — estilo ampliado usado na seção ===== */
.section__head--faq h2{ position:relative; }
.section__head--faq h2::after{
  content:""; display:block; margin:10px auto 0; width:120px; height:6px;
  border-radius:6px;
  background: linear-gradient(90deg, rgba(24,40,82,.0), rgba(24,40,82,.18) 20%, rgba(87,54,151,.35) 80%, rgba(24,40,82,.0));
}
.faq-v2--xl{ display:grid; gap:14px; }
.faq-item{
  border:0; background:#fff;
  border-radius:18px;
  box-shadow: 0 6px 20px rgba(24,40,82,.08);
  overflow:hidden;
}
.faq-q{
  padding:18px 18px;
  font-weight:800; color:var(--ac-navy);
  background:#fff;
}
.faq-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.faq-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.faq-caret{ transition: transform .2s ease; color:#22325e; opacity:.8; }
.faq-chip{
  width:40px; height:40px; border-radius:12px; flex:0 0 auto;
  display:grid; place-items:center; color:#fff;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.38) 0%, transparent 55%),
    linear-gradient(135deg, var(--ac-navy) 0%, #243b7e 55%, var(--ac-purple) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 6px 14px rgba(24,40,82,.18);
}
.faq-chip i{ font-size:18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.faq-item[open] .faq-caret{ transform:rotate(180deg); }
.faq-item[open] .faq-q{ box-shadow: inset 0 -1px 0 rgba(24,40,82,.08); }
.faq-a{
  padding:16px 18px 20px; color:#2c3355; line-height:1.6;
  background: linear-gradient(180deg, #fff, #f7f8ff);
}

/* --------- Footer --------- */
.lp-footer--dark{
  background: var(--ac-navy); color:#dfe6ff; padding:28px 0; border-top:4px solid var(--ac-purple);
}
.lp-footer__inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.lp-footer a{color:#fff; text-decoration:underline dotted rgba(255,255,255,.45)}
.lp-social{display:flex; gap:12px}
.social-link{
  width:36px; height:36px; display:grid; place-items:center; border-radius:10px;
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.14)
}
.social-link:hover{background:rgba(255,255,255,.16)}

/* --------- Form (p/ páginas de formulário) --------- */
.form-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow)
}
.form-note{background:rgba(24,40,82,.06); border:1px dashed rgba(24,40,82,.25); border-radius:12px; padding:10px 12px; margin-bottom:12px; color:#243056}
.modal__form .two-cols{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}
label{font-weight:700; color:var(--ac-navy)}
input,select{
  height:44px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:#fff; color:#1f2540;
}
input:focus,select:focus{outline:2px solid rgba(24,40,82,.18); border-color: rgba(24,40,82,.32)}
.help{font-size:.85rem; color:#6b7280; min-height:1em}
.error{border-color:#ef4444 !important; outline-color:#ef4444 !important}
.help.error{color:#ef4444}
.success{
  text-align:center; padding:24px; border-radius:16px; background:linear-gradient(180deg, rgba(34,197,94,.10), rgba(34,197,94,.06));
  border:1px solid rgba(34,197,94,.28)
}
.success__check{font-size:44px; line-height:1; color:var(--ac-green)}
.is-hidden{display:none}

/* --------- Responsivo --------- */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr}
  .mid-cta{flex-direction:column; align-items:stretch}
  .sectors{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .benefits{grid-template-columns:1fr 1fr}
  .compare{grid-template-columns:1fr; }
  .integrations{grid-template-columns:1fr 1fr}
  .lp-footer__inner{flex-direction:column; text-align:center}
  .ct-row{grid-template-columns:1fr}
  .ct-row > div:nth-child(2), .ct-row > div:nth-child(3){border-top:1px solid var(--line)}
}
@media (max-width: 580px){
  .sectors,.steps,.benefits,.integrations{grid-template-columns:1fr}
  .modal__form .two-cols{grid-template-columns:1fr}
  .brand img{height:40px}
}

/* ==== FAB — Bubble de produtos (footer) ==== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.fab-switch{
  position:fixed; right:18px; bottom:18px; z-index:60;
}

.fab-switch__btn{
  width:56px; height:56px; border-radius:16px; border:1px solid rgba(24,40,82,.12);
  background: linear-gradient(180deg, #573697, #573697);
  color:#fff; display:grid; place-items:center; box-shadow: 0 10px 28px rgba(24,40,82,.18);
  cursor:pointer; transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.fab-switch__btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(24,40,82,.22); }
.fab-switch__btn:active{ transform: translateY(0); }
.fab-switch__btn i{ font-size:22px; }

.fab-switch__menu{
  position:absolute; right:0; bottom:70px; width:300px; max-width:88vw;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow: 0 16px 48px rgba(16,26,58,.18);
  padding:10px; display:grid; gap:8px;
  opacity:0; transform: translateY(8px) scale(.98); pointer-events:none; transition: opacity .16s ease, transform .16s ease;
}
.fab-switch.is-open .fab-switch__menu{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.fab-switch.is-open .fab-switch__btn{ box-shadow: 0 14px 36px rgba(24,40,82,.26); }

.fab-item{
  display:grid; grid-template-columns:40px 1fr; gap:10px; align-items:center;
  border:1px solid var(--line); border-radius:12px; padding:10px; background:#fff;
  color:var(--ac-navy);
}
.fab-item:hover{ background:#f7fbfd; border-color: rgba(24,40,82,.16); }
.fab-item__logo{ width:32px; height:32px; object-fit:contain; }
.fab-item__title{ font-weight:800; line-height:1.2; }
.fab-item__desc{ font-size:.85rem; color:#5d6380; line-height:1.1; }

@media (max-width: 580px){
  .fab-switch__btn{ width:52px; height:52px; border-radius:14px; }
  .fab-switch__menu{ width:280px; }
}


/* ===== Mini switch (header) ===== */
.brand-wrap{ display:flex; align-items:center; gap:10px; }
.mini-switch{
  position:relative;
}
.mini-switch__btn{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 10px; border-radius:10px;
  background:#fff; border:1px solid var(--line); color:var(--ac-navy);
  font-weight:700; cursor:pointer; box-shadow: var(--shadow);
}
.mini-switch__btn:hover{ background:#f7fbfd; }
.mini-switch__ico{ font-size:14px; line-height:1; }
.mini-switch__lbl{ font-size:.92rem; }

.mini-switch__menu{
  position:absolute; left:0; top:calc(100% + 8px); width:260px; max-width:88vw;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 14px 36px rgba(16,26,58,.16);
  padding:8px; display:grid; gap:6px;
  opacity:0; transform: translateY(6px); pointer-events:none; transition: opacity .16s ease, transform .16s ease;
  z-index:50;
}
.mini-switch.is-open .mini-switch__menu{ opacity:1; transform: translateY(0); pointer-events:auto; }

.mini-item{
  display:grid; grid-template-columns:28px 1fr; gap:8px; align-items:center;
  padding:8px; border-radius:10px; border:1px solid var(--line); color:var(--ac-navy); background:#fff;
}
.mini-item:hover{ background:#f6f9fb; border-color: rgba(24,40,82,.16); }
.mini-item__logo{ width:22px; height:22px; object-fit:contain; }
.mini-item__title{ font-weight:700; font-size:.95rem; line-height:1.2; }

@media (max-width: 580px){
  .mini-switch__btn{ height:34px; }
  .mini-switch__lbl{ display:none; } /* mantém só o ícone no mobile */
}