/* Marola – Responsive Overrides (v19)
   ⚠️ Aplica-se SOMENTE abaixo de 1200px. Desktop (>=1200px) permanece intocado.
   Propósito: empilhar colunas, corrigir grids/flex/floats, imagens fluidas, tabelas com scroll,
   tipografia adequada e botão flutuante opcional (estilizado aqui, JS à parte).
*/

/* ===== Base utilitária (só mobile/tablet) ===== */
@media (max-width:1199.98px){
  *,*::before,*::after{box-sizing:border-box}
  img,video,canvas,svg,iframe{max-width:100%;height:auto}
  .container,.section,section{padding-left:24px;padding-right:24px}
}

/* ===== Tablet portrait ===== */
@media (max-width:991.98px){
  /* Conjuntos comuns viram 2 colunas */
  .row,.rows,.cols,.columns,.grid,.grids,
  .cards,.card-grid,.features,.services,.valores,.values,
  .produtos,.servicos,.parceiros,.partners,
  [class*="grid-"],[class*="row-"],[class*="-cols"],[class*="cols-"],[class*="colunas"]{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }
  /* Destrava min/max herdados */
  [style*="min-width:"],[style*="max-width:"],.minw,.min-w,[class*="minw"]{min-width:0!important;max-width:100%!important}
  /* Tabelas */
  .table-responsive,.table-wrap,.table-container{width:100%;overflow-x:auto}
  table{width:100%;border-collapse:collapse}
  table th,table td{padding:10px 12px;word-break:break-word}
  /* Tipografia segura */
  h1{font-size:clamp(24px,6vw,34px)}h2{font-size:clamp(20px,4.8vw,28px)}h3{font-size:clamp(18px,4.2vw,24px)}
  p,li{font-size:clamp(15px,3.8vw,18px);line-height:1.55}
}

/* ===== Phones ===== */
@media (max-width:767.98px){
  /* Empilha tudo em 1 coluna */
  .row,.rows,.cols,.columns,.grid,.grids,
  .cards,.card-grid,.features,.services,.valores,.values,
  .produtos,.servicos,.parceiros,.partners,
  [class*="grid-"],[class*="row-"],[class*="-cols"],[class*="cols-"],[class*="colunas"]{
    display:grid!important;grid-template-columns:1fr!important;gap:16px!important
  }
  /* Zera larguras/floats do desktop */
  [style*="width:"],.w-25,.w-33,.w-50,.w-66,.w-75,[class^="col-"],[class*=" col-"]{
    width:100%!important;max-width:100%!important;flex:1 1 100%!important
  }
  [style*="float: left"],[style*="float:left"],[style*="float: right"],[style*="float:right"],.pull-left,.pull-right{
    float:none!important;width:100%!important
  }
  /* Seções e cards */
  section,.section{padding-top:32px;padding-bottom:32px}
  .card,.box,.quadro,.feature{border-radius:16px;padding:16px 18px}
}

/* ===== Estilo do FAB/Menu Pizza (apenas mobile/tablet) ===== */
@media (max-width:991.98px){
  .fab-toggle{
    position:fixed;right:16px;bottom:18px;z-index:9999;
    width:56px;height:56px;border-radius:50%;
    display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.07);backdrop-filter:blur(6px);cursor:pointer
  }
  .fab-toggle span,.fab-toggle::before,.fab-toggle::after{
    content:"";display:block;width:24px;height:2px;background:#fff;transition:transform .25s
  }
  .fab-toggle::before{transform:translateY(-6px)}
  .fab-toggle::after{transform:translateY(6px)}
  body.mobile-menu-open .fab-toggle span{transform:scaleX(0)}
  body.mobile-menu-open .fab-toggle::before{transform:rotate(45deg)}
  body.mobile-menu-open .fab-toggle::after{transform:rotate(-45deg)}
  .fab-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s;z-index:9990}
  body.mobile-menu-open .fab-overlay{opacity:1;pointer-events:auto}
  .fab-nav{position:fixed;right:44px;bottom:44px;z-index:9998;width:220px;height:220px;pointer-events:none}
  .fab-item{
    position:absolute;width:46px;height:46px;border-radius:50%;
    display:grid;place-items:center;text-decoration:none;
    background:rgba(255,255,255,.92);color:#0a0a0a;font-size:12px;font-weight:600;
    box-shadow:0 6px 16px rgba(0,0,0,.2);
    transform:translate(0,0) scale(.6);opacity:0;transition:transform .25s,opacity .25s;pointer-events:auto
  }
  body.mobile-menu-open .fab-item{opacity:1;transform:scale(1)}
}


/* === FIX específico: Projetos & Parcerias (mobile) – v21 === */
@media (max-width: 767.98px) {
  /* padding lateral da seção */
  section[id*="parcer"], div[id*="parcer"],
  section[id*="projet"], div[id*="projet"] {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* empilhar cartões */
  section[id*="parcer"] .row,
  section[id*="parcer"] .grid,
  section[id*="parcer"] .cards,
  section[id*="projet"] .row,
  section[id*="projet"] .grid,
  section[id*="projet"] .cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* cartões 100% */
  section[id*="parcer"] .card,
  section[id*="projet"] .card {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* imagens fluidas */
  section[id*="parcer"] .card img,
  section[id*="projet"] .card img {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    border-radius: inherit;
  }
}



/* === FIX #2: Projetos & Parcerias (mobile) – v22 === */
@media (max-width: 767.98px) {
  /* alvo por ID ou CLASSE contendo 'projet', 'parcer', 'project', 'partner' */
  :is(section,div)[id*="projet" i],
  :is(section,div)[id*="parcer" i],
  :is(section,div)[class*="projet" i],
  :is(section,div)[class*="parcer" i],
  :is(section,div)[class*="project" i],
  :is(section,div)[class*="partner" i] {
    padding-left: 16px;
    padding-right: 16px;
  }

  :is(section,div)[id*="projet" i] :is(.row,[class*="row"],.grid,[class*="grid"],.cards,[class*="cards"]),
  :is(section,div)[id*="parcer" i] :is(.row,[class*="row"],.grid,[class*="grid"],.cards,[class*="cards"]),
  :is(section,div)[class*="projet" i] :is(.row,[class*="row"],.grid,[class*="grid"],.cards,[class*="cards"]),
  :is(section,div)[class*="parcer" i] :is(.row,[class*="row"],.grid,[class*="grid"],.cards,[class*="cards"]),
  :is(section,div)[class*="project" i] :is(.row,[class*="row"],.grid,[class*="grid"],.cards,[class*="cards"]),
  :is(section,div)[class*="partner" i] :is(.row,[class*="row"],.grid,[class*="grid"],.cards,[class*="cards"]) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* força itens a 100% e elimina min/max/width herdados */
  :is(section,div)[id*="projet" i] :is(.row,[class*="row"],.grid,[class*="grid"],.cards,[class*="cards"]) > *,
  :is(section,div)[id*="parcer" i] :is(.row,[class*="row"],.grid,[class*="grid"],.cards,[class*="cards"]) > *,
  :is(section,div)[class*="projet" i] :is(.row,[class*="row"],.grid,[class*="grid"],.cards,[class*="cards"]) > *,
  :is(section,div)[class*="parcer" i] :is(.row,[class*="row"],.grid,[class*="grid"],.cards,[class*="cards"]) > *,
  :is(section,div)[class*="project" i] :is(.row,[class*="row"],.grid,[class*="grid"],.cards,[class*="cards"]) > *,
  :is(section,div)[class*="partner" i] :is(.row,[class*="row"],.grid,[class*="grid"],.cards,[class*="cards"]) > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* imagens fluidas dentro dos cartões */
  :is(section,div)[id*="projet" i] :is(.card,[class*="card"]) img,
  :is(section,div)[id*="parcer" i] :is(.card,[class*="card"]) img,
  :is(section,div)[class*="projet" i] :is(.card,[class*="card"]) img,
  :is(section,div)[class*="parcer" i] :is(.card,[class*="card"]) img,
  :is(section,div)[class*="project" i] :is(.card,[class*="card"]) img,
  :is(section,div)[class*="partner" i] :is(.card,[class*="card"]) img {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  /* caso o container seja flex, garante coluna única */
  :is(section,div)[id*="projet" i] :is(.row,[class*="row"],.cards,[class*="cards"],.wrap,[class*="wrap"]),
  :is(section,div)[id*="parcer" i] :is(.row,[class*="row"],.cards,[class*="cards"],.wrap,[class*="wrap"]),
  :is(section,div)[class*="projet" i] :is(.row,[class*="row"],.cards,[class*="cards"],.wrap,[class*="wrap"]),
  :is(section,div)[class*="parcer" i] :is(.row,[class*="row"],.cards,[class*="cards"],.wrap,[class*="wrap"]),
  :is(section,div)[class*="project" i] :is(.row,[class*="row"],.cards,[class*="cards"],.wrap,[class*="wrap"]),
  :is(section,div)[class*="partner" i] :is(.row,[class*="row"],.cards,[class*="cards"],.wrap,[class*="wrap"]) {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
}



/* === FIX #3 (preciso): seção #parcerias (caps) – v23 === */
@media (max-width: 991.98px) {
  /* o container principal vira coluna (texto em cima, cards embaixo) */
  #parcerias .container.grid-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  /* caps em 2 colunas no tablet */
  #parcerias .parcerias-caps {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}
@media (max-width: 767.98px) {
  /* caps em 1 coluna no phone */
  #parcerias .parcerias-caps {
    grid-template-columns: 1fr !important;
  }
  #parcerias .parcerias-caps .cap {
    width: 100% !important;
    max-width: 100% !important;
  }
  #parcerias .parcerias-caps .cap img {
    width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: cover;
    border-radius: inherit;
  }
}



/* === FIX #4 (final): Projetos & Parcerias – força 2->1 colunas, sem scroll horizontal === */
@media (max-width: 991.98px){
  #parcerias .parcerias-caps{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* tablet: 2 colunas */
    gap: 16px !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    overflow-x: visible !important;
  }
}
@media (max-width: 767.98px){
  #parcerias .parcerias-caps{
    grid-template-columns: 1fr !important;   /* phone: 1 coluna */
  }
  #parcerias .parcerias-caps .cap{
    width: auto !important;
    max-width: none !important;
  }
  #parcerias .parcerias-caps .cap img{
    width: 100% !important;
    height: auto !important;
    display:block;
    object-fit: cover;
  }
}



/* === FIX #5: Aumentar contraste do bloco claro (contato/orçamento/cta) — mobile/tablet === */
@media (max-width: 991.98px){
  /* mira por id/classe comuns */
  :is(section,div,footer)[id*="contat" i],
  :is(section,div,footer)[id*="cotaç" i],
  :is(section,div,footer)[id*="cotac" i],
  :is(section,div,footer)[id*="orcament" i],
  :is(section,div,footer)[id*="orc" i],
  .section-cta, .cta-final, .cta-contact {
    background: linear-gradient(180deg, rgba(8,20,34,.92), rgba(8,20,34,.92)) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.35) !important;
    color: #ECF2FF !important;
    border-radius: 18px !important;
    padding: 22px 18px !important;
  }
  /* textos mais legíveis */
  :is(section,div,footer)[id*="contat" i] h1,
  :is(section,div,footer)[id*="contat" i] h2,
  :is(section,div,footer)[id*="contat" i] h3,
  :is(section,div,footer)[id*="cotaç" i] h1,
  :is(section,div,footer)[id*="cotaç" i] h2,
  :is(section,div,footer)[id*="cotaç" i] h3,
  :is(section,div,footer)[id*="cotac" i] h1,
  :is(section,div,footer)[id*="cotac" i] h2,
  :is(section,div,footer)[id*="cotac" i] h3,
  :is(section,div,footer)[id*="orcament" i] h1,
  :is(section,div,footer)[id*="orcament" i] h2,
  :is(section,div,footer)[id*="orcament" i] h3,
  :is(section,div,footer)[id*="orc" i] h1,
  :is(section,div,footer)[id*="orc" i] h2,
  :is(section,div,footer)[id*="orc" i] h3,
  .section-cta h1, .section-cta h2, .section-cta h3 {
    color: #F6FAFF !important;
    opacity: 1 !important;
  }
  :is(section,div,footer)[id*="contat" i] p,
  :is(section,div,footer)[id*="cotaç" i] p,
  :is(section,div,footer)[id*="cotac" i] p,
  :is(section,div,footer)[id*="orcament" i] p,
  :is(section,div,footer)[id*="orc" i] p,
  .section-cta p {
    color: #CFE0F5 !important;
    opacity: 1 !important;
  }
  /* links e botões legíveis */
  :is(section,div,footer)[id*="contat" i] a,
  :is(section,div,footer)[id*="cotaç" i] a,
  :is(section,div,footer)[id*="cotac" i] a,
  :is(section,div,footer)[id*="orcament" i] a,
  :is(section,div,footer)[id*="orc" i] a,
  .section-cta a {
    color: #EAF2FF !important;
  }
}



/* === FIX #6: barra de título, menu aberto e cards brancos (mobile/tablet) – v27 === */
@media (max-width: 991.98px){
  /* ---- Barra de título / headers pegando nomes comuns ---- */
  .title-bar, .page-title, .section-title, .section-header, .sticky-title,
  [class*="title-bar"], [class*="page-title"], [class*="section-title"] {
    background: linear-gradient(180deg, rgba(8,20,34,.96), rgba(8,20,34,.84)) !important;
    color: #F6FAFF !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .title-bar a, .page-title a, .section-title a, .section-header a,
  [class*="title-bar"] a, [class*="page-title"] a, [class*="section-title"] a {
    color: #EAF2FF !important;
  }

  /* ---- Menu aberto (dropdown) com contraste ---- */
  .navbar .menu, nav .menu, .menu-open .menu, .menu.is-open,
  .navbar .dropdown, nav .dropdown {
    background: rgba(8,20,34,.98) !important;
    color: #EAF2FF !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.45) !important;
  }
  .navbar .menu a, nav .menu a, .navbar .dropdown a, nav .dropdown a {
    color: #EAF2FF !important;
    font-weight: 600 !important;
  }
  .navbar .menu li, nav .menu li { border-color: rgba(255,255,255,.12) !important; }

  /* ---- Cards brancos (benefícios/diferenciais) com texto legível ---- */
  .card, .box, .feature, .benefit, .diferencial, [class*="card"], [class*="feature"], [class*="benefit"] {
    background: #FFFFFF !important;
  }
  .card h1, .card h2, .card h3, .card h4, .box h1, .box h2, .box h3, .box h4,
  .feature h2, .benefit h2, .diferencial h2,
  [class*="card"] h1, [class*="card"] h2, [class*="card"] h3,
  [class*="feature"] h2, [class*="benefit"] h2 {
    color: #0D1B2A !important;
    opacity: 1 !important;
  }
  .card p, .card li, .box p, .feature p, .benefit p, .diferencial p,
  [class*="card"] p, [class*="card"] li,
  [class*="feature"] p, [class*="benefit"] p {
    color: #223B53 !important;
    opacity: 1 !important;
  }
}



/* === FIX #7: Botão 'X' para fechar menu + overlay (apenas mobile/tablet) – v28 === */
@media (max-width: 991.98px){
  .mrl-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    opacity:0; pointer-events:none; transition:opacity .25s; z-index:9990;
  }
  .mrl-overlay.show{ opacity:1; pointer-events:auto; }

  .mrl-close{
    position:fixed; top:14px; right:16px; z-index:10050;
    width:44px; height:44px; display:none; place-items:center; cursor:pointer;
    border-radius:12px; border:1px solid rgba(255,255,255,.2);
    background:rgba(8,20,34,.92); box-shadow:0 8px 24px rgba(0,0,0,.3);
  }
  .mrl-close span, .mrl-close::before, .mrl-close::after{
    content:""; position:absolute; width:22px; height:2px; background:#fff;
  }
  .mrl-close::before{ transform: rotate(45deg); }
  .mrl-close::after { transform: rotate(-45deg); }

  /* Garantia de visibilidade do menu só quando aberto */
  .navbar .menu{ display:none; }
  .navbar.is-open .menu{ display:block; }
}



/* === FIX #8: Botão 'X' ultra visível (mobile) – v29 === */
@media (max-width: 991.98px){
  .mrl-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.55);
    opacity:0; pointer-events:none; transition:opacity .2s; z-index:99990;
  }
  .mrl-overlay.show{ opacity:1; pointer-events:auto; }

  .mrl-close{
    position:fixed; 
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    z-index:100000;
    width:56px; height:56px; display:none; place-items:center; cursor:pointer;
    border-radius:16px; border:2px solid rgba(255,255,255,.9);
    background:rgba(5,14,24,.98);
    box-shadow:0 10px 30px rgba(0,0,0,.5);
  }
  .mrl-close span, .mrl-close::before, .mrl-close::after{
    content:""; position:absolute; width:28px; height:2px; background:#fff;
  }
  .mrl-close::before{ transform: rotate(45deg); }
  .mrl-close::after { transform: rotate(-45deg); }
  body.menu-open .mrl-close{ display:grid !important; }
}



/* === FIX #9: Botão 'X' funcional (z-index/pointer-events) – v30 === */
@media (max-width: 991.98px){
  .mrl-overlay{ z-index: 99990; pointer-events:auto; }
  .mrl-close{ z-index: 100001; pointer-events:auto; }
}



/* === FIX #10: Hambúrguer mais escuro + clicável (mobile) – v31 === */
@media (max-width: 991.98px){
  .navbar .hamburger, .navbar .burger, header .hamburger, header .burger,
  .menu-toggle, .menu-btn, .menu-icon, [data-menu="toggle"]{
    position: relative; z-index: 100002; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* barras clássicas (spans/pseudo) ficam escuras */
  .hamburger span, .burger span, .menu-toggle span, .menu-btn span, .menu-icon span,
  .hamburger::before, .hamburger::after,
  .burger::before, .burger::after {
    background:#0D1B2A !important; opacity: 0.95 !important;
  }
  /* caso seja SVG */
  .hamburger svg, .menu-icon svg, .menu-toggle svg, .menu-btn svg { 
    fill:#0D1B2A !important; stroke:#0D1B2A !important;
    filter:none !important;
  }
  /* leve fundo para destacar no banner claro */
  .hamburger, .burger, .menu-toggle, .menu-btn, .menu-icon, [data-menu="toggle"]{
    background: rgba(255,255,255,.22); border-radius: 10px; padding: 4px 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
  }
}



/* === FIX #11: Hitbox de clique + hambúrguer mais escuro – v32 === */
@media (max-width: 991.98px){
  /* hitbox por cima do hambúrguer para garantir clique */
  .mrl-burger-hit{
    position:fixed; 
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    width:64px; height:64px;
    z-index:100003; background:transparent;
  }

  /* escurece barras do ícone (spans/pseudo e SVG) */
  header :is(.burger,.hamburger,.menu-toggle,.menu-btn,.menu-icon,[data-menu="toggle"],[aria-label*="menu" i]) :is(span,::before,::after){
    background:#0A1524 !important; opacity:1 !important;
  }
  header :is(.burger,.hamburger,.menu-toggle,.menu-btn,.menu-icon,[data-menu="toggle"],[aria-label*="menu" i]) svg,
  header :is(.burger,.hamburger,.menu-toggle,.menu-btn,.menu-icon,[data-menu="toggle"],[aria-label*="menu" i]) :is(path,rect,line){
    stroke:#0A1524 !important; fill:#0A1524 !important;
  }
  /* um leve fundo atrás do ícone para dar contraste */
  header :is(.burger,.hamburger,.menu-toggle,.menu-btn,.menu-icon,[data-menu="toggle"],[aria-label*="menu" i]){
    background: rgba(255,255,255,.18);
    border-radius: 12px; padding: 6px 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
  }
}



/* === FIX #12: Estado do hambúrguer após fechar + contraste – v33 === */
@media (max-width: 991.98px){
  /* hambúrguer SEMPRE visível quando menu fechado */
  header :is(.burger,.hamburger,.navbar-toggler,.menu-toggle,.menu-btn,.menu-icon,[data-menu="toggle"],[aria-label*="menu" i]){
    display:inline-flex !important; align-items:center; justify-content:center;
    opacity:1 !important; visibility:visible !important; z-index:100005 !important;
    -webkit-tap-highlight-color:transparent;
    background: rgba(255,255,255,.18);
    border-radius: 12px; padding: 6px 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
  }
  header :is(.burger,.hamburger,.navbar-toggler,.menu-toggle,.menu-btn,.menu-icon,[data-menu="toggle"],[aria-label*="menu" i]) :is(span,::before,::after){
    background:#0A1524 !important; opacity:1 !important;
  }
  header :is(.burger,.hamburger,.navbar-toggler,.menu-toggle,.menu-btn,.menu-icon,[data-menu="toggle"],[aria-label*="menu" i]) svg,
  header :is(.burger,.hamburger,.navbar-toggler,.menu-toggle,.menu-btn,.menu-icon,[data-menu="toggle"],[aria-label*="menu" i]) :is(path,rect,line){
    stroke:#0A1524 !important; fill:#0A1524 !important;
  }

  /* close e overlay só quando body.menu-open */
  .mrl-close{ display:none; }
  body.menu-open .mrl-close{ display:grid !important; }
  .mrl-overlay{ opacity:0; pointer-events:none; }
  .mrl-overlay.show{ opacity:1; pointer-events:auto; }
}


/* FORCE HIDE obsolete close/overlay */
.mrl-close,.mrl-overlay{display:none !important;}

/* === MOBILE DARK CARDS (<=991.98px) === */
@media (max-width: 991.98px){
  .card, .box, .feature, .benefit, .diferencial,
  #diferenciais .card, .diferenciais .card,
  [class*="card"], [class*="feature"], [class*="benefit"]{
    background: var(--card, #0f172a) !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 8px 22px rgba(2,6,23,.28) !important;
    color: var(--ink, #e5e7eb) !important;
  }
  .card h1, .card h2, .card h3, .card h4,
  .box h1, .box h2, .box h3, .box h4,
  .feature h2, .benefit h2, .diferencial h2,
  #diferenciais .card h2, .diferenciais .card h2,
  [class*="card"] h1, [class*="card"] h2, [class*="card"] h3,
  [class*="feature"] h2, [class*="benefit"] h2{
    color: var(--ink, #e5e7eb) !important;
  }
  .card p, .card li, .box p, .feature p, .benefit p,
  [class*="card"] p, [class*="card"] li,
  [class*="feature"] p, [class*="benefit"] li{
    color: var(--muted, #b6c2d9) !important;
  }

  /* Botões iguais ao desktop */
  .btn--primary.btn-pill{
    background:
      linear-gradient(#0b1425,#0b1425) padding-box,
      linear-gradient(135deg, var(--brand-blue, #0f4c81), #6aa6ff) border-box !important;
    color:#fff !important;
  }
  .btn--primary.btn-pill .btn-cap{
    background: linear-gradient(135deg, #00d0ff, #7a5bff) !important;
  }
  .btn--whats.btn-pill{
    background:
      linear-gradient(#0b1425,#0b1425) padding-box,
      linear-gradient(135deg, var(--brand-orange, #f36c3d), var(--brand-orange-2, #ff8a4c)) border-box !important;
    color:#fff !important;
  }
  .btn--whats.btn-pill .btn-cap{
    background: linear-gradient(135deg, var(--brand-orange, #f36c3d), var(--brand-orange-2, #ff8a4c)) !important;
  }
}