/* Danilo Soares Advogados — landing page de Direito Criminal
   Mesmo sistema da LP e do site da CB Seguros (cbsegurosesaude.com/planodesaude): fonte do sistema,
   primeira dobra num quadro escuro arredondado com vídeo, triagem em carrossel por cima da dobra,
   títulos centrados, bento, faixas numeradas, carta em papel e perguntas em lista.
   Trocada só a paleta: o azul-marinho do logotipo (#1C274A) no lugar dos verdes, e o azul-gelo no lugar do limão. */
:root {
  --preto: #1d1d1f; --cinza-t: #6e6e73; --fundo: #f5f5f7; --linha: #d2d2d7; --branco: #fff;
  --marinho: #1c274a;        /* cor do logotipo */
  --azul: #2c4aa8;           /* links e ícones sobre fundo claro */
  --azul-vivo: #4a6fe0;
  --azul-claro: #eaf0fd;
  --gelo: #c6d7ff;           /* destaque (o "limão" da CB) */
  --noite: #0a0f1e;
  --whats: #25d366;
  --raio: 28px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: #fff; color: var(--preto); overflow-x: clip;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; letter-spacing: -.01em;
}
img, video { max-width: 100%; display: block; }
a { color: var(--azul); }
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
p, li, summary, .dica, .lead, .sub { text-wrap: pretty; }
h1, h2, h3, .titulo { text-wrap: balance; }
:focus-visible { outline: 3px solid var(--azul-vivo); outline-offset: 3px; }
[id] { scroll-margin-top: 16px; }
.env { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.env-larga { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; top: 8px; z-index: 50; background: #fff; color: var(--marinho); padding: 10px 16px; border-radius: 999px; font-weight: 600; }
.pular:focus { left: 8px; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 26px; border: 0; border-radius: 980px; cursor: pointer;
  background: var(--marinho); color: #fff; text-decoration: none; text-align: center;
  font-family: inherit; font-weight: 600; font-size: 1.02rem; line-height: 1.25; transition: background .2s, transform .2s;
}
.btn:hover { background: #121a33; transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn svg { width: 21px; height: 21px; flex: none; }
.btn--branco { background: #fff; color: var(--marinho); box-shadow: 0 12px 30px -10px rgba(0,0,0,.45); }
.btn--branco svg { color: var(--whats); }
.btn--branco:hover { background: #fff; }
.btn--zap { background: var(--whats); color: #fff; box-shadow: 0 10px 22px -10px rgba(37,211,102,.8); }
.btn--zap:hover { background: #1fbe5a; }
.link-seta { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--azul); font-weight: 600; font-size: 1.08rem; text-decoration: none; }
.link-seta:hover { text-decoration: underline; }

/* ---------- primeira dobra: quadro escuro arredondado ---------- */
.abertura { padding: 20px 0 0; }
.hero-caixa {
  position: relative; z-index: 2; overflow: hidden; isolation: isolate; border-radius: 34px; color: #fff;
  display: flex; flex-direction: column; min-height: 600px;
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(74,111,224,.35), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(74,111,224,.18), transparent 70%),
    linear-gradient(160deg, #18244a 0%, #0e1630 50%, #070b17 100%);
}
/* marca d'água: o monograma colado na lateral, metade para fora */
.hero-caixa .marca { position: absolute; z-index: -1; top: 50%; left: -6%; height: 120%; width: auto; max-width: none; transform: translateY(-50%); opacity: .05; pointer-events: none; }
.hero-video { display: none; }
.hero-cima { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 28px 40px 0 60px; }
.hero-logo { height: 40px; width: auto; }
.hero-zap {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: #fff; color: var(--whats); box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); transition: transform .2s;
}
.hero-zap svg { width: 26px; height: 26px; }
.hero-zap:hover { transform: scale(1.06); }
.hero-meio { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; padding: 28px 60px 150px; }
.hero-selo {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 5px 16px 5px 5px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); font-size: .9rem; color: #d7def0;
}
.hero-selo img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.hero-selo b { color: #fff; font-weight: 600; }
.abertura h1 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); line-height: 1.04; font-weight: 700; letter-spacing: -.035em; margin: 0 0 18px; color: #fff; max-width: 13em; }
.abertura h1 span { background: linear-gradient(90deg, #8fb0ff, #d6e3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.abertura .sub { font-size: clamp(1.02rem, 2.2vw, 1.22rem); line-height: 1.5; color: #d7def0; max-width: 40ch; font-weight: 500; }
.hero-fatos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 24px 0 0; padding: 0; color: #d7def0; font-size: .95rem; }
.hero-fatos li::before { content: "✓"; color: var(--gelo); font-weight: 700; margin-right: 6px; }
/* vídeo em pé à direita (só no computador): toca sem som; o botão abre com som */
.hero-reel {
  position: relative; width: 260px; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; padding: 0; border: 0; cursor: pointer;
  background: #000; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.14);
  transform: rotate(2deg); transition: transform .3s ease;
}
.hero-reel:hover { transform: rotate(0deg) translateY(-4px); }
.hero-reel video { width: 100%; height: 100%; object-fit: cover; }
.hero-reel .video-play { left: 50%; bottom: 18px; transform: translateX(-50%); width: auto; height: 44px; padding: 0 16px 0 12px; gap: 8px; display: flex; border-radius: 999px; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.hero-reel .video-play svg { margin: 0; }

/* entrada da primeira dobra */
@keyframes sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-texto > * { animation: sobe .6s cubic-bezier(.2,.7,.3,1) both; }
.hero-texto > :nth-child(2) { animation-delay: .06s; } .hero-texto > :nth-child(3) { animation-delay: .12s; } .hero-texto > :nth-child(4) { animation-delay: .18s; }

/* ---------- triagem em carrossel, por cima da primeira dobra ---------- */
.quiz-area { position: relative; z-index: 3; margin-top: -118px; padding: 0 0 clamp(40px, 6vw, 64px); overflow: hidden; }
.palco { display: grid; align-items: start; justify-items: center; position: relative; margin: 4px 0 6px; transition: height .5s ease; }
.passo {
  grid-area: 1 / 1; border: 0; margin: 0; padding: 0; min-width: 0; width: min(860px, 90vw);
  background: #fff; border-radius: 34px; display: grid; overflow: hidden; position: relative;
  box-shadow: 0 30px 60px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.05);
  transition: transform .75s cubic-bezier(.22,.8,.2,1), opacity .6s ease, filter .6s ease; will-change: transform;
}
@media (min-width: 760px) { .passo { grid-template-columns: 250px 1fr; min-height: 320px; } }
.tile {
  position: relative; margin: 12px; border-radius: 26px; min-height: 120px;
  display: flex; align-items: center; justify-content: center; color: var(--gelo);
  background: radial-gradient(120% 90% at 30% 20%, #26355f 0%, #121a33 55%, #070b17 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -20px 40px rgba(0,0,0,.35);
}
.tile > svg { width: 64px; height: 64px; stroke-width: 1.3; filter: drop-shadow(0 8px 18px rgba(143,176,255,.45)); }
@media (min-width: 760px) { .tile { min-height: 0; } .tile > svg { width: 96px; height: 96px; } }
.tile .num { position: absolute; top: 16px; left: 18px; font-size: .8rem; font-weight: 600; color: #b9c7e8; letter-spacing: .08em; }
.voltar-seta {
  position: absolute; top: 10px; right: 10px; z-index: 1; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff;
  display: flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease;
}
@media (hover: hover) { .voltar-seta:hover { background: rgba(255,255,255,.2); transform: translateX(-2px); } }
.voltar-seta svg { width: 18px; height: 18px; }
.conteudo { display: flex; flex-direction: column; padding: 10px 24px 28px; }
@media (min-width: 760px) { .conteudo { padding: 30px 32px 30px 16px; } }
.passo h3 { font-size: clamp(1.5rem, 4.2vw, 1.95rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; margin: 0 0 6px; outline: 0; }
.passo .dica { color: var(--cinza-t); margin: 0 0 18px; line-height: 1.5; font-size: 1rem; }
.opcoes { display: grid; gap: 8px; margin-top: auto; }
.opcao {
  display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 10px 14px;
  background: #f2f2f4; border: 2px solid transparent; border-radius: 18px; cursor: pointer;
  font: inherit; color: var(--preto); text-align: left; transition: border-color .2s ease, background .2s ease;
}
@media (hover: hover) { .passo.atual .opcao:hover { background: #e9ebf1; } }
.passo.atual .opcao:active { background: #e2e5ee; }
.opcao.sel { border-color: var(--azul); background: var(--azul-claro); }
.opcao .ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 13px; background: #fff; color: var(--azul); display: flex; align-items: center; justify-content: center; }
.opcao .ico svg { width: 24px; height: 24px; }
.opcao b { display: block; font-size: 1.02rem; font-weight: 600; line-height: 1.25; }
.opcao small { display: block; color: var(--cinza-t); font-size: .84rem; margin-top: 2px; font-weight: 400; }
@media (min-width: 900px) {
  .opcoes { grid-template-columns: repeat(3, 1fr); }
  .opcao { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 16px 20px; min-height: 124px; }
  .opcoes .opcao small { display: none; }
}
.tri-selo { align-self: flex-start; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--azul-claro); color: var(--marinho); }
.passo--resultado .dica { margin-bottom: 10px; }
.quiz-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: auto; padding-top: 10px; }
.quiz-acoes .btn { background: var(--whats); }
.quiz-acoes .btn:hover { background: #1fbe5a; }
.tri-nota { margin-top: 12px; font-size: .8rem; line-height: 1.45; color: var(--cinza-t); }
.tri-refazer { align-self: flex-start; background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; color: var(--cinza-t); font-family: inherit; font-weight: 500; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; }
.tri-refazer:hover { color: var(--preto); }
.tri-lista { list-style: none; margin: 10px 0 18px; padding: 0; display: grid; gap: 12px; color: var(--cinza-t); font-size: .97rem; line-height: 1.5; }
.tri-lista li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.tri-lista svg { width: 18px; height: 18px; margin-top: 3px; color: var(--azul); }
.tri-lista b { color: var(--preto); }
.resposta {
  position: absolute; inset: 0; z-index: 3; background: #fff; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; text-align: center; padding: 20px 20px 40px;
}
.resposta span { font-size: .85rem; color: var(--cinza-t); font-weight: 500; }
.resposta b { font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.2; }
.resposta b::before { content: "✓ "; color: var(--azul); }
@media (min-width: 760px) { .resposta { align-items: flex-end; text-align: right; padding-right: 9%; } }
.vivo .passo { transform: translateX(130%) scale(.8); opacity: 0; filter: blur(8px); pointer-events: none; z-index: 1; visibility: hidden;
  transition: transform .75s cubic-bezier(.22,.8,.2,1), opacity .6s ease, filter .6s ease, visibility 0s linear .75s; }
.vivo .passo.atual, .vivo .passo.proximo, .vivo .passo.anterior { visibility: visible; transition-delay: 0s; }
.vivo .passo.atual { transform: none; opacity: 1; filter: none; pointer-events: auto; z-index: 3; }
.vivo .passo.proximo { transform: translateX(86%) scale(.84); opacity: .55; filter: blur(3px); }
.vivo .passo.anterior { transform: translateX(-86%) scale(.84); opacity: .9; filter: none; pointer-events: auto; cursor: pointer; }
.vivo .passo.anterior .resposta { opacity: 1; }
.vivo .passo.saiu { transform: translateX(-130%) scale(.8); opacity: 0; filter: blur(10px); }
@media (max-width: 759px) {
  .vivo .passo.proximo { transform: translateX(94%) scale(.86); }
  .vivo .passo.anterior { transform: translateX(-94%) scale(.86); }
}
.indicador { display: flex; justify-content: center; gap: 6px; margin: 16px 0 0; }
.indicador i { width: 8px; height: 8px; border-radius: 980px; background: #d2d2d7; transition: width .4s ease, background .4s ease; }
.indicador i.on { width: 34px; background: linear-gradient(90deg, var(--azul-vivo), var(--marinho)); }
.indicador i.feito { background: var(--marinho); }
.selos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 12px 0 0; padding: 0 20px; list-style: none; color: var(--cinza-t); font-size: .9rem; }
.selos li::before { content: "✓"; color: var(--azul-vivo); font-weight: 700; margin-right: 6px; }

/* ---------- seções ---------- */
.secao { padding: clamp(72px, 10vw, 128px) 0; }
.secao.cinza { background: var(--fundo); }
.titulo { font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.07; font-weight: 700; letter-spacing: -.035em; margin: 0 0 16px; text-align: center; }
.titulo span { color: #86868b; }
.lead { font-size: clamp(1.1rem, 2.3vw, 1.35rem); line-height: 1.5; color: var(--cinza-t); text-align: center; max-width: 40ch; margin: 0 auto 48px; font-weight: 500; }

/* ---------- vídeos (logo depois da primeira dobra) ---------- */
.videos { padding: clamp(32px, 5vw, 56px) 0 clamp(64px, 8vw, 104px); overflow: hidden; }
.videos-grade { display: grid; gap: 24px; }
.videos-texto .titulo { text-align: left; font-size: clamp(2rem, 4.2vw, 3rem); }
.videos-texto .lead { text-align: left; margin: 0; max-width: 30ch; font-size: clamp(1.05rem, 1.8vw, 1.2rem); }
.videos-setas { display: none; gap: 10px; margin-top: 28px; }
.seta-v {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--linha); background: #fff; color: var(--marinho); transition: background .2s, color .2s, opacity .2s, border-color .2s;
}
.seta-v svg { width: 20px; height: 20px; }
@media (hover: hover) { .seta-v:not(:disabled):hover { background: var(--marinho); border-color: var(--marinho); color: #fff; } }
.seta-v:disabled { opacity: .35; cursor: default; }
.videos-trilho {
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px; padding: 6px 20px 30px; margin: 0 -20px; scrollbar-width: none;
}
.videos-trilho::-webkit-scrollbar { display: none; }
.video-card {
  position: relative; flex: none; width: calc((100vw - 54px) / 1.6); max-width: 260px; aspect-ratio: 9 / 16;
  padding: 0; border: 0; border-radius: 30px; overflow: hidden; cursor: pointer; scroll-snap-align: start;
  background: linear-gradient(160deg, #26355f 0%, #121a33 55%, #070b17 100%);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.05); transition: transform .25s ease;
}
.video-card img { width: 100%; height: 100%; object-fit: cover; }
.video-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; background: linear-gradient(transparent, rgba(7,11,23,.55)); pointer-events: none; }
@media (hover: hover) { .video-card:hover { transform: translateY(-5px); } .video-card:hover .video-play { background: #fff; color: var(--marinho); } }
.video-card:active { transform: scale(.985); }
.video-play {
  position: absolute; z-index: 1; left: 14px; bottom: 14px; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); transition: background .2s ease, color .2s ease;
}
.video-play svg { width: 18px; height: 18px; margin-left: 2px; }
@media (min-width: 1000px) {
  /* título e setas à esquerda (na margem do site), cartões à direita correndo até a borda da tela */
  .videos-grade { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: center; }
  .videos-setas { display: flex; }
  .videos-trilho { margin: 0 calc((1040px - 100vw) / 2) 0 0; padding-left: 0; scroll-padding-inline: 0; }
  .video-card { width: 240px; }
}

/* ---------- atuação: bento ---------- */
.bento { display: grid; gap: 18px; }
@media (min-width: 760px) { .bento { grid-template-columns: 1fr 1fr; } .bento .grande, .bento .largo { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .bento { grid-template-columns: 1.25fr 1fr 1fr; } .bento .grande { grid-column: auto; grid-row: span 3; } .bento .largo { grid-column: 2 / -1; } }
.bloco {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 6px;
  padding: 26px 26px 28px; border-radius: var(--raio); background: #fff; color: var(--preto); text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 44px rgba(28,39,74,.09);
}
.bloco-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; color: var(--azul); background: var(--azul-claro); }
.bloco-ico svg { width: 22px; height: 22px; }
.bloco small { font-size: .82rem; font-weight: 600; color: var(--azul); }
.bloco h3 { font-size: clamp(1.3rem, 2.2vw, 1.5rem); line-height: 1.15; letter-spacing: -.03em; }
.bloco p { color: var(--cinza-t); font-size: .98rem; line-height: 1.55; }
.bloco.grande {
  color: #fff; justify-content: flex-end; min-height: 380px;
  background:
    radial-gradient(80% 60% at 20% 0%, rgba(74,111,224,.55), transparent 60%),
    linear-gradient(170deg, #22305c 0%, #121a33 55%, #070b17 100%);
}
.bloco.grande .bloco-ico { position: absolute; top: 26px; left: 26px; color: var(--gelo); background: rgba(255,255,255,.1); }
.bloco.grande small { color: var(--gelo); }
.bloco.grande h3 { font-size: clamp(1.6rem, 2.8vw, 2rem); color: #fff; }
.bloco.grande p { color: #c9d2e6; }
.bloco.grande .marca { position: absolute; z-index: -1; top: -10%; right: -22%; height: 90%; width: auto; max-width: none; opacity: .06; pointer-events: none; }
.bloco-lista { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 8px; font-weight: 500; font-size: .98rem; }
.bloco-lista li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.bloco-lista svg { width: 18px; height: 18px; margin-top: 3px; color: var(--gelo); }
.bloco.grande .link-seta { color: #fff; margin-top: 6px; }
a.bloco { transition: transform .25s ease; }
@media (hover: hover) { a.bloco:hover { transform: translateY(-4px); } }

/* ---------- direitos: faixas numeradas ---------- */
.fatores { display: grid; gap: 12px; max-width: 920px; margin: 0 auto; }
.fator { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 40px; border-radius: 30px; padding: 22px 44px 22px 36px; background: #f2f2f4; }
.fator:nth-child(even) { background: linear-gradient(120deg, #e3ebff 0%, #cddcff 55%, #b9cdfb 100%); }
.fator b { font-size: clamp(3.6rem, 9vw, 6.2rem); font-weight: 200; letter-spacing: -.06em; line-height: .9; color: var(--preto); min-width: 1.5em; }
.fator h3 { margin: 0 0 6px; font-size: clamp(1.15rem, 2.4vw, 1.45rem); letter-spacing: -.02em; }
.fator p { color: #4a4a4f; line-height: 1.5; font-size: clamp(.94rem, 1.8vw, 1.02rem); max-width: 46ch; }
.fator:nth-child(even) p { color: #26304f; }
.centro { text-align: center; margin-top: 28px; }

/* ---------- número grande (24h) ---------- */
.numero-bloco { text-align: center; }
.numero { font-size: clamp(6rem, 24vw, 13rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; margin: 0 0 10px; background: linear-gradient(180deg, #4a6fe0, #121a33); -webkit-background-clip: text; background-clip: text; color: transparent; }
.numero small { font-size: .45em; letter-spacing: -.04em; }
.numero-bloco .lead { margin-bottom: 18px; }

/* ---------- quem atende: regras + carta ---------- */
.confirma { display: grid; gap: 48px; }
@media (min-width: 960px) { .confirma { grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: center; } }
.confirma .titulo { text-align: left; font-size: clamp(2rem, 4.2vw, 3rem); }
.confirma-texto { color: var(--cinza-t); font-size: 1.08rem; line-height: 1.6; max-width: 34em; }
.regras { list-style: none; margin: 32px 0 0; padding: 0; }
.regras li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid #e8e8ed; }
.regras li:last-child { border-bottom: 1px solid #e8e8ed; }
.regra-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #1c274a, #2c4aa8 60%, #8fb0ff); box-shadow: 0 8px 18px -8px rgba(28,39,74,.7); }
.regra-ico svg { width: 20px; height: 20px; }
.regras b { display: block; font-size: 1.1rem; letter-spacing: -.015em; }
.regras p { margin-top: 4px; color: var(--cinza-t); font-size: .98rem; line-height: 1.5; }
/* carta em papel, assinada */
.carta { position: relative; max-width: 470px; margin: 0 auto; width: 100%; }
.carta-papel {
  position: relative; background-color: #f6f1e4; color: #2a2a2c; border-radius: 6px; padding: 34px 32px 28px; transform: rotate(-1.6deg);
  box-shadow: 0 1px 1px rgba(0,0,0,.06), 0 30px 60px -20px rgba(28,39,74,.35), 0 10px 20px -10px rgba(0,0,0,.15);
}
.carta-papel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.04) 100%); }
.carta-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #e0d6bf; }
.carta-topo img { height: 34px; width: auto; }
.carta-local { font-size: .85rem; color: #8a8577; }
.carta-corpo { padding: 22px 0 6px; font-family: Georgia, "Times New Roman", serif; font-size: 1.06rem; line-height: 1.65; color: #3a3833; }
.carta-corpo p { margin: 0 0 12px; }
.carta-assina { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 112px; margin: 4px 0 20px; }
.carta-rubrica { display: block; font-family: "Mrs Saint Delafield", cursive; font-size: 3.4rem; line-height: 1; color: #1c3a8a; transform: rotate(-4deg); margin: 0 0 0 -4px; white-space: nowrap; }
.carta-selo { position: relative; flex: 0 0 104px; width: 104px; height: 104px; color: var(--azul); opacity: .82; transform: rotate(14deg); mix-blend-mode: multiply; pointer-events: none; }
.carta-selo svg { width: 100%; height: 100%; }
.carta-rodape { border-top: 1px dashed #d6c9ab; padding-top: 18px; }
.carta-oab { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.carta-oab span { font-size: .78rem; color: #8a8577; letter-spacing: .04em; }
.carta-oab b { font-size: 1.25rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--preto); }
.carta-rodape p { margin: 8px 0 16px; font-size: .88rem; line-height: 1.5; color: #6e6a60; }
.carta-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.carta-acoes .btn { min-height: 48px; padding: 10px 20px; font-size: .98rem; }
.carta-consulta { display: inline-block; padding: 8px 0; color: var(--azul); font-weight: 600; font-size: .92rem; text-decoration: none; }
.carta-consulta:hover { text-decoration: underline; }

/* ---------- como funciona ---------- */
.passos-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: pc; }
@media (min-width: 640px) { .passos-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .passos-cards { grid-template-columns: repeat(4, 1fr); } }
.passos-cards li { counter-increment: pc; background: #fff; border-radius: var(--raio); padding: 28px 24px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 44px rgba(28,39,74,.07); }
.passos-cards li::before { content: "0" counter(pc); display: block; margin-bottom: 18px; font-size: 3.2rem; line-height: 1; font-weight: 200; letter-spacing: -.06em; color: var(--preto); }
.passos-cards b { display: block; font-size: 1.12rem; letter-spacing: -.015em; }
.passos-cards p { margin-top: 6px; color: var(--cinza-t); font-size: .97rem; line-height: 1.5; }

/* ---------- dúvidas ---------- */
.faq { max-width: 780px; margin: 0 auto; border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 4px; font-weight: 600; font-size: 1.1rem; display: flex; justify-content: space-between; gap: 16px; align-items: center; letter-spacing: -.015em; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; font-weight: 300; color: var(--cinza-t); flex: 0 0 auto; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 4px 22px; color: var(--cinza-t); line-height: 1.65; }

/* ---------- página de texto (privacidade, termos) ---------- */
.abertura--texto .hero-caixa { min-height: 0; }
.abertura--texto .hero-meio { grid-template-columns: 1fr; padding: 28px 60px 56px; }
.voltar { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; }
.voltar:hover { text-decoration: underline; }
.artigo { max-width: 720px; margin: 0 auto; }
.artigo h2 { margin-top: 44px; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.2; letter-spacing: -.03em; }
.artigo h2:first-child { margin-top: 0; }
.artigo p, .artigo li { font-size: 1.06rem; line-height: 1.7; color: #3a3a3c; }
.artigo p { margin-top: 14px; }
.artigo ul { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.artigo-aviso { margin-top: 32px; font-size: .88rem; color: var(--cinza-t); }

/* ---------- rodapé (21/10): selo gravado, chamada final, colunas e registro na OAB ---------- */
.rodape {
  --rod-fundo: #070b17; --rod-texto: #aeb6c8; --rod-claro: #e3e7f1; --rod-apagado: #7f89a3; --rod-linha: rgba(198,215,255,.12);
  position: relative; color: var(--rod-texto); font-size: .92rem; line-height: 1.6; background: var(--rod-fundo);
  padding: clamp(64px, 8vw, 104px) 0 28px;
}
.rodape::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(198,215,255,.35), transparent); }
.rodape a { color: var(--rod-claro); text-decoration: none; }
.rodape a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.rodape a:focus-visible { outline: 2px solid var(--gelo); outline-offset: 3px; border-radius: 6px; }
.rodape ul { list-style: none; margin: 0; padding: 0; }

/* chamada final: o selo, a frase e o botão, centralizados como num documento assinado */
.rod-chamada { display: flex; flex-direction: column; align-items: center; text-align: center; }
.rod-selo { width: clamp(200px, 22vw, 270px); aspect-ratio: 1; margin-bottom: 30px; }
.rod-selo-svg { display: block; width: 100%; height: 100%; color: var(--gelo); overflow: visible; }
.rod-fio { fill: none; stroke: currentColor; stroke-width: 1; opacity: .4; }
.rod-guilhoche { fill: none; stroke: currentColor; stroke-width: .6; opacity: .5; transform-box: fill-box; transform-origin: center; transition: transform 2.6s cubic-bezier(.16,.84,.3,1); }
.js .rod-selo:not(.on) .rod-guilhoche { transform: rotate(-36deg); }
.rod-aro-texto { font-family: var(--inscricao); font-size: 15px; font-weight: 700; fill: currentColor; opacity: .85; }
.rod-mono { fill: #fff; }
.rod-olho { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: .76rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gelo); }
.rod-olho i { width: 7px; height: 7px; border-radius: 50%; background: #e0262f; box-shadow: 0 0 0 4px rgba(224,38,47,.18); }
.rod-chamada h2 { margin: 0; max-width: 19ch; font-family: var(--inscricao); font-weight: 700; font-size: clamp(1.75rem, 3.4vw, 2.8rem); line-height: 1.15; letter-spacing: .01em; color: #fff; }
.rod-sub { margin: 16px 0 0; max-width: 46ch; font-size: 1.02rem; color: var(--rod-texto); }
.rod-botao { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; margin-top: 30px; padding: 0 28px 0 22px; border-radius: 999px; background: #fff; color: var(--marinho) !important; font-weight: 600; font-size: 1rem; transition: transform .25s ease, box-shadow .25s ease; }
.rod-botao svg { width: 22px; height: 22px; flex: none; color: var(--whats); }
.rodape .rod-botao:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(198,215,255,.12); }

/* colunas: marca, navegação, contato e registro na OAB */
.rod-grade { display: grid; grid-template-columns: 1.25fr .9fr 1.15fr 1.5fr; gap: 40px; margin-top: clamp(64px, 8vw, 96px); padding-top: 48px; border-top: 1px solid var(--rod-linha); }
.rod-marca img { width: 200px; height: auto; display: block; }
.rod-marca p { margin: 14px 0 0; color: var(--rod-texto); }
.rod-col h3 { margin: 0 0 10px; font-family: var(--inscricao); font-size: .8rem; font-weight: 700; letter-spacing: .16em; color: var(--gelo); }
.rod-links a, .rod-contato a, .rod-contato span, .rod-cna { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.rod-contato a, .rod-contato span { overflow-wrap: anywhere; }
.rod-contato svg { width: 18px; height: 18px; flex: none; color: var(--gelo); }
.rod-registro dl { margin: 4px 0 0; }
.rod-registro dl div + div { margin-top: 14px; }
.rod-registro dt { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rod-apagado); }
.rod-registro dd { margin: 3px 0 0; color: var(--rod-claro); font-variant-numeric: tabular-nums; }
.rod-cna { margin-top: 12px; color: var(--gelo) !important; font-weight: 600; gap: 4px; }
.rod-cna svg { width: 16px; height: 16px; }

/* aviso da OAB e a base com os documentos */
.rod-fim { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rod-linha); }
.rod-aviso { margin: 0; max-width: 92ch; font-size: .78rem; line-height: 1.65; color: var(--rod-apagado); }
.rod-base { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 0 24px; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--rod-apagado); }
.rod-base nav { display: flex; gap: 22px; }
.rod-base nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--rod-texto); }

@media (max-width: 1199px) {
  .rod-grade { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .rod-marca, .rod-registro { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .rod-grade { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
  .rod-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .rod-botao { width: 100%; justify-content: center; }
  .rod-base { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 899px) { .rodape { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 380px) { .rod-chamada h2 { font-size: 1.5rem; } }
/* computador: o selo grande à esquerda e a frase ao lado, alinhados como um bloco só */
@media (min-width: 1000px) {
  .rod-chamada { display: grid; grid-template-columns: auto minmax(0, 560px); justify-content: center; align-items: center; column-gap: clamp(48px, 6vw, 88px); text-align: left; }
  .rod-selo { grid-column: 1; grid-row: 1 / span 4; width: clamp(270px, 24vw, 320px); margin: 0; }
  .rod-chamada > :not(.rod-selo) { grid-column: 2; justify-self: start; }
  .rod-olho { align-self: end; }
  .rod-botao { align-self: start; }
}
@media (prefers-reduced-motion: reduce) { .rod-guilhoche, .rod-botao { transition: none; } .js .rod-selo:not(.on) .rod-guilhoche { transform: none; } }

/* ---------- botão flutuante do WhatsApp ---------- */
.dock {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--whats); color: #fff; text-decoration: none; box-shadow: 0 10px 24px -6px rgba(0,0,0,.35);
  transform: scale(0); opacity: 0; transition: transform .3s cubic-bezier(.2,.8,.2,1.2), opacity .2s ease, background .2s ease;
}
.dock.show { transform: scale(1); opacity: 1; }
.dock:hover { background: #1ebe5a; }
.dock svg { width: 30px; height: 30px; }
@media (min-width: 900px) { .dock { right: 28px; bottom: 28px; } }

/* ---------- janela do vídeo ---------- */
.janela-video { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; color: #fff; overflow: hidden; }
.janela-video::backdrop { background: rgba(5,8,18,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.janela-corpo { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 64px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
.janela-video video { min-height: 0; flex: 0 1 auto; max-width: 100%; max-height: calc(100% - 70px); aspect-ratio: 9 / 16; width: auto; height: 100%; object-fit: contain; border-radius: 22px; background: #000; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.janela-acoes { display: flex; align-items: center; justify-content: center; gap: 12px; flex: none; }
.janela-acoes .btn { min-height: 48px; padding: 8px 20px; font-size: .95rem; }
.janela-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: #fff; transition: background .2s ease; }
.janela-btn svg { width: 20px; height: 20px; }
@media (hover: hover) { .janela-btn:hover { background: rgba(255,255,255,.24); } }
.janela-fechar { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }
html.travado { overflow: hidden; }

/* ---------- revelar ao rolar (só com JavaScript ligado) ---------- */
.js .revela { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js .revela.on { opacity: 1; transform: none; }
.js .carta.revela:not(.on) { transform: translateY(30px) rotate(2deg); }

/* ================= celular ================= */
@media (max-width: 999px) {
  .hero-reel { display: none; }
  .hero-meio { grid-template-columns: 1fr; }
}
@media (max-width: 759px) {
  .abertura { padding: 12px 0 0; }
  .abertura .env-larga { padding: 0 12px; }
  .hero-caixa { border-radius: 26px; min-height: min(660px, 88svh); background: #070b17 url(img/topo-poster.jpg) center 20% / cover no-repeat; }
  .hero-caixa .marca { display: none; }
  /* no celular o vídeo em pé vira o fundo da dobra, escurecido embaixo para o texto */
  .hero-video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; z-index: -2; }
  .hero-caixa::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7,11,23,.97) 0%, rgba(7,11,23,.88) 50%, rgba(7,11,23,.35) 80%, rgba(7,11,23,.6) 100%); }
  .hero-cima { padding: 18px 18px 0 22px; }
  .hero-logo { height: 34px; }
  .hero-meio { align-items: end; padding: 24px 22px 136px; }
  .abertura h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .abertura .sub { font-size: 1rem; }
  .hero-selo { font-size: .82rem; margin-bottom: 14px; }
  .hero-fatos { font-size: .86rem; gap: 6px 16px; margin-top: 18px; }
  .quiz-area { margin-top: -108px; }
  .passo { border-radius: 26px; grid-template-rows: auto 1fr; }
  .passo:not(.passo--resultado) { min-height: 540px; }
  .quiz-acoes .btn { width: 100%; }
  .tile { border-radius: 20px; }
  .selos { font-size: .84rem; gap: 6px 16px; }
  .fator { gap: 14px; padding: 16px 18px; border-radius: 24px; }
  .fator b { font-size: 3rem; min-width: 1.15em; }
  .bloco { padding: 22px 20px 24px; border-radius: 24px; }
  .bloco.grande { min-height: 360px; }
  .carta-papel { padding: 26px 20px 22px; transform: rotate(-1deg); }
  .carta-selo { flex-basis: clamp(60px, 19vw, 84px); width: clamp(60px, 19vw, 84px); height: clamp(60px, 19vw, 84px); }
  .carta-rubrica { min-width: 0; font-size: clamp(2.3rem, 12.5vw, 2.9rem); }
  .carta-corpo { font-size: 1rem; }
  .passos-cards li { padding: 20px; display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; }
  .passos-cards li::before { grid-row: span 2; font-size: 2.4rem; margin: 0; }
  .passos-cards p { margin-top: 4px; }
  .faq summary { font-size: 1.02rem; padding: 18px 2px; }
  .abertura--texto .hero-caixa { background: linear-gradient(160deg, #18244a 0%, #0e1630 50%, #070b17 100%); min-height: 0; }
  .abertura--texto .hero-caixa::before { display: none; }
  .abertura--texto .hero-meio { padding: 22px 22px 40px; }
}
@media (max-width: 380px) {
  .hero-meio { padding-left: 18px; padding-right: 18px; }
  .conteudo { padding: 8px 18px 22px; }
  .janela-acoes .btn { padding: 8px 14px; font-size: .88rem; gap: 8px; }
  .janela-acoes { gap: 8px; }
  .carta-acoes .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-texto > * { animation: none; }
  .js .revela, .js .revela.on, .js .carta.revela:not(.on) { opacity: 1; transform: none; transition: none; }
  .palco, .resposta, .indicador i, .video-card, .video-play, .seta-v, .hero-reel, .dock { transition: none; }
  .vivo .passo, .vivo .passo.atual, .vivo .passo.proximo, .vivo .passo.anterior { transition: none; }
}
/* alvos de toque de 44px no rodapé e no logotipo das páginas de texto */
.hero-cima > a:first-child { display: inline-flex; align-items: center; min-height: 48px; }
.carta-consulta { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
@media (max-width: 340px) { .titulo { font-size: 1.62rem; } }
@media (max-width: 759px) { .bloco.grande { padding-top: 84px; } }

/* ---------- primeira dobra no estilo da referência (20/10): grade de fundo, números e cartões flutuando ---------- */
.hero-caixa { background:
    radial-gradient(45% 60% at 78% 45%, rgba(74,111,224,.38), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(74,111,224,.16), transparent 70%),
    linear-gradient(160deg, #141f42 0%, #0c1329 50%, #060a15 100%); }
.hero-caixa::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask: radial-gradient(70% 80% at 60% 40%, #000 30%, transparent 85%); mask: radial-gradient(70% 80% at 60% 40%, #000 30%, transparent 85%);
}
.hero-meio { grid-template-columns: minmax(0, 1fr) 470px; }
.hero-acoes { margin-top: 28px; }
.btn--gelo { background: var(--gelo); color: var(--noite); box-shadow: 0 14px 30px -12px rgba(143,176,255,.7); }
.btn--gelo:hover { background: #dbe6ff; }
.btn--gelo svg { color: #128c4a; }
.hero-numeros { list-style: none; display: flex; gap: 40px; margin: 34px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.12); max-width: 440px; }
.hero-numeros b { display: block; font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.hero-numeros span { display: block; margin-top: 4px; font-size: .88rem; color: #aab6d3; }
/* cartões de vídeo flutuando: só ilustram; tocar leva à seção dos vídeos */
.hero-colagem { position: relative; display: block; width: 470px; height: 470px; text-decoration: none; color: #fff; }
.col-card {
  position: absolute; overflow: hidden; border-radius: 24px; aspect-ratio: 9 / 16; background: #0c1329;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.14);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.col-card img, .col-card video { width: 100%; height: 100%; object-fit: cover; }
.col-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,10,21,0) 55%, rgba(6,10,21,.55)); }
.col-card.c1 { width: 214px; left: 128px; top: 26px; z-index: 4; transform: rotate(-3deg); }
.col-card.c2 { width: 158px; right: 0; top: 0; z-index: 3; transform: rotate(7deg); }
.col-card.c3 { width: 150px; right: 18px; bottom: 0; z-index: 5; transform: rotate(4deg); }
.col-card.c4 { width: 146px; left: 0; top: 120px; z-index: 2; transform: rotate(-9deg); opacity: .9; }
.col-chip {
  position: absolute; z-index: 6; left: 44px; bottom: 34px; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px 10px 12px; border-radius: 999px; font-weight: 600; font-size: .92rem; white-space: nowrap;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.6);
}
.col-chip svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .hero-colagem:hover .c1 { transform: rotate(-1deg) translateY(-8px); }
  .hero-colagem:hover .c2 { transform: rotate(10deg) translate(6px, -6px); }
  .hero-colagem:hover .c3 { transform: rotate(6deg) translate(6px, 6px); }
  .hero-colagem:hover .c4 { transform: rotate(-12deg) translate(-6px, 0); }
  .hero-colagem:hover .col-chip { background: #fff; color: var(--marinho); }
}
@keyframes flutua { 50% { translate: 0 -8px; } }
.col-card.c2 { animation: flutua 6s ease-in-out infinite; }
.col-card.c3 { animation: flutua 7s ease-in-out -2s infinite; }
.col-card.c4 { animation: flutua 8s ease-in-out -4s infinite; }
@media (max-width: 1099px) and (min-width: 1000px) { .hero-meio { grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; } .hero-colagem { transform: scale(.85); transform-origin: right center; } }
@media (max-width: 999px) { .hero-colagem { display: none; } .hero-meio { grid-template-columns: 1fr; } }
@media (max-width: 759px) {
  .hero-caixa::after { display: none; }
  .hero-acoes { margin-top: 20px; } .hero-acoes .btn { width: 100%; }
  .hero-numeros { gap: 28px; margin-top: 22px; padding-top: 16px; }
  .hero-numeros b { font-size: 1.5rem; }
  .hero-numeros span { font-size: .8rem; }
  .hero-meio { padding-bottom: 132px; }
}
@media (prefers-reduced-motion: reduce) { .col-card { animation: none !important; transition: none; } }

/* primeira dobra de ponta a ponta na largura (20/10): o fundo ocupa a tela toda; o conteúdo fica na largura do site */
.abertura, .abertura .env-larga { padding: 0 !important; }
.abertura > .env-larga { max-width: none; }
.hero-caixa { border-radius: 0 !important; }
.hero-cima, .hero-meio { width: 100%; max-width: 1240px; margin: 0 auto; }

/* ---------- cartão do contato (no lugar da triagem, por cima da primeira dobra) ---------- */
.form-card {
  width: min(860px, 90vw); margin: 0 auto; background: #fff; border-radius: 34px; display: grid; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.05);
}
@media (min-width: 760px) { .form-card { grid-template-columns: 250px 1fr; min-height: 300px; } }
.form-passos { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.form-passos li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: #f2f2f4; font-size: .92rem; font-weight: 600; }
.form-passos span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; color: #fff; background: var(--marinho); }
.form-card .quiz-acoes .btn { background: var(--marinho); }
.form-card .quiz-acoes .btn:hover { background: #121a33; }
@media (max-width: 759px) { .form-card { border-radius: 26px; } .form-card .tile { min-height: 110px; } .form-card .quiz-acoes .btn { width: 100%; } }

/* ---------- formulário em janela ---------- */
.janela-form { padding: 0; border: 0; border-radius: 30px; width: min(520px, calc(100% - 24px)); max-height: calc(100% - 24px); background: #fff; color: var(--preto); box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); overflow: auto; }
.janela-form::backdrop { background: rgba(5,8,18,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.janela-form[open] { animation: sobe .35s cubic-bezier(.2,.7,.3,1); }
.form-pop { position: relative; padding: 34px 30px 26px; display: grid; gap: 14px; }
.form-pop h2 { font-size: clamp(1.5rem, 4vw, 1.85rem); line-height: 1.12; letter-spacing: -.03em; padding-right: 44px; }
.form-sub { color: var(--cinza-t); font-size: .98rem; margin-top: -4px; }
.form-fechar { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #f2f2f4; color: var(--preto); display: grid; place-items: center; cursor: pointer; }
.form-fechar svg { width: 18px; height: 18px; }
.form-fechar:hover { background: #e6e7ec; }
.campo { display: grid; gap: 6px; }
.campo span { font-size: .9rem; font-weight: 600; }
.campo input, .campo textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 16px; border: 1px solid var(--linha); background: #f5f5f7;
  font: 400 1rem/1.4 inherit; font-family: inherit; color: var(--preto); -webkit-appearance: none; appearance: none; transition: border-color .15s, background .15s;
}
.campo textarea { min-height: 116px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: 0; border-color: var(--azul); background: #fff; box-shadow: 0 0 0 4px var(--azul-claro); }
.campo .invalido { border-color: #c62828; background: #fff7f7; }
.form-erro { color: #b3261e; font-size: .9rem; font-weight: 500; }
.form-pop .btn { width: 100%; margin-top: 4px; }
.form-obs { font-size: .8rem; line-height: 1.5; color: var(--cinza-t); text-align: center; }
@media (max-width: 559px) {
  /* no celular a janela sobe de baixo, como uma folha */
  .janela-form { width: 100%; max-width: none; margin: auto 0 0; border-radius: 26px 26px 0 0; max-height: 92svh; }
  .form-pop { padding: 28px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
}
.form-card h3 { font-size: clamp(1.5rem, 4.2vw, 1.95rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; margin: 0 0 8px; }
.form-card .dica { color: var(--cinza-t); margin: 0 0 18px; line-height: 1.5; font-size: 1rem; }

/* fundo da primeira dobra mais calmo (20/10): sem a marca d'água atrás do texto, grade só do lado dos vídeos e bem apagada */
.abertura:not(.abertura--texto) .hero-caixa .marca { display: none; }
.hero-caixa { background:
    radial-gradient(40% 55% at 80% 45%, rgba(74,111,224,.22), transparent 70%),
    linear-gradient(180deg, #0f1730 0%, #0a1024 100%); }
.hero-caixa::after {
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  -webkit-mask: radial-gradient(38% 60% at 80% 45%, #000 20%, transparent 80%); mask: radial-gradient(38% 60% at 80% 45%, #000 20%, transparent 80%);
}
/* sem o cartão por cima: a primeira dobra fecha com folga normal */
.hero-meio { padding-bottom: 72px; }
@media (max-width: 759px) { .hero-meio { padding-bottom: 36px; } .hero-caixa { min-height: min(620px, 82svh); } }
.videos { padding-top: clamp(64px, 8vw, 104px); }
.video-card video, .col-card video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- primeira dobra em fundo branco (20/10, pedido do Erick: o branco passa mais credibilidade) ---------- */
.hero-caixa { color: var(--preto); background:
    radial-gradient(40% 55% at 80% 45%, rgba(74,111,224,.10), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%) !important; border-bottom: 1px solid #eceef3; }
.hero-caixa::after {
  background-image: linear-gradient(rgba(28,39,74,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(28,39,74,.06) 1px, transparent 1px);
  -webkit-mask: radial-gradient(42% 62% at 80% 45%, #000 20%, transparent 80%); mask: radial-gradient(42% 62% at 80% 45%, #000 20%, transparent 80%);
}
.hero-caixa::before { display: none !important; }
/* o monograma de volta, apagado, colado na lateral */
.abertura .hero-caixa .marca { display: block !important; opacity: .045; left: -7%; height: 118%; }
.abertura h1 { color: var(--preto); }
.abertura h1 span { background: linear-gradient(90deg, #1c274a, #3d5fc4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.abertura .sub { color: #4a4a4f; }
.hero-selo { background: #fff; border-color: #e3e6ee; color: var(--cinza-t); box-shadow: 0 6px 18px -10px rgba(28,39,74,.25); }
.hero-selo b { color: var(--preto); }
.hero-zap { background: var(--whats); color: #fff; box-shadow: 0 10px 24px -10px rgba(37,211,102,.7); }
.btn--gelo { background: var(--marinho); color: #fff; box-shadow: 0 14px 30px -12px rgba(28,39,74,.55); }
.btn--gelo:hover { background: #121a33; }
.hero-numeros { border-top-color: #e3e6ee; }
.hero-numeros b { color: var(--preto); }
.hero-numeros span { color: var(--cinza-t); }
.col-card { box-shadow: 0 30px 60px -26px rgba(28,39,74,.45), 0 0 0 1px rgba(28,39,74,.06); }
.col-chip { background: rgba(255,255,255,.82); border-color: rgba(28,39,74,.12); color: var(--marinho); }
.voltar { color: var(--azul); }
@media (max-width: 759px) {
  .hero-caixa { min-height: 0 !important; }
  .hero-video { display: none !important; }
  .abertura .hero-caixa .marca { left: auto; right: -30%; height: 90%; top: 40%; }
  .hero-meio { padding-top: 28px; padding-bottom: 44px; }
}

/* cartões de vídeo maiores, ocupando quase toda a altura da primeira dobra (20/10) */
@media (min-width: 1000px) {
  .hero-meio { grid-template-columns: minmax(0, 1fr) 560px; gap: 32px; padding-top: 12px; padding-bottom: 40px; }
  .hero-colagem { width: 560px; height: 640px; }
  .col-card.c1 { width: 290px; left: 150px; top: 36px; border-radius: 28px; }
  .col-card.c2 { width: 215px; right: 0; top: 0; border-radius: 26px; }
  .col-card.c3 { width: 205px; right: 22px; bottom: 0; border-radius: 26px; }
  .col-card.c4 { width: 200px; left: 0; top: 160px; border-radius: 26px; }
  .col-chip { left: 70px; bottom: 44px; font-size: .98rem; padding: 12px 20px 12px 14px; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .hero-meio { grid-template-columns: minmax(0, 1fr) 470px; }
  .hero-colagem { transform: scale(.84); transform-origin: right center; width: 560px; margin-left: -90px; }
}

/* ---------- primeira dobra em leque (20/10, modelo "leque" no build.py; o anterior é "lateral") ----------
   Texto centrado e cartões de vídeo abertos em leque saindo pelo pé da dobra, com um brilho azul nascendo deles. */
.abertura--leque .hero-caixa { min-height: 0; background: #fff !important; border-bottom: 0; }
.abertura--leque .hero-caixa::after { display: none; }
.abertura--leque .hero-caixa .marca { opacity: .035; }
.leque-texto { position: relative; z-index: 2; text-align: center; max-width: 900px; margin: 0 auto; padding: 8px 24px 0; display: flex; flex-direction: column; align-items: center; }
.abertura--leque h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1.02; max-width: 15em; margin-bottom: 20px; }
.abertura--leque h1 span { display: inline; }
.abertura--leque .sub { max-width: 46ch; margin: 0 auto; }
.abertura--leque .hero-acoes { margin-top: 26px; }
.leque { position: relative; z-index: 1; display: block; height: 470px; margin-top: 28px; text-decoration: none; color: #fff; }
/* brilho saindo dos cartões */
.leque::before {
  content: ""; position: absolute; left: 50%; bottom: -120px; width: min(1300px, 140vw); height: 560px; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 60%, rgba(74,111,224,.32) 0%, rgba(143,176,255,.18) 40%, rgba(255,255,255,0) 72%);
  filter: blur(10px);
}
.leque-card {
  position: absolute; left: 50%; bottom: 0; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 30px; background: #0c1329;
  box-shadow: 0 30px 60px -24px rgba(28,39,74,.55), 0 0 0 1px rgba(255,255,255,.6);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.leque-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.leque-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,10,21,.55) 0%, rgba(6,10,21,0) 32%); pointer-events: none; }
.leque-card b { position: absolute; z-index: 1; top: 18px; left: 20px; font-size: 1.25rem; letter-spacing: -.02em; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.leque-play {
  position: absolute; z-index: 1; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px; font-style: normal;
  padding: 7px 12px 7px 9px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.leque-play svg { width: 13px; height: 13px; }
.leque-card.l0  { width: 300px; z-index: 5; transform: translate(-50%, 70px); }
.leque-card.l-1 { width: 252px; z-index: 4; transform: translate(calc(-50% - 255px), 120px) rotate(-6deg); }
.leque-card.l1  { width: 252px; z-index: 4; transform: translate(calc(-50% + 255px), 120px) rotate(6deg); }
.leque-card.l-2 { width: 232px; z-index: 3; transform: translate(calc(-50% - 475px), 180px) rotate(-11deg); }
.leque-card.l2  { width: 232px; z-index: 3; transform: translate(calc(-50% + 475px), 180px) rotate(11deg); }
@media (max-width: 999px) {
  .leque { height: 400px; }
  .leque-card.l0 { width: 250px; }
  .leque-card.l-1, .leque-card.l1 { width: 210px; }
  .leque-card.l-1 { transform: translate(calc(-50% - 200px), 110px) rotate(-6deg); }
  .leque-card.l1 { transform: translate(calc(-50% + 200px), 110px) rotate(6deg); }
  .leque-card.l-2, .leque-card.l2 { display: none; }
}
@media (max-width: 759px) {
  .abertura--leque .hero-caixa .marca { display: none !important; }
  .leque-texto { padding: 4px 20px 0; }
  .abertura--leque h1 { font-size: clamp(2rem, 9.4vw, 2.6rem); }
  .abertura--leque .hero-acoes { width: 100%; }
  .leque { height: 320px; margin-top: 24px; }
  .leque-card { border-radius: 22px; }
  .leque-card b { font-size: 1rem; top: 12px; left: 14px; }
  .leque-play { display: none; }
  .leque-card.l0 { width: 46vw; max-width: 210px; transform: translate(-50%, 40px); }
  .leque-card.l-1, .leque-card.l1 { width: 38vw; max-width: 175px; }
  .leque-card.l-1 { transform: translate(calc(-50% - 30vw), 80px) rotate(-7deg); }
  .leque-card.l1 { transform: translate(calc(-50% + 30vw), 80px) rotate(7deg); }
}
@media (prefers-reduced-motion: reduce) { .leque-card { transition: none; } }

/* leque cabendo na tela (20/10): a dobra inteira aparece sem rolar e sobra uma faixa da seção seguinte.
   Os cartões passam a ser medidos pela altura que sobra embaixo do texto. */
.abertura--leque .hero-caixa { height: calc(100svh - 72px); min-height: 560px; max-height: 1000px; display: flex; flex-direction: column; }
.abertura--leque .hero-cima { padding-top: 20px; }
.abertura--leque .hero-selo { margin-bottom: 14px; }
.abertura--leque h1 { font-size: clamp(2rem, min(5.4vw, 6.6svh), 4.2rem); margin-bottom: 14px; }
.abertura--leque .sub { font-size: clamp(.98rem, min(1.6vw, 2.2svh), 1.15rem); }
.abertura--leque .hero-acoes { margin-top: clamp(14px, 2.4svh, 24px); }
.leque { flex: 1; height: auto !important; min-height: 170px; margin-top: clamp(16px, 3svh, 28px) !important; }
.leque-card { width: auto !important; }
.leque-card.l0  { top: 0;   height: 128%; transform: translateX(-50%) !important; }
.leque-card.l-1 { top: 12%; height: 108%; transform: translateX(calc(-50% - 92%)) rotate(-6deg) !important; }
.leque-card.l1  { top: 12%; height: 108%; transform: translateX(calc(-50% + 92%)) rotate(6deg) !important; }
.leque-card.l-2 { top: 26%; height: 98%;  transform: translateX(calc(-50% - 188%)) rotate(-11deg) !important; display: block !important; }
.leque-card.l2  { top: 26%; height: 98%;  transform: translateX(calc(-50% + 188%)) rotate(11deg) !important; display: block !important; }
@media (max-width: 759px) {
  .abertura--leque .hero-caixa { height: calc(100svh - 56px); min-height: 520px; }
  .abertura--leque h1 { font-size: clamp(1.75rem, min(8.6vw, 5.4svh), 2.5rem); }
  .abertura--leque .sub { font-size: .95rem; }
  .leque-card.l-2, .leque-card.l2 { display: none !important; }
  .leque-card.l-1 { transform: translateX(calc(-50% - 80%)) rotate(-7deg) !important; }
  .leque-card.l1 { transform: translateX(calc(-50% + 80%)) rotate(7deg) !important; }
}
.leque-play { top: auto; bottom: 18px; right: auto; left: 50%; transform: translateX(-50%); }

/* logo + advogado + OAB num cartão só, no alto e no centro (20/10) */
.hero-cima--cartao { justify-content: center; padding: 18px 20px 0 !important; }
.cartao-id {
  display: inline-flex; align-items: center; gap: 18px; padding: 8px 20px 8px 18px; border-radius: 999px;
  background: #fff; border: 1px solid #e3e6ee; box-shadow: 0 10px 30px -16px rgba(28,39,74,.35);
}
.cartao-id-logo { height: 34px; width: auto; }
.cartao-id-pessoa { display: inline-flex; align-items: center; gap: 10px; padding-left: 18px; border-left: 1px solid #e3e6ee; }
.cartao-id-pessoa img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.cartao-id-pessoa b { display: block; font-size: .92rem; line-height: 1.2; color: var(--preto); }
.cartao-id-pessoa small { display: block; font-size: .8rem; color: var(--cinza-t); line-height: 1.2; }
.abertura--leque .leque-texto { padding-top: clamp(16px, 3svh, 32px); }
@media (max-width: 559px) {
  .cartao-id { gap: 12px; padding: 7px 14px 7px 12px; }
  .cartao-id-logo { height: 28px; }
  .cartao-id-pessoa { padding-left: 12px; gap: 8px; }
  .cartao-id-pessoa img { width: 30px; height: 30px; }
  .cartao-id-pessoa b { font-size: .82rem; }
  .cartao-id-pessoa small { font-size: .72rem; }
}
@media (max-width: 359px) { .cartao-id-logo { height: 22px; } .cartao-id { gap: 10px; padding-right: 12px; } .cartao-id-pessoa { padding-left: 10px; } }

@media (min-width: 760px) {
  .cartao-id { padding: 10px 24px 10px 22px; gap: 22px; }
  .cartao-id-logo { height: 42px; }
  .cartao-id-pessoa { padding-left: 22px; }
  .cartao-id-pessoa img { width: 44px; height: 44px; }
  .cartao-id-pessoa b { font-size: 1rem; }
  .cartao-id-pessoa small { font-size: .86rem; }
}

/* texto da dobra em duas linhas cheias, sem "pela sua defesa" sobrando sozinho embaixo */
@media (min-width: 900px) { .abertura--leque .sub { max-width: 64ch; } }

/* botão principal da dobra: maior e com destaque (brilho que passa + halo) */
.abertura--leque .hero-acoes .btn {
  position: relative; overflow: hidden; min-height: 62px; padding: 16px 38px; font-size: 1.12rem; gap: 12px;
  background: linear-gradient(135deg, #2c4aa8 0%, #1c274a 70%);
  box-shadow: 0 18px 40px -14px rgba(44,74,168,.75), 0 0 0 6px rgba(74,111,224,.12);
  animation: halo 2.6s ease-in-out infinite;
}
.abertura--leque .hero-acoes .btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg);
  animation: brilho 3.2s ease-in-out infinite;
}
.abertura--leque .hero-acoes .btn svg { width: 20px; height: 20px; transition: transform .2s; }
.abertura--leque .hero-acoes .btn:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -14px rgba(44,74,168,.85), 0 0 0 8px rgba(74,111,224,.16); }
.abertura--leque .hero-acoes .btn:hover svg { transform: translateX(4px); }
@keyframes brilho { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes halo { 50% { box-shadow: 0 18px 40px -14px rgba(44,74,168,.75), 0 0 0 11px rgba(74,111,224,.07); } }
@media (max-width: 759px) { .abertura--leque .hero-acoes .btn { min-height: 58px; font-size: 1.06rem; } }
@media (prefers-reduced-motion: reduce) { .abertura--leque .hero-acoes .btn, .abertura--leque .hero-acoes .btn::after { animation: none; } }

/* "Fale direto com o advogado..." inteira numa linha só, embaixo da primeira frase */
@media (min-width: 760px) { .abertura--leque .sub .frase { display: block; white-space: nowrap; } }
.abertura--leque .hero-acoes .btn svg { color: #fff; }
/* cartão da logo + advogado no canto superior esquerdo, onde ficava a logo (20/10) */
.hero-cima--cartao { justify-content: flex-start; width: 100%; max-width: 1240px; margin: 0 auto; padding: 22px 40px 0 60px !important; }
@media (max-width: 759px) { .hero-cima--cartao { padding: 16px 16px 0 !important; } }
/* sem o cartão de fundo: só a logo, a linha fina e o advogado (20/10) */
.cartao-id { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }

/* ---------- botão líquido (20/10, referência "Liquid Arrow Button") ----------
   Pílula + bolinha com o ícone do WhatsApp, ligadas por uma "ponte" de líquido (filtro SVG #liquido).
   A bolinha se afasta e volta de tempos em tempos; com o mouse em cima ela se solta mais. */
.btn-liquido {
  --cor: #1c274a; --h: 64px;
  position: relative; display: inline-flex; align-items: center; height: var(--h); padding: 0 calc(var(--h) + 34px) 0 34px;
  border: 0; background: none; cursor: pointer; color: #fff; font-family: inherit; font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em;
  filter: drop-shadow(0 16px 22px rgba(28,39,74,.35)); -webkit-tap-highlight-color: transparent;
}
.bl-forma { position: absolute; inset: -10px -24px -10px -10px; padding: 10px 24px 10px 10px; filter: url(#liquido); }
.bl-pilula { position: absolute; left: 10px; top: 10px; bottom: 10px; right: calc(var(--h) + 34px); border-radius: 999px; background: var(--cor); transition: right .5s cubic-bezier(.5,0,.2,1); }
.bl-bola, .bl-icone { position: absolute; top: 10px; right: 24px; width: var(--h); height: var(--h); border-radius: 50%; }
.bl-bola { background: var(--cor); }
.bl-icone { top: 0; right: 0; display: grid; place-items: center; color: #fff; z-index: 1; }
.bl-icone svg { width: 26px; height: 26px; }
.bl-texto { position: relative; z-index: 1; white-space: nowrap; }
.bl-bola, .bl-icone { animation: gota 3.2s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes gota { 0%, 55%, 100% { transform: translateX(0); } 70% { transform: translateX(14px) scale(1.04); } 82% { transform: translateX(-3px); } }
.btn-liquido:active .bl-pilula { background: #121a33; }
.btn-liquido:focus-visible { outline: 3px solid var(--azul-vivo); outline-offset: 6px; border-radius: 999px; }
@media (max-width: 759px) {
  .btn-liquido { --h: 58px; width: calc(100% - 20px); justify-content: center; padding-left: 20px; font-size: 1.04rem; }
}
@media (prefers-reduced-motion: reduce) { .bl-bola, .bl-icone { animation: none; } }
.bl-pilula { right: calc(var(--h) + 27px); }
/* bolinha do WhatsApp verde; a ponte de líquido faz a passagem do azul para o verde */
.bl-bola { background: linear-gradient(90deg, #1f9e57 0%, #25d366 60%); }
.btn-liquido:active .bl-bola { background: #1fbe5a; }

/* selo "24h" vermelho, inclinado, em cima da bolinha do WhatsApp (atendimento todos os dias, 24 horas) */
.bl-24 {
  position: absolute; z-index: 2; top: -12px; right: -14px; padding: 3px 8px; border-radius: 999px;
  background: #e0262f; color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
  transform: rotate(-14deg); box-shadow: 0 6px 14px -6px rgba(224,38,47,.8); pointer-events: none;
}
.hero-24 { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .95rem; font-weight: 600; color: var(--preto); }
.hero-24 i { width: 9px; height: 9px; border-radius: 50%; background: #e0262f; box-shadow: 0 0 0 0 rgba(224,38,47,.5); animation: ponto 1.8s ease-out infinite; }
.hero-24 b { color: #e0262f; }
@keyframes ponto { 70% { box-shadow: 0 0 0 9px rgba(224,38,47,0); } 100% { box-shadow: 0 0 0 0 rgba(224,38,47,0); } }
@media (prefers-reduced-motion: reduce) { .hero-24 i { animation: none; } }
.hero-24 { display: inline-block; text-align: center; }
.hero-24 i { display: inline-block; vertical-align: middle; margin: -2px 8px 0 0; }
/* o selo 24h vai dentro do ícone e acompanha o movimento da bolinha */
.bl-icone .bl-24 { top: -12px; right: -12px; }
.vermelho { color: #e0262f; font-weight: 700; }
@media (min-width: 760px) and (max-width: 999px) { .abertura--leque .sub .frase { white-space: normal; display: inline; } }

/* ---------- celular (20/10): logo + advogado centralizados; vídeos do leque inteiros, sem corte embaixo ---------- */
@media (max-width: 759px) {
  .hero-cima--cartao { justify-content: center; }
  .abertura--leque .hero-caixa { height: auto; min-height: 0; max-height: none; }
  .leque { flex: none; height: 330px !important; min-height: 0; margin-top: 26px !important; margin-bottom: 18px; }
  .leque-card.l0  { top: 0;    height: 300px; }
  .leque-card.l-1 { top: 34px; height: 250px; transform: translateX(calc(-50% - 74%)) rotate(-8deg) !important; }
  .leque-card.l1  { top: 34px; height: 250px; transform: translateX(calc(-50% + 74%)) rotate(8deg) !important; }
  .leque-card.l-2, .leque-card.l2 { display: block !important; top: 70px; height: 205px; }
  .leque-card.l-2 { transform: translateX(calc(-50% - 150%)) rotate(-14deg) !important; }
  .leque-card.l2  { transform: translateX(calc(-50% + 150%)) rotate(14deg) !important; }
  .leque-card b { font-size: .9rem; }
  .leque::before { bottom: -60px; height: 420px; }
}

/* ---------- celulares pequenos (Galaxy A12 = 360 x ~660 visíveis) ----------
   3 cartões medidos pela largura da tela, inteiros, para a dobra caber sem rolar. */
@media (max-width: 420px) {
  .abertura--leque .leque-texto { padding-top: 12px; }
  .abertura--leque h1 { font-size: clamp(1.7rem, 8.4vw, 2.2rem); margin-bottom: 10px; }
  .abertura--leque .sub { font-size: .9rem; line-height: 1.45; }
  .abertura--leque .hero-acoes { margin-top: 16px; }
  .btn-liquido { --h: 54px; font-size: 1rem; }
  .leque { height: calc(64vw + 14px) !important; margin-top: 20px !important; margin-bottom: 10px; }
  .leque-card { border-radius: 18px; }
  .leque-card.l0  { top: 0; height: 64vw; }
  .leque-card.l-1 { top: 6vw; height: 54vw; transform: translateX(calc(-50% - 80%)) rotate(-7deg) !important; }
  .leque-card.l1  { top: 6vw; height: 54vw; transform: translateX(calc(-50% + 80%)) rotate(7deg) !important; }
  .leque-card.l-2, .leque-card.l2 { display: none !important; }
  .leque-card b { font-size: .8rem; top: 10px; left: 12px; }
}

/* ---------- celular: leque vira carrossel automático com os 5 vídeos (20/10) ----------
   O app.js dá a cada cartão uma posição (data-pos -2..2); o do meio é o maior. Os das pontas saem pela borda da tela. */
@media (max-width: 759px) {
  .leque-card[data-pos] { display: block !important; transition: transform .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1), height .7s cubic-bezier(.2,.8,.2,1); }
  .leque-card[data-pos="0"]  { top: 0;    height: 64vw; z-index: 5; transform: translateX(-50%) !important; }
  .leque-card[data-pos="1"]  { top: 5vw;  height: 55vw; z-index: 4; transform: translateX(calc(-50% + 84%)) rotate(7deg) !important; }
  .leque-card[data-pos="-1"] { top: 5vw;  height: 55vw; z-index: 4; transform: translateX(calc(-50% - 84%)) rotate(-7deg) !important; }
  .leque-card[data-pos="2"]  { top: 11vw; height: 47vw; z-index: 3; transform: translateX(calc(-50% + 182%)) rotate(13deg) !important; }
  .leque-card[data-pos="-2"] { top: 11vw; height: 47vw; z-index: 3; transform: translateX(calc(-50% - 182%)) rotate(-13deg) !important; }
  .leque-card.salto { transition: none !important; }
  .leque { touch-action: pan-y; }
}
@media (min-width: 421px) and (max-width: 759px) {
  .leque-card[data-pos="0"] { height: 300px; } .leque-card[data-pos="1"], .leque-card[data-pos="-1"] { height: 255px; top: 24px; }
  .leque-card[data-pos="2"], .leque-card[data-pos="-2"] { height: 215px; top: 48px; }
}
/* a pílula recua metade do que a bolinha avança: o conjunto fica sempre centralizado, parado ou esticando */
.bl-pilula, .bl-texto { animation: recua 3.2s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes recua { 0%, 55%, 100% { transform: translateX(0); } 70% { transform: translateX(-7px); } 82% { transform: translateX(1.5px); } }
@keyframes gota { 0%, 55%, 100% { transform: translateX(0); } 70% { transform: translateX(7px) scale(1.04); } 82% { transform: translateX(-1.5px); } }
@media (prefers-reduced-motion: reduce) { .bl-pilula, .bl-texto { animation: none; } }

/* tocar ou passar o mouse no leque não mexe nos cartões: só para o carrossel (app.js) */

/* ---------- cartões de vídeo mais cheios (20/10): maiores, tema + duração no alto, play no meio
   e a assinatura do advogado com o selo de verificado embaixo, como um reels ---------- */
.video-card { max-width: none; width: calc((100vw - 40px) / 1.32); border-radius: 26px; }
@media (min-width: 1000px) { .video-card { width: 290px; } }
.video-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 26%; z-index: 1; background: linear-gradient(rgba(7,11,23,.5), transparent); pointer-events: none; }
.video-card::after { height: 46%; z-index: 1; background: linear-gradient(transparent, rgba(7,11,23,.82)); }
.vc-topo { position: absolute; z-index: 2; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vc-tema, .vc-dur {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.vc-dur { padding-left: 8px; font-variant-numeric: tabular-nums; }
.vc-dur svg { width: 10px; height: 10px; }
.video-card .video-play { left: 50%; top: 50%; bottom: auto; width: 64px; height: 64px; transform: translate(-50%, -50%); z-index: 2; }
.video-card .video-play svg { width: 24px; height: 24px; }
.vc-assina { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 16px; display: flex; align-items: center; gap: 10px; text-align: left; color: #fff; }
.vc-assina img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; flex: none; }
.vc-assina b { display: flex; align-items: center; gap: 5px; font-size: .92rem; line-height: 1.2; }
.vc-assina small { display: block; font-size: .76rem; color: #d3dbec; line-height: 1.3; }
.vc-check { width: 15px; height: 15px; flex: none; }
@media (hover: hover) { .video-card:hover .video-play { transform: translate(-50%, -50%) scale(1.08); } }
@media (min-width: 1000px) {
  .videos-grade { grid-template-columns: 360px minmax(0, 1fr); }
  .videos-texto .titulo { font-size: clamp(2rem, 3.2vw, 2.6rem); }
}

/* ---------- legenda curta da cena no pé de cada cartão ---------- */
.vc-legenda { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 18px; color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.25; letter-spacing: -.01em; text-align: left; text-wrap: balance; text-shadow: 0 2px 10px rgba(0,0,0,.35); }

/* ---------- janela do vídeo em formato de stories (20/10) ---------- */
.stories .st-quadro {
  position: relative; height: min(92svh, 860px); aspect-ratio: 9 / 16; max-width: 100%; margin: 4svh auto 0; border-radius: 26px; overflow: hidden; background: #000;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
}
.stories video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; max-height: none; aspect-ratio: auto; box-shadow: none; }
.stories .st-quadro::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 18%; z-index: 1; background: linear-gradient(rgba(0,0,0,.45), transparent); pointer-events: none; }
.st-barras { position: absolute; z-index: 3; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; }
.st-barras span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.st-barras i { display: block; height: 100%; width: 0; background: #fff; transition: width .25s linear; }
.st-fechar { position: absolute; z-index: 4; top: 26px; right: 12px; width: 44px; height: 44px; border: 0; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; }
.st-fechar svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.st-lado { position: absolute; z-index: 2; top: 12%; bottom: 34%; width: 38%; border: 0; background: none; cursor: pointer; padding: 0; }
.st-ant { left: 0; } .st-prox { right: 0; }
.st-painel {
  position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; padding: 14px; border-radius: 20px; color: #fff;
  background: rgba(16,24,48,.72); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.st-info { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.st-capa { width: 54px; height: 72px; border-radius: 12px; object-fit: cover; flex: none; background: #1c274a; }
.st-titulo { display: block; font-size: 1.05rem; line-height: 1.25; letter-spacing: -.01em; }
.st-meta { display: block; margin-top: 4px; font-size: .82rem; color: #c3cbe0; }
.st-zap {
  position: relative; width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 14px; cursor: pointer;
  background: #fff; color: var(--preto); font-family: inherit; font-weight: 700; font-size: 1.02rem;
}
.st-zap svg { width: 22px; height: 22px; color: var(--whats); }
.st-24 { position: absolute; top: -10px; right: 14px; padding: 3px 8px; border-radius: 999px; background: #e0262f; color: #fff; font-style: normal; font-size: .76rem; font-weight: 800; transform: rotate(-10deg); box-shadow: 0 6px 14px -6px rgba(224,38,47,.8); }
@media (max-width: 559px) {
  .stories .st-quadro { height: 100svh; margin: 0; border-radius: 0; aspect-ratio: auto; width: 100%; }
  .st-barras { top: calc(10px + env(safe-area-inset-top, 0px)); }
  .st-fechar { top: calc(22px + env(safe-area-inset-top, 0px)); }
  .st-painel { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
/* stories no celular: janela do tamanho exato do vídeo (9:16), com borda mostrando o site atrás, sem cortar o vídeo */
.stories .st-quadro { width: min(calc(100vw - 28px), calc((100svh - 28px) * 9 / 16), 484px) !important; height: auto !important; aspect-ratio: 9 / 16 !important; margin: 0 !important; border-radius: 22px !important; }
.stories[open] { display: grid; place-items: center; }
.stories video { object-fit: contain; background: #000; }
@media (max-width: 559px) { .stories .st-painel { bottom: 10px; } .st-barras { top: 10px; } .st-fechar { top: 20px; } }

/* setas da seção de vídeos: a que não tem para onde ir some (entra e sai animada), em vez de ficar apagada */
.seta-v { transition: opacity .35s ease, transform .35s cubic-bezier(.3,1.4,.5,1), background .2s, color .2s, border-color .2s, visibility 0s linear 0s; }
.seta-v:disabled { opacity: 0 !important; transform: scale(.4) rotate(-20deg); pointer-events: none; visibility: hidden; transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; }

/* título da seção de vídeos maior */
.videos-texto .titulo { font-size: clamp(2.2rem, 7vw, 3.4rem) !important; }
@media (min-width: 1000px) { .videos-grade { grid-template-columns: 420px minmax(0, 1fr); } .videos-texto .titulo { font-size: clamp(2.6rem, 3.9vw, 3.4rem) !important; } }
/* a seta que some também libera o lugar: a outra desliza para o começo */
.seta-v { overflow: hidden; flex: none; transition: opacity .35s ease, transform .35s cubic-bezier(.3,1.4,.5,1), width .35s ease, margin .35s ease, border-width .35s ease, background .2s, color .2s, border-color .2s; }
.seta-v:disabled { width: 0; margin-right: -10px; border-width: 0; transition: opacity .3s ease, transform .3s ease, width .35s ease .1s, margin .35s ease .1s, border-width .35s ease .1s, visibility 0s linear .45s; }
@media (prefers-reduced-motion: reduce) { .seta-v, .seta-v:disabled { transition: none; } }
/* destaque do cartão que veio da primeira dobra */
@keyframes destaque { 0% { box-shadow: 0 0 0 0 rgba(74,111,224,.0); } 25% { box-shadow: 0 0 0 6px rgba(74,111,224,.55); } 100% { box-shadow: 0 0 0 14px rgba(74,111,224,0); } }
.video-card.destaque { animation: destaque 1.1s ease-out 2; }
/* sombra dos cartões sem corte seco: o trilho ganha folga embaixo e à esquerda (compensada na margem) e a sombra fica mais suave */
.videos-trilho { padding-bottom: 70px; margin-bottom: -40px; }
.video-card { box-shadow: 0 22px 44px -26px rgba(7,11,23,.42), 0 2px 6px rgba(0,0,0,.04); }
@media (min-width: 1000px) { .videos-trilho { padding-left: 44px; margin-left: -44px; scroll-padding-inline: 44px 0; } }
/* a borda esquerda do trilho esmaece, em vez de cortar seco o cartão e a sombra ao arrastar */
@media (min-width: 1000px) {
  .videos-trilho { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px); mask-image: linear-gradient(to right, transparent 0, #000 44px); }
}
/* pedido do Erick (20/10): cartões de vídeo sem sombra e o trilho sem o esmaecido na borda (corte seco) */
.video-card { box-shadow: none !important; }
.videos-trilho { -webkit-mask-image: none !important; mask-image: none !important; padding-bottom: 30px; margin-bottom: 0; }

/* ---------- atuação: painel escuro com a foto do advogado e 6 cartões numerados (21/10) ---------- */
.atuacao {
  color: #fff; position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(50% 60% at 15% 20%, rgba(74,111,224,.28), transparent 70%), radial-gradient(40% 50% at 95% 90%, rgba(74,111,224,.18), transparent 70%), linear-gradient(170deg, #121a33 0%, #0a1024 60%, #070b17 100%);
}
.atuacao .titulo { color: #fff; }
.atuacao .lead { color: #aab6d3; }
.at-grade { display: grid; gap: 18px; }
@media (min-width: 1000px) { .at-grade { grid-template-columns: 360px minmax(0, 1fr); gap: 22px; } }
.at-foto { position: relative; margin: 0; border-radius: 28px; overflow: hidden; min-height: 420px; background: #1c274a; border: 1px solid rgba(255,255,255,.12); }
.at-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.at-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,11,23,0) 45%, rgba(7,11,23,.88) 100%); }
.at-foto figcaption { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 22px; display: grid; gap: 4px; }
.at-selo { justify-self: start; margin-bottom: 6px; padding: 5px 11px; border-radius: 999px; font-size: .76rem; font-weight: 600; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.at-foto b { font-size: 1.3rem; letter-spacing: -.02em; }
.at-oab { font-size: .9rem; color: #c6d0e6; }
.at-cards { display: grid; gap: 14px; }
@media (min-width: 640px) { .at-cards { grid-template-columns: 1fr 1fr; } }
.at-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 22px 24px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.at-num { position: absolute; top: 18px; right: 20px; font-size: 1.9rem; font-weight: 200; letter-spacing: -.05em; color: rgba(255,255,255,.28); font-variant-numeric: tabular-nums; }
.at-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px; color: #dbe6ff; background: radial-gradient(circle at 30% 25%, #4a6fe0, #1c274a 75%); box-shadow: 0 8px 22px -8px rgba(74,111,224,.8), inset 0 1px 0 rgba(255,255,255,.25); }
.at-ico svg { width: 22px; height: 22px; }
.at-card small { font-size: .78rem; font-weight: 600; color: #8fb0ff; letter-spacing: .02em; }
.at-card h3 { font-size: 1.18rem; line-height: 1.25; letter-spacing: -.02em; color: #fff; padding-right: 36px; }
.at-card p { font-size: .95rem; line-height: 1.55; color: #b9c3db; }
.at-link { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 600; text-decoration: none; }
.at-link:hover { text-decoration: underline; }
@media (max-width: 999px) { .at-foto { min-height: 0; aspect-ratio: 4 / 5; max-height: 520px; } }
@media (max-width: 759px) { .at-card { padding: 20px 18px; } .at-foto { border-radius: 24px; } }

/* ---------- atuação em cartões (21/10, referência de cartões de cursos) ----------
   3 + 3 no computador; no celular, carrossel que passa para o lado. Botão de cada cartão abre o formulário com o assunto. */
.ac-trilho { display: grid; gap: 18px; }
@media (min-width: 760px) { .ac-trilho { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ac-trilho { grid-template-columns: repeat(3, 1fr); } }
.ac-card { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 14px; border-radius: 26px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 16px 36px -24px rgba(28,39,74,.3); }
.ac-img { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #1c274a; }
.ac-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ac-pilulas { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.ac-pilula { padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #fff; color: var(--preto); box-shadow: 0 4px 12px -6px rgba(0,0,0,.3); }
.ac-pilula--vermelho { background: #e0262f; color: #fff; }
.ac-card h3 { margin: 6px 6px 0; font-size: 1.22rem; line-height: 1.22; letter-spacing: -.02em; }
.ac-card p { margin: 0 6px; font-size: .93rem; line-height: 1.5; color: var(--cinza-t); }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 6px 0; }
.ac-chip { padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 500; }
.ac-chip--azul { background: #e7eeff; color: #2c4aa8; }
.ac-chip--verde { background: #e5f6e9; color: #1d7a35; }
.ac-chip--rosa { background: #fdeaea; color: #b3261e; }
.ac-chip--amarelo { background: #fff4d9; color: #8a5a00; }
.ac-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 6px 0; }
.ac-dados dt { font-size: .76rem; color: var(--cinza-t); }
.ac-dados dd { margin: 2px 0 0; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.ac-pe { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 6px 0; border-top: 1px solid #eef0f4; }
.ac-quem { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; }
.ac-quem img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ac-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; background: var(--azul); color: #fff; font-family: inherit; font-weight: 600; font-size: .92rem; white-space: nowrap; transition: background .2s, transform .2s; }
.ac-btn:hover { background: var(--marinho); transform: translateY(-1px); }
@media (max-width: 759px) {
  /* celular: carrossel que passa para o lado, um cartão inteiro e o próximo aparecendo */
  .ac-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -20px; padding: 4px 20px 20px; scroll-padding-inline: 20px; scrollbar-width: none; }
  .ac-trilho::-webkit-scrollbar { display: none; }
  .ac-card { flex: none; width: 84vw; max-width: 340px; scroll-snap-align: start; }
}
.ac-quem { white-space: nowrap; font-size: .82rem; } .ac-btn { padding: 0 16px; }
/* cartões de atuação sem imagem (21/10): etiquetas no alto e ícone pequeno ao lado do título */
.ac-card { padding: 22px 20px 18px; gap: 12px; }
.ac-pilulas--topo { position: static; margin: 0; }
.ac-pilulas--topo .ac-pilula { background: #f2f3f6; box-shadow: none; }
.ac-pilulas--topo .ac-pilula--vermelho { background: #e0262f; color: #fff; }
.ac-titulo { display: flex; align-items: flex-start; gap: 12px; margin: 2px 0 0 !important; }
.ac-ico { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; color: var(--azul); background: var(--azul-claro); }
.ac-ico svg { width: 22px; height: 22px; }
.ac-titulo > span:last-child { padding-top: 6px; }
.ac-card p, .ac-chips, .ac-dados { margin-left: 0; margin-right: 0; }
.ac-pe { padding-left: 0; padding-right: 0; }
.ac-quem { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- atuação em mosaico (21/10, referência "Advantages"): título à esquerda com marca-texto,
   blocos coloridos e fotos do Danilo à direita. Cada área abre o formulário com o assunto. ---------- */
.mz { display: grid; gap: 28px; }
@media (min-width: 1000px) { .mz { grid-template-columns: 330px minmax(0, 1fr); gap: 40px; align-items: stretch; } }
.mz-lado { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.mz-etiqueta { padding: 6px 14px; border-radius: 999px; background: var(--preto); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mz-titulo { font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -.035em; }
.mz-titulo mark { background: var(--gelo); color: var(--preto); padding: 0 .18em; border-radius: .35em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mz-lead { color: var(--cinza-t); font-size: 1.05rem; max-width: 30ch; }
.mz-seta { margin-top: auto; color: var(--preto); }
.mz-seta svg { width: 44px; height: 44px; transform: rotate(-45deg); stroke-width: 2.4; }
.mz-grade { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; gap: 14px; }
.mz-bloco, .mz-foto, .mz-marca { position: relative; overflow: hidden; border-radius: 24px; }
.mz-bloco {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0; padding: 22px 20px; border: 0; cursor: pointer;
  font-family: inherit; color: var(--preto); background: #fff; transition: transform .25s ease;
}
.mz-bloco b { font-size: 1.22rem; line-height: 1.2; letter-spacing: -.02em; padding-right: 40px; }
.mz-texto { margin-top: auto; font-size: .92rem; line-height: 1.45; max-width: 22ch; }
.mz-ir { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.06); transition: transform .25s ease, background .2s; }
.mz-ir svg { width: 16px; height: 16px; transform: rotate(-45deg); }
@media (hover: hover) { .mz-bloco:hover { transform: translateY(-4px); } .mz-bloco:hover .mz-ir { transform: rotate(45deg); } }
.mz-azul { background: var(--azul); color: #fff; }
.mz-azul .mz-texto { color: #dbe4fb; }
.mz-azul .mz-ir { background: rgba(255,255,255,.18); color: #fff; }
.mz-gelo { background: var(--gelo); }
.mz-cinza { background: #eef0f4; }
.mz-contorno { background: #fff; box-shadow: inset 0 0 0 1.5px var(--preto); }
.mz-texto { color: inherit; opacity: .85; }
.mz-24 { position: absolute; top: 18px; right: 62px; padding: 3px 9px; border-radius: 999px; background: #e0262f; color: #fff; font-size: .74rem; font-weight: 800; transform: rotate(-8deg); }
/* a "chavinha" da referência, no bloco claro */
.mz-trilha { position: absolute; left: 20px; bottom: 20px; width: 64px; height: 22px; border-radius: 999px; background: var(--preto); }
.mz-trilha::after { content: ""; position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.mz-gelo .mz-texto { margin-bottom: 34px; }
.mz-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.mz-marca { display: grid; place-items: center; background: linear-gradient(160deg, #1c274a, #0a1024); }
.mz-marca img { height: 64%; width: auto; opacity: .9; }
@media (max-width: 999px) {
  .mz-grade { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .mz-marca { display: none; }            /* 8 blocos: 4 fileiras de 2, sem bloco sozinho */
  .mz-seta { display: none; }
}
@media (max-width: 759px) {
  .mz { padding: 0 20px; }
  .mz-grade { grid-auto-rows: minmax(184px, auto); gap: 10px; }
  .mz-bloco { padding: 16px 14px; border-radius: 20px; }
  .mz-bloco b { font-size: 1.02rem; padding-right: 30px; }
  .mz-texto { font-size: .82rem; margin-top: 14px; }
  .mz-ir { top: 12px; right: 12px; width: 28px; height: 28px; }
  .mz-24 { right: 46px; top: 14px; }
  .mz-foto, .mz-marca { border-radius: 20px; }
  .mz-gelo .mz-texto { margin-bottom: 30px; }
  .mz-trilha { left: 14px; bottom: 14px; }
}
/* selo 24h embaixo do título, sem cobrir o texto */
.mz-24 { position: static; order: 1; align-self: flex-start; margin-top: 10px; transform: rotate(-4deg); }
.mz-bloco b { order: 0; } .mz-texto { order: 2; }
.mz-marca img { opacity: 1; }

/* ---------- atuação no estilo da referência "AI Employee" (21/10): fundo escuro, título centrado com marca-texto,
   foto do Danilo no centro sobre um disco e as 6 áreas em cartões ao redor. Altura limitada a ~75% da tela. ---------- */
.atuacao-fl { position: relative; overflow: hidden; color: #fff; background: radial-gradient(40% 60% at 50% 70%, rgba(74,111,224,.16), transparent 70%), #05070f; padding-top: clamp(40px, 6vh, 64px); }
.fl { display: flex; flex-direction: column; align-items: center; }
.fl-titulo { text-align: center; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 600; max-width: 18em; }
.fl-titulo mark { background: #dfe6ff; color: var(--preto); padding: 0 .28em; border-radius: 999px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fl-palco { position: relative; width: 100%; display: grid; grid-template-columns: 1fr minmax(300px, 400px) 1fr; align-items: end; gap: 0; margin-top: clamp(16px, 3vh, 32px); height: min(64vh, 600px); min-height: 480px; }
.fl-foto { position: relative; margin: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.fl-disco { position: absolute; left: 50%; bottom: 8%; width: 118%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3a3f4d, #1d212b 70%); }
.fl-foto img { position: relative; z-index: 1; height: 100%; width: auto; max-width: none; object-fit: cover;
  -webkit-mask-image: radial-gradient(70% 85% at 50% 40%, #000 55%, transparent 78%); mask-image: radial-gradient(70% 85% at 50% 40%, #000 55%, transparent 78%); }
.fl-foto figcaption { position: absolute; z-index: 2; bottom: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fl-col { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding-bottom: 40px; }
.fl-esq { align-items: flex-end; margin-right: -40px; }
.fl-dir { align-items: flex-start; margin-left: -40px; }
.fl-esq .fl-card:nth-child(2) { margin-right: 56px; }
.fl-dir .fl-card:nth-child(2) { margin-left: 56px; }
.fl-card {
  position: relative; width: min(290px, 100%); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  padding: 18px 20px; border: 0; border-radius: 22px; cursor: pointer; font-family: inherit; color: var(--preto);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.7); transition: transform .25s ease;
}
@media (hover: hover) { .fl-card:hover { transform: translateY(-4px); } }
.fl-card b { font-size: 1.08rem; line-height: 1.25; letter-spacing: -.015em; }
.fl-card > span:last-child { font-size: .88rem; line-height: 1.45; color: #4a4a4f; }
.fl-branco { background: #fff; }
.fl-claro { background: linear-gradient(140deg, #f4f6fb, #dfe6f5); }
.fl-gelo { background: var(--gelo); }
.fl-gelo > span:last-child { color: #26304f; }
.fl-vidro { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.fl-vidro > span:last-child { color: #c6cde0; }
.fl-check { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--preto); color: #fff; margin-bottom: 4px; }
.fl-check svg { width: 15px; height: 15px; }
.fl-24 { position: absolute; top: 18px; right: 18px; padding: 3px 9px; border-radius: 999px; background: #e0262f; color: #fff; font-size: .74rem; font-weight: 800; transform: rotate(-6deg); }
.fl-claro b { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-claro b i { font-style: normal; padding: 4px 12px; border-radius: 999px; background: var(--preto); color: #fff; }
@media (max-width: 999px) {
  .fl-palco { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .fl-foto { order: -1; height: 380px; }
  .fl-col { height: auto; padding-bottom: 0; margin: 0 !important; align-items: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .fl-esq .fl-card:nth-child(2), .fl-dir .fl-card:nth-child(2) { margin: 0; }
  .fl-card { width: auto; }
  .fl-dir { margin-top: 10px !important; padding-bottom: 48px; }
  .fl-esq { margin-top: -30px !important; }
}
@media (max-width: 559px) {
  .fl-foto { height: 320px; }
  .fl-card { padding: 14px; border-radius: 18px; }
  .fl-card b { font-size: .96rem; }
  .fl-card > span:last-child { font-size: .8rem; }
  .fl-24 { top: 12px; right: 12px; }
}
/* foto recortada (sem fundo) sobre o disco, igual à referência */
.fl-foto img { -webkit-mask-image: linear-gradient(#000 82%, transparent 100%) !important; mask-image: linear-gradient(#000 82%, transparent 100%) !important; height: 92%; }
.fl-disco { bottom: 6%; width: 104%; background: radial-gradient(circle at 50% 30%, #2c3550, #141a2c 72%); }
@media (max-width: 999px) {
  /* celular/tablet: foto em cima, os 6 cartões em 2 colunas (3 fileiras), sem cartão sozinho */
  .fl-palco { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fl-foto { grid-column: 1 / -1; height: 360px; }
  .fl-col { display: contents; }
  .fl-disco { width: min(88%, 360px); bottom: 4%; }
  .atuacao-fl { padding-bottom: 48px; }
}
/* altura da seção no computador em ~70–75% da tela */
@media (min-width: 1000px) { .fl-palco { height: min(56vh, 520px); min-height: 440px; } }
@media (max-width: 999px) { .fl-palco .fl-card { margin: 0 !important; } .fl-esq, .fl-dir { margin: 0 !important; } }
@media (max-width: 999px) { .fl-palco { align-items: stretch; } .fl-palco .fl-card { align-self: stretch; } }
/* foto do Danilo maior (21/10) */
@media (min-width: 1000px) {
  .fl-palco { grid-template-columns: 1fr minmax(340px, 470px) 1fr; height: min(60vh, 560px); }
  .fl-foto img { height: 100% !important; }
  .fl-disco { width: 100%; }
}
@media (max-width: 999px) { .fl-foto { height: 430px; } }
@media (max-width: 559px) { .fl-foto { height: 400px; } }
@media (min-width: 1000px) { .atuacao-fl { padding-top: 30px; } .fl-palco { margin-top: 6px; height: min(58vh, 540px); } }

/* ---------- espaçamento padrão entre seções (21/10): mesmo respiro em cima e embaixo ---------- */
.videos { padding: clamp(72px, 10vw, 128px) 0 !important; }
.videos-trilho { padding-bottom: 6px !important; margin-bottom: 0 !important; }

/* "Alguém foi preso?": mais compacta, ~80% da tela no computador — direitos em 2 x 2 */
@media (min-width: 900px) {
  #direitos .lead { margin-bottom: 36px; }
  #direitos .fatores { grid-template-columns: 1fr 1fr; max-width: 1040px; gap: 14px; }
  #direitos .fator { gap: 24px; padding: 22px 28px; }
  #direitos .fator b { font-size: clamp(3rem, 4.6vw, 4.2rem); }
  /* cores em xadrez: cinza, azul / azul, cinza */
  #direitos .fator:nth-child(3) { background: linear-gradient(120deg, #e3ebff 0%, #cddcff 55%, #b9cdfb 100%); }
  #direitos .fator:nth-child(3) p { color: #26304f; }
  #direitos .fator:nth-child(4) { background: #f2f2f4; }
  #direitos .fator:nth-child(4) p { color: #4a4a4f; }
  #direitos .centro { margin-top: 20px; }
}
@media (min-width: 900px) {
  #direitos .titulo { font-size: clamp(2.2rem, 3.4vw, 2.9rem); max-width: none; white-space: nowrap; }
  #direitos .lead { max-width: none; margin-bottom: 30px; }
  #direitos .fator { padding: 18px 26px; gap: 20px; }
  #direitos .fator b { font-size: clamp(2.8rem, 4vw, 3.4rem); }
  #direitos .fator h3 { font-size: 1.2rem; }
  #direitos .fator p { font-size: .95rem; }
}
@media (min-width: 900px) and (max-width: 1099px) { #direitos .titulo { white-space: normal; } }

/* ---------- 24 horas: relógio vermelho de 7 segmentos em fundo preto, com reflexo (21/10) ---------- */
.relogio-sec { background: #000; color: #fff; }
.relogio-sec .titulo { color: #fff; }
.relogio-sec .lead { color: #a1a1a6; }
.relogio-sec .link-seta { color: #ff4d4d; }
.relogio { display: inline-flex; flex-direction: column; align-items: center; margin-bottom: clamp(28px, 4vw, 44px); }
.rl-tela, .rl-reflexo { display: flex; align-items: center; gap: clamp(4px, .8vw, 10px); transform: skewX(-7deg); }
.rl-dig { width: clamp(38px, 7.2vw, 96px); height: auto; }
.rl-dois { width: clamp(12px, 2.2vw, 28px); height: auto; }
.rl-tela .ligado { fill: #ff2b2b; }
.rl-tela { filter: drop-shadow(0 0 6px rgba(255,43,43,.9)) drop-shadow(0 0 22px rgba(255,43,43,.55)); }
.apagado { fill: rgba(255,43,43,.07); }
.rl-reflexo { margin-top: 6px; transform: skewX(-7deg) scaleY(-1); opacity: .28; filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 62%); mask-image: linear-gradient(to top, #000 0%, transparent 62%); height: auto; }
.rl-reflexo .ligado { fill: #ff2b2b; }
.rl-fallback { font: 700 clamp(3rem, 12vw, 9rem)/1 ui-monospace, monospace; color: #ff2b2b; }
/* a parte apagada do reflexo não ocupa espaço; relógio um pouco menor para a seção ficar perto de 80% da tela */
.rl-dig { width: clamp(36px, 6.4vw, 84px); }
.rl-reflexo { margin-bottom: calc(-0.42 * clamp(60px, 10.7vw, 140px)); }
.relogio { margin-bottom: clamp(36px, 4vw, 48px); }
#custodia .lead { max-width: 60ch; margin-bottom: 14px; } #custodia .titulo { margin-bottom: 12px; }
#custodia .titulo .vermelho { color: #ff3b3b; font-weight: inherit; }

/* ---------- carteira da OAB estilizada (21/10): no lugar da carta. A capa abre quando a seção aparece. ---------- */
.carteira { --w: clamp(150px, 41vw, 232px); --h: calc(var(--w) * 1.42); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cart-livro { position: relative; width: calc(var(--w) * 2); height: var(--h); perspective: 1800px; transform: translateX(calc(var(--w) * -.5)); transition: transform 1.1s cubic-bezier(.4,.1,.2,1) .25s; }
.cart-pagina, .cart-capa { position: absolute; top: 0; left: var(--w); width: var(--w); height: var(--h); }
.cart-pagina {
  border-radius: 4px 12px 12px 4px; padding: calc(var(--w) * .08); color: #2a2a2c; overflow: hidden;
  background: linear-gradient(90deg, rgba(0,0,0,.08), transparent 8%), repeating-linear-gradient(0deg, transparent 0 22px, rgba(122,20,24,.05) 22px 23px), #f7f1e3;
  box-shadow: 0 30px 50px -24px rgba(60,10,12,.55), 0 2px 4px rgba(0,0,0,.08);
  display: flex; flex-direction: column; gap: calc(var(--w) * .045);
}
.cart-cab { font: 700 calc(var(--w) * .043)/1.2 Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: #7a1418; border-bottom: 1px solid rgba(122,20,24,.2); padding-bottom: 6px; }
.cart-pessoa { display: flex; align-items: center; gap: 8px; }
.cart-pessoa img { width: calc(var(--w) * .28); height: calc(var(--w) * .34); object-fit: cover; border-radius: 3px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); flex: none; }
.cart-pessoa small, .cart-dados dt { display: block; font-size: calc(var(--w) * .042); color: #8a8070; text-transform: uppercase; letter-spacing: .06em; }
.cart-pessoa b { display: block; font-size: calc(var(--w) * .062); line-height: 1.2; color: #1d1d1f; }
.cart-dados { display: grid; gap: calc(var(--w) * .03); margin: 0; }
.cart-dados dd { margin: 0; font-size: calc(var(--w) * .066); font-weight: 700; font-variant-numeric: tabular-nums; color: #1d1d1f; }
.cart-ok::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .35em; border-radius: 50%; background: #1fa855; vertical-align: .08em; }
.cart-soc { margin-top: auto; font-size: calc(var(--w) * .04); line-height: 1.35; color: #8a8070; }
.cart-selo { position: absolute; right: calc(var(--w) * .05); bottom: calc(var(--w) * .2); width: calc(var(--w) * .3); height: calc(var(--w) * .3); color: #2c4aa8; opacity: .75; transform: rotate(12deg); mix-blend-mode: multiply; }
.cart-selo svg { width: 100%; height: 100%; }
.cart-capa { transform-origin: left center; transform-style: preserve-3d; transition: transform 1.3s cubic-bezier(.4,.1,.2,1) .25s; z-index: 2; }
.cart-frente, .cart-verso { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4px 12px 12px 4px; }
.cart-frente {
  display: flex; flex-direction: column; align-items: center; padding: calc(var(--w) * .1) calc(var(--w) * .08); color: #e2bf72;
  background: radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.08), transparent 60%), linear-gradient(160deg, #8e1c22, #6e1217 60%, #5a0d12);
  box-shadow: 0 30px 50px -22px rgba(60,10,12,.7), inset 0 0 0 1px rgba(255,255,255,.06), inset 3px 0 6px rgba(0,0,0,.25);
}
.cart-arco { width: 92%; height: auto; overflow: visible; }
.cart-arco text { font: 700 13px Georgia, serif; letter-spacing: 1.2px; fill: #e2bf72; }
.cart-emblema { width: calc(var(--w) * .36); height: calc(var(--w) * .36); margin-top: calc(var(--w) * .02); display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(226,191,114,.7); }
.cart-emblema svg { width: 62%; height: 62%; }
.cart-tipo { margin-top: auto; font: 700 calc(var(--w) * .11)/1 Georgia, serif; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.cart-nome { margin-top: calc(var(--w) * .03); font: 400 calc(var(--w) * .056) Georgia, serif; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.cart-verso {
  transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--w) * .04); text-align: center;
  border-radius: 12px 4px 4px 12px; color: #e2bf72; background: linear-gradient(200deg, #7d171c, #5a0d12); box-shadow: inset -3px 0 8px rgba(0,0,0,.35);
  padding: calc(var(--w) * .1);
}
.cart-v1 { font: 700 calc(var(--w) * .2)/1 Georgia, serif; letter-spacing: .1em; }
.cart-v2 { font: 400 calc(var(--w) * .055)/1.3 Georgia, serif; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.cart-v3 { margin-top: calc(var(--w) * .04); padding: 4px 10px; border: 1px solid rgba(226,191,114,.6); border-radius: 999px; font-size: calc(var(--w) * .05); font-variant-numeric: tabular-nums; }
/* abrir: a capa gira para a esquerda e o livro centraliza aberto */
.carteira.aberta .cart-capa, html:not(.js) .cart-capa { transform: rotateY(-180deg); }
.carteira.aberta .cart-livro, html:not(.js) .cart-livro { transform: none; }
.js .carteira.revela { opacity: 1; transform: none; }
.cart-acoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; }
@media (prefers-reduced-motion: reduce) { .cart-capa, .cart-livro { transition: none; } .carteira .cart-capa { transform: rotateY(-180deg); } .carteira .cart-livro { transform: none; } }
.cart-arco text { font-size: 11.5px; letter-spacing: .6px; }

/* carteira em destaque (21/10): maior, coluna de texto mais enxuta, e respiro no alto da capa */
.cart-frente { padding-top: calc(var(--w) * .16); }
.cart-cab { margin-top: calc(var(--w) * .02); }
@media (min-width: 960px) {
  #quem-atende .confirma { grid-template-columns: .78fr 1.22fr; gap: 56px; }
  #quem-atende .titulo { font-size: clamp(1.9rem, 3vw, 2.5rem); }
  #quem-atende .confirma-texto { font-size: 1rem; }
  #quem-atende .regras { margin-top: 22px; }
  #quem-atende .regras li { padding: 14px 0; grid-template-columns: 40px 1fr; gap: 12px; }
  #quem-atende .regra-ico { width: 34px; height: 34px; }
  #quem-atende .regras b { font-size: 1rem; }
  #quem-atende .regras p { font-size: .9rem; }
  .carteira { --w: clamp(220px, 21vw, 290px); }
}
@media (max-width: 959px) { .carteira { --w: clamp(150px, 45vw, 260px); } }

/* abertura mais lenta: a capa fica à mostra um tempo e só então abre (21/10) */
.cart-capa { transition: transform 1.9s cubic-bezier(.45,.05,.2,1) 0s; }
.cart-livro { transition: transform 1.7s cubic-bezier(.45,.05,.2,1) .1s; }
/* meio-termo (21/10): abre em ~1,2 s */
.cart-capa { transition: transform 1.2s cubic-bezier(.45,.05,.2,1) 0s; }
.cart-livro { transition: transform 1.1s cubic-bezier(.45,.05,.2,1) .05s; }

/* ---------- ilustrações do direito no fundo, bem apagadas (21/10): balança, coluna, martelo, livro e o monograma ---------- */
#videos, #direitos, #quem-atende, #perguntas { position: relative; overflow: hidden; isolation: isolate; }
.deco { position: absolute; z-index: -1; pointer-events: none; user-select: none; opacity: .07; width: clamp(240px, 30vw, 420px); height: auto; }
.deco--balanca { left: -60px; bottom: 20px; }
.deco--coluna { right: -40px; top: 60px; width: clamp(220px, 24vw, 340px); }
.deco--martelo { left: -50px; bottom: 30px; }
.deco--livro { right: -40px; top: 40px; }
.deco--marca-esq { left: -6%; top: 50%; transform: translateY(-50%); width: auto; height: 110%; opacity: .035; }
@media (max-width: 759px) {
  .deco { opacity: .05; width: 220px; }
  .deco--marca-esq { height: 70%; opacity: .03; }
  .deco--balanca { left: auto; right: -50px; top: 30px; bottom: auto; }
}

/* teste (21/10): título da primeira dobra em fonte serifada de escritório (Playfair Display), sem itálico e com peso firme */
.abertura--leque h1 { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.015em; line-height: 1.08; }

/* ===== tipografia de escritório (21/10, teste do Erick) =====
   Títulos em Playfair Display; etiquetas e a capa da carteira em Cinzel (letras de inscrição).
   Para voltar à fonte anterior, apagar este bloco inteiro. */
:root { --serifa: "Playfair Display", Georgia, "Times New Roman", serif; --inscricao: "Cinzel", "Trajan Pro", Georgia, serif; }
h1, h2, .titulo, .fl-titulo, .mz-titulo, .form-pop h2, .artigo h2 { font-family: var(--serifa); font-weight: 700; letter-spacing: -.012em; }
.titulo, .fl-titulo { line-height: 1.12; }
.fator h3, .fl-card b, .regras b, .st-titulo, .faq summary { font-family: var(--serifa); font-weight: 600; letter-spacing: 0; }
.faq summary { font-size: 1.08rem; }
.cart-cab, .cart-arco text, .cart-tipo, .cart-nome, .cart-v1, .cart-v2, .at-selo, .fl-foto figcaption { font-family: var(--inscricao); letter-spacing: .08em; }
.cart-arco text { letter-spacing: .4px; font-size: 11px; }
.rl-fallback { font-family: ui-monospace, monospace; }
/* teste (21/10): título da primeira dobra em Cinzel */
.abertura--leque h1 { font-family: var(--inscricao) !important; font-weight: 700; letter-spacing: .01em; line-height: 1.1; font-size: clamp(1.8rem, min(4.6vw, 5.8svh), 3.6rem); }
@media (max-width: 420px) { .abertura--leque h1 { font-size: clamp(1.5rem, 7.4vw, 1.9rem); } }

/* ===== Cinzel na LP toda (21/10, escolha do Erick) — títulos e nomes dos cartões =====
   Cinzel é mais larga (só maiúsculas), por isso os títulos ficam um pouco menores. */
:root { --serifa: "Cinzel", "Trajan Pro", Georgia, serif; }
h1, h2, .titulo, .fl-titulo, .mz-titulo, .form-pop h2, .artigo h2, .fator h3, .fl-card b, .regras b, .st-titulo, .faq summary, .ac-card h3, .vc-legenda { font-family: var(--inscricao); letter-spacing: .01em; }
.titulo { font-size: clamp(1.8rem, 4.4vw, 3rem); }
.videos-texto .titulo { font-size: clamp(1.9rem, 6vw, 2.8rem) !important; }
@media (min-width: 1000px) { .videos-texto .titulo { font-size: clamp(2.1rem, 3.1vw, 2.7rem) !important; } }
.fl-titulo { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
#direitos .titulo { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
#quem-atende .titulo { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.faq summary { font-size: 1rem; }
.fator h3 { font-size: 1.1rem; }
.form-pop h2 { font-size: clamp(1.3rem, 3.6vw, 1.6rem); }
#perguntas .titulo { white-space: nowrap; font-size: clamp(1.4rem, 7vw, 3rem); }
.abertura--leque .sub .vermelho { color: inherit; }
.leque-card b { font-family: var(--inscricao); letter-spacing: .02em; }
.st-som { position: absolute; z-index: 5; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 12px 20px; border: 0; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font: 600 .95rem/1 inherit; font-family: inherit; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .st-som[hidden] { display: none; }
/* martelo mais para fora, para não ficar atrás dos itens de "Quem atende" */
.deco--martelo { left: -130px; bottom: -10px; opacity: .06; }
@media (max-width: 759px) { .deco--martelo { left: auto; right: -70px; bottom: auto; top: 20px; } }
.dock { overflow: visible; } .dock-24 { position: absolute; top: -9px; right: -12px; padding: 3px 8px; border-radius: 999px; background: #e0262f; color: #fff; font-size: .72rem; font-weight: 800; line-height: 1.2; transform: rotate(-12deg); box-shadow: 0 6px 14px -6px rgba(224,38,47,.8); pointer-events: none; }
/* marca d'água com altura fixa: não estica quando uma pergunta abre */
.deco--marca-esq { height: clamp(460px, 62vw, 860px) !important; top: 60px !important; transform: none !important; }
@media (max-width: 759px) { .deco--marca-esq { height: 420px !important; } }
.faq details { overflow: hidden; }
.faq details p { opacity: 1; transition: opacity .3s ease; }
.faq details.fechando p { opacity: 0; }

/* ===== carteira da OAB mais realista (21/10): couro granulado, costura, dourado em relevo, brilho passando,
   papel de segurança com microtexto e marca d'água, carimbo seco na foto, folhas empilhadas e leve inclinação ===== */
:root {
  --couro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ouro: linear-gradient(180deg, #f7e6ad 0%, #d4a955 46%, #a4732c 56%, #ebc97f 100%);
}
/* leve inclinação, como uma carteira apoiada na mesa, com sombra de contato */
.cart-livro { transform: translateX(calc(var(--w) * -.5)) rotateX(7deg) rotateZ(-1.5deg); transform-style: preserve-3d; }
.carteira.aberta .cart-livro, html:not(.js) .cart-livro { transform: rotateX(7deg) rotateZ(-1.5deg); }
.cart-livro::after { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: calc(var(--w) * -.09); height: calc(var(--w) * .16); border-radius: 50%; background: radial-gradient(closest-side, rgba(30,8,10,.35), transparent); filter: blur(6px); }
/* capa de couro */
.cart-frente, .cart-verso { background-blend-mode: soft-light, normal, normal; }
.cart-frente {
  background:
    var(--couro),
    radial-gradient(120% 80% at 28% 18%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(160deg, #8f1d24 0%, #721319 55%, #560c11 100%);
  background-size: 180px 180px, auto, auto;
  box-shadow: 0 34px 50px -24px rgba(50,8,10,.75), inset 0 0 0 1px rgba(255,255,255,.07), inset 6px 0 10px -4px rgba(0,0,0,.45), inset -1px 0 0 rgba(255,255,255,.08);
}
.cart-verso {
  background: var(--couro), linear-gradient(200deg, #7a161c, #520b10);
  background-size: 180px 180px, auto;
}
/* costura dourada em volta e lombada */
.cart-frente::before, .cart-verso::before {
  content: ""; position: absolute; inset: calc(var(--w) * .035); border-radius: 3px 9px 9px 3px; pointer-events: none;
  border: 1.5px dashed rgba(226,191,114,.38); box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.cart-verso::before { border-radius: 9px 3px 3px 9px; }
.cart-frente { overflow: hidden; }
.cart-frente::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,240,200,.16) 45%, rgba(255,255,255,.04) 52%, transparent 60%);
  background-size: 260% 100%; background-position: 130% 0; animation: brilho-capa 6s ease-in-out infinite;
}
@keyframes brilho-capa { 0%, 60% { background-position: 130% 0; } 100% { background-position: -40% 0; } }
/* letras em dourado com relevo (estampadas no couro) */
.cart-tipo, .cart-nome, .cart-v1, .cart-v2 {
  background: var(--ouro); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 -1px 0 rgba(255,230,170,.12));
  text-shadow: none;
}
.cart-arco text { fill: url(#ouro-arco); }
.cart-arco { filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)); }
.cart-emblema { border-color: rgba(226,191,114,.75); box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 1px 0 rgba(255,230,170,.15); color: #e0bb6c; filter: drop-shadow(0 1px 0 rgba(0,0,0,.5)); }
.cart-v3 { color: #e8c67c; border-color: rgba(226,191,114,.55); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
/* página de papel de segurança: textura, linhas de fundo em guilhoché, folhas empilhadas na borda */
.cart-pagina {
  background:
    var(--grao),
    repeating-radial-gradient(circle at 78% 34%, rgba(28,39,74,.045) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(122,20,24,.045) 22px 23px),
    linear-gradient(90deg, rgba(0,0,0,.1), transparent 9%),
    #f6efdf;
  background-size: 160px 160px, auto, auto, auto, auto;
  box-shadow: 1px 1px 0 #ece3cf, 2px 2px 0 #e2d7bf, 3px 3px 0 #ece3cf, 4px 4px 0 #d9cdb2, 0 34px 50px -24px rgba(60,10,12,.55);
  isolation: isolate;
}
.cart-marca { position: absolute; z-index: -1; right: 8%; top: 22%; height: 52%; width: auto; opacity: .05; pointer-events: none; }
.cart-micro {
  position: absolute; left: 0; right: 0; bottom: calc(var(--w) * .03); white-space: nowrap; overflow: hidden;
  font-size: calc(var(--w) * .022); letter-spacing: .12em; color: rgba(122,20,24,.35); text-align: center; pointer-events: none;
}
.cart-soc { margin-bottom: calc(var(--w) * .05); }
/* foto colada com carimbo seco em relevo no canto */
.cart-foto { position: relative; flex: none; display: block; }
.cart-foto img { display: block; filter: saturate(.92) contrast(1.02); }
.cart-foto::after {
  content: ""; position: absolute; right: -16%; bottom: -14%; width: 52%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 52%, rgba(255,255,255,.35) 54%, transparent 58%, rgba(0,0,0,.08) 62%, transparent 66%);
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.4), inset -1px -1px 1px rgba(0,0,0,.12); mix-blend-mode: overlay;
}
.cart-dados dd { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.cart-dados div { border-bottom: 1px dotted rgba(122,20,24,.18); padding-bottom: 2px; }
@media (prefers-reduced-motion: reduce) { .cart-frente::after { animation: none; } }
/* sombra de contato acompanha a carteira: só embaixo da capa quando fechada */
.cart-livro::after { left: 53%; right: 3%; transition: left 1.1s cubic-bezier(.45,.05,.2,1); }
.carteira.aberta .cart-livro::after, html:not(.js) .cart-livro::after { left: 5%; right: 5%; }

/* ===== atuação mais realista (21/10): luz de estúdio, contorno de luz na foto, grão de filme,
   cartões com profundidade (inclinação 3D, sombras em camadas, flutuação e paralaxe com o mouse) ===== */
.atuacao-fl {
  isolation: isolate;
  background:
    radial-gradient(38% 55% at 50% 62%, rgba(74,111,224,.30), transparent 70%),
    radial-gradient(70% 60% at 50% 40%, rgba(30,40,80,.55), transparent 75%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.65) 100%),
    #04060d;
}
/* grão de filme por cima de tudo (bem leve) */
.atuacao-fl::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* fundo da foto como um disco iluminado por trás */
.fl-disco {
  background: radial-gradient(circle at 50% 32%, #46517a 0%, #252d48 38%, #121829 70%) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.10), inset 0 -40px 80px rgba(0,0,0,.55), 0 0 120px 10px rgba(74,111,224,.22);
}
/* contorno de luz azul no Danilo, como luz de recorte de estúdio */
.fl-foto img { filter: drop-shadow(0 0 1px rgba(170,195,255,.55)) drop-shadow(-6px -2px 18px rgba(110,145,255,.28)) drop-shadow(6px 0 22px rgba(74,111,224,.18)) contrast(1.04) saturate(1.02); }
/* sombra de chão sob a foto */
.fl-foto::after { content: ""; position: absolute; z-index: 0; left: 18%; right: 18%; bottom: -10px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); filter: blur(8px); }
/* cartões com sombra em camadas, brilho no topo e borda de luz */
.fl-card {
  box-shadow: 0 1px 1px rgba(0,0,0,.18), 0 10px 20px -8px rgba(0,0,0,.45), 0 34px 60px -28px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.55);
  transform: perspective(900px) rotateY(var(--ry, 0deg)) translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
  will-change: transform;
}
.fl-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,.35) 0%, transparent 35%); mix-blend-mode: soft-light; }
.fl-vidro { box-shadow: 0 10px 30px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.08); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
@media (min-width: 1000px) {
  .fl-esq .fl-card { --ry: 9deg; }
  .fl-dir .fl-card { --ry: -9deg; }
  /* flutuação leve, cada cartão no seu tempo */
  .fl-card { animation: flutua-card 7s ease-in-out infinite; }
  .fl-esq .fl-card:nth-child(2), .fl-dir .fl-card:nth-child(1) { animation-delay: -2.3s; }
  .fl-esq .fl-card:nth-child(3), .fl-dir .fl-card:nth-child(2) { animation-delay: -4.6s; }
  @media (hover: hover) { .fl-card:hover { --ry: 0deg; } }
}
@keyframes flutua-card { 50% { translate: 0 -7px; } }
@media (prefers-reduced-motion: reduce) { .fl-card { animation: none; transition: none; } }

/* foto IA do Danilo (21/10): a foto segue a altura do palco no computador */
@media (min-width: 1000px) { .fl-foto { height: min(58vh, 540px); min-height: 440px; align-self: center; } }
/* mãos (aliança e relógio) visíveis: degradê só no fim da foto e, no celular, legenda abaixo das mãos */
.fl-foto img { -webkit-mask-image: linear-gradient(#000 88%, transparent 100%) !important; mask-image: linear-gradient(#000 88%, transparent 100%) !important; }
@media (max-width: 999px) { .fl-foto { align-items: flex-start; } .fl-foto figcaption { bottom: 0; } }
/* sem brilho azul atrás da foto (21/10): disco grafite discreto, como fundo de estúdio, e sem auréola no Danilo */
.atuacao-fl { background: radial-gradient(70% 60% at 50% 40%, rgba(30,40,80,.40), transparent 75%), radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.65) 100%), #04060d; }
.fl-disco { background: radial-gradient(circle at 50% 28%, #2b303c 0%, #1a1e28 45%, #10131b 72%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -40px 80px rgba(0,0,0,.5) !important; }
.fl-foto img { filter: contrast(1.03); }
/* Danilo um pouco maior no computador (21/10) */
@media (min-width: 1000px) {
  .fl-palco { grid-template-columns: 1fr minmax(360px, 520px) 1fr; height: clamp(520px, 68vh, 620px); }
  .fl-foto { height: clamp(520px, 68vh, 620px); }
}
@media (min-width: 1000px) and (max-width: 1279px) { .fl-palco { grid-template-columns: 1fr minmax(340px, 470px) 1fr; } }
/* telas de 1000–1199px: cartões laterais cabiam cortados na borda; coluna da foto e cartões um pouco mais estreitos */
@media (min-width: 1000px) and (max-width: 1199px) { .fl-palco { grid-template-columns: 1fr minmax(320px, 440px) 1fr; } .fl-card { width: min(262px, 100%); } .fl-esq .fl-card:nth-child(2) { margin-right: 36px; } .fl-dir .fl-card:nth-child(2) { margin-left: 36px; } }
/* sombra leve em cada cartão da primeira dobra (21/10): cada um projeta sombra no de trás, dando profundidade */
.leque-card { box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 2px 6px rgba(12,19,41,.14), 0 16px 34px -10px rgba(12,19,41,.42); }

/* ---------- aviso de cookies (21/10): canto de baixo, discreto, acima do botão do WhatsApp ---------- */
.cookies { position: fixed; z-index: 60; left: 16px; bottom: 16px; max-width: 420px; display: grid; gap: 12px; padding: 16px 18px; border-radius: 18px; background: rgba(10,15,30,.96); color: #dfe4f0; font-size: .86rem; line-height: 1.5; box-shadow: 0 18px 40px -12px rgba(0,0,0,.45); }
.cookies[hidden] { display: none; }
.cookies p { margin: 0; }
.cookies a { color: var(--gelo); }
.cookies-acoes { display: flex; gap: 8px; justify-content: flex-end; }
.cookies-acoes button { min-height: 44px; padding: 0 18px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; }
.cookies-nao { background: transparent; color: #dfe4f0; border: 1px solid rgba(198,215,255,.3); }
.cookies-sim { background: #fff; color: var(--marinho); border: 0; }
.cookies-acoes button:focus-visible { outline: 2px solid var(--gelo); outline-offset: 2px; }
@media (max-width: 559px) { .cookies { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: none; } }