/* =====================================================================
   Shiel ID — tema SaaS editorial quente (contexto visual do vídeo R9) para as páginas do site.
   Carregado depois das folhas de cada página: troca tokens, tipografia, superfícies e botões sem
   mudar a estrutura. Fundo de papel, Space Grotesk 400/500, títulos que esmaecem da tinta para o
   cinza quente, um só acento laranja, cards brancos com sombra quente, nada de seção escura.
   As LPs de produto usam lp-saas.css e não carregam este arquivo.
   ===================================================================== */

:root {
  --bg: #FAF5F0;
  --pill: #F1E8DF;
  --surface: #FFFFFF;
  --ink: #111317;
  --gray-700: #3F3A36;
  --gray-500: #7A726C;
  --gray-400: #A39A93;
  --gray-300: #D9CFC6;
  --hair: #E6DCD2;

  --accent: #FF5114;
  --accent-strong: #E8430A;
  --accent-soft: #FF7A45;
  --accent-magenta: #FF0066;
  /* gradiente da marca só no símbolo e no fio; como fundo, vira o laranja sólido */
  --brand-grad: linear-gradient(90deg, #FF5114, #FF5114);

  --t-beige: #EFE6DD;
  --t-warm: #8E857F;
  --t-tint: #FFEDE5;
  --t-shadow: 0 14px 44px rgba(74, 54, 40, 0.12);
  --t-shadow-big: 0 26px 90px rgba(74, 54, 40, 0.14);
  --t-title: linear-gradient(90deg, #111317 0%, #111317 32%, #8E857F 92%);

  --font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.6, 0, 0.12, 1);
}

/* ---------- Tipografia: família única, sem negrito ---------- */
html body, html body * { font-family: var(--font) !important; font-synthesis: none; }
html body pre, html body pre *, html body code, html body kbd, html body samp { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; }
body { background: var(--bg); color: var(--ink); letter-spacing: -0.005em; }
.lucide { stroke-width: 2; }
b, strong, h3, h4, h5, h6, dt, th, button, .btn, summary { font-weight: 500 !important; }

/* Títulos grandes: Regular, tracking -2,5%, esmaecer horizontal da tinta para o cinza quente */
h1, h2,
.section__title, .bhero__title, .post__title, .diag__title, .gl-title, .gl-h2, .privacy-title,
.showcase__title, .seg2__title, .pain__title, .hubhead__title, .herox__head, .dg__title, .ct__title,
.ct__h2--lg, .cta-card__title, .hero__title, .stats__title, .news__title {
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  text-transform: none !important;
  background: var(--t-title);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-wrap: balance;
}
/* palavras destacadas entram no mesmo esmaecer em vez de ganhar cor própria */
h1 em, h2 em, h1 .grad, h2 .grad, h1 span, h2 span, .gl-title__hl, .ct__title em, .pain__title em {
  font-style: normal !important;
  background: none !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* títulos em blocos que continuam sobre imagem ou fundo próprio mantêm cor sólida */
.callout h2, .codewin h2 { background: none; -webkit-text-fill-color: currentColor; color: inherit; }

/* Sobretítulos: caixa alta com tracking largo, em cinza de apoio, ponto laranja */
.eyebrow, .post__eyebrow, .diag__eyebrow, .cta-card__eyebrow, .gl-kicker, .midcta__label, .hubcard__tag {
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--gray-500) !important;
  border-color: transparent !important;
}
.eyebrow::before, .post__eyebrow::before, .diag__eyebrow::before { background: var(--accent) !important; }

/* Texto corrido */
p, li, dd { color: inherit; }
.lead, .bhero__sub, .post__lead, .section__lead { color: var(--gray-500); letter-spacing: -0.01em; }

/* ---------- Botões: pílula, primário laranja com sombra quente ---------- */
.btn, .nav__cta, .navmenu__cta, .cform__submit, .ct__submit, .seccta__btn, button[type="submit"] {
  border-radius: 999px !important;
  letter-spacing: -0.01em;
}
.btn--primary, .cform__submit, .ct__submit, .seccta .btn--outline-dark, .gl-btn, .dg__submit {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 12px 32px rgba(255, 81, 20, 0.30) !important;
  filter: none !important;
}
.btn--primary:hover, .cform__submit:hover, .ct__submit:hover, .seccta .btn--outline-dark:hover, .gl-btn:hover, .dg__submit:hover {
  background: var(--accent-strong) !important;
  box-shadow: 0 18px 44px rgba(255, 81, 20, 0.38) !important;
}
.btn--outline-dark, .btn--ghost-dark, .btn--light {
  background: #fff !important; color: var(--ink) !important;
  border: 1.5px solid var(--hair) !important; box-shadow: none !important;
}
.btn--outline-dark:hover, .btn--ghost-dark:hover, .btn--light:hover { background: var(--pill) !important; color: var(--ink) !important; }

/* ---------- Superfícies: cards brancos com sombra quente, bege nas de apoio ---------- */
.pcard, .pillar, .xcard, .faqitem, .also__card, .hubcard, .reg, .trigger, .flowstep, .ben, .feat,
.ct__card, .ct__rcard, .dg__card, .gl-card, .gl-hub__card, .sidcols__item, .siduse, .sidcat, .cform,
.cta-card, .svc, .seg2__card, .stat, .impact__item, .principle, .sector-card, .founder {
  border-color: var(--hair) !important;
  box-shadow: var(--t-shadow);
}
.pcard__icon, .pillar__icon, .flowstep__ic, .reg__ic, .trigger__ic, .ben__ic, .feat__ic, .callout__ic {
  background: var(--accent) !important; color: #fff !important; border-radius: 50% !important; box-shadow: none !important;
}
.pcard__icon .lucide, .pillar__icon .lucide, .flowstep__ic .lucide, .reg__ic .lucide, .trigger__ic .lucide, .ben__ic .lucide, .feat__ic .lucide { color: #fff !important; }
.pillar__edge { background: var(--accent) !important; width: 3px !important; }

/* Blocos que eram escuros viram papel, com o texto em tinta */
.pain, .callout, .whynow, .manifesto > .wrap, .diag, .midcta {
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: var(--t-shadow);
}
.pain { background: var(--bg) !important; box-shadow: none; }
.manifesto > .wrap { box-shadow: var(--t-shadow-big); }
.callout, .whynow { background: var(--pill) !important; box-shadow: none; }
.callout p, .whynow p, .manifesto .lead, .manifesto .lead + .lead, .diag p, .midcta p, .pain__item small { color: var(--gray-500) !important; }
.callout b, .whynow b, .diag b, .midcta b { color: var(--ink) !important; }
.whynow__tag { color: var(--accent) !important; }
.manifesto .section__title { background: var(--t-title); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.manifesto .eyebrow { background: none !important; }
.pain__item { color: var(--ink) !important; border-color: var(--hair) !important; }
.pain__item:last-child { border-bottom-color: var(--hair) !important; }
.pain__item .x { background: var(--accent) !important; color: #fff !important; border: 0 !important; }
.midcta__text, .post__body .midcta__text { color: var(--ink) !important; }
.diag__title { background: var(--t-title) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.diag .btn, .midcta .btn { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* FAQ: pergunta em Medium, sinal de mais em ponto bege que vira laranja */
.faqq__plus { background: var(--t-beige) !important; border: 0 !important; color: var(--ink) !important; border-radius: 50% !important; }
.faqitem.is-open .faqq__plus { background: var(--accent) !important; color: #fff !important; }

/* Formulários: campos em pílula com contorno de 1,5 px e foco laranja */
.cform input[type="text"], .cform input[type="email"], .cform input[type="tel"], .cform select, .cform textarea,
.ct__input, .dg__input, .gl-input, .gl-form input, .gl-form select {
  border: 1.5px solid var(--hair) !important;
  background-color: #fff !important;
  color: var(--ink);
}
.cform input:focus, .cform select:focus, .cform textarea:focus, .ct__input:focus, .dg__input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(255, 81, 20, 0.35) !important;
  outline: none;
}
input[type="checkbox"] { accent-color: var(--accent); }

/* Tags e pílulas de contexto em bege */
.bhero__pill, .tag, .chip, .hubchip, .soon, .pillar__tag, .sidpills li {
  background: var(--pill) !important; border-color: transparent !important; color: var(--ink) !important;
}
.hubchip.is-active { background: var(--accent) !important; color: #fff !important; }

/* Sombras dos destaques que eram frias */
.bhero__card, .bhero__media, .codewin, .showcase__frame, .panel-app, .dash { box-shadow: var(--t-shadow-big) !important; }

/* Links de texto */
.post__body a, .privacy a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* Seleção e foco */
::selection { background: var(--t-tint); color: var(--ink); }
:focus-visible { outline-color: var(--accent); }

/* Títulos com partes animadas: o recorte do degradê não alcança elementos com transform, então cada
   parte animada leva a própria cor. Na home, cada linha esmaece sozinha; nos setores, a palavra que
   gira fica no cinza quente, como o fim do esmaecer. */
.herox__head { background: none !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; }
.herox__line > span {
  display: inline-block !important;
  background: linear-gradient(90deg, #111317 20%, #8E857F 110%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.herox__line > .herox__grad { background: linear-gradient(90deg, #6F6761, #A39A93) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.rotator__word { background: none !important; -webkit-text-fill-color: var(--t-warm) !important; color: var(--t-warm) !important; }

/* Guias: cartão "Sobre a Shiel ID" e cartão de chamada do hub saem do escuro */
.gl-about__card, .gl-hub__card--cta { background: var(--pill) !important; color: var(--ink) !important; box-shadow: none !important; }
.gl-about__card .gl-kicker { color: var(--gray-500) !important; }
.gl-about__card .gl-h2 { background: var(--t-title) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.gl-about__text, .gl-hub__card--cta p { color: var(--gray-500) !important; }
.gl-about__chips li { background: #fff !important; color: var(--ink) !important; }
.gl-hub__card--cta h3 { color: var(--ink) !important; }
.gl-hub__cta-ic { background: var(--accent) !important; color: #fff !important; border-radius: 50% !important; }

/* Palavra que gira no título (setores e institucional): só a palavra ativa fica na tela. Ela entra
   subindo e saindo do desfoque; a anterior some na hora. Assim as palavras nunca se sobrepõem. */
.rotator__word { transition: none !important; }
.rotator__word:not(.is-active) { opacity: 0 !important; visibility: hidden !important; }
.rotator__word.is-active { visibility: visible; animation: rotIn .6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes rotIn { from { opacity: 0; translate: 0 0.32em; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .rotator__word.is-active { animation: none; } }

/* Home: título acima do vídeo, centralizado */
.video__inner { flex-direction: column; align-items: center; }
.video__head { text-align: center; margin: 0 auto clamp(28px, 4vw, 48px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.video__head .section__title { margin: 0; }