/* ============================================================
   Contractor Express · cx-extras.css
   Componentes novos (comparativo, cadastro antecipado, rodapé
   legal, página Para profissionais). Autocontido: não depende
   de regras do style.css além do layout base (.wrap, .eyebrow).
   ============================================================ */
:root{
  --cx-amber-100:#FCEFD2;--cx-amber-300:#F7CE6A;--cx-amber-400:#F5B72F;--cx-amber-700:#8A6A14;--cx-amber-800:#5C4708;
  --cx-petrol-200:#B8C5CB;--cx-petrol-300:#8CA0A9;--cx-petrol-400:#5C7480;--cx-petrol-500:#3D5361;--cx-petrol-600:#2E414C;--cx-petrol-700:#22313A;--cx-petrol-800:#182329;
  --cx-sand-0:#FFFFFF;--cx-sand-25:#FDFBF7;--cx-sand-50:#FBF8F3;--cx-sand-100:#F4EFE4;--cx-sand-200:#E8DFCE;
  --cx-coral-500:#D8552F;--cx-green-50:#E9F2EE;--cx-green-300:#6FC4A4;--cx-green-500:#1D9E75;--cx-green-600:#0F6E56;
  --cx-display:'Bricolage Grotesque','Figtree',sans-serif;--cx-body:'Figtree',system-ui,sans-serif;
}

/* ---- nav CTA e link secundário do hero ---- */
.cx-nav-cta{height:40px;padding:0 18px;font-size:14px;margin-left:8px}
.cx-link-secondary{font:600 16px var(--cx-body);color:var(--cx-sand-25);text-decoration:none;padding:14px 6px;border-bottom:2px solid var(--cx-petrol-500)}
.cx-link-secondary:hover{border-color:var(--cx-amber-400)}

/* ---- botao outline (CTA secundario do hero, ex.: "Sou profissional" abaixo dos selos de loja) ---- */
.btn-outline{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 32px;border-radius:999px;background:transparent;border:1.5px solid var(--cx-petrol-500);color:var(--cx-sand-25);font:600 16px/1 var(--cx-body);text-decoration:none;transition:border-color .15s ease,background .15s ease}
.btn-outline:hover,.btn-outline:focus-visible{border-color:var(--cx-amber-400);background:var(--cx-petrol-700)}

/* ---- ícones inline dos selos de preço ---- */
.cx-ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:6px}

/* ---- tabela comparativa (v2.2) ---- */
.cx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cx-comp-wrap{margin-top:36px;border-radius:20px;box-shadow:0 12px 32px rgba(34,49,58,.10);background:var(--cx-sand-0);overflow:hidden}
table.cx-comp{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--cx-body)}
table.cx-comp thead th{padding:16px 18px;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--cx-petrol-500);background:var(--cx-sand-25);text-align:center;border-bottom:1px solid var(--cx-sand-200)}
table.cx-comp thead th.cx-col{background:var(--cx-petrol-800);color:var(--cx-amber-300);font-weight:700;font-size:14px}
table.cx-comp tbody th{padding:18px;text-align:left;font-size:15px;font-weight:600;color:var(--cx-petrol-700);line-height:1.35;width:32%;border-bottom:1px solid var(--cx-sand-100);vertical-align:middle}
table.cx-comp tbody td{padding:18px 16px;text-align:center;font-size:14px;line-height:1.35;color:var(--cx-petrol-700);border-bottom:1px solid var(--cx-sand-100);vertical-align:middle}
table.cx-comp tbody tr:nth-child(even) th,table.cx-comp tbody tr:nth-child(even) td:not(.cx-col){background:var(--cx-sand-25)}
table.cx-comp tbody tr:last-child th,table.cx-comp tbody tr:last-child td{border-bottom:none}
table.cx-comp td.cx-col{background:var(--cx-petrol-700);color:var(--cx-sand-25)}
table.cx-comp td.cx-col small{display:block;margin-top:5px;font-size:12.5px;color:var(--cx-petrol-200);line-height:1.35}
table.cx-comp td small{display:block;margin-top:5px;font-size:12.5px;color:var(--cx-petrol-400);line-height:1.35}
table.cx-comp td.cx-col small a{color:var(--cx-amber-300)}
.cx-v{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.cx-vi{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;padding:2px;border-radius:50%}
.cx-v--yes{color:var(--cx-green-600)} .cx-v--yes .cx-vi{background:var(--cx-green-50)}
.cx-v--no{color:#B2401F} .cx-v--no .cx-vi{background:#FCEDE7}
.cx-v--meh{color:var(--cx-petrol-400);font-weight:500} .cx-v--meh .cx-vi{background:var(--cx-sand-100)}
td.cx-col .cx-v--yes{color:var(--cx-green-300)} td.cx-col .cx-v--yes .cx-vi{background:rgba(29,158,117,.22)}
.cx-comp-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font:500 13px var(--cx-body);color:var(--cx-petrol-500)}
.cx-comp-legend .cx-v{font-weight:500;gap:6px}
.cx-comp-legend .cx-vi{width:16px;height:16px}
.cx-comp-note{margin-top:8px;font:400 13px var(--cx-body);color:var(--cx-petrol-400);max-width:88ch;line-height:1.5}

/* celular: cada critério vira um cartão; resposta do Contractor Express primeiro */
@media(max-width:720px){
  table.cx-comp,table.cx-comp tbody,table.cx-comp tr{display:block}
  table.cx-comp thead{display:none}
  table.cx-comp tbody tr{display:flex;flex-direction:column;padding:16px 16px 6px;border-bottom:1px solid var(--cx-sand-200)}
  table.cx-comp tbody tr:last-child{border-bottom:none}
  table.cx-comp tbody tr:nth-child(even) th,table.cx-comp tbody tr:nth-child(even) td:not(.cx-col){background:transparent}
  table.cx-comp tbody th{display:block;width:auto;padding:0 0 12px;border:none;font-size:16px;order:-2}
  table.cx-comp tbody td{display:grid;grid-template-columns:42% 1fr;column-gap:14px;align-items:start;text-align:right;padding:12px 0;border:none;border-top:1px dashed var(--cx-sand-200)}
  table.cx-comp tbody td::before{content:attr(data-label);grid-column:1;grid-row:1/span 2;text-align:left;font-size:12.5px;font-weight:600;color:var(--cx-petrol-400);line-height:1.35;padding-top:2px}
  table.cx-comp tbody td .cx-v{grid-column:2;justify-self:end}
  table.cx-comp tbody td>small{grid-column:2;text-align:right}
  table.cx-comp td.cx-col{order:-1;border-top:none;border-radius:12px;padding:12px 14px;margin-bottom:6px}
  table.cx-comp td.cx-col::before{color:var(--cx-amber-300)}
  table.cx-comp tbody td:not(.cx-col) .cx-v{font-weight:600}
}

/* ---- contato por e-mail (pré-lançamento) ---- */
.cx-contact{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;font-family:var(--cx-body)}
@media(max-width:700px){.cx-contact{grid-template-columns:1fr}}
.cx-contact-card{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:20px;background:var(--cx-sand-0);border:1px solid var(--cx-sand-200);text-decoration:none;color:var(--cx-petrol-700);transition:transform .15s cubic-bezier(.2,0,0,1),box-shadow .15s}
.cx-contact-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(34,49,58,.12)}
.cx-contact-card b{font:600 18px/1.3 var(--cx-display);letter-spacing:-.01em}
.cx-contact-tag{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--cx-amber-100);color:var(--cx-amber-700)}
.cx-contact-card--pro .cx-contact-tag{background:var(--cx-green-50);color:var(--cx-green-600)}
.cx-contact-mail{margin-top:6px;font-size:14px;font-weight:600;color:var(--cx-petrol-500)}
.cx-contact-card:hover .cx-contact-mail{color:var(--cx-petrol-700)}
.cx-social-note{margin-top:22px;font-size:14px;color:var(--cx-petrol-500)}

/* ---- rodapé legal ---- */
.cx-legal{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-family:var(--cx-body)}
.cx-legal small{font-size:12.5px;line-height:1.5;color:var(--cx-petrol-300)}
.cx-legal a{color:var(--cx-petrol-200)}

/* ---- Para profissionais: números, split, checks, cartão de parcelamento ---- */
.cx-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;font-family:var(--cx-body)}
.cx-num{background:var(--cx-sand-0);border:1px solid var(--cx-sand-200);border-radius:20px;padding:26px}
.cx-num b{display:block;font:700 44px var(--cx-display);letter-spacing:-.02em;color:var(--cx-green-600);line-height:1.05;margin-bottom:8px}
.cx-num--amber b{color:var(--cx-amber-700)}
.cx-num span{font-size:15px;color:var(--cx-petrol-500);line-height:1.5}
.cx-split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:880px){.cx-split{grid-template-columns:1fr}}
.cx-checks{margin:22px 0 0;padding:0;display:grid;gap:12px;list-style:none;font-family:var(--cx-body)}
.cx-checks li{position:relative;padding-left:30px;font-size:16px;color:var(--cx-petrol-700);line-height:1.5}
.cx-checks li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:9px;border-left:3px solid var(--cx-green-500);border-bottom:3px solid var(--cx-green-500);transform:rotate(-45deg)}
.cx-parc{background:var(--cx-petrol-800);border-radius:24px;padding:30px;max-width:420px;width:100%;margin:0 auto;color:var(--cx-petrol-200);font-family:var(--cx-body)}
.cx-tag{display:inline-block;font-size:12px;font-weight:500;padding:5px 12px;border-radius:999px;background:var(--cx-green-50);color:var(--cx-green-600);margin-bottom:10px}
.cx-parc-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--cx-petrol-600);font-size:15px}
.cx-parc-row b{color:var(--cx-sand-25);font-weight:600;text-align:right}
.cx-parc-big{border-bottom:none;padding-top:18px}
.cx-parc-big b{font:700 34px var(--cx-display);letter-spacing:-.02em;color:var(--cx-green-300)}
.cx-autonomy{background:var(--cx-sand-100);border-left:4px solid var(--cx-amber-400);border-radius:0 16px 16px 0;padding:22px 26px;font:400 16px/1.6 var(--cx-body);color:var(--cx-petrol-700)}
.cx-autonomy b{display:block;margin-bottom:4px;font-weight:700}
.cx-entry{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px;font-family:var(--cx-body)}
@media(max-width:760px){.cx-entry{grid-template-columns:1fr}}
.cx-entry-card{background:var(--cx-sand-0);border:1px solid var(--cx-sand-200);border-radius:20px;padding:28px;color:var(--cx-petrol-700)}
.cx-entry-card h3{font:600 20px var(--cx-display);margin-bottom:8px}
.cx-entry-card p{font-size:15px;color:var(--cx-petrol-500);line-height:1.55}
.cx-entry-card .btn-primary{display:inline-flex;margin-top:18px}
.cx-entry-card--amber{background:var(--cx-amber-100);border-color:var(--cx-amber-300)}

/* ---- voltar ao topo ---- */
.cx-top{color:var(--cx-petrol-300);text-decoration:none}
.cx-top:hover{color:var(--cx-sand-25)}

/* ---- selos de loja (clicaveis - App Store / Google Play) ---- */
.cx-soon{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;font-family:var(--cx-body)}
.cx-soon-badge{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:8px 16px 8px 14px;border-radius:12px;background:var(--cx-petrol-800);border:1px solid var(--cx-petrol-500);color:var(--cx-sand-25);text-decoration:none;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.cx-soon-badge:hover,.cx-soon-badge:focus-visible{border-color:var(--cx-amber-400);background:var(--cx-petrol-700,var(--cx-petrol-800))}
.cx-soon-badge svg{width:22px;height:22px;fill:var(--cx-sand-25);flex-shrink:0}
.cx-soon-badge small{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--cx-petrol-200);line-height:1.2}
.cx-soon-badge b{display:block;font-size:15px;font-weight:600;line-height:1.2}
.cx-soon-under{display:inline-block;margin-top:16px}
.cx-soon + .cta-row{margin-top:16px}

/* ---- lista de beneficios extra (icones + texto), ex.: Para profissionais ---- */
.cx-more{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;font-family:var(--cx-body)}
.cx-more li{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:var(--cx-sand-100)}
.cx-more svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:var(--cx-amber-700);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.cx-more span{font-size:14.5px;line-height:1.45;color:var(--cx-petrol-500)}
.cx-more b{color:var(--cx-petrol-700);font-weight:600}