:root{
    --primary:#FEDC00;
    --primary-dark:#FF9D01;
    --ink:#191919;
    --muted:#5b6169;
    --bg-soft:#FFF9E6;
    --line:#EDEDED;
    --card:#ffffff;
    --ok:#16b26a;
    --no:#ff4d4d;
    --radius:16px;
    --shadow:0 10px 30px rgba(0,0,0,.08);
    --cta-gray:#2b2b2b;
    --line: #E9E9EC;
    --no: #C7CBD6;
    --shadow: 0 10px 30px rgba(0,0,0,.06);
    --col-feature: 1.2fr;
    --col-99: 1fr;
    --col-cnm: 1fr;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; color:var(--ink); background:#fff}
img{max-width:100%; display:block}
h1,h2,h3{line-height:1.15; margin:0 0 .6rem}
h1{font-size:clamp(2rem,3vw + 1rem,3rem)}
h2{font-size:clamp(1.5rem,2.2vw + .7rem,2.1rem)}
h3{font-size:1.08rem}
p{margin:.3rem 0 .9rem}
.container{width:min(1120px,92vw); margin-inline:auto}
.section{padding:72px 0}
.badge{background:var(--primary); color:#171717; font-weight:800; border-radius:999px; padding:.35rem .8rem; display:inline-block; margin-bottom:1rem}
.hl{color:var(--primary)}

/* BOTÕES */
.actions{display:flex; gap:.8rem; flex-wrap:wrap;}
.actions--center{justify-content:center; margin-top:16px}
.actions--split{justify-content:center; gap:16px; margin-top:18px}
.btn{
  --btn-bg:#111; --btn-ink:#fff;
  display:inline-block; text-decoration:none; font-weight:800; letter-spacing:.2px;
  border-radius:999px; padding:1rem 1.25rem; background:var(--btn-bg); color:var(--btn-ink);
  border:2px solid var(--btn-bg); transition:transform .18s ease, box-shadow .2s;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{--btn-bg:var(--primary); --btn-ink:#171717}
.btn--ghost{--btn-bg:transparent; --btn-ink:#111; border-color:#D9D9D9}

/* =========================
   HERO – polimento criativo
   ========================= */

/* Paleta local (fallbacks) */
.hero99{
  --brand: #FF9D01;
  --brand-dark: #CC7A00;
  --ink: #111;
  --cta-gray: #2b2b2b;
  --shadow: 0 12px 30px rgba(0,0,0,.12);
  --ring: 0 0 0 4px rgba(255,157,1,.20);
  position: relative;
  padding:96px 0 72px;
  isolation: isolate; /* garante camadas corretas dos pseudo-elements */
}

/* Grid base */
.hero99__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:90px;
  align-items:center;
  perspective: 1000px; /* 3D leve no media hover */
  max-width: 1600px !important;
}

/* Texto */
.hero99__copy{
  display:flex;
  flex-direction:column;
  gap: 50px;
}

/* Headline com “marcação” animada */
.hero99__copy h1{
  margin:0;
  line-height:1.15;
  letter-spacing:-.015em;
  font-weight:700;
  /* marca-texto animado (preenche ao hover/focus da seção) */
  background:
    linear-gradient(transparent 64%, rgba(255,157,1,.28) 0) left / 0% 100% no-repeat;
  transition: background-size .6s cubic-bezier(.4,0,.2,1), text-shadow .3s ease;
  font-size: 3rem;
}
.hero99:hover .hero99__copy h1,
.hero99:focus-within .hero99__copy h1{
  background-size: 100% 100%;
  text-shadow: 0 1px 0 rgba(255,255,255,.18);
}

.hero99__copy p{
  margin:0;
  line-height:1.75;
  max-width:62ch;
  font-size: 1.5rem;
  opacity: .96;
  transform: translateY(6px);
  animation: hero-fade-up .7s cubic-bezier(.4,0,.2,1) both;
}
.hero99__copy .d-flex.flex-column.gap-4 > p:nth-child(1){ animation-delay:.05s; }
.hero99__copy .d-flex.flex-column.gap-4 > p:nth-child(2){ animation-delay:.18s; }

/* Ações (botões) */
.hero99 .actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.hero99 .btn{
  position:relative;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  overflow:hidden; /* para o ripple */
  transform: translateZ(0); /* evita blur em animação */
}
.hero99 .btn--primary,
.hero99 .btn--ghost{
  background:var(--cta-gray);
  color:#fff;
  border-color:var(--cta-gray);
  font-size: 1.5rem !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.hero99 .btn--primary:hover,
.hero99 .btn--ghost:hover{
  background:#1f1f1f;
  border-color:#1f1f1f;
  color:#fff !important;
  transform:translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
/* Focus ring acessível */
.hero99 .btn:focus-visible{
  outline:none;
  box-shadow: var(--ring), 0 10px 24px rgba(0,0,0,.14) !important;
}

/* Ripple laranja suave ao clicar */
.hero99 .btn::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:0; height:0; border-radius:50%;
  background: rgba(255,157,1,.25);
  transform: translate(-50%,-50%);
  transition: width .45s ease, height .45s ease, opacity .6s ease;
  opacity:0;
  pointer-events:none;
}
.hero99 .btn:active::after{
  width: 280px; height: 280px; opacity:1;
}

/* mídia */
.hero99__media{
  position:relative; justify-self:end; width:100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease;
  height: 100%;
}

.hero99__media::after{
  content:"";
  position:absolute; inset: -6% -6% -6% -6%;
  border-radius: 22px;
  border: 2px solid rgba(255,157,1,.28);
  pointer-events:none;
  transform: translateZ(-1px);
}

.hero99__media img{
  width:100%;
  background:#F4F4F4;
  border-radius:22px;
  object-fit: cover;
  height: 100%;
  animation: hero-float 6s ease-in-out infinite;
}

/* Interação 3D sutil na mídia */
@media (hover:hover){
  .hero99__media:hover{
    transform: rotateY(6deg) rotateX(-2deg) translateY(-2px);
    filter: saturate(1.03) contrast(1.02);
  }
  .hero99__media:hover img{
    animation-play-state: paused; /* pausa o float no hover */
  }
}

/* Responsivo */
@media (max-width:950px){
  .hero99{ padding:72px 0; text-align: center;}
  .hero99__grid{ grid-template-columns:1fr; }
  .hero99__copy{ gap:22px; }
  .hero99__media{ justify-self:stretch; }
  .hero99__copy h1{
    background-size: 100% 100%; /* já mostrar marcado em telas menores */
  }
  
  .hero99 .actions {
    justify-content: center;
  }

  .hero99__media::after, .hero99__media::before {
    display: none;
  }

  section {
    padding: 20px !important;
  }
}

/* Animações e preferências de movimento */
@keyframes hero-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
@keyframes hero-fade-up{
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero99 *,
  .hero99::before,
  .hero99__media::before,
  .hero99__media::after{
    animation: none !important;
    transition: none !important;
  }
}


/* =========================
   POR QUE USAR – split CNM/99Food
   ========================= */
.why99{ position:relative; isolation:isolate; }

/* Fundo dividido 50/50 (desktop) */
.why99::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(90deg, var(--primary-dark) 0 50%, var(--primary) 50% 100%);
}

/* “seam” (uma costura suave no meio) */
.why99::after{
  content:"";
  position:absolute; top:0; bottom:0; left:50%;
  width:1px;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(255,255,255,.22));
  mix-blend-mode: soft-light;
  opacity:.5;
  pointer-events:none;
}

.why99__grid{
  position: relative;           /* para pseudo-elementos locais */
  display:grid; grid-template-columns:1fr 1fr; gap:62px;
}

/* títulos: parecem uma frase só no centro */
.why99 h2{
  color:#111; 
  margin:0 0 18px 0;
  font-size: clamp(2.2rem, 3.4vw, 3.6rem) !important;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  display:inline-block;
  position: relative;
  /* marca-texto suave atrás do texto */
  background: linear-gradient(transparent 68%, rgba(255,255,255,.45) 0) left/100% 100% no-repeat;
  padding: 2px 6px 4px;
  border-radius: 6px;
}

/* colar os títulos no seam (reduz o “gutter”) */
.why99__col--left  h2{ text-align:right; margin-right: clamp(-18px, -1.2vw, -8px); }
.why99__col--right h2{ text-align:left;  margin-left:  clamp(-18px, -1.2vw, -8px); }


.why99:hover h2::after,
.why99:focus-within h2::after{ transform: scaleX(1); }

/* colunas */
.why99__col{ display:grid; gap:16px; }

/* cards base */
.whycard{
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: var(--shadow);
  min-height: 110px;
  text-align: center;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease;
  overflow: hidden;
}

/* Linha superior animada (cresce no hover) */
.whycard::before{
  content:"";
  position:absolute; left:0; top:0; height:4px; width:100%;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.6), rgba(255,255,255,.0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}

/* Shine diagonal sutil no hover */
.whycard::after{
  content:"";
  position:absolute; top:-20%; left:-40%;
  width:60%; height:140%;
  background: linear-gradient(130deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%);
  transform: translateX(-10%) skewX(-18deg);
  opacity:0;
  transition: opacity .35s ease, transform .6s ease;
  pointer-events:none;
}

.whycard h3{ margin:0 0 .35rem; font-size: 1.9rem; font-weight:800; }
.whycard p { font-size: 1.25rem; margin:0; opacity:.95; }

/* Lado CNM (esquerda): borda/realce puxando o laranja-escuro */
.why99__col--left .whycard{
  border-top: 4px solid var(--primary-dark);
}
.why99__col--left .whycard:hover{
  transform: translateY(-4px) rotate(-.25deg);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.08);
}

.why99__col--left .whycard:hover::after{
  opacity:.9; transform: translateX(60%) skewX(-18deg);
}

/* Lado 99Food (direita): card escuro com texto claro e borda laranja */
.why99__col--right .whycard{
  border: none;
  background-color: #0f0f0f;
  color: #fff;
  border-top: 4px solid var(--primary);
}
.why99__col--right .whycard:hover{
  transform: translateY(-4px) rotate(.25deg);
  box-shadow: 0 18px 38px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.06) inset;
}

.why99__col--right .whycard:hover::after{
  opacity:.9; transform: translateX(60%) skewX(-18deg);
}

/* micro bullet no h3 (varia por lado) – discreto */
.why99__col--left .whycard h3::before,
.why99__col--right .whycard h3::before{
  content:"";
  display:inline-block;
  width:.55em; height:.55em; border-radius:50%;
  margin-right:.4em; vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(255,255,255,.5) inset;
}
.why99__col--left  .whycard h3::before{ background: var(--primary-dark); }
.why99__col--right .whycard h3::before{ background: var(--primary); }

/* Acessível: foco visível nos cards se contiverem links/botões */
.whycard:focus-within{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,157,1,.25), var(--shadow);
}

/* Responsivo: split passa a ser vertical e título permanece colado */
@media (max-width: 860px){
  .why99::before{
    background: linear-gradient(180deg, var(--primary-dark) 0 50%, var(--primary) 50% 100%);
  }
  .why99::after{
    left:0; right:0; top:50%; height:1px; width:auto;
  }
  .why99__grid{ grid-template-columns:1fr; }
  .why99__col--left  h2{ text-align:center !important; margin:0; }
  .why99__col--right h2{ text-align:center; margin:0; }
  .whycard{ text-align:left; }
}

/* ==== COMO FUNCIONA — VERSÃO CLEAN (sem hover alterando tamanho) ==== */
.how99{ font-size:1.06rem; }
.how99 h2{ margin-bottom:14px; text-align:center; font-size:2.4rem; font-weight:700; }

/* ==== CORES LOCAIS DA SECTION (99 amarelo / CNM laranja) ==== */
.how99{
  --primary: #FFD400; /* 99Food */
  --primary-dark: #FF8A00; /* CNM (laranja) */
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))){

  /* 1) definimos a cor e o arquivo de cada passo */
  .steps99 > article:nth-child(1){
    --icon-color: var(--primary, #FFD400);
    --icon: url("/assets/dist/img/integracoes/lps/99food-imgs/mobile-hand.svg");
  }
  .steps99 > article:nth-child(2){
    --icon-color: var(--primary-dark, #FF8A00);
    --icon: url("/assets/dist/img/integracoes/lps/99food-imgs/dashboard-monitor.svg");
  }
  .steps99 > article:nth-child(3){
    --icon-color: var(--primary-dark, #FF8A00);
    --icon: url("/assets/dist/img/integracoes/lps/99food-imgs/delivery-man.svg");
  }

  /* 2) renderizamos o ícone via ::after, na mesma posição do <img> */
  .steps99 > article::after{
    content: "";
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: var(--icon-size, 42px);
    height: var(--icon-size, 42px);
    background: var(--icon-color, #fff);

    /* máscara do SVG */
    -webkit-mask-image: var(--icon);
            mask-image: var(--icon);
    -webkit-mask-repeat: no-repeat;       mask-repeat: no-repeat;
    -webkit-mask-position: center;        mask-position: center;
    -webkit-mask-size: contain;           mask-size: contain;

    opacity: .95;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
    transition: transform .25s ease, opacity .25s ease, filter .25s ease;
    pointer-events: none;
  }

  /* 3) escondemos o <img> ORIGINAL só quando a máscara é suportada */
  .steps99 > article .step99__icon{ display: none; }

  /* micro feedback (mantém seu comportamento atual) */
  .steps99 > article.is-active::after{
    transform: translateY(-1px) scale(1.03);
    opacity: 1;
  }
  @media (hover:hover){
    .steps99 > article:hover::after{
      transform: translateY(-2px) scale(1.05);
      filter: drop-shadow(0 2px 0 rgba(0,0,0,.18));
    }
  }
}

.steps99{
  /* larguras fixas responsivas (ajuste à vontade) */
  --activeW:   clamp(240px, 31vw, 610px);  /* card aberto */
  --inactiveW: clamp(170px, 21vw, 310px);  /* cards fechados */
  height: auto;

  /* animação */
  --panelDur: .60s;
  --contentDur: .40s;
  --easeSmooth: cubic-bezier(.4,0,.2,1);

  display:flex; gap:14px; align-items:stretch;
  justify-content: center;
  flex-wrap:nowrap; min-width:0;
}

/* CARD base (tamanho fixo nos fechados) */
.step99{
  flex:0 0 var(--inactiveW);      /* <<< só flex-basis, nada de width */
  min-width:0;
  display:flex; flex-direction:column;
  min-height:220px;
  background:linear-gradient(180deg,#2C2C2C 0,#3a434d 100%);
  color:#fff; border-radius:18px; overflow:hidden;
  border:1px solid #2b2b2b; box-shadow:var(--shadow);
  transition:
    flex-basis var(--panelDur) var(--easeSmooth),
    background .30s ease;

  /* ===== ÍCONE: tamanho e reserva de espaço ===== */
  position: relative;              /* âncora pro ícone absoluto */
  --icon-size: 42px;
  --icon-gap: 12px;
  --icon-pad: calc(var(--icon-size) + var(--icon-gap));
}

/* CARD ativo (tamanho fixo menor que antes) */
.step99.is-active{
  flex-basis:var(--activeW);
  background:linear-gradient(180deg,#3a434d 0,#232323 100%);
}

/* CABEÇALHO */
.step99__head{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  width:100%; background:transparent; border:0; color:inherit;
  padding:18px 16px 0; cursor:default;
  padding-right: calc(16px + var(--icon-pad)); /* reserva pro ícone */
}

/* NÚMERO com “borda” alinhada (só quando ativo) */
.step99__num{
  position:relative; display:grid; place-items:center;
  width:42px; height:42px; font-weight:900; font-size:2rem; line-height:1; color:#fff;
}
.step99__num::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:transparent; border-radius:2px; transition:background .25s ease; 
}
/* cores por passo quando ATIVO */
.steps99 > article:nth-child(1).is-active .step99__num::before{ background:var(--primary); }
.steps99 > article:nth-child(2).is-active .step99__num::before,
.steps99 > article:nth-child(3).is-active .step99__num::before{ background:var(--primary-dark); }

/* por padrão, sem padding */
.step99 .step99__num{
  padding-left: 0;
  transition: padding-left .25s var(--easeSmooth, ease);
}

/* apenas no card ativo aplica padding-left */
.step99.is-active .step99__num{
  padding-left: 12px; /* ajuste se quiser mais/menos espaço da borda */
}

.btn--i-want-to-sell-more {
  background-color: var(--primary-dark) !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  color: #fff !important;
}

.step99__title{
  font-size:1.15rem;
  text-align: start;
}

/* CONTEÚDO — aparece suave, sem “digitar” */
.step99__content{
  padding:12px 16px 18px;
  padding-right: calc(16px + var(--icon-pad)); /* reserva pro ícone */
  color:#EAEAEA;
  font-size:1.06rem; line-height:1.7;
  max-height:0; opacity:0; transform:translateY(6px);
  overflow:hidden;
  transition:
    max-height var(--contentDur) var(--easeSmooth),
    opacity .28s ease,
    transform var(--contentDur) var(--easeSmooth);
}
.step99__content p{ margin:0; }

.step99.is-active .step99__content{
  max-height:280px; opacity:1; transform:translateY(0);
}

/* ===== ÍCONE fixo no canto inferior-direito ===== */
.step99__icon{
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: var(--icon-size);
  height: auto;
  object-fit: contain;
  opacity: .9;
  pointer-events: none; /* evita “bloquear” clique/teclado no card */
  transform: translateY(0);
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
}

/* microfeedback no card ativo */
.step99.is-active .step99__icon{
  transform: translateY(-1px) scale(1.03);
  opacity: 1;
}

/* hover (em dispositivos com hover) */
@media (hover:hover){
  .step99:hover .step99__icon{
    transform: translateY(-2px) scale(1.05);
    filter: drop-shadow(0 2px 0 rgba(0,0,0,.18));
  }
}

/* MOBILE: empilha sem animar largura e ajusta o ícone */
@media (max-width: 860px){
  .steps99{flex-direction:column}
  .step99{min-height:auto}
  .step99,
  .step99.is-active{
    flex-basis:auto; /* 100% */
    transition:background .3s ease; /* sem animar tamanho no mobile */
  }
  .step99{ --icon-size: 36px; --icon-gap: 10px; }
}

/* ========= Comparativo (conexão 99 ⟶ CNM) ========= */
.compare99{
  /* cores: 99 (amarelo) e CNM (agora laranja) */
  --c-99: var(--primary, #FFD400);
  --c-cnm: #FF9D01; /* laranja CNM */
  --c-ink: #111;
  --c-ink-weak: #4B5563;
  --c-line: var(--line, rgba(0,0,0,.12));
  --c-ok: var(--ok, #16a34a);

  /* gradientes */
  --g-soft: linear-gradient(180deg, #ffffff, #fafafa);
  --g-99: linear-gradient(grey);
  --g-cnm: linear-gradient(135deg, #FFE4C2 0%, #FFA133 45%, var(--c-cnm) 100%);
  /* mix agora é amarelo ↔ laranja (sem roxo) */
  --g-mix: linear-gradient(135deg, var(--c-99) 0%, #FFB703 35%, #FFA133 65%, var(--c-cnm) 100%);

  /* sombras */
  --shadow-s: 0 4px 12px rgba(0,0,0,.10);
  --shadow-m: 0 10px 28px rgba(0,0,0,.16);
  --shadow-glow-99: 0 8px 24px rgba(255, 212, 0, .35);
  --shadow-glow-cnm: 0 8px 24px rgba(255, 138, 0, .35);

  --radius: 18px;
  --t: .28s cubic-bezier(.2,.7,.2,1);
}

/* título com degradê sutil */
.compare99 h2{
  text-align: center; margin-bottom: 14px; font-weight: 900; letter-spacing: .2px;
  background: linear-gradient(90deg, var(--c-ink), var(--c-ink-weak));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ===== GRID / CARD ===== */
.compareCards{
  display:grid; grid-template-columns:repeat(2, minmax(280px, 1fr));
  gap:24px; margin-top:28px; position:relative;
  z-index: 0; /* para o conector ficar atrás */
}

.compareCard{
  position:relative; z-index:1; /* fica acima do conector */
  border-radius:var(--radius);
  background: var(--g-soft) padding-box,
              linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.06)) border-box;
  border:1px solid transparent; box-shadow:var(--shadow-s);
  display:flex; flex-direction:column; overflow:hidden;
  transform: translateZ(0);
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}

/* ===== HEADERS ===== */
.compareCard__header{
  position:relative; padding:22px 20px 14px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background: linear-gradient(135deg, #ffffff, #fbfbfb) !important;
  transition: background-position 1.2s ease; background-size:200% 200%;
}

/* 99Food: amarelo */
#card-99food .compareCard__header{
  background: var(--g-99) !important; color:#111;
}

/* CNM + 99Food: mix amarelo ↔ laranja (conectado) */
.compareCard--highlight .compareCard__header{
  background: var(--g-mix) !important; color:#111;
}

/* ribbon */
.compareCard--highlight .compareCard__header::after{
  content:"Mais completo"; position:absolute; top:10px; right:12px;
  font-size:.72rem; font-weight:900; letter-spacing:.3px; color:#111;
  padding:6px 10px; border-radius:999px;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,.85));
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}



.compareCard:hover .compareCard__header{ background-position:100% 0; }

/* logos */
.compareCard__logo{ width:76px; height:auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.08)); }
.compareCard__logos{ display:inline-flex; align-items:center; gap:12px; }
.compareCard__logos img{ width:74px; height:auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.10)); }
.compareCard__plus{ font-weight:900; font-size:1.6rem; line-height:1; }

/* título */
.compareCard__title{ font-size:1.18rem; font-weight:900; margin:0; color:#fff;  }

/* ===== LISTA DE FEATURES ===== */
.compareCard__features{ list-style:none; margin:0; padding:2px 16px 12px; }
.compareCard__features li{
  display:grid; grid-template-columns:24px 1fr; align-items:start;
  gap:12px; padding:12px 8px; border-top:1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--c-line), transparent) 1;
  transition: background var(--t), transform var(--t); border-radius:10px; 
}
.compareCard__features li:first-child{ border-top:0; }
.compareCard__features li:hover{
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.00));
  transform: translateX(2px);
}

/* ✓ e ✕ simples */
.compareCard__features li::before{
  content:""; width:auto; height:auto; border-radius:0; box-shadow:none; margin-top:0; background:none;
}
.compareCard__features li[data-check]::before{
  content:"✓"; color: var(--c-ok); font-weight:900; font-size:18px; line-height:1;
}
.compareCard__features li[data-x]::before{
  content:"✕"; color:#ef4444; font-weight:900; font-size:18px; line-height:1;
}

/* ===== CTA ===== */
.compareCard__cta{ padding:14px 16px 22px; display:flex; justify-content:center; }

/* botões com sheen + ripple */
.compare99 .btn{
  border-radius:12px; box-shadow:var(--shadow-s);
  position:relative; overflow:hidden;
  transition: transform var(--t), box-shadow var(--t), filter var(--t), background-position .8s ease;
  background-size: 200% 200%;
}
.compare99 .btn::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 30%, rgba(255,255,255,0) 60%);
  transform: translateX(-120%); transition: transform .8s ease;
}
.compare99 .btn:active::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: radial-gradient(240px 240px at var(--x,50%) var(--y,50%), rgba(255,255,255,.35), transparent 40%);
  animation: ripple .7s ease forwards;
}
@keyframes ripple{ to{ opacity:0; transform:scale(1.2); } }

.compare99 .btn:hover{ transform: translateY(-2px) scale(1.015); box-shadow:var(--shadow-m); filter:saturate(1.05); }
.compare99 .btn:hover::after{ transform: translateX(120%); }

/* botões personalizados por card */
#card-99food .btn{ background: var(--g-99); color: #fff;; border:0; }
#card-99food .btn:hover{ box-shadow: grey; background-position: 100% 0; transform: translateY(-2px) scale(1.02) rotate(-.2deg); }

#card-cnm-99food .btn{ background: var(--g-cnm); color:#fff; border:0; }
#card-cnm-99food .btn:hover{ box-shadow: var(--shadow-m), var(--shadow-glow-cnm); background-position: 100% 0; transform: translateY(-2px) scale(1.02) rotate(.2deg); }

/* hover geral do card */
.compareCard:hover{ box-shadow:var(--shadow-m); transform: translateY(-2px); }
#card-cnm-99food:hover{ box-shadow: var(--shadow-m), var(--shadow-glow-cnm); }

/* ===== MOBILE: carrossel amostra ===== */
@media (max-width: 900px){
  .compareCards{
    display:flex; gap:16px; padding:0 16px 14px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; scroll-padding-left:16px;
    mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  /* esconde o conector largo no mobile (vira carrossel) */
  .compareCards::after{ display: none; }
  .compareCard{ flex:0 0 calc(100% - 56px); scroll-snap-align:start; scroll-snap-stop:always; border-radius:var(--radius); }
  .compareCard__logos img{ width:64px; }
  .compareCard__logo{ width:68px; }
  .compareCards::-webkit-scrollbar{ height:6px; }
  .compareCards::-webkit-scrollbar-thumb{ background: linear-gradient(90deg, var(--c-99), var(--c-cnm)); border-radius:4px; }
}

/* reduz movimento */
@media (prefers-reduced-motion: reduce){
  .compareCard, .compareCard__features li, .compare99 .btn{ transition: none !important; }
  .compareCard__header{ background-position: 0 0 !important; }
  .compare99 .btn::after{ display:none; }
}
/* ===== Carrossel ===== */
#carrossel{
  --primary: #FF9D01;

  /* ↓ um pouco menor que antes */
  --rail-h: clamp(68px, 8.6vw, 102px);
  --logo-box: calc(var(--rail-h) - 10px);
  --logo-pad: clamp(4px, .8vw, 10px);

  --gap: 22px;

  /* velocidades mais lentas (maior = mais devagar) */
  --speed-top: 48s;
  --speed-bottom: 58s;

  /* FUNDO “apimentado”: cinza com radiais de cor e grade sutil */
  --bg0: #f5f6f8;
  --bg1: rgba(255,157,1,.12);
  --bg2: rgba(58, 130, 246, .10); /* azulado suave (pode trocar) */

  background:
    radial-gradient(1200px 500px at 10% 0%, var(--bg1), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, var(--bg2), transparent 60%),
    linear-gradient(180deg, #fafbfc 0%, var(--bg0) 100%);
  position: relative;
  padding-block: clamp(28px, 5vw, 56px);
}

/* grade sutil por cima (só estética) */
#carrossel::before{
  content:"";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(to right, rgba(0,0,0,.04) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.035) 0 1px, transparent 1px 24px);
  mask: linear-gradient(180deg, transparent, #000 15% 85%, transparent);
  pointer-events: none;
}

/* container, título */
#carrossel .container{
  max-width: min(1200px, 92vw);
  margin: 0 auto;
}
#carrossel .mx-title{
  margin: 0 0 clamp(18px, 3vw, 30px) 0;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  font-weight: 800;
  text-align: center;
}

/* carrossel duplo */
#carrossel .mx-carousel--duplo{
  display: grid;
  gap: clamp(12px, 2vw, 20px);
}

/* faixa */
#carrossel .mx-row{
  position: relative;
  overflow: hidden;
  height: var(--rail-h);
  background: #ffffffcc;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  backdrop-filter: saturate(120%) blur(2px);
}

/* fades laterais integrados ao novo fundo */
#carrossel .mx-row::before,
#carrossel .mx-row::after{
  content:"";
  position: absolute; top:0; bottom:0; width: 72px; pointer-events: none; z-index: 2;
}
#carrossel .mx-row::before{
  left:0;  background: linear-gradient(to right, var(--bg0) 0%, rgba(255,255,255,0) 70%);
}
#carrossel .mx-row::after{
  right:0; background: linear-gradient(to left,  var(--bg0) 0%, rgba(255,255,255,0) 70%);
}

/* trilhos animados (JS duplica p/ loop) */
#carrossel .mx-track{
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  padding-inline: 22px;
  width: max-content;
  will-change: transform;
  animation: mx-marquee linear infinite;
}
#carrossel .mx-row--top    .mx-track{ animation-duration: var(--speed-top);    animation-direction: normal;  }
#carrossel .mx-row--bottom .mx-track{ animation-duration: var(--speed-bottom); animation-direction: reverse; }

/* logos em caixas iguais */
#carrossel .mx-track img{
  width: var(--logo-box);
  height: var(--logo-box);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  padding: var(--logo-pad);
  box-sizing: border-box;
  flex: 0 0 var(--logo-box);

  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
  filter: grayscale(.08) saturate(1);
  transition: transform .25s ease, filter .25s ease;
}

@media (hover: hover){
  #carrossel .mx-row:hover .mx-track{ animation-play-state: paused; }
  #carrossel .mx-track img:hover{
    transform: translateY(-3px) scale(1.03);
    filter: grayscale(0) saturate(1.1);
  }
}

/* loop suave (-50% porque a lista é clonada por JS) */
@keyframes mx-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* CTA */
#carrossel .mx-cta{
  text-align: center;
  margin-top: clamp(18px, 3vw, 30px);
}
#carrossel .mx-btn{
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid transparent;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  background: var(--primary);
  color: #fff;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
#carrossel .mx-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(255,157,1,.28);
}

/* responsivo */
@media (max-width: 768px){
  #carrossel{
    --rail-h: clamp(64px, 18vw, 92px);
    --gap: 18px;
    --speed-top: 42s;
    --speed-bottom: 50s;
  }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  #carrossel .mx-track{ animation: none !important; }
  #carrossel .mx-track img{ transition: none !important; }
}


/* =========================
   CTA final – polimento criativo
   ========================= */
.cta-final{
  --primary: #FF9D01;
  --primary-dark: #CC7A00;
  --ink: #111;
  --line: #E9E9EC;
  --ring: 0 0 0 4px rgba(255,157,1,.22);

  position: relative;
  padding: clamp(64px, 10vw, 120px) 0;
  isolation: isolate;


}

/* “faixa” de brilho ao fundo (bem discreta) */
.cta-final::before{
  content:"";
  position:absolute; inset: 8% 0 auto 0; height: 28%;
  background: linear-gradient(90deg, rgba(255,157,1,.08), rgba(255,255,255,0), rgba(255,157,1,.08));
  filter: blur(18px);
  z-index:-1;
}

/* Wrapper vira um cartão com borda em degradê */
.cta-final__wrap{
  text-align:center;
  display:flex; flex-direction:column; gap: 32px;

  max-width: 980px; margin-inline:auto;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 20px;

  /* gradient border sem elementos extras */
  border:1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(255,157,1,.65), rgba(204,122,0,.65)) border-box;

  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

/* Headline com marca-texto elegante (preenche ao hover) */
.cta-final__wrap h2{
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.12;
  margin: 0;

  background:
    linear-gradient(transparent 66%, rgba(255,157,1,.28) 0) left/0% 100% no-repeat;
  transition: background-size .6s cubic-bezier(.4,0,.2,1), text-shadow .3s ease;
}
.cta-final:hover .cta-final__wrap h2,
.cta-final:focus-within .cta-final__wrap h2{
  background-size: 100% 100%;
  text-shadow: 0 1px 0 rgba(255,255,255,.18);
}

/* Subhead */
.cta-final__wrap .muted{
  color:#4B5563;
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin: 0;
  opacity: .96;
}

/* Ações */
.actions--final{
  display:flex !important;
  justify-content:center !important;
  align-items:center;
  gap: clamp(12px, 2.4vw, 18px);
  flex-wrap: wrap;
}

/* Botões grandes e com micro animações */
.btn--final{
  font-size: clamp(1rem, 2.2vw, 1.4rem) !important;
  padding: clamp(12px, 1.8vw, 16px) clamp(18px, 3vw, 28px) !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  letter-spacing: .2px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* Ghost dentro do CTA final */
.cta-final .btn--ghost.btn--final{
  background:#fff !important;
  color:#111 !important;
  border:2px solid var(--line) !important;
}
.cta-final .btn--ghost.btn--final:hover{
  border-color: var(--primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0,0,0,.14);
}

/* Primary dentro do CTA final */
.cta-final .btn--primary.btn--final{
  background: var(--primary) !important;
  color: #fff !important;
  border: 2px solid rgba(255,157,1,.35) !important;
}
.cta-final .btn--primary.btn--final:hover{
  filter: brightness(.97);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(255,157,1,.32);
}


.cta-final .btn--primary.btn--final:hover::after{
  transform: translateX(2px);
  opacity:1;
}

/* focus ring acessível */
.btn--final:focus-visible{
  outline: none !important;
  box-shadow: var(--ring), 0 10px 24px rgba(0,0,0,.14) !important;
}

/* ripple laranja suave ao clicar */
.btn--final::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:0; height:0; border-radius:50%;
  background: rgba(255,157,1,.25);
  transform: translate(-50%,-50%);
  transition: width .45s ease, height .45s ease, opacity .6s ease;
  opacity:0; pointer-events:none;
}
.btn--final:active::before{
  width: 260px; height: 260px; opacity: 1;
}

/* Decor: brilho sutil atrás dos botões (somente desktop) */
@media (hover:hover){
  .actions--final::after{
    content:"";
    position:absolute; left:50%; transform: translateX(-50%);
    width:min(560px, 80vw); height: 46px; margin-top: 44px;
    background: radial-gradient(50% 70% at 50% 0%, rgba(255,157,1,.20), transparent 70%);
    filter: blur(18px);
    pointer-events:none;
  }
}

/* Responsivo */
@media (max-width: 768px){
  .cta-final__wrap{ gap: 24px; }
}

/* Preferência por menos movimento */
@media (prefers-reduced-motion: reduce){
  .cta-final__wrap h2,
  .btn--final,
  .btn--final::before{
    transition: none !important;
    animation: none !important;
  }
}

.muted{color:var(--muted); font-size: 2rem;}


/* ===== Carrossel ===== */
#carrossel{
  --primary: #FF9D01;

  /* ↑ AUMENTEI ALTURA DOS TRILHOS E CAIXAS */
  --rail-h: clamp(110px, 14vw, 170px);
  --logo-box: calc(var(--rail-h) - 10px);
  --logo-pad: clamp(6px, 1.2vw, 14px);

  --gap: 28px;

  /* MAIS DEVAGAR (duração maior) */
  --speed-top: 50s;
  --speed-bottom: 58s;

  /* FUNDO DA SEÇÃO (destaca o carrossel) */
  --section-bg: #F3F4F6;

  background: var(--section-bg);
  padding-block: clamp(28px, 5vw, 56px);
}

#carrossel .container{
  max-width: min(1200px, 92vw);
  margin: 0 auto;
}

/* Título da section */
#carrossel .mx-title{
  margin: 0 0 clamp(18px, 3vw, 32px) 0;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  font-weight: 800;
  text-align: center;
}

/* Wrapper do carrossel duplo */
#carrossel .mx-carousel--duplo{
  display: grid;
  gap: clamp(12px, 2vw, 20px); /* espaço entre os 2 trilhos */
}

/* Trilhos (uma faixa por linha) */
#carrossel .mx-row{
  position: relative;
  overflow: hidden;
  height: var(--rail-h);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Suave “fade” nas laterais — combina com o fundo cinza */
#carrossel .mx-row::before,
#carrossel .mx-row::after{
  content:"";
  position: absolute; top:0; bottom:0; width: 72px; pointer-events: none;
  z-index: 2;
}
#carrossel .mx-row::before{
  left:0;
  background: linear-gradient(to right, var(--section-bg) 0%, rgba(255,255,255,0) 70%);
}
#carrossel .mx-row::after{
  right:0;
  background: linear-gradient(to left, var(--section-bg) 0%, rgba(255,255,255,0) 70%);
}

/* Faixa com logos (JS clona p/ loop perfeito) */
#carrossel .mx-track{
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  padding-inline: 22px;
  width: max-content;
  will-change: transform;
  animation: mx-marquee linear infinite;
}

/* Direções e velocidades diferentes */
#carrossel .mx-row--top    .mx-track{ animation-duration: var(--speed-top);    animation-direction: normal;  }
#carrossel .mx-row--bottom .mx-track{ animation-duration: var(--speed-bottom); animation-direction: reverse; }

/* Logos em caixas quadradas IGUAIS */
#carrossel .mx-track img{
  width: var(--logo-box);
  height: var(--logo-box);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  padding: var(--logo-pad);
  box-sizing: border-box;
  flex: 0 0 var(--logo-box);

  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);

  filter: grayscale(.08) saturate(1);
  transition: transform .25s ease, filter .25s ease;
}

@media (hover: hover){
  #carrossel .mx-row:hover .mx-track{ animation-play-state: paused; }
  #carrossel .mx-track img:hover{
    transform: translateY(-3px) scale(1.03);
    filter: grayscale(0) saturate(1.1);
  }
}

/* Loop perfeito — como o JS duplica a lista, -50% fecha o ciclo */
@keyframes mx-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* CTA abaixo dos dois trilhos */
#carrossel .mx-cta{
  text-align: center;
  margin-top: clamp(18px, 3vw, 30px);
}
#carrossel .mx-btn{
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid transparent;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  background: var(--primary);
  color: #fff;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
#carrossel .mx-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(255,157,1,.28);
}

/* Responsivo */
@media (max-width: 768px){
  #carrossel{
    --rail-h: clamp(90px, 20vw, 130px);
    --gap: 20px;
    --speed-top: 42s;
    --speed-bottom: 48s;
  }
}

/* Menos movimento */
@media (prefers-reduced-motion: reduce){
  #carrossel .mx-track{ animation: none !important; }
  #carrossel .mx-track img{ transition: none !important; }
}


/* ——— PRESET 1: TRANSPARENTE (mostra 100% o fundo da section) ——— */
#carrossel .mx-row{
  background: transparent !important;
  box-shadow: none;               /* opcional: remove a sombra do bloco */
  backdrop-filter: none;          /* não precisa de blur quando é transparente */
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.05); /* linha bem sutil p/ manter a borda */
}

/* Fades laterais continuam casando com o fundo cinza da section */
#carrossel .mx-row::before{
  background: linear-gradient(to right, var(--bg0) 0%, rgba(255,255,255,0) 70%);
}
#carrossel .mx-row::after{
  background: linear-gradient(to left,  var(--bg0) 0%, rgba(255,255,255,0) 70%);
}

/* ===== Fundo com opacidade controlada (repetido e sem esticar) ===== */
#carrossel{
  --tile: 1600px;         /* tamanho do “azulejo” (↓ diminui, ↑ aumenta) */
  --bg-opacity: .25;     /* 0 = invisível | 1 = 100% opaco */
  position: relative;
  isolation: isolate;    /* garante empilhamento correto */
  background: none !important;   /* tira qualquer cor/gradiente anterior */
}

/* Renderiza a imagem no ::before com opacidade */
#carrossel::before{
  content: "";
  position: absolute; inset: 0;
  display: block !important;          /* sobrescreve o display:none antigo */
  z-index: 0;
  pointer-events: none;

  background-image: url("/assets/dist/img/padrão cnm 2.svg");
  background-repeat: cover;
  background-size: var(--tile) auto;   /* mantém proporção (nada de esticar) */
  background-position: 0 0;
  opacity: var(--bg-opacity);          /* controle fino da opacidade */
}

/* Garante que o conteúdo fique acima do ::before */
#carrossel > .container{ position: relative; z-index: 1; }