/* =============================================================================
   Deamici Ferreira Advogados · home.css
   A home "Acender a luz". Carrega depois do style.css,
   que continua servindo header, menu, rodapé, formulário e as páginas internas.
   Tudo aqui vale só na home (body.home, .cine, .lx-*, .fio, .sit-*).

   01 Tokens do pacote                 09 Como funciona (caminho que acende)
   02 Base, ambiente e fio de luz      10 Compromissos
   03 Hero: estrutura                  11 Quem conduz o seu caso
   04 Hero estático                    12 O escritório (monograma e poeira)
   05 Hero scrub: palco e câmera       13 Dúvidas
   06 Faixas e legibilidade            14 Contato
   07 Os cinco portões                 15 Movimento, pausa e movimento reduzido
   08 Situações
   ========================================================================== */


/* 01 · Tokens do pacote (mapeados para os do style.css quando coincidem) */
.home{
  --canvas:#0A1320;                     /* fundo escuro: azul-marinho profundo tingido */
  --panel:#101D30;                      /* superfícies elevadas no escuro */
  --paper:#F3EEE6;                      /* seções claras: a parede iluminada */
  --ink:#0E1B2C;                        /* texto sobre --paper (15,6:1) */
  --accent:var(--gold-500);             /* #C09A5F, o dourado da marca = a cor do LED */
  --accent-hover:var(--gold-300);       /* #D6B886 */
  --accent-muted:rgba(192,154,95,.28);  /* fio de luz, bordas, brilhos */
  --accent-ink:var(--gold-700);         /* #7A5A28 sobre --paper: 5,5:1 */
  --text-primary:#F2ECE2;               /* sobre --canvas: 16,4:1 */
  --text-secondary:#B8B0A3;             /* sobre --canvas: 8,7:1; sobre --panel: 7,9:1 */
  --text-subtle:#9A9285;                /* sobre --canvas: 6,1:1 */
  --text-over:#EDE6DA;                  /* textos pequenos sobre a filmagem, com scrim */

  /* sombra de texto em três camadas (borda justa, brilho médio, queda larga) */
  --tshadow:0 1px 2px rgba(5,8,14,.95), 0 3px 12px rgba(5,8,14,.78), 0 10px 44px rgba(5,8,14,.8);

  /* as duas curvas de movimento da home */
  --ease-a:cubic-bezier(.22,1,.36,1);   /* saída: entradas, hovers, luzes acendendo */
  --ease-b:cubic-bezier(.65,0,.35,1);   /* ida e volta: traços, derivas, respiração */
}


/* 02 · Base, ambiente e fio de luz */
body.home{ background-color:var(--canvas); }
/* seções escuras: transparentes sobre a tela e o ambiente, com os papéis do pacote */
.home main > .theme-dark{
  background-color:transparent;
  --surface:var(--panel); --fg:var(--text-primary); --fg-muted:var(--text-secondary); --fg-subtle:var(--text-subtle);
}
.home main > .theme-light{ --bg:var(--paper); --fg:var(--ink); }
.home main h2{ font-weight:500; }
/* acento em doses raras: nas seções escuras, rótulos em marfim secundário (o traço segue dourado) */
.home main > .theme-dark .eyebrow, .home main > .theme-dark .channels dt{ color:var(--text-secondary); }

/* Ambiente fixo: brilho âmbar que deriva devagar (ciclo de 70 s, atraso negativo) e grão fino */
.lx-ambient{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.lx-ambient__glow{
  position:absolute; inset:-20%;
  background:
    radial-gradient(32% 28% at 70% 30%, rgba(192,154,95,.11), rgba(192,154,95,0) 72%),
    radial-gradient(26% 24% at 22% 74%, rgba(192,154,95,.06), rgba(192,154,95,0) 72%);
  animation:lx-drift 70s var(--ease-b) -23s infinite alternate;
}
.lx-ambient::after{
  content:""; position:absolute; inset:0; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
@keyframes lx-drift{
  0%{ transform:translate3d(-3%,-2%,0) scale(1); opacity:.75; }
  50%{ transform:translate3d(2%,3%,0) scale(1.06); opacity:1; }
  100%{ transform:translate3d(4%,-2%,0) scale(1.02); opacity:.85; }
}

/* O fio de luz: SVG por seção, montado e medido pelo home.js; traço por stroke-dashoffset (--d, --b) */
.fio{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.fio path{ fill:none; stroke-linecap:butt; stroke-linejoin:round; stroke-dasharray:1 1; }
.fio__glow{ stroke:rgba(214,184,134,.14); stroke-width:7; }
.fio__core{ stroke:var(--gold-300); stroke-width:1.25; }
.fio__main path{ stroke-dashoffset:var(--d, 1); }
.fio__branch path{ stroke-dashoffset:var(--b, 1); }
.theme-light > .fio .fio__core{ stroke:var(--gold-500); }
.theme-light > .fio .fio__glow{ stroke:rgba(192,154,95,.16); }
/* o ponto de luz de cada título: acende quando o fio o alcança */
.fio-dot__halo{
  fill:rgba(214,184,134,.42); opacity:0; transform:scale(.4);
  transform-box:fill-box; transform-origin:center;
  transition:opacity 700ms var(--ease-a), transform 700ms var(--ease-a);
}
.fio-dot__ring{ fill:var(--canvas); stroke:rgba(214,184,134,.5); stroke-width:1; }
.fio-dot__core{ fill:var(--gold-300); opacity:0; transition:opacity 500ms var(--ease-a); }
.theme-light > .fio .fio-dot__ring{ fill:var(--paper); stroke:rgba(122,90,40,.5); }
.theme-light > .fio .fio-dot__core{ fill:var(--gold-500); }
.fio-dot.is-lit .fio-dot__halo{ opacity:1; transform:none; }
.fio-dot.is-lit .fio-dot__core{ opacity:1; }
/* ramal curto do fio até o rótulo, quando o título está longe da margem */
.fio__hb path{ stroke-dashoffset:1; transition:stroke-dashoffset 900ms var(--ease-a) 120ms; }
.fio__hb.is-lit path{ stroke-dashoffset:0; }
/* o fio do palco nasce como luz: brilho na origem e halo mais largo sobre a filmagem */
.fio-origin{ fill:rgba(214,184,134,.5); filter:blur(9px); opacity:calc((1 - var(--d, 1)) * .9); }
.lx-stage__fio .fio__glow{ stroke:rgba(214,184,134,.2); stroke-width:11; }
/* o elemento vivo de cada seção: o ponto aceso respira devagar, só com a seção na tela */
.on .fio-dot.is-lit .fio-dot__halo{ animation:lx-breathe 5.6s var(--ease-b) -2.2s infinite alternate; }
@keyframes lx-breathe{ from{ opacity:1; transform:none; } to{ opacity:.4; transform:scale(.8); } }


/* 03 · Hero: estrutura. Padrão = bloco estático; html.lx-scrub promove para o palco de 480vh */
/* transparente como as outras seções escuras (o palco tem fundo próprio): sem emenda de tom com o ambiente */
.home main > .cine{ position:relative; background-color:transparent; color:var(--text-primary); }
.cine__scrub{ display:none; }
html.lx-scrub .cine{ height:480vh; }
html.lx-scrub .cine__scrub{ display:block; height:100%; }
html.lx-scrub .cine__static{ display:none; }


/* 04 · Hero estático (celular, tablet em pé, toque, movimento reduzido e sem JS) */
/* Paisagem: a sala acesa preenche a tela, com scrim à esquerda */
.cine__frame{
  position:relative; isolation:isolate; display:flex; align-items:center;
  min-height:100vh; min-height:100svh;
  padding:calc(var(--header-h) + 40px + env(safe-area-inset-top,0px)) 0 clamp(48px,7vh,88px);
}
.cine__img{
  position:absolute; inset:0; z-index:-1;
  background:url("../img/hero-3-aceso.webp") 78% 40% / cover no-repeat;
  /* a foto dissolve na tela por máscara (sem emenda com a seção seguinte) */
  -webkit-mask-image:linear-gradient(180deg, #000 72%, transparent 100%); mask-image:linear-gradient(180deg, #000 72%, transparent 100%);
}
.cine__img::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,19,32,.62) 0, rgba(10,19,32,0) 18%),
    linear-gradient(90deg, rgba(10,19,32,.95) 0%, rgba(10,19,32,.88) 32%, rgba(10,19,32,.5) 56%, rgba(10,19,32,0) 76%);
}
.cine__copy{ position:relative; }
.cine__label{
  margin:0 0 18px; max-inline-size:none;
  font:500 var(--fs-label)/1.4 var(--font-brand); letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent);
}
.cine__title{
  margin:0 0 22px; max-inline-size:15ch;
  font:500 clamp(2.125rem,1.35rem + 3.1vw,3.875rem)/1.05 var(--font-brand); letter-spacing:-.015em;
  color:var(--text-primary); text-wrap:balance;
}
.cine__lede{ margin:0; max-inline-size:40ch; font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--text-over); }
.cine__ask{
  margin:22px 0 0; padding-top:18px; max-inline-size:40ch; border-top:1px solid var(--accent-muted);
  font:500 1.0625rem/1.5 var(--font-brand); color:var(--text-primary);
}
.cine__cta{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:32px; }
.cine__sub{ margin:0; max-inline-size:44ch; font-size:var(--fs-small); line-height:1.5; color:var(--text-secondary); }
.cine__safe{
  margin:28px 0 0; padding-left:16px; max-inline-size:46ch; border-left:1px solid var(--accent);
  font-size:var(--fs-small); line-height:1.55; color:var(--text-secondary);
}
@media (max-width:29.99em){
  .cine__cta{ align-items:stretch; }
  .cine__cta .btn{ width:100%; }
  .cine__label{ font-size:.6875rem; letter-spacing:.14em; }
}
.nw{ white-space:nowrap; }
/* destaque em dourado no título do topo ("full service") */
.hl-gold{ color:var(--gold-300); }

/* Retrato e telas estreitas: painel e mesas acesos em cima (cerca de 56svh), dissolvendo para a tela */
@media (max-width: 720px), (orientation: portrait){
  .cine__frame{ display:block; min-height:0; padding:0 0 56px; }
  .cine__img{
    position:relative; inset:auto; z-index:auto;
    height:56vh; height:56svh; min-height:280px; max-height:780px;
    background-image:url("../img/hero-celular.webp"); background-position:50% 32%;
    -webkit-mask-image:linear-gradient(180deg, #000 50%, transparent 100%); mask-image:linear-gradient(180deg, #000 50%, transparent 100%);
  }
  .cine__img::after{ background:linear-gradient(180deg, rgba(10,19,32,.74) 0, rgba(10,19,32,0) 24%); }
  .cine__copy{ margin-top:-28px; }
}
@media (max-width: 720px) and (max-height: 700px){
  .cine__img{ height:42vh; height:42svh; min-height:220px; }
  .cine__label{ margin-bottom:12px; }
  .cine__title{ margin-bottom:16px; }
}


/* 05 · Hero scrub: o palco sticky, a câmera e as três camadas de luz */
.lx-stage{ position:sticky; top:0; height:100vh; overflow:hidden; }
/* a filmagem (câmera + scrim global) dissolve embaixo por máscara, no mesmo ambiente das seções */
.lx-view{
  position:absolute; inset:0; background-color:var(--canvas);
  -webkit-mask-image:linear-gradient(180deg, #000 86%, transparent 100%); mask-image:linear-gradient(180deg, #000 86%, transparent 100%);
}
.lx-cam{ position:absolute; inset:0; transform-origin:80% 36%; will-change:transform; }
.lx-layer{ position:absolute; inset:0; }
.lx-layer--2, .lx-layer--3{ opacity:0; will-change:opacity; }
/* a imagem entra suave quando chega (a opacidade da camada é do scroll; a de chegada fica no filho) */
.lx-layer__img{
  position:absolute; inset:0;
  background-position:78% 40%; background-size:cover; background-repeat:no-repeat;
  opacity:0; transition:opacity 700ms var(--ease-a);
}
.lx-layer.is-ready .lx-layer__img{ opacity:1; }
/* recuo: se as camadas não chegarem (watchdog de 15 s), a camada acesa estática carrega a jornada */
.lx-stage.is-failed .lx-layer--1, .lx-stage.is-failed .lx-layer--2{ visibility:hidden; }
.lx-stage.is-failed .lx-layer--3{ opacity:1 !important; }
.lx-stage.is-failed .lx-layer--3 .lx-layer__img{ background-image:url("../img/hero-3-aceso.webp"); opacity:1; }

/* Legibilidade, camada 1: scrim global radial (e o topo, para o logo do header) */
.lx-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,19,32,.55) 0, rgba(10,19,32,0) 16%),
    /* a coluna dos textos (terço esquerdo) fica em penumbra; o painel do logo, à direita, continua claro */
    linear-gradient(90deg, rgba(10,19,32,.5) 0%, rgba(10,19,32,.34) 30%, rgba(10,19,32,0) 56%),
    radial-gradient(ellipse 120% 90% at 62% 44%, rgba(10,19,32,0) 45%, rgba(10,19,32,.42) 100%);
}

/* Indicação de rolagem: traço dourado que desce + "Role" (chip) e o anel honesto de carregamento */
.lx-cue{
  position:absolute; left:max(var(--gutter), (100% - var(--container)) / 2); bottom:32px;
  font:500 .75rem/1 var(--font-brand); letter-spacing:.24em; text-transform:uppercase; color:var(--text-primary);
}
.lx-cue__line{ position:relative; width:1px; height:26px; overflow:hidden; background:rgba(192,154,95,.25); }
.lx-cue__line::after{
  content:""; position:absolute; left:0; top:0; width:1px; height:100%; background:var(--gold-300);
  transform:translateY(-100%);
  animation:lx-cue 2.4s var(--ease-b) -.6s infinite; animation-play-state:paused;
}
html.lx-hero-live .lx-cue__line::after{ animation-play-state:running; }
/* a indicação já sumiu (p > 0.10): a linha para de animar */
html.lx-hero-live .lx-cue.is-gone .lx-cue__line::after{ animation-play-state:paused; }
@keyframes lx-cue{ 0%{ transform:translateY(-100%); } 60%, 100%{ transform:translateY(100%); } }
.lx-ring{ display:none; width:20px; height:20px; transform:rotate(-90deg); }
.lx-stage.is-slow:not(.is-loaded):not(.is-failed) .lx-ring{ display:block; }
.lx-ring circle{ fill:none; stroke-width:4; }
.lx-ring__track{ stroke:rgba(192,154,95,.25); }
.lx-ring__bar{ stroke:var(--gold-300); stroke-dasharray:126; stroke-dashoffset:var(--ld, 126); transition:stroke-dashoffset 200ms linear; }
/* abaixo de 1200 px a barra fixa de WhatsApp (style.css) ocupa o rodapé da tela: a indicação sobe */
@media (max-width:79.99em){ .lx-cue{ bottom:calc(92px + env(safe-area-inset-bottom,0px)); } }
@media (max-height:560px){ .lx-cue{ display:none; } }


/* 06 · Faixas: posição no terço esquerdo, legibilidade em 4 camadas e as três entradas */
.lx-bands{
  position:absolute; inset:0; display:grid; align-items:center;
  padding:calc(var(--header-h) + 24px) max(var(--gutter), (100% - var(--container)) / 2) 96px;
  pointer-events:none;
}
.band{
  --k:0;
  grid-area:1 / 1; position:relative; isolation:isolate;
  width:min(40rem, 46vw); opacity:0;
  color:var(--text-primary);
  text-shadow:var(--tshadow);                 /* camada 3: sombra de texto */
}
.band--1{ opacity:1; }
.band .btn{ text-shadow:none; }
.band[data-on] .b3__row{ pointer-events:auto; }
/* camada 2: scrim por faixa, ancorado no texto (terço esquerdo); aprofunda com --k e morre aos 76% */
.band::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:calc(-1 * max(38%, 7rem)) -42% calc(-1 * max(38%, 7rem)) -34%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(6,10,18,var(--scrim)) 0%, rgba(6,10,18,calc(var(--scrim) * .66)) 46%, rgba(6,10,18,0) 76%);
  opacity:calc(.25 + .75 * var(--k));
}
.band--1{ --scrim:.7; }   /* a abertura, sobre a meia-luz */
.band--2{ --scrim:.7; }   /* sobre a sala quase acesa */
.band--3{ --scrim:.72; }
/* faixa 3: a sala inteira acesa atrás de texto pequeno. Calibrada contra o pior quadro (auditoria headless):
   o scrim se estende para a esquerda, para cima e para baixo e segura o platô até 58% (pico mantido em .72) */
.band--1::before, .band--2::before, .band--3::before{
  inset:calc(-1 * max(40%, 8rem)) -40% calc(-1 * max(40%, 8rem)) -60%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(6,10,18,var(--scrim)) 0%, rgba(6,10,18,calc(var(--scrim) * .92)) 58%, rgba(6,10,18,0) 76%);
}

/* camada 4: chip para texto pequeno (rótulo e "Role") */
.chip{
  display:inline-flex; align-items:center; gap:12px; padding:9px 14px;
  background:rgba(8,12,20,.55); border:1px solid rgba(192,154,95,.3);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(5,5,10,.85);
}
.band__label{
  margin:0 0 22px; max-inline-size:none;
  font:500 var(--fs-label)/1.4 var(--font-brand); letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-300); opacity:var(--k);
}
.band__title{
  margin:0; max-inline-size:13ch;
  font:500 clamp(2.5rem,1.3rem + 3.2vw,4.5rem)/1.04 var(--font-brand); letter-spacing:-.018em;
  color:var(--text-primary); text-wrap:balance;
}

/* Faixa 1: desfoque para nítido. Duas cópias empilhadas; a borrada tem blur ESTÁTICO, só a opacidade muda */
.b1{ display:grid; }
.b1 > *{ grid-area:1 / 1; margin:0; }
.b1__sharp{ opacity:var(--k); }
.b1__soft{ opacity:calc(1 - var(--k)); filter:blur(10px); }
.band--1 .band__title{ max-inline-size:14ch; }
.b1__lede{
  margin:22px 0 0; max-inline-size:36ch;
  font:400 clamp(1.0625rem,.95rem + .4vw,1.3125rem)/1.55 var(--font-text); color:var(--text-over);
  opacity:clamp(0, (var(--k) - .3) * 1.6, 1);
}

/* Faixa 2: palavra por palavra acendendo (0,12 a 1), limiar ordenado, sem deslocamento */
.b2__ask{
  margin:0 0 14px; max-inline-size:none;
  font:500 clamp(1.25rem,1rem + .9vw,1.75rem)/1.3 var(--font-brand); color:var(--text-over);
}
.band--2 .band__title{ max-inline-size:12ch; }
.b2__lede{
  margin:22px 0 0; max-inline-size:34ch;
  font:400 clamp(1.125rem,1rem + .45vw,1.4375rem)/1.55 var(--font-text); color:var(--text-over);
}
.band--2 .w{
  --kc:clamp(0, (var(--k) - var(--th, 0)) * 5, 1);
  opacity:calc(.12 + .88 * var(--kc));
}

/* Faixa 3: subida palavra por palavra em etapas (título, depois a fileira do botão, depois a segurança) */
.b3__l{ display:block; }
.band--3 .band__title{ max-inline-size:16ch; font-size:clamp(2.25rem,1.25rem + 2.6vw,3.75rem); line-height:1.06; }
.band--3 .w{
  --kc:clamp(0, (var(--k) - var(--th, 0)) * 3.4, 1);
  display:inline-block; opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * .55em));
}
.b3__row{
  --ks:clamp(0, (var(--k) - .62) * 4, 1);
  display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:32px;
  opacity:var(--ks); transform:translateY(calc((1 - var(--ks)) * 14px));
}
.b3__sub{ margin:0; max-inline-size:40ch; font-size:var(--fs-small); line-height:1.5; color:var(--text-over); }
.b3__safe{
  --kb:clamp(0, (var(--k) - .78) * 5, 1);
  margin:24px 0 0; padding-left:16px; max-inline-size:44ch; border-left:1px solid var(--accent);
  font-size:var(--fs-small); line-height:1.55; color:var(--text-over);
  opacity:var(--kb); transform:translateY(calc((1 - var(--kb)) * 12px));
}
/* telas mais quadradas (4:3, 5:4, iPad deitado): o recorte cover + a câmera trazem as prateleiras acesas
   para perto do terço esquerdo; a coluna de texto estreita para ficar sobre a parte escura (pior quadro auditado) */
@media (max-aspect-ratio: 3/2){
  .band{ width:min(40rem, 38vw); }
  .band--3{ width:min(40rem, 30vw); }
  .band--3::before{ inset:calc(-1 * max(40%, 8rem)) -90% calc(-1 * max(40%, 8rem)) -60%; }
  .band--3{ --scrim:.8; }   /* telas quadradas: o título ocupa mais linhas sobre a sala acesa (pior quadro auditado) */
  /* o painel do logo inteiro no fim da câmera (o home.js lê esta posição para traçar o fio) */
  .lx-layer__img{ background-position:90% 40%; }
  .band__title{ font-size:clamp(2rem, 3.4vw, 4rem); }
  .band--3 .band__title{ font-size:clamp(1.75rem, 2.9vw, 3.25rem); }
}
/* telas de desktop baixas: o scrub continua, os títulos encolhem */
@media (max-height:760px){
  .band__title{ font-size:clamp(2.25rem,1.1rem + 2.7vw,3.625rem); }
  .band--3 .band__title{ font-size:clamp(2rem,1rem + 2.1vw,3rem); }
  .b3__row{ margin-top:22px; }
  .b3__safe{ margin-top:16px; }
}


/* 07 · Os cinco portões do hero estático. As MESMAS cinco strings do <head> (window.LX_GATES),
   caractere por caractere. O JS tira html.lx-scrub ao vivo; este bloco garante o mesmo no CSS. */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  html.lx-scrub .cine{ height:auto; }
  html.lx-scrub .cine__scrub{ display:none; }
  html.lx-scrub .cine__static{ display:block; }
}


/* 08 · Situações: cartões ilustrados (ícones de traço que se desenham) e filtros por grupo */
.lx-sit .section-head{ margin-bottom:clamp(1.75rem,1.3rem + 1.6vw,2.5rem); }
.sit-filter{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 clamp(1.5rem,1.2rem + 1vw,2rem); }
/* celular: os filtros deslizam numa linha só */
@media (max-width:39.99em){
  .sit-filter{ flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(-1 * var(--gutter)); padding:2px var(--gutter) 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .sit-filter::-webkit-scrollbar{ display:none; }
  .sit-chip{ flex:none; white-space:nowrap; }
}
.sit-chip{
  min-height:40px; padding:0 18px; border:1px solid rgba(242,236,226,.2); border-radius:0; background:transparent;
  color:var(--text-secondary); font:500 .75rem/1 var(--font-brand); letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  transition:background-color 240ms var(--ease-a), border-color 240ms var(--ease-a), color 240ms var(--ease-a);
}
.sit-chip:hover{ border-color:var(--gold-300); color:var(--text-primary); }
.sit-chip[aria-pressed="true"]{ background:var(--gold-500); border-color:var(--gold-500); color:var(--ink); }
.sit-chip:focus-visible{ outline:2px solid var(--gold-300); outline-offset:3px; }
@media (pointer:coarse){ .sit-chip{ min-height:44px; } }

.sit-grid{ display:grid; gap:14px; grid-template-columns:minmax(0,1fr); margin:0; padding:0; list-style:none; }
.sit-grid > li{ transition:opacity 320ms var(--ease-a), transform 320ms var(--ease-a); }
.sit-grid > li.is-dim{ opacity:.28; transform:scale(.985); }
.sit-card{
  --cut:10px;
  position:relative; isolation:isolate; display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:16px; row-gap:6px;
  align-content:start; height:100%; min-height:44px; padding:20px 20px 18px;
  background:var(--panel); box-shadow:inset 0 0 0 1px rgba(242,236,226,.08); color:var(--fg); text-decoration:none;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut) * 1.732), calc(100% - var(--cut)) 100%, 0 100%, 0 calc(var(--cut) * 1.732));
  transition:background-color 280ms var(--ease-a), transform 280ms var(--ease-a);
}
/* a linha de luz no topo do cartão acende no hover e no foco */
.sit-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:1;
  background:var(--gold-300); box-shadow:0 0 14px 1px rgba(214,184,134,.55);
  transform:scaleX(0); transform-origin:0 50%; transition:transform 420ms var(--ease-a);
}
.sit-ic{
  grid-row:1 / span 3; width:44px; height:44px; overflow:visible;
  fill:none; stroke:var(--gold-300); stroke-width:1.4; stroke-linejoin:round; stroke-linecap:butt;
  transition:transform 380ms var(--ease-a);
}
.sit-ic path{ stroke-dasharray:1 1; stroke-dashoffset:0; transition:stroke-dashoffset 1200ms var(--ease-b); }
.sit-ic path:nth-child(2){ transition-delay:120ms; } .sit-ic path:nth-child(3){ transition-delay:240ms; }
.sit-ic path:nth-child(4){ transition-delay:360ms; } .sit-ic path:nth-child(5){ transition-delay:480ms; }
.sit-ic path:nth-child(6){ transition-delay:600ms; }
/* entrada: o desenho se traça quando o cartão aparece (sem JS ou com movimento reduzido, já nasce desenhado) */
.reveal-on .sit-grid > li:not(.in) .sit-ic path{ stroke-dashoffset:1; }
.sit-card__title{ grid-column:2; font:500 1.125rem/1.3 var(--font-brand); color:var(--text-primary); }
.sit-card__desc{ grid-column:2; font-size:.9375rem; line-height:1.55; color:var(--fg-muted); }
.sit-card__go{
  grid-column:2; display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  font:500 .6875rem/1 var(--font-brand); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-300);
}
.sit-card__go .icon{ width:16px; height:16px; transition:transform 280ms var(--ease-a); }
.sit-card--cta{ background:transparent; box-shadow:inset 0 0 0 1px rgba(214,184,134,.45); }
@media (min-width:40em){
  .sit-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sit-card{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto 1fr auto; row-gap:10px; padding:28px 24px 22px; }
  .sit-ic{ grid-row:auto; width:62px; height:62px; margin-bottom:8px; }
  .sit-card__title, .sit-card__desc, .sit-card__go{ grid-column:1; }
  .sit-card__desc{ align-self:start; }
  .sit-card__go{ margin-top:6px; }
}
/* a chamada "Não encontrou a sua situação?" ocupa a linha inteira, em formato horizontal */
@media (min-width:40em){
  .sit-grid > .sit-grid__cta{ grid-column:1 / -1; }
  .sit-card.sit-card--cta{ grid-template-columns:62px minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:24px; align-items:center; padding:24px 28px; }
  .sit-card--cta .sit-ic{ grid-row:1 / span 2; margin:0; }
  .sit-card--cta .sit-card__title, .sit-card--cta .sit-card__desc{ grid-column:2; }
  .sit-card--cta .sit-card__go{ grid-column:3; grid-row:1 / span 2; margin:0; }
}
@media (min-width:64em){ .sit-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } }
@media (hover:hover) and (pointer:fine){
  .sit-card:hover{ background-color:#14253B; transform:translateY(-3px); }
  .sit-card:hover::before{ transform:none; }
  .sit-card:hover .sit-ic{ transform:scale(1.06); }
  .sit-card:hover .sit-card__go .icon{ transform:translateX(4px); }
}
.sit-card:focus-visible{ outline:2px solid var(--gold-300); outline-offset:3px; }
.sit-card:focus-visible::before{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .sit-card, .sit-ic, .sit-grid > li{ transition:none; }
  .sit-ic path{ transition:none; stroke-dashoffset:0 !important; }
}
@media (forced-colors:active){ .sit-ic{ stroke:CanvasText; } .sit-card{ border:1px solid CanvasText; } .sit-chip[aria-pressed="true"]{ forced-color-adjust:none; } }


/* 09 · Como funciona: o caminho acende conforme a página rola
   A luz desce junto com a ponta do fio (62% da tela): cada lâmpada acende quando a
   ponta passa por ela, o trilho enche até a próxima e o desenho da etapa se traça.
   O estado padrão é o aceso: só com o home.js rodando (.lx-path-on) as etapas
   ainda não alcançadas ficam apagadas. Sem JS, com movimento reduzido ou na
   impressão, o caminho nasce aceso e desenhado. */
.lx-how .section-head{ margin-bottom:clamp(2.75rem,2rem + 2.8vw,4.5rem); }
.lx-how .section-head .lead{ margin:16px auto 0; -webkit-hyphens:manual; hyphens:manual; }

/* (.lx-how na frente: vence o ol[role="list"]{margin:0} do style.css) */
.lx-how .lx-path{
  --g:clamp(2.75rem,2rem + 2.6vw,4.5rem);   /* espaço entre etapas */
  --lamp:28px;
  --lamp-top:10px;
  position:relative; display:grid; gap:var(--g); margin:0; padding:0; list-style:none;
}
.lx-pstep{
  position:relative; display:grid; grid-template-columns:var(--lamp) minmax(0,1fr);
  column-gap:clamp(18px,.7rem + 1.8vw,44px);
}
.lx-pstep > .lx-lamp{ grid-column:1; grid-row:1; align-self:start; margin-top:var(--lamp-top); }
.lx-pstep__card{ grid-column:2; grid-row:1; display:grid; gap:22px; align-content:start; }

/* a lâmpada: aro fino; acesa, ganha o núcleo dourado e o brilho */
.lx-lamp{
  position:relative; z-index:1;
  width:var(--lamp, 28px); height:var(--lamp, 28px); border:1.5px solid rgba(14,27,44,.45); border-radius:50%; background:var(--paper, var(--ivory-100));
}
.lx-lamp::before{
  content:""; position:absolute; inset:-16px; border-radius:50%;
  background:radial-gradient(circle, rgba(214,184,134,.75), rgba(214,184,134,0) 68%);
  transition:opacity 520ms var(--ease-a), transform 520ms var(--ease-a);
}
.lx-lamp::after{
  content:""; position:absolute; inset:5px; border-radius:50%; background:var(--gold-500);
  transition:opacity 340ms var(--ease-a), transform 340ms var(--ease-a);
}
.lx-path-on .lx-pstep:not(.is-on) > .lx-lamp::before{ opacity:0; transform:scale(.5); }
.lx-path-on .lx-pstep:not(.is-on) > .lx-lamp::after{ opacity:0; transform:scale(.4); }
/* o elemento vivo da seção: a última lâmpada acesa respira devagar enquanto a seção está na tela */
.lx-how.on .lx-pstep.is-head > .lx-lamp::before{ animation:lx-lamp-breathe 4.8s var(--ease-b) infinite alternate; }
@keyframes lx-lamp-breathe{ from{ opacity:.55; transform:scale(.86); } to{ opacity:1; transform:scale(1.08); } }

/* o trilho entre as lâmpadas: apagado por baixo, a luz por cima enche conforme a página rola
   (--seg: distância exata até a próxima lâmpada, medida pelo home.js; --p: 0 a 1) */
.lx-pstep:not(:last-child)::before, .lx-pstep:not(:last-child)::after{
  content:""; position:absolute; z-index:0;
  left:calc(var(--lamp) / 2 - .5px); top:calc(var(--lamp-top) + var(--lamp)); width:1px;
  height:var(--seg, calc(100% + var(--g) - var(--lamp)));
}
.lx-pstep:not(:last-child)::before{ background:rgba(14,27,44,.2); }
.lx-pstep:not(:last-child)::after{
  background:var(--gold-500); box-shadow:0 0 10px 1px rgba(214,184,134,.7);
  transform:scaleY(var(--p, 1)); transform-origin:50% 0;
}

/* o quadro do desenho, com os cantos cortados da marca */
.lx-pstep__art{
  --cut:14px;
  display:flex; align-items:center; justify-content:center;
  block-size:clamp(168px,40vw,232px); padding:14px;
  background:var(--ivory-50); box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.lx-pstep__body{ display:grid; gap:10px; align-content:start; }
.lx-pstep__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0; }
.lx-pstep__n{
  font:500 .8125rem/1 var(--font-brand); letter-spacing:.2em; color:var(--gold-700);
  transition:color 420ms var(--ease-a);
}
.lx-path-on .lx-pstep:not(.is-on) .lx-pstep__n{ color:var(--fg-subtle); }
.lx-tag{
  display:inline-flex; align-items:center; min-height:26px; padding:4px 10px;
  border:1px solid rgba(122,90,40,.42); background:rgba(214,184,134,.14);
  font:500 .6875rem/1.2 var(--font-brand); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-700);
  transition:background-color 420ms var(--ease-a) 240ms, border-color 420ms var(--ease-a) 240ms;
}
.lx-path-on .lx-pstep:not(.is-on) .lx-tag{ background:transparent; border-color:rgba(122,90,40,.28); }
.lx-pstep__title{ margin:0; font-size:var(--fs-h3); }
.lx-pstep__text{ margin:0; max-inline-size:46ch; color:var(--fg-muted); }
/* coluna muito estreita (celulares de 320px): justificado abriria buracos entre as palavras */
@media (max-width:25em){ main .lx-pstep__text{ text-align:left; } }
@media (max-width:30em){ main .lx-remote__text{ text-align:left; } }   /* o quadro escuro tem a coluna mais estreita */

/* os desenhos: traço fino azul-marinho com detalhes dourados; cada traço espera a sua vez (--o) */
.lx-draw{
  display:block; width:100%; height:100%; overflow:visible;
  fill:none; stroke:var(--navy-900); stroke-width:1.3; stroke-linejoin:round; stroke-linecap:round;
}
.lx-draw .g{ stroke:var(--gold-500); }
.lx-draw .w{ stroke-width:2.4; }
.lx-draw .d{ stroke-width:2.6; }
/* (seletores por elemento e classe, não por [pathLength]: o Chrome não reavalia um seletor de
   atributo em camelCase dentro do SVG quando a classe do ancestral muda, e o traço ficava apagado) */
.lx-draw > path:not(.lx-draw__route), .lx-draw mask path{
  stroke-dasharray:1 1; stroke-dashoffset:0;
  transition:stroke-dashoffset 1100ms var(--ease-b) calc(120ms + var(--o, 0) * 130ms);
}
.lx-draw__bg{
  fill:var(--ivory-200); stroke:none; transform-box:fill-box; transform-origin:50% 50%;
  transition:transform 900ms var(--ease-a), opacity 700ms var(--ease-a);
}
.lx-draw__ghost{ stroke:rgba(14,27,44,.16); }
.lx-path-on .lx-pstep:not(.is-on) .lx-draw > path{ stroke-dashoffset:1; }
.lx-path-on .lx-pstep:not(.is-on) .lx-draw__bg{ opacity:.45; transform:scale(.86); }

/* telas largas: zigue-zague (desenho e texto trocam de lado a cada etapa), lâmpada no meio da linha */
@media (min-width:56em){
  .lx-pstep > .lx-lamp{ align-self:center; margin-top:0; }
  .lx-pstep:not(:last-child)::before, .lx-pstep:not(:last-child)::after{ top:calc(50% + var(--lamp) / 2); }
  .lx-pstep__card{
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:center;
    column-gap:clamp(2rem,.4rem + 3.6vw,4.75rem);
  }
  .lx-pstep:nth-child(even) .lx-pstep__card{ grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); }   /* as colunas trocam junto: o quadro tem sempre a mesma largura */
  .lx-pstep:nth-child(even) .lx-pstep__art{ order:2; }
  .lx-pstep__art{ block-size:clamp(200px,9vw + 110px,250px); padding:10px; }
  /* a entrada vem do lado do desenho */
  .reveal-on .lx-pstep__card[data-reveal]:not(.in){ translate:-18px 0; }
  .reveal-on .lx-pstep:nth-child(even) .lx-pstep__card[data-reveal]:not(.in){ translate:18px 0; }
}

/* Para quem não é da cidade: quadro escuro com a rota até Bagé */
.lx-remote{
  --cut:18px;
  display:grid; gap:clamp(1.5rem,1rem + 2vw,2.75rem); align-items:center;
  margin-top:clamp(3.5rem,2.4rem + 4.4vw,6.5rem); padding:clamp(28px,1.1rem + 2.6vw,60px);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.lx-remote__art{ display:flex; justify-content:center; }
.lx-remote__art .lx-draw{ width:min(100%,340px); height:auto; aspect-ratio:220 / 120; }
.lx-draw--dark{ stroke:rgba(242,236,226,.82); }
.lx-draw--dark .g{ stroke:var(--gold-300); }
.lx-draw__route{ stroke-dasharray:2.5 5; }
.lx-draw__m{ stroke:#fff; stroke-width:8; }
.lx-remote__body{ display:grid; gap:16px; justify-items:start; }
.lx-remote__kicker{
  margin:0; font:500 .8125rem/1.3 var(--font-brand); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-300);
}
.lx-remote__title{
  margin:0; max-inline-size:24ch;
  font:500 clamp(1.5rem,1.05rem + 1.7vw,2.375rem)/1.14 var(--font-brand); letter-spacing:-.01em; color:var(--fg);
}
.lx-remote__text{ margin:0; max-inline-size:54ch; color:var(--fg-muted); }
.lx-remote__list{ display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 0; padding:0; list-style:none; }
.lx-remote__list li{
  display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:8px 16px 8px 10px;
  border:1px solid rgba(214,184,134,.38); background:rgba(214,184,134,.06);
  font:500 .9375rem/1.2 var(--font-brand); color:var(--fg);
  transition:opacity 480ms var(--ease-a), transform 480ms var(--ease-a);
}
.lx-remote__ic{
  width:26px; height:26px; flex:none; overflow:visible;
  fill:none; stroke:var(--gold-300); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:butt;
}
.lx-remote__ic path{ stroke-dasharray:1 1; stroke-dashoffset:0; transition:stroke-dashoffset 900ms var(--ease-b); }
.lx-remote__list li:nth-child(1){ --li:0; } .lx-remote__list li:nth-child(2){ --li:1; } .lx-remote__list li:nth-child(3){ --li:2; }
.lx-remote__list li, .lx-remote__ic path{ transition-delay:calc(500ms + var(--li, 0) * 140ms); }
.lx-remote__cta{ margin-top:8px; }
/* entrada: o quadro aparece, a rota se traça e os três itens chegam um por um */
.reveal-on .lx-remote:not(.in) .lx-draw > path:not(.lx-draw__route),
.reveal-on .lx-remote:not(.in) .lx-draw mask path,
.reveal-on .lx-remote:not(.in) .lx-remote__ic path{ stroke-dashoffset:1; }
.reveal-on .lx-remote:not(.in) .lx-remote__list li{ opacity:0; transform:translateY(8px); }
@media (min-width:56em){
  .lx-remote{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .lx-remote__art .lx-draw{ width:100%; max-width:400px; }
}


/* 10 · Compromissos: lista numerada em duas colunas, ligada pelo fio de luz */
.lx-commit{ display:grid; column-gap:var(--space-grid); margin:0; padding:0; list-style:none; }
.lx-commit__item{
  position:relative; display:grid; grid-template-columns:2.75rem minmax(0,1fr); column-gap:20px;
  align-content:start; padding-bottom:30px;
}
.lx-commit__n{
  --cut:6px;
  grid-row:1 / span 2; display:grid; place-items:center; width:2.75rem; height:2.75rem;
  font:500 .9375rem/1 var(--font-brand); letter-spacing:.04em; color:var(--text-secondary);
  font-variant-numeric:tabular-nums lining-nums;
  background:var(--panel); box-shadow:inset 0 0 0 1px rgba(242,236,226,.14);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut) * 1.732),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 calc(var(--cut) * 1.732));
}
.lx-commit__title{ margin:.6rem 0 6px; max-inline-size:none; font-size:var(--fs-card); }
.lx-commit__item p{ margin:0; max-inline-size:44ch; font-size:1rem; line-height:1.6; color:var(--fg-muted); }
/* o fio entre os números (desenha na entrada) */
.lx-commit__item::before{
  content:""; position:absolute; left:calc(1.375rem - .5px); top:calc(2.75rem + 6px); bottom:6px; width:1px;
  background:linear-gradient(var(--gold-300), rgba(192,154,95,.3));
  box-shadow:0 0 8px rgba(214,184,134,.35);
  transform-origin:50% 0; transition:transform 900ms var(--ease-b) 200ms;
}
.lx-commit__item:last-child::before{ display:none; }
.reveal-on .lx-commit__item:not(.in)::before{ transform:scaleY(0); }
@media (min-width:64em){
  .lx-commit{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,auto); grid-auto-flow:column; }
  .lx-commit__item:nth-child(4)::before{ display:none; }
}


/* 11 · Quem conduz o seu caso (retrato com a moldura de corte diagonal do style.css) */
.lx-cna{ margin:var(--space-5) 0 0; }
.profile__more{ margin:var(--space-4) 0 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.profile__more > summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; cursor:pointer; list-style:none;
  font:500 var(--fs-label)/1.4 var(--font-brand); letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink);
}
.profile__more > summary::-webkit-details-marker{ display:none; }
.profile__more > summary::after{ content:"+"; font:400 1.5rem/1 var(--font-brand); letter-spacing:0; color:var(--accent-ink); transition:transform 240ms var(--ease-a); }
.profile__more[open] > summary::after{ transform:rotate(45deg); }
.profile__more > summary:focus-visible{ outline:2px solid var(--gold-700); outline-offset:4px; }
.profile__more-body{ padding:4px 0 var(--space-4); }
.profile__more-body p:last-child{ margin-bottom:0; }
.lx-person .profile__cta{ margin-top:var(--space-4); }
/* a foto fica no topo e acompanha a leitura (a trajetória aberta não a empurra para o meio) */
@media (min-width:64em){
  .lx-person .profile{ align-items:start; }
  .lx-person .portrait{ align-self:start; position:sticky; top:calc(var(--header-h) + 32px); }
}


/* 11a · Advogados da equipe (dentro da seção do responsável) */
.lx-team{ margin-top:clamp(3rem,2.2rem + 3vw,5rem); padding-top:clamp(2.5rem,2rem + 2vw,3.5rem); border-top:1px solid var(--line); }
.lx-team__title{
  margin:0 0 clamp(1.75rem,1.4rem + 1.4vw,2.5rem); max-inline-size:none;
  font:500 var(--fs-label)/1.4 var(--font-brand); letter-spacing:.22em; text-transform:uppercase; color:var(--accent-ink);
}
.lx-team__list{ display:grid; gap:clamp(2.5rem,2rem + 2vw,3.5rem) var(--space-grid); margin:0; padding:0; list-style:none; }
.lx-member{ display:grid; gap:24px; align-content:start; scroll-margin-top:calc(var(--header-h) + 24px); }
.lx-member__photo{
  --cut:12px; margin:0; max-inline-size:320px; aspect-ratio:4 / 5; overflow:hidden; background:var(--ink);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut) * 1.732), calc(100% - var(--cut)) 100%, 0 100%, 0 calc(var(--cut) * 1.732));
}
.lx-member__photo picture, .lx-member__photo img{ display:block; width:100%; height:100%; }
.lx-member__photo img{ object-fit:cover; object-position:50% 20%; }
.lx-member__name{ margin:0 0 4px; font:500 var(--fs-h3)/1.2 var(--font-brand); color:var(--ink); }
.lx-member__body > p:not(.profile__oab):not(.lx-member__links){ max-inline-size:60ch; }
.lx-member__body .dash-list{ margin:var(--space-4) 0 0; }
.lx-member__links{ display:flex; flex-wrap:wrap; gap:8px 24px; margin:var(--space-4) 0 0; }
@media (min-width:48em){
  .lx-member{ grid-template-columns:minmax(0,200px) minmax(0,1fr); column-gap:28px; }
  .lx-member__photo{ max-inline-size:none; }
}
@media (min-width:80em){
  .lx-team__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lx-member{ grid-template-columns:minmax(0,180px) minmax(0,1fr); }
}


/* 11b · Avaliações no Google: cartões com o texto original (decisão do cliente; ver PENDENCIAS.md) */
.lx-reviews__head{ margin-bottom:clamp(2rem,1.5rem + 2vw,3rem); }
/* carrossel: rola para o lado com encaixe; 1 cartão (com uma ponta do próximo) no celular, 2 no tablet, 3 no computador */
.lx-carousel{ position:relative; }
.lx-reviews__list{
  --per:1.12; --gap:16px;
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  gap:var(--gap); margin:0; padding:2px 2px 14px; list-style:none;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:rgba(214,184,134,.45) transparent;
}
.lx-reviews__list > li{ scroll-snap-align:start; }
.lx-reviews__list:focus-visible{ outline:2px solid var(--gold-300); outline-offset:4px; }
@media (min-width:48em){ .lx-reviews__list{ --per:2; --gap:20px; } }
@media (min-width:64em){ .lx-reviews__list{ --per:3; --gap:var(--space-grid); } }
.lx-carousel__nav{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
.lx-carousel__btn{
  display:inline-grid; place-items:center; width:48px; height:48px; padding:0; cursor:pointer;
  border:1px solid rgba(214,184,134,.45); background:transparent; color:var(--gold-300);
  transition:background-color 240ms var(--ease-a), border-color 240ms var(--ease-a), opacity 240ms var(--ease-a);
}
.lx-carousel__btn[data-carousel-prev] .icon{ transform:scaleX(-1); }
.lx-carousel__btn:hover{ background:rgba(214,184,134,.12); border-color:var(--gold-300); }
.lx-carousel__btn:focus-visible{ outline:2px solid var(--gold-300); outline-offset:3px; }
.lx-carousel__btn[disabled]{ opacity:.35; cursor:default; }
@media (prefers-reduced-motion:reduce){ .lx-reviews__list{ scroll-behavior:auto; } }
.lx-review figure{
  --cut:10px;
  display:flex; flex-direction:column; gap:18px; height:100%; margin:0; padding:clamp(22px,1.2rem + .8vw,32px);
  background:var(--panel); box-shadow:inset 0 0 0 1px rgba(242,236,226,.1);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut) * 1.732), calc(100% - var(--cut)) 100%, 0 100%, 0 calc(var(--cut) * 1.732));
}
.lx-review__rating{ margin:0; line-height:0; }
.lx-stars{ width:92px; height:18px; fill:var(--gold-300); }
.lx-review blockquote{ flex:1; margin:0; }
.lx-review blockquote p{ margin:0; max-inline-size:none; font:400 1.0625rem/1.6 var(--font-text); color:var(--text-primary); }
.lx-review figcaption{ font:500 .75rem/1.4 var(--font-brand); letter-spacing:.18em; text-transform:uppercase; color:var(--text-secondary); }
.lx-reviews__more{ margin:clamp(1.75rem,1.4rem + 1.4vw,2.5rem) 0 0; }
@media (forced-colors:active){ .lx-stars{ fill:CanvasText; } .lx-review figure{ border:1px solid CanvasText; } }


/* 12 · O escritório: o fio desenha o monograma DF; o quadro final com poeira de luz */
.lx-office__head{ display:grid; gap:28px; margin-bottom:clamp(2rem,1.4rem + 2.6vw,3.5rem); }
.lx-office__title h2{ margin:0; max-inline-size:18ch; }
.lx-office__l{ display:block; }
.lx-office__info .lead{ margin:0 0 24px; }
.lx-mono{ display:block; width:56px; height:auto; margin:0 0 26px; overflow:visible; }
.lx-mono path{
  fill:none; stroke:var(--gold-300); stroke-width:4.5; stroke-linejoin:round;
  stroke-dasharray:1 1; stroke-dashoffset:var(--m, 0);
}
.lx-facts{ display:grid; gap:14px; }
.lx-facts li{ position:relative; padding-left:22px; color:var(--fg); }
.lx-facts li::before{ content:""; position:absolute; left:0; top:.8em; width:10px; height:1px; background:var(--accent); }
.lx-facts__text{ display:block; }
@media (min-width:64em){
  .lx-office__head{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--space-grid); align-items:end; }
  .lx-office__title{ grid-column:1 / 7; }
  .lx-office__info{ grid-column:8 / 13; }
}
.lx-office__media{ --cut:var(--cut-lg); position:relative; overflow:hidden; aspect-ratio:16 / 9; background-color:var(--panel); }
.lx-office__media picture, .lx-office__media img{ width:100%; height:100%; }
.lx-office__media img{ object-fit:cover; object-position:70% 50%; }
@media (max-width:47.99em){
  .lx-office__media{ --cut:var(--cut-md); aspect-ratio:4 / 3; }
  .lx-office__media img{ object-position:94% 50%; }
}
.lx-dust{ position:absolute; inset:0; pointer-events:none; }
.lx-dust i{
  position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); border-radius:50%;
  background:radial-gradient(circle, rgba(250,232,196,.95) 0, rgba(250,232,196,0) 70%);
  opacity:0; animation:lx-dust var(--t) linear var(--dl) infinite; animation-play-state:paused;
}
.lx-office.on .lx-dust i{ animation-play-state:running; }
@keyframes lx-dust{
  0%{ opacity:0; transform:translate3d(0,0,0); }
  18%{ opacity:.75; }
  82%{ opacity:.55; }
  100%{ opacity:0; transform:translate3d(var(--dx),var(--dy),0); }
}


/* rodapé da home: mesma tela escura das seções, sem salto de tom */
.home .site-footer{ background-color:var(--canvas); border-top:1px solid rgba(192,154,95,.16); }

/* 13 · Dúvidas (details do style.css), numa coluna central */
.lx-faq .faq{ max-inline-size:52rem; margin-inline:auto; }


/* 14 · Contato: o fio termina num ponto aceso ao lado do botão */
.lx-contact .contact__direct{ position:relative; }


/* 15 · Movimento: pausa, movimento reduzido ao vivo, impressão */
/* aba escondida: tudo pausa (animation-play-state não é herdado; por isso o seletor universal) */
body.paused *, body.paused *::before, body.paused *::after{ animation-play-state:paused !important; }
/* com o palco cobrindo a tela, o ambiente atrás dele não precisa derivar */
html.lx-scrub.lx-hero-live .lx-ambient__glow{ animation-play-state:paused; }

/* estados finais fixados pelo home.js (pinToFinalStates): fio e monograma desenhados, pontos acesos */
.lx-pinned *, .lx-pinned *::before, .lx-pinned *::after{ transition-delay:0s !important; }
.lx-pinned .fio__main, .lx-pinned .fio__branch{ --d:0 !important; --b:0 !important; }
.lx-pinned .lx-mono{ --m:0 !important; }
.lx-pinned .fio__hb path{ stroke-dashoffset:0; transition:none; }
.lx-pinned .fio-dot__halo{ opacity:1; transform:none; animation:none !important; }
.lx-pinned .fio-dot__core{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .lx-dust, .lx-cue__line::after{ display:none; }
  .lx-ambient__glow, .lx-pstep > .lx-lamp::before{ animation:none !important; }
  .fio-dot__halo{ animation:none !important; }
}

@media (forced-colors:active){
  .lx-ambient, .fio, .lx-dust{ display:none; }
  .lx-lamp{ forced-color-adjust:none; }
  .lx-draw, .lx-draw .g, .lx-remote__ic{ stroke:CanvasText; }
  .lx-draw__bg{ display:none; }
  .lx-draw__ghost{ stroke:GrayText; }
  .lx-pstep:not(:last-child)::before, .lx-pstep:not(:last-child)::after{ forced-color-adjust:none; background:CanvasText; box-shadow:none; }
  .lx-remote__list li, .lx-tag{ border-color:CanvasText; }
}

@media print{
  .lx-ambient, .cine__scrub, .fio, .lx-dust, .cine__img{ display:none !important; }
  .lx-draw path, .lx-remote__ic path{ stroke-dashoffset:0 !important; }
  .lx-draw__bg, .lx-lamp::before, .lx-lamp::after, .lx-remote__list li{ opacity:1 !important; transform:none !important; }
  .lx-pstep::after{ transform:none !important; }
  .lx-pstep:not(:last-child)::before, .lx-pstep:not(:last-child)::after{ height:calc(100% + var(--g) - var(--lamp)) !important; }   /* o --seg foi medido na tela, não no papel */
  .lx-draw--dark{ stroke:#333; }
  .lx-draw--dark .g, .lx-remote__ic{ stroke:#7A5A28; }
  .lx-remote{ clip-path:none; border:1px solid #000; background:#fff !important; --fg:#000; --fg-muted:#333; }
  .lx-remote .hl-gold, .lx-remote__kicker{ color:#000 !important; }
  html.lx-scrub .cine{ height:auto; }
  html.lx-scrub .cine__static{ display:block; }
  .home main > .cine, .home main > .theme-dark{ background:#fff !important; }
  .cine__frame{ min-height:0; padding:24px 0; }
  .cine__label, .cine__title, .cine__lede, .cine__sub, .cine__safe{ color:#000 !important; text-shadow:none !important; }
  .home main > .theme-dark{ --fg:#000; --fg-muted:#333; --fg-subtle:#444; }
}