/* V165 — TOOL_HERO_CANONICAL_R1_CORRECTION
   Gramática visual derivada do Passaporte, implementada como componente próprio.
   Escopo: /nomes/ + ferramentas reais do hero compartilhado. */
.cdn-tool-hero-canonical{
  --cdn-th-ink:#24313a;
  --cdn-th-text:#52636d;
  --cdn-th-line:#dfe5e8;
  --cdn-th-teal:#087b83;
  --cdn-th-blue:#0e607f;
  --cdn-th-pink:#d6076d;
  --cdn-th-purple:#7b5790;
  position:relative;
  overflow:hidden;
  width:100%;
  box-sizing:border-box;
  margin:0 0 24px;
  padding:32px;
  border:1px solid var(--cdn-th-line);
  border-radius:20px;
  background:#fff;
  color:var(--cdn-th-ink);
  box-shadow:0 8px 28px rgba(36,49,58,.035);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.cdn-tool-hero-canonical::before{
  content:"";
  position:absolute;
  inset:0 18px auto;
  height:4px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,#16c4cc 0 24%,#0e607f 24% 58%,#d6076d 58% 82%,#f36a21 82% 100%);
}
.cdn-tool-hero-canonical__main{max-width:850px;min-width:0;width:100%;box-sizing:border-box;}
.cdn-tool-hero-canonical__kicker{
  display:flex!important;
  align-items:center;
  gap:9px;
  margin:0 0 13px!important;
  color:var(--cdn-th-teal)!important;
  font-size:13px!important;
  line-height:18px!important;
  font-weight:700!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
.cdn-tool-hero-canonical__kicker-icon{
  width:23px;
  height:23px;
  display:inline-grid;
  place-items:center;
  flex:0 0 23px;
}
.cdn-tool-hero-canonical__kicker-icon svg{width:23px;height:23px;display:block;}
.cdn-tool-hero-canonical h1{
  max-width:920px!important;
  margin:0!important;
  color:var(--cdn-th-ink)!important;
  font-family:inherit!important;
  font-size:48px!important;
  line-height:1.1!important;
  font-weight:700!important;
  letter-spacing:-.03em!important;
}
.cdn-tool-hero-canonical__lead{
  max-width:800px!important;
  margin:13px 0 0!important;
  color:var(--cdn-th-text)!important;
  font-size:18px!important;
  line-height:1.6!important;
  font-weight:400!important;
}
.cdn-tool-hero-canonical__meta{
  display:inline-flex!important;
  align-items:center;
  min-height:30px;
  margin:14px 0 0!important;
  padding:5px 10px;
  border-radius:999px;
  background:#eef5f7;
  color:var(--cdn-th-blue)!important;
  font-size:13px!important;
  line-height:20px!important;
  font-weight:700!important;
}
.cdn-tool-hero-canonical__promises{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:24px;
}
.cdn-tool-hero-canonical__promise{
  min-width:0;
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:14px 15px;
  border:1px solid transparent;
  border-radius:14px;
  background:#fbfcfd;
}
.cdn-tool-hero-canonical__promise-icon{
  width:32px;
  min-width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#e9fafa;
  color:var(--cdn-th-teal);
  font-size:13px;
  line-height:1;
  font-weight:700;
}
.cdn-tool-hero-canonical__promise.is-2 .cdn-tool-hero-canonical__promise-icon{background:#fff0f7;color:var(--cdn-th-pink);}
.cdn-tool-hero-canonical__promise.is-3 .cdn-tool-hero-canonical__promise-icon{background:#f6eff8;color:var(--cdn-th-purple);}
.cdn-tool-hero-canonical__promise strong{
  display:block;
  margin:0;
  color:var(--cdn-th-ink);
  font-size:15px;
  line-height:1.3;
  font-weight:700;
}
.cdn-tool-hero-canonical__promise div>span{
  display:block;
  margin-top:4px;
  color:var(--cdn-th-text);
  font-size:13px;
  line-height:1.45;
  font-weight:400;
}
/* Mantém a linguagem única, mas permite uma ênfase discreta por etapa. */
.cdn-tool-hero-canonical.is-select .cdn-tool-hero-canonical__kicker{color:#8c3f6b!important;}
.cdn-tool-hero-canonical.is-test .cdn-tool-hero-canonical__kicker{color:#0e607f!important;}
.cdn-tool-hero-canonical.is-names .cdn-tool-hero-canonical__kicker{color:#087b83!important;}
.cdn-tool-hero-canonical.is-popularity .cdn-tool-hero-canonical__kicker{color:#0e607f!important;}

/* Espaçamento estável apenas nas ferramentas efetivamente migradas. */
html body.cdn-tools-standalone .cdn-tools-page:is([data-cdn-tool="generator"],[data-cdn-tool="compare"],[data-cdn-tool="laboratory"],[data-cdn-tool="lab-radar"],[data-cdn-tool="lab-context"],[data-cdn-tool="popularity"]) .cdn-tool-hero-canonical{
  margin-bottom:26px!important;
}
html body.cdn-archive-standalone .cdn-functional-tool-shell>.cdn-tool-hero-canonical{
  margin-bottom:24px!important;
}

@media(max-width:820px){
  .cdn-tool-hero-canonical__promises{grid-template-columns:1fr;}
}
@media(max-width:620px){
  .cdn-tool-hero-canonical{
    margin-bottom:20px;
    padding:22px 20px;
    border-radius:16px;
  }
  .cdn-tool-hero-canonical::before{left:12px;right:12px;}
  .cdn-tool-hero-canonical h1{font-size:34px!important;line-height:1.12!important;}
  .cdn-tool-hero-canonical__lead{font-size:16px!important;line-height:1.55!important;}
  .cdn-tool-hero-canonical__promises{gap:9px;margin-top:20px;}
  .cdn-tool-hero-canonical__promise{padding:13px;}
}