/* buttons */
.btn {
  font-family: var(--fonte-mono); font-size: var(--fs-mini); text-decoration: none;
  padding: .6rem 1.2rem; border-radius: var(--radius-sm); border: 1px solid var(--linha);
  color: var(--texto); display: inline-flex; align-items: center; gap: .5rem;
  transition: all .15s ease; background: transparent; cursor: pointer;
  letter-spacing: .04em;
}
.btn:hover { border-color: var(--accent); color: var(--accent-2); }
.btn:active { transform: scale(.98); }
.btn.primario {
  background: var(--accent); color: var(--texto-sobre-accent); border-color: var(--accent); font-weight: 600;
}
.btn.primario:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--texto-sobre-accent); }
.btn--sm { font-size: var(--fs-mini); padding: .45rem .9rem; }
.btn--lg { font-size: var(--fs-sm); padding: .75rem 1.5rem; }

/* cards */
.card {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--radius-lg);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
  transition: border-color .25s, box-shadow .25s; position: relative; overflow: hidden;
}
.card::before {
  content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),.08), transparent 70%);
  transition: opacity .3s ease;
}
.card:hover { border-color: var(--accent); box-shadow: 0 8px 32px -8px rgba(var(--accent-rgb),.12); }
.card:hover::before { opacity: 1; }
.card h3 { font-size: var(--fs-body); font-weight: 600; color: var(--texto); position: relative; }
.card p { color: var(--texto-fraco); font-size: var(--fs-sm); line-height: 1.55; position: relative; }

/* case card — capa com crossfade + contador + hint */
.case-card { cursor: pointer; }
.case-card:hover, .case-card:focus-visible { box-shadow: 0 16px 40px -16px rgba(var(--accent-rgb),.25); outline: none; }
.tag-flag { display: inline-flex; align-items: center; gap: .4rem; }
.tag-flag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.16);
}
.case-media {
  position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-md);
  overflow: hidden; border: 1px solid var(--linha); background: var(--superficie-2);
}
.case-media .capa {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; transition: opacity .6s var(--ease-out), transform .5s var(--ease-out);
}
.case-media .capa-b { opacity: 0; }
.case-card:hover .capa-a, .case-card:focus-visible .capa-a { opacity: 0; }
.case-card:hover .capa-b, .case-card:focus-visible .capa-b { opacity: 1; }
.case-card:hover .case-media .capa, .case-card:focus-visible .case-media .capa { transform: scale(1.035); }
.case-count {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  font-family: var(--fonte-mono); font-size: var(--fs-micro); color: var(--texto);
  background: rgba(var(--fundo-rgb), .75); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm); padding: .2rem .5rem;
  display: flex; align-items: center; gap: .25rem; letter-spacing: .02em;
}
.case-hint {
  position: absolute; left: .75rem; bottom: .75rem; z-index: 2;
  font-family: var(--fonte-mono); font-size: var(--fs-mini); color: var(--texto-sobre-accent);
  background: var(--accent); border-radius: var(--radius-sm); padding: .3rem .7rem; font-weight: 600;
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
  display: inline-flex; align-items: center; gap: .25rem;
}
.case-card:hover .case-hint, .case-card:focus-visible .case-hint { opacity: 1; transform: none; }

/* metric card */
.metric-card {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--radius-lg);
  padding: var(--sp-6); text-align: center;
  transition: border-color .25s, box-shadow .25s; position: relative; overflow: hidden;
}
.metric-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),.08), transparent 70%);
  transition: opacity .3s ease;
}
.metric-card:hover { border-color: var(--accent); box-shadow: 0 8px 32px -8px rgba(var(--accent-rgb),.12); }
.metric-card:hover::before { opacity: 1; }
.metric-card strong {
  display: block; font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 800; color: var(--accent);
  letter-spacing: -.03em; position: relative;
}
.metric-card span {
  font-family: var(--fonte-mono); font-size: var(--fs-mini); color: var(--texto-fraco);
  text-transform: uppercase; letter-spacing: .1em; margin-top: .4rem; display: block; position: relative;
}

/* service card */
.service-card {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--radius-lg);
  padding: var(--sp-6);
  transition: border-color .25s, box-shadow .25s; position: relative; overflow: hidden;
}
.service-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),.08), transparent 70%);
  transition: opacity .3s ease;
}
.service-card:hover { border-color: var(--accent); box-shadow: 0 8px 32px -8px rgba(var(--accent-rgb),.12); }
.service-card:hover::before { opacity: 1; }
.service-card .svc-number {
  font-family: var(--fonte-mono); font-size: var(--fs-mini); color: var(--accent);
  text-transform: uppercase; letter-spacing: .15em; margin-bottom: var(--sp-3); position: relative;
}
.service-card h3 { font-size: var(--fs-body); font-weight: 700; color: var(--texto); margin-bottom: var(--sp-2); position: relative; }
.service-card p { font-size: var(--fs-sm); color: var(--texto-fraco); line-height: 1.6; position: relative; }

/* etapa — "como funciona" steps */
.etapa {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--radius-lg);
  padding: var(--sp-5); overflow: hidden; position: relative;
  transition: border-color .25s, box-shadow .25s;
}
.etapa::before {
  content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),.08), transparent 70%);
  transition: opacity .3s ease;
}
.etapa:hover { border-color: var(--accent); box-shadow: 0 8px 32px -8px rgba(var(--accent-rgb),.12); }
.etapa:hover::before { opacity: 1; }
.etapa-num {
  font-family: var(--fonte-mono); font-size: 1.5rem; font-weight: 800; color: var(--accent);
  display: block; margin-bottom: var(--sp-3); position: relative;
}
.etapa h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-body); font-weight: 700; color: var(--texto); position: relative; }
.etapa p { margin: 0; color: var(--texto-fraco); font-size: var(--fs-sm); line-height: 1.55; position: relative; }

/* rejeicao — "o que não somos" cards with top accent bar */
.rejeicao {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--radius-lg);
  padding: var(--sp-5); position: relative; overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.rejeicao::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
}
.rejeicao:hover { border-color: var(--accent); box-shadow: 0 8px 32px -8px rgba(var(--accent-rgb),.12); }
.rejeicao .rej-icon {
  font-family: var(--fonte-mono); font-size: var(--fs-lead); color: var(--accent);
  margin-bottom: var(--sp-2); display: block; position: relative;
}
.rejeicao h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-body); font-weight: 700; color: var(--texto); position: relative; }
.rejeicao p { margin: 0; color: var(--texto-fraco); font-size: var(--fs-sm); line-height: 1.55; position: relative; }

/* capacidade — compact skill cards */
.capacidade {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5); position: relative; overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.capacidade::before {
  content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),.08), transparent 70%);
  transition: opacity .3s ease;
}
.capacidade:hover { border-color: var(--accent); box-shadow: 0 8px 32px -8px rgba(var(--accent-rgb),.12); }
.capacidade:hover::before { opacity: 1; }
.capacidade strong { display: block; font-size: var(--fs-body); font-weight: 700; color: var(--texto); margin-bottom: var(--sp-1); position: relative; }
.capacidade span { color: var(--texto-fraco); font-size: var(--fs-sm); line-height: 1.5; position: relative; }

/* faixa-numeros — wrapped number row */
.faixa-numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--radius-lg);
  padding: var(--sp-5); position: relative; overflow: hidden;
}
.faixa-numeros::before {
  content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),.06), transparent 70%);
  transition: opacity .3s ease;
}
.faixa-numeros:hover::before { opacity: 1; }
.faixa-numeros .numero { position: relative; text-align: center; }
.faixa-numeros .numero strong {
  font-family: var(--fonte-mono); display: block; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800;
  color: var(--accent); letter-spacing: -.03em; position: relative;
}
.faixa-numeros .numero span {
  font-family: var(--fonte-mono); font-size: var(--fs-micro); color: var(--texto-fraco);
  text-transform: uppercase; letter-spacing: .1em; display: block; margin-top: .3rem; position: relative;
}

/* provedores de IA — ticker badge + modal */
.tech-icon {
  width: 32px; height: 32px; margin: 0 auto var(--sp-2);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm, 6px); background: var(--superficie-2);
  border: 1px solid var(--linha); color: var(--accent);
  transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.tech-icon svg { width: 17px; height: 17px; display: block; }
.numero:hover .tech-icon,
.tech-card:hover .tech-icon {
  border-color: var(--accent); background: rgba(var(--accent-rgb), .12); transform: translateY(-1px);
}

.prov-icon {
  width: 34px; height: 34px; margin: 0 auto var(--sp-3);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); background: var(--superficie-2);
  border: 1px solid var(--linha); color: var(--accent);
  font-family: var(--fonte-mono); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .02em; transition: border-color .2s ease;
}
.numero:hover .prov-icon { border-color: var(--accent); }
.prov-overlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.prov-overlay.is-open { display: flex; }
.prov-backdrop { position: absolute; inset: 0; background: var(--overlay-bg); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s var(--ease-out); }
.prov-overlay.is-open .prov-backdrop { opacity: 1; }
.prov-dialog {
  position: relative; z-index: 1; width: 100%; max-width: 640px; max-height: 85vh; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--radius-xl);
  padding: 2.25rem 2rem; box-shadow: 0 24px 64px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.prov-overlay.is-open .prov-dialog { opacity: 1; transform: none; }
.prov-close {
  position: absolute; top: .9rem; right: .9rem; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--linha); background: var(--superficie-2); color: var(--texto);
  font-size: var(--fs-lead); line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, color .2s, transform .2s;
}
.prov-close:hover { background: var(--accent); color: var(--texto-sobre-accent); border-color: transparent; transform: rotate(90deg); }
.prov-modal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .7rem; }
.prov-modal-grid .numero { text-align: center; }
.prov-modal-grid .numero strong { display: block; margin-bottom: .2rem; }
.prov-modal-grid .numero span {
  display: block; font-family: var(--fonte-mono); font-size: var(--fs-micro); color: var(--texto-fraco);
  text-transform: uppercase; letter-spacing: .1em;
}
@media (max-width: 640px) { .prov-dialog { padding: 1.75rem 1.25rem; } }

/* modal de tecnologias & ferramentas */
.tech-overlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.tech-overlay.is-open { display: flex; }
.tech-backdrop { position: absolute; inset: 0; background: var(--overlay-bg); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s var(--ease-out); }
.tech-overlay.is-open .tech-backdrop { opacity: 1; }
.tech-dialog {
  position: relative; z-index: 1; width: 100%; max-width: 760px; max-height: 85vh; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--radius-xl);
  padding: 2.25rem 2rem; box-shadow: 0 24px 64px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.tech-overlay.is-open .tech-dialog { opacity: 1; transform: none; }
.tech-close {
  position: absolute; top: .9rem; right: .9rem; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--linha); background: var(--superficie-2); color: var(--texto);
  font-size: var(--fs-lead); line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, color .2s, transform .2s;
}
.tech-close:hover { background: var(--accent); color: var(--texto-sobre-accent); border-color: transparent; transform: rotate(90deg); }
.tech-modal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .65rem; }
.tech-card {
  padding: var(--sp-4); background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--radius-lg);
  text-align: center; transition: border-color .2s ease, transform .2s ease;
}
.tech-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.tech-card strong { display: block; font-family: var(--fonte-mono); font-size: var(--fs-body); font-weight: 700; color: var(--texto); margin-bottom: .2rem; }
.tech-card span { display: block; font-family: var(--fonte-mono); font-size: var(--fs-micro); color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 640px) { .tech-dialog { padding: 1.75rem 1.25rem; } }

/* causa-block */
.causa-block {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--radius-lg);
  padding: 2.25rem 2rem; text-align: center; position: relative; overflow: hidden;
}
.causa-block::before {
  content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),.06), transparent 70%);
  transition: opacity .3s ease;
}
.causa-block:hover::before { opacity: 1; }
.causa-block .causa-label {
  font-family: var(--fonte-mono); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .14em; color: var(--accent); margin-bottom: .7rem;
  display: inline-block; font-weight: 500; position: relative;
}
.causa-block blockquote {
  margin: 0 auto 1rem; max-width: 560px;
  font-family: var(--fonte-display); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem); line-height: 1.35; color: var(--texto);
  position: relative;
}
.causa-block p { margin: 0 auto; max-width: 480px; color: var(--texto-fraco); font-size: var(--fs-sm); line-height: 1.6; position: relative; }

/* tags / pills */
.tag {
  font-family: var(--fonte-mono); font-size: var(--fs-micro); color: var(--accent);
  text-transform: uppercase; letter-spacing: .12em; position: relative;
}
.pill {
  font-family: var(--fonte-mono); font-size: var(--fs-micro); color: var(--texto-fraco);
  background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--radius-sm);
  padding: .2rem .5rem; display: inline-block; position: relative;
}
.pill--pronto, .pill--andamento {
  display: inline-flex; align-items: center; gap: .35rem;
}
.pill--pronto::before, .pill--andamento::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; flex: none;
}
.pill--pronto { color: var(--verde); }
.pill--pronto::before { background: var(--verde); }
.pill--andamento { color: var(--accent); }
.pill--andamento::before { background: var(--accent); }

/* reveal — fallback via animation garante visibilidade mesmo se o
   IntersectionObserver não disparar (aba em segundo plano, erro de JS etc.);
   o JS ainda controla o timing normal via .is-visible quando funciona. */
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }
[data-reveal] {
  opacity: 0; transform: translateY(12px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 50ms);
  animation: reveal-fallback 0.01s 1.5s forwards;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* nav — simulator style */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-4) var(--sp-6);
  background: rgba(var(--fundo-rgb), .95);
  border-bottom: 1px solid var(--linha);
}
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.nav__brand {
  font-family: var(--fonte-mono); font-size: var(--fs-mini); letter-spacing: .06em; color: var(--texto-fraco);
}
.nav__brand strong { color: var(--accent); font-weight: 600; }
.nav__links { display: flex; gap: var(--sp-6); font-size: var(--fs-mini); color: var(--texto-fraco); }
.nav__links a { color: var(--texto-fraco); transition: color .15s; }
.nav__links a:hover { color: var(--texto); }
.nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; }
.nav__toggle span { display: block; width: 20px; height: 2px; background: var(--texto); position: relative; }
.nav__toggle span::before, .nav__toggle span::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: var(--texto);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }

@media (max-width: 768px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed; inset: 0; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-8); background: rgba(var(--fundo-rgb), .97); backdrop-filter: blur(12px);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out);
    font-size: var(--fs-lead);
  }
  .nav__links.is-open { opacity: 1; pointer-events: auto; }
}

/* hero — minimal dark like simulator */
.hero {
  position: relative; overflow: hidden;
  padding: 8rem var(--sp-6) 5rem; text-align: center;
  background: var(--fundo);
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 10%, rgba(var(--accent-rgb),.04), transparent 70%);
}
.hero > * { position: relative; z-index: 1; }
.hero__eyebrow {
  font-family: var(--fonte-mono); text-transform: uppercase; letter-spacing: .16em;
  font-size: var(--fs-micro); color: var(--accent); font-weight: 500;
}
.hero h1 {
  font-weight: 700; font-style: normal;
  font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.12; margin: var(--sp-5) auto 0; max-width: 720px;
  letter-spacing: -.025em; color: var(--texto);
}
.hero h1 em { color: var(--accent); font-style: normal; }
.hero__sub {
  max-width: 500px; margin: var(--sp-5) auto 0; color: var(--texto-fraco); font-size: var(--fs-body); line-height: 1.6;
}
.hero__cta { margin-top: var(--sp-7); display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* scroll progress */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .08s linear;
}

/* footer */
.footer {
  border-top: 1px solid var(--linha); margin-top: var(--sp-16);
  padding: var(--sp-10) var(--sp-6); text-align: center; color: var(--texto-fraco); font-size: var(--fs-mini);
  background: var(--superficie);
}
.footer a { color: var(--texto-fraco); transition: color .15s; }
.footer a:hover { color: var(--accent); text-decoration: none; }
.footer__links { display: flex; gap: var(--sp-6); justify-content: center; margin-bottom: var(--sp-4); flex-wrap: wrap; }

/* section header */
.section-header { margin-bottom: var(--sp-8); }
.section-sub { color: var(--texto-fraco); font-size: var(--fs-sm); line-height: 1.55; max-width: 56ch; margin-top: var(--sp-2); }

.eyebrow {
  font-family: var(--fonte-mono); font-size: var(--fs-micro); color: var(--accent);
  text-transform: uppercase; letter-spacing: .14em; margin-bottom: var(--sp-2); font-weight: 500;
}
.section-header h2 {
  font-size: clamp(1.3rem, 2.8vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; color: var(--texto);
}

/* grid layouts */
.container { max-width: 1040px; margin: 0 auto; padding: 0 var(--sp-6); }
.section { padding: var(--sp-12) 0; }
.section--tight { padding: var(--sp-8) 0; }
/* ritmo de espaçamento: agrupamento denso usa gap curto, blocos de leitura
   respiram mais. Um único gap em tudo achata a hierarquia. */
.grid { display: grid; gap: var(--sp-4); }
.grid-3 { gap: var(--sp-5); }
.grid-4 { gap: var(--sp-4); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

@media (max-width: 768px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* social preview — como pensamos redes sociais */
.social-preview-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.social-preview-copy p { color: var(--texto-fraco); font-size: var(--fs-body); line-height: 1.6; margin-bottom: var(--sp-4); }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.social-preview-frame {
  border: 1px solid var(--linha); border-radius: var(--radius-lg); overflow: hidden;
  height: 640px; background: var(--fundo); transition: border-color .2s ease;
}
.social-preview-frame:hover { border-color: var(--accent); }
.social-preview-frame iframe { width: 100%; height: 100%; border: none; display: block; }

@media (max-width: 900px) {
  .social-preview-layout { grid-template-columns: 1fr; }
  .social-preview-frame { height: 560px; }
}

/* CTA section */
.cta-section {
  text-align: center; padding: var(--sp-12) var(--sp-6);
  background: var(--superficie); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
}
.cta-section h2 {
  font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 700; letter-spacing: -.02em; color: var(--texto);
  margin-bottom: var(--sp-5); max-width: 520px; margin-left: auto; margin-right: auto;
}

/* camadas de público — a intensidade do acento encoda o quanto a entrega
   já vem pronta (C1) ou nasce sob medida (C4). O rótulo textual carrega a
   mesma informação, então a cor nunca é o único portador de sentido. */
.camadas { display: grid; gap: var(--sp-3); }
.camada {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 88px 1fr; gap: var(--sp-6); align-items: start;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-6);
  transition: border-color .2s ease, background .2s ease;
}
.camada::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: rgba(var(--accent-rgb), var(--intensidade, 1));
}
.camada:hover { border-color: var(--accent); background: var(--superficie-2); }
.camada__rail { display: flex; flex-direction: column; gap: var(--sp-1); }
.camada__id {
  font-family: var(--fonte-mono); font-weight: 700; font-size: 1.5rem; line-height: 1;
  color: rgba(var(--accent-rgb), calc(.45 + var(--intensidade, 1) * .55));
}
.camada__modo {
  font-family: var(--fonte-mono); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .12em; color: var(--texto-fraco);
}
.camada__corpo h3 {
  font-size: var(--fs-body); font-weight: 700; color: var(--texto);
  letter-spacing: -.01em; margin-bottom: var(--sp-2);
}
.camada__corpo p { color: var(--texto-fraco); font-size: var(--fs-sm); line-height: 1.55; }
.camada__oferta {
  display: inline-block; margin-top: var(--sp-3);
  font-family: var(--fonte-mono); font-size: var(--fs-micro); line-height: 1.5;
  color: var(--texto-suave);
}
.camada__oferta::before { content: '→ '; color: var(--accent); }

@media (max-width: 640px) {
  .camada { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-5); }
  .camada__rail { flex-direction: row; align-items: baseline; gap: var(--sp-3); }
}

/* estado sem captura — case real cuja tela ainda não foi fotografada.
   Evita ícone de imagem quebrada e diz a verdade sobre o que falta. */
.case-media.sem-imagem {
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(rgba(var(--accent-rgb), .05), rgba(var(--accent-rgb), 0)),
    repeating-linear-gradient(135deg, var(--linha-sutil) 0 8px, transparent 8px 16px);
  border-bottom: 1px solid var(--linha);
}
.case-media.sem-imagem::after {
  content: 'captura em produção';
  font-family: var(--fonte-mono); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .14em; color: var(--texto-fraco);
}

/* grid de produtos — 7 itens: 4+3 em vez do 3+3+1 que deixava um card órfão */
.grid-produtos { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
@media (max-width: 900px) { .grid-produtos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-produtos { grid-template-columns: 1fr; } }

/* escala de títulos do sistema — nenhum h2/h3 fica sem tamanho definido,
   e nenhuma página inventa o seu próprio clamp inline. */
h2 { font-size: clamp(1.3rem, 2.8vw, 1.6rem); line-height: 1.2; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
.numero-label,
.faixa-numeros .numero strong.numero-label { font-size: clamp(.82rem, 1.3vw, 1.02rem); font-weight: 700; }
.faixa-numeros .numero strong.numero-label + span { font-size: 0.65rem; letter-spacing: .08em; margin-top: .2rem; }
.prov-modal-grid .numero strong.numero-label { font-size: var(--fs-sm); }

/* card de provedor no modal — era estilo inline repetido 10 vezes */
.prov-card {
  padding: var(--sp-4); background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--radius-lg);
  transition: border-color .2s ease;
}
.prov-card:hover { border-color: var(--accent); }