:root{
--orange:#ff9d01;
--orange-2:#ffb642;
--orange-3:#ff7a00;
--orange-glow: rgba(255,157,1,.45);
--dark:#232323;
--border:#e9e9e9;
--check:#25B65E;
}

/* ——— Fonte Syne (força sobre Bootstrap) ——— */
#planos-e-precos, #planos-e-precos *{
font-family:'Syne', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Título da seção */
#planos-e-precos .titulo{
font-size:30px !important;
font-weight:700 !important;
margin:0 !important;
color:var(--dark) !important;
letter-spacing:.2px !important;
}

/* ——— CARD base (alto) ——— */
.pricing-card{
--cardRadius:16px;
border:1px solid var(--border) !important;
border-radius:var(--cardRadius) !important;
background:#fff !important;
padding:30px 22px 22px !important;
box-shadow:0 10px 26px rgba(0,0,0,.06) !important;
position:relative !important;
display:flex !important; flex-direction:column !important;
overflow:hidden !important;
transition:transform .28s cubic-bezier(.21,1,.21,1),
        box-shadow .28s ease, border-color .28s ease, background-color .28s ease !important;
min-height:640px !important;
}

/* Faixa superior */
.pricing-card::before{
content:"";
position:absolute;left:0;top:0;right:0;height:5px !important;
background:linear-gradient(90deg,var(--orange),var(--orange-2) 60%,var(--orange-3)) !important;
opacity:0;transition:opacity .28s ease !important;
}

/* Hover (cards comuns) */
.pricing-card:not(.sob-medida):hover{
transform:translateY(-10px) !important;
border-color:#ffd9a6 !important;
box-shadow:0 18px 40px rgba(0,0,0,.12), 0 0 0 2px rgba(255,157,1,.12) inset !important;
}
.pricing-card:not(.sob-medida):hover::before{opacity:1 !important;}

/* ——— Cabeçalho ——— */
.pricing-card__head{
display:grid !important;
grid-template-columns: 1fr auto !important;
gap:6px 12px !important;
align-items:start !important;
margin-bottom:10px !important;
}
.pricing-card__meta .pricing-card__title{display:none !important;}

.pricing-card__title{
grid-column:1 !important; grid-row:1 !important;
font-size:22px !important; font-weight:700 !important;
margin:0 !important; color:var(--dark) !important;
}
.pricing-card__title small{
display:block !important; font-size:.70em !important; font-weight:600 !important;
color:#666 !important; margin-top:3px !important;
}

/* Usuários (chip) */
.pricing-card__meta{
grid-column:1 !important; grid-row:2 !important;
display:flex !important; align-items:center !important; gap:10px !important;
margin:2px 0 0 !important;
}
.users-chip{
--chip-icon:18px;
display:inline-flex !important; align-items:center !important; gap:8px !important;
padding:6px 10px !important; border-radius:999px !important;
background:#FFF1DB !important; border:1px solid #ffd39a !important;
color:var(--orange-3) !important;   /* <<< laranja nos cards comuns */
font-weight:600 !important; font-size:14.5px !important; line-height:1 !important; letter-spacing:.2px !important;
box-shadow:0 1px 0 rgba(0,0,0,.02) !important;
margin-top:5px !important;
}
.users-chip img{
width:var(--chip-icon) !important; height:var(--chip-icon) !important;
flex:0 0 var(--chip-icon) !important;
margin-left:4px !important; display:inline-block !important;
object-fit:contain !important; vertical-align:middle !important;
filter: var(--chip-filter, none) !important;
}
/* deixa os ícones LARANJA nos cards comuns (melhor com ícone escuro/monocromático) */
.pricing-card:not(.sob-medida) .users-chip img{
--chip-filter: invert(53%) sepia(98%) saturate(1150%) hue-rotate(358deg) brightness(101%) contrast(103%);
}
/* chip e ícone BRANCOS no Sob Medida */
.pricing-card.sob-medida .users-chip{
background:rgba(255,255,255,.16) !important;
border-color:rgba(255,255,255,.35) !important;
color:#fff !important;
}
.pricing-card.sob-medida .users-chip img{
--chip-filter: invert(100%) brightness(110%) saturate(0%);
}

/* Preço */
.pricing-card__price{
grid-column:2 !important; grid-row:1 / span 2 !important;
justify-self:end !important; align-self:center !important; text-align:right !important;
}
.pricing-card__price .value{font-size:26px !important; font-weight:700 !important; color:var(--dark) !important;}
.pricing-card__price .period{font-size:20px !important; color:#666 !important; margin-left:4px !important}

/* Hovers comuns */
.pricing-card:not(.sob-medida):hover .pricing-card__title,
.pricing-card:not(.sob-medida):hover .pricing-card__price .value{color:var(--orange) !important}

/* Subtítulo */
.pricing-card__subtitle{font-size:16px !important; color:#000 !important; margin:8px 0 14px !important}

/* Features */
.pricing-card__features{
list-style:none !important; padding:0 !important; margin:0 0 20px !important;
display:grid !important; gap:10px !important;
}
.pricing-card__features li{
display:flex !important; gap:10px !important; align-items:center !important;
font-size: 20px !important; color:#262626 !important; transition:color .2s ease !important;
}
.pricing-card__features .ico{
display:inline-flex !important; width:20px !important; height:20px !important; border-radius:50% !important;
background:#FFF3E8 !important; color:var(--orange-3) !important;
align-items:center !important; justify-content:center !important; flex:0 0 20px !important;
transition:transform .2s ease, background .2s ease, color .2s ease !important;
}
.pricing-card__features .ico svg{width:12px !important; height:9px !important}
.pricing-card__features li:hover{color:#000 !important}
.pricing-card__features li:hover .ico{transform:scale(1.1) rotate(-6deg) !important; background:#FFE3BE !important; color:var(--orange) !important}

/* CTA */
.pricing-card__cta{margin-top:auto !important; display:flex !important; flex-direction:column !important; gap:12px !important}
.btn-cta{
position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
text-transform:none !important; border:0 !important; border-radius:12px !important; padding:14px 18px !important;
font-weight:600 !important; letter-spacing:.3px !important; line-height:1 !important;
background:linear-gradient(135deg,var(--orange) 0%, var(--orange-2) 60%, var(--orange-3) 100%) !important;
color:#fff !important;
box-shadow:0 3px 0 rgba(0,0,0,.15), 0 10px 22px rgba(255,157,1,.25) !important;
transition:transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
overflow:hidden !important;
}
.btn-cta::after{
content:"" !important; position:absolute !important; inset:-2px !important;
background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%) !important;
transform:translateX(-120%) !important; transition:transform .6s cubic-bezier(.22,.61,.36,1) !important;
pointer-events:none !important;
}
.btn-cta:hover{transform:translateY(-2px) !important; box-shadow:0 6px 0 rgba(0,0,0,.15), 0 14px 32px rgba(255,157,1,.35) !important; filter:saturate(1.05) !important}
.btn-cta:hover::after{transform:translateX(120%) !important}
.btn-cta:active{transform:translateY(0) !important; box-shadow:0 2px 0 rgba(0,0,0,.18) !important}
.btn-cta:focus-visible{outline:none !important; box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--orange-2) !important}

/* Link comparar */
.compare-link{
font-size:13px !important; text-decoration:none !important; color:#666 !important; align-self:center !important; position:relative !important;
}
.compare-link::after{
content:"" !important; position:absolute !important; left:0 !important; right:0 !important; bottom:-2px !important; height:2px !important;
background:linear-gradient(90deg,var(--orange),#fff) !important;
transform:scaleX(0) !important; transform-origin:left !important; transition:transform .25s ease !important;
}
.compare-link:hover{color:#111 !important}
.compare-link:hover::after{transform:scaleX(1) !important}

/* Botão geral "Compare todos os módulos" */
.btn.btn-compare-all{
background:linear-gradient(135deg,var(--orange),var(--orange-3)) !important;
color:#fff !important; border-radius:28px !important;
font-weight:600 !important; padding:13px 22px !important; border:0 !important;
box-shadow:0 10px 24px rgba(255,157,1,.3) !important;
transition:transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.btn.btn-compare-all:hover{transform:translateY(-2px) !important; box-shadow:0 16px 36px rgba(255,157,1,.38) !important; filter:saturate(1.06) !important}

/* ===== Alinhamento global ===== */
#planos-e-precos .row{ align-items:stretch !important; }
#planos-e-precos .pricing-card{ height:100% !important; }
.pricing-card__cta .btn-cta{ width:100% !important; }
@media (min-width: 768px){
.pricing-card__features{ min-height: 220px !important; }
}

/* ===== RIBBON (Mais vendido) com animação ===== */
.pricing-card.sob-medida .ribbon{
position:absolute !important; top:12px !important; right:12px !important;
background:#000 !important; color:#fff!important;
padding:6px 12px !important; border-radius:999px !important;
border:1px solid #000 !important;
font-size:15px !important; font-weight:600 !important; letter-spacing:.3px !important; line-height:1 !important;
box-shadow:0 2px 8px rgba(0,0,0,.08) !important;
overflow:hidden !important;
animation: ribbonPulse 2.6s ease-in-out infinite !important;
}
.pricing-card.sob-medida .ribbon::after{ /* brilho varrendo */
content:""; position:absolute; inset:-40% -60%;
background:linear-gradient(120deg, transparent 45%, rgba(255,157,1,.25) 50%, transparent 55%);
transform:translateX(-120%);
animation: ribbonShine 3.2s ease-in-out infinite;
}

/* ===== CARD Sob Medida (base laranja + textos brancos) ===== */
.pricing-card.sob-medida{
background:var(--orange) !important;
border-color:var(--orange) !important;
color:#fff !important;
box-shadow:0 12px 34px var(--orange-glow) !important;
animation: floaty 6s ease-in-out infinite, glowPulse 3.5s ease-in-out infinite !important;
}
/* barra superior clara no sob-medida */
.pricing-card.sob-medida::before{
background:linear-gradient(90deg,#fff,rgba(255,255,255,.85) 60%,#fff) !important;
opacity:.12;
}
/* Hover do Sob Medida (subidinha + glow) */
.pricing-card.sob-medida:hover{
transform:translateY(-10px) scale(1.01) !important;
box-shadow:0 20px 44px rgba(255,157,1,.55), 0 0 0 2px rgba(255,255,255,.18) inset !important;
}
.pricing-card.sob-medida:hover::before{ opacity:.35 !important; }

/* Aura */
.pricing-card.sob-medida::after{
content:"" !important; position:absolute !important; inset:-30% !important;
background:radial-gradient(60% 60% at 60% 0%, rgba(255,197,98,.35), transparent 60%) !important;
pointer-events:none !important; filter:blur(16px) !important;
}

/* Textos em branco no Sob Medida */
.pricing-card.sob-medida .pricing-card__title,
.pricing-card.sob-medida .pricing-card__title small,
.pricing-card.sob-medida .pricing-card__subtitle,
.pricing-card.sob-medida .pricing-card__price .value,
.pricing-card.sob-medida .pricing-card__price .period,
.pricing-card.sob-medida .compare-link{ color:#fff !important; }

/* Ícones/itens no Sob Medida */
.pricing-card.sob-medida .pricing-card__features .ico{ background:rgba(255,255,255,.25) !important; color:#fff !important }
.pricing-card.sob-medida .pricing-card__features li{ color:#fff !important; }
.pricing-card.sob-medida .pricing-card__features li:hover{ color:#fff !important; }

/* Botão do Sob Medida: fundo branco e TEXTO PRETO */
.pricing-card.sob-medida .btn-cta{
background:#fff !important; color:#000 !important;
box-shadow:0 8px 24px rgba(0,0,0,.15), 0 8px 30px rgba(255,255,255,.28) !important;
}
.pricing-card.sob-medida .btn-cta:hover{
box-shadow:0 10px 26px rgba(0,0,0,.18), 0 12px 34px rgba(255,255,255,.34) !important;
}

/* ——— Responsivo ——— */
@media (max-width: 991.98px){
.pricing-card{min-height:600px !important; padding:26px 20px 20px !important;}
}
@media (max-width: 767.98px){
.pricing-card__head{grid-template-columns:1fr !important}
.pricing-card__price{grid-column:1 !important; grid-row:auto !important; justify-self:start !important; margin-top:6px !important}
.pricing-card.destaque{transform:none !important}
.pricing-card{min-height:auto !important}
.users-chip{ --chip-icon:16px; }  /* menor no mobile */
}

/* ===== Animações ===== */
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@keyframes glowPulse{
0%,100%{ box-shadow:0 12px 34px var(--orange-glow) }
50%{ box-shadow:0 16px 44px rgba(255,157,1,.65) }
}
@keyframes ribbonShine{
0%{ transform:translateX(-120%) }
50%{ transform:translateX(120%) }
100%{ transform:translateX(120%) }
}
@keyframes ribbonPulse{
0%,100%{ transform:scale(1); box-shadow:0 2px 8px rgba(0,0,0,.08) }
50%{ transform:scale(1.05); box-shadow:0 6px 16px rgba(0,0,0,.12) }
}


/* ===== Botão central: setinha animada ===== */
.btn.btn-compare-all .chevron{
display:inline-block; width:12px; height:12px; margin-left:8px;
border-right:2px solid #fff; border-bottom:2px solid #fff;
transform:rotate(45deg) translateY(-1px); transition:transform .25s ease;
}
.btn.btn-compare-all[aria-expanded="true"] .chevron{ transform:rotate(-135deg) }

/* ============ CLEAN THEME (comparativo) ============ */
:root{
--cmp-bg:#ffffff;
--cmp-border:#e9edf2;
--cmp-soft:#f7f9fc;
--cmp-head:#0f172a;
--cmp-sub:#475569;
--cmp-yes:#16a34a;
--cmp-yes-bg:#eaf7ef;
--cmp-no:#ef4444;
--cmp-no-bg:#fdeef0;
--cmp-accent:#ff9d01;
--cmp-accent-soft:#fff4e5;
--cmp-sticky-top: 84px; /* ajuste se seu header mudar de altura */
}

.comparativo{ scroll-margin-top: 90px; }
/* o card não deve “cortar” a sticky nav */
.comp-card{
border:1px solid var(--cmp-border);
border-radius:16px;
background:var(--cmp-bg);
box-shadow:0 10px 30px rgba(16,24,40,.06);
overflow:visible; /* <= era hidden, isso pode atrapalhar sticky */
margin-top:22px;
}
.comp-head{ padding:18px 20px; background:#fff; border-bottom:1px solid var(--cmp-border); }
.comp-head h3{ margin:0; font-weight:700; font-size:22px; color:var(--cmp-head) }
.comp-head p{ margin:4px 0 0; color:var(--cmp-sub); font-size:14px }

/* garante que a coluna da esquerda grude */
.comp-body{
display:grid;
grid-template-columns:260px 1fr;
gap:16px;
padding:14px;
align-items:start; /* <= importante p/ sticky */
}
@media (max-width: 991.98px){ .comp-body{ grid-template-columns:1fr; gap:12px; } }

/* ===== Navegação lateral ===== */
.comp-nav{
position:sticky;
top:var(--cmp-sticky-top);
z-index:5; /* por cima da tabela */
border:1px solid var(--cmp-border);
border-radius:12px;
background:#fff;
padding:10px;
max-height:calc(100vh - (var(--cmp-sticky-top) + 36px));
overflow:auto;
box-shadow:0 4px 16px rgba(16,24,40,.04);
}

/* quando “grudar”, dá um feedback visual */
.comp-nav.is-sticky{
box-shadow:0 8px 24px rgba(16,24,40,.08);
}

.comp-nav__inner{ display:flex; flex-direction:column; gap:8px; }
.comp-nav__link{
display:block; text-decoration:none; font-weight:600; font-size:14px; line-height:1.2;
color:#1f2937; padding:10px 12px; border-radius:10px; border:1px solid transparent;
transition:.2s ease; background:#fff;
}
.comp-nav__link:hover{ border-color:var(--cmp-border); background:var(--cmp-soft); }
.comp-nav__link.active{
color:#7a3a00; background:var(--cmp-accent-soft); border-color:#ffd9a6;
box-shadow:inset 0 0 0 1px rgba(255,157,1,.25);
}

/* Mobile: vira barra de chips horizontal sticky */
@media (max-width: 991.98px){
.comp-nav{
position:sticky; top:70px; padding:8px; border-radius:12px; max-height:unset;
overflow:visible; border:1px solid var(--cmp-border); background:#fff;
}
.comp-nav__inner{ flex-direction:row; gap:8px; overflow:auto; -webkit-overflow-scrolling:touch; }
.comp-nav__inner::-webkit-scrollbar{ height:8px }
.comp-nav__inner::-webkit-scrollbar-thumb{ background:#e6eef7; border-radius:8px }
.comp-nav__link{ white-space:nowrap; }
}

/* ===== Tabela ===== */
.table-scroll{ overflow:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--cmp-border); border-radius:12px; background:#fff; }
.table-scroll::-webkit-scrollbar{ height:10px }
.table-scroll::-webkit-scrollbar-thumb{ background:#e6eef7; border-radius:8px }

.table-compare{ width:100%; border-collapse:separate; border-spacing:0; }
.table-compare thead th{
position:sticky; top:0; z-index:3; background:#fff; color:var(--cmp-head); font-weight:700;
text-align:center; padding:14px 12px; border-bottom:1px solid var(--cmp-border);
}
.table-compare thead th.col-feature{ text-align:left; left:0; z-index:4; }

.table-compare tbody td,
.table-compare tbody th{ padding:12px 14px; border-bottom:1px solid var(--cmp-border); vertical-align:middle; }

/* sticky primeira coluna */
.table-compare thead .col-feature,
.table-compare tbody td:first-child{
position:sticky; left:0; background:linear-gradient(90deg,#fff 85%, rgba(255,255,255,.6));
border-right:1px solid var(--cmp-border); z-index:2;
}

/* grupos */
.table-compare .group{ scroll-margin-top: 80px; }
.table-compare .group th{
background:var(--cmp-soft); color:#111827; font-size:14px; font-weight:700;
padding:12px 14px; border-top:1px solid var(--cmp-border); border-bottom-color:var(--cmp-border);
}
.table-compare .group th span{
position:relative; display:inline-block; padding-left:12px;
}
.table-compare .group th span::before{
content:""; position:absolute; left:0; top:50%; width:6px; height:6px; border-radius:999px;
transform:translateY(-50%); background:var(--cmp-accent);
}

/* cores dos planos no thead */
.table-compare .col-plan.essencial{ color:#000 }
.table-compare .col-plan.expansao{ color:#000 }
.table-compare .col-plan.sob-medida{ color: var(--orange) }

.table-compare td.text{ text-align:center; font-weight:700; color:#111827; font-size: 15px;}
.table-compare td:nth-child(n+2){ text-align:center }

/* ✓/✗ clean */
.table-compare .mark{
display:inline-flex; width:20px; height:20px; border-radius:999px; align-items:center; justify-content:center;
font-size:0;
}
.table-compare td.yes .mark{ background:var(--cmp-yes-bg); color:var(--cmp-yes); border:1px solid rgba(22,163,74,.18); }
.table-compare td.no .mark{ background:var(--cmp-no-bg); color:var(--cmp-no); border:1px solid rgba(239,68,68,.18); }
.table-compare td.yes .mark svg{ width:12px; height:9px }
.table-compare td.no .mark svg{ width:11px; height:11px }

/* hover suave */
.table-compare tbody tr:hover td,
.table-compare tbody tr:hover th{ background:#fcfdfd }

/* rodapé do comparativo */
.comp-footer{ padding:14px; text-align:center; background:#fff; border-top:1px solid var(--cmp-border); }
.comp-footer .btn-close-comp{ border-radius:10px; font-weight:600; border:1px solid var(--cmp-border); box-shadow:0 6px 18px rgba(0,0,0,.04) }
/* ——— destaque do grupo clicado/rolado ——— */
:root{
--flash-duration: 1800ms; /* ajuste fino da duração */
}

/* fundo + “anel” de glow */
@keyframes compRowFlashStrong {
0%   { background: var(--cmp-accent-soft); box-shadow: inset 0 0 0 3px rgba(255,157,1,.45), 0 0 0 10px rgba(255,157,1,.16); }
35%  { background: #fff8eb;               box-shadow: inset 0 0 0 2px rgba(255,157,1,.35), 0 0 0 6px  rgba(255,157,1,.10); }
70%  { background: #fff;                  box-shadow: inset 0 0 0 1px rgba(255,157,1,.22), 0 0 0 3px  rgba(255,157,1,.06); }
100% { background: var(--cmp-soft);       box-shadow: inset 0 0 0 0  rgba(255,157,1,0),   0 0 0 0    rgba(255,157,1,0); }
}

/* sublinhado que “cresce” por baixo do título do grupo */
@keyframes flashUnderline {
0%   { opacity: 0; transform: scaleX(0); }
20%  { opacity: .95; transform: scaleX(1); }
80%  { opacity: .25; transform: scaleX(1); }
100% { opacity: 0; transform: scaleX(.9); }
}

/* cor do texto do título pulsa levemente */
@keyframes compTextFlashStrong {
0%,30% { color: var(--cmp-accent); }
100%   { color: var(--cmp-head); }
}

/* aplica as animações quando .flash estiver no <tr class="group"> */
.table-compare .group.flash th{
position: relative;
animation: compRowFlashStrong var(--flash-duration) ease forwards;
}
.table-compare .group.flash th span{
animation: compTextFlashStrong var(--flash-duration) ease forwards;
}
.table-compare .group.flash th::after{
content:"";
position:absolute; left:8px; right:8px; bottom:6px; height:3px;
border-radius:999px;
background: linear-gradient(90deg, var(--cmp-accent), transparent);
opacity:0; transform-origin:left;
animation: flashUnderline var(--flash-duration) cubic-bezier(.2,.9,.2,1) forwards;
}

/* para forçar rolagem interna da tabela (opcional mas recomendado
p/ a barra lateral sempre permanecer visível) */
.table-scroll{
max-height:72vh; /* ajusta como preferir */
overflow:auto;
}

/* mobile continua em chips horizontais e sticky */
@media (max-width: 991.98px){
    :root{ --cmp-sticky-top: 64px; } /* topo menor no mobile */
    .comp-body{ grid-template-columns:1fr; }
    .comp-nav {
        position:sticky;
        top:var(--cmp-sticky-top);
        max-height:unset;
        overflow:visible;
    }
    .comp-nav__inner{ flex-direction:column; gap:8px; overflow:auto; -webkit-overflow-scrolling:touch; }
}

/* ===================== TABELA EMPILHADA NO MOBILE ===================== */
@media (max-width: 767.98px){

  /* desliga o scroll interno; deixa a nav funcionar em "page mode" */
  .table-scroll{
    max-height:none !important;
    overflow:visible !important;
    border-radius:0 !important; /* opcional */
  }

  /* esconde o thead no mobile */
  .table-compare thead{ display:none !important; }

  /* remove stickies e gradiente da primeira coluna */
  .table-compare thead .col-feature,
  .table-compare tbody td:first-child{
    position:static !important;
    left:auto !important;
    z-index:auto !important;
    background:#fff !important;
    border-right:0 !important;
  }

  /* todo mundo em bloco */
  .table-compare,
  .table-compare tbody,
  .table-compare tr,
  .table-compare td,
  .table-compare th{
    display:block;
    width:100% !important;
  }

  /* cada linha (recurso) vira um “cartão” */
  .table-compare tbody tr{
    margin:12px 0;
    border:1px solid var(--cmp-border);
    border-radius:12px;
    background:#fff;
    box-shadow:0 4px 12px rgba(16,24,40,.04);
    overflow:hidden;
  }

  /* linhas de GRUPO continuam como separadores */
  .table-compare tbody tr.group{
    border:none;
    box-shadow:none;
    margin:18px 0 8px;
    background:transparent;
  }
  .table-compare tbody tr.group th{
    border:1px solid var(--cmp-border);
    border-radius:10px;
    padding:12px 14px;
    background:var(--cmp-soft);
  }

  /* “título” do cartão = primeira célula (recurso) */
  .table-compare tbody td:first-child,
  .table-compare tbody th.col-feature{
    font-weight:700;
    color:var(--cmp-head);
    padding:12px 14px;
    border-bottom:1px dashed var(--cmp-border);
  }

  /* as demais células mostram um rótulo (plano) + valor/ícone */
  .table-compare tbody td{
    padding:12px 14px;
    border:0;
  }
  .table-compare tbody td[data-label]{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .table-compare tbody td[data-label]::before{
    content: attr(data-label);
    font-weight:600;
    color:var(--cmp-sub);
  }

  /* ajustes visuais dos ícones ✓/✗ e textos */
  .table-compare .mark{ flex:0 0 auto; }
  .table-compare td.text{ justify-content:space-between; }

  /* remove o hover de linha (não faz sentido nos cartões) */
  .table-compare tbody tr:hover td,
  .table-compare tbody tr:hover th{ background:transparent; }
}

/* ===== esconder sidebar no mobile (mantém só o offcanvas) ===== */
@media (max-width: 991.98px){
  .comp-nav{ display:none !important; }


}

/* ===== faixa fixa dos planos (mobile) ===== */
.plans-strip{
  position: sticky;
  top: var(--cmp-sticky-top);
  z-index: 7;
  background:#fff;
  border:1px solid var(--cmp-border);
  border-radius:12px;
  padding:8px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:0 6px 18px rgba(16,24,40,.06);
}

/* hambúrguer dentro da faixa (não é flutuante) */
.plans-strip .comp-nav-toggle{
  position: static !important;
  border-radius:999px;
  padding:8px 12px;
  background:#fff;
  border:1px solid var(--cmp-border);
  box-shadow:none;
  font-weight:700;
  color:#1f2937;
}
.plans-strip .comp-hamburger{
  display:inline-block; width:18px; height:12px; margin-left:8px; position:relative;
  border-top:2px solid currentColor; border-bottom:2px solid currentColor;
}
.plans-strip .comp-hamburger::before{
  content:""; position:absolute; left:0; right:0; top:5px; border-top:2px solid currentColor;
}

/* scroller dos nomes dos planos (sincroniza com a tabela) */
.plans-strip__scroller{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  flex:1 1 auto;
  padding-bottom:2px; /* evita esconder a barra no iOS */
}
.plans-strip__row{ display:flex; gap:8px; min-width:max-content; }
.plans-strip__cell{
  flex:0 0 140px; /* será substituído por JS para bater com o <th> */
  text-align:center;
  font-weight:700;
  color:var(--cmp-head);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--cmp-border);
  background:#fff;
  white-space:nowrap;
}

/* ===== Barra fixa do plano ativo (mobile) ===== */
.plan-picker{
  position: sticky;
  top: var(--cmp-sticky-top);
  z-index: 8;
  display:flex; align-items:center; gap:10px;
  background:#fff;
  border:1px solid var(--cmp-border);
  border-radius:12px;
  padding:8px 10px;
  box-shadow:0 6px 18px rgba(16,24,40,.06);
}
.plan-picker__mods{
  border:1px solid var(--cmp-border);
  background:#fff; border-radius:999px; padding:8px 12px; font-weight:700; color:#1f2937;
}
.comp-hamburger{ display:inline-block; width:18px; height:12px; margin-left:8px; position:relative;
  border-top:2px solid currentColor; border-bottom:2px solid currentColor;
}
.comp-hamburger::before{ content:""; position:absolute; left:0; right:0; top:5px; border-top:2px solid currentColor; }

.plan-picker__current{ flex:1 1 auto; min-width:0; text-align:center; }
.plan-picker__current .pp-title{ font-weight:800; color:var(--cmp-head); display:block; }
.plan-picker__current .pp-meta{ color:var(--cmp-sub); display:block; }

.plan-picker__nav{
  border:1px solid var(--cmp-border);
  background:#fff; border-radius:10px; width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1;
}

/* ===== Mobile: mostrar só a coluna do plano ATIVO ===== */
@media (max-width: 991.98px){

  /* sempre visíveis: coluna de recurso */
  #comparativo-planos .table-compare th.col-feature,
  #comparativo-planos .table-compare td.feature-cell{
    display:table-cell !important;
  }

  /* por padrão esconda TODAS as colunas de plano... */
  #comparativo-planos .table-compare th.col-plan,
  #comparativo-planos .table-compare td.plan-essencial,
  #comparativo-planos .table-compare td.plan-expansao,
  #comparativo-planos .table-compare td.plan-sob-medida,
  #comparativo-planos .table-compare td.plan-quarto{
    display:none !important;
  }

  .pp-info {
    flex-direction: row;
    display: flex;
    gap: 10px;
  }

  .pp-text {
    text-align: center;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between;
  }

  /* ...e reexiba SOMENTE a que está ativa */
  #comparativo-planos .table-compare[data-active="essencial"]  th.col-plan.essencial,
  #comparativo-planos .table-compare[data-active="essencial"]  td.plan-essencial{ display:table-cell !important; }

  #comparativo-planos .table-compare[data-active="expansao"]   th.col-plan.expansao,
  #comparativo-planos .table-compare[data-active="expansao"]   td.plan-expansao{  display:table-cell !important; }

  #comparativo-planos .table-compare[data-active="sob-medida"] th.col-plan.sob-medida,
  #comparativo-planos .table-compare[data-active="sob-medida"] td.plan-sob-medida{ display:table-cell !important; }
  
  #comparativo-planos .table-compare[data-active="quarto"] th.col-plan.quarto,
  #comparativo-planos .table-compare[data-active="quarto"] td.plan-quarto{ display:table-cell !important; }
}


/* ===== Paleta por plano ===== */
:root{
  --plan-quarto: #10b981;     /* verde */
  --plan-essencial: #2563eb;   /* azul */
  --plan-expansao:  #ff7a00;   /* laranja (Fiscal) */
  --plan-sob-medida:#7c3aed;   /* roxo */
}

/* a seção inteira assume a cor do plano ativo (reusa var --cmp-accent já usada no comparativo) */
#comparativo-planos[data-plan="essencial"]  { --cmp-accent: var(--plan-essencial); }
#comparativo-planos[data-plan="expansao"]   { --cmp-accent: var(--plan-expansao); }
#comparativo-planos[data-plan="sob-medida"] { --cmp-accent: var(--plan-sob-medida); }
#comparativo-planos[data-plan="quarto"] { --cmp-accent: var(--plan-quarto); }
/* =========================
   MOBILE-ONLY THEME & NAV
   (vale só até 991.98px)
   ========================= */
@media (max-width: 991.98px){

  /* Paleta por plano (mobile): muda o tema conforme o plano ativo */
  #comparativo-planos[data-plan="essencial"]  { --cmp-accent: var(--plan-essencial); }
  #comparativo-planos[data-plan="expansao"]   { --cmp-accent: var(--plan-expansao); }
  #comparativo-planos[data-plan="sob-medida"] { --cmp-accent: var(--plan-sob-medida); }
  #comparativo-planos[data-plan="quarto"] { --cmp-accent: var(--plan-quarto); }

  /* ----- Plan Picker (tema dinâmico no mobile) ----- */
  #planPicker{
    --pp-accent: var(--plan-expansao); /* fallback */

    background:
      radial-gradient(120% 140% at 100% 0,
        color-mix(in srgb, var(--pp-accent) 10%, #fff) 0%, #fff 60%) !important;
    border:1px solid color-mix(in srgb, var(--pp-accent) 30%, var(--cmp-border)) !important;
    box-shadow:0 12px 30px color-mix(in srgb, var(--pp-accent) 18%, transparent) !important;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  }
  #planPicker[data-active="essencial"]  { --pp-accent: var(--plan-essencial); }
  #planPicker[data-active="expansao"]   { --pp-accent: var(--plan-expansao); }
  #planPicker[data-active="quarto"] { --pp-accent: var(--plan-quarto); }
  #planPicker[data-active="sob-medida"] { --pp-accent: var(--plan-sob-medida); }

  #planPicker .pp-title{ color:var(--pp-accent) !important; }
  #planPicker .pp-meta{
    color: color-mix(in srgb, var(--pp-accent) 60%, #475569) !important;
  }

  /* Botão “Módulos” com a cor do tema */
  #planPicker .plan-picker__mods{
    border:1px solid color-mix(in srgb, var(--pp-accent) 35%, var(--cmp-border)) !important;
    color: var(--pp-accent) !important;
    box-shadow:0 6px 16px color-mix(in srgb, var(--pp-accent) 12%, transparent) !important;
    transition:.2s ease;
  }
  #planPicker .plan-picker__mods:hover{
    background: color-mix(in srgb, var(--pp-accent) 10%, #fff) !important;
    transform: translateY(-1px);
  }

  /* ----- Setas laterais (apenas mobile) ----- */
  #planPicker .plan-prev,
  #planPicker .plan-next{
    position:relative;
    font-size:0; /* esconde ‹ › do texto, mantém acessibilidade */
    color: var(--pp-accent);
    border:1px solid color-mix(in srgb, var(--pp-accent) 35%, var(--cmp-border));
    background:#fff;
    border-radius:999px;
    width:40px; height:40px;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 6px 16px color-mix(in srgb, var(--pp-accent) 18%, transparent);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  }
  #planPicker .plan-prev::before,
  #planPicker .plan-next::before{
    content:""; display:block; width:12px; height:12px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  }
  /* esquerda / direita */
  #planPicker .plan-prev::before{  transform: rotate(135deg);  margin-right:1px; }
  #planPicker .plan-next::before{  transform: rotate(-45deg);  margin-left:1px; }
  #planPicker .plan-prev:hover,
  #planPicker .plan-next:hover{
    background: color-mix(in srgb, var(--pp-accent) 8%, #fff);
    transform: translateY(-1px);
  }

  /* ----- Cabeçalhos dos grupos (degradê leve só no mobile) ----- */
  #comparativo-planos .table-compare .group th{
    background: linear-gradient(90deg,
                color-mix(in srgb, var(--cmp-accent) 9%, #fff) 0%,
                #fff 70%) !important;
    border-top-color:    color-mix(in srgb, var(--cmp-accent) 28%, var(--cmp-border)) !important;
    border-bottom-color: color-mix(in srgb, var(--cmp-accent) 18%, var(--cmp-border)) !important;
  }
  #comparativo-planos .table-compare .group th:hover{
    background: linear-gradient(90deg,
                color-mix(in srgb, var(--cmp-accent) 12%, #fff) 0%,
                #fff 70%) !important;
  }

  /* ----- Sidebar/offcanvas: hover/active com cor do plano (só mobile) ----- */
  #comparativo-planos .comp-nav__link:hover{
    border-color: color-mix(in srgb, var(--cmp-accent) 25%, var(--cmp-border));
    background:   color-mix(in srgb, var(--cmp-accent) 7%, #fff);
  }
  #comparativo-planos .comp-nav__link.active{
    color: var(--cmp-accent);
    background:   color-mix(in srgb, var(--cmp-accent) 14%, #fff);
    border-color: color-mix(in srgb, var(--cmp-accent) 40%, var(--cmp-border));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cmp-accent) 25%, transparent);
  }

  /* ----- Cabeçalho da coluna ativa (tinta suave por plano) ----- */
  #comparativo-planos .table-compare[data-active="essencial"]  thead th.col-plan.essencial{
    background: linear-gradient(0deg, color-mix(in srgb, var(--plan-essencial) 8%, #fff), #fff);
  }
  #comparativo-planos .table-compare[data-active="expansao"]   thead th.col-plan.expansao{
    background: linear-gradient(0deg, color-mix(in srgb, var(--plan-expansao) 8%, #fff), #fff);
  }
  #comparativo-planos .table-compare[data-active="sob-medida"] thead th.col-plan.sob-medida{
    background: linear-gradient(0deg, color-mix(in srgb, var(--plan-sob-medida) 8%, #fff), #fff);
  }
  #comparativo-planos .table-compare[data-active="quarto"] thead th.col-plan.quarto{
    background: linear-gradient(0deg, color-mix(in srgb, var(--plan-quarto) 8%, #fff), #fff);
  }

  /* ----- ✓/✗ com borda sutil guiada pela cor do plano ----- */
  #comparativo-planos .table-compare td.yes .mark{
    border-color: color-mix(in srgb, var(--cmp-accent) 20%, rgba(22,163,74,.18));
  }
  #comparativo-planos .table-compare td.no .mark{
    border-color: color-mix(in srgb, var(--cmp-accent) 12%, rgba(239,68,68,.18));
  }

  /* ----- Fade/slide suave ao trocar de plano (apenas mobile) ----- */
  @keyframes columnFadeIn{
    from{ opacity:0; transform: translateX(8px); }
    to  { opacity:1; transform: translateX(0); }
  }
  #comparativo-planos .table-compare.animate-in th.col-plan,
  #comparativo-planos .table-compare.animate-in td.plan-essencial,
  #comparativo-planos .table-compare.animate-in td.plan-expansao,
  #comparativo-planos .table-compare.animate-in td.plan-sob-medida{
    animation: columnFadeIn .28s ease both;
  }

  /* pulso ao trocar o plano (mobile) */
  @keyframes planSwapPulse{
    0%{   box-shadow:0 0 0 0 color-mix(in srgb, var(--pp-accent) 38%, transparent); }
    100%{ box-shadow:0 0 0 18px transparent; }
  }
  #planPicker.theme-burst{ animation: planSwapPulse .6s ease-out; }
}
/* ====== fim do bloco mobile-only ====== */