/* Lobran · design system do site institucional (lobran.rio)
   Tokens de marca herdados de lobran/ e lobran-diagnostico/. Sem framework: CSS puro, sem build.
   Direção visual "prancha de engenharia" (2026-09-27): tipografia derivada do logotipo geométrico (Jost),
   texto em IBM Plex (família de documentação técnica), anotações em mono como cotas de desenho,
   cantos retos, carimbo no lugar de "faixa de números", sem brilhos coloridos. Critérios e fontes:
   framework/03_modules/lobran_institucional.md §"Design humanizado e vieses cognitivos". */

:root {
  --ink: #0b1a22;
  --ink-700: #12242e;
  --ink-600: #1a3541;
  --petrol: #12665f;
  --petrol-400: #2fa79a;
  --amber: #e9a23b;
  --amber-600: #d0872a;
  --danger: #c1554a;
  --mist: #e9f0f1;
  --paper: #ffffff;
  --muted: #8fa6ad;
  --text: #0b1a22;
  --text-2: rgba(11, 26, 34, .72);
  --text-3: rgba(11, 26, 34, .55);
  --line: rgba(11, 26, 34, .09);
  --on-dark: #e9f0f1;
  --on-dark-2: rgba(233, 240, 241, .78);
  --on-dark-3: rgba(233, 240, 241, .55);
  --line-dark: rgba(255, 255, 255, .12);

  --brand: #51a8b1;
  --f-display: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --f-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r-sm: 4px; --r: 6px; --r-lg: 8px; --r-pill: 999px;
  --wrap: 1160px; --wrap-narrow: 760px;

  --sh-card: 0 1px 0 rgba(6, 18, 24, .05), 0 8px 18px -14px rgba(6, 18, 24, .22);
  --sh-lift: 0 1px 0 rgba(6, 18, 24, .06), 0 14px 26px -16px rgba(6, 18, 24, .32);
  --sh-float: 0 18px 40px -22px rgba(6, 18, 24, .5);

  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font-family: var(--f-body); font-size: 1rem; line-height: 1.7; color: var(--text); background: var(--mist); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.wrap--narrow { max-width: var(--wrap-narrow); }
@media (min-width: 640px) { .wrap { padding-inline: 32px; } }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--amber); color: var(--ink); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- tipografia ---------- */
.h1 { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.04; letter-spacing: -0.025em; color: #fff; max-width: 18ch; }
.h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 2.55rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 26ch; }
.h2--light { color: #fff; }
.hl { color: var(--amber); }
/* rótulo de seção como cota de desenho técnico: traço com terminais + texto em mono, sem caixa alta */
.eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: .8rem; font-weight: 500; letter-spacing: 0; color: var(--petrol); margin-bottom: var(--s4); }
.eyebrow::before { content: ''; flex-shrink: 0; width: 22px; height: 7px; border-inline: 1px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; opacity: .8; }
.eyebrow--amber { color: var(--amber); }
.lead { font-size: 1.1rem; line-height: 1.75; color: var(--text-2); max-width: 62ch; margin-top: var(--s5); }
.lead--light { color: var(--on-dark-2); }
.note { margin-top: var(--s6); color: var(--text-2); }
.prose p { color: var(--text-2); font-size: 1.06rem; }
.prose p + p { margin-top: var(--s4); }
.prose strong { color: var(--text); }
.more { margin-top: var(--s6); }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); border-radius: var(--r); font-weight: 600; text-decoration: none; line-height: 1.2; text-align: center; border: 1px solid transparent; cursor: pointer;
  transition: transform .22s var(--spring), box-shadow .22s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--sm { padding: 9px 16px; font-size: .86rem; }
.btn--lg { padding: 15px 26px; font-size: 1rem; }
.btn--amber { background: var(--amber); color: var(--ink); box-shadow: inset 0 -2px 0 rgba(11, 26, 34, .18); }
.btn--amber:hover { background: var(--amber-600); }
.btn--ghost-light { color: var(--on-dark); border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .04); }
.btn--ghost-light:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .08); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.btn-row--center { justify-content: center; }
@media (max-width: 479px) { .btn-row .btn--lg { width: 100%; } }

.link-arrow { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; color: var(--petrol); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color .18s var(--ease); }
.link-arrow::after { content: ''; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .22s var(--spring); }
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover::after { transform: translateX(3px) rotate(45deg); }
.link-arrow--light { color: var(--amber); }
.link-arrow--light:hover { color: #fff; }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--ink); border-bottom: 1px solid var(--line-dark); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); height: 68px; }
.hdr__brand { display: flex; align-items: center; flex-shrink: 0; }
.logo { height: 26px; width: auto; }
.logo--inv { filter: brightness(0) invert(1); }
.hdr__act { display: flex; align-items: center; gap: var(--s3); }

.nav { display: none; align-items: center; gap: var(--s2); }
@media (min-width: 1120px) { .nav { display: flex; } }
.nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--r-sm); font-size: .92rem; color: var(--on-dark-2); text-decoration: none; cursor: pointer; list-style: none; transition: color .18s var(--ease), background-color .18s var(--ease); }
.nav__link::-webkit-details-marker { display: none; }
.nav__link:hover, .nav__link[aria-current="page"], .nav__link.is-cur { color: #fff; background: rgba(255, 255, 255, .06); }
.nav__caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); }
.nav__drop { position: relative; }
.nav__drop[open] .nav__caret { transform: rotate(225deg) translateY(-1px); }
.nav__panel { position: absolute; top: calc(100% + 10px); left: -12px; width: 340px; padding: var(--s2); border-radius: var(--r); background: var(--ink-700); border: 1px solid var(--line-dark); box-shadow: var(--sh-float); }
.nav__item { display: block; padding: 12px 14px; border-radius: var(--r-sm); text-decoration: none; transition: background-color .16s var(--ease); }
.nav__item strong { display: block; color: #fff; font-size: .94rem; }
.nav__item span { display: block; color: var(--on-dark-3); font-size: .82rem; line-height: 1.45; margin-top: 2px; }
.nav__item:hover, .nav__item[aria-current="page"] { background: rgba(255, 255, 255, .06); }

.mnav { position: relative; }
@media (min-width: 1120px) { .mnav { display: none; } }
.mnav__btn { list-style: none; display: grid; place-content: center; gap: 4px; width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--line-dark); cursor: pointer; transition: background-color .18s var(--ease); }
.mnav__btn::-webkit-details-marker { display: none; }
.mnav__btn:hover { background: rgba(255, 255, 255, .06); }
.mnav__btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--on-dark); transition: transform .22s var(--ease), opacity .18s var(--ease); }
.mnav[open] .mnav__btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mnav[open] .mnav__btn span:nth-child(2) { opacity: 0; }
.mnav[open] .mnav__btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mnav__panel { position: fixed; top: 68px; left: 0; right: 0; max-height: calc(100vh - 68px); overflow-y: auto; padding: var(--s4) 20px var(--s6); background: var(--ink); border-bottom: 1px solid var(--line-dark); box-shadow: var(--sh-float); display: grid; gap: 2px; }
.mnav__panel a { padding: 14px 4px; color: var(--on-dark); text-decoration: none; font-size: 1.05rem; border-bottom: 1px solid var(--line-dark); }
.mnav__panel a[aria-current="page"] { color: var(--amber); }
.mnav__g { margin-top: var(--s4); padding: 0 4px 4px; font-family: var(--f-mono); font-size: .74rem; color: var(--on-dark-3); }
.mnav__g + a { border-top: 1px solid var(--line-dark); }
.mnav__panel .mnav__cta { margin-top: var(--s4); border: 0; border-radius: var(--r); background: var(--amber); color: var(--ink); text-align: center; font-weight: 600; }
.mnav__panel .mnav__cta--ghost { margin-top: var(--s2); background: transparent; color: var(--on-dark); border: 1px solid rgba(255, 255, 255, .28); }
@media (max-width: 479px) { .hdr__act .btn--sm:not(.hdr__solo) { display: none; } }

/* ---------- hero ---------- */
.grain { position: relative; isolation: isolate; }
.grain::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero { background: var(--ink); color: var(--on-dark); overflow: hidden; }
/* fundo = folha de desenho: malha milimetrada (linha fina a cada 14 px, grossa a cada 70 px), uma luz só */
.hero__bg { position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(60% 70% at 88% 0%, rgba(81, 168, 177, .16), transparent 62%), #0b1a22; }
.hero__bg::after { content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(233, 240, 241, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(233, 240, 241, .055) 1px, transparent 1px),
    linear-gradient(rgba(233, 240, 241, .022) 1px, transparent 1px), linear-gradient(90deg, rgba(233, 240, 241, .022) 1px, transparent 1px);
  background-size: 70px 70px, 70px 70px, 14px 14px, 14px 14px;
  -webkit-mask-image: linear-gradient(100deg, transparent 8%, #000 70%); mask-image: linear-gradient(100deg, transparent 8%, #000 70%); }
.hero__in { padding-block: var(--s8) var(--s8); }
@media (min-width: 768px) { .hero__in { padding-block: var(--s9) 112px; } }
.hero--compact .hero__in { padding-block: var(--s8); }
.hero__lead { font-size: 1.14rem; }
/* fatos do hero como carimbo de prancha: células com fio, valor e anotação em mono */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s8); max-width: 880px; border-top: 1px solid rgba(233, 240, 241, .14); border-left: 1px solid rgba(233, 240, 241, .14); }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts > div { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; border-right: 1px solid rgba(233, 240, 241, .14); border-bottom: 1px solid rgba(233, 240, 241, .14); }
.facts dt { font-family: var(--f-display); font-size: clamp(1.2rem, 4.2vw, 1.5rem); font-weight: 500; letter-spacing: -0.01em; color: #fff; line-height: 1.15; }
.facts dd { font-family: var(--f-mono); font-size: .74rem; line-height: 1.45; color: var(--on-dark-3); }

/* ---------- migalhas ---------- */
.crumbs { display: flex; gap: var(--s2); align-items: center; font-size: .82rem; color: var(--text-3); padding-top: var(--s4); padding-bottom: var(--s4); background: transparent; }
.crumbs a { color: var(--petrol); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
main > .crumbs { position: absolute; left: 0; right: 0; z-index: 2; color: var(--on-dark-3); }
main > .crumbs a { color: var(--on-dark-2); }
main { position: relative; }

/* ---------- seções ---------- */
.sec { padding-block: var(--s8); }
@media (min-width: 768px) { .sec { padding-block: var(--s9); } }
.sec--tight { padding-block: var(--s6); }
@media (min-width: 768px) { .sec--tight { padding-block: var(--s7); } }
.sec--white { background: var(--paper); border-block: 1px solid var(--line); }
.sec--mist { background: var(--mist); }
.sec--ink { background: var(--ink); color: var(--on-dark); overflow: hidden; }
.sec--ink::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(55% 70% at 92% 0%, rgba(81, 168, 177, .12), transparent 60%); }
.sec .grid, .sec .checks, .sec .steps, .sec .timeline, .sec .split, .sec .scope, .sec .faq, .sec .prose { margin-top: var(--s7); }

/* resumo (GEO): resposta direta */
/* "em resumo" como nota técnica: fio grosso em cima, título em mono, sem gradiente nem barra lateral */
.tldr { position: relative; border-radius: var(--r-sm); background: #f7fafa; border: 1px solid var(--line); border-top: 3px solid var(--ink); padding: var(--s5) var(--s5) var(--s6); }
@media (min-width: 768px) { .tldr { padding: var(--s5) var(--s7) var(--s6); } }
.tldr__t { font-family: var(--f-mono); font-size: .86rem; font-weight: 500; color: var(--text-2); margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.tldr ul { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .tldr ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); } }
.tldr li { color: var(--text-2); line-height: 1.6; padding-left: 18px; position: relative; }
.tldr li::before { content: ''; position: absolute; left: 0; top: .78em; width: 9px; height: 1px; background: var(--petrol); }
.tldr strong { color: var(--text); }

/* grid + cards */
.grid { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 640px) { .grid { gap: var(--s5); } }

.card { position: relative; display: flex; flex-direction: column; gap: var(--s2); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-card); padding: var(--s5); text-decoration: none; color: inherit; transition: transform .26s var(--spring), box-shadow .26s var(--ease), border-color .2s var(--ease); }
.sec--white .card { background: #f6fafa; box-shadow: none; }
.card p { color: var(--text-2); font-size: .95rem; line-height: 1.65; }
.card__t { font-family: var(--f-display); font-size: 1.22rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.card--ink { background: var(--ink) !important; color: var(--on-dark); border-color: var(--ink); box-shadow: var(--sh-card) !important; }
.card--ink .card__t { color: #fff; }
.card--ink p { color: var(--on-dark-2); }
.card--link { cursor: pointer; }
.card--link:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); border-color: rgba(18, 102, 95, .45); }
.card--link:active { transform: translateY(0); }
.card__more { margin-top: auto; padding-top: var(--s3); font-size: .88rem; font-weight: 600; color: var(--petrol); display: inline-flex; align-items: center; gap: var(--s2); }
.card--ink .card__more { color: var(--amber); }
.card__more::after { content: ''; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .22s var(--spring); }
.card--link:hover .card__more::after { transform: translateX(4px) rotate(45deg); }
.tag { align-self: flex-start; display: inline-flex; font-family: var(--f-mono); color: var(--petrol); font-size: .76rem; font-weight: 500; margin-bottom: var(--s1); }
.tag--amber { color: var(--amber); }

/* painéis */
.panel { border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-card); padding: var(--s6) var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
@media (min-width: 768px) { .panel { padding: var(--s6); } }
.panel p { color: var(--text-2); }
.panel__t { font-family: var(--f-display); font-size: 1.4rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }
.panel .checks { margin-top: var(--s3) !important; }
.panel--ink { background: var(--ink); color: var(--on-dark); border-color: rgba(47, 167, 154, .3); box-shadow: var(--sh-float); }
.panel--ink .panel__t { color: #fff; }
.panel--ink p { color: var(--on-dark-2); }
.panel--glass { background: rgba(255, 255, 255, .05); border-color: var(--line-dark); box-shadow: none; }
.panel--risk { background: rgba(193, 85, 74, .12); border-color: rgba(193, 85, 74, .3); box-shadow: none; }
.panel--glass .panel__t, .panel--risk .panel__t { color: #fff; }

/* listas */
.checks { display: grid; gap: var(--s3); }
.checks li { position: relative; padding-left: 30px; color: var(--text-2); line-height: 1.6; }
.checks li::before { content: ''; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%; background: rgba(47, 167, 154, .16); }
.checks li::after { content: ''; position: absolute; left: 6px; top: calc(.3em + 4px); width: 5px; height: 9px; border-right: 2px solid var(--petrol); border-bottom: 2px solid var(--petrol); transform: rotate(45deg); }
.checks strong { color: var(--text); }
.checks--light li { color: var(--on-dark-2); }
.checks--light strong { color: #fff; }
.checks--light li::before { background: rgba(47, 167, 154, .22); }
.checks--light li::after { border-color: var(--petrol-400); }
.checks--warn li { color: var(--on-dark-2); }
.checks--warn li::before { background: rgba(233, 162, 59, .2); }
.checks--warn li::after { left: 8px; top: calc(.3em + 4px); width: 2px; height: 7px; border: 0; background: var(--amber); transform: none; box-shadow: 0 9px 0 -0.5px var(--amber); }
.checks--out li::before { background: rgba(193, 85, 74, .12); }
.checks--out li::after { left: 5px; top: calc(.3em + 8px); width: 8px; height: 2px; border: 0; background: var(--danger); transform: none; }

.split { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.3fr 1fr; gap: var(--s8); } }
.quote { border-radius: var(--r-sm); padding: var(--s6); background: rgba(255, 255, 255, .03); border: 1px solid var(--line-dark); display: grid; gap: var(--s4); }
.quote__t { font-family: var(--f-display); font-size: 1.65rem; line-height: 1.18; letter-spacing: -0.02em; color: var(--amber); font-weight: 500; }
.quote p { color: var(--on-dark-2); }

/* etapas como fluxo: uma linha contínua com nós, sem cartões numerados */
.steps { display: grid; gap: 0; counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.steps li { counter-increment: step; position: relative; padding: 34px var(--s4) var(--s5) 0; border-top: 1px solid rgba(11, 26, 34, .28); }
.steps li::before { content: 'etapa ' counter(step); position: absolute; top: 9px; left: 0; font-family: var(--f-mono); font-size: .74rem; color: var(--petrol); }
.steps li::after { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--petrol); box-shadow: 0 0 0 3px var(--mist); }
.sec--white .steps li::after { box-shadow: 0 0 0 3px var(--paper); }
.steps h3 { font-family: var(--f-display); font-size: 1.18rem; font-weight: 500; margin-bottom: var(--s2); }
.steps p { color: var(--text-2); font-size: .94rem; line-height: 1.6; }

.timeline { display: grid; gap: 0; max-width: 820px; }
.timeline li { display: grid; grid-template-columns: 88px 1fr; gap: var(--s5); padding-block: var(--s5); border-top: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline__y { font-family: var(--f-mono); font-size: 1.05rem; font-weight: 500; color: var(--petrol); line-height: 1.7; }
.timeline p { color: var(--text-2); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.chips li { border-radius: var(--r-sm); background: var(--paper); border: 1px solid rgba(11, 26, 34, .14); padding: 6px 12px; font-size: .88rem; font-weight: 500; }

.scope__box { border-radius: var(--r-lg); padding: var(--s6) var(--s5); background: #f6fafa; border: 1px solid var(--line); }
.scope__box h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: var(--s4); }
.scope__box .checks { margin-top: 0 !important; }
.scope__box--out { background: #fbf6f5; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding-block: var(--s5); font-weight: 600; font-size: 1.04rem; cursor: pointer; border-radius: 4px; transition: color .18s var(--ease); }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary:hover { color: var(--petrol); }
.faq__plus { position: relative; flex-shrink: 0; width: 24px; height: 24px; transition: transform .26s var(--spring); }
.faq__plus::before, .faq__plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -1px 0 0 -6px; background: var(--petrol); }
.faq__plus::after { transform: rotate(90deg); }
.faq__i[open] .faq__plus { transform: rotate(45deg); }
.faq__i p { padding-bottom: var(--s5); color: var(--text-2); max-width: 68ch; }

/* CTA final */
/* CTA final alinhado à esquerda (o centralizado é o padrão de template) */
.cta-band { background: var(--ink); color: var(--on-dark); overflow: hidden; }
.cta-band::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(50% 80% at 100% 100%, rgba(81, 168, 177, .14), transparent 60%); }
.cta-band__in { padding-block: var(--s8); }
@media (min-width: 768px) { .cta-band__in { padding-block: var(--s9); } }
.cta-band .sign { margin-top: var(--s6); font-family: var(--f-mono); font-size: .8rem; color: var(--on-dark-3); }

/* rodapé */
.ftr { background: var(--ink-700); color: var(--on-dark-3); border-top: 1px solid var(--line-dark); padding-block: var(--s8) var(--s6); font-size: .92rem; }
.ftr__top { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ftr__top { grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)); gap: var(--s5); } }
.ftr__brand p { margin-top: var(--s4); max-width: 38ch; line-height: 1.6; color: var(--on-dark-2); }
.ftr__t { color: #fff; font-weight: 600; margin-bottom: var(--s3); }
.ftr ul { display: grid; gap: var(--s2); }
.ftr a { color: var(--on-dark-2); text-decoration: none; transition: color .16s var(--ease); }
.ftr a:hover { color: #fff; }
/* carimbo de prancha: quem responde, com qual registro, e quando a página foi revisada */
.stamp { font-style: normal; margin-top: var(--s7); display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid rgba(233, 240, 241, .2); border-left: 1px solid rgba(233, 240, 241, .2); font-size: .84rem; line-height: 1.45; color: var(--on-dark-2); }
@media (min-width: 640px) { .stamp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .stamp { grid-template-columns: 2fr 1fr 1fr; } }
.stamp__c { padding: 10px 12px 12px; border-right: 1px solid rgba(233, 240, 241, .2); border-bottom: 1px solid rgba(233, 240, 241, .2); }
@media (min-width: 640px) { .stamp__c--wide { grid-column: span 2; } }
@media (min-width: 1000px) { .stamp__c--wide { grid-column: auto; } }
.stamp__c span { display: block; margin-bottom: 3px; font-family: var(--f-mono); font-size: .7rem; color: var(--on-dark-3); }
.ftr__note { margin-top: var(--s4); font-size: .8rem; color: var(--on-dark-3); }

/* ---------- ferramenta: calculadora de cabos (/enrolados/) ---------- */
.calc { display: grid; gap: var(--s4); padding: var(--s5); border-radius: var(--r-sm); background: #f7fafa; color: var(--ink); border-top: 3px solid var(--brand); }
@media (max-width: 479px) { .calc { padding: var(--s4); } }
.calc__t { font-family: var(--f-mono); font-size: .84rem; color: var(--text-2); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.calc__f { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.calc__f > label, .calc__where legend { font-weight: 600; font-size: .92rem; padding: 0; }
.calc__f small { font-weight: 400; color: var(--text-3); }
.calc__in { position: relative; }
.calc__in input { width: 100%; font: inherit; font-size: 1.05rem; padding: 11px 64px 11px 12px; border-radius: var(--r-sm); border: 1px solid rgba(11, 26, 34, .22); background: #fff; color: var(--ink); transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.calc__in input:hover { border-color: rgba(11, 26, 34, .4); }
.calc__in input:focus-visible { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(18, 102, 95, .18); }
.calc__in input[aria-invalid="true"] { border-color: var(--danger); }
.calc__in span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-size: .8rem; color: var(--text-3); pointer-events: none; }
.calc__where { display: flex; flex-wrap: wrap; gap: 6px var(--s4); }
.calc__where legend { margin-bottom: 6px; }
.calc__where label { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; cursor: pointer; }
.calc__where input { width: 16px; height: 16px; margin: 0; accent-color: var(--petrol); cursor: pointer; }
.calc__go { width: 100%; }
.calc__out { display: grid; gap: 2px; padding: var(--s4); border-radius: var(--r-sm); background: var(--ink); color: var(--on-dark); }
.calc__lbl { font-family: var(--f-mono); font-size: .74rem; color: var(--on-dark-3); }
.calc__val { font-family: var(--f-display); font-size: 2.2rem; font-weight: 500; line-height: 1.1; color: #fff; }
.calc__how { font-family: var(--f-mono); font-size: .76rem; color: var(--amber); overflow-wrap: anywhere; }
.calc__out.is-new .calc__val { animation: calcIn .5s var(--spring) both; }
@keyframes calcIn { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.calc__err { font-size: .88rem; color: var(--danger); }

/* ---------- pedido por segmento: formulário que escreve a mensagem do WhatsApp ---------- */
.pedido-wrap { display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 960px) { .pedido-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s8); } }
.pedido-copy .steps { margin-top: var(--s4); grid-template-columns: minmax(0, 1fr); }
.pedido-copy .steps li { padding-bottom: var(--s4); }
.pedido-copy__t { margin-top: var(--s6); font-family: var(--f-mono); font-size: .8rem; color: var(--text-3); }
.pedido { display: grid; gap: var(--s5); padding: var(--s5); border-radius: var(--r-sm); background: #f7fafa; border: 1px solid var(--line); border-top: 3px solid var(--brand); }
@media (min-width: 640px) { .pedido { padding: var(--s6); } }
.pedido__t { font-family: var(--f-mono); font-size: .84rem; color: var(--text-2); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.pedido__f { display: grid; gap: var(--s2); margin: 0; padding: 0; border: 0; min-width: 0; }
.pedido__f > legend, .pedido__f > label { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: var(--s2); }
.pedido__f small { font-weight: 400; color: var(--text-3); }
.pedido__f input[type=text] { width: 100%; font: inherit; padding: 11px 12px; border-radius: var(--r-sm); border: 1px solid rgba(11, 26, 34, .22); background: #fff; color: var(--ink); transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.pedido__f input[type=text]:hover { border-color: rgba(11, 26, 34, .4); }
.pedido__f input[type=text]:focus-visible { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(18, 102, 95, .18); }
.pedido__f input[aria-invalid="true"] { border-color: var(--danger); }
.pedido__f[aria-invalid="true"] .opt span { border-color: rgba(193, 85, 74, .6); }
/* opções como marcação de prancha: caixa reta, marcador quadrado; marcada = tinta cheia */
.opts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid rgba(11, 26, 34, .2); background: #fff; font-size: .92rem; line-height: 1.35;
  transition: border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease), transform .2s var(--spring); }
.opt span::before { content: ''; flex-shrink: 0; width: 10px; height: 10px; border: 1.5px solid rgba(11, 26, 34, .45); transition: background-color .16s var(--ease), border-color .16s var(--ease); }
.opt input[type=radio] + span::before { border-radius: 50%; }
.opt:hover span { border-color: var(--petrol); }
.opt:active span { transform: scale(.97); }
.opt input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }
.opt input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.opt input:checked + span::before { background: var(--amber); border-color: var(--amber); }
.pedido__go { width: 100%; }
.pedido__err { font-size: .9rem; color: var(--danger); font-weight: 600; }
.pedido__priv { font-family: var(--f-mono); font-size: .74rem; line-height: 1.55; color: var(--text-3); }
.pedido__alt { font-size: .9rem; color: var(--text-2); margin-top: calc(var(--s3) * -1); }
.pedido__alt a { color: var(--petrol); font-weight: 600; }

/* ---------- perfil profissional (/thiago-brandao/): leitura de currículo, fora de buscas ---------- */
.hdr__solo { display: inline-flex; }
.prof-cover { position: relative; isolation: isolate; height: 150px; background: var(--ink); overflow: hidden; }
@media (min-width: 768px) { .prof-cover { height: 190px; } }
.prof-cover .hero__bg::after { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%); }
.prof { padding-bottom: var(--s8); }
.prof__head { position: relative; margin-top: -72px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-card); padding: 0 var(--s5) var(--s6); }
@media (min-width: 768px) { .prof__head { padding: 0 var(--s7) var(--s6); } }
.prof__av { display: grid; place-items: center; width: 132px; height: 132px; margin-top: -56px; border-radius: 50%; background: var(--ink); color: #fff; border: 5px solid var(--paper);
  font-family: var(--f-display); font-size: 2.6rem; font-weight: 500; letter-spacing: .02em; box-shadow: var(--sh-card); }
.prof__name { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.9rem, 4.4vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; margin-top: var(--s4); }
.prof__hl { margin-top: var(--s2); font-size: 1.08rem; color: var(--text-2); max-width: 64ch; }
.prof__meta { display: flex; flex-wrap: wrap; gap: 4px var(--s4); margin-top: var(--s3); font-family: var(--f-mono); font-size: .78rem; color: var(--text-3); }
.prof__open { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s4); padding: 6px 12px; border-radius: var(--r-sm); background: rgba(47, 167, 154, .12); color: var(--petrol); font-size: .88rem; font-weight: 600; }
.prof__open::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--petrol-400); box-shadow: 0 0 0 3px rgba(47, 167, 154, .2); }
.prof__head .btn-row { margin-top: var(--s5); }
.btn--line { color: var(--ink); border-color: rgba(11, 26, 34, .28); background: transparent; }
.btn--line:hover { border-color: var(--ink); background: rgba(11, 26, 34, .04); }
.prof__body { display: grid; gap: var(--s4); margin-top: var(--s4); }
@media (min-width: 960px) { .prof__body { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.prof__main, .prof__side { display: grid; gap: var(--s4); }
@media (min-width: 960px) { .prof__side { position: sticky; top: 88px; } }
.prof__card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); }
@media (min-width: 768px) { .prof__card { padding: var(--s6); } }
.prof__card > h2 { font-family: var(--f-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; margin-bottom: var(--s4); }
.prof__card .prose p { font-size: 1rem; }
.prof__card .timeline, .prof__card .steps, .prof__card .chips, .prof__card .grid { margin-top: 0; }
.prof__card .timeline li { grid-template-columns: 64px 1fr; gap: var(--s4); padding-block: var(--s4); }
.prof__card .timeline__y { font-size: .92rem; }
.prof__card .timeline strong { display: block; color: var(--text); }
.prof__card .chips li { background: #f6fafa; }
.prof__card .steps { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .prof__card .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prof__card .steps li::after { box-shadow: 0 0 0 3px var(--paper); }
.prof__card .card { box-shadow: none; background: #f6fafa; }
.prof__dl { display: grid; gap: var(--s3); }
.prof__dl dt { font-family: var(--f-mono); font-size: .72rem; color: var(--text-3); }
.prof__dl dd { color: var(--text); font-size: .95rem; line-height: 1.5; }
.prof__dl div + div { padding-top: var(--s3); border-top: 1px solid var(--line); }
.prof__side .btn { width: 100%; margin-top: var(--s4); }
.ftr--slim { padding-block: var(--s6); }
.ftr--slim .stamp { margin-top: 0; }
.ftr--slim .ftr__note a { color: var(--on-dark-2); text-decoration: underline; }