/* ConnectMalls — componentes (extraído do design kit) */

/* --- Ícones (Lucide) ---
   Tamanho vem do font-size do contêiner: .cm-ico é sempre 1em × 1em.
   Em produção: <svg class="cm-ico"><use href="/assets/icons/icons.svg#i-nome"></use></svg> */
.cm-ico{width:1em;height:1em;display:block;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cm-ico--sm{font-size:16px}
.cm-ico--md{font-size:20px}
.cm-ico--lg{font-size:24px}
.cm-ico--xl{font-size:32px}

/* --- Tipografia --- */
.cm-display-xl{font-family:var(--cm-font-display);font-weight:800;font-size:var(--cm-fs-display-xl);line-height:var(--cm-lh-display-xl);letter-spacing:var(--cm-ls-display)}
.cm-display-l {font-family:var(--cm-font-display);font-weight:800;font-size:var(--cm-fs-display-l); line-height:var(--cm-lh-display-l); letter-spacing:var(--cm-ls-display)}
.cm-h1{font-family:var(--cm-font-display);font-weight:700;font-size:var(--cm-fs-h1);line-height:var(--cm-lh-h1);letter-spacing:var(--cm-ls-heading)}
.cm-h2{font-family:var(--cm-font-display);font-weight:700;font-size:var(--cm-fs-h2);line-height:var(--cm-lh-h2);letter-spacing:var(--cm-ls-heading)}
.cm-h3{font-family:var(--cm-font-display);font-weight:700;font-size:var(--cm-fs-h3);line-height:var(--cm-lh-h3);letter-spacing:var(--cm-ls-heading)}
.cm-h4{font-family:var(--cm-font-display);font-weight:600;font-size:var(--cm-fs-h4);line-height:var(--cm-lh-h4)}
.cm-h5{font-family:var(--cm-font-display);font-weight:600;font-size:var(--cm-fs-h5);line-height:var(--cm-lh-h5)}
.cm-lead{font-weight:500;font-size:var(--cm-fs-lead);line-height:var(--cm-lh-lead);color:var(--cm-text-secondary)}
.cm-body-l{font-size:var(--cm-fs-body-l);line-height:var(--cm-lh-body-l)}
.cm-body{font-size:var(--cm-fs-body);line-height:var(--cm-lh-body)}
.cm-body-s{font-size:var(--cm-fs-body-s);line-height:var(--cm-lh-body-s)}
.cm-caption{font-size:var(--cm-fs-caption);line-height:var(--cm-lh-caption);color:var(--cm-text-muted)}
/* line-height explícito: sem ele o overline herdava 1.6 do body e saía 19.2px onde o JSON pede 16 */
.cm-overline{font-size:var(--cm-fs-overline);line-height:var(--cm-lh-overline);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--cm-ls-overline);color:var(--cm-accent-text)}
.cm-prose{max-width:var(--cm-measure)}
.cm-prose p + p{margin-top:var(--cm-space-5)}

/* Utilitário obrigatório: oculta visualmente SEM remover do DOM acessível.
   display:none apaga o elemento para o leitor de tela — nunca use para rótulo. */
.cm-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cm-skip{position:absolute;left:var(--cm-space-4);top:-100px;z-index:var(--cm-z-toast);
  background:var(--cm-accent);color:var(--cm-accent-on);padding:12px 20px;
  border-radius:var(--cm-radius-md);font-weight:600;text-decoration:none;
  transition:top var(--cm-dur-base) var(--cm-ease)}
.cm-skip:focus{top:var(--cm-space-4)}

/* Header sticky de 72px enterraria todo destino de âncora sob ele */
[id]{scroll-margin-top:calc(var(--cm-size-header) + var(--cm-space-4))}

/* --- Título de seção com régua (padrão do briefing) --- */
.cm-section-title{text-align:center;margin:0 0 var(--cm-space-10)}
.cm-section-title > *:first-child{margin:0 0 var(--cm-space-4)}
.cm-section-title::after{content:"";display:block;width:56px;height:3px;border-radius:2px;
  background:var(--cm-accent);margin:0 auto}

/* --- Botões --- */
/* Rótulos em pt-BR são longos ("Conheça nossos projetos"). O botão quebra linha e
   cresce em altura em vez de estourar o contêiner — não use white-space:nowrap aqui. */
.cm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--cm-font-body);font-weight:600;font-size:16px;line-height:1.25;
  min-height:48px;padding:12px 26px;max-width:100%;
  border-radius:var(--cm-radius-pill);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;text-align:center;
  transition:background var(--cm-dur-base) var(--cm-ease),color var(--cm-dur-base) var(--cm-ease),
             border-color var(--cm-dur-base) var(--cm-ease),transform var(--cm-dur-fast) var(--cm-ease),
             box-shadow var(--cm-dur-base) var(--cm-ease)}
.cm-btn:active{transform:translateY(1px)}
.cm-btn--sm{min-height:40px;padding:9px 20px;font-size:14px}
.cm-btn--lg{min-height:56px;padding:14px 34px;font-size:17px}
.cm-btn--block{display:flex;width:100%}

.cm-btn--primary{background:var(--cm-accent);color:var(--cm-accent-on);box-shadow:var(--cm-shadow-sm)}
.cm-btn--primary:hover{background:var(--cm-accent-strong);box-shadow:var(--cm-accent-shadow)}

.cm-btn--secondary{background:transparent;color:var(--cm-accent-text);border-color:var(--cm-accent)}
.cm-btn--secondary:hover{background:var(--cm-accent-soft)}

.cm-btn--ghost{background:transparent;color:var(--cm-navy-800);border-color:var(--cm-line-strong)}
.cm-btn--ghost:hover{border-color:var(--cm-navy-800);background:var(--cm-navy-50)}

.cm-btn--on-dark{background:#fff;color:var(--cm-navy-800)}
.cm-btn--on-dark:hover{background:var(--cm-navy-50)}
.cm-btn--outline-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.cm-btn--outline-dark:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.cm-btn[aria-disabled="true"],.cm-btn:disabled{background:var(--cm-surface-sunken);color:var(--cm-text-disabled);
  border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}
/* Foco DEPOIS de todos os :hover — mesma especificidade (0,2,0), quem vem depois vence.
   Antes, passar o mouse sobre um botão com foco de teclado apagava o anel (falha 2.4.7). */
.cm-btn:focus-visible,.cm-btn:hover:focus-visible{box-shadow:var(--cm-focus-ring);
  outline:3px solid transparent;outline-offset:3px}
.cm-btn--on-dark:focus-visible,.cm-btn--outline-dark:focus-visible{box-shadow:var(--cm-focus-ring-on-dark)}
.cm-btn .cm-ico{font-size:18px;transition:transform var(--cm-dur-base) var(--cm-ease)}
.cm-btn:hover .cm-ico--arrow{transform:translateX(3px)}

/* --- Badge / pill --- */
.cm-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--cm-radius-pill);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--cm-accent);color:var(--cm-accent-on)}
.cm-badge--soft{background:var(--cm-accent-soft);color:var(--cm-accent-on-soft)}
.cm-badge--outline{background:transparent;color:var(--cm-accent-on-soft);
  box-shadow:inset 0 0 0 1.5px var(--cm-accent-border-strong)}

/* --- Header / navegação --- */
.cm-header{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,2.4vw,40px);
  min-height:var(--cm-size-header);padding:8px clamp(16px,1rem + 1.2vw,32px);background:var(--cm-surface);
  border:1px solid var(--cm-line);border-radius:var(--cm-radius-lg)}
.cm-logo{display:flex;align-items:center;font-family:var(--cm-font-display);
  font-weight:700;font-size:23px;letter-spacing:-.01em;color:var(--cm-navy-800);text-decoration:none;
  white-space:nowrap}
.cm-logo .mark{width:32px;height:32px;border-radius:50%;flex:none;margin-right:10px;
  background:conic-gradient(from 210deg,var(--cm-navy-800) 0 45%,var(--cm-teal-logo) 45% 100%)}
.cm-logo em{font-style:normal;color:var(--cm-teal-logo)}
.cm-nav{display:flex;align-items:center;gap:clamp(18px,2vw,32px);min-width:0}
/* O CTA nunca encosta no link anterior nem na borda do header */
.cm-nav > .cm-btn{flex:none;margin-left:clamp(4px,1.2vw,16px)}
/* :not(.cm-btn) é obrigatório — `.cm-nav a` tem especificidade maior que `.cm-btn--sm`
   e sem isso zera o padding horizontal do CTA, colando o rótulo na borda da pílula. */
.cm-nav a:not(.cm-btn){position:relative;font-size:15px;font-weight:500;color:var(--cm-navy-800);
  text-decoration:none;padding:6px 0;white-space:nowrap;
  transition:color var(--cm-dur-base) var(--cm-ease)}
.cm-nav a:not(.cm-btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--cm-accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--cm-dur-base) var(--cm-ease)}
.cm-nav a:not(.cm-btn):hover::after,.cm-nav a:not(.cm-btn)[aria-current="page"]::after{transform:scaleX(1)}
.cm-nav a:not(.cm-btn)[aria-current="page"]{color:var(--cm-accent-text)}
.cm-nav a:not(.cm-btn):focus-visible{outline:3px solid transparent;box-shadow:var(--cm-focus-ring);
  border-radius:var(--cm-radius-xs)}
.cm-logo:focus-visible{outline:3px solid transparent;box-shadow:var(--cm-focus-ring);
  border-radius:var(--cm-radius-xs)}
.cm-feature:focus-visible,.cm-pub:focus-visible,.cm-client:focus-visible,
.cm-rail__item:focus-visible{outline:3px solid transparent;box-shadow:var(--cm-focus-ring)}
.cm-burger{display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center;
  border:1.5px solid var(--cm-line-strong);border-radius:12px;background:var(--cm-surface);cursor:pointer;
  color:var(--cm-navy-800);font-size:22px}
.cm-burger:hover{border-color:var(--cm-line-strong);background:var(--cm-navy-50)}
.cm-burger:focus-visible{outline:3px solid transparent;outline-offset:3px;box-shadow:var(--cm-focus-ring)}

/* --- Barra de provas / KPIs --- */
.cm-proof{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--cm-line);
  border-radius:var(--cm-radius-lg);overflow:hidden}
.cm-proof__item{display:flex;gap:14px;align-items:flex-start;padding:24px 22px;border-left:1px solid var(--cm-line)}
.cm-proof__item:first-child{border-left:0}
.cm-proof__ico{width:36px;height:36px;flex:none;display:grid;place-items:center;
  font-size:32px;color:var(--cm-accent)}
.cm-proof__num{font-family:var(--cm-font-display);font-weight:700;font-size:22px;line-height:1.15;
  color:var(--cm-accent-text);display:block}
.cm-proof__label{font-size:13.5px;color:var(--cm-text-secondary);line-height:1.4;margin-top:2px;display:block}

/* --- Card de vertical (área de atuação) --- */
.cm-area{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:36px 26px 28px;border-radius:var(--cm-radius-lg);background:var(--cm-accent-gradient);
  border:1px solid var(--cm-accent-border);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform var(--cm-dur-slow) var(--cm-ease-out),box-shadow var(--cm-dur-slow) var(--cm-ease-out)}
@media (hover:hover) and (pointer:fine){
  .cm-area:hover{transform:translateY(-6px);box-shadow:var(--cm-shadow-lg)}
}
.cm-area:focus-visible{outline:none;box-shadow:var(--cm-focus-ring)}
.cm-area__ico{width:88px;height:88px;border-radius:50%;background:#fff;display:grid;place-items:center;
  margin-bottom:20px;box-shadow:var(--cm-shadow-sm);color:var(--cm-accent);font-size:34px}
.cm-area__title{font-family:var(--cm-font-display);font-weight:700;font-size:22px;line-height:1.25;
  color:var(--cm-navy-800);margin:0 0 10px}
.cm-area__desc{font-size:14.5px;line-height:1.55;color:var(--cm-text-secondary);margin:0 0 24px;flex:1}
/* Variante nomeada — como seletor de contexto (.cm-area .cm-btn) ela vencia
   TODAS as variantes de botão por especificidade e anulava --primary em silêncio. */
.cm-btn--on-tint{background:var(--cm-surface);color:var(--cm-accent-text);
  border-color:var(--cm-accent-border-strong)}
.cm-btn--on-tint:hover{background:var(--cm-accent-soft);border-color:var(--cm-accent)}
.cm-area:hover .cm-btn--on-tint{border-color:var(--cm-accent)}

/* --- Card de feature com ícone --- */
.cm-feature{background:#fff;border:1px solid var(--cm-line);border-radius:var(--cm-radius-md);
  padding:22px 18px;text-align:center;transition:border-color var(--cm-dur-base) var(--cm-ease),
  box-shadow var(--cm-dur-base) var(--cm-ease)}
.cm-feature:hover{border-color:var(--cm-accent-border);box-shadow:var(--cm-shadow-sm)}
.cm-feature__ico{width:44px;height:44px;margin:0 auto 14px;display:grid;place-items:center;
  color:var(--cm-accent);font-size:30px}
.cm-feature__title{font-family:var(--cm-font-display);font-weight:700;font-size:15px;line-height:1.35;
  color:var(--cm-accent-text);margin:0 0 8px}
.cm-feature__desc{font-size:13px;line-height:1.5;color:var(--cm-text-secondary);margin:0}

/* --- Etapa de processo (fluxo horizontal) --- */
.cm-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.cm-step{text-align:center;padding:0 20px;border-left:1px solid var(--cm-line)}
.cm-step:first-child{border-left:0}
.cm-step__ico{font-size:34px;color:var(--cm-accent);margin:0 auto 14px;display:grid;place-items:center;
  width:34px;height:34px}
.cm-step__label{font-size:14px;line-height:1.5;color:var(--cm-text-secondary)}

/* --- Método numerado / letra (C.L.I.M.A.R.) --- */
.cm-method{background:var(--cm-navy-700);border-radius:var(--cm-radius-xl);padding:32px;color:#fff}
.cm-method__kicker{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cm-text-on-dark-muted);margin:0 0 6px}
.cm-method__name{font-family:var(--cm-font-display);font-weight:800;font-size:clamp(30px,4vw,44px);
  letter-spacing:.02em;margin:0 0 6px}
.cm-method__tag{font-size:14px;color:var(--cm-accent-on-dark);margin:0 0 26px}
.cm-method__list{background:#fff;border-radius:var(--cm-radius-lg);padding:20px;display:grid;gap:16px}
.cm-mstep{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start}
.cm-mstep__key{width:38px;height:38px;border-radius:50%;background:var(--cm-navy-700);color:#fff;
  display:grid;place-items:center;font-family:var(--cm-font-display);font-weight:800;font-size:18px}
.cm-mstep__title{font-family:var(--cm-font-display);font-weight:700;font-size:15px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--cm-accent-text);margin:2px 0 4px}
.cm-mstep__desc{font-size:13.5px;line-height:1.5;color:var(--cm-text-secondary);margin:0}

/* --- Item de lista numerada (os 17 desenvolvimentos) --- */
.cm-numlist{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 28px}
.cm-numitem{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start}
.cm-numitem__n{width:26px;height:26px;border-radius:7px;background:var(--cm-accent);color:var(--cm-accent-on);
  display:grid;place-items:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.cm-numitem__t{font-weight:700;font-size:14px;line-height:1.35;color:var(--cm-navy-800);margin:0 0 3px}
.cm-numitem__d{font-size:13px;line-height:1.5;color:var(--cm-text-secondary);margin:0}

/* --- Citação --- */
.cm-quote{position:relative;background:var(--cm-accent-soft);border-radius:var(--cm-radius-lg);
  padding:32px 32px 32px 74px;color:var(--cm-accent-on-soft);font-size:18px;font-weight:600;line-height:1.6}
.cm-quote::before{content:"“";position:absolute;left:26px;top:6px;font-family:var(--cm-font-display);
  font-size:76px;line-height:1;color:var(--cm-accent);opacity:.35}
.cm-quote--dark{background:var(--cm-navy-700);color:#fff}
.cm-quote--dark::before{color:var(--cm-accent-on-dark);opacity:.6}

/* --- Card de publicação / case --- */
.cm-pub{display:grid;grid-template-columns:96px 1fr;gap:16px;background:#fff;border:1px solid var(--cm-line);
  border-radius:var(--cm-radius-md);padding:16px;transition:box-shadow var(--cm-dur-base) var(--cm-ease),
  transform var(--cm-dur-base) var(--cm-ease)}
@media (hover:hover) and (pointer:fine){
  .cm-pub:hover{box-shadow:var(--cm-shadow-md);transform:translateY(-3px)}
}
.cm-pub__thumb{width:96px;height:124px;border-radius:10px;background:var(--cm-navy-900);
  display:grid;place-items:center;color:#fff;font-size:11px;text-align:center;padding:8px;overflow:hidden}
.cm-pub__type{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--cm-accent-text);margin:0 0 5px}
.cm-pub__title{font-family:var(--cm-font-display);font-weight:700;font-size:14.5px;line-height:1.35;
  color:var(--cm-navy-800);margin:0 0 8px}
.cm-pub__desc{font-size:12.5px;line-height:1.5;color:var(--cm-text-secondary);margin:0 0 10px}
.cm-pub__src{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--cm-text-muted)}

/* --- Logo de cliente --- */
.cm-clients{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cm-client{height:96px;display:grid;place-items:center;background:#fff;border:1px solid var(--cm-line);
  border-radius:var(--cm-radius-md);padding:18px;filter:grayscale(1);opacity:var(--cm-opacity-logo-rest);
  transition:filter var(--cm-dur-base) var(--cm-ease),opacity var(--cm-dur-base) var(--cm-ease)}
@media (hover:hover) and (pointer:fine){
  .cm-client:hover{filter:none;opacity:1}
}
.cm-client__name{font-family:var(--cm-font-display);font-weight:700;color:var(--cm-navy-400);font-size:15px}

/* --- Trilho de progresso lateral (01–04) --- */
.cm-rail{display:flex;flex-direction:column;align-items:center;gap:34px;
  font-size:11px;text-align:center;color:var(--cm-text-muted);position:relative;padding:8px 0}
.cm-rail::before{content:"";position:absolute;top:0;bottom:0;width:1.5px;background:var(--cm-line-strong)}
.cm-rail__item{position:relative;display:grid;justify-items:center;gap:8px;text-decoration:none;color:inherit}
.cm-rail__dot{width:28px;height:28px;border-radius:50%;background:#fff;border:1.5px solid var(--cm-line-strong);
  display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--cm-text-muted);
  font-variant-numeric:tabular-nums;transition:all var(--cm-dur-base) var(--cm-ease)}
.cm-rail__dot .cm-ico{font-size:14px}
.cm-rail__item[aria-current="true"] .cm-rail__dot{background:var(--cm-accent);border-color:var(--cm-accent);color:#fff}
.cm-rail__item[aria-current="true"]{color:var(--cm-accent-text);font-weight:600}

/* --- Painel de dados (widget de clima / métrica em tempo real) --- */
.cm-datapanel{background:var(--cm-navy-700);border-radius:var(--cm-radius-lg);padding:20px 22px;
  color:#fff;display:grid;gap:16px;box-shadow:var(--cm-shadow-lg)}
.cm-metric{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center}
.cm-metric__ico{font-size:22px;color:var(--cm-accent-on-dark);display:grid;place-items:center;
  width:34px;height:34px}
.cm-metric__val{font-family:var(--cm-font-display);font-weight:700;font-size:24px;line-height:1;
  font-variant-numeric:tabular-nums}
.cm-metric__val small{font-size:13px;font-weight:600;margin-left:2px}
.cm-metric__lbl{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cm-text-on-dark-muted);margin-top:3px;display:block}

/* --- Formulário --- */
.cm-field{display:grid;gap:7px;margin-bottom:18px}
.cm-label{font-size:13.5px;font-weight:600;color:var(--cm-navy-800)}
.cm-label .req{color:var(--cm-danger)}
.cm-input{width:100%;min-height:48px;padding:12px 16px;font-family:var(--cm-font-body);font-size:16px;
  color:var(--cm-text-primary);background:#fff;border:1.5px solid var(--cm-line-strong);
  border-radius:var(--cm-radius-md);transition:border-color var(--cm-dur-base) var(--cm-ease),
  box-shadow var(--cm-dur-base) var(--cm-ease)}
.cm-input::placeholder{color:var(--cm-text-muted)}
.cm-input:hover{border-color:var(--cm-navy-400)}
.cm-input:focus{outline:none;border-color:var(--cm-accent);box-shadow:0 0 0 4px var(--cm-accent-soft)}
.cm-input[aria-invalid="true"]{border-color:var(--cm-danger);box-shadow:0 0 0 4px var(--cm-danger-bg)}
textarea.cm-input{min-height:120px;resize:vertical;line-height:1.6}
.cm-help{font-size:12.5px;color:var(--cm-text-muted)}
.cm-error{font-size:12.5px;color:var(--cm-danger);font-weight:600}

/* --- Rodapé --- */
.cm-footer{background:var(--cm-canvas);border-top:1px solid var(--cm-line);border-radius:var(--cm-radius-lg);
  padding:44px 32px 24px}
.cm-footer__cols{display:grid;grid-template-columns:1.7fr 1fr 1.2fr 1.3fr;gap:32px}
.cm-footer__heading{font-family:var(--cm-font-display);font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cm-navy-800);margin:0 0 16px}
.cm-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.cm-footer a:not(.cm-btn){font-size:14px;color:var(--cm-text-secondary);text-decoration:none;
  overflow-wrap:anywhere}
.cm-footer a:not(.cm-btn):hover{color:var(--cm-accent-text)}
.cm-footer a:not(.cm-btn):focus-visible{outline:3px solid transparent;box-shadow:var(--cm-focus-ring);
  border-radius:var(--cm-radius-xs)}
.cm-footer__bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--cm-line);margin-top:32px;padding-top:18px;font-size:13px;color:var(--cm-text-muted)}


/* --- Campo select --- */
.cm-select{position:relative;display:block}
.cm-select select.cm-input{appearance:none;padding-right:48px;cursor:pointer}
.cm-select__ico{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:20px;color:var(--cm-text-secondary);pointer-events:none}

/* --- Checkbox / consentimento --- */
.cm-check{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;
  margin-bottom:18px;cursor:pointer;font-size:14px;line-height:1.5;
  color:var(--cm-text-secondary);min-height:var(--cm-size-tap-min);align-content:center}
.cm-check input{appearance:none;width:22px;height:22px;margin:1px 0 0;flex:none;cursor:pointer;
  border:1.5px solid var(--cm-line-strong);border-radius:var(--cm-radius-xs);
  background:var(--cm-surface);display:grid;place-items:center;
  transition:background var(--cm-dur-fast) var(--cm-ease),border-color var(--cm-dur-fast) var(--cm-ease)}
.cm-check input:checked{background:var(--cm-accent);border-color:var(--cm-accent)}
.cm-check input:checked::after{content:"";width:11px;height:6px;border:2px solid #fff;
  border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.cm-check input:focus-visible{outline:3px solid transparent;box-shadow:var(--cm-focus-ring)}
.cm-check a{color:var(--cm-accent-text);text-decoration:underline}

/* --- Alerta / mensagem de estado --- */
.cm-alert{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  padding:14px 18px;border-radius:var(--cm-radius-md);font-size:14px;line-height:1.55;
  border-left:3px solid currentColor}
.cm-alert p{margin:0;color:var(--cm-text-primary)}
.cm-alert a{color:inherit;font-weight:600}
.cm-alert .cm-ico{font-size:22px;margin-top:1px}
.cm-alert--success{background:var(--cm-success-bg);color:var(--cm-success)}
.cm-alert--danger {background:var(--cm-danger-bg); color:var(--cm-danger)}
.cm-alert--warning{background:var(--cm-warning-bg);color:var(--cm-warning-text)}
.cm-alert--info   {background:var(--cm-info-bg);   color:var(--cm-info)}

/* --- Acordeão ---
   Anima com grid-template-rows 0fr→1fr. Não use max-height chutado: os itens
   deste projeto têm alturas muito diferentes e a curva sai errada nos longos. */
.cm-acc{border-top:1px solid var(--cm-line)}
.cm-acc__item{border-bottom:1px solid var(--cm-line)}
.cm-acc__btn{display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:var(--cm-size-tap-min);padding:16px 4px;background:none;border:0;
  font-family:var(--cm-font-display);font-size:16px;font-weight:600;text-align:left;
  color:var(--cm-navy-800);cursor:pointer}
.cm-acc__btn:hover{color:var(--cm-accent-text)}
.cm-acc__btn:focus-visible{outline:3px solid transparent;box-shadow:var(--cm-focus-ring);
  border-radius:var(--cm-radius-xs)}
.cm-acc__btn .cm-ico{font-size:20px;flex:none;color:var(--cm-accent);
  transition:transform var(--cm-dur-base) var(--cm-ease)}
.cm-acc__btn[aria-expanded="true"] .cm-ico{transform:rotate(180deg)}
.cm-acc__panel{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--cm-dur-slow) var(--cm-ease)}
.cm-acc__btn[aria-expanded="true"] + .cm-acc__panel{grid-template-rows:1fr}
.cm-acc__inner{overflow:hidden}
.cm-acc__inner > *{padding-bottom:18px}

/* --- Drawer de navegação mobile ---
   O JS precisa: alternar aria-expanded, trocar o aria-label para "Fechar menu",
   mover o foco para dentro, prender o foco (2.1.2), devolvê-lo ao botão ao
   fechar (2.4.3), fechar com Esc e no clique no scrim, e travar o scroll do body. */
.cm-scrim{position:fixed;inset:0;z-index:var(--cm-z-overlay);background:var(--cm-scrim);
  opacity:0;visibility:hidden;transition:opacity var(--cm-dur-base) var(--cm-ease),
  visibility var(--cm-dur-base)}
.cm-scrim[data-open="true"]{opacity:1;visibility:visible}
.cm-drawer{position:fixed;inset:0 0 0 auto;z-index:var(--cm-z-drawer);
  width:min(88vw,380px);background:var(--cm-surface);
  display:flex;flex-direction:column;padding:var(--cm-space-5);
  transform:translateX(100%);transition:transform var(--cm-dur-slow) var(--cm-ease-out);
  box-shadow:var(--cm-shadow-xl)}
.cm-drawer[data-open="true"]{transform:translateX(0)}
.cm-drawer__top{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--cm-space-8)}
.cm-drawer__close{width:var(--cm-size-tap-min);height:var(--cm-size-tap-min);flex:none;
  display:grid;place-items:center;font-size:24px;color:var(--cm-navy-800);
  background:none;border:1.5px solid var(--cm-line-strong);border-radius:12px;cursor:pointer}
.cm-drawer__close:focus-visible{outline:3px solid transparent;box-shadow:var(--cm-focus-ring)}
.cm-drawer__nav{display:grid;gap:var(--cm-space-1);flex:1}
.cm-drawer__nav a{display:flex;align-items:center;min-height:var(--cm-size-tap-min);
  padding:12px 8px;font-family:var(--cm-font-display);font-size:20px;font-weight:600;
  color:var(--cm-navy-800);text-decoration:none;border-radius:var(--cm-radius-sm)}
.cm-drawer__nav a:hover{background:var(--cm-accent-soft);color:var(--cm-accent-text)}
.cm-drawer__nav a[aria-current="page"]{color:var(--cm-accent-text)}
.cm-drawer__nav a:focus-visible{outline:3px solid transparent;box-shadow:var(--cm-focus-ring)}
.cm-drawer__foot{padding-top:var(--cm-space-5);border-top:1px solid var(--cm-line)}

/* --- Carrossel com scroll-snap (publicações) --- */
.cm-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);
  gap:var(--cm-gutter);overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;padding-bottom:var(--cm-space-2);
  scrollbar-width:thin}
.cm-carousel > *{scroll-snap-align:start}
@media (max-width:767px){ .cm-carousel{grid-auto-columns:82%} }

/* --- Voltar ao topo (mobile) --- */
.cm-totop{position:fixed;right:var(--cm-space-4);bottom:var(--cm-space-4);
  z-index:var(--cm-z-rail);width:48px;height:48px;display:grid;place-items:center;
  font-size:22px;border-radius:50%;background:var(--cm-surface);color:var(--cm-accent-text);
  border:1.5px solid var(--cm-accent-border-strong);box-shadow:var(--cm-shadow-md);cursor:pointer}
.cm-totop:focus-visible{outline:3px solid transparent;box-shadow:var(--cm-focus-ring)}

/* --- Alvos de toque ---
   Em dispositivo de toque os controles compactos sobem para o mínimo de 44px.
   No desktop com mouse podem continuar em 40/28px sem prejuízo. */
@media (pointer:coarse){
  .cm-btn--sm{min-height:var(--cm-size-tap-min)}
  .cm-rail__item{min-height:var(--cm-size-tap-min);align-content:center}
  .cm-nav a:not(.cm-btn){padding:12px 0}
  .cm-footer a:not(.cm-btn){display:inline-block;padding:6px 0}
}

/* --- Mobile do kit --- */
@media (max-width:1023px){
  /* A nav completa não cabe abaixo de 1024 — vira hambúrguer aqui, não em 768.
     Era isso que fazia o CTA "Fale conosco" encostar na borda entre 768 e 1023. */
  .cm-nav{display:none}
  .cm-burger{display:flex}
  .cm-proof{grid-template-columns:repeat(2,1fr)}
  .cm-proof__item:nth-child(3){border-left:0}
  .cm-proof__item:nth-child(n+3){border-top:1px solid var(--cm-line)}
  .cm-numlist{grid-template-columns:repeat(2,1fr)}
  .cm-footer__cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .cm-header{min-height:var(--cm-size-header-mobile);padding:8px 16px;border-radius:var(--cm-radius-md)}
  .cm-proof{grid-template-columns:1fr}
  .cm-proof__item{border-left:0;border-top:1px solid var(--cm-line)}
  .cm-proof__item:first-child{border-top:0}
  .cm-steps{grid-template-columns:1fr;gap:22px}
  .cm-step{border-left:0;padding:0;display:grid;grid-template-columns:44px 1fr;gap:14px;text-align:left;align-items:center}
  .cm-step__ico{margin:0}
  .cm-numlist{grid-template-columns:1fr}
  .cm-footer__cols{grid-template-columns:1fr}
  .cm-quote{padding:26px 22px 26px 22px;font-size:16px}
  .cm-quote::before{position:static;display:block;font-size:52px;margin-bottom:-18px}
  .cm-method{padding:22px 18px}
  .cm-clients{grid-template-columns:repeat(2,1fr)}
  .cm-pub{grid-template-columns:76px 1fr}
  .cm-pub__thumb{width:76px;height:98px}
  /* Em telefone o CTA principal ocupa a largura toda — não sobra espaço para pill centralizada */
  /* use a classe .cm-btn--block no markup; aqui só o CTA principal do hero */
  .cm-hero__cta{display:flex;width:100%}
  .cm-rail{flex-direction:row;gap:0;justify-content:space-between;padding:10px 14px;
    background:#fff;border:1px solid var(--cm-line);border-radius:var(--cm-radius-pill)}
  .cm-rail::before{top:50%;bottom:auto;left:22px;right:22px;width:auto;height:1.5px}
  .cm-rail__label{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
}

/* --- Hero de exemplo --- */
.cm-hero{position:relative;border-radius:var(--cm-radius-xl);overflow:hidden;
  background:linear-gradient(115deg,#EAF3F6 0%,#DCEAF0 42%,#C9DDE6 100%);padding:56px 44px;min-height:340px;
  display:flex;flex-direction:column;justify-content:center}
.cm-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 34%,rgba(255,255,255,0) 62%)}
.cm-hero__in{position:relative;z-index:1;max-width:60%}
.cm-hero__title{margin:0 0 18px;color:var(--cm-navy-800)}
.cm-hero__title em{font-style:normal;color:var(--cm-accent-text);display:block}
.cm-hero__lead{margin:0 0 28px;max-width:34ch}
@media (max-width:767px){
  .cm-hero{padding:32px 20px;min-height:0}
  .cm-hero__in{max-width:100%}
  .cm-hero::after{background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.72) 100%)}
}
.phone .cm-hero{padding:26px 18px;min-height:0}
.phone .cm-hero__in{max-width:100%}