/* ==========================================================================
   JurisPark | Comparação completa de planos (precos.html)
   Tabela dirigida por dados (s/js/comparativo.js). A tabela estática do HTML
   continua como reserva quando a API falha.
   Índice
   01 Ferramentas        02 Cartão e tabela    03 Cabeçalho fixo
   04 Faixas e linhas    05 Células            06 Dica de ajuda
   07 Entrada animada    08 Celular            09 Ajustes e impressão
   ========================================================================== */

/* ---------- 01 Ferramentas (aviso, alternador, seleção de planos) ---------- */
.cmp{margin-top:clamp(2rem,4vw,3rem)}
.cmp__tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.5rem;margin-bottom:1rem}
.cmp__tools:empty{display:none}
.cmp__draft{display:flex;align-items:flex-start;gap:.65rem;max-width:44rem;padding:.65rem 1rem;border-radius:var(--r-md);border:1px dashed color-mix(in srgb,var(--blue) 45%,transparent);background:color-mix(in srgb,var(--blue) 5%,#fff);font-size:.9rem;line-height:1.45;color:var(--text)}
.cmp__draft .ico{flex:none;width:1.15rem;height:1.15rem;margin-top:.12rem;color:var(--blue)}
.cmp__draft strong{font-weight:600}

/* Alternador mensal/anual (dois espelhos do alternador da página; o da página manda) */
.cmp__seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:.25rem;border-radius:999px;background:#fff;border:1px solid var(--line-strong);box-shadow:var(--shadow-1)}
.cmp__seg::before{content:"";position:absolute;top:.25rem;bottom:.25rem;left:.25rem;width:calc((100% - .5rem) / 2);border-radius:999px;background:var(--carbon);transition:transform .5s var(--ease)}
.cmp__seg[data-per="anual"]::before{transform:translateX(100%)}
.cmp__segbtn{position:relative;z-index:1;padding:.5rem 1.15rem;border-radius:999px;font-size:.88rem;font-weight:600;line-height:1.2;color:var(--muted);transition:color .3s;white-space:nowrap}
.cmp__segbtn[aria-pressed="true"]{color:#fff}
.cmp__seg--tools{display:none}
.cmp__seg--corner{display:inline-grid}

.cmp__bn{margin:-.2rem 0 1rem;font-size:.86rem;line-height:1.45;color:var(--muted);max-width:44rem}
.cmp__bn::before{content:"Plano anual: ";font-weight:600;color:var(--text)}
.cmp__pick{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin-bottom:1rem}
.cmp__pick[hidden]{display:none}
.cmp__pick-l{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-600)}
.cmp__chips{display:flex;flex-wrap:wrap;gap:.45rem}
.cmp__chip{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:0 1rem;border-radius:999px;border:1px solid var(--line-strong);background:#fff;font-size:.92rem;font-weight:600;color:var(--text);transition:background-color .25s,color .25s,border-color .25s,transform .3s var(--ease)}
.cmp__chip .ico{width:1rem;height:1rem;stroke-width:2.6;display:none}
.cmp__chip[aria-pressed="true"]{background:var(--carbon);border-color:var(--carbon);color:#fff}
.cmp__chip[aria-pressed="true"] .ico{display:block}
.cmp__chip:active{transform:scale(.97)}
.cmp__pick-h{flex-basis:100%;font-size:.8rem;color:var(--muted)}

/* ---------- 02 Cartão e tabela ---------- */
/* overflow:clip arredonda os cantos sem criar contêiner de rolagem, então o cabeçalho continua fixo */
.cmp__card{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:clip;box-shadow:var(--shadow-1)}
.cmp__tbl{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.95rem;color:var(--text)}
.cmp__c0{width:clamp(11rem,26%,17rem)}
.cmp__tbl :where(th,td){padding:0;text-align:center;font-weight:400;vertical-align:middle}
.cmp--off{display:none!important}

/* Coluna do plano recomendado */
.cmp__tbl .is-rec{background:color-mix(in srgb,var(--blue) 5%,#fff);box-shadow:inset 1px 0 0 color-mix(in srgb,var(--blue) 26%,transparent),inset -1px 0 0 color-mix(in srgb,var(--blue) 26%,transparent)}

/* ---------- 03 Cabeçalho fixo ---------- */
.cmp__rib td{height:2.5rem;padding:.7rem .5rem 0;vertical-align:bottom;background:#fff}
.cmp__rib td.is-rec{background:color-mix(in srgb,var(--blue) 5%,#fff);box-shadow:inset 0 3px 0 var(--blue),inset 1px 0 0 color-mix(in srgb,var(--blue) 26%,transparent),inset -1px 0 0 color-mix(in srgb,var(--blue) 26%,transparent)}
.cmp__badge{display:inline-flex;align-items:center;height:1.45rem;padding:0 .7rem;border-radius:999px;background:var(--blue);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 14px -6px rgba(17,115,176,.7)}
.cmp__main th{position:sticky;top:var(--hdr-h);z-index:3;background:#fff;padding:.6rem .85rem .8rem;vertical-align:top;border-bottom:1px solid var(--line-strong)}
/* sombra contínua sob o cabeçalho, só enquanto ele está preso no topo */
.cmp__main th::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;background:linear-gradient(rgba(20,22,26,.09),transparent);opacity:0;transition:opacity .3s;pointer-events:none}
.cmp__card.is-stuck .cmp__main th::after{opacity:1}
.cmp__sent{position:absolute;left:0;top:0;width:1px;height:1px;pointer-events:none;visibility:hidden}
.cmp__main th.is-rec{background:color-mix(in srgb,var(--blue) 5%,#fff)}
.cmp__main th.cmp__corner{text-align:left;vertical-align:bottom;padding-bottom:1rem}
.cmp__name{display:block;font-family:var(--serif);font-size:clamp(1.5rem,2vw,1.8rem);line-height:1.05;letter-spacing:-.01em;color:var(--text)}
.cmp__price{display:flex;justify-content:center;align-items:baseline;gap:.25rem;margin-top:.35rem;font-variant-numeric:tabular-nums lining-nums}
.cmp__cur{font-size:.88rem;font-weight:600;color:var(--muted)}
.cmp__amt{font-family:var(--serif);font-size:clamp(1.6rem,2.1vw,1.95rem);line-height:1;letter-spacing:-.02em;color:var(--text)}
.cmp__per{font-size:.82rem;font-weight:500;color:var(--muted)}
.cmp__note{display:block;margin-top:.2rem;min-height:1.35em;font-size:.74rem;line-height:1.35;color:var(--muted)}
.cmp__cta{margin-top:.6rem;height:auto;min-height:2.4rem;padding:.5rem .7rem;white-space:normal;text-wrap:balance;line-height:1.2;font-size:.86rem}
.cmp__cta--head{display:inline-flex}
.cmp__foot{display:none}

/* ---------- 04 Faixas de grupo e linhas ---------- */
.cmp__grp th{padding:.75rem 1rem;text-align:left;background:var(--paper-2);border-bottom:1px solid var(--line);font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-600)}
.cmp__lab{position:sticky;left:0;z-index:1;padding:.8rem 1rem;background:#fff;border-bottom:1px solid var(--line);text-align:left;font-size:.95rem;font-weight:500;line-height:1.35;color:var(--text)}
.cmp__row>td{padding:.8rem .9rem;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.35;font-variant-numeric:tabular-nums lining-nums}
.cmp__row:hover>.cmp__lab,.cmp__row:hover>td:not(.is-rec){background:#f6f9fc}
.cmp__row:hover>td.is-rec{background:color-mix(in srgb,var(--blue) 9%,#fff)}
.cmp__foot td,.cmp__foot th{border-bottom:0}

/* ---------- 05 Células ---------- */
.cmp__yes{width:1.25rem;height:1.25rem;color:var(--blue);stroke-width:2.6;stroke-dasharray:24;stroke-dashoffset:0;display:inline-block;vertical-align:middle}
.cmp__tbl .dash{background:#7c8491}
.cmp__na{display:inline-block;width:.35rem;height:.35rem;border-radius:50%;background:#9aa1ac;vertical-align:middle}
.cmp__unl{display:inline-block;padding:.18rem .65rem;border-radius:999px;background:color-mix(in srgb,var(--blue) 11%,#fff);color:var(--blue-600);font-size:.86rem;font-weight:700;letter-spacing:.01em}
.cmp__txt{display:inline-block;max-width:100%;overflow-wrap:anywhere}
.cmp__for .cmp__txt{font-size:.88rem;color:var(--muted)}
.cmp__labt{vertical-align:middle}

/* ---------- 06 Dica de ajuda ---------- */
.tip{position:relative;display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;margin-left:.15rem;vertical-align:middle;border-radius:50%;color:#6a707b;transition:color .2s,background-color .2s}
.tip::after{content:"";position:absolute;inset:-.4rem}
.tip .ico{width:1.05rem;height:1.05rem}
.tip:hover,.tip.is-open{color:var(--blue-600);background:color-mix(in srgb,var(--blue) 12%,transparent)}
.cmp__tip{position:fixed;z-index:150;left:0;top:0;max-width:min(18rem,calc(100vw - 1rem));padding:.7rem .9rem;border-radius:.8rem;background:var(--carbon);color:#fff;font-size:.84rem;font-weight:400;line-height:1.5;text-align:left;box-shadow:var(--shadow-2);visibility:hidden;opacity:0;transform:translateY(4px);transition:opacity .18s,transform .25s var(--ease),visibility 0s .18s}
.cmp__tip.is-on{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.cmp__tip::before{content:"";position:absolute;top:-.3rem;left:var(--ax,1rem);width:.6rem;height:.6rem;margin-left:-.3rem;background:var(--carbon);transform:rotate(45deg);border-radius:.12rem}
.cmp__tip.is-up::before{top:auto;bottom:-.3rem}

/* ---------- 07 Entrada animada (uma vez, ao chegar na tela) ---------- */
@keyframes cmp-up{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes cmp-fade{from{opacity:0}to{opacity:1}}
@keyframes cmp-draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
.js .cmp__card:not(.is-in) .cmp__main th>*,
.js .cmp__card:not(.is-in) .cmp__badge,
.js .cmp__card:not(.is-in) tbody tr{opacity:0}
.cmp__card.is-in .cmp__main th>*{animation:cmp-up .8s var(--ease) backwards;animation-delay:calc(var(--j,0) * 90ms + 80ms)}
.cmp__card.is-in .cmp__badge{animation:cmp-up .8s var(--ease) .35s backwards}
.cmp__card.is-in tbody tr{animation:cmp-up .75s var(--ease) backwards;animation-delay:calc(var(--k,0) * 42ms + 220ms)}
.cmp__card.is-in .cmp__yes{animation:cmp-draw .7s var(--ease) backwards;animation-delay:calc(var(--k,0) * 42ms + 520ms)}
.cmp__in{animation:cmp-fade .5s var(--ease) both}

/* ---------- 08 Celular: compara 2 planos por vez, sem rolagem lateral ---------- */
@media (max-width:1000px){
  .cmp__seg--corner .cmp__segbtn{padding:.42rem .65rem;font-size:.8rem}
}
@media (max-width:900px){
  .cmp__main th{padding:.7rem .55rem .85rem}
  .cmp__note{min-height:2.7em}
  .cmp__cta{font-size:.8rem;padding:.45rem .5rem}
  .cmp__row>td{padding:.75rem .5rem}
}
@media (max-width:720px){
  .cmp__tools{flex-direction:column;align-items:flex-start;gap:.7rem}
  .cmp__draft{align-self:stretch}
  .cmp__seg--tools{display:inline-grid}
  .cmp__seg--corner{display:none}
  .cmp__segbtn{padding:.65rem 1rem;font-size:.92rem}
  .cmp__tbl{font-size:.84rem}
  .cmp__c0{width:35%}
  .cmp__rib td{height:2.1rem;padding:.55rem .25rem 0}
  .cmp__badge{height:1.3rem;padding:0 .5rem;font-size:.6rem;letter-spacing:.04em}
  .cmp__main th{padding:.55rem .35rem .65rem}
  .cmp__name{font-size:1.4rem}
  .cmp__price{margin-top:.3rem;gap:.15rem;flex-wrap:wrap}
  .cmp__amt{font-size:1.5rem}
  .cmp__cur,.cmp__per{font-size:.72rem}
  .cmp__note{min-height:0;font-size:.68rem;line-height:1.3;margin-top:.15rem}
  .cmp__cta--head{display:none}
  .cmp__foot{display:table-footer-group}
  .cmp__foot td{padding:.9rem .4rem 1rem}
  .cmp__foot .cmp__cta{margin-top:0;font-size:.78rem}
  .cmp__lab{padding:.7rem .4rem .7rem .7rem;font-size:.84rem;position:static}
  .cmp__row>td{padding:.7rem .3rem;font-size:.84rem}
  .cmp__grp th{padding:.65rem .75rem}
  .cmp__unl{font-size:.74rem;padding:.15rem .5rem}
  .cmp__for .cmp__txt{font-size:.78rem}
  .tip{width:1.75rem;height:1.75rem}
}
@media (max-width:360px){
  .cmp__c0{width:33%}
  .cmp__name{font-size:1.25rem}
  .cmp__amt{font-size:1.3rem}
}

/* ---------- 09 Ajustes e impressão ---------- */
/* Telas baixas: o cabeçalho fixo ocuparia espaço demais, então rola junto com a tabela */
@media (max-height:640px){
  .cmp__main th{position:static}
}
.no-motion .cmp__card tbody tr,
.no-motion .cmp__card .cmp__main th>*,
.no-motion .cmp__card .cmp__badge{opacity:1}
@media print{
  .cmp__card{overflow:visible;box-shadow:none}
  .cmp__main th,.cmp__lab{position:static}
  .cmp--off{display:table-cell!important}
  .cmp__foot,.cmp__pick,.cmp__seg,.cmp__cta{display:none!important}
  .cmp__tip{display:none}
  .js .cmp__card:not(.is-in) tbody tr,.js .cmp__card:not(.is-in) .cmp__main th>*{opacity:1}
}