/* =====================================================================
   HD360 Moinhos — main.css
   Sistema de design: hd360-design (light / alegre / acolhedor)
   Arquitetura: BEM · tokens em :root · mobile-first
   ===================================================================== */

/* ---------- Fonte display da marca ---------- */
@font-face {
  font-family: "Barnacle Boy";
  src: url("../../fonts/Barnacle%20Boy.otf") format("opentype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Cores da marca */
  --azul: #00A5EA;
  --amarelo: #FFC700;
  --rosa: #FB3C63;
  --lilas: #8F64C8;
  --verde: #A8C420;

  /* Versões escurecidas (texto sobre tint claro — contraste) */
  --azul-ink: #0481b6;
  --rosa-ink: #c01b40;
  --lilas-ink: #6b3fa6;
  --verde-ink: #6f841a;
  --amarelo-ink: #a87f00;

  /* Tints suaves (fundo de card) */
  --azul-soft: #E4F6FD;
  --amarelo-soft: #FFF6D6;
  --rosa-soft: #FEE4EA;
  --lilas-soft: #EFE7F8;
  --verde-soft: #F1F6D9;

  /* Superfícies e tinta */
  --branco: #ffffff;
  --creme: #fbf8f3;
  --creme-deep: #f4eee4;
  --tinta: #2e2a39;
  --tinta-muted: #6b6577;
  --tinta-soft: #9a94a6;
  --linha: rgba(46, 42, 57, 0.08);

  /* Gradientes */
  --grad-marca: linear-gradient(100deg, #00A5EA 0%, #8F64C8 32%, #FB3C63 58%, #FFC700 100%);
  --grad-ceu: linear-gradient(180deg, #E4F6FD 0%, #ffffff 100%);
  --grad-sol: linear-gradient(135deg, #FFC700 0%, #FB3C63 100%);

  /* Tipografia */
  --font-display: "Barnacle Boy", "Baloo 2", "Comic Sans MS", system-ui, sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", system-ui, sans-serif;

  /* Raios */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 30px;
  --r-xl: 44px;
  --r-pill: 999px;

  /* Movimento */
  --ease-gentle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.4, 0.5, 1);
  --float: 6s;

  /* Layout */
  --container: 1180px;
  --container-narrow: 760px;
  --nav-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }

/* ---------- Tipografia base ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.04; letter-spacing: .005em; color: var(--tinta); }
.hl { color: var(--azul); }
.hl--azul { color: var(--azul); } .hl--rosa { color: var(--rosa); }
.hl--lilas { color: var(--lilas); } .hl--verde { color: var(--verde); }
/* Amarelo (#FFC700) é cor de preenchimento/destaque, não de texto sobre branco:
   escurecê-lo vira um mostarda off-brand. Onde precisa virar texto vivo, usamos
   o degradê da marca (que contém o amarelo na ponta) em vez do tom queimado. */
.hl--amarelo {
  background: var(--grad-marca);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--rosa); /* fallback (impressão / navegadores sem background-clip) */
}

/* ---------- Helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 80px); }
.container--narrow { max-width: var(--container-narrow); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 12px; border-radius: var(--r-pill);
  font: 600 13px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
}
.eyebrow__dot { width: 9px; height: 9px; border-radius: 50%; }
/* versão maior, para dizer logo de cara o que a clínica é (hero da home) */
.eyebrow--lg { padding: 10px 20px 10px 14px; font-size: clamp(13px, 1.25vw, 15.5px); letter-spacing: .04em; }
.eyebrow--lg .eyebrow__dot { width: 11px; height: 11px; }
.eyebrow--azul { background: var(--azul-soft); color: var(--azul-ink); }
.eyebrow--azul .eyebrow__dot { background: var(--azul); }
.eyebrow--rosa { background: var(--rosa-soft); color: var(--rosa-ink); }
.eyebrow--rosa .eyebrow__dot { background: var(--rosa); }
.eyebrow--lilas { background: var(--lilas-soft); color: var(--lilas-ink); }
.eyebrow--lilas .eyebrow__dot { background: var(--lilas); }
.eyebrow--verde { background: var(--verde-soft); color: var(--verde-ink); }
.eyebrow--verde .eyebrow__dot { background: var(--verde); }
.eyebrow--amarelo { background: var(--amarelo-soft); color: var(--amarelo-ink); }
.eyebrow--amarelo .eyebrow__dot { background: var(--amarelo); }

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 14px 28px; border-radius: var(--r-pill);
  font: 600 15px/1 var(--font-body); letter-spacing: .01em; text-align: center;
  transition: transform .28s var(--ease-bounce), box-shadow .28s var(--ease-soft), background .25s var(--ease-soft), color .25s var(--ease-soft);
  --c: var(--azul); --c-on: #fff; --c-ink: var(--azul-ink); --c-rgb: 0,165,234;
}
/* brilho diagonal que varre o botao no hover */
.btn::before {
  content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.4) 50%, transparent 80%);
  transform: skewX(-18deg); transition: left .6s var(--ease-soft); pointer-events: none;
}
.btn:hover::before { left: 135%; }
.btn:hover { transform: translateY(-3px) scale(1.02); }
.btn:active { transform: translateY(-1px) scale(.97); }
.btn__ic { width: 20px; height: 20px; }

/* paletas da identidade (definem as variaveis da cor) */
.btn--azul    { --c: var(--azul);    --c-on: #fff;         --c-ink: var(--azul-ink);    --c-rgb: 0,165,234; }
.btn--rosa    { --c: var(--rosa);    --c-on: #fff;         --c-ink: var(--rosa-ink);    --c-rgb: 251,60,99; }
.btn--lilas   { --c: var(--lilas);   --c-on: #fff;         --c-ink: var(--lilas-ink);   --c-rgb: 143,100,200; }
.btn--verde   { --c: var(--verde);   --c-on: var(--tinta); --c-ink: var(--verde-ink);   --c-rgb: 168,196,32; }
.btn--amarelo { --c: var(--amarelo); --c-on: var(--tinta); --c-ink: var(--amarelo-ink); --c-rgb: 255,199,0; }

/* solido — preenchido na cor da secao */
.btn--solid { background: var(--c); color: var(--c-on); box-shadow: 0 10px 24px rgba(var(--c-rgb), .30); }
.btn--solid:hover { box-shadow: 0 16px 34px rgba(var(--c-rgb), .44); }

/* contorno — preenche na cor ao passar o mouse */
.btn--ghost { background: var(--branco); color: var(--c-ink); box-shadow: inset 0 0 0 2px var(--c); }
.btn--ghost:hover { background: var(--c); color: var(--c-on); box-shadow: inset 0 0 0 2px var(--c), 0 14px 30px rgba(var(--c-rgb), .34); }

/* botoes sobre faixa colorida (CTA) */
.btn--white { background: #fff; color: var(--rosa); box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.btn--white:hover { box-shadow: 0 16px 34px rgba(0,0,0,.2); }
.btn--ghost-on-color { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.btn--ghost-on-color:hover { background: rgba(255,255,255,.26); }

/* Blobs decorativos */
.blob {
  position: absolute; z-index: 0; border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
  filter: blur(48px); opacity: .42; pointer-events: none;
  animation: bob 9s ease-in-out infinite;
}
.blob--azul { background: var(--azul); }
.blob--amarelo { background: var(--amarelo); }
.blob--rosa { background: var(--rosa); }
.blob--lilas { background: var(--lilas); }
.blob--verde { background: var(--verde); }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

.float { animation: bob var(--float) ease-in-out infinite; }
.float--slow { animation-duration: 8s; }
.float--lag { animation-delay: -2.5s; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-gentle), transform .7s var(--ease-gentle); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* Onda divisória */
.wave { position: absolute; left: 0; width: 100%; line-height: 0; z-index: 1; pointer-events: none; }
.wave--bottom { bottom: -1px; }
.wave--top { top: -1px; transform: rotate(180deg); }
.wave svg { width: 100%; height: clamp(40px, 6vw, 90px); display: block; }

/* ---------- Seções ---------- */
.section { position: relative; padding-block: clamp(64px, 9vw, 120px); overflow: clip; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.section--white { background: var(--branco); }
.section--cream { background: var(--creme); }
/* Faixa proporcional: sem 100vh, altura pelo conteúdo (combina com as ondas divisórias) */
.section--band { min-height: 0; padding-block: clamp(48px, 7vw, 92px); }
.section__head { max-width: 720px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.section__head--left { margin-inline: 0; text-align: left; }
.section__title { font-size: clamp(34px, 5.2vw, 64px); margin-top: 12px; text-wrap: balance; }
.section__head--wide { max-width: 940px; }
.section__head--wide .section__title { font-size: clamp(30px, 4.3vw, 48px); }
.section__lede { font: 500 clamp(17px, 1.6vw, 20px)/1.6 var(--font-body); color: var(--tinta-muted); margin-top: 14px; }

/* =====================================================================
   NAV — float header
   ===================================================================== */
.nav {
  position: fixed; inset: 14px 14px auto 14px; z-index: 100;
  max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; gap: 20px;
  padding: 9px 12px 9px 20px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 30px rgba(46,42,57,.08), 0 2px 6px rgba(46,42,57,.04);
  transition: padding .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.nav.is-scrolled { padding-block: 6px; box-shadow: 0 8px 24px rgba(46,42,57,.12); }
.nav__brand { display: inline-flex; align-items: baseline; gap: 2px; flex-shrink: 0; }
.nav__brand-mark { font: 400 26px/1 var(--font-display); color: var(--azul); letter-spacing: .01em; }
.nav__brand-mark b { color: var(--rosa); font-weight: 400; }
.nav__brand-sub { font: 700 11px/1 var(--font-body); letter-spacing: .22em; color: var(--tinta-muted); text-transform: uppercase; align-self: center; }
.nav__links { display: flex; gap: 2px; margin-inline: auto; }
.nav__link {
  padding: 9px 15px; border-radius: var(--r-pill);
  font: 600 15px/1 var(--font-body); color: var(--tinta);
  transition: background .2s var(--ease-soft), color .2s var(--ease-soft);
}
.nav__link:hover, .nav__link[aria-current="page"] { background: var(--azul-soft); color: var(--azul-ink); }
/* versão compacta do botão para caber dentro da pílula do menu */
.nav__cta { flex-shrink: 0; min-height: 40px; padding: 10px 20px; gap: 7px; font-size: 14px; box-shadow: 0 4px 12px rgba(143,100,200,.22); }
.nav__cta .btn__ic { width: 17px; height: 17px; }
.nav__burger { display: none; width: 46px; height: 46px; border-radius: 50%; background: var(--azul-soft); flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.nav__burger span { width: 20px; height: 2.5px; border-radius: 2px; background: var(--azul-ink); transition: transform .3s var(--ease-gentle), opacity .2s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Drawer mobile */
.drawer-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(46,42,57,.4); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(86vw, 360px); padding: 28px 24px;
  background: var(--branco); border-radius: var(--r-xl) 0 0 var(--r-xl);
  display: flex; flex-direction: column; gap: 4px; overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(105%); transition: transform .4s var(--ease-gentle);
  box-shadow: -20px 0 50px rgba(46,42,57,.16);
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.drawer__close { width: 44px; height: 44px; border-radius: 50%; background: var(--creme); font-size: 22px; color: var(--tinta); line-height: 1; }
.drawer__link { padding: 12px 16px; border-radius: var(--r-md); font: 600 17px/1 var(--font-body); color: var(--tinta); }
.drawer__link:hover { background: var(--azul-soft); color: var(--azul-ink); }
.drawer__cta { margin-top: 14px; flex-shrink: 0; }
/* contatos dentro do menu mobile */
.drawer__contacts { margin-top: auto; padding: 16px; border-radius: var(--r-md); background: var(--creme); display: flex; flex-direction: column; gap: 2px; }
.drawer__label { font: 700 12px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-muted); margin-bottom: 8px; }
.drawer__contact { display: flex; align-items: center; gap: 10px; min-height: 36px; font: 500 14.5px/1.3 var(--font-body); color: var(--tinta); word-break: break-word; }
.drawer__contact svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--azul-ink); }
.drawer__contact:hover, .drawer__contact:focus-visible { color: var(--azul-ink); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-top: calc(var(--nav-h) + 12px); padding-bottom: clamp(40px, 5vw, 72px); background: var(--grad-ceu); overflow: clip; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg .blob--azul { width: 380px; height: 380px; top: -60px; left: -80px; }
.hero__bg .blob--amarelo { width: 320px; height: 320px; bottom: -40px; right: 10%; animation-delay: -3s; }
.hero__bg .blob--lilas { width: 240px; height: 240px; top: 30%; right: -60px; opacity: .3; animation-delay: -5s; }
/* conteúdo alinhado ao header float (padding menor) + mais largura pro vídeo */
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.06fr; gap: clamp(28px, 3.5vw, 50px); align-items: center; padding-inline: clamp(20px, 3vw, 26px); }
.hero__title { font-size: clamp(34px, 4.7vw, 56px); line-height: 1.04; margin: 14px 0 0; }
.hero__lede { font: 500 clamp(16px, 1.5vw, 19px)/1.6 var(--font-body); color: var(--tinta-muted); margin-top: 16px; max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 24px; font: 500 13.5px/1.4 var(--font-body); color: var(--tinta-muted); }
.hero__trust li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.hero__trust li::before { width: 7px; height: 7px; }
.hero__trust li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.hero__trust b { color: var(--tinta); font-weight: 700; }
.hero__art { position: relative; }
.hero__art::after { content: ""; position: absolute; inset: 8% 4% -2% 4%; z-index: -1; background: radial-gradient(circle at 50% 60%, rgba(255,199,0,.25), transparent 62%); border-radius: 50%; }
.hero__art img { width: 100%; max-width: 520px; margin-inline: auto; filter: drop-shadow(0 26px 40px rgba(46,42,57,.16)); }

/* =====================================================================
   FEATURES (diferenciais)
   ===================================================================== */
.features { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.feature {
  background: var(--branco); border-radius: var(--r-lg); padding: 30px 28px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 12px 30px rgba(46,42,57,.06), 0 4px 10px rgba(46,42,57,.04);
  transition: transform .25s var(--ease-gentle), box-shadow .25s var(--ease-soft);
}
.feature:hover { transform: translateY(-6px); }
.feature__icon { width: 58px; height: 58px; border-radius: var(--r-md); display: grid; place-items: center; }
.feature__icon svg { width: 28px; height: 28px; }
.feature__title { font: 700 20px/1.25 var(--font-body); color: var(--tinta); }
.feature__text { font: 400 15.5px/1.6 var(--font-body); color: var(--tinta-muted); }
/* cores codificadas */
.is-azul   .feature__icon, .icon--azul   { background: var(--azul-soft); color: var(--azul-ink); }
.is-rosa   .feature__icon, .icon--rosa   { background: var(--rosa-soft); color: var(--rosa-ink); }
.is-lilas  .feature__icon, .icon--lilas  { background: var(--lilas-soft); color: var(--lilas-ink); }
.is-verde  .feature__icon, .icon--verde  { background: var(--verde-soft); color: var(--verde-ink); }
.is-amarelo .feature__icon, .icon--amarelo { background: var(--amarelo-soft); color: var(--amarelo-ink); }
.is-azul:hover  { box-shadow: 0 24px 50px rgba(0,165,234,.18); }
.is-rosa:hover  { box-shadow: 0 24px 50px rgba(251,60,99,.18); }
.is-lilas:hover { box-shadow: 0 24px 50px rgba(143,100,200,.18); }
.is-verde:hover { box-shadow: 0 24px 50px rgba(168,196,32,.2); }
.is-amarelo:hover { box-shadow: 0 24px 50px rgba(255,199,0,.22); }

/* =====================================================================
   CONVÊNIOS (planos parceiros)
   ===================================================================== */
.convenios { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); max-width: 1040px; margin-inline: auto; }
.convenio {
  background: var(--branco); border-radius: var(--r-lg); padding: 28px 24px;
  display: flex; align-items: center; justify-content: center; min-height: 128px; text-align: center;
  border: 1px solid var(--creme-deep);
  box-shadow: 0 12px 30px rgba(46,42,57,.06), 0 4px 10px rgba(46,42,57,.04);
  transition: transform .25s var(--ease-gentle), box-shadow .25s var(--ease-soft);
}
.convenio:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0,165,234,.16); }
.convenio__logo { width: 100%; max-width: 170px; height: 64px; object-fit: contain; }
.convenios__note { text-align: center; margin-top: 28px; font: 500 15.5px/1.65 var(--font-body); color: var(--tinta-muted); }
.convenios__note a { color: var(--azul-ink); font-weight: 700; text-decoration: none; box-shadow: inset 0 -2px 0 var(--azul-soft); }
.convenios__note a:hover { box-shadow: inset 0 -2px 0 var(--azul); }

/* =====================================================================
   SOBRE / split (boas-vindas)
   ===================================================================== */
.split { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split__art { position: relative; }
.split__art img { width: 100%; max-width: 420px; margin-inline: auto; filter: drop-shadow(0 22px 36px rgba(46,42,57,.14)); }
.split__art .blob { width: 78%; height: 78%; inset: 11% 11% auto 11%; top: 8%; opacity: .35; }
.split__title { font-size: clamp(30px, 4.4vw, 54px); margin-top: 12px; }
.split__text { font: 400 16.5px/1.7 var(--font-body); color: var(--tinta-muted); margin-top: 16px; }
.split__text + .split__text { margin-top: 14px; }
.split__cta { margin-top: 26px; }

/* =====================================================================
   ESPECIALIDADES (prévia em chips)
   ===================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 1120px; margin-inline: auto; }
#especialidades > .container { padding-inline: clamp(16px, 3vw, 30px); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--branco); color: var(--tinta);
  font: 600 14px/1 var(--font-body); white-space: nowrap;
  box-shadow: 0 6px 16px rgba(46,42,57,.06);
  transition: transform .2s var(--ease-gentle), box-shadow .2s, background .2s;
}
.chip:hover { transform: translateY(-3px); }
.chip__puzzle { display: inline-grid; place-items: center; width: 16px; height: 16px; flex-shrink: 0; }
.chip__puzzle svg { width: 16px; height: 16px; }
.chip:nth-child(5n+1) .chip__puzzle svg { fill: var(--azul); }
.chip:nth-child(5n+2) .chip__puzzle svg { fill: var(--rosa); }
.chip:nth-child(5n+3) .chip__puzzle svg { fill: var(--lilas); }
.chip:nth-child(5n+4) .chip__puzzle svg { fill: var(--verde); }
.chip:nth-child(5n+5) .chip__puzzle svg { fill: var(--amarelo); }
.especialidades__cta { display: flex; justify-content: center; margin-top: 38px; }

/* =====================================================================
   ABORDAGEM (banda colorida suave)
   ===================================================================== */
.approach { position: relative; }
.approach__card { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(28px, 4vw, 56px); align-items: center; background: var(--lilas-soft); border-radius: var(--r-xl); padding: clamp(32px, 5vw, 64px); overflow: hidden; }
.approach__title { font-size: clamp(28px, 4vw, 50px); margin-top: 12px; }
.approach__text { font: 400 16.5px/1.7 var(--font-body); color: var(--tinta-muted); margin-top: 16px; }
.approach__art img { width: 100%; max-width: 320px; margin-inline: auto; filter: drop-shadow(0 22px 34px rgba(46,42,57,.16)); }

/* =====================================================================
   STEPS (como começar)
   ===================================================================== */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { position: relative; text-align: center; padding: 0 8px; }
.step__num {
  position: relative; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font: 400 30px/1 var(--font-display); color: #fff; cursor: default;
  transition: transform .35s var(--ease-bounce), box-shadow .35s var(--ease-soft);
}
.step:nth-child(1) .step__num { background: var(--azul); }
.step:nth-child(2) .step__num { background: var(--lilas); }
.step:nth-child(3) .step__num { background: var(--verde); }
.step:nth-child(4) .step__num { background: var(--rosa); }
/* halo que pulsa no hover */
.step__num::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2.5px solid currentColor; color: inherit; opacity: 0; transform: scale(.7); transition: opacity .35s var(--ease-soft), transform .35s var(--ease-bounce); }
.step:nth-child(1) .step__num::after { color: var(--azul); }
.step:nth-child(2) .step__num::after { color: var(--lilas); }
.step:nth-child(3) .step__num::after { color: var(--verde); }
.step:nth-child(4) .step__num::after { color: var(--rosa); }
/* hover: bolinha sobe, cresce, gira de leve + halo aparece + sombra colorida */
.step:hover .step__num, .step__num:focus-visible { transform: translateY(-5px) scale(1.12) rotate(-6deg); }
.step:hover .step__num::after { opacity: .55; transform: scale(1); }
.step:nth-child(1):hover .step__num { box-shadow: 0 14px 28px rgba(0,165,234,.45); }
.step:nth-child(2):hover .step__num { box-shadow: 0 14px 28px rgba(143,100,200,.45); }
.step:nth-child(3):hover .step__num { box-shadow: 0 14px 28px rgba(168,196,32,.5); }
.step:nth-child(4):hover .step__num { box-shadow: 0 14px 28px rgba(251,60,99,.45); }
.step__title { font: 700 18px/1.3 var(--font-body); color: var(--tinta); }
.step__text { font: 400 15px/1.6 var(--font-body); color: var(--tinta-muted); margin-top: 8px; }
.steps__cta { display: flex; justify-content: center; margin-top: clamp(32px, 4.5vw, 52px); }
.step:not(:last-child)::after { content: ""; position: absolute; top: 32px; left: calc(50% + 42px); right: calc(-50% + 42px); height: 3px; background: repeating-linear-gradient(90deg, var(--linha) 0 8px, transparent 8px 16px); }
/* seção "Por onde começar": faixa proporcional (sem 100vh) — ver .section--band */

/* =====================================================================
   STATS
   ===================================================================== */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; background: var(--branco); border-radius: var(--r-xl); padding: clamp(32px, 5vw, 52px); text-align: center; box-shadow: 0 16px 40px rgba(46,42,57,.06); }
.stat__num { display: block; font: 400 clamp(40px, 6vw, 68px)/1 var(--font-display); }
.stat__key { font: 600 13.5px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-muted); }

/* =====================================================================
   BLOG preview
   ===================================================================== */
.posts { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.post { background: var(--branco); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 12px 30px rgba(46,42,57,.06); transition: transform .25s var(--ease-gentle), box-shadow .25s; display: flex; flex-direction: column; }
.post:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(46,42,57,.1); }
.post__cover { aspect-ratio: 16/10; display: grid; place-items: center; }
.post__cover--azul { background: var(--azul-soft); } .post__cover--rosa { background: var(--rosa-soft); } .post__cover--verde { background: var(--verde-soft); }
.post__cover svg { width: 54px; height: 54px; }
.post__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.post__tag { font: 600 12px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--lilas-ink); }
.post__title { font: 700 18px/1.35 var(--font-body); color: var(--tinta); }
.post__soon { margin-top: auto; font: 600 13px/1 var(--font-body); color: var(--tinta-soft); }

/* =====================================================================
   CTA band (única banda full-color)
   ===================================================================== */
.cta { position: relative; }
.cta__card { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--grad-marca); color: #fff; padding: clamp(36px, 5.5vw, 68px); display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.cta__overlay { position: absolute; inset: 0; z-index: 0; background: linear-gradient(120deg, rgba(0,70,130,.26), transparent 55%); pointer-events: none; }
.cta__art { position: relative; z-index: 1; display: grid; place-items: center; }
.cta__art::before { content: ""; position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.32), rgba(255,255,255,0) 70%); }
.cta__art img { position: relative; width: 100%; max-width: 330px; filter: drop-shadow(0 22px 34px rgba(0,0,0,.28)); }
.cta__copy { position: relative; z-index: 1; }
.cta__title { color: #fff; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.05; text-wrap: balance; }
.cta__text { margin-top: 16px; font: 500 17px/1.6 var(--font-body); color: rgba(255,255,255,.94); max-width: 44ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* =====================================================================
   REELS DO INSTAGRAM (carrossel)
   ===================================================================== */
.reels__viewport { position: relative; margin-top: 8px; border-radius: var(--r-xl); isolation: isolate; overflow: hidden; }

/* palco coverflow 3D: card central nitido, laterais desfocados (gaussiano) */
.reels__stage { position: relative; z-index: 1; height: calc(clamp(188px, 54vw, 258px) * 16 / 9 + 28px); display: flex; align-items: center; justify-content: center; perspective: 1100px; }
.reel { position: absolute; top: 50%; left: 50%; width: clamp(188px, 54vw, 258px); opacity: 0; visibility: hidden; transition: transform .55s var(--ease-gentle), opacity .55s var(--ease-gentle), filter .55s var(--ease-gentle); will-change: transform, opacity, filter; }
.reel.is-side { cursor: pointer; }
.reel:not(.is-center) .reel__play, .reel:not(.is-center) .reel__controls, .reel:not(.is-center) .reel__badge { opacity: 0 !important; pointer-events: none; }
.reel__media { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-lg); overflow: hidden; background: #0b0b0f; box-shadow: 0 14px 34px rgba(46,42,57,.14); }
.reel__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(0,0,0,.42); color: #fff; font: 600 11px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(4px); }
.reel__badge svg { width: 12px; height: 12px; }
.reel__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,.32); transition: transform .25s var(--ease-bounce), opacity .25s; }
.reel__play svg { width: 26px; height: 26px; color: var(--rosa); margin-left: 3px; }
.reel__play:hover { transform: scale(1.1); }
.reel__media.is-playing .reel__play { opacity: 0; pointer-events: none; transform: scale(.5); }
.reel__controls { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease-soft), transform .25s var(--ease-soft); }
.reel__media:hover .reel__controls, .reel__media.is-playing .reel__controls, .reel__media:focus-within .reel__controls { opacity: 1; transform: none; }
.reel__ctrl { width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; backdrop-filter: blur(4px); transition: background .2s, transform .2s var(--ease-bounce); }
.reel__ctrl:hover { background: rgba(0,0,0,.72); transform: scale(1.1); }
.reel__ctrl svg { width: 18px; height: 18px; }
.reel__ctrl .ic-pause, .reel__ctrl .ic-unmute { display: none; }
.reel__media.is-playing .reel__toggle .ic-play { display: none; }
.reel__media.is-playing .reel__toggle .ic-pause { display: block; }
.reel__ctrl.is-muted .ic-mute { display: none; }
.reel__ctrl.is-muted .ic-unmute { display: block; }
.reels__stage .reel__cap { display: none; } /* legenda vai para .reels__caption (card central) */
.reels__caption { margin-top: 16px; text-align: center; font: 600 16px/1.35 var(--font-body); color: var(--tinta); min-height: 1.35em; transition: opacity .3s var(--ease-soft); }

/* setas afastadas do conteudo, nas pontas, na cor lilas da marca */
.reels__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.72); color: var(--lilas); border: 2px solid var(--lilas-soft); backdrop-filter: blur(6px); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(143,100,200,.2); transition: transform .2s var(--ease-bounce), background .2s, color .2s, border-color .2s; }
.reels__arrow--prev { left: clamp(6px, 3.5vw, 30px); }
.reels__arrow--next { right: clamp(6px, 3.5vw, 30px); }
.reels__arrow:hover { background: var(--lilas); border-color: var(--lilas); color: #fff; transform: translateY(-50%) scale(1.1); }
.reels__arrow svg { width: 20px; height: 20px; }
.reels__nav { display: flex; justify-content: center; margin-top: 18px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { background: var(--creme); border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: clamp(40px, 6vw, 80px); padding: clamp(48px, 6vw, 72px) 0 28px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: 36px; }
.footer__brand-mark { font: 400 30px/1 var(--font-display); color: var(--azul); }
.footer__brand-mark b { color: var(--rosa); font-weight: 400; }
.footer__tagline { font: 500 15px/1.6 var(--font-body); color: var(--tinta-muted); margin-top: 12px; max-width: 36ch; }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a { width: 42px; height: 42px; border-radius: 50%; background: var(--branco); display: grid; place-items: center; color: var(--tinta); box-shadow: 0 6px 16px rgba(46,42,57,.06); transition: transform .2s, color .2s, background .2s; }
.footer__social a:hover { transform: translateY(-3px); background: var(--azul); color: #fff; }
.footer__social svg { width: 20px; height: 20px; }
.footer__col h4 { font: 700 13px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--tinta); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.footer__col h4::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amarelo); }
.footer__col p, .footer__col a { display: block; font: 400 14.5px/1.55 var(--font-body); color: var(--tinta-muted); margin-bottom: 10px; }
.footer__col a:hover { color: var(--azul-ink); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--linha); }
.footer__legal { font: 400 13px/1.6 var(--font-body); color: var(--tinta-soft); }
.footer__legal a { color: var(--tinta-muted); }
.footer__legal a:hover { color: var(--azul-ink); }
.footer__calm { font: 600 13px/1 var(--font-body); color: var(--tinta-muted); padding: 9px 16px; border-radius: var(--r-pill); background: var(--branco); box-shadow: 0 4px 12px rgba(46,42,57,.06); transition: color .2s; }
.footer__calm:hover { color: var(--azul-ink); }
.footer__calm[aria-pressed="true"] { background: var(--azul-soft); color: var(--azul-ink); }

/* =====================================================================
   WhatsApp float
   ===================================================================== */
.wpp { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-marca); color: #fff; box-shadow: 0 10px 26px rgba(251,60,99,.32); transition: transform .25s var(--ease-bounce); animation: wpp-glow 3s var(--ease-soft) infinite; }
.wpp svg { width: 32px; height: 32px; position: relative; z-index: 1; }
/* anel de glow que expande e some atras do botao */
.wpp::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--grad-marca); z-index: 0; animation: wpp-ring 3s var(--ease-soft) infinite; }
/* a sombra "respira" devagar (lento, sem strobe — publico TEA) */
@keyframes wpp-glow {
  0%, 100% { box-shadow: 0 10px 26px rgba(251,60,99,.32); }
  50%      { box-shadow: 0 14px 34px rgba(251,60,99,.5); }
}
@keyframes wpp-ring {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}
.wpp:hover { transform: scale(1.08); }
.wpp:hover::before { animation-play-state: paused; opacity: 0; }

/* =====================================================================
   Cookie banner
   ===================================================================== */
.cookies { position: fixed; left: 16px; bottom: 16px; z-index: 95; max-width: 380px; background: var(--branco); border-radius: var(--r-md); padding: 22px; box-shadow: 0 18px 44px rgba(46,42,57,.18); transform: translateY(140%); transition: transform .5s var(--ease-gentle); }
.cookies.is-in { transform: none; }
.cookies__title { font: 700 16px/1.3 var(--font-body); color: var(--tinta); margin-bottom: 8px; }
.cookies__text { font: 400 14px/1.55 var(--font-body); color: var(--tinta-muted); }
.cookies__text a { color: var(--azul-ink); text-decoration: underline; }
.cookies__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cookies__actions .btn { min-height: 42px; padding: 10px 18px; font-size: 14px; }
.cookies__mini { background: var(--creme); color: var(--tinta); }

/* =====================================================================
   Responsivo
   ===================================================================== */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__art { order: -1; max-width: 420px; margin-inline: auto; }
  .hero__lede { max-width: none; margin-inline: auto; }
  .hero__actions, .hero__trust { justify-content: center; }
  .split { grid-template-columns: 1fr; text-align: center; }
  .split__art { order: -1; }
  .split__text { margin-inline: auto; max-width: 56ch; }
  .approach__card { grid-template-columns: 1fr; text-align: center; }
  .approach__art { order: -1; }
  .cta__card { grid-template-columns: 1fr; text-align: center; }
  .cta__art { order: -1; }
  .cta__art img { max-width: 240px; }
  .cta__actions { justify-content: center; }
  .cta__title, .cta__text { max-width: none; margin-inline: auto; }
}
/* menu com 7 itens: aperta um pouco antes de virar hambúrguer */
@media (max-width: 1320px) {
  .nav { gap: 12px; }
  .nav__link { padding: 9px 11px; font-size: 14.5px; gap: 6px; }
}
@media (max-width: 1140px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; margin-left: auto; }
}
@media (max-width: 880px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) {
  .nav { inset: 10px 10px auto 10px; padding-left: 16px; }
  .nav__brand-sub { display: none; }
  .steps { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .cookies { left: 10px; right: 10px; bottom: 10px; max-width: none; }
  .wpp { width: 54px; height: 54px; bottom: 14px; right: 14px; }
}

/* =====================================================================
   Movimento reduzido (acessibilidade — público TEA)
   ===================================================================== */
.calm .blob, .calm .float, .calm .wave svg { animation: none !important; transform: none !important; }
.calm .reveal { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .blob, .float { transform: none !important; }
}

/* =====================================================================
   AJUSTES — logo, menu quebra-cabeça, vídeo no hero
   ===================================================================== */

/* ---------- Logo (imagem) ---------- */
.nav__logo { height: 40px; width: auto; display: block; transition: height .3s var(--ease-soft); }
.nav.is-scrolled .nav__logo { height: 34px; }
.drawer__logo { height: 36px; width: auto; }
.footer__logo { height: 48px; width: auto; margin-bottom: 4px; }

/* ---------- Menu com peças de quebra-cabeça ---------- */
.nav__link { display: inline-flex; align-items: center; gap: 8px; }
.nav__puzzle { display: inline-grid; place-items: center; width: 18px; height: 18px; flex-shrink: 0; }
.nav__puzzle svg { width: 18px; height: 18px; fill: var(--c, var(--azul)); transition: fill .2s var(--ease-soft); }
/* cor codificada por item (alternada) */
.nav__link[data-color="azul"]   { --c: var(--azul);   --c-soft: var(--azul-soft);   --c-ink: var(--azul-ink); }
.nav__link[data-color="rosa"]   { --c: var(--rosa);   --c-soft: var(--rosa-soft);   --c-ink: var(--rosa-ink); }
.nav__link[data-color="amarelo"]{ --c: var(--amarelo);--c-soft: var(--amarelo-soft);--c-ink: var(--amarelo-ink); }
.nav__link[data-color="verde"]  { --c: var(--verde);  --c-soft: var(--verde-soft);  --c-ink: var(--verde-ink); }
.nav__link[data-color="lilas"]  { --c: var(--lilas);  --c-soft: var(--lilas-soft);  --c-ink: var(--lilas-ink); }
/* hover / foco / página atual: fundo vira a cor (suave), texto vira a tinta da cor, peça anima */
.nav__link:hover, .nav__link:focus-visible, .nav__link[aria-current="page"] { background: var(--c-soft); color: var(--c-ink); }
.nav__link:hover .nav__puzzle svg, .nav__link:focus-visible .nav__puzzle svg, .nav__link[aria-current="page"] .nav__puzzle svg { fill: var(--c); }
.nav__link:hover .nav__puzzle, .nav__link:focus-visible .nav__puzzle { animation: puzzle-pop .55s var(--ease-bounce); }
@keyframes puzzle-pop {
  0%   { transform: rotate(0) scale(1); }
  35%  { transform: rotate(-14deg) scale(1.18); }
  65%  { transform: rotate(10deg) scale(1.1); }
  100% { transform: rotate(0) scale(1.06); }
}
/* drawer (mobile) também com peças */
.drawer__link { display: flex; align-items: center; gap: 12px; }
.drawer__puzzle { display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; }
.drawer__puzzle svg { width: 22px; height: 22px; fill: var(--c, var(--azul)); }
.drawer__link[data-color="azul"]   { --c: var(--azul);   --c-soft: var(--azul-soft);   --c-ink: var(--azul-ink); }
.drawer__link[data-color="rosa"]   { --c: var(--rosa);   --c-soft: var(--rosa-soft);   --c-ink: var(--rosa-ink); }
.drawer__link[data-color="amarelo"]{ --c: var(--amarelo);--c-soft: var(--amarelo-soft);--c-ink: var(--amarelo-ink); }
.drawer__link[data-color="verde"]  { --c: var(--verde);  --c-soft: var(--verde-soft);  --c-ink: var(--verde-ink); }
.drawer__link[data-color="lilas"]  { --c: var(--lilas);  --c-soft: var(--lilas-soft);  --c-ink: var(--lilas-ink); }
.drawer__link:hover, .drawer__link:focus-visible { background: var(--c-soft); color: var(--c-ink); }

/* ---------- Vídeo no hero ---------- */
.hero__media { position: relative; }
.hero__video-frame {
  position: relative; padding: 7px; border-radius: var(--r-xl);
  background: var(--grad-marca);
  box-shadow: 0 26px 54px rgba(46,42,57,.18);
}
.hero__video {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: calc(var(--r-xl) - 7px); background: #d8eef9;
}
.hero__video-controls { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.vctrl {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--tinta);
  box-shadow: 0 6px 16px rgba(46,42,57,.22); backdrop-filter: blur(6px);
  transition: transform .2s var(--ease-bounce), background .2s;
}
.vctrl:hover { transform: scale(1.08); background: #fff; }
.vctrl svg { width: 20px; height: 20px; }
.vctrl .ic-pause, .vctrl .ic-unmute { display: none; }
.vctrl.is-playing .ic-play { display: none; }
.vctrl.is-playing .ic-pause { display: block; }
.vctrl.is-muted .ic-mute { display: none; }
.vctrl.is-muted .ic-unmute { display: block; }
/* legenda flutuante */
.hero__video-tag {
  position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.92);
  font: 600 12px/1 var(--font-body); letter-spacing: .04em; color: var(--tinta); text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(46,42,57,.16);
}
.hero__video-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } }
/* peças de quebra-cabeça flutuando ao redor do vídeo */
.hero__puzzle { position: absolute; z-index: 3; pointer-events: none; }
.hero__puzzle svg { width: 100%; height: 100%; fill: currentColor; }
.hero__puzzle--1 { width: 56px; height: 56px; top: -22px; left: -20px; color: var(--amarelo); animation: bob 6s ease-in-out infinite; }
.hero__puzzle--2 { width: 44px; height: 44px; bottom: -18px; right: 30px; color: var(--verde); animation: bob 7s ease-in-out infinite -2s; }
.hero__puzzle--3 { width: 38px; height: 38px; top: 40%; right: -20px; color: var(--rosa); animation: bob 5.5s ease-in-out infinite -3s; }
/* personagem espiando o vídeo */
.hero__peek { position: absolute; bottom: -26px; left: -34px; width: 150px; z-index: 4; pointer-events: none; }
.hero__peek img { width: 100%; filter: drop-shadow(0 14px 22px rgba(46,42,57,.18)); }

@media (max-width: 980px) {
  .hero__media { max-width: 540px; margin-inline: auto; }
  .hero__peek { width: 120px; left: -10px; }
}
@media (max-width: 560px) {
  .hero__video-controls { right: 12px; bottom: 12px; }
  .hero__puzzle--1 { width: 44px; height: 44px; }
  .hero__peek { width: 96px; bottom: -18px; left: 0; }
}

/* calma: para peças e legenda */
.calm .nav__puzzle, .calm .hero__puzzle, .calm .hero__video-tag::before { animation: none !important; transform: none !important; }
.calm .wpp, .calm .wpp::before { animation: none !important; }
.calm .wpp::before { opacity: 0 !important; }

/* =====================================================================
   ============  PÁGINAS INTERNAS — componentes compartilhados  ========
   atendimento · equipe · unidades · ouvidoria · blog · legais
   (mesma linguagem: claro, redondo, sombra colorida suave, calmo)
   ===================================================================== */

/* ---------- Hero interno (mais leve que o hero da home) ---------- */
.page-hero { position: relative; overflow: clip; background: var(--grad-ceu); padding-top: calc(var(--nav-h) + 46px); padding-bottom: clamp(60px, 9vw, 120px); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg .blob { width: 320px; height: 320px; }
.page-hero__bg .blob--a { top: -70px; left: -60px; }
.page-hero__bg .blob--b { bottom: -80px; right: -40px; width: 260px; height: 260px; animation-delay: -3s; }
.page-hero__bg .blob--c { top: 30%; right: 14%; width: 180px; height: 180px; opacity: .28; animation-delay: -5s; }
.page-hero__inner { position: relative; z-index: 2; max-width: 860px; margin-inline: auto; text-align: center; }
.page-hero__title { font-size: clamp(38px, 6vw, 74px); margin-top: 14px; text-wrap: balance; }
.page-hero__lede { font: 500 clamp(17px, 1.7vw, 21px)/1.62 var(--font-body); color: var(--tinta-muted); margin-top: 18px; max-width: 60ch; margin-inline: auto; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; justify-content: center; }
.page-hero__peek { display: block; width: clamp(90px, 14vw, 138px); margin: 28px auto 0; }
.page-hero__peek img { width: 100%; filter: drop-shadow(0 16px 26px rgba(46,42,57,.16)); }

/* Hero interno em duas colunas (com personagem ao lado) */
.page-hero--split .page-hero__inner { max-width: var(--container); text-align: left; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.page-hero--split .page-hero__title { font-size: clamp(34px, 4.2vw, 54px); }
.page-hero--split .page-hero__lede { margin-inline: 0; }
.page-hero--split .page-hero__actions { justify-content: flex-start; }
.page-hero__art { position: relative; display: grid; place-items: center; }
.page-hero__art::after { content: ""; position: absolute; inset: 6% 8%; z-index: 0; background: radial-gradient(circle at 50% 55%, rgba(255,199,0,.22), transparent 64%); border-radius: 50%; }
.page-hero__art img { position: relative; z-index: 1; width: 100%; max-width: 380px; filter: drop-shadow(0 24px 38px rgba(46,42,57,.16)); }
@media (max-width: 860px) {
  .page-hero--split .page-hero__inner { grid-template-columns: 1fr; text-align: center; }
  .page-hero--split .page-hero__lede { margin-inline: auto; }
  .page-hero--split .page-hero__actions { justify-content: center; }
  .page-hero__art { order: -1; max-width: 320px; margin-inline: auto; }
}

/* ---------- Faixa de tinta suave reutilizável ---------- */
.band { border-radius: var(--r-xl); padding: clamp(30px, 5vw, 60px); }
.band--azul { background: var(--azul-soft); } .band--rosa { background: var(--rosa-soft); }
.band--lilas { background: var(--lilas-soft); } .band--verde { background: var(--verde-soft); }
.band--amarelo { background: var(--amarelo-soft); }

/* ---------- Tag / nuvem de etiquetas (programas, formações) ---------- */
.taglist { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 1000px; margin-inline: auto; }
.taglist--left { justify-content: flex-start; }
.tag { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: var(--r-pill); background: var(--branco); color: var(--tinta); font: 600 14px/1.25 var(--font-body); box-shadow: 0 6px 16px rgba(46,42,57,.06); transition: transform .2s var(--ease-gentle), box-shadow .2s; }
.tag:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(46,42,57,.1); }
.tag__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tag:nth-child(5n+1) .tag__dot { background: var(--azul); }
.tag:nth-child(5n+2) .tag__dot { background: var(--rosa); }
.tag:nth-child(5n+3) .tag__dot { background: var(--lilas); }
.tag:nth-child(5n+4) .tag__dot { background: var(--verde); }
.tag:nth-child(5n+5) .tag__dot { background: var(--amarelo); }

/* ---------- Cartões de especialidade (Atendimento) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: clamp(28px, 4vw, 44px); }
.filter { padding: 10px 20px; border-radius: var(--r-pill); background: var(--branco); color: var(--tinta-muted); font: 600 14.5px/1 var(--font-body); box-shadow: 0 6px 16px rgba(46,42,57,.06); transition: transform .2s var(--ease-bounce), background .2s, color .2s, box-shadow .2s; }
.filter:hover { transform: translateY(-2px); color: var(--tinta); }
.filter.is-active { background: var(--lilas); color: #fff; box-shadow: 0 10px 24px rgba(143,100,200,.32); }

.specs { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.spec { display: flex; flex-direction: column; gap: 14px; padding: 30px 26px; background: var(--branco); border-radius: var(--r-lg); box-shadow: 0 12px 30px rgba(46,42,57,.06), 0 4px 10px rgba(46,42,57,.04); transition: transform .25s var(--ease-gentle), box-shadow .25s var(--ease-soft); }
.spec[hidden] { display: none; }
.spec__media { width: 76px; height: 76px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
.spec__media svg { width: 34px; height: 34px; }
.spec__media img { width: 88%; height: 88%; object-fit: contain; }
.spec__title { font: 700 20px/1.25 var(--font-body); color: var(--tinta); }
.spec__text { font: 400 15px/1.62 var(--font-body); color: var(--tinta-muted); }
.spec__tagline { margin-top: auto; padding-top: 4px; font: 600 13px/1 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-soft); }
.spec--azul .spec__media { background: var(--azul-soft); color: var(--azul-ink); } .spec--azul:hover { box-shadow: 0 24px 50px rgba(0,165,234,.18); }
.spec--rosa .spec__media { background: var(--rosa-soft); color: var(--rosa-ink); } .spec--rosa:hover { box-shadow: 0 24px 50px rgba(251,60,99,.18); }
.spec--lilas .spec__media { background: var(--lilas-soft); color: var(--lilas-ink); } .spec--lilas:hover { box-shadow: 0 24px 50px rgba(143,100,200,.18); }
.spec--verde .spec__media { background: var(--verde-soft); color: var(--verde-ink); } .spec--verde:hover { box-shadow: 0 24px 50px rgba(168,196,32,.2); }
.spec--amarelo .spec__media { background: var(--amarelo-soft); color: var(--amarelo-ink); } .spec--amarelo:hover { box-shadow: 0 24px 50px rgba(255,199,0,.22); }
.spec:hover { transform: translateY(-6px); }

/* =====================================================================
   Peças de quebra-cabeça decorativas (float + parallax) — vida sutil no fundo
   Injetadas por JS em .hero__bg / .page-hero__bg / [data-puzzles]. aria-hidden.
   ===================================================================== */
.puzzles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.puzzles--layer { z-index: -1; }                 /* p/ seções com fundo próprio (cream/white) */
.puzzles__bit { position: absolute; width: var(--s, 42px); height: var(--s, 42px); will-change: transform; }
.puzzles__bit > span { display: block; width: 100%; height: 100%; animation: puzzle-float var(--pf, 8s) var(--ease-soft) infinite; transform-origin: center; }
.puzzles__bit svg { display: block; width: 100%; height: 100%; fill: var(--pc, var(--azul)); }
@keyframes puzzle-float {
  0%, 100% { transform: translateY(0) rotate(var(--r0, -6deg)); }
  50%      { transform: translateY(-12px) rotate(var(--r1, 8deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .puzzles__bit { transform: none !important; }
  .puzzles__bit > span { animation: none; }
}

/* ---------- Lista "nosso atendimento abrange" (ícone + texto) ---------- */
.carelist { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.careitem { display: flex; gap: 16px; align-items: flex-start; background: var(--branco); border-radius: var(--r-md); padding: 24px; box-shadow: 0 10px 26px rgba(46,42,57,.05); transition: transform .25s var(--ease-gentle); }
.careitem:hover { transform: translateY(-4px); }
.careitem__icon { width: 50px; height: 50px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0; }
.careitem__icon svg { width: 26px; height: 26px; }
.careitem__title { font: 700 17px/1.3 var(--font-body); color: var(--tinta); }
.careitem__text { font: 400 14.5px/1.6 var(--font-body); color: var(--tinta-muted); margin-top: 5px; }

/* ---------- Liderança (Equipe) ---------- */
.leaders { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 860px; margin-inline: auto; }
.leader { background: var(--branco); border-radius: var(--r-lg); padding: 34px 28px; text-align: center; box-shadow: 0 12px 30px rgba(46,42,57,.06), 0 4px 10px rgba(46,42,57,.04); transition: transform .25s var(--ease-gentle), box-shadow .25s; }
.leader:hover { transform: translateY(-6px); }
.leader__avatar { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; font: 400 44px/1 var(--font-display); }
.leader__photo { display: block; width: clamp(150px, 58%, 188px); height: auto; margin: 0 auto 16px; filter: drop-shadow(0 14px 26px rgba(46,42,57,.16)); }
.leader--azul .leader__avatar { background: var(--azul-soft); color: var(--azul-ink); } .leader--azul:hover { box-shadow: 0 24px 50px rgba(0,165,234,.18); }
.leader--rosa .leader__avatar { background: var(--rosa-soft); color: var(--rosa-ink); } .leader--rosa:hover { box-shadow: 0 24px 50px rgba(251,60,99,.18); }
.leader--verde .leader__avatar { background: var(--verde-soft); color: var(--verde-ink); } .leader--verde:hover { box-shadow: 0 24px 50px rgba(168,196,32,.2); }
.leader--lilas .leader__avatar { background: var(--lilas-soft); color: var(--lilas-ink); } .leader--lilas:hover { box-shadow: 0 24px 50px rgba(143,100,200,.18); }
.leader__name { font: 700 21px/1.2 var(--font-body); color: var(--tinta); }
.leader__role { font: 600 12.5px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .07em; color: var(--lilas-ink); margin-top: 7px; }
.leader__bio { font: 400 14.5px/1.62 var(--font-body); color: var(--tinta-muted); margin-top: 14px; }

/* ---------- Mosaico de avatares da equipe (+55) ---------- */
/* Fileira única de avatares sobrepostos (stack de time) */
.mosaic { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; max-width: 100%; margin: 0 auto; --av: clamp(38px, 6.4vw, 78px); }
.mosaic__face { width: var(--av); height: var(--av); border-radius: 50%; overflow: hidden; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(46,42,57,.12); border: 3px solid var(--branco); margin-left: calc(var(--av) * -0.34); position: relative; transition: transform .25s var(--ease-bounce); }
.mosaic__face:first-child { margin-left: 0; }
.mosaic__face:hover { transform: translateY(-6px) scale(1.08); z-index: 3; }
.mosaic__face img { width: 100%; height: 100%; object-fit: contain; }
.mosaic__face:nth-child(5n+1) { background: var(--azul-soft); } .mosaic__face:nth-child(5n+2) { background: var(--rosa-soft); }
.mosaic__face:nth-child(5n+3) { background: var(--lilas-soft); } .mosaic__face:nth-child(5n+4) { background: var(--verde-soft); }
.mosaic__face:nth-child(5n+5) { background: var(--amarelo-soft); }

/* ---------- Mundos temáticos (Unidades) ---------- */
.worlds { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.world { position: relative; overflow: hidden; border-radius: var(--r-xl); min-height: clamp(470px, 32vw, 520px); padding: 26px; display: flex; align-items: flex-end; }
.world--mar { background: linear-gradient(160deg, #E4F6FD, #b6e6fb); }
.world--floresta { background: linear-gradient(160deg, #F1F6D9, #d3e79e); }
.world--espaco { background: linear-gradient(160deg, #EFE7F8, #cdb6ec); }
.world__char { position: absolute; pointer-events: none; filter: drop-shadow(0 14px 22px rgba(46,42,57,.2)); }
.world__char--1 { width: 44%; max-width: 178px; top: 5%; right: 6%; }
.world__char--2 { width: 30%; max-width: 116px; top: 12%; left: 7%; }
.world__label { position: relative; z-index: 2; margin-top: auto; width: 100%; max-width: 360px; min-height: 234px; display: flex; flex-direction: column; justify-content: center; background: rgba(255,255,255,.78); backdrop-filter: blur(6px); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: 0 12px 30px rgba(46,42,57,.08); }
.world__title { font: 400 clamp(22px, 2.5vw, 28px)/1.05 var(--font-display); color: var(--tinta); margin-top: 8px; white-space: nowrap; }
.world__text { font: 400 14.5px/1.55 var(--font-body); color: var(--tinta-muted); margin-top: 8px; }

/* ---------- Switcher de unidade ---------- */
.unit[hidden] { display: none; }
.unit__split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 52px); align-items: start; }
@media (max-width: 860px) { .unit__split { grid-template-columns: 1fr; } }
.checklist { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 22px; }
@media (max-width: 560px) { .checklist { grid-template-columns: 1fr; } }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font: 400 14.5px/1.5 var(--font-body); color: var(--tinta-muted); }
.checklist li svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: var(--verde-ink); }

/* ---------- Galeria de fotos + lightbox ---------- */
.gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.gallery__item { position: relative; border: 0; padding: 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/3; cursor: zoom-in; background: var(--creme-deep); box-shadow: 0 10px 24px rgba(46,42,57,.08); display: block; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease-gentle); }
.gallery__item:hover img, .gallery__item:focus-visible img { transform: scale(1.07); }
.gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(46,42,57,.28)); opacity: 0; transition: opacity .3s; }
.gallery__item:hover::after, .gallery__item:focus-visible::after { opacity: 1; }
.gallery__item--span2 { grid-column: span 2; aspect-ratio: 8/3; }
@media (max-width: 560px) { .gallery__item--span2 { grid-column: span 1; aspect-ratio: 4/3; } }

/* ---------- Galeria acordeão expansível / filmstrip (Unidades · "Conheça por dentro") ---------- */
.gallery__hint { margin: 0 0 14px; font: 600 13.5px/1.4 var(--font-body); color: var(--tinta-muted); display: inline-flex; align-items: center; gap: 8px; }
.gallery__hint::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--verde)); flex: none; }

/* Carrossel de fotos em leque (modelo designali): 5 visíveis, as duas laterais
   recortadas pelo contêiner, moldura branca + leve glow alternando as cores da marca. */
.gallery--stack {
  position: relative; height: clamp(330px, 46vw, 460px); margin: 6px 0 4px; overflow: hidden;
}
.gallery--stack .gallery__item {
  position: absolute; left: 50%; top: 50%; flex: none; min-width: 0;
  width: clamp(170px, 34vw, 256px); height: auto; aspect-ratio: 4 / 5;
  border-radius: var(--r-lg); cursor: pointer; opacity: 0; visibility: hidden; z-index: var(--z, 1);
  transform: translate(-50%, -50%) translate(var(--x, 0px), var(--y, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  box-shadow: 0 0 0 5px var(--branco), 0 12px 28px rgba(46,42,57,.2), 0 0 18px 1px var(--glow, rgba(0,165,234,.5));
  transition: transform .5s var(--ease-gentle), box-shadow .35s var(--ease-soft), opacity .45s var(--ease-gentle), visibility .45s;
  will-change: transform, opacity;
}
.gallery--stack .gallery__item.is-shown { opacity: 1; visibility: visible; }
.gallery--stack .gallery__item:hover img,
.gallery--stack .gallery__item:focus-visible img { transform: none; } /* o cartão inteiro escala, não a imagem */
.gallery--stack .gallery__item.is-center { cursor: zoom-in; }
/* hover anima TODAS as fotos visíveis (central + laterais): levanta, endireita e amplia */
.gallery--stack .gallery__item.is-shown:hover,
.gallery--stack .gallery__item.is-shown:focus-visible {
  transform: translate(-50%, -50%) translate(var(--x, 0px), calc(var(--y, 0px) - 14px)) rotate(0deg) scale(calc(var(--sc, 1) + .1));
  box-shadow: 0 0 0 5px var(--branco), 0 22px 46px rgba(46,42,57,.28), 0 0 30px 5px var(--glow, rgba(0,165,234,.6));
  z-index: 120; outline: none;
}

.gallery__cap {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100% - 28px);
  padding: 9px 15px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  color: var(--tinta); font: 700 14px/1 var(--font-body); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--ease-gentle), transform .4s var(--ease-gentle);
}
.gallery__cap-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--verde)); flex: none; }
.gallery--stack .gallery__item.is-center .gallery__cap { opacity: 1; transform: none; }

/* Setas para correr o filmstrip lateralmente */
.gallery__nav { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }
.gallery__arrow {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--branco); color: var(--tinta);
  box-shadow: 0 8px 20px rgba(46,42,57,.12);
  transition: transform .2s var(--ease-bounce), background .2s var(--ease-soft), color .2s, opacity .2s;
}
.gallery__arrow svg { width: 22px; height: 22px; }
.gallery__arrow:hover:not(:disabled) { transform: scale(1.1); background: var(--c, var(--verde)); color: #fff; }
.gallery__arrow:disabled { opacity: .35; cursor: default; }

@media (max-width: 700px) {
  .gallery--stack { height: clamp(300px, 80vw, 400px); }
  .gallery--stack .gallery__item { width: clamp(156px, 50vw, 210px); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery--stack .gallery__item { transition: box-shadow .2s, opacity .2s; }
  .gallery__cap { transition: none; }
}

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(46,42,57,.9); display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-soft), visibility .3s; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: 92vw; max-height: 84vh; border-radius: var(--r-md); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox__btn { position: absolute; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--tinta); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.3); transition: transform .2s var(--ease-bounce), background .2s; }
.lightbox__btn:hover { transform: scale(1.08); background: #fff; }
.lightbox__btn svg { width: 24px; height: 24px; }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: clamp(12px, 3vw, 32px); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(12px, 3vw, 32px); top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.08); }
.lightbox__count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); padding: 6px 16px; border-radius: var(--r-pill); background: rgba(255,255,255,.9); color: var(--tinta); font: 600 13px/1 var(--font-body); }

/* ---------- Cartão de informações (endereço / horário / mapa) ---------- */
.info-card { background: var(--branco); border-radius: var(--r-lg); padding: clamp(26px, 3vw, 34px); box-shadow: 0 12px 30px rgba(46,42,57,.06); display: grid; gap: 20px; }
.info-row { display: flex; gap: 14px; align-items: flex-start; }
.info-row__icon { width: 46px; height: 46px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0; }
.info-row__icon svg { width: 22px; height: 22px; }
.info-row__label { font: 700 12px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-soft); margin-bottom: 4px; }
.info-row__value { font: 500 15.5px/1.5 var(--font-body); color: var(--tinta); }
.info-row__value a:hover { color: var(--azul-ink); }
.map-frame { border: 0; width: 100%; aspect-ratio: 16/10; border-radius: var(--r-lg); box-shadow: 0 12px 30px rgba(46,42,57,.1); display: block; }

/* ---------- Formulário (Ouvidoria / contato) ---------- */
.form { background: var(--branco); border-radius: var(--r-xl); padding: clamp(28px, 4vw, 48px); box-shadow: 0 18px 44px rgba(46,42,57,.08); }
.field { margin-bottom: 18px; }
.field__label { display: block; font: 600 14px/1.3 var(--font-body); color: var(--tinta); margin-bottom: 8px; }
.field__label .opt { color: var(--tinta-soft); font-weight: 500; }
.field__input, .field__select, .field__textarea { width: 100%; padding: 14px 16px; border-radius: var(--r-sm); border: 2px solid var(--linha); background: var(--creme); font: 400 16px/1.5 var(--font-body); color: var(--tinta); transition: border-color .2s var(--ease-soft), background .2s; }
.field__textarea { min-height: 140px; resize: vertical; }
.field__input:focus, .field__select:focus, .field__textarea:focus { outline: none; border-color: var(--lilas); background: #fff; }
.field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field__row { grid-template-columns: 1fr; gap: 0; } }
.field__note { font: 400 13px/1.55 var(--font-body); color: var(--tinta-soft); margin-top: 6px; }
.choice { display: flex; flex-wrap: wrap; gap: 10px; }
.choice__opt { position: relative; }
.choice__opt input { position: absolute; opacity: 0; pointer-events: none; }
.choice__opt span { display: inline-flex; padding: 10px 18px; border-radius: var(--r-pill); background: var(--creme); color: var(--tinta-muted); font: 600 14px/1 var(--font-body); box-shadow: inset 0 0 0 2px var(--linha); transition: all .2s var(--ease-soft); cursor: pointer; }
.choice__opt input:checked + span { background: var(--lilas-soft); color: var(--lilas-ink); box-shadow: inset 0 0 0 2px var(--lilas); }
.choice__opt input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 2px; }
.form__submit { margin-top: 6px; }
.form__success { text-align: center; padding: 8px; }
[data-form-success] { display: none; }
.is-sent [data-form-body] { display: none; }
.is-sent [data-form-success] { display: block; animation: reveal-pop .5s var(--ease-bounce); }
.form__success img { width: 150px; margin: 0 auto 18px; }
.form__success h3 { font: 400 clamp(26px,3vw,34px)/1.1 var(--font-display); color: var(--tinta); }
.form__success p { font: 500 16px/1.6 var(--font-body); color: var(--tinta-muted); margin-top: 12px; max-width: 44ch; margin-inline: auto; }
@keyframes reveal-pop { 0% { opacity: 0; transform: scale(.92); } 100% { opacity: 1; transform: none; } }

/* ---------- Newsletter (Blog) ---------- */
.newsletter { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (max-width: 760px) { .newsletter { grid-template-columns: 1fr; text-align: center; } }
.newsletter__form { display: flex; gap: 12px; flex-wrap: wrap; }
.newsletter__form .field__input { flex: 1 1 220px; background: #fff; }
@media (max-width: 760px) { .newsletter__form { justify-content: center; } }

/* ---------- Estado vazio (em breve) ---------- */
.empty { text-align: center; max-width: 520px; margin: 0 auto; }
.empty img { width: 150px; margin: 0 auto 22px; }
.empty__title { font: 400 clamp(26px,3.4vw,38px)/1.1 var(--font-display); color: var(--tinta); }
.empty__text { font: 500 16px/1.62 var(--font-body); color: var(--tinta-muted); margin-top: 12px; }

/* ---------- FAQ accordion ---------- */
.faq { max-width: 760px; margin-inline: auto; }
.faq__item { border-radius: var(--r-md); background: var(--branco); box-shadow: 0 6px 18px rgba(46,42,57,.05); margin-bottom: 12px; overflow: hidden; transition: background .3s var(--ease-soft); }
.faq__item[open] { background: var(--azul-soft); }
.faq__q { cursor: pointer; list-style: none; padding: 20px 24px; font: 700 16.5px/1.4 var(--font-body); color: var(--tinta); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq__q::-webkit-details-marker { display: none; }
.faq__chevron { width: 11px; height: 11px; border-right: 2.5px solid var(--azul); border-bottom: 2.5px solid var(--azul); transform: rotate(45deg); transition: transform .35s var(--ease-gentle); flex-shrink: 0; }
.faq__item[open] .faq__chevron { transform: rotate(-135deg); }
.faq__a { padding: 0 24px 22px; font: 400 15.5px/1.65 var(--font-body); color: var(--tinta-muted); }

/* ---------- Prosa (páginas legais / artigo) ---------- */
.prose { max-width: var(--container-narrow); margin-inline: auto; }
.prose__updated { font: 500 13.5px/1 var(--font-body); color: var(--tinta-soft); margin-bottom: 28px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--creme); display: inline-block; }
.prose h2 { font: 400 clamp(24px,3vw,34px)/1.1 var(--font-display); color: var(--tinta); margin: 1.6em 0 .5em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font: 700 18px/1.3 var(--font-body); color: var(--tinta); margin: 1.4em 0 .4em; }
.prose p { font: 400 16px/1.72 var(--font-body); color: var(--tinta-muted); margin-bottom: 1em; }
.prose ul, .prose ol { margin: 0 0 1.2em 1.3em; }
.prose li { font: 400 16px/1.7 var(--font-body); color: var(--tinta-muted); margin-bottom: .5em; }
.prose ul li { list-style: disc; } .prose ol li { list-style: decimal; }
.prose a { color: var(--azul-ink); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--tinta); font-weight: 700; }
.prose__note { background: var(--amarelo-soft); border-radius: var(--r-md); padding: 18px 22px; margin: 1.4em 0; font: 500 14.5px/1.6 var(--font-body); color: var(--tinta); }

/* ---------- intro de seção alinhada à esquerda com âncora de personagem ---------- */
.lead-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 880px) { .lead-split { grid-template-columns: 1fr; text-align: center; } .lead-split__art { order: -1; max-width: 360px; margin-inline: auto; } }
.lead-split__art { position: relative; }
.lead-split__art img { width: 100%; max-width: 400px; margin-inline: auto; filter: drop-shadow(0 22px 36px rgba(46,42,57,.14)); }
.lead-split__art .blob { width: 80%; height: 80%; inset: 10%; top: 6%; opacity: .32; }

/* ---------- Elenco de personagens (A Turma — Equipe) ---------- */
.cast { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cast__card { position: relative; text-align: center; background: var(--branco); border-radius: var(--r-lg); padding: 26px 22px; overflow: hidden; box-shadow: 0 12px 30px rgba(46,42,57,.06), 0 4px 10px rgba(46,42,57,.04); transition: transform .25s var(--ease-gentle), box-shadow .25s; }
.cast__card:hover { transform: translateY(-6px); }
.cast__stage { position: relative; height: 168px; display: grid; place-items: center; margin-bottom: 14px; }
.cast__blob { position: absolute; width: 150px; height: 150px; border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%; opacity: .55; }
.cast__img { position: relative; z-index: 1; max-height: 168px; width: auto; max-width: 100%; filter: drop-shadow(0 14px 22px rgba(46,42,57,.16)); }
.cast__name { font: 400 27px/1 var(--font-display); color: var(--tinta); }
.cast__role { font: 500 14.5px/1.55 var(--font-body); color: var(--tinta-muted); margin-top: 8px; }
.cast__card--rosa .cast__blob { background: var(--rosa-soft); } .cast__card--rosa:hover { box-shadow: 0 24px 50px rgba(251,60,99,.18); }
.cast__card--verde .cast__blob { background: var(--verde-soft); } .cast__card--verde:hover { box-shadow: 0 24px 50px rgba(168,196,32,.2); }
.cast__card--amarelo .cast__blob { background: var(--amarelo-soft); } .cast__card--amarelo:hover { box-shadow: 0 24px 50px rgba(255,199,0,.22); }
.cast__card--azul .cast__blob { background: var(--azul-soft); } .cast__card--azul:hover { box-shadow: 0 24px 50px rgba(0,165,234,.18); }
.cast__card--lilas .cast__blob { background: var(--lilas-soft); } .cast__card--lilas:hover { box-shadow: 0 24px 50px rgba(143,100,200,.18); }

.leader__avatar img { width: 100%; height: 100%; object-fit: contain; }

/* calma: neutraliza floats novos */
.calm .world__char, .calm .page-hero__peek img, .calm .lead-split__art img, .calm .cast__img, .calm .cast__blob { animation: none !important; transform: none !important; }


/* ===== Blog: cards com imagem, meta e filtro ===== */
.post__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post__excerpt { font: 400 14.5px/1.6 var(--font-body); color: var(--tinta-muted); }
.post__meta { margin-top: auto; font: 600 13px/1 var(--font-body); color: var(--tinta-soft); }

.tag--filter { border: 0; cursor: pointer; font-family: var(--font-body); }
.tag--filter.is-active { box-shadow: 0 0 0 2px var(--azul) inset, 0 6px 16px rgba(46,42,57,.06); }
.post[hidden] { display: none; }

/* ===== Post: imagem de capa, corpo e CTA ===== */
.post-hero-img { display: block; width: 100%; max-width: var(--container-narrow); margin: 0 auto clamp(24px,4vw,40px); border-radius: var(--r-lg); aspect-ratio: 16/9; object-fit: cover; box-shadow: 0 18px 44px rgba(46,42,57,.1); }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: 1.4em 0; display: block; }
.prose blockquote { margin: 1.4em 0; padding: 6px 0 6px 20px; border-left: 4px solid var(--azul); color: var(--tinta); font: 500 17px/1.6 var(--font-body); }
.post-cta { max-width: var(--container-narrow); margin: clamp(28px,4vw,44px) auto 0; text-align: center; }

/* ===== Carrossel showcase (blog landing) ===== */
.carousel { position: relative; display: flex; align-items: center; gap: 8px; }
.carousel__viewport { overflow: hidden; width: 100%; }
.carousel__track { display: flex; gap: 24px; transition: transform .5s var(--ease-gentle); will-change: transform; }
.showcase { flex: 0 0 calc((100% - 48px) / 3); background: var(--branco); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 12px 30px rgba(46,42,57,.06); transition: transform .25s var(--ease-gentle), box-shadow .25s; }
.showcase:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(46,42,57,.1); }
.showcase__link { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px; text-decoration: none; color: inherit; }
.showcase__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.showcase__cat { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-soft); }
.showcase__dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.showcase__dot--azul { background: var(--azul); } .showcase__dot--rosa { background: var(--rosa); } .showcase__dot--verde { background: var(--verde); } .showcase__dot--lilas { background: var(--lilas); } .showcase__dot--amarelo { background: var(--amarelo); }
.showcase__arrow { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: #fff; box-shadow: 0 8px 18px rgba(4,129,182,.28); transition: transform .2s var(--ease-gentle); }
.showcase:hover .showcase__arrow { transform: translate(2px,-2px) scale(1.07); }
.showcase__title { font: 700 17.5px/1.32 var(--font-body); color: var(--tinta); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.9em; }
.showcase__cover { aspect-ratio: 16/10; border-radius: var(--r-md); display: grid; place-items: center; overflow: hidden; }
.showcase__cover--azul { background: var(--azul-soft); } .showcase__cover--rosa { background: var(--rosa-soft); } .showcase__cover--verde { background: var(--verde-soft); } .showcase__cover--lilas { background: var(--lilas-soft); } .showcase__cover--amarelo { background: var(--amarelo-soft); }
.showcase__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-gentle); }
.showcase:hover .showcase__cover img { transform: scale(1.04); }
.showcase__excerpt { font: 400 14px/1.6 var(--font-body); color: var(--tinta-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.showcase__meta { margin-top: auto; font: 600 12.5px/1 var(--font-body); color: var(--tinta-soft); }

.carousel__nav { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--branco); color: var(--tinta); box-shadow: 0 8px 20px rgba(46,42,57,.1); display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--ease-gentle), opacity .2s; }
.carousel__nav:hover { transform: scale(1.08); }
.carousel__nav:disabled { opacity: .35; cursor: default; }
.carousel__dots { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.carousel__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--tinta-soft); opacity: .35; cursor: pointer; transition: opacity .2s, transform .2s; }
.carousel__dots button.is-active { opacity: 1; transform: scale(1.25); background: var(--azul); }

@media (max-width: 980px) { .showcase { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 640px) { .showcase { flex-basis: 100%; } .carousel__nav { display: none; } }

/* ===== Layout do post com sidebar ===== */
.post-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: clamp(28px,4vw,52px); align-items: start; }
.post-main { min-width: 0; }
.post-main .prose, .post-main .post-hero-img, .post-main .post-cta { max-width: none; margin-inline: 0; }
.post-side { position: sticky; top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; gap: 20px; }
.side-card { background: var(--branco); border-radius: var(--r-lg); padding: 22px; box-shadow: 0 10px 26px rgba(46,42,57,.05); }
.side-card__title { font: 700 15px/1.2 var(--font-body); color: var(--tinta); margin-bottom: 14px; text-transform: uppercase; letter-spacing: .05em; }
.side-cats { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.side-cats a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); font: 500 14.5px/1.3 var(--font-body); color: var(--tinta-muted); text-decoration: none; transition: background .2s; }
.side-cats a:hover { background: var(--creme); }
.side-cats li.is-current a { background: var(--azul-soft); color: var(--azul-ink); font-weight: 600; }
.side-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.side-dot--azul { background: var(--azul); } .side-dot--rosa { background: var(--rosa); } .side-dot--verde { background: var(--verde); } .side-dot--lilas { background: var(--lilas); } .side-dot--amarelo { background: var(--amarelo); }
.side-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.side-tag { font: 600 12.5px/1 var(--font-body); color: var(--lilas-ink); background: var(--lilas-soft); padding: 7px 12px; border-radius: var(--r-pill); }
.side-recent { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.side-recent a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.side-recent__thumb { width: 56px; height: 56px; border-radius: var(--r-md); overflow: hidden; flex-shrink: 0; display: grid; place-items: center; background: var(--creme); }
.side-recent__thumb img { width: 100%; height: 100%; object-fit: cover; }
.side-recent__t { font: 600 13.5px/1.4 var(--font-body); color: var(--tinta); transition: color .2s; }
.side-recent a:hover .side-recent__t { color: var(--azul-ink); }
.side-card--soon { background: var(--amarelo-soft); box-shadow: none; }
.side-soon { font: 500 13.5px/1.55 var(--font-body); color: var(--tinta-muted); }

@media (max-width: 900px) { .post-layout { grid-template-columns: 1fr; } .post-side { position: static; } }

/* ============================ Curtidas (página de post) */
.like{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.like__btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:999px; cursor:pointer;
  font-family:var(--font-body, "Montserrat", sans-serif); font-size:15px; font-weight:600;
  color:var(--rosa-ink, #c01b40); background:var(--rosa-soft, #FEE4EA);
  border:1px solid transparent;
  transition:transform .25s var(--ease-bounce, cubic-bezier(.34,1.4,.5,1)), box-shadow .25s ease, background .2s ease;
}
.like__btn:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 10px 24px rgba(251,60,99,.22); }
.like__btn:focus-visible{ outline:3px solid var(--rosa, #FB3C63); outline-offset:3px; }
.like__heart{ width:20px; height:20px; fill:none; stroke:var(--rosa, #FB3C63); stroke-width:2; transition:fill .2s ease, transform .25s var(--ease-bounce, cubic-bezier(.34,1.4,.5,1)); }
.like__count{ font-variant-numeric:tabular-nums; min-width:1ch; }
.like__hint{ font-size:13px; color:var(--tinta-muted, #6b6577); }
.like__btn.is-liked{ background:var(--rosa, #FB3C63); color:#fff; cursor:default; }
.like__btn.is-liked .like__heart{ fill:#fff; stroke:#fff; transform:scale(1.12); }
.like__btn.is-liked:hover{ transform:none; box-shadow:none; }
@media (prefers-reduced-motion:reduce){
  .like__btn, .like__heart{ transition:none; }
  .like__btn:hover{ transform:none; }
}

/* =====================================================================
   FAQ (página dedicada) e formulário de currículo
   ===================================================================== */
.faq-group { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 56px); }
.faq-group:last-child { margin-bottom: 0; }
.faq-group__title { display: flex; align-items: center; gap: 12px; font: 400 clamp(24px, 2.6vw, 32px)/1.1 var(--font-display); color: var(--tinta); margin-bottom: 18px; }
.faq-group__title .eyebrow__dot { width: 12px; height: 12px; flex-shrink: 0; }
.field__file { width: 100%; padding: 12px; border-radius: var(--r-sm); border: 2px dashed var(--linha); background: var(--creme); font: 500 15px/1.4 var(--font-body); color: var(--tinta-muted); cursor: pointer; }
.field__file::file-selector-button { margin-right: 14px; padding: 10px 18px; border: 0; border-radius: var(--r-pill); background: var(--lilas-soft); color: var(--lilas-ink); font: 600 14px/1 var(--font-body); cursor: pointer; }
.field__file:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.field__check { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 18px; font: 400 14px/1.55 var(--font-body); color: var(--tinta-muted); cursor: pointer; }
.field__check input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--lilas); }
.field__check a { color: var(--azul-ink); text-decoration: underline; }

/* assinatura da Freela In Home, linha própria no fim do rodapé */
.footer__credit { flex-basis: 100%; text-align: center; margin-top: 6px; font: 500 13px/1.6 var(--font-body); color: var(--tinta-soft); }
.footer__credit a { color: var(--lilas-ink); font-weight: 700; }
.footer__credit a:hover { color: var(--rosa-ink); text-decoration: underline; }

/* =====================================================================
   PDI e rede de apoio (atendimento)
   ===================================================================== */
.plan { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); max-width: 1080px; margin-inline: auto; }
.plan__card { background: var(--creme); border-radius: var(--r-lg); padding: clamp(28px, 3.5vw, 40px); }
.plan__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; margin-bottom: 18px; }
.plan__icon svg { width: 26px; height: 26px; }
.plan__card--lilas .plan__icon { background: var(--lilas-soft); color: var(--lilas-ink); }
.plan__card--azul .plan__icon { background: var(--azul-soft); color: var(--azul-ink); }
.plan__title { font: 400 clamp(24px, 2.4vw, 30px)/1.15 var(--font-display); color: var(--tinta); margin-bottom: 14px; }
.plan__text { font: 400 16px/1.7 var(--font-body); color: var(--tinta-muted); }
.plan__text + .plan__text { margin-top: 12px; }

/* "Por onde começar" com 5 passos */
.steps--5 { grid-template-columns: repeat(5, 1fr); gap: 18px; }
.step:nth-child(5) .step__num { background: var(--amarelo); color: var(--tinta); }
.step:nth-child(5) .step__num::after { color: var(--amarelo); }
.step:nth-child(5):hover .step__num { box-shadow: 0 14px 28px rgba(255,199,0,.5); }
@media (max-width: 1100px) {
  .steps--5 { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .steps--5 .step::after { display: none; }
}
@media (max-width: 760px) { .steps--5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps--5 { grid-template-columns: 1fr; } }