/* ==========================================================================
   Natália Cerqueira — design system
   Mobile-first · tema escuro da marca · WCAG AA
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Cores da marca */
  --bg: #28282c;
  --bg-deep: #212125;
  --surface: #2f2f34;
  --surface-2: #38383e;
  --line: rgb(242 242 242 / 0.1);
  --line-strong: rgb(242 242 242 / 0.18);
  --text: #f2f2f2;
  --text-2: #c8c8c4;
  --muted: #a3a49d;
  /* Esmeralda = cor principal (ações, destaques). Elétrico = apoio (sinais vivos, hover, foco). */
  --primary: #10b77f;
  --primary-soft: #77dd77; /* apoio = verde eletrizante (antes era um verde menta) */
  --primary-pale: #c3eddf;
  --primary-glow: rgb(16 183 127 / 0.16);
  --accent: #77dd77;
  --on-primary: #17171a;
  --danger: #ff8f8f;

  /* Tipografia */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --fs-h3: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --fs-h2: clamp(1.85rem, 1.4rem + 2vw, 3rem);
  --fs-h2-lg: clamp(2.1rem, 1.5rem + 2.8vw, 3.75rem);
  --fs-h1: clamp(2.4rem, 1.6rem + 3.2vw, 4.1rem);

  /* Espaço e forma */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --radius: 1.25rem;
  --radius-sm: 0.75rem;
  --header-h: 4.5rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
a { color: var(--primary); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
strong { font-weight: 700; color: var(--text); }
::selection { background: var(--accent); color: var(--on-primary); }

/* Foco visível e consistente (navegação por teclado) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--primary); color: var(--on-primary); padding: 0.75rem 1rem;
  border-radius: var(--radius-sm); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.icon-sprite { display: none; }
.icon {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.icon-lg { width: 2rem; height: 2rem; stroke-width: 1.4; color: var(--primary); }

/* ---------------------------------------------------------------- layout */
.container { width: min(100% - 2 * var(--gutter), 75rem); margin-inline: auto; }
.section { padding-block: var(--section); }
.section-alt { background: var(--bg-deep); border-block: 1px solid var(--line); }
.split { display: grid; gap: 2.5rem; align-items: center; }
.split > div > p + p { margin-top: 1rem; }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; max-width: none; }
.section-head-row > div { max-width: 40rem; }
.section-title { font-size: var(--fs-h2); }
.section-title-lg { font-size: var(--fs-h2-lg); }
.section-intro { margin-top: 1.25rem; font-size: var(--fs-lead); color: var(--text-2); }
.section-head p:not(.eyebrow):not(.section-intro) { margin-top: 1rem; color: var(--text-2); }

/* Kicker (eyebrow): texto branco em pílula com contorno esmeralda */
.eyebrow {
  display: inline-flex; align-items: center;
  padding: 0.45rem 1.1rem; border: 1.5px solid var(--primary); border-radius: 100px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.3; text-transform: uppercase;
  color: var(--text); margin-bottom: 1.25rem;
}
.hl { color: var(--primary); }
.lead { font-size: var(--fs-lead); color: var(--text-2); margin-top: 1.5rem; max-width: 38rem; }

/* ---------------------------------------------------------------- botões */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem; padding: 0.85rem 1.5rem;
  background: var(--primary); color: var(--on-primary);
  border: 1px solid var(--primary); border-radius: 999px;
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), color 0.2s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-primary); }
.btn:active { transform: translateY(1px); }
.btn .icon { transition: transform 0.2s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface); color: var(--text); border-color: var(--primary); }
.btn-ghost:hover .icon { transform: none; }
.btn-sm { min-height: 2.75rem; padding: 0.55rem 1.15rem; font-size: 0.9375rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
  font-weight: 600; color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--primary);
}
.link-arrow:hover { color: var(--primary); }

/* Status da agenda */
.status-pill {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.95rem 0.4rem 0.75rem; border-radius: 999px;
  background: var(--primary-glow); border: 1px solid rgb(16 183 127 / 0.3);
  color: var(--primary-pale); font-size: var(--fs-sm); font-weight: 600;
}
.status-dot { position: relative; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); }
.status-pill.is-busy .status-dot { background: #ffc107; }
@media (prefers-reduced-motion: no-preference) {
  .status-dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit;
    animation: pulse 2.4s var(--ease) infinite;
  }
}
@keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 80%, 100% { transform: scale(3); opacity: 0; } }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.tags li {
  font-size: 0.8125rem; font-weight: 600; color: var(--text-2);
  padding: 0.3rem 0.75rem; border: 1px solid var(--line-strong); border-radius: 999px;
}

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
}
/* Desfoque num pseudo-elemento: backdrop-filter no próprio header prenderia o menu fixo dentro dele */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(40 40 44 / 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
body.nav-open .site-header::before { background: var(--bg); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.brand { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.2; color: var(--text); text-decoration: none; min-height: 2.75rem; }
.brand:hover { color: var(--text); }
.brand-name { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.015em; }
.brand-role { font-size: 0.75rem; color: var(--muted); }

.nav-toggle .icon { width: 1.4rem; height: 1.4rem; grid-area: 1 / 1; }
.nav-toggle .icon-close, .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-list {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1.5rem var(--gutter) 2rem;
  background: var(--bg);
  visibility: hidden; opacity: 0; transform: translateY(-0.5rem);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
}
.nav-list.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav-list a:not(.btn) {
  display: flex; align-items: center; min-height: 3.5rem;
  font-size: 1.5rem; font-weight: 600; color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.nav-list a[aria-current="page"]:not(.btn) { color: var(--primary); }
.nav-cta { margin-top: 1.5rem; }
.nav-cta .btn { width: 100%; min-height: 3.25rem; font-size: 1.0625rem; }
body.nav-open { overflow: hidden; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) var(--section);
}
.hero::before {
  /* grade sutil: referência ao "blueprint" de um projeto */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, #000 10%, transparent 75%);
  opacity: 0.55;
}
.hero::after {
  content: ""; position: absolute; z-index: -1; width: 40rem; height: 40rem; right: -10rem; top: -12rem;
  background: radial-gradient(circle, var(--primary-glow), transparent 65%);
}
.hero-grid { display: grid; gap: 3rem; align-items: center; }
.hero-title { font-size: var(--fs-h1); margin-top: 1.5rem; letter-spacing: -0.035em; line-height: 1.05; }
.hero-title .hl { display: block; }
.hero-proof { display: grid; gap: 0.6rem; margin-top: 2.25rem; color: var(--text-2); font-size: 0.9375rem; }
.hero-proof li { display: flex; align-items: center; gap: 0.6rem; }
.hero-proof .icon { color: var(--primary); }

/* ---------------------------------------------------------------- hero: site se construindo
   Estado final = estilos base (é o que vê quem pede "reduzir movimento").
   A animação de entrada fica toda no bloco prefers-reduced-motion: no-preference. */
.hero-visual { position: relative; width: 100%; max-width: 34rem; margin-inline: auto; padding: 1.75rem 0 2.5rem; }
.wf { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2rem 3rem rgb(0 0 0 / 0.35)); }
.wf-frame { fill: var(--bg-deep); stroke: rgb(242 242 242 / 0.3); stroke-width: 1.5; }
.wf-bar { fill: none; stroke: rgb(242 242 242 / 0.18); stroke-width: 1.5; }
.wf-guides path { fill: none; stroke: var(--primary); stroke-width: 1; stroke-dasharray: 3 6; }
.wf-guides { opacity: 0.35; }
.wf-dot { fill: rgb(242 242 242 / 0.22); }
.wf-dot-1 { fill: var(--primary); }
.wf-url { fill: var(--surface); }
.wf-url-text { fill: var(--muted); font: 500 10px var(--font); }
.wf-grow { fill: rgb(242 242 242 / 0.22); }
.wf-nav-1 { fill: var(--primary); }
.wf-h1 { fill: rgb(242 242 242 / 0.9); }
.wf-h2 { fill: var(--primary); }
.wf-media rect { fill: var(--surface-2); }
.wf-media circle, .wf-media path { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wf-btn rect { fill: var(--primary); }
.wf-btn text { fill: var(--on-primary); font: 700 10px var(--font); }
.wf-ripple { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; }
.wf-card { fill: var(--surface); stroke: rgb(242 242 242 / 0.08); }
.wf-cursor { fill: var(--text); stroke: var(--bg-deep); stroke-width: 1; stroke-linejoin: round; }
.wf-dot, .wf-grow, .wf-media, .wf-btn, .wf-card, .wf-cursor, .wf-ripple { transform-box: fill-box; }

.wf-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.8rem; border-radius: 999px;
  background: rgb(33 33 37 / 0.94); border: 1px solid var(--line-strong);
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 0.3);
}
.wf-chip span { color: var(--primary); font-weight: 700; font-size: 0.75rem; }
.wf-chip-1 { top: 1%; left: 8%; }
.wf-chip-2 { top: 18%; right: -3%; }
.wf-chip-3 { top: 66%; left: -3%; }
.wf-score {
  position: absolute; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem;
  padding: 0.7rem 1rem; border-radius: var(--radius-sm);
  background: rgb(33 33 37 / 0.96); border: 1px solid rgb(16 183 127 / 0.45);
  font-size: 0.8125rem; font-weight: 600; box-shadow: 0 1rem 2rem rgb(0 0 0 / 0.35);
}
.wf-score-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.wf-score .icon { color: var(--accent); width: 1rem; height: 1rem; stroke-width: 2.2; }

@media (prefers-reduced-motion: no-preference) {
  /* Texto do hero: entrada escalonada e rápida (conteúdo legível em <1s) */
  .hero-text > * { animation: rise 0.7s var(--ease) both; }
  .hero-text > :nth-child(2) { animation-delay: 0.08s; }
  .hero-text > :nth-child(3) { animation-delay: 0.18s; }
  .hero-text > :nth-child(4) { animation-delay: 0.28s; }
  .hero-text > :nth-child(5) { animation-delay: 0.38s; }

  /* 1. Estrutura: a moldura se desenha */
  .wf-frame { stroke-dasharray: 1; animation: draw 1.1s var(--ease) 0.25s both, fill-in 0.6s ease 1s both; }
  .wf-bar { stroke-dasharray: 1; animation: draw 0.6s var(--ease) 0.9s both; }
  .wf-dot { transform-origin: center; animation: pop 0.35s var(--ease) both; }
  .wf-dot-1 { animation-delay: 1s; }
  .wf-dot-2 { animation-delay: 1.08s; }
  .wf-dot-3 { animation-delay: 1.16s; }
  .wf-url, .wf-url-text { animation: fade 0.5s ease 1.2s both; }
  .wf-guides { animation: fade-guides 0.8s ease 1.3s both; }
  .wf-chip-1 { animation: rise 0.5s var(--ease) 1.4s both; }

  /* 2. Design: blocos crescem da esquerda */
  .wf-grow { transform-origin: left center; animation: grow 0.55s var(--ease) both; }
  .wf-nav-1 { animation-delay: 1.5s; }
  .wf-nav-2 { animation-delay: 1.6s; }
  .wf-chip-2 { animation: rise 0.5s var(--ease) 1.85s both; }
  .wf-h1 { animation-delay: 1.9s; }
  .wf-h2 { animation-delay: 2s; }
  .wf-p-1 { animation-delay: 2.15s; }
  .wf-p-2 { animation-delay: 2.22s; }
  .wf-p-3 { animation-delay: 2.29s; }
  .wf-media { transform-origin: center; animation: pop-soft 0.6s var(--ease) 2.3s both; }

  /* 3. Código: componentes entram no lugar */
  .wf-card { animation: rise-svg 0.5s var(--ease) both; }
  .wf-card-1 { animation-delay: 2.5s; }
  .wf-card-2 { animation-delay: 2.6s; }
  .wf-card-3 { animation-delay: 2.7s; }
  .wf-chip-3 { animation: rise 0.5s var(--ease) 2.65s both; }
  .wf-btn { transform-origin: center; animation: pop 0.45s var(--ease) 2.85s both; }

  /* 4. Conversão: o cursor vai até o botão e clica */
  .wf-cursor { animation: cursor 1.1s var(--ease) 3.1s both; }
  .wf-btn rect { animation: press 0.4s ease 4.15s both; }
  .wf-ripple { transform-origin: center; animation: ripple 0.8s ease-out 4.15s both; }

  /* 5. Fundamentos validados */
  .wf-score { animation: rise 0.5s var(--ease) 4.45s both; }
  .wf-score-item { animation: fade 0.35s ease both; }
  .wf-score-1 { animation-delay: 4.65s; }
  .wf-score-2 { animation-delay: 4.8s; }
  .wf-score-3 { animation-delay: 4.95s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes rise-svg { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-guides { from { opacity: 0; } to { opacity: 0.35; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fill-in { from { fill-opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.4); } }
@keyframes pop-soft { from { opacity: 0; transform: scale(0.92); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes cursor {
  0% { opacity: 0; transform: translate(230px, 95px); }
  20% { opacity: 1; }
  85% { transform: translate(0, 0) scale(1); }
  93% { transform: translate(0, 0) scale(0.82); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes press { 0%, 100% { fill: var(--primary); } 40% { fill: var(--accent); } }
@keyframes ripple { 0% { opacity: 0; transform: scale(0.6); } 8% { opacity: 0.9; } 100% { opacity: 0; transform: scale(2.6); } }

/* Home: "Quem sou eu" */
.about-teaser { display: grid; gap: 2.5rem; align-items: center; }
.about-teaser-photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
}
.about-teaser-text .lead { margin-top: 1.25rem; }
.about-teaser-text p:not(.eyebrow):not(.lead) { margin-top: 1rem; color: var(--text-2); }
.about-teaser-text .link-arrow { margin-top: 2rem; }

/* ---------------------------------------------------------------- caminhos */
.paths { display: grid; gap: 1rem; }
.path-card { padding: 1.5rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.path-svg { width: 100%; max-width: 18rem; margin-inline: auto; height: auto; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.path-maze { stroke-dasharray: 4 6; }
.is-direct { border-color: rgb(16 183 127 / 0.35); background: linear-gradient(160deg, rgb(16 183 127 / 0.08), var(--surface) 60%); }
.is-direct .path-svg { stroke: var(--primary); }
.is-direct .path-svg circle { fill: var(--bg); }
.path-label { margin-top: 0.75rem; font-weight: 700; }
.path-steps { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; color: var(--primary-soft); margin-top: 0.25rem; }

/* ---------------------------------------------------------------- princípios */
.principles { display: grid; gap: 1rem; }
.principle { padding: 1.75rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.principle h3 { font-size: var(--fs-h3); margin-top: 1.25rem; }
.principle p { margin-top: 0.6rem; color: var(--text-2); }

/* ---------------------------------------------------------------- bento */
.bento { display: grid; gap: 1rem; }
.bento-item {
  position: relative; display: flex; flex-direction: column;
  padding: 1.75rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.bento-item:hover, .bento-item:focus-within { border-color: rgb(16 183 127 / 0.45); background: var(--surface-2); }
.bento-item h3 { font-size: var(--fs-h3); margin-top: 1.25rem; padding-right: 2rem; }
.bento-item p { margin-top: 0.6rem; color: var(--text-2); }
.bento-wide { background: linear-gradient(150deg, rgb(16 183 127 / 0.1), var(--surface) 55%); }
.bento-arrow { position: absolute; top: 1.75rem; right: 1.75rem; color: var(--muted); transition: transform 0.25s var(--ease), color 0.25s; }
.bento-item:hover .bento-arrow { color: var(--primary); transform: translate(2px, -2px); }
/* Card inteiro clicável, mantendo um único link acessível */
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- processo */
.process { display: grid; gap: 0; counter-reset: step; }
.process-step { position: relative; padding: 0 0 2.25rem 3.75rem; }
.process-step::before { content: ""; position: absolute; left: 1.2rem; top: 2.6rem; bottom: 0; width: 1px; background: var(--line-strong); }
.process-step:last-child { padding-bottom: 0; }
.process-step:last-child::before { display: none; }
.process-num {
  position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--primary); color: var(--primary); font-weight: 700; font-size: 0.875rem;
  background: var(--bg-deep);
}
.process-step h3 { font-size: var(--fs-h3); padding-top: 0.35rem; }
.process-step p { margin-top: 0.5rem; color: var(--text-2); max-width: 30rem; }

/* ---------------------------------------------------------------- cases */
.cases { display: grid; gap: 1.5rem; }
.case { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.case-media { background: linear-gradient(160deg, #34343a, #26262a); aspect-ratio: 3 / 2; }
.case-media img { width: 100%; height: 100%; object-fit: cover; }
.case-body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }
.case-kind { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-soft); }
.case-title { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem); margin: 0.5rem 0 0.75rem; }
.case-body > p { color: var(--text-2); }
.case-quote { margin-top: 1.5rem; padding: 1.25rem 0 0; border-top: 1px solid var(--line); }
.case-quote p { font-style: italic; color: var(--text); }
.case-quote footer { margin-top: 0.5rem; font-size: var(--fs-sm); color: var(--muted); }

/* ---------------------------------------------------------------- depoimentos */
.testimonials { display: grid; gap: 1rem; }
.testimonial { height: 100%; display: flex; flex-direction: column; padding: 1.75rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.testimonial-icon { width: 2rem; height: 2rem; color: var(--primary); }
.testimonial blockquote { margin-top: 1rem; flex: 1; color: var(--text-2); }
.testimonial figcaption { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.testimonial figcaption strong { display: block; }
.testimonial-role { display: block; font-size: var(--fs-sm); color: var(--muted); }
.avatar {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%;
  background: var(--primary-glow); border: 1px solid rgb(16 183 127 / 0.35); color: var(--primary-pale);
  font-weight: 700; font-size: 0.875rem;
}

/* ---------------------------------------------------------------- blog cards */
.post-grid { display: grid; gap: 1.5rem; }
.post-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: border-color 0.25s var(--ease); }
.post-card:hover, .post-card:focus-within { border-color: rgb(16 183 127 / 0.45); }
.post-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.post-card:hover .post-card-media img { transform: scale(1.03); }
.post-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post-card-cat { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-soft); }
.post-card-title { font-size: 1.1875rem; line-height: 1.3; margin: 0.6rem 0 1rem; flex: 1; }
.post-card-title a { color: var(--text); text-decoration: none; }
.post-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-card-title a:focus-visible { outline: none; }
.post-card-title a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 3px; }
.post-card-meta { font-size: var(--fs-sm); color: var(--muted); }

/* ---------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 0.75rem; }
.faq-item { border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.faq-item[open] { border-color: rgb(16 183 127 / 0.35); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 3.5rem; padding: 1rem 1.25rem; cursor: pointer; font-weight: 600; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 0.65rem; height: 0.65rem;
  border-right: 1.6px solid var(--primary); border-bottom: 1.6px solid var(--primary);
  transform: rotate(45deg) translateY(-25%); transition: transform 0.2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.faq-item summary:focus-visible { outline-offset: -2px; border-radius: var(--radius-sm); }
.faq-item p { padding: 0 1.25rem 1.25rem; color: var(--text-2); }

/* ---------------------------------------------------------------- CTA */
.cta-band { padding-block: var(--section); position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before {
  content: ""; position: absolute; inset: auto -20% -60% -20%; height: 120%; z-index: -1;
  background: radial-gradient(ellipse at center, var(--primary-glow), transparent 60%);
}
.cta-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta-title { font-size: var(--fs-h2-lg); max-width: 50rem; margin-top: 1.5rem; }
.cta-text { margin-top: 1.25rem; color: var(--text-2); font-size: var(--fs-lead); max-width: 40rem; }
.cta-inner .actions { justify-content: center; }

/* ---------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-deep); padding-top: clamp(3rem, 2rem + 3vw, 5rem); font-size: 0.9375rem; overflow: clip; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem 1.5rem; padding-bottom: 2.5rem; }
.footer-about, .footer-contact { grid-column: 1 / -1; }
.footer-statement { margin: 1rem 0 1.25rem; color: var(--text-2); max-width: 22rem; }
.footer-title { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.75rem; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2rem; padding-block: 0.15rem; color: var(--text-2); text-decoration: none; transition: color 0.2s, translate 0.2s var(--ease); }
.site-footer li a:hover { translate: 3px 0; }
.site-footer li a:hover { color: var(--primary); }
.social { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.social a { justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-strong); border-radius: 50%; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.site-footer .social a:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 2rem; justify-content: space-between; padding-block: 1.25rem 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }
.footer-bottom a { color: var(--text-2); }
.footer-build { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-build .icon { color: var(--primary); }

/* ---------------------------------------------------------------- páginas internas */
.page-hero { overflow: clip; padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2.5rem, 2rem + 2vw, 4rem); border-bottom: 1px solid var(--line); position: relative; isolation: isolate; }
.page-hero::after {
  content: ""; position: absolute; z-index: -1; width: 32rem; height: 32rem; right: -12rem; top: -14rem;
  background: radial-gradient(circle, var(--primary-glow), transparent 65%);
}
.page-title { font-size: var(--fs-h1); letter-spacing: -0.035em; line-height: 1.05; max-width: 52rem; }
.page-hero .lead { max-width: 44rem; }

.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1.5rem; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line-strong); }
.breadcrumb a { color: var(--text-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--muted); }

.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); margin-top: 3rem; }
.prose h3 { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.45rem); margin-top: 2.25rem; }
.prose h4, .prose h5, .prose h6 { font-size: 1.125rem; margin-top: 2rem; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.85rem; }
.prose p, .prose li { color: var(--text-2); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: 0.5rem; }
.prose li::marker { color: var(--primary); }
.prose blockquote { border-left: 3px solid var(--primary); padding: 0.25rem 0 0.25rem 1.25rem; font-size: 1.125rem; }
.prose blockquote p { color: var(--text); }
.prose figure img { border-radius: var(--radius-sm); border: 1px solid var(--line); }
.prose figcaption { font-size: var(--fs-sm); color: var(--muted); margin-top: 0.6rem; }
.prose code { font-size: 0.9em; background: var(--surface-2); padding: 0.1em 0.4em; border-radius: 0.3em; }
.prose pre { background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.25rem; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line-strong); margin-block: 2.5rem; }
.prose a { word-break: break-word; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.prose th { color: var(--text); background: var(--surface); }

/* Serviços (página) */
.service-list { display: grid; gap: 1.5rem; }
.service { display: grid; gap: 1.5rem; padding: clamp(1.75rem, 1.25rem + 2vw, 3rem); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.service h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); margin-top: 1rem; }
.service-body p { color: var(--text-2); }
.service-body p + p { margin-top: 0.85rem; }
.checklist { display: grid; gap: 0.75rem; }
.checklist li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--text-2); }
.checklist .icon { color: var(--primary); margin-top: 0.2em; }

/* Sobre */
.about-photo img { border-radius: var(--radius); border: 1px solid var(--line-strong); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.about-photo figcaption { font-size: var(--fs-sm); color: var(--muted); margin-top: 0.75rem; }
.facts { display: grid; gap: 1rem; margin-top: 2rem; }
.fact { padding: 1.25rem 1.5rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); }
.fact dt { font-size: var(--fs-sm); color: var(--muted); }
.fact dd { font-weight: 700; margin-top: 0.25rem; }
.tool-groups { display: grid; gap: 2rem; }
.tool-groups h3 { font-size: 1rem; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; }
.quote-list { display: grid; gap: 1rem; }
.quote-list li { padding: 1.5rem; border-left: 2px solid var(--primary); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 1.125rem; font-weight: 600; }

/* ---------------------------------------------------------------- blog */
.cat-nav { margin-top: 2rem; }
.cat-nav ul { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: thin; }
.cat-nav a {
  display: inline-flex; align-items: center; white-space: nowrap; min-height: 2.75rem; padding: 0.4rem 1rem;
  border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-2); text-decoration: none; font-size: 0.9375rem; font-weight: 600;
}
.cat-nav a:hover { border-color: var(--primary); color: var(--text); }
.cat-nav a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.cat-nav .count { margin-left: 0.4rem; opacity: 0.7; font-weight: 500; }
.pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem; }
.pagination a, .pagination span { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding-inline: 0.75rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text); text-decoration: none; }
.pagination [aria-current] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 700; }

/* Artigo */
.reading-progress { position: fixed; top: 0; left: 0; z-index: 60; height: 3px; width: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); transform-origin: 0 50%; transform: scaleX(0); }
.post-header { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) 2rem; }
.post-header .eyebrow a { color: inherit; text-decoration: none; }
.post-title { font-size: clamp(2rem, 1.5rem + 2.6vw, 3.5rem); letter-spacing: -0.03em; line-height: 1.1; max-width: 52rem; }
.post-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.5rem; color: var(--muted); font-size: 0.9375rem; }
.post-meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
.post-cover { margin-bottom: 3rem; }
.post-cover img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
.post-layout { display: grid; gap: 2.5rem; padding-bottom: var(--section); }
.post-layout .prose { font-size: 1.125rem; line-height: 1.75; }
.toc { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.toc summary { display: flex; align-items: center; gap: 0.6rem; min-height: 3.25rem; padding: 0.75rem 1.25rem; font-weight: 700; cursor: pointer; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary .icon { color: var(--primary); }
.toc ol { list-style: none; padding: 0 1.25rem 1.25rem; display: grid; gap: 0.15rem; font-size: 0.9375rem; }
.toc li.lvl-3 { padding-left: 1rem; font-size: 0.875rem; }
.toc a { display: block; padding: 0.35rem 0 0.35rem 0.75rem; border-left: 2px solid var(--line); color: var(--text-2); text-decoration: none; line-height: 1.4; }
.toc a:hover, .toc a.is-active { color: var(--primary); border-left-color: var(--primary); }
.post-tags { margin-top: 3rem; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.share-label { font-weight: 600; margin-right: 0.5rem; }
.share a, .share button {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.4rem 1rem;
  border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text-2); text-decoration: none; font-size: 0.9375rem;
}
.share a:hover, .share button:hover { border-color: var(--primary); color: var(--text); }
.author-box { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; margin-top: 3rem; padding: 1.75rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.author-box img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); }
.author-box p { margin-top: 0.4rem; color: var(--text-2); font-size: 0.9375rem; }
.author-name { font-size: 1.125rem; }

/* ---------------------------------------------------------------- formulário */
.contact-grid { display: grid; gap: 3rem; }
.contact-cards { display: grid; gap: 1rem; }
.contact-card { display: flex; gap: 1rem; align-items: center; padding: 1.25rem 1.5rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.contact-card:hover { border-color: var(--primary); color: var(--text); }
.contact-card .icon { width: 1.75rem; height: 1.75rem; color: var(--primary); }
.contact-card small { display: block; color: var(--muted); font-size: var(--fs-sm); }
.form { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.form-row { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.45rem; }
.field label, .field legend { font-weight: 600; font-size: 0.9375rem; }
.field .optional { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3.25rem; padding: 0.75rem 1rem;
  background: var(--bg-deep); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color 0.2s;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--primary) 50%), linear-gradient(135deg, var(--primary) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.field textarea { min-height: 9rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgb(242 242 242 / 0.35); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--accent); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field-error { display: flex; gap: 0.4rem; align-items: center; color: var(--danger); font-size: var(--fs-sm); font-weight: 600; }
.field-hint { color: var(--muted); font-size: var(--fs-sm); }
.check { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; color: var(--text-2); }
.check input { width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; accent-color: var(--primary); flex: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.alert { display: flex; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); font-weight: 600; }
.alert .icon { margin-top: 0.15rem; }
.alert-success { background: var(--primary-glow); border: 1px solid var(--primary); color: var(--primary-pale); }
.alert-error { background: rgb(255 143 143 / 0.1); border: 1px solid var(--danger); color: #ffd0d0; }
.alert ul { margin-top: 0.5rem; padding-left: 1.2rem; font-weight: 400; }
.alert a { color: inherit; }

/* 404 */
.notfound { text-align: center; }
.notfound .page-title, .notfound .lead { margin-inline: auto; }
.notfound .actions { justify-content: center; }

/* ==========================================================================
   Breakpoints (mobile-first)
   ========================================================================== */
@media (min-width: 40em) {
  .principles, .testimonials, .post-grid { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-wide { grid-column: span 2; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .tool-groups { grid-template-columns: 2fr 1fr; }
  .paths { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 60em) {
  :root { --header-h: 5rem; }
  .nav-toggle { display: none; }
  .nav-list {
    position: static; flex-direction: row; align-items: center; gap: 0.25rem;
    padding: 0; background: none; visibility: visible; opacity: 1; transform: none; transition: none;
  }
  .nav-list a:not(.btn) {
    min-height: 2.75rem; padding: 0 0.9rem; font-size: 0.9375rem; font-weight: 500;
    color: var(--text-2); border: 0; border-radius: 999px;
  }
  .nav-list a:not(.btn):hover { color: var(--text); background: var(--surface); }
  .nav-list a[aria-current="page"]:not(.btn) { color: var(--primary); }
  .nav-cta { margin: 0 0 0 0.75rem; }
  .nav-cta .btn { width: auto; min-height: 2.75rem; font-size: 0.9375rem; }

  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: start; }
  .hero-visual { margin-top: 2.5rem; }
  .about-teaser { grid-template-columns: 0.8fr 1.2fr; gap: 5rem; }
  .about-teaser-photo img { aspect-ratio: 4 / 5; }
  .split { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .split-faq { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
  .principles { grid-template-columns: repeat(4, 1fr); }
  .bento { grid-template-columns: repeat(3, 1fr); }
  .bento-wide { grid-column: span 2; grid-row: span 2; justify-content: flex-end; }
  .bento-wide h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
  .process { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .process-step { padding: 3.75rem 0 0; }
  .process-step::before { left: 2.5rem; right: -2rem; top: 1.25rem; bottom: auto; width: auto; height: 1px; }
  .cases { grid-template-columns: 1fr 1fr; }
  .testimonials { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: repeat(3, 1fr); }
  .service { grid-template-columns: 1.2fr 1fr; align-items: start; gap: 3rem; }
  .contact-grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; gap: 4rem; }
  .post-layout { grid-template-columns: minmax(0, 44rem) minmax(16rem, 19rem); justify-content: space-between; gap: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

@media print {
  .site-header, .site-footer, .cta-band, .share, .post-sidebar, .read-pill, .reading-progress, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .prose p, .prose li { color: #000; }
}
.contact-cards { margin-top: 2rem; }

@media (min-width: 40em) { .bento-item:last-child { grid-column: 1 / -1; } }

/* ==========================================================================
   Consentimento de cookies (LGPD)
   Recusar tem o mesmo peso visual que aceitar (.btn-equal), como orienta a ANPD.
   ========================================================================== */
.consent {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 80;
  width: min(24rem, calc(100% - 2rem));
  padding: 1.25rem 1.25rem 1.1rem; border-radius: var(--radius);
  background: rgb(33 33 37 / 0.97); border: 1px solid var(--line-strong);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.45);
  font-size: 0.9375rem; line-height: 1.55; color: var(--text-2);
}
.consent[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .consent:not([hidden]) { animation: rise 0.5s var(--ease) 0.6s both; }
}
.consent-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; color: var(--text); margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.consent-title .icon { color: var(--primary); }
.consent a { color: var(--primary-soft); }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.btn-equal { background: transparent; color: var(--text); border: 1.5px solid var(--primary); flex: 1 1 auto; }
.btn-equal:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.consent-link, .footer-linkbtn, .inline-linkbtn {
  background: none; border: 0; padding: 0; color: var(--text-2);
  text-decoration: underline; text-underline-offset: 0.2em; font-size: inherit;
}
.consent-link { min-height: 2.75rem; padding-inline: 0.5rem; }
.consent-link:hover, .footer-linkbtn:hover, .inline-linkbtn:hover { color: var(--accent); }
.inline-linkbtn { color: var(--primary); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; padding: 0; }
.footer-legal li a, .footer-linkbtn { min-height: 2.75rem; display: inline-flex; align-items: center; }

.consent-dialog {
  width: min(36rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; margin: auto;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: var(--bg-deep); color: var(--text);
}
.consent-dialog::backdrop { background: rgb(0 0 0 / 0.65); backdrop-filter: blur(2px); }
.consent-form { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.consent-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.consent-dialog-head h2 { font-size: 1.375rem; }
.consent-close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); }
.consent-intro { margin-top: 0.75rem; color: var(--text-2); font-size: 0.9375rem; }
.consent-cat { border: 0; padding: 0; margin-top: 1.25rem; display: grid; gap: 0.75rem; }
.consent-row { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.consent-row h3 { font-size: 1rem; }
.consent-row p { margin-top: 0.25rem; font-size: 0.875rem; color: var(--text-2); }
.consent-row .consent-tools { color: var(--muted); font-size: 0.8125rem; }
.consent-foot { margin-top: 1rem; font-size: 0.8125rem; color: var(--muted); }
.consent-foot a { color: var(--primary-soft); }

/* Interruptor acessível (checkbox nativo com role="switch") */
.switch {
  appearance: none; flex: none; position: relative; width: 3rem; height: 1.75rem; margin-top: 0.15rem;
  border-radius: 999px; background: var(--surface-2); border: 1.5px solid var(--line-strong); cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s;
}
.switch::after {
  content: ""; position: absolute; top: 0.18rem; left: 0.2rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--text); transition: transform 0.2s var(--ease);
}
.switch:checked { background: var(--primary); border-color: var(--primary); }
.switch:checked::after { transform: translateX(1.2rem); background: var(--on-primary); }
.switch:disabled { opacity: 0.6; cursor: not-allowed; }

/* ==========================================================================
   WhatsApp flutuante + janela de conversa (tema claro)
   Contrastes (WCAG): ícone branco no botão #1DA851 = 3,1:1 (mín. 3:1 p/ ícones);
   texto branco no #008069 = 4,9:1 (mín. 4,5:1). O #25D366 clássico daria 1,98:1.
   ========================================================================== */
:root {
  --wa: #1da851; --wa-ui: #008069; --wa-ui-hover: #006d59;
  --wa-ink: #111b21; --wa-ink-2: #54656f; --wa-time: #667781;
  --wa-bg: #efeae2; --wa-sent: #d9fdd3; --wa-line: #e9edef;
  --consent-offset: 0px;
}

.wa-fab {
  position: fixed; right: 1rem; bottom: calc(1rem + var(--consent-offset)); z-index: 75;
  display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: 50%;
  background: var(--wa); color: #fff;
  box-shadow: 0 0.75rem 1.75rem rgb(0 0 0 / 0.4), 0 0 0 0 rgb(29 168 81 / 0.5);
  transition: transform 0.2s var(--ease), bottom 0.3s var(--ease), background 0.2s;
}
.wa-fab:hover { color: #fff; background: var(--wa-ui); transform: scale(1.06); }
.wa-fab .icon { grid-area: 1 / 1; width: 1.85rem; height: 1.85rem; stroke-width: 1.9; }
.wa-fab-close, .wa.is-open .wa-fab-icon { display: none; }
.wa.is-open .wa-fab-close { display: block; }
.wa-fab:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .wa:not(.is-open) .wa-fab { animation: wa-ping 2.8s ease-out 3s 3; }
}
@keyframes wa-ping { 0% { box-shadow: 0 0.75rem 1.75rem rgb(0 0 0 / 0.4), 0 0 0 0 rgb(29 168 81 / 0.55); } 70%, 100% { box-shadow: 0 0.75rem 1.75rem rgb(0 0 0 / 0.4), 0 0 0 1rem rgb(29 168 81 / 0); } }

.wa-panel {
  position: fixed; right: 1rem; bottom: calc(5.5rem + var(--consent-offset)); z-index: 76;
  display: flex; flex-direction: column;
  width: min(23rem, calc(100% - 2rem)); max-height: min(34rem, calc(100dvh - 7rem - var(--consent-offset)));
  border-radius: var(--radius); overflow: hidden;
  background: #fff; color: var(--wa-ink);
  box-shadow: 0 1.5rem 3.5rem rgb(0 0 0 / 0.5);
}
.wa-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .wa-panel:not([hidden]) { animation: wa-open 0.3s var(--ease) both; transform-origin: bottom right; }
}
@keyframes wa-open { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
/* Foco visível no fundo claro (o verde elétrico some no branco) */
.wa-panel :focus-visible { outline: 2px solid var(--wa-ui); outline-offset: 2px; }

.wa-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.75rem 0.75rem 1rem; background: var(--wa-ui); color: #fff; }
.wa-avatar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; background: var(--bg); }
.wa-avatar svg { width: 1.1rem; height: 1.1rem; fill: var(--primary); }
.wa-who { flex: 1; min-width: 0; }
.wa-who h2 { font-size: 1rem; letter-spacing: 0; }
.wa-who p { font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: transparent; border: 0; color: #fff; }
.wa-close:hover { background: rgb(255 255 255 / 0.15); }
.wa-panel .wa-close:focus-visible { outline-color: #fff; outline-offset: -3px; }

.wa-body {
  flex: 1; overflow-y: auto; padding: 1rem;
  background-color: var(--wa-bg);
  background-image: radial-gradient(rgb(17 27 33 / 0.06) 1px, transparent 1px);
  background-size: 14px 14px;
}
.wa-log { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.wa-msg {
  max-width: 85%; padding: 0.5rem 0.75rem 0.3rem; border-radius: 0.85rem;
  font-size: 0.9375rem; line-height: 1.45; color: var(--wa-ink);
  box-shadow: 0 1px 0.5px rgb(11 20 26 / 0.13);
}
.wa-msg p { margin: 0; }
.wa-msg time { display: block; text-align: right; font-size: 0.6875rem; color: var(--wa-time); margin-top: 0.1rem; }
.wa-msg-nat { align-self: flex-start; background: #fff; border-top-left-radius: 0.25rem; }
.wa-msg-me { align-self: flex-end; background: var(--wa-sent); border-top-right-radius: 0.25rem; }
@media (prefers-reduced-motion: no-preference) {
  .wa-msg { animation: rise 0.3s var(--ease) both; }
}
.wa-typing { display: inline-flex; gap: 0.25rem; margin-top: 0.5rem; padding: 0.7rem 0.85rem; border-radius: 0.85rem; background: #fff; box-shadow: 0 1px 0.5px rgb(11 20 26 / 0.13); }
.wa-typing[hidden] { display: none; }
.wa-typing span:not(.sr-only) { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #8696a0; }
@media (prefers-reduced-motion: no-preference) {
  .wa-typing span:not(.sr-only) { animation: wa-dot 1s ease-in-out infinite; }
  .wa-typing span:nth-child(2) { animation-delay: 0.15s; }
  .wa-typing span:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes wa-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }

.wa-topics { margin-top: 0.85rem; }
.wa-topics[hidden] { display: none; }
.wa-topics-label { font-size: 0.8125rem; color: var(--wa-ink-2); margin-bottom: 0.5rem; }
.wa-topics div { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wa-chip {
  min-height: 2.5rem; padding: 0.35rem 0.85rem; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--wa-ui); color: var(--wa-ink); font-size: 0.875rem; font-weight: 600;
}
.wa-chip:hover { background: var(--wa-ui); color: #fff; }

.wa-compose { padding: 0.85rem 1rem 0.9rem; border-top: 1px solid var(--wa-line); background: #fff; display: grid; gap: 0.6rem; }
.wa-compose[hidden] { display: none; }
.wa-compose textarea {
  width: 100%; resize: none; padding: 0.65rem 0.85rem; border-radius: var(--radius-sm);
  background: #f0f2f5; border: 1px solid #d1d7db; color: var(--wa-ink); font-size: 0.9375rem; line-height: 1.4;
}
.wa-compose textarea::placeholder { color: var(--wa-time); }
.wa-compose textarea:focus-visible { border-color: var(--wa-ui); }
.wa-send {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem;
  border-radius: 999px; background: var(--wa-ui); color: #fff; font-weight: 700; text-decoration: none;
}
.wa-send:hover { background: var(--wa-ui-hover); color: #fff; }
.wa-note { font-size: 0.6875rem; line-height: 1.4; color: var(--wa-ink-2); text-align: center; }

.wa-body::-webkit-scrollbar-track { background: var(--wa-bg); }
.wa-body::-webkit-scrollbar-thumb { border-color: var(--wa-bg); background: var(--wa-ui); }

@media print { .wa { display: none !important; } }

/* ==========================================================================
   Barra de rolagem: trilho no fundo do site, pino fino e arredondado em esmeralda.
   Chrome/Edge/Safari usam ::-webkit-scrollbar (controle fino da espessura).
   Firefox só aceita scrollbar-color/width — aplicados apenas nele, porque o
   Chrome ignora as regras ::-webkit quando essas propriedades existem.
   ========================================================================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::-webkit-scrollbar-corner { background: var(--bg); }
.consent-dialog ::-webkit-scrollbar-track { background: var(--bg-deep); }
@supports (-moz-appearance: none) {
  html, .wa-body, .consent-dialog, .toc, .cat-nav ul, .table-wrap { scrollbar-width: thin; scrollbar-color: var(--primary) transparent; }
}

/* ==========================================================================
   Header: encolhe ao rolar · indicador de página · CTA com status da agenda
   ========================================================================== */
#topo:focus { outline: none; }
.site-header::before { transition: box-shadow 0.3s var(--ease), background 0.3s; }
.site-header.is-scrolled::before { box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.35); background: rgb(33 33 37 / 0.92); }
.header-inner { transition: min-height 0.3s var(--ease); }
.brand-role { transition: opacity 0.2s, max-height 0.3s var(--ease); max-height: 1.2em; overflow: hidden; }

.nav-cta .btn { gap: 0.55rem; }
.nav-cta .status-dot { background: #fff; }
.nav-cta .status-dot.is-busy { background: #ffc107; }
.nav-cta .btn:hover .status-dot { background: var(--on-primary); }

/* Menu do celular: atalhos de contato */
.nav-extra { margin-top: auto; padding-top: 2rem; }
.nav-quick { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1rem; }
.nav-list .nav-quick a {
  display: flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0 1rem;
  font-size: 0.9375rem; font-weight: 600; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.nav-list .nav-quick .icon { color: var(--primary); }
.nav-list { overflow-y: auto; }

@media (min-width: 60em) {
  .site-header.is-scrolled .header-inner { min-height: 4rem; }
  .site-header.is-scrolled .brand-role { opacity: 0; max-height: 0; }
  .nav-extra { display: none; }
  /* Página atual: pontinho esmeralda sob o link */
  .nav-list a:not(.btn) { position: relative; }
  .nav-list a[aria-current="page"]:not(.btn)::after {
    content: ""; position: absolute; left: 50%; bottom: 0.25rem; width: 0.3rem; height: 0.3rem;
    margin-left: -0.15rem; border-radius: 50%; background: var(--primary);
  }
}

/* ==========================================================================
   Footer: assinatura em contorno (estilo line) + voltar ao topo
   ========================================================================== */
.back-top {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem;
  color: var(--text-2); text-decoration: none; font-weight: 600;
}
.back-top:hover { color: var(--accent); }
.back-top .icon { width: 1.1rem; height: 1.1rem; }
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }
body.nav-open .wa { display: none; }

/* ==========================================================================
   v2 · Header de vidro, busca, efeitos (3D, parallax, neon) e acessibilidade
   Regra de ouro: todo movimento fica em prefers-reduced-motion: no-preference
   e para quando o painel de acessibilidade pede (html[data-a11y-motion]).
   ========================================================================== */
:root {
  --glass: rgb(40 40 44 / 0.58);
  --glass-strong: rgb(30 30 34 / 0.82);
  --glass-line: rgb(255 255 255 / 0.09);
  --neon: 0 0 0.5rem rgb(16 183 127 / 0.55), 0 0 1.75rem rgb(16 183 127 / 0.28);
}

/* ---------------------------------------------------------------- header de vidro */
.site-header::before {
  background: var(--glass);
  backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
}
.site-header.is-scrolled::before { background: rgb(33 33 37 / 0.72); }
/* Fio de luz esmeralda na base do header: o único brilho permanente */
.site-header { border-bottom: 0; }
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(16 183 127 / 0.15) 15%, rgb(16 183 127 / 0.7) 50%, rgb(16 183 127 / 0.15) 85%, transparent);
}
.header-inner { justify-content: flex-start; }
.header-tools { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.header-cta { display: none; }

.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none;
  color: #fff; background: rgb(255 255 255 / 0.04); border: 1px solid var(--line-strong); border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s;
}
.icon-btn .icon { width: 1.3rem; height: 1.3rem; transition: transform 0.25s var(--ease); }
.icon-btn:hover { color: #fff; border-color: var(--primary); background: rgb(16 183 127 / 0.1); box-shadow: var(--neon); }
.icon-btn:hover .icon { transform: scale(1.1) rotate(-8deg); }
.nav-toggle:hover .icon { transform: none; }

@media (min-width: 60em) {
  .site-nav { margin-left: auto; }
  .header-tools { margin-left: 0.75rem; }
  .header-tools .nav-toggle, .nav-cta { display: none; }
  .header-cta { display: inline-flex; }
}

/* ---------------------------------------------------------------- botões: micro-interações */
.btn { position: relative; isolation: isolate; overflow: hidden; translate: var(--tx, 0px) var(--ty, 0px); }
/* Reflexo que atravessa o botão ao passar o mouse */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.45) 48%, transparent 66%);
  transform: translateX(-120%);
}
.btn-ghost::after { background: linear-gradient(110deg, transparent 30%, rgb(16 183 127 / 0.25) 48%, transparent 66%); }
.btn-glow:hover { box-shadow: var(--neon); }
.btn-ghost:hover { box-shadow: 0 0 0 1px var(--primary), 0 0 1.25rem rgb(16 183 127 / 0.2); }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background 0.2s var(--ease), color 0.2s, box-shadow 0.3s var(--ease), translate 0.25s var(--ease), scale 0.15s; }
  .btn:hover::after { transform: translateX(120%); transition: transform 0.7s var(--ease); }
  .btn:active { scale: 0.97; }
}
.link-arrow { position: relative; border-bottom-color: transparent; }
.link-arrow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--primary);
  transition: box-shadow 0.35s;
}
.link-arrow:hover::after { box-shadow: var(--neon); }
.link-arrow .icon { transition: transform 0.25s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ---------------------------------------------------------------- cartões 3D com luz neon */
[data-tilt] {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.4s;
}
[data-tilt].is-tilting { transition: transform 0.12s linear, border-color 0.25s, background 0.25s, box-shadow 0.4s; }
/* Luz que segue o cursor (fundo) + borda neon que acende perto do cursor */
[data-tilt]::before, [data-tilt]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity 0.35s var(--ease);
}
[data-tilt]::before { background: radial-gradient(22rem circle at var(--mx) var(--my), rgb(16 183 127 / 0.13), transparent 60%); }
[data-tilt]::after {
  padding: 1px;
  background: radial-gradient(14rem circle at var(--mx) var(--my), var(--accent), rgb(16 183 127 / 0.35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
[data-tilt]:hover::before, [data-tilt]:hover::after { opacity: 1; }
[data-tilt]:hover { box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.35); }
/* Ícone e título "flutuam" acima do cartão (profundidade real em 3D) */
[data-tilt] > .icon-lg { transform: translateZ(40px); transition: transform 0.6s var(--ease), filter 0.3s; }
[data-tilt] > h3 { transform: translateZ(22px); }
[data-tilt]:hover > .icon-lg { filter: drop-shadow(0 0 0.5rem rgb(16 183 127 / 0.7)); }
.principle { position: relative; }

/* Vidro: cartões translúcidos sobre luzes desfocadas da seção */
.bento, .fundamentals { position: relative; isolation: isolate; }
.bento::before, .fundamentals::before {
  content: ""; position: absolute; z-index: -1; inset: 10% 5%; pointer-events: none;
  background:
    radial-gradient(closest-side at 22% 30%, rgb(16 183 127 / 0.32), transparent),
    radial-gradient(closest-side at 78% 72%, rgb(119 221 119 / 0.16), transparent);
  filter: blur(40px);
}
.bento-item, .fundamentals .principle {
  background: rgb(47 47 52 / 0.55); border-color: var(--glass-line);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.bento-item:hover, .bento-item:focus-within { background: rgb(56 56 62 / 0.6); }
.bento-wide { background: linear-gradient(150deg, rgb(16 183 127 / 0.16), rgb(47 47 52 / 0.5) 55%); }

/* ---------------------------------------------------------------- parallax (camadas do hero) */
.hero::before { translate: 0 var(--py, 0px); }
.hero::after { translate: 0 calc(var(--py, 0px) * -1.4); background: radial-gradient(circle, rgb(16 183 127 / 0.22), transparent 65%); }
.hero-visual { translate: 0 var(--py, 0px); }

/* ---------------------------------------------------------------- processo: linha que acende */
.process-num { transition: border-color 0.4s, box-shadow 0.6s var(--ease), background 0.4s, color 0.4s; }
.process-step::after {
  content: ""; position: absolute; left: 1.2rem; top: 2.6rem; bottom: 0; width: 1px;
  background: linear-gradient(var(--accent), var(--primary)); box-shadow: var(--neon);
  transform-origin: top; transform: scaleY(0);
}
.process-step:last-child::after { display: none; }
.process.is-ready .process-step.is-lit .process-num {
  background: rgb(16 183 127 / 0.14); border-color: var(--accent); color: var(--text); box-shadow: var(--neon);
}
@media (prefers-reduced-motion: no-preference) {
  .process.is-ready .process-step::after { transition: transform 0.9s var(--ease) calc(var(--i, 0) * 0.15s + 0.2s); }
  .process.is-ready .process-num { transition-delay: calc(var(--i, 0) * 0.15s); }
}
.process.is-ready .process-step.is-lit::after { transform: none; }
@media (min-width: 60em) {
  .process-step::after {
    left: 2.5rem; right: -2rem; top: 1.25rem; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(90deg, var(--accent), var(--primary)); transform-origin: left; transform: scaleX(0);
  }
}

/* ---------------------------------------------------------------- cubo 3D dos fundamentos */
.fundamentals { display: grid; gap: 2.5rem; align-items: center; }
.cube-scene {
  --s: 9.5rem;
  display: grid; justify-items: center; gap: 2.5rem; padding-block: 2.5rem 1rem;
  perspective: 900px; cursor: grab; touch-action: pan-y; user-select: none;
}
.cube-scene.is-dragging { cursor: grabbing; }
.cube { position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; transform: rotateX(-18deg) rotateY(32deg); }
.cube-face {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.6rem;
  border: 1px solid rgb(16 183 127 / 0.6); border-radius: 0.9rem;
  background: linear-gradient(145deg, #1d3a31, #232327 70%);
  box-shadow: inset 0 0 1.75rem rgb(16 183 127 / 0.28), 0 0 1.5rem rgb(16 183 127 / 0.18);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  color: var(--text); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.02em;
}
.cube-face .icon { width: 1.9rem; height: 1.9rem; color: var(--accent); filter: drop-shadow(0 0 0.35rem rgb(119 221 119 / 0.6)); }
.cube-face-1 { transform: translateZ(calc(var(--s) / 2)); }
.cube-face-2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cube-face-3 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cube-face-4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cube-face-5 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.cube-face-6 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.cube-hint { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--muted); }
.cube-hint .icon { width: 1rem; height: 1rem; }
@media (min-width: 40em) { .principles-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60em) {
  .fundamentals { grid-template-columns: 1.5fr 1fr; gap: 4rem; }
  .principles.principles-2 { grid-template-columns: repeat(2, 1fr); }
  .cube-scene { --s: 12rem; }
}

/* ---------------------------------------------------------------- footer v2 */
.footer-statement { margin: 0.75rem 0 1.25rem; }
.footer-title { margin-bottom: 0.6rem; color: var(--text); }
.footer-col ul:not(.social) { display: grid; gap: 0.1rem; }
.footer-contact li a { overflow-wrap: anywhere; }
.footer-about .status-pill { white-space: nowrap; }
.site-footer { padding-top: 0; }
.footer-grid { padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.footer-bottom { gap: 0.5rem 1.75rem; }
.footer-bottom > p:first-child { margin-right: auto; }
.footer-linkbtn { color: var(--text-2); text-decoration: underline; text-underline-offset: 0.2em; min-height: 2.75rem; }
.footer-linkbtn:hover { color: var(--primary); }
@media (min-width: 60em) {
  .footer-grid { grid-template-columns: 1.55fr 0.85fr 1fr 1.05fr 1.55fr; gap: 2rem 2.25rem; }
  .footer-contact li a { overflow-wrap: normal; white-space: nowrap; }
  .footer-about, .footer-contact { grid-column: auto; }
}

/* Faixa em movimento (marquee): discreta, contorno fino, pausa no hover */
.marquee {
  overflow: hidden; border-block: 1px solid var(--line); padding-block: 0.9rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; }
.marquee-group { display: flex; flex: none; list-style: none; padding: 0; }
.marquee-group li {
  display: flex; align-items: center; white-space: nowrap;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
  color: transparent; -webkit-text-stroke: 1px rgb(242 242 242 / 0.28);
  transition: -webkit-text-stroke-color 0.4s, color 0.4s;
}
.marquee-group li::after {
  content: ""; width: 0.4em; height: 0.4em; margin-inline: 0.9em; flex: none; border-radius: 50%;
  border: 1px solid var(--primary); box-shadow: 0 0 0.6rem rgb(16 183 127 / 0.6);
}
.marquee-group li:nth-child(odd) { -webkit-text-stroke-color: rgb(16 183 127 / 0.5); }
.marquee:hover li { -webkit-text-stroke-color: rgb(16 183 127 / 0.85); }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 48s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- busca (pop-up de vidro) */
.search-dialog {
  width: min(40rem, calc(100% - 2rem)); max-width: none; max-height: min(36rem, calc(100dvh - 4rem));
  margin: clamp(1rem, 10vh, 7rem) auto auto; padding: 0;
  color: var(--text); background: var(--glass-strong);
  border: 1px solid var(--glass-line); border-radius: 1.5rem;
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: 0 2rem 5rem rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.06);
  overflow: hidden; flex-direction: column;
}
.search-dialog[open] { display: flex; }
.search-dialog::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: var(--neon);
}
.search-dialog::backdrop {
  background: rgb(18 18 21 / 0.55);
  backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%);
}
@media (prefers-reduced-motion: no-preference) {
  .search-dialog[open] { animation: search-in 0.32s var(--ease); }
  .search-dialog[open]::backdrop { animation: fade 0.3s var(--ease); }
}
@keyframes search-in { from { opacity: 0; transform: translateY(-12px) scale(0.98); } }
html.search-open { overflow: hidden; }

.search-field { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem 0.6rem 1.25rem; border-bottom: 1px solid var(--line); }
.search-field > .icon { width: 1.35rem; height: 1.35rem; color: var(--primary); flex: none; }
.search-field input {
  flex: 1; min-width: 0; min-height: 3.25rem; background: none; border: 0; color: var(--text);
  font: inherit; font-size: 1.125rem;
}
.search-field input::placeholder { color: var(--muted); }
.search-field input:focus { outline: none; }
.search-field:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }
.search-field input::-webkit-search-cancel-button { filter: invert(1) opacity(0.6); }
.search-close {
  flex: none; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.75rem; border-radius: 0.6rem;
  border: 1px solid var(--line-strong); color: var(--text-2); font-size: 0.75rem; font-weight: 700;
}
.search-close:hover { border-color: var(--primary); color: var(--text); }
.search-body { overflow-y: auto; padding: 0.75rem; flex: 1; }
.search-count { font-size: var(--fs-sm); color: var(--muted); padding: 0.25rem 0.5rem; }
.search-count:empty { display: none; }
.search-results { list-style: none; padding: 0; display: grid; gap: 0.25rem; }
.search-hit {
  position: relative; display: grid; gap: 0.15rem; padding: 0.8rem 1rem 0.8rem 1.1rem; border-radius: 0.9rem;
  color: var(--text); text-decoration: none; transition: background 0.2s;
}
.search-hit::before {
  content: ""; position: absolute; left: 0.35rem; top: 0.9rem; bottom: 0.9rem; width: 2px; border-radius: 2px;
  background: var(--accent); box-shadow: var(--neon); opacity: 0; transition: opacity 0.2s;
}
.search-hit:hover, .search-hit:focus-visible { background: rgb(255 255 255 / 0.06); color: var(--text); }
.search-hit:hover::before, .search-hit:focus-visible::before { opacity: 1; }
.search-kind { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-soft); }
.search-title { font-weight: 700; line-height: 1.35; }
.search-desc { font-size: var(--fs-sm); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-hit mark { background: none; color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
.search-suggest { padding: 0.5rem; }
.search-suggest[hidden] { display: none; }
.search-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0.5rem 0 0.6rem; }
.search-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.chip {
  min-height: 2.5rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--text); font-size: var(--fs-sm); font-weight: 600; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.chip:hover { border-color: var(--primary); background: rgb(16 183 127 / 0.1); box-shadow: 0 0 1rem rgb(16 183 127 / 0.25); }
.search-quick { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.search-quick a {
  display: flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0 1rem; border-radius: 0.9rem;
  border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.9375rem;
  transition: border-color 0.2s, background 0.2s;
}
.search-quick a:hover { border-color: rgb(16 183 127 / 0.5); background: rgb(255 255 255 / 0.04); color: var(--text); }
.search-quick .icon { color: var(--primary); }
.search-hint { display: none; gap: 0.35rem; align-items: center; padding: 0.7rem 1.25rem; border-top: 1px solid var(--line); font-size: 0.75rem; color: var(--muted); }
.search-hint kbd { font: inherit; font-weight: 700; padding: 0.1rem 0.4rem; border: 1px solid var(--line-strong); border-radius: 0.35rem; color: var(--text-2); }
@media (hover: hover) and (pointer: fine) { .search-hint { display: flex; } }
/* Página /busca/ */
.section-tight { padding-top: 0; }
.search-page { max-width: 46rem; }
.search-page .search-field { border: 1px solid var(--line-strong); border-radius: 999px; padding-right: 0.4rem; background: var(--surface); }
.search-page .search-results { margin-top: 1rem; }
.search-page .search-count { margin-top: 1.5rem; }
.search-empty { margin-top: 1rem; color: var(--text-2); }

/* ---------------------------------------------------------------- painel de acessibilidade */
.a11y[hidden] { display: none; }
.a11y-fab {
  position: fixed; right: 0; top: calc(50% - 4.25rem); z-index: 70; translate: 0 -50%; /* acima do botão do VLibras */
  display: grid; place-items: center; width: 2.75rem; height: 3rem;
  color: #fff; background: var(--glass-strong); border: 1px solid rgb(16 183 127 / 0.55); border-right: 0;
  border-radius: 999px 0 0 999px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: width 0.25s var(--ease), box-shadow 0.3s, background 0.2s;
}
.a11y-fab .icon { width: 1.4rem; height: 1.4rem; }
.a11y-fab:hover, .a11y-fab[aria-expanded="true"] { width: 3.25rem; box-shadow: var(--neon); background: rgb(16 183 127 / 0.2); }
.a11y-fab.is-active::after { content: ""; position: absolute; top: 0.45rem; left: 0.5rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0.4rem var(--accent); }
.a11y-panel {
  position: fixed; right: 3.75rem; top: 50%; z-index: 71; translate: 0 -50%;
  width: min(21rem, calc(100% - 4.75rem)); max-height: calc(100dvh - 2rem); overflow-y: auto;
  color: var(--text); background: var(--glass-strong); border: 1px solid var(--glass-line); border-radius: 1.25rem;
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.55);
}
.a11y-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .a11y-panel:not([hidden]) { animation: fade 0.2s var(--ease); } }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.5rem 0.5rem 1.25rem; border-bottom: 1px solid var(--line); }
.a11y-head h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; }
.a11y-head h2 .icon { color: var(--primary); }
.a11y-close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--text-2); }
.a11y-close:hover { background: var(--surface-2); color: var(--text); }
.a11y-body { padding: 1rem 1rem 1.25rem; }
.a11y-size { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0.25rem 0.75rem; }
.a11y-size p { font-weight: 700; font-size: 0.9375rem; white-space: nowrap; }
.a11y-stepper { display: flex; align-items: center; gap: 0.25rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.15rem; }
.a11y-stepper button { width: 2.75rem; height: 2.5rem; border-radius: 999px; font-weight: 800; color: var(--text); }
.a11y-stepper button:hover:not(:disabled) { background: rgb(16 183 127 / 0.18); }
.a11y-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.a11y-stepper output { min-width: 3rem; text-align: center; font-size: 0.875rem; font-weight: 700; color: var(--primary-pale); }
.a11y-options { list-style: none; padding: 0; display: grid; gap: 0.35rem; }
.a11y-option {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 3.25rem;
  padding: 0.5rem 0.75rem; border-radius: 0.8rem; border: 1px solid var(--line); text-align: left; color: var(--text);
  transition: border-color 0.2s, background 0.2s;
}
.a11y-option:hover { border-color: rgb(16 183 127 / 0.5); background: rgb(255 255 255 / 0.03); }
.a11y-option-text { display: grid; gap: 0.1rem; }
.a11y-option-text strong { font-size: 0.9375rem; }
.a11y-option-text span { font-size: 0.75rem; color: var(--muted); }
.a11y-switch { position: relative; flex: none; width: 2.5rem; height: 1.4rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-strong); transition: background 0.2s, box-shadow 0.3s; }
.a11y-switch::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--text-2); transition: transform 0.2s var(--ease), background 0.2s; }
.a11y-option[aria-pressed="true"] { border-color: rgb(16 183 127 / 0.6); background: rgb(16 183 127 / 0.08); }
.a11y-option[aria-pressed="true"] .a11y-switch { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0.75rem rgb(16 183 127 / 0.5); }
.a11y-option[aria-pressed="true"] .a11y-switch::after { transform: translateX(1.1rem); background: var(--on-primary); }
.a11y-option[aria-busy="true"] .a11y-switch { opacity: 0.6; }
.a11y-reset { width: 100%; min-height: 2.75rem; margin-top: 0.85rem; border-radius: 999px; border: 1px solid var(--line-strong); font-weight: 700; color: var(--text); }
.a11y-reset:hover { border-color: var(--primary); }
.a11y-note { margin-top: 0.75rem; font-size: 0.75rem; color: var(--muted); text-align: center; }
.a11y-note a { color: var(--primary-soft); }
body.nav-open .a11y-fab { display: none; }

/* Guia de leitura: faixa clara sobre o resto levemente escurecido */
.reading-guide {
  position: fixed; left: 0; right: 0; top: -1.6rem; height: 3.2rem; z-index: 9990; pointer-events: none;
  background: rgb(16 183 127 / 0.08); border-block: 2px solid rgb(119 221 119 / 0.8);
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.35);
}
.reading-guide[hidden] { display: none; }

/* ------------- efeitos de cada preferência (atributos no <html>) */
html[data-a11y-size="1"] { font-size: 115%; }
html[data-a11y-size="2"] { font-size: 130%; }
html[data-a11y-size="3"] { font-size: 150%; }

html[data-a11y-contrast] {
  --bg: #000; --bg-deep: #000; --surface: #0c0c0c; --surface-2: #1a1a1a;
  --line: rgb(255 255 255 / 0.5); --line-strong: rgb(255 255 255 / 0.8); --glass-line: rgb(255 255 255 / 0.6);
  --text: #fff; --text-2: #fff; --muted: #e8e8e8;
  --primary: #3df5b5; --primary-soft: #7dffd1; --primary-pale: #d4fff0; --accent: #a6ff9e;
  --glass: #000; --glass-strong: #000; --on-primary: #000;
}
html[data-a11y-contrast] body { background: #000; }
html[data-a11y-contrast] :is(.hero, .bento, .fundamentals, .cta-band)::before,
html[data-a11y-contrast] .hero::after { display: none; }
html[data-a11y-contrast] :is(.bento-item, .principle, .case, .testimonial, .post-card, .faq-item, .service, .form-card) { background: #000; border-color: #fff; }
html[data-a11y-contrast] .marquee-group li { -webkit-text-stroke-color: #fff; }

html[data-a11y-links] a:not(.btn) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 0.2em; }
html[data-a11y-links] a:not(.btn):not(.card-link):not(.search-hit) { outline: 1px dashed var(--primary); outline-offset: 2px; border-radius: 2px; }
html[data-a11y-links] .card-link::after { outline: 1px dashed var(--primary); outline-offset: 2px; }

html[data-a11y-motion] { scroll-behavior: auto !important; }
html[data-a11y-motion] *, html[data-a11y-motion] *::before, html[data-a11y-motion] *::after,
html[data-a11y-motion] *::backdrop { animation: none !important; transition: none !important; }
html[data-a11y-motion] [data-tilt] { transform: none !important; }
html[data-a11y-motion] :is(.btn, .hero-visual, .hero::before, .hero::after) { translate: none !important; }

/* WCAG 1.4.12: espaçamento de texto */
html[data-a11y-spacing] body :is(p, li, a, span, strong, em, h1, h2, h3, h4, label, button, blockquote, figcaption, summary, td, th, dd, dt) {
  line-height: 1.8 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important;
}
html[data-a11y-spacing] body p { margin-bottom: 1em; }
html[data-a11y-font] body, html[data-a11y-font] body * { font-family: Verdana, Tahoma, "Segoe UI", system-ui, sans-serif !important; }

html[data-a11y-cursor], html[data-a11y-cursor] * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l14 11-6.5 1 3.8 7.3-2.6 1.4-3.8-7.4L4 20z' fill='%23fff' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}

@media print { .a11y, .marquee, .search-dialog, .header-tools { display: none !important; } }
/* Botões dos novos componentes: sem o fundo cinza padrão do navegador */
:is(.chip, .search-close, .a11y-option, .a11y-close, .a11y-stepper button, .a11y-reset, .footer-linkbtn) { background-color: transparent; }
.footer-linkbtn { border: 0; padding: 0; }

/* ==========================================================================
   404: o "0" é uma bússola procurando o caminho
   ========================================================================== */
.notfound:not(.page-hero) {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) var(--section);
}
.notfound:not(.page-hero)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 4rem 4rem;
  -webkit-mask-image: radial-gradient(ellipse 60% 45% at 50% 25%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 45% at 50% 25%, #000 10%, transparent 75%);
  opacity: 0.5;
}
.notfound .eyebrow { margin-inline: auto; }
.notfound .page-title { margin-top: 1.25rem; }
.notfound .lead { max-width: 40rem; }

.nf-visual { width: min(34rem, 100%); margin: 0 auto 1.5rem; }
.nf-visual svg { width: 100%; height: auto; overflow: visible; }
.nf-digit {
  font-family: var(--font); font-size: 270px; font-weight: 800; letter-spacing: -0.04em;
  fill: rgb(16 183 127 / 0.06); stroke: var(--primary); stroke-width: 1.5;
}
.nf-ring { fill: rgb(33 33 37 / 0.9); stroke: var(--primary); stroke-width: 2; filter: drop-shadow(0 0 10px rgb(16 183 127 / 0.45)); }
.nf-ring-inner { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 7; }
.nf-ticks { stroke: var(--text-2); stroke-width: 2; stroke-linecap: round; }
.nf-n { font-family: var(--font); font-size: 15px; font-weight: 800; fill: var(--accent); }
.nf-needle-n { fill: var(--accent); filter: drop-shadow(0 0 6px rgb(119 221 119 / 0.7)); }
.nf-needle-s { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linejoin: round; }
.nf-hub { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.nf-ping { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; }
.nf-needle-aim, .nf-needle, .nf-ping { transform-box: view-box; transform-origin: 300px 140px; }
.nf-needle-aim { transition: rotate 0.5s var(--ease); }

@media (prefers-reduced-motion: no-preference) {
  /* A agulha procura: gira, hesita, volta (até o mouse chegar) */
  .nf-needle { animation: nf-search 6s var(--ease) infinite; }
  .nf-visual.is-aiming .nf-needle { animation: none; }
  .nf-ping { animation: nf-ping 3.2s var(--ease) infinite; }
  .nf-ping-2 { animation-delay: 1.6s; }
  .nf-digit { animation: nf-flicker 7s linear infinite; }
  .nf-digit + .nf-digit { animation-delay: 2.3s; }
}
@keyframes nf-search {
  0% { rotate: 0deg; } 18% { rotate: 140deg; } 26% { rotate: 120deg; } 44% { rotate: -95deg; }
  52% { rotate: -70deg; } 70% { rotate: 215deg; } 80% { rotate: 200deg; } 100% { rotate: 360deg; }
}
@keyframes nf-ping { 0% { opacity: 0.55; scale: 1; } 100% { opacity: 0; scale: 1.45; } }
/* Lâmpada de neon com mau contato: piscadas raras e rápidas */
@keyframes nf-flicker {
  0%, 41%, 43%, 45%, 100% { stroke-opacity: 1; filter: drop-shadow(0 0 6px rgb(16 183 127 / 0.5)); }
  42%, 44% { stroke-opacity: 0.25; filter: none; }
}

.nf-search { max-width: 34rem; margin: 2rem auto 0; border: 1px solid var(--line-strong); border-radius: 999px; padding-right: 0.4rem; background: rgb(47 47 52 / 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: left; }
.nf-search:focus-within { border-color: var(--primary); box-shadow: var(--neon); }
.nf-search input { font-size: 1rem; }

.nf-routes { margin-top: 3rem; }
.nf-routes-label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.nf-routes ul { list-style: none; padding: 0; display: grid; gap: 0.75rem; margin-top: 1rem; text-align: left; }
.nf-route {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 0.85rem; align-items: center;
  padding: 1rem 2.75rem 1rem 1.1rem; border-radius: var(--radius-sm);
  background: rgb(47 47 52 / 0.55); border: 1px solid var(--glass-line);
}
.nf-route > .icon { grid-row: span 2; width: 1.6rem; height: 1.6rem; color: var(--primary); }
.nf-route .card-link { font-weight: 700; }
.nf-route span { font-size: var(--fs-sm); color: var(--muted); }
.nf-route-arrow { position: absolute; right: 1rem; top: 50%; translate: 0 -50%; width: 1.1rem; height: 1.1rem; color: var(--muted); transition: color 0.2s, transform 0.25s var(--ease); }
.nf-route:hover .nf-route-arrow { color: var(--accent); transform: translate(2px, -2px); }
.nf-home { margin-top: 1.75rem; }
@media (min-width: 40em) { .nf-routes ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60em) { .nf-routes ul { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   Header desktop: menu centralizado (marca | menu | busca + WhatsApp)
   ========================================================================== */
@media (min-width: 60em) {
  .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; }
  .brand { justify-self: start; }
  .site-nav { margin: 0; justify-self: center; }
  .header-tools { margin: 0; justify-self: end; }
  .nav-list { gap: 0; }
  .nav-list a:not(.btn) { padding: 0 0.7rem; }
}
@media (min-width: 60em) and (max-width: 74.99em) {
  /* telas médias: a marca vira só o nome, para o menu respirar */
  .brand-role { display: none; }
  .header-cta { padding-inline: 0.95rem; }
}
@media (min-width: 75em) { .nav-list a:not(.btn) { padding: 0 0.95rem; } }
.header-cta .icon, .nav-cta .btn .icon { width: 1.15rem; height: 1.15rem; }

/* ==========================================================================
   Home v3 · conceitos interativos (mesmo espírito da 404)
   ========================================================================== */

/* ---------------------------------------------------------------- comparador antes/depois */
.compare { margin: 0; }
.compare-stage {
  --pos: 50%;
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-strong); background: #212125; touch-action: pan-y;
  box-shadow: 0 2rem 4rem rgb(0 0 0 / 0.35);
}
.compare-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.compare-after { clip-path: inset(0 0 0 var(--pos)); }
.compare-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
}
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--accent); box-shadow: var(--neon); pointer-events: none; }
.compare-handle span {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  display: flex; align-items: center; justify-content: center; gap: 0.1rem;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--glass-strong); border: 1.5px solid var(--accent); color: var(--accent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--neon);
  transition: scale 0.2s var(--ease);
}
.compare-handle .icon { width: 0.95rem; height: 0.95rem; }
.compare-handle .icon:first-child { rotate: 180deg; }
.compare-stage:hover .compare-handle span { scale: 1.08; }
.compare-stage:has(.compare-range:focus-visible) .compare-handle span { outline: 2px solid #fff; outline-offset: 3px; }
.compare-tag {
  position: absolute; top: 0.75rem; padding: 0.25rem 0.7rem; border-radius: 999px; pointer-events: none;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; background: var(--glass-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity 0.3s;
}
.compare-tag-before { left: 0.75rem; color: var(--danger); border: 1px solid rgb(255 143 143 / 0.45); }
.compare-tag-after { right: 0.75rem; color: var(--accent); border: 1px solid rgb(119 221 119 / 0.5); }
.compare-caption { margin-top: 0.85rem; text-align: center; }
.compare-hint { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--muted); }
.compare-hint .icon { width: 1rem; height: 1rem; color: var(--primary); }

/* desenho "antes": caos */
.cb-frame { fill: #26262a; stroke: var(--line-strong); }
.cb-line { stroke: var(--line-strong); }
.cb-dot { fill: #4a4a50; }
.cb-mute rect { fill: rgb(242 242 242 / 0.13); }
.cb-mute-fill { fill: rgb(242 242 242 / 0.18); }
.cb-arrow { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.cb-spin { fill: none; stroke: var(--muted); stroke-width: 3; stroke-dasharray: 20 62; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.cb-t { font-family: var(--font); font-size: 11px; font-weight: 700; fill: var(--text); }
.cb-warn { fill: var(--danger); font-size: 10px; }
.cb-popup > rect:first-child { fill: #3a3a41; stroke: var(--danger); stroke-width: 1.5; }
.cb-popup path { stroke: var(--text-2); stroke-width: 1.8; stroke-linecap: round; }
.cb-popup { transform-box: fill-box; transform-origin: center; }
.cb-tiny { fill: #4a4a50; }
.cb-micro { font-size: 7px; fill: var(--muted); }
.cb-maze { fill: none; stroke: var(--danger); stroke-width: 1.6; stroke-dasharray: 3 5; stroke-linecap: round; opacity: 0.85; }
.cb-q { fill: var(--danger); font-size: 18px; }

/* desenho "depois": clareza */
.ca-frame { fill: #232628; stroke: rgb(16 183 127 / 0.55); }
.ca-line { stroke: rgb(16 183 127 / 0.3); }
.ca-dot { fill: rgb(16 183 127 / 0.6); }
.ca-chip { fill: rgb(16 183 127 / 0.15); stroke: rgb(16 183 127 / 0.6); }
.ca-t { font-family: var(--font); font-weight: 600; fill: var(--text-2); }
.ca-small { font-size: 10px; }
.ca-strong { fill: var(--accent); font-weight: 800; }
.ca-brand { fill: var(--primary); }
.ca-soft rect { fill: rgb(242 242 242 / 0.25); }
.ca-h { fill: var(--text); }
.ca-hl { fill: var(--primary); }
.ca-cta rect { fill: var(--primary); }
.ca-cta text { font-family: var(--font); font-size: 10.5px; font-weight: 800; fill: var(--on-primary); }
.ca-media rect, .ca-media circle, .ca-media path { fill: none; stroke: var(--primary-soft); stroke-width: 1.6; stroke-linejoin: round; }
.ca-path { stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 10 8; }
.ca-step { fill: #232628; stroke: var(--accent); stroke-width: 2; }
.ca-goal { fill: var(--accent); filter: drop-shadow(0 0 6px rgb(119 221 119 / 0.8)); }

@media (prefers-reduced-motion: no-preference) {
  .cb-spin { animation: cb-spin 1.1s linear infinite; }
  .cb-popup { animation: cb-shake 4s ease-in-out infinite; }
  .cb-maze { animation: cb-wander 2.6s linear infinite; }
  .ca-path { animation: ca-flow 1.2s linear infinite; }
  .ca-cta rect { animation: ca-pulse 2.4s var(--ease) infinite; }
}
@keyframes cb-spin { to { rotate: 360deg; } }
@keyframes cb-shake { 0%, 86%, 100% { rotate: 0deg; } 88% { rotate: -2.5deg; } 91% { rotate: 2.5deg; } 94% { rotate: -1.5deg; } 97% { rotate: 1deg; } }
@keyframes cb-wander { to { stroke-dashoffset: -32; } }
@keyframes ca-flow { to { stroke-dashoffset: -36; } }
@keyframes ca-pulse { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 6px rgb(16 183 127 / 0.9)); } }

/* ---------------------------------------------------------------- visor de foco */
.focus-reel {
  position: relative; height: 11.5rem; margin: 0 0 3rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.focus-layer { position: absolute; inset: 0; overflow: hidden; }
.focus-blur { filter: blur(5px) grayscale(0.6); opacity: 0.5; }
.focus-sharp {
  -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - 6.6rem), #000 calc(50% - 6.6rem), #000 calc(50% + 6.6rem), transparent calc(50% + 6.6rem));
  mask-image: linear-gradient(90deg, transparent calc(50% - 6.6rem), #000 calc(50% - 6.6rem), #000 calc(50% + 6.6rem), transparent calc(50% + 6.6rem));
}
.focus-layer { display: flex; }
/* começa com o 1º cartão (12rem) centralizado no visor; passo = cartão + espaço = 14rem */
.focus-track { display: flex; align-items: center; gap: 2rem; height: 100%; width: max-content; margin-inline-start: calc(50% - 6rem); }
.focus-card {
  flex: none; display: grid; align-content: start; gap: 0.55rem;
  width: 12rem; height: 8.25rem; padding: 0.85rem 0.95rem; border-radius: 0.9rem;
  background: var(--surface); border: 1px solid var(--line-strong);
}
.fc-top { display: flex; gap: 0.25rem; }
.fc-top i { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--muted); opacity: 0.6; }
.fc-bars { display: grid; gap: 0.3rem; }
.fc-bars b { height: 0.35rem; border-radius: 999px; background: rgb(242 242 242 / 0.2); }
.fc-bars b:first-child { width: 80%; height: 0.5rem; background: rgb(242 242 242 / 0.4); }
.fc-bars b:nth-child(2) { width: 60%; }
.fc-bars b:nth-child(3) { width: 70%; }
.fc-label { font-weight: 700; font-size: 0.9375rem; color: var(--text); }
.fc-status { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.focus-sharp .focus-card { border-color: rgb(16 183 127 / 0.7); background: linear-gradient(150deg, rgb(16 183 127 / 0.16), var(--surface) 60%); box-shadow: 0 0 1.5rem rgb(16 183 127 / 0.25); }
.focus-sharp .fc-top i { background: var(--primary); opacity: 1; }
.focus-sharp .fc-bars b:first-child { background: var(--primary); }
.focus-sharp .fc-status { color: var(--accent); }
.focus-frame { position: absolute; top: 50%; left: 50%; width: 13.75rem; height: 10.25rem; translate: -50% -50%; pointer-events: none; }
.focus-frame i { position: absolute; width: 1.1rem; height: 1.1rem; border: 2px solid var(--accent); filter: drop-shadow(0 0 4px rgb(119 221 119 / 0.7)); }
.focus-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 0.4rem; }
.focus-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 0.4rem; }
.focus-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 0.4rem; }
.focus-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 0.4rem; }
.focus-frame span {
  position: absolute; top: -0.7rem; left: 50%; translate: -50% 0; white-space: nowrap;
  padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--bg-deep); border: 1px solid rgb(119 221 119 / 0.6);
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  /* 6 projetos, um por vez: anda, trava o foco, segura, anda de novo */
  .focus-track { animation: focus-step 15s var(--ease) infinite; }
  .focus-frame { animation: focus-lock 2.5s var(--ease) infinite; }
  .focus-reel:hover .focus-track, .focus-reel:hover .focus-frame { animation-play-state: paused; }
}
@keyframes focus-step {
  0%, 11% { transform: translateX(0); }
  16.667%, 27.667% { transform: translateX(-14rem); }
  33.333%, 44.333% { transform: translateX(-28rem); }
  50%, 61% { transform: translateX(-42rem); }
  66.667%, 77.667% { transform: translateX(-56rem); }
  83.333%, 94.333% { transform: translateX(-70rem); }
  100% { transform: translateX(-84rem); }
}
@keyframes focus-lock {
  0% { scale: 1.08; opacity: 1; }
  12% { scale: 1; }
  62% { opacity: 1; }
  70%, 96% { opacity: 0.35; scale: 1.04; }
  100% { scale: 1.08; opacity: 1; }
}

/* ---------------------------------------------------------------- hero em 3D */
.hero-visual[data-tilt] { border-radius: var(--radius); }
.hero-visual[data-tilt]::before, .hero-visual[data-tilt]::after { display: none; }
.hero-visual[data-tilt]:hover { box-shadow: none; }
.hero-visual .wf-chip { translate: 0 0 60px; }
.hero-visual .wf-score { translate: 0 0 40px; }

/* ---------------------------------------------------------------- CTA final: o "1" em neon */
.cta-one {
  /* fica na lateral, onde há respiro: atrás do texto atrapalharia a leitura */
  position: absolute; z-index: -1; left: max(0.5rem, calc(50% - 40rem)); top: 50%; translate: 0 -46%; pointer-events: none; user-select: none; display: none;
  font-size: clamp(15rem, 32vw, 28rem); font-weight: 800; line-height: 0.8; letter-spacing: -0.05em;
  color: rgb(16 183 127 / 0.04); -webkit-text-stroke: 2px rgb(16 183 127 / 0.5);
  filter: drop-shadow(0 0 1.25rem rgb(16 183 127 / 0.25));
}
@media (prefers-reduced-motion: no-preference) {
  .cta-one { animation: cta-flicker 8s linear infinite; }
}
@media (min-width: 60em) { .cta-one { display: block; } }
@keyframes cta-flicker {
  0%, 57%, 59%, 61%, 100% { opacity: 1; }
  58%, 60% { opacity: 0.35; }
}
html[data-a11y-contrast] .cta-one, html[data-a11y-contrast] .focus-blur { display: none; }

@media (min-width: 60em) {
  .split:has(.compare) { align-items: center; }
}

.split .section-title + p { margin-top: 1.25rem; }
.split .section-title ~ p + p { margin-top: 1rem; }

/* ==========================================================================
   Sobre v3 · foto no visor, trajetória em duas trilhas, 100 ideias, dock
   ========================================================================== */

/* ---------------------------------------------------------------- foto no visor "em foco" */
.about-photo-frame { position: relative; border-radius: var(--radius); }
.about-photo-frame img { display: block; }
.viewfinder { position: absolute; inset: 1.25rem; pointer-events: none; transform: translateZ(12px) scale(0.97); }
.viewfinder i { position: absolute; width: 1.6rem; height: 1.6rem; border: 2px solid #fff; filter: drop-shadow(0 0 3px rgb(0 0 0 / 0.6)); }
.viewfinder i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 0.5rem; }
.viewfinder i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 0.5rem; }
.viewfinder i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 0.5rem; }
.viewfinder i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 0.5rem; }
.viewfinder b {
  position: absolute; top: 0.6rem; left: 2.4rem; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.2rem 0.65rem; border-radius: 999px; background: rgb(23 23 26 / 0.7);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
}
.viewfinder b::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0.4rem var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .viewfinder b::before { animation: rec 1.6s steps(1) infinite; }
  .viewfinder i { animation: vf-lock 1.2s var(--ease) both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
}
@keyframes rec { 50% { opacity: 0.2; } }
@keyframes vf-lock { from { scale: 1.6; opacity: 0; } }
.about-photo-frame[data-tilt]::after { display: none; }

/* ---------------------------------------------------------------- trajetória: duas trilhas */
.journey { --lane-a: var(--primary); --lane-b: #e8e8e4; }
.journey-legend { display: flex; gap: 1.25rem; margin-bottom: 1.75rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.journey-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.journey-legend span::before { content: ""; width: 1.4rem; height: 2px; border-radius: 2px; }
.journey-legend .lane-a::before { background: var(--lane-a); box-shadow: 0 0 0.4rem rgb(16 183 127 / 0.6); }
.journey-legend .lane-b::before { background: var(--lane-b); }
.journey-list { list-style: none; padding: 0; display: grid; }
.journey-step { position: relative; padding: 0 0 2.25rem 5rem; }
/* as duas trilhas correm em paralelo atrás de cada etapa */
.journey-step::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4rem;
  background:
    linear-gradient(rgb(16 183 127 / 0.55), rgb(16 183 127 / 0.55)) 1rem 0 / 2px 100% no-repeat,
    linear-gradient(rgb(232 232 228 / 0.35), rgb(232 232 228 / 0.35)) 3rem 0 / 2px 100% no-repeat;
}
.journey-step::after {
  content: ""; position: absolute; top: 0.3rem; left: calc(1rem - 6px); width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-deep); border: 2px solid var(--lane-a); transition: background 0.4s, box-shadow 0.6s var(--ease), scale 0.4s var(--ease);
}
.journey-step.lane-b::after { left: calc(3rem - 6px); border-color: var(--lane-b); }
.journey-step.is-lit::after { background: var(--lane-a); box-shadow: var(--neon); scale: 1.15; }
.journey-step.lane-b.is-lit::after { background: var(--lane-b); box-shadow: 0 0 0.5rem rgb(255 255 255 / 0.5); }
.journey-step h3 { font-size: 1.0625rem; line-height: 1.3; }
.journey-step p { margin-top: 0.35rem; color: var(--text-2); font-size: 0.9375rem; }
.journey-step.lane-a h3 { color: var(--primary-pale); }

/* encontro das trilhas */
.journey-merge { padding-top: 4.25rem; padding-bottom: 0; }
.journey-merge::before { display: none; }
.journey-join { position: absolute; top: 0; left: 0; width: 4rem; height: 4rem; overflow: visible; }
.journey-join path { fill: none; stroke: var(--primary); stroke-width: 2; filter: drop-shadow(0 0 4px rgb(16 183 127 / 0.6)); }
.journey-join path { stroke-dasharray: 80; stroke-dashoffset: 0; }
.journey-join-h { display: none; }
.journey-merge::after {
  top: 4rem; left: calc(2rem - 11px); width: 22px; height: 22px; border-color: var(--accent);
  background: var(--accent); box-shadow: var(--neon);
}
.journey-now {
  display: inline-block; margin-bottom: 0.4rem; padding: 0.15rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.journey-merge h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); color: var(--text); }

@media (prefers-reduced-motion: no-preference) {
  .journey.is-ready .journey-step { opacity: 0.35; transition: opacity 0.6s var(--ease); transition-delay: calc(var(--i, 0) * 0.12s); }
  .journey.is-ready .journey-step.is-lit { opacity: 1; }
  .journey.is-ready .journey-step::after { transition-delay: calc(var(--i, 0) * 0.12s); }
  .journey.is-ready .journey-join path { stroke-dashoffset: 80; transition: stroke-dashoffset 1s var(--ease) 0.5s; }
  .journey.is-ready .journey-merge.is-lit .journey-join path { stroke-dashoffset: 0; }
}

@media (min-width: 60em) {
  .journey-list { grid-template-columns: repeat(5, 1fr) 1.35fr; }
  .journey-step { padding: 5.25rem 1.5rem 0 0; }
  .journey-step::before {
    top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 4rem;
    background:
      linear-gradient(rgb(16 183 127 / 0.55), rgb(16 183 127 / 0.55)) 0 1rem / 100% 2px no-repeat,
      linear-gradient(rgb(232 232 228 / 0.35), rgb(232 232 228 / 0.35)) 0 3rem / 100% 2px no-repeat;
  }
  .journey-step::after { top: calc(1rem - 6px); left: 0; }
  .journey-step.lane-b::after { top: calc(3rem - 6px); left: 0; }
  .journey-merge { padding-top: 5.25rem; padding-left: 0; }
  .journey-merge::before { display: block; left: 4rem; background: linear-gradient(var(--primary), var(--primary)) 0 2rem / 100% 2px no-repeat; filter: drop-shadow(0 0 4px rgb(16 183 127 / 0.6)); }
  .journey-join-v { display: none; }
  .journey-join-h { display: block; }
  .journey-merge::after { top: calc(2rem - 11px); left: calc(4rem - 2px); }
}

/* ---------------------------------------------------------------- 100 ideias → 1 */
.ideas { margin-top: 2.5rem; max-width: 22rem; }
.ideas-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 0.6rem; }
.ideas-grid i {
  aspect-ratio: 1; border-radius: 50%; background: rgb(16 183 127 / 0.55);
  transition: background 0.35s, scale 0.35s var(--ease), box-shadow 0.4s, opacity 0.35s;
}
.ideas-grid i.is-off { background: rgb(242 242 242 / 0.12); scale: 0.6; }
.ideas-grid i.is-chosen { background: var(--accent); scale: 1.9; box-shadow: 0 0 0.6rem var(--accent), 0 0 1.6rem rgb(119 221 119 / 0.5); position: relative; z-index: 1; }
.ideas-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.ideas-count { color: var(--text-2); font-size: 0.9375rem; }
.ideas-count strong { font-size: 1.5rem; color: var(--text); font-variant-numeric: tabular-nums; margin-right: 0.15rem; }
.quote-list { counter-reset: q; align-content: start; }
.quote-list li { position: relative; display: grid; gap: 0.5rem; background: rgb(47 47 52 / 0.55); transition: border-color 0.3s, background 0.3s; }
.quote-n { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; color: var(--primary-soft); }
.quote-list li.is-key { border-left-color: var(--accent); background: linear-gradient(100deg, rgb(16 183 127 / 0.14), rgb(47 47 52 / 0.55) 70%); box-shadow: -0.4rem 0 1.2rem -0.6rem rgb(119 221 119 / 0.7); }
@media (min-width: 60em) { .split:has(.ideas) { align-items: start; } }

/* ---------------------------------------------------------------- ferramentas em "dock" */
.tool-dock li { transition: scale 0.18s var(--ease), border-color 0.2s, color 0.2s, background 0.2s; transform-origin: center bottom; background: rgb(47 47 52 / 0.5); }
.tool-dock li.is-near { border-color: rgb(16 183 127 / 0.7); color: var(--text); background: rgb(16 183 127 / 0.1); }
.tool-dock { padding-block: 0.5rem; }

/* ==========================================================================
   Serviços v3 · tela ao vivo que se transforma conforme o serviço lido
   ========================================================================== */
.services-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.services-screen { display: none; }

/* celular: atalhos fixos sob o cabeçalho, rolando na horizontal */
.services-aside { position: sticky; top: var(--header-h); z-index: 5; margin-inline: calc(var(--gutter) * -1); }
.services-nav { background: rgb(33 33 37 / 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.services-nav ol { list-style: none; display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.6rem var(--gutter); scrollbar-width: none; }
.services-nav ol::-webkit-scrollbar { display: none; }
.services-nav a {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 0.95rem; white-space: nowrap;
  border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-2); text-decoration: none; font-size: 0.875rem; font-weight: 600;
  transition: color 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.3s;
}
.services-nav a span { font-size: 0.6875rem; font-weight: 800; color: var(--muted); letter-spacing: 0.08em; transition: color 0.25s; }
.services-nav a:hover { color: var(--text); border-color: rgb(16 183 127 / 0.6); }
.services-nav a[aria-current="true"] { color: var(--text); border-color: var(--primary); background: rgb(16 183 127 / 0.12); box-shadow: 0 0 1rem rgb(16 183 127 / 0.2); }
.services-nav a[aria-current="true"] span { color: var(--accent); }
.service { scroll-margin-top: calc(var(--header-h) + 4.5rem); }

/* checklist: os "checks" se desenham quando o serviço aparece */
.checklist .icon path { stroke-dasharray: 24; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .services-stage.is-ready .checklist .icon path { stroke-dashoffset: 24; transition: stroke-dashoffset 0.5s var(--ease); }
  .services-stage.is-ready .service.is-seen .checklist .icon path { stroke-dashoffset: 0; }
  .services-stage.is-ready .service.is-seen .checklist li:nth-child(2) .icon path { transition-delay: 0.12s; }
  .services-stage.is-ready .service.is-seen .checklist li:nth-child(3) .icon path { transition-delay: 0.24s; }
  .services-stage.is-ready .service.is-seen .checklist li:nth-child(4) .icon path { transition-delay: 0.36s; }
}
.service { transition: border-color 0.4s, box-shadow 0.4s; }
.service.is-current { border-color: rgb(16 183 127 / 0.45); box-shadow: 0 0 0 1px rgb(16 183 127 / 0.15), 0 1.5rem 3rem rgb(0 0 0 / 0.25); }

@media (min-width: 60em) {
  .services-stage { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 3.5rem; align-items: start; }
  .services-aside { top: calc(var(--header-h) + 1.5rem); margin: 0; display: grid; gap: 1.25rem; }
  .services-nav { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; }
  .services-nav ol { flex-wrap: wrap; padding: 0; overflow: visible; }
  .services-screen { display: block; position: relative; }
  .service { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------------- a tela */
.services-screen svg { width: 100%; height: auto; filter: drop-shadow(0 2rem 3rem rgb(0 0 0 / 0.4)); }
.services-screen::before {
  content: ""; position: absolute; inset: 8% 6%; z-index: -1; filter: blur(50px);
  background: radial-gradient(closest-side, rgb(16 183 127 / 0.28), transparent);
}
.services-screen-label {
  margin-top: 0.85rem; text-align: center; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
.pv-frame { fill: #232327; stroke: rgb(16 183 127 / 0.5); }
.pv-bar { stroke: rgb(16 183 127 / 0.25); }
.pv-dot { fill: rgb(16 183 127 / 0.55); }
.pv-url { fill: rgb(242 242 242 / 0.08); }
.pv-pri { fill: var(--primary); }
.pv-txt { fill: var(--text); }
.pv-mut rect, .pv-mut-r { fill: rgb(242 242 242 / 0.22); }
.pv-img > *, .pv-video > rect, .pv-video circle { fill: none; stroke: var(--primary-soft); stroke-width: 1.5; stroke-linejoin: round; }
.pv-video path { fill: var(--primary-soft); }
.pv-card > rect:first-child, .pv-product > rect:first-child, .pv-price > rect:first-child { fill: #2d2d32; stroke: rgb(242 242 242 / 0.12); }
.pv-card > circle { fill: rgb(16 183 127 / 0.35); }
.pv-card > rect:not(:first-child) { fill: rgb(242 242 242 / 0.2); }
.pv-thumb { fill: rgb(16 183 127 / 0.18); }
.pv-badge rect { fill: rgb(16 183 127 / 0.14); stroke: var(--accent); }
.pv-badge circle, .pv-badge path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.pv-badge text, .pv-cart text { font-family: var(--font); font-size: 9.5px; font-weight: 800; fill: var(--accent); }
.pv-cart path { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.pv-cart circle { fill: var(--text); }
.pv-cart .pv-cart-badge { fill: var(--accent); }
.pv-cart text { fill: var(--on-primary); font-size: 8px; }
.pv-fly { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: 0; }
.pv-checks path { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pv-checks rect { fill: rgb(242 242 242 / 0.22); }
.pv-price > rect:not(:first-child):not(.pv-cta) { fill: rgb(242 242 242 / 0.22); }
.pv-price > rect:first-child { stroke: var(--primary); }
.pv-cta { fill: var(--primary); }
.pv-sticky > rect:first-child { fill: rgb(30 30 34 / 0.95); }
.pv-art-dot { fill: rgb(255 255 255 / 0.85); }
.pv-chart rect { fill: rgb(242 242 242 / 0.25); }
.pv-chart .pv-hi { fill: var(--accent); }
.pv-ebook > rect:first-child { fill: var(--primary); }
.pv-ebook > rect:not(:first-child) { fill: rgb(23 23 26 / 0.7); }
.pv-ebook path { stroke: rgb(23 23 26 / 0.6); stroke-width: 2; }
.pv-swatches circle:nth-child(1) { fill: var(--primary); }
.pv-swatches circle:nth-child(2) { fill: var(--accent); }
.pv-swatches circle:nth-child(3) { fill: #28282c; stroke: rgb(242 242 242 / 0.4); }
.pv-swatches circle:nth-child(4) { fill: #f2f2f2; }
.pv-type { font-family: var(--font); font-size: 64px; font-weight: 800; fill: none; stroke: var(--primary); stroke-width: 1.2; letter-spacing: -2px; }

/* cenas: só a ativa aparece; os elementos entram em sequência */
.scene { opacity: 0; transition: opacity 0.35s var(--ease); }
.services-stage:not(.is-ready) .scene:first-of-type, .scene.is-active { opacity: 1; }
.scene > * { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .scene.is-active > * { animation: pv-in 0.55s var(--ease) both; animation-delay: calc(var(--d, 0) * 55ms); }
  .scene.is-active .pv-cta { animation: pv-in 0.55s var(--ease) both, pv-glow 2.4s var(--ease) 1s infinite; }
  .scene.is-active .pv-cart { animation: pv-in 0.5s var(--ease) both 0.5s, pv-bump 3s var(--ease) 1.4s infinite; }
  .scene.is-active .pv-fly { animation: pv-fly 3s var(--ease) 0.9s infinite; }
  .scene.is-active .pv-scroll { animation: pv-scroll 9s var(--ease) 0.6s infinite; }
  .scene.is-active .pv-chart rect { transform-origin: bottom; animation: pv-grow 0.7s var(--ease) both; }
  .scene.is-active .pv-chart rect:nth-child(2) { animation-delay: 0.1s; }
  .scene.is-active .pv-chart rect:nth-child(3) { animation-delay: 0.2s; }
  .scene.is-active .pv-chart rect:nth-child(4) { animation-delay: 0.3s; }
  .scene.is-active .pv-art-dot { animation: pv-in 0.55s var(--ease) both, pv-float 4s ease-in-out 0.8s infinite; }
}
@keyframes pv-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
@keyframes pv-glow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 6px rgb(16 183 127 / 0.9)); } }
@keyframes pv-bump { 0%, 70%, 100% { transform: none; } 76% { transform: scale(1.25) rotate(-8deg); } 84% { transform: scale(0.95); } }
@keyframes pv-fly { 0% { opacity: 0; stroke-dashoffset: 0; } 20% { opacity: 0.9; } 45%, 100% { opacity: 0; stroke-dashoffset: -60; } }
@keyframes pv-scroll { 0%, 12% { transform: none; } 55%, 78% { transform: translateY(-228px); } 100% { transform: none; } }
@keyframes pv-grow { from { transform: scaleY(0); } }
@keyframes pv-float { 0%, 100% { transform: none; } 50% { transform: translate(40px, -6px); } }
/* a tela sempre cabe na altura da janela (notebooks com pouca altura) */
.services-screen svg { display: block; width: auto; max-width: 100%; max-height: calc(100dvh - var(--header-h) - 10rem); margin-inline: auto; }

/* ==========================================================================
   Portfólio v3 · exposição com holofote + raio-x ao vivo
   ========================================================================== */
.exhibit { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgb(0 0 0 / 0.25), transparent 70%); }
.exhibit .container { display: grid; gap: clamp(4rem, 3rem + 5vw, 8rem); }
.case-wall { display: grid; gap: 2rem; align-items: center; scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* a obra */
.case-stage {
  position: relative; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  border: 1px solid var(--line-strong); background: #1c1c1f;
  box-shadow: 0 2.5rem 5rem rgb(0 0 0 / 0.5);
}
.case-stage img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* holofote: escurece tudo, menos um círculo que segue o cursor */
.case-light {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 45%), transparent 0 9rem, rgb(14 14 16 / 0.62) 22rem);
  transition: opacity 0.5s var(--ease);
}
.case-stage::before { z-index: 2; background: radial-gradient(16rem circle at var(--mx) var(--my), rgb(119 221 119 / 0.08), transparent 60%); }
.case-stage:hover .case-light { opacity: 1; }
/* sem mouse (toque) ou sem movimento: luz suave e fixa no centro */
@media (hover: none) { .case-light { background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgb(14 14 16 / 0.35)); } }
html[data-a11y-motion] .case-light, html[data-a11y-contrast] .case-light { display: none; }
.case-plaque { position: relative; isolation: isolate; }

/* a plaquinha de museu */
.case-plaque { display: grid; align-content: start; }
.case-count { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.case-count span { color: var(--accent); }
.case-plaque .case-kind { margin-top: 1.25rem; }
.case-plaque .case-title { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.6rem); margin: 0.35rem 0 0.9rem; letter-spacing: -0.03em; }
.case-text { color: var(--text-2); }
.case-sheet { display: grid; gap: 0.85rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.case-sheet > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: baseline; }
.case-sheet dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.case-sheet dd { font-weight: 600; }
.case-sheet .tags { margin-top: 0; }
.case-plaque .case-quote { position: relative; margin-top: 1.75rem; padding: 1.25rem 1.25rem 1.25rem 1.5rem; border: 1px solid var(--line); border-left: 2px solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: rgb(47 47 52 / 0.5); }
.case-plaque .case-quote .icon { width: 1.5rem; height: 1.5rem; color: var(--primary); }
.case-plaque .case-quote p { margin-top: 0.5rem; font-style: normal; color: var(--text-2); font-size: 0.9375rem; }

@media (min-width: 60em) {
  .case-wall { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4rem; }
  .case-wall:nth-child(even) .case-stage { order: 2; }
  /* número gigante em contorno atrás da plaquinha (eco do 404 e do "1") */
  .case-plaque::before {
    content: attr(data-n); position: absolute; z-index: -1; right: -1rem; top: -3.5rem;
    font-size: 10rem; font-weight: 800; line-height: 1; letter-spacing: -0.05em;
    color: transparent; -webkit-text-stroke: 1px rgb(16 183 127 / 0.22);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .case-wall .case-stage { transition: transform 0.6s var(--ease), box-shadow 0.4s; }
  .case-wall .case-plaque > * { animation: rise 0.7s var(--ease) both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
}

/* ---------------------------------------------------------------- raio-x (terminal) */
.xray-split { align-items: start; }
.xray {
  border-radius: var(--radius); overflow: hidden; border: 1px solid rgb(16 183 127 / 0.35);
  background: #17171a; box-shadow: 0 2rem 4rem rgb(0 0 0 / 0.45), 0 0 2.5rem rgb(16 183 127 / 0.08);
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}
.xray[hidden] { display: none; }
.xray-head { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); background: #1f1f23; }
.xray-dots { display: flex; gap: 0.35rem; }
.xray-dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #3a3a40; }
.xray-dots i:first-child { background: var(--primary); }
.xray-title { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-2); }
.xray-title .icon { width: 1rem; height: 1rem; color: var(--primary); }
.xray-lines { list-style: none; padding: 1rem 1.1rem; display: grid; gap: 0.45rem; min-height: 19rem; align-content: start; font-size: 0.875rem; }
.xray-lines li { display: grid; grid-template-columns: 1.1rem 1fr auto; gap: 0.6rem; align-items: baseline; }
.xray-lines li::before { content: "✓"; color: var(--accent); font-weight: 700; text-shadow: 0 0 0.5rem rgb(119 221 119 / 0.6); }
.xray-lines li.is-warn::before { content: "!"; color: #ffc107; text-shadow: none; }
.xr-k { color: var(--text-2); }
.xr-v { color: var(--text); font-weight: 700; text-align: right; }
.xray-lines li.is-ok .xr-v { color: var(--primary-pale); }
@media (prefers-reduced-motion: no-preference) {
  .xray-lines li { animation: xr-in 0.3s var(--ease) both; }
  .xray-lines:not(:empty)::after { content: "▍"; color: var(--accent); animation: rec 1s steps(1) infinite; }
}
@keyframes xr-in { from { opacity: 0; transform: translateX(-6px); } }
.xray-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-top: 1px solid var(--line); font-family: var(--font); }
.xray-note { font-size: 0.75rem; color: var(--muted); }

/* ==========================================================================
   Blog v3 · capa de revista, filtro por tempo, pílula de leitura e modo foco
   ========================================================================== */
.section-tight-b { padding-bottom: 0; }
.feature {
  position: relative; display: grid; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 2rem 4rem rgb(0 0 0 / 0.35);
}
.feature-media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-2); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.8s var(--ease); }
.feature:hover .feature-media img { scale: 1.04; }
.feature-body { display: flex; flex-direction: column; justify-content: center; gap: 0.9rem; padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
.feature-flag { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-soft); }
.feature-flag span { padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--accent); color: var(--on-primary); box-shadow: 0 0 1rem rgb(119 221 119 / 0.45); }
.feature-title { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.15; letter-spacing: -0.03em; }
.feature-title a { color: var(--text); text-decoration: none; }
.feature-excerpt { color: var(--text-2); }
.feature-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-weight: 700; color: var(--primary); }
.feature-cta .icon { transition: transform 0.25s var(--ease); }
.feature:hover .feature-cta .icon { transform: translateX(5px); }
@media (min-width: 60em) { .feature { grid-template-columns: 1.25fr 1fr; } .feature-media { aspect-ratio: auto; min-height: 24rem; } }

.blog-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.blog-filters .cat-nav { margin-top: 0; }
.time-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.time-filter[hidden] { display: none; }
.time-filter p { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.9375rem; }
.time-filter p .icon { color: var(--primary); }
.time-options { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.time-options .chip[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: rgb(119 221 119 / 0.12); box-shadow: 0 0 1rem rgb(119 221 119 / 0.2); }
.blog-count { margin: 1.5rem 0 1rem; font-size: var(--fs-sm); color: var(--muted); min-height: 1.5em; }
.blog-empty { margin-top: 1rem; color: var(--text-2); }
.post-card[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .post-card:not([hidden]) { animation: pv-in 0.4s var(--ease) both; } }

/* barra de duração no card */
.post-card-time { display: block; height: 3px; margin-top: 0.9rem; border-radius: 3px; background: rgb(242 242 242 / 0.08); overflow: hidden; }
.post-card-time i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); box-shadow: 0 0 0.5rem rgb(16 183 127 / 0.5); }
.post-card-time .t-1 { width: 6.7%; }
.post-card-time .t-2 { width: 13.3%; }
.post-card-time .t-3 { width: 20.0%; }
.post-card-time .t-4 { width: 26.7%; }
.post-card-time .t-5 { width: 33.3%; }
.post-card-time .t-6 { width: 40.0%; }
.post-card-time .t-7 { width: 46.7%; }
.post-card-time .t-8 { width: 53.3%; }
.post-card-time .t-9 { width: 60.0%; }
.post-card-time .t-10 { width: 66.7%; }
.post-card-time .t-11 { width: 73.3%; }
.post-card-time .t-12 { width: 80.0%; }
.post-card-time .t-13 { width: 86.7%; }
.post-card-time .t-14 { width: 93.3%; }
.post-card-time .t-15 { width: 100.0%; }

/* pílula de leitura */
.read-pill {
  position: fixed; left: 50%; bottom: 1rem; z-index: 65; translate: -50% 150%;
  display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.4rem 0.35rem 0.45rem; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid rgb(16 183 127 / 0.4);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.45);
  opacity: 0; transition: translate 0.4s var(--ease), opacity 0.3s;
}
.read-pill[hidden] { display: none; }
.read-pill.is-visible { translate: -50% 0; opacity: 1; }
.read-ring { width: 2.1rem; height: 2.1rem; rotate: -90deg; flex: none; }
.read-ring circle { fill: none; stroke-width: 3.5; }
.read-ring circle:first-child { stroke: rgb(242 242 242 / 0.12); }
.read-ring-fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px rgb(119 221 119 / 0.7)); }
.read-left { font-size: 0.8125rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 6.5rem; }
.read-focus {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0 0.9rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; font-size: 0.8125rem; font-weight: 700; color: var(--text);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.3s;
}
.read-focus .icon { width: 1rem; height: 1rem; color: var(--primary); }
.read-focus:hover { border-color: var(--primary); }
.read-focus[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: var(--neon); }
.read-focus[aria-pressed="true"] .icon { color: var(--on-primary); }
@media (max-width: 30em) { .read-focus span { display: none; } .read-focus { padding: 0 0.7rem; } .read-left { min-width: 0; } }

/* modo foco: só o trecho em leitura fica aceso */
.reading-focus .post-content > * { transition: opacity 0.35s var(--ease), filter 0.35s; }
.reading-focus .post-content > :not(.is-reading) { opacity: 0.22; filter: blur(0.5px); }
.reading-focus :is(.post-sidebar, .toc, .post-header, .post-cover, .share, .author-box, .post-tags) { opacity: 0.35; transition: opacity 0.35s; }
.reading-focus :is(.post-sidebar, .toc):hover { opacity: 1; }
html[data-a11y-motion] .reading-focus .post-content > :not(.is-reading) { filter: none; }
.cat-nav ul { list-style: none; padding-left: 0; }
.section-tight .blog-filters { padding-top: 2.5rem; }

/* ==========================================================================
   Contato v3 · ficha do projeto ao vivo, assunto em cartões, avião, sucesso
   ========================================================================== */
.brief { display: none; }
@media (min-width: 60em) {
  .brief:not([hidden]) {
    display: grid; gap: 0.85rem; margin-top: 2rem; padding: 1.5rem; border-radius: var(--radius);
    background: linear-gradient(150deg, rgb(16 183 127 / 0.12), rgb(47 47 52 / 0.6) 60%);
    border: 1px dashed rgb(16 183 127 / 0.5); position: sticky; top: calc(var(--header-h) + 1.5rem);
    transition: border-color 0.4s, box-shadow 0.5s;
  }
}
.brief.is-complete { border-style: solid; border-color: var(--accent); box-shadow: var(--neon); }
.brief-head { display: flex; align-items: center; justify-content: space-between; }
.brief-label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-soft); }
.brief-ring { width: 2.2rem; height: 2.2rem; rotate: -90deg; }
.brief-ring circle { fill: none; stroke-width: 3.5; }
.brief-ring circle:first-child { stroke: rgb(242 242 242 / 0.12); }
.brief-ring-fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.5s var(--ease); filter: drop-shadow(0 0 3px rgb(119 221 119 / 0.7)); }
.brief-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.brief-kind { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--text-2); }
.brief-icons { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; background: rgb(16 183 127 / 0.15); border: 1px solid rgb(16 183 127 / 0.4); }
.brief-icons .icon { grid-area: 1 / 1; width: 1.2rem; height: 1.2rem; color: var(--accent); opacity: 0; scale: 0.6; transition: opacity 0.25s, scale 0.3s var(--ease); }
.brief:not([data-kind]) .k-none, .brief[data-kind="none"] .k-none, .brief[data-kind="site"] .k-site, .brief[data-kind="ecommerce"] .k-ecommerce,
.brief[data-kind="pagina"] .k-pagina, .brief[data-kind="design"] .k-design, .brief[data-kind="outro"] .k-outro { opacity: 1; scale: 1; }
.brief-msg { color: var(--muted); font-size: 0.9375rem; font-style: italic; min-height: 3em; overflow-wrap: anywhere; }
.brief-msg.is-filled { color: var(--text-2); font-style: normal; }
.brief-foot { display: flex; align-items: center; gap: 0.6rem; padding-top: 0.85rem; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--text-2); }

/* assunto em cartões (rádios nativos, acessíveis por teclado) */
.subject-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.subject-field legend { font-weight: 600; margin-bottom: 0.6rem; padding: 0; }
.subject-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.subject-tile {
  position: relative; display: flex; align-items: center; gap: 0.6rem; min-height: 3.25rem; padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--bg); cursor: pointer;
  font-size: 0.9375rem; font-weight: 600; transition: border-color 0.2s, background 0.2s, box-shadow 0.3s;
}
.subject-tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.subject-tile .icon { color: var(--primary); flex: none; transition: transform 0.25s var(--ease); }
.subject-tile:hover { border-color: rgb(16 183 127 / 0.6); }
.subject-tile:hover .icon { transform: scale(1.12) rotate(-6deg); }
.subject-tile:has(input:checked) { border-color: var(--accent); background: rgb(16 183 127 / 0.12); box-shadow: 0 0 1.2rem rgb(16 183 127 / 0.25); }
.subject-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.subject-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 40em) { .subject-tiles { grid-template-columns: repeat(3, 1fr); } .subject-tile:last-child:nth-child(odd) { grid-column: auto; } }

/* aviãozinho que decola */
.btn-send .plane { transition: transform 0.45s var(--ease); }
.btn-send .plane path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .btn-send:hover .plane { transform: translate(6px, -6px) rotate(-8deg); }
}

/* sucesso */
.sent { display: grid; justify-items: start; gap: 1rem; padding: clamp(1.75rem, 1rem + 3vw, 3rem); border-radius: var(--radius); background: var(--surface); border: 1px solid rgb(16 183 127 / 0.5); box-shadow: 0 0 2.5rem rgb(16 183 127 / 0.12); }
.sent-check { width: 4rem; height: 4rem; }
.sent-check circle { fill: rgb(16 183 127 / 0.12); stroke: var(--accent); stroke-width: 2; }
.sent-check path { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; filter: drop-shadow(0 0 5px rgb(119 221 119 / 0.7)); }
@media (prefers-reduced-motion: no-preference) {
  .sent-check circle { animation: pop 0.5s var(--ease) both; transform-box: fill-box; transform-origin: center; }
  .sent-check path { animation: sent-draw 0.6s var(--ease) 0.35s both; }
}
@keyframes sent-draw { from { stroke-dashoffset: 40; } }
.sent-title { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); }
.sent > p { color: var(--text-2); }
.sent-steps { list-style: none; padding: 0; display: grid; gap: 0.6rem; width: 100%; }
.sent-steps li { display: flex; gap: 0.85rem; align-items: baseline; padding: 0.85rem 1rem; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--line); }
.sent-steps span { font-size: 0.75rem; font-weight: 800; color: var(--accent); letter-spacing: 0.1em; }
.form-row { align-items: start; }

/* reCAPTCHA: o selo flutuante do Google ficaria em cima do botão do WhatsApp.
   O Google permite ocultá-lo desde que o aviso em texto apareça no formulário. */
.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-note { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.5; color: var(--muted); text-align: center; }
.recaptcha-note a { color: var(--text-2); }
.btn[aria-busy="true"] { opacity: 0.75; cursor: progress; }

/* Lenis (rolagem suave) — estilos recomendados pela biblioteca */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ==========================================================================
   v4 · nome maior, voltar ao topo flutuante, rodapé, depoimentos em baralho
   ========================================================================== */
/* Nome um pouco maior (header e rodapé) */
.brand-name { font-size: 1.1875rem; letter-spacing: -0.02em; }
.brand-role { font-size: 0.78rem; }
@media (min-width: 60em) { .site-header .brand-name { font-size: 1.3125rem; } }
.footer-brand .brand-name { font-size: 1.5rem; }

/* ---------------------------------------------------------------- voltar ao topo */
:root { --fab-lift: 0px; }
html.at-footer { --fab-lift: 3.5rem; }
.wa-fab { bottom: calc(1rem + var(--consent-offset) + var(--fab-lift)); transition: bottom 0.35s var(--ease), box-shadow 0.3s; }
.wa-panel { bottom: calc(5.5rem + var(--consent-offset) + var(--fab-lift)); }
.to-top {
  position: fixed; z-index: 74; right: 1.5rem; bottom: calc(1rem + var(--consent-offset));
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  color: #fff; background: var(--glass-strong); border: 1px solid rgb(16 183 127 / 0.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 0.35);
  opacity: 0; visibility: hidden; translate: 0 1rem;
  transition: opacity 0.3s var(--ease), translate 0.35s var(--ease), visibility 0s linear 0.35s, box-shadow 0.3s, background 0.2s;
}
.to-top .icon { width: 1.2rem; height: 1.2rem; transition: transform 0.25s var(--ease); }
html.at-footer .to-top { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.to-top:hover { color: #fff; background: rgb(16 183 127 / 0.2); box-shadow: var(--neon); }
.to-top:hover .icon { transform: translateY(-3px); }
body.nav-open .to-top { display: none; }
@media print { .to-top { display: none !important; } }

/* ---------------------------------------------------------------- marquee: menor e sólido */
.marquee { padding-block: 0.7rem; }
.marquee-group li {
  font-size: clamp(1rem, 0.85rem + 0.9vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em;
  color: rgb(242 242 242 / 0.4); -webkit-text-stroke: 0;
  transition: color 0.4s;
}
.marquee-group li:nth-child(odd) { color: rgb(16 183 127 / 0.7); -webkit-text-stroke: 0; }
.marquee:hover li { color: rgb(242 242 242 / 0.65); -webkit-text-stroke: 0; }
.marquee:hover li:nth-child(odd) { color: var(--primary); }
.marquee-group li::after { width: 0.35em; height: 0.35em; margin-inline: 1.1em; }
html[data-a11y-contrast] .marquee-group li { color: #fff; }

/* ---------------------------------------------------------------- rodapé no celular: marca centralizada */
@media (max-width: 59.99em) {
  .footer-about { text-align: center; }
  .footer-about .footer-brand { align-items: center; }
  .footer-statement { margin-inline: auto; }
}

/* ---------------------------------------------------------------- depoimentos em baralho 3D */
.testi-layout { display: grid; gap: 2.5rem; }
.testi-side .section-head { margin-bottom: 0; }
.deck-controls { margin-top: 2rem; }
.deck-controls[hidden] { display: none; }
.deck-names { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.deck-name {
  display: flex; align-items: center; gap: 0.9rem; width: 100%; min-height: 3.25rem; padding: 0.55rem 0.9rem;
  border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-2); text-align: left;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.deck-name strong { display: block; font-size: 0.9375rem; color: var(--text); }
.deck-name small { display: block; font-size: 0.8125rem; color: var(--muted); }
.deck-name-n { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; color: var(--muted); transition: color 0.25s; }
.deck-name:hover { background: rgb(255 255 255 / 0.03); border-color: var(--line); }
.deck-name[aria-pressed="true"] { background: rgb(16 183 127 / 0.1); border-color: rgb(16 183 127 / 0.5); }
.deck-name[aria-pressed="true"] .deck-name-n { color: var(--accent); }
.deck-nav { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.deck-nav [data-deck-prev] .icon { rotate: 180deg; }
.deck-count { font-size: 0.875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.deck-count strong { color: var(--text); font-size: 1.125rem; }

.deck { position: relative; outline: none; }
.deck:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--radius); }
.testi-layout.is-ready .deck-cards {
  display: grid; grid-template-columns: 1fr; gap: 0; list-style: none; padding: 1.5rem 2.5rem 1rem 0;
  perspective: 1200px; touch-action: pan-y; user-select: none;
}
.testi-layout.is-ready .deck-card {
  --p: 0; --drag: 0px;
  grid-area: 1 / 1; z-index: calc(10 - var(--p));
  transform: translateX(calc(var(--p) * 1.1rem + var(--drag))) translateY(calc(var(--p) * -0.9rem)) rotate(calc(var(--p) * 2deg + var(--dragr, 0deg))) scale(calc(1 - var(--p) * 0.045));
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--ease), opacity 0.4s, filter 0.4s;
  cursor: grab;
}
.testi-layout.is-ready .deck-card .testimonial { height: 100%; background: var(--surface); border-color: var(--line-strong); box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.35); }
.testi-layout.is-ready .deck-card[data-pos="0"] .testimonial {
  border-color: rgb(16 183 127 / 0.55); box-shadow: 0 2rem 4rem rgb(0 0 0 / 0.45), 0 0 2rem rgb(16 183 127 / 0.12);
  background: linear-gradient(150deg, rgb(16 183 127 / 0.1), var(--surface) 55%);
}
.testi-layout.is-ready .deck-card:not([data-pos="0"]) { cursor: pointer; filter: brightness(0.75); }
.testi-layout.is-ready .deck-card:not([data-pos="0"]) .testimonial > * { opacity: 0.18; }
.testi-layout.is-ready .deck-card:not([data-pos="0"]):hover { filter: brightness(0.9); }
.testi-layout.is-ready .deck-card[data-pos="0"] blockquote { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); color: var(--text); line-height: 1.7; }
.testi-layout.is-ready .deck-card[data-pos="0"] .testimonial-icon { filter: drop-shadow(0 0 0.5rem rgb(16 183 127 / 0.6)); }
@media (min-width: 60em) {
  .testi-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 4rem; align-items: center; }
  .testi-layout.is-ready .deck-cards { padding: 2rem 3.5rem 1rem 0; }
}
@media (max-width: 59.99em) {
  .testi-layout.is-ready .deck-names { display: none; } /* no celular: setas e arrastar */
  .testi-layout .deck-controls { order: 2; }
  .testi-layout .testi-side { display: contents; }
  .testi-layout.is-ready .deck-cards { padding-right: 1.75rem; }
}
/* baralho: carta da frente opaca e cartas de trás com borda visível */
.testi-layout.is-ready .deck-card[data-pos="0"] .testimonial { background: linear-gradient(150deg, rgb(16 183 127 / 0.12), transparent 55%), var(--surface); }
.testi-layout.is-ready .deck-card:not([data-pos="0"]) .testimonial { background: var(--surface-2); border-color: rgb(16 183 127 / 0.3); }
.testi-layout.is-ready .deck-card { transform: translateX(calc(var(--p) * 1.4rem + var(--drag))) translateY(calc(var(--p) * -1.1rem)) rotate(calc(var(--p) * 2.2deg + var(--dragr, 0deg))) scale(calc(1 - var(--p) * 0.04)); }
/* baralho no celular: empilha mais para cima que para o lado (sem rolagem lateral) */
section:has(> .testi-layout) { overflow-x: clip; }
@media (max-width: 59.99em) {
  .testi-layout.is-ready .deck-cards { padding: 2.25rem 0.75rem 0.5rem 0; }
  .testi-layout.is-ready .deck-card {
    transform: translateX(calc(var(--p) * 0.25rem + var(--drag))) translateY(calc(var(--p) * -0.7rem)) rotate(calc(var(--p) * 0.8deg + var(--dragr, 0deg))) scale(calc(1 - var(--p) * 0.035));
  }
}

/* ==========================================================================
   v5 · formulário, consentimento e página de busca com "lupa"
   ========================================================================== */
.check-sm { font-size: 0.8125rem; line-height: 1.5; }
.check-sm input { width: 1.2rem; height: 1.2rem; margin-top: 0.05rem; }

/* Busca: topo próprio (o campo fica no topo, longe da linha divisória) */
.search-hero {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
.search-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 4rem 4rem;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 10%, transparent 75%);
  opacity: 0.45;
}
.search-hero .container { text-align: center; }
.search-hero .breadcrumb ol { justify-content: center; }
.search-hero .eyebrow { margin-inline: auto; }
.search-hero .page-title { margin-inline: auto; }
.search-big {
  max-width: 44rem; margin: 2rem auto 0; padding: 0.45rem 0.45rem 0.45rem 1.4rem; text-align: left;
  border: 1px solid var(--line-strong); border-radius: 999px; background: rgb(47 47 52 / 0.65);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.25s, box-shadow 0.3s;
}
.search-big:focus-within { border-color: var(--primary); box-shadow: var(--neon); }
.search-big input { font-size: 1.125rem; min-height: 3.25rem; }
.search-big > .icon { width: 1.5rem; height: 1.5rem; }

/* nuvem de temas + lupa */
.topic-cloud { position: relative; max-width: 52rem; margin: 2.25rem auto 0; padding: 1rem 0.5rem; }
.topic-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.topic-label .icon { width: 1.05rem; height: 1.05rem; color: var(--primary); }
.topic-cloud ul { list-style: none; padding: 0; margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem 0.6rem; }
.topic {
  --f: 0;
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 0.875rem;
  transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.25s, filter 0.2s, opacity 0.2s, scale 0.2s var(--ease);
}
.topic.t1 { font-size: 0.9375rem; } .topic.t3 { font-size: 0.8125rem; } .topic.t4 { font-size: 1rem; }
.topic:hover, .topic:focus-visible { color: var(--text); border-color: var(--primary); background: rgb(16 183 127 / 0.12); box-shadow: 0 0 1rem rgb(16 183 127 / 0.25); }
/* com mouse: fora da lupa fica levemente desfocado; dentro, nítido e aceso */
.topic-cloud.has-lens.is-lensing .topic {
  filter: blur(calc((1 - var(--f)) * 1.6px));
  opacity: calc(0.4 + var(--f) * 0.6);
  scale: calc(1 + var(--f) * 0.12);
  color: color-mix(in srgb, var(--text) calc(var(--f) * 100%), var(--text-2));
  border-color: color-mix(in srgb, var(--primary) calc(var(--f) * 100%), var(--line-strong));
}
.topic-cloud.has-lens.is-lensing .topic:focus-visible { filter: none; opacity: 1; }
.topic-lens {
  position: absolute; left: 0; top: 0; width: 8.5rem; height: 8.5rem; margin: -4.25rem 0 0 -4.25rem; pointer-events: none;
  border-radius: 50%; border: 1.5px solid rgb(119 221 119 / 0.75);
  box-shadow: var(--neon), inset 0 0 1.5rem rgb(16 183 127 / 0.2);
  background: radial-gradient(circle, rgb(16 183 127 / 0.08), transparent 70%);
  opacity: 0; transition: opacity 0.25s;
}
.topic-lens::after { /* o cabo da lupa */
  content: ""; position: absolute; right: -1.6rem; bottom: -1.6rem; width: 2.4rem; height: 2px; border-radius: 2px;
  background: rgb(119 221 119 / 0.75); rotate: 45deg; transform-origin: left center; box-shadow: var(--neon);
}
.topic-cloud.has-lens.is-lensing .topic-lens { opacity: 1; }
html[data-a11y-motion] .topic-lens, html[data-a11y-contrast] .topic-lens { display: none; }

/* resultados agrupados por tipo */
.search-results-section { padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.search-results-section .search-page { max-width: 46rem; margin-inline: auto; }
.search-results-section .search-page:empty { display: none; }
.search-results-section:has(.search-page:empty) { display: none; }
.search-group { margin-top: 1.75rem; }
.search-group-title { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-soft); padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.search-group-title span { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem; border-radius: 999px; background: rgb(16 183 127 / 0.15); color: var(--accent); font-size: 0.75rem; letter-spacing: 0; }
.search-results-section .search-results { margin-top: 0.5rem; }
.search-empty { margin-top: 1rem; padding: 1.5rem; border-radius: var(--radius); border: 1px dashed var(--line-strong); color: var(--text-2); display: grid; gap: 0.75rem; }

/* ==========================================================================
   v6 · rodapé com mais respiro, frase de assinatura e linha final reorganizada
   ========================================================================== */
.footer-grid { padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); padding-bottom: clamp(3rem, 2rem + 2.5vw, 4.5rem); }
.footer-statement { margin: 0.75rem 0 0; }
.footer-motto { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1rem; font-weight: 700; color: var(--text); }
.footer-motto .icon { width: 1.15rem; height: 1.15rem; color: var(--primary); filter: drop-shadow(0 0 0.35rem rgb(16 183 127 / 0.55)); }
.footer-bottom { padding-block: 1.5rem 1.75rem; }
.footer-bottom > p:first-child { margin-right: 0; }
.footer-copy { margin-left: auto; }
.footer-bottom .footer-linkbtn[hidden] + .footer-copy { margin-left: 0; }
@media (min-width: 60em) {
  /* mais espaço entre a coluna da marca e a lista "Institucional" */
  .footer-grid { grid-template-columns: 1.55fr 0.85fr 1fr 1.05fr 1.55fr; column-gap: 2.25rem; }
  .footer-about { padding-right: clamp(1.5rem, 4vw, 4rem); }
}
@media (max-width: 59.99em) {
  .footer-motto { justify-content: center; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-copy { margin-left: 0; }
}

/* ==========================================================================
   v7 · Blog em formato de revista (expediente, capa, sumário, editorias, matérias)
   ========================================================================== */
.masthead { padding-block: clamp(2.25rem, 1.75rem + 2.5vw, 4rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.dateline {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.35rem 1.5rem; margin-top: 1.5rem; padding-block: 0.65rem;
  border-block: 1px solid var(--line-strong);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.masthead-title { margin-top: 1.5rem; font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.2rem); line-height: 1; letter-spacing: -0.045em; max-width: 18ch; }
.masthead-lead { margin-top: 1.25rem; max-width: 44rem; font-size: var(--fs-lead); color: var(--text-2); }
.masthead-cat { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.masthead-cat .masthead-title { margin-top: 0; }
.masthead-icon {
  display: grid; place-items: center; flex: none; width: clamp(3rem, 2.4rem + 2vw, 4.25rem); aspect-ratio: 1; border-radius: 1rem;
  border: 1px solid rgb(16 183 127 / 0.6); background: rgb(16 183 127 / 0.1); color: var(--accent); box-shadow: var(--neon);
}
.masthead-icon .icon { width: 55%; height: 55%; }
.masthead-service { margin-top: 1.5rem; }

/* cabeçalho de seção com fio, estilo revista */
.rule-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 0.65rem; border-bottom: 2px solid var(--text); }
.rule-head h2 { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.rule-head .link-arrow { min-height: auto; font-size: 0.875rem; }

/* capa + sumário */
.cover-layout { display: grid; gap: 2rem; }
.cover { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius); min-height: clamp(24rem, 18rem + 18vw, 34rem); display: flex; align-items: flex-end; background: var(--surface-2); border: 1px solid var(--line-strong); }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: scale 0.9s var(--ease); }
.cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(20 20 23 / 0.1) 0%, rgb(20 20 23 / 0.55) 45%, rgb(20 20 23 / 0.96) 100%); }
.cover:hover img { scale: 1.04; }
.cover-body { padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); display: grid; gap: 0.75rem; }
.cover-flag { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-pale); }
.cover-flag span { padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--accent); color: var(--on-primary); box-shadow: 0 0 1rem rgb(119 221 119 / 0.45); }
.cover-title { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3rem); line-height: 1.08; letter-spacing: -0.035em; max-width: 24ch; }
.cover-title a { color: #fff; text-decoration: none; }
.cover-excerpt { max-width: 46rem; color: #e4e4e0; }
.cover-meta { font-size: var(--fs-sm); color: #c9c9c4; }
.issue-toc-title { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; padding-bottom: 0.65rem; border-bottom: 2px solid var(--text); }
.issue-toc ol { list-style: none; padding: 0; }
.issue-toc li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.toc-n { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgb(16 183 127 / 0.8); }
.toc-cat { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-soft); }
.toc-headline { margin-top: 0.3rem; font-size: 1.0625rem; line-height: 1.3; }
.toc-headline a { color: var(--text); text-decoration: none; background: linear-gradient(var(--primary), var(--primary)) 0 100% / 0 1px no-repeat; transition: background-size 0.35s var(--ease); }
.toc-headline a:hover { background-size: 100% 1px; }
.toc-meta { margin-top: 0.3rem; font-size: 0.8125rem; color: var(--muted); }
@media (min-width: 60em) {
  .cover-layout { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 3rem; align-items: stretch; }
  .cover-layout.cover-solo { grid-template-columns: 1fr; }
}

/* editorias */
.editorias { list-style: none; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: thin; }
.editoria {
  position: relative; display: grid; align-content: start; gap: 0.6rem; padding: 1.4rem; border-radius: var(--radius);
  background: rgb(47 47 52 / 0.55); border: 1px solid var(--glass-line);
}
.editoria-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 0.75rem; background: rgb(16 183 127 / 0.12); color: var(--primary); }
.editoria-icon .icon { width: 1.3rem; height: 1.3rem; }
.editoria h3 { font-size: 1.125rem; margin-top: 0.4rem; }
.editoria h3 a { color: var(--text); text-decoration: none; }
.editoria p { font-size: 0.875rem; color: var(--text-2); }
.editoria-count { margin-top: 0.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
@media (min-width: 75em) { .editorias { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); overflow: visible; } }

/* matérias: grade editorial (cartões leves, fio no topo, destaque largo a cada 5) */
.post-grid.magazine { gap: 2.5rem 2rem; }
.magazine .post-card { background: transparent; border: 0; border-radius: 0; overflow: visible; padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.magazine .post-card::before, .magazine .post-card::after { display: none; }
.magazine .post-card:hover { box-shadow: none; }
.magazine .post-card-media { border-radius: var(--radius-sm); }
.magazine .post-card-body { padding: 1rem 0 0; }
.magazine .post-card-title { font-size: 1.3rem; line-height: 1.22; letter-spacing: -0.02em; margin: 0.5rem 0 0.6rem; flex: 0; }
.magazine .post-card-title a { background: linear-gradient(var(--primary), var(--primary)) 0 100% / 0 2px no-repeat; transition: background-size 0.4s var(--ease); }
.magazine .post-card:hover .post-card-title a { background-size: 100% 2px; }
.post-card-excerpt { color: var(--text-2); font-size: 0.9375rem; margin-bottom: 0.9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.magazine .post-card[data-tilt] { transform: none; }
@media (min-width: 60em) {
  .magazine .post-card.is-wide { grid-column: span 2; display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.75rem; align-items: start; }
  .magazine .post-card.is-wide .post-card-media { aspect-ratio: 4 / 3; }
  .magazine .post-card.is-wide .post-card-body { padding-top: 0; }
  .magazine .post-card.is-wide .post-card-title { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); }
  .magazine .post-card.is-wide .post-card-excerpt { -webkit-line-clamp: 5; font-size: 1rem; }
}
.blog-filters { margin-bottom: 0.5rem; }
html[data-a11y-contrast] .cover::before { background: rgb(0 0 0 / 0.85); }

/* marquee: mais respiro em cima e embaixo e esmaecimento mais largo nas pontas */
.marquee {
  padding-block: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

/* QA estratégico: promessa de resposta, "ideal para" e ponte artigo → serviço */
.contact-promise { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgb(16 183 127 / 0.45); background: rgb(16 183 127 / 0.08); font-size: 0.9375rem; font-weight: 600; color: var(--primary-pale); }
.contact-promise .icon { color: var(--primary); width: 1.1rem; height: 1.1rem; }
.service-ideal { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 1rem; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: rgb(16 183 127 / 0.07); border: 1px solid rgb(16 183 127 / 0.25); color: var(--text-2); }
.service-ideal .icon { flex: none; color: var(--primary); margin-top: 0.15em; }
.service-ideal strong { color: var(--text); }
.apply-box { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2.5rem; padding: 1.4rem 1.5rem; border-radius: var(--radius); border: 1px solid rgb(16 183 127 / 0.45); background: linear-gradient(135deg, rgb(16 183 127 / 0.12), var(--surface) 60%); }
.apply-icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 0.8rem; background: rgb(16 183 127 / 0.15); color: var(--accent); box-shadow: var(--neon); }
.apply-title { font-weight: 800; font-size: 1.125rem; color: var(--text); margin-bottom: 0.35rem; }
.apply-box p { color: var(--text-2); }
.apply-box a { color: var(--primary-soft); }
@media (max-width: 59.99em) { .footer-about .footer-statement { margin-inline: auto; } }

/* ==========================================================================
   Processo: esteira modular (briefing → wireframe → componentes → no ar)
   ========================================================================== */
.step-art { display: block; width: min(100%, 15rem); height: auto; margin-bottom: 1rem; overflow: visible; }
/* peças compartilhadas */
.sa-sheet { fill: #f2f2f2; fill-opacity: 0.06; stroke: rgb(242 242 242 / 0.35); stroke-width: 1.2; }
.sa-label { font-family: var(--font); font-size: 8px; font-weight: 800; letter-spacing: 1.5px; fill: var(--primary-soft); }
.sa-lines rect { fill: rgb(242 242 242 / 0.22); }
.sa-browser { fill: #232327; stroke: rgb(242 242 242 / 0.3); stroke-width: 1.2; stroke-dasharray: 4 4; }
.sa-browser.sa-solid { stroke-dasharray: none; stroke: rgb(16 183 127 / 0.45); }
.sa-browser.sa-live { stroke: var(--accent); filter: drop-shadow(0 0 6px rgb(119 221 119 / 0.45)); }
.sa-bar { stroke: rgb(242 242 242 / 0.18); }
.sa-dot { fill: rgb(242 242 242 / 0.25); }
.sa-dot-on { fill: var(--primary); }
.m { transform-box: fill-box; transform-origin: center; }
.m-a { fill: var(--primary); }
.m-b { fill: var(--accent); }
.m-w { fill: rgb(242 242 242 / 0.82); }
.m-o { fill: none; stroke: var(--primary-soft); stroke-width: 1.2; stroke-dasharray: 3 3; }
.m-o2 { fill: rgb(16 183 127 / 0.1); stroke: var(--primary-soft); stroke-width: 1.2; stroke-dasharray: 3 3; }
.m-pic { fill: rgb(16 183 127 / 0.25); stroke: var(--primary); stroke-width: 1.2; }
.sa-bubble path { fill: rgb(16 183 127 / 0.15); stroke: var(--primary); stroke-width: 1.2; }
.sa-bubble text { font-family: var(--font); font-size: 13px; font-weight: 800; fill: var(--accent); }
.sa-pen { fill: var(--accent); stroke: #17171a; stroke-width: 1; transform-box: fill-box; transform-origin: 0 100%; }
.sa-code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 700; fill: var(--accent); }
.sa-gear { transform-box: fill-box; transform-origin: center; }
.sa-gear circle { fill: none; stroke: var(--primary-soft); stroke-width: 1.5; }
.sa-gear path { stroke: var(--primary-soft); stroke-width: 1.5; stroke-linecap: round; }
.sa-badge rect { fill: rgb(119 221 119 / 0.18); stroke: var(--accent); stroke-width: 0.8; }
.sa-badge circle { fill: var(--accent); }
.sa-badge text { font-family: var(--font); font-size: 6.5px; font-weight: 800; letter-spacing: 0.8px; fill: var(--accent); }
.sa-check circle { fill: var(--primary); filter: drop-shadow(0 0 6px rgb(16 183 127 / 0.8)); }
.sa-check path { fill: none; stroke: #17171a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* encaixe: antes da etapa acender, as peças estão soltas; ao acender, vão para o lugar */
.process.is-ready .step-art .m { transition: transform 0.8s var(--ease), opacity 0.6s var(--ease); }
.process.is-ready .process-step:not(.is-lit) .step-art .m { opacity: 0.15; transform: translate(-10px, 14px) rotate(-8deg) scale(0.85); }
.process.is-ready .process-step:not(.is-lit) .step-art .m:nth-of-type(even) { transform: translate(12px, -10px) rotate(7deg) scale(0.85); }
.process.is-ready .process-step.is-lit .step-art .m:nth-of-type(2) { transition-delay: 0.08s; }
.process.is-ready .process-step.is-lit .step-art .m:nth-of-type(3) { transition-delay: 0.16s; }
.process.is-ready .process-step.is-lit .step-art .m:nth-of-type(4) { transition-delay: 0.24s; }
.process.is-ready .process-step.is-lit .step-art .m:nth-of-type(5) { transition-delay: 0.32s; }
.process.is-ready .process-step.is-lit .step-art .m:nth-of-type(6) { transition-delay: 0.4s; }
@media (prefers-reduced-motion: no-preference) {
  .sa-float { animation: sa-float 4s ease-in-out infinite; }
  .sa-float-2 { animation-delay: -1.3s; } .sa-float-3 { animation-delay: -2.6s; }
  .sa-pen { animation: sa-draw 2.6s ease-in-out infinite; }
  .sa-snap { animation: sa-snap 3.2s var(--ease) infinite; }
  .sa-gear { animation: sa-spin 6s linear infinite; }
  .sa-badge circle { animation: rec 1.6s steps(1) infinite; }
  .process-step:hover .step-art { transform: translateY(-4px); }
  .step-art { transition: transform 0.4s var(--ease); }
}
@keyframes sa-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes sa-draw { 0%, 100% { rotate: 0deg; translate: 0 0; } 50% { rotate: -6deg; translate: -10px 4px; } }
@keyframes sa-snap { 0%, 55%, 100% { translate: 0 0; } 25% { translate: 10px -8px; } 40% { translate: 0 1px; } }
@keyframes sa-spin { to { rotate: 360deg; } }

/* desktop: as quatro molduras formam uma faixa única, ligada por uma esteira */
@media (min-width: 60em) {
  .process-art { --art: 8.25rem; position: relative; isolation: isolate; }
  .process-art .process-step { padding-top: calc(var(--art) + 4.25rem); }
  .process-art .step-art { position: absolute; top: 0; left: 0; width: calc(100% - 1.25rem); max-width: none; height: var(--art); margin: 0; }
  .process-art .process-num { top: calc(var(--art) + 0.5rem); }
  .process-art .process-step::before, .process-art .process-step::after { top: calc(var(--art) + 1.75rem); }
  .process-art::before {
    content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(var(--art) / 2); height: 2px;
    background-image: radial-gradient(circle, var(--accent) 0 2px, transparent 2.5px), linear-gradient(90deg, rgb(16 183 127 / 0.25), rgb(16 183 127 / 0.25));
    background-size: 46px 2px, 100% 1px; background-repeat: repeat-x, no-repeat; background-position: 0 0, 0 50%;
    filter: drop-shadow(0 0 3px rgb(119 221 119 / 0.6));
  }
}
@media (min-width: 60em) and (prefers-reduced-motion: no-preference) {
  .process-art::before { animation: sa-belt 2.4s linear infinite; }
}
@keyframes sa-belt { to { background-position: 46px 0, 0 50%; } }
html[data-a11y-motion] .process-art::before { animation: none; }

/* Blog: "Quanto tempo você tem?" centralizado logo abaixo do topo */
.time-bar { padding-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); }
.time-bar .time-filter {
  justify-content: center; text-align: center; max-width: 48rem; margin-inline: auto; padding: 0.9rem 1.25rem;
  border-radius: 999px; border: 1px solid rgb(16 183 127 / 0.35); background: rgb(47 47 52 / 0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.time-bar .time-options { justify-content: center; }
@media (max-width: 39.99em) { .time-bar .time-filter { border-radius: var(--radius); flex-direction: column; } }

/* fios dos títulos de seção do blog: esmeralda em vez de branco */
.rule-head, .issue-toc-title { border-bottom: 2px solid var(--primary); box-shadow: 0 1px 6px -3px rgb(16 183 127 / 0.6); }

/* ================================================================ Artigo v4: resumo, sumário em sanfona e lateral */
.post-dek {
  max-width: 46rem; margin-top: 1.25rem;
  font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2);
  padding-left: 1rem; border-left: 3px solid var(--primary);
}
.post-cover { margin-bottom: 2rem; }
.post-main { min-width: 0; }

/* Sumário em sanfona logo após a capa */
.toc { margin-bottom: 2.25rem; transition: border-color 0.3s; }
.toc[open], .toc:hover { border-color: rgb(16 183 127 / 0.45); }
.toc summary { min-height: 3.5rem; }
.toc summary:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 2px; border-radius: var(--radius-sm); }
.toc-count { margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.toc-chevron { width: 0.6rem; height: 0.6rem; margin: 0 0.25rem 0.2rem 0.5rem; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(45deg); transition: transform 0.3s var(--ease); }
.toc[open] .toc-chevron { transform: translateY(0.2rem) rotate(-135deg); }
.toc ol { padding-top: 0.25rem; }
@media (min-width: 40em) { .toc[open] ol { columns: 2; column-gap: 2rem; display: block; } .toc li { break-inside: avoid; } }

/* Tags do artigo viram links para a busca */
.tags li:has(a) { padding: 0; }
.tags a { display: block; padding: 0.3rem 0.75rem; color: inherit; text-decoration: none; border-radius: 999px; transition: color 0.2s, background 0.2s; }
.tags li:has(a):hover { border-color: var(--primary); }
.tags a:hover { color: var(--text); background: var(--primary-glow); }

/* Lateral */
.post-sidebar { display: grid; gap: 1.5rem; align-content: start; min-width: 0; }
.side-block { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.side-title {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
}
.side-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgb(16 183 127 / 0.6), transparent); }

.side-cats { list-style: none; display: grid; gap: 0.15rem; }
.side-cats a {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.6rem; margin-inline: -0.6rem;
  border-radius: 0.6rem; color: var(--text-2); text-decoration: none; font-size: 0.9375rem; line-height: 1.3;
  transition: background 0.2s, color 0.2s;
}
.side-cats a:hover, .side-cats a[aria-current] { background: var(--primary-glow); color: var(--text); }
.side-cat-icon { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 0.55rem; border: 1px solid var(--line-strong); color: var(--primary); }
.side-cat-icon .icon { width: 1rem; height: 1rem; }
.side-cats a[aria-current] .side-cat-icon { border-color: var(--primary); box-shadow: 0 0 12px rgb(16 183 127 / 0.35); }
.side-cat-name { flex: 1; }
.side-cat-count { min-width: 1.75rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--surface-2); font-size: 0.75rem; font-weight: 700; text-align: center; color: var(--muted); }

.side-recent { list-style: none; display: grid; gap: 0.9rem; }
.side-recent a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.8rem; align-items: center; text-decoration: none; color: inherit; }
.side-recent img, .side-recent-ph { width: 4.5rem; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 0.5rem; border: 1px solid var(--line); transition: transform 0.35s var(--ease), border-color 0.3s; }
.side-recent-ph { display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgb(16 183 127 / 0.25), var(--surface-2)); color: var(--primary-soft); }
.side-recent-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.9rem; font-weight: 600; line-height: 1.35; color: var(--text); transition: color 0.2s; }
.side-recent-meta { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted); }
.side-recent a:hover img, .side-recent a:hover .side-recent-ph { transform: scale(1.04); border-color: var(--primary); }
.side-recent a:hover .side-recent-title { color: var(--primary-soft); }

/* Mini banner de conversa (com vidro e um brilho discreto) */
.side-cta {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 1.5rem 1.25rem; border-radius: var(--radius-sm);
  border: 1px solid rgb(16 183 127 / 0.45);
  background: linear-gradient(160deg, rgb(16 183 127 / 0.2), rgb(40 40 44 / 0.6) 60%), var(--surface);
  box-shadow: 0 0 0 1px rgb(119 221 119 / 0.05), 0 18px 40px -24px rgb(16 183 127 / 0.6);
}
.side-cta::before {
  content: ""; position: absolute; z-index: -1; width: 12rem; height: 12rem; right: -4rem; top: -5rem;
  border-radius: 50%; background: radial-gradient(circle, rgb(119 221 119 / 0.28), transparent 70%);
  animation: side-glow 6s ease-in-out infinite alternate;
}
@keyframes side-glow { to { transform: translate(-1.5rem, 2rem) scale(1.15); } }
.side-cta-kicker { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary-soft); }
.side-cta-title { margin-top: 0.5rem; font-size: 1.2rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
.side-cta-text { margin: 0.5rem 0 1.1rem; font-size: 0.9rem; color: var(--text-2); }
.side-cta .btn { width: 100%; justify-content: center; }
.side-cta-alt { display: block; margin-top: 0.7rem; text-align: center; font-size: 0.8125rem; color: var(--text-2); }
.side-cta-alt:hover { color: var(--primary-soft); }

.side-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.side-tags a {
  display: inline-block; padding: 0.3rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; color: var(--text-2); text-decoration: none;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.side-tags a:hover { border-color: var(--primary); color: var(--text); box-shadow: 0 0 10px rgb(16 183 127 / 0.3); }

@media (min-width: 60em) {
  .side-cta { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
/* No tablet a lateral vem depois do texto, em duas colunas */
@media (min-width: 40em) and (max-width: 59.99em) {
  .post-sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .side-cta { grid-column: 1 / -1; }
}

/* Vídeo do YouTube que só carrega ao clicar */
.video-embed { margin-block: 2rem; }
.video-embed-link {
  position: relative; display: flex; align-items: center; gap: 1.1rem; padding: 1.25rem;
  min-height: 9rem; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line-strong); text-decoration: none; color: var(--text);
  background: radial-gradient(circle at 20% 30%, rgb(16 183 127 / 0.28), transparent 55%), linear-gradient(135deg, var(--surface-2), var(--bg-deep));
  transition: border-color 0.3s, box-shadow 0.3s;
}
.video-embed-link:hover { border-color: var(--primary); box-shadow: 0 0 24px -6px rgb(16 183 127 / 0.55); }
.video-embed-play { flex: none; position: relative; width: 4rem; height: 4rem; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 0.5rem rgb(16 183 127 / 0.18); transition: transform 0.3s var(--ease); }
.video-embed-play::after { content: ""; position: absolute; left: 1.6rem; top: 1.25rem; border-style: solid; border-width: 0.75rem 0 0.75rem 1.2rem; border-color: transparent transparent transparent var(--on-primary); }
.video-embed-link:hover .video-embed-play { transform: scale(1.08); }
.video-embed-text { display: grid; gap: 0.35rem; }
.video-embed-text strong { font-size: 1.1rem; line-height: 1.3; }
.video-embed-text span { font-size: 0.875rem; color: var(--text-2); }
.video-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-sm); }
.video-embed figcaption { margin-top: 0.6rem; font-size: 0.8125rem; color: var(--muted); }
.video-embed.is-playing figcaption { display: none; }