/* ============================================================
   LT Soluções — "Operação & Processos"
   Único site quente do conjunto: grafite (--ink) + laranja-terra
   (--accent). Onde os outros usam abas, accordion ou bento para os
   serviços, aqui é um carrossel horizontal com scroll-snap — a
   única interação de arrastar/rolar lateral do lote. O componente
   que assina o site é o comparativo Antes / Depois: a LT entra
   numa operação que já existe e mostra, lado a lado, o que muda.
   Arte gerada por PIL — geométrica e plana; o layout acompanha
   esse registro (grades, linhas retas, nada de gradiente pesado).
   ============================================================ */

:root{
  --ink:#1B1F24; --deep:#2A3038; --mid:#64748B; --accent:#E2542C;
  --paper:#F7F4F0; --muted:#7A8695;
  --display:'Sora',sans-serif; --body:'Inter',sans-serif;

  /* Variantes de texto: os tokens acima vêm de sites_data.py e não podem
     mudar de valor, mas nem todos garantem AA (4.5:1) para texto pequeno
     em todo contexto — verificado por varredura de contraste (ver
     task-12-report.md). --muted em cima de --ink mede 4.47:1 (abaixo do
     limite) e --accent em cima de --ink mede 4.37:1: as duas ficam curtas
     por poucos décimos. As variantes abaixo existem só para texto miúdo. */
  --muted-text:#929CA8;   /* secundário sobre --ink/--deep: 5.95:1 / 4.78:1 */
  --accent-text:#E97D5F;  /* laranja sobre --ink/--deep: 5.96:1 / 4.79:1 */
  --slate-paper:#546175;  /* secundário sobre --paper: 5.73:1 */
  /* --accent puro (#E2542C) só rende AA em texto GRANDE (>=3:1): sobre
     --ink mede 4.37:1 e já falha para texto pequeno; branco sobre
     --accent mede 3.79:1 e falha até para botão. --accent-deep é o
     mesmo laranja escurecido ~20%, usado como FUNDO sob texto branco
     (5.54:1) e como texto sobre --paper (5.05:1). --accent puro continua
     dominante no site em uso decorativo/grande: números, bordas, hero em. */
  --accent-deep:#B54323;
  --accent-deep-hover:#A33C20; /* hover mais escuro ainda: contraste sobe, nunca cai */

  --line: rgba(247,244,240,.13);
  --line-soft: rgba(247,244,240,.08);
  --line-ink: rgba(27,31,36,.10);
  --radius: 8px;
  --shadow-sm: 0 16px 34px -18px rgba(0,0,0,.55);
  --ease: cubic-bezier(.4,0,.2,1);
  --nav-h: 84px;
}

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--body);
  color:var(--muted-text);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
  overflow-x:hidden;
}
main{ padding-top:calc(var(--nav-h) + 22px); }
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul, ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--display); color:var(--paper); line-height:1.2; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- layout helpers ---------- */
.container{ max-width:1210px; margin:0 auto; padding:0 1.75rem; }
.section-pad{ padding:106px 0; }
.bg-ink{ background:var(--ink); }
.bg-deep{ background:var(--deep); }
.bg-paper{ background:var(--paper); }

/* Cabecalho de secao alinhado a esquerda — os outros sites centralizam. */
.section-header{ max-width:660px; margin:0 0 3.6rem; text-align:left; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.65rem;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-text);
}
.eyebrow::before{ content:''; width:30px; height:2px; background:var(--accent); }
.bg-paper .eyebrow{ color:var(--accent-deep); }
.section-title{ font-size:clamp(1.8rem,3.1vw,2.5rem); font-weight:700; margin:.7rem 0 .9rem; color:var(--paper); }
.bg-paper .section-title{ color:var(--ink); }
.section-sub{ color:var(--muted-text); font-size:1.03rem; }
.bg-paper .section-sub{ color:var(--slate-paper); }

/* ---------- page routing ---------- */
.page{ display:none; }
.page.active{ display:block; }

/* ---------- scroll reveal ---------- */
[data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
[data-reveal].revealed{ opacity:1; transform:translateY(0); }
[data-reveal="d1"]{ transition-delay:.04s; }
[data-reveal="d2"]{ transition-delay:.08s; }
[data-reveal="d3"]{ transition-delay:.12s; }
[data-reveal="d4"]{ transition-delay:.16s; }
[data-reveal="d5"]{ transition-delay:.40s; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.8rem; border-radius:var(--radius); font-weight:600; font-size:.94rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  border:1.5px solid transparent; white-space:nowrap;
}
.btn-primary{ background:var(--accent-deep); color:#fff; }
.btn-primary:hover{ background:var(--accent-deep-hover); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-ghost{ border-color:rgba(247,244,240,.4); color:var(--paper); }
.btn-ghost:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); transform:translateY(-2px); }
.bg-paper .btn-ghost{ border-color:rgba(27,31,36,.25); color:var(--ink); }
.bg-paper .btn-ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-block{ width:100%; }

/* ============================================================
   NAVBAR — mark.png já tem fundo laranja sólido + letras brancas,
   então entra direto sobre o grafite, sem placa clara atrás.
   ============================================================ */
/* Barra flutuante com margem e cantos arredondados — os outros 7 sites
   usam uma faixa fixa de borda a borda; a LT destaca a navbar do resto
   da pagina, coerente com o acento laranja da marca. */
.navbar{
  position:fixed; top:14px; left:14px; right:14px; z-index:1000;
  height:var(--nav-h); border-radius:16px;
  background:rgba(27,31,36,.92);
  border:1px solid var(--line-soft);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.6);
  transition:background .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease), top .3s var(--ease);
}
.navbar.scrolled{
  top:8px;
  background:rgba(20,23,27,.98);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.7);
}
.nav-container{
  max-width:1210px; margin:0 auto; padding:0 1.5rem; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav-logo{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.nav-logo .mark-img{ height:36px; width:auto; display:block; flex-shrink:0; }
.nav-logo-text{ display:flex; flex-direction:column; line-height:1.15; }
.nav-logo-text strong{
  font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--paper); letter-spacing:-.01em;
}
.nav-logo-text span{
  font-size:.66rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-text);
}
.nav-links{ display:flex; align-items:center; gap:1.55rem; flex:1; justify-content:center; }
.nav-links a{
  color:var(--muted-text); font-size:.88rem; font-weight:500; position:relative; padding:.3rem 0;
  transition:color .2s var(--ease); white-space:nowrap;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--accent); transition:width .25s var(--ease);
}
.nav-links a:hover{ color:var(--paper); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ flex-shrink:0; }
.nav-cta .btn{ padding:.64rem 1.25rem; font-size:.85rem; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:.4rem; }
.nav-toggle span{ width:22px; height:2px; background:var(--paper); border-radius:2px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; background:var(--ink); overflow:hidden; }
.hero .container{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr 1fr; gap:4rem; align-items:center;
  padding:calc(var(--nav-h) + 72px) 1.75rem 120px;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-text);
}
.hero-badge::before{ content:''; width:36px; height:1.5px; background:var(--accent); }
.hero h1{
  font-size:clamp(2.25rem,4.2vw,3.6rem); font-weight:700; color:var(--paper);
  margin:1.2rem 0 1.3rem; letter-spacing:-.015em;
}
.hero h1 em{ font-style:normal; font-weight:700; color:var(--accent); }
.hero p{ color:var(--muted-text); font-size:1.1rem; max-width:48ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.3rem; }

.hero-art{ position:relative; }
.hero-art picture{ display:block; }
.hero-art img{
  border-radius:var(--radius); border:1px solid var(--line); width:100%; height:auto;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}

/* ============================================================
   ANTES / DEPOIS — comparativo em duas colunas, componente
   exclusivo deste site. Faixa clara: o único ponto do site onde
   o fundo é --paper, para destacar a tabela como "prova" central.
   ============================================================ */
/* Sem overflow-x aqui: o carrossel de serviços é a única interação de
   rolagem lateral do site. Em telas estreitas a tabela empilha (ver
   media query no fim do arquivo) em vez de ganhar uma segunda barra
   de scroll horizontal. */
.comparativo-table{
  width:100%; border-collapse:collapse; table-layout:fixed;
  border:1px solid var(--line-ink); border-radius:var(--radius); overflow:hidden;
}
.comparativo-table col.col-tema{ width:22%; }
.comparativo-table col.col-antes{ width:37%; }
.comparativo-table col.col-depois{ width:41%; }
.comparativo-table thead th{
  text-align:left; padding:1.1rem 1.6rem; font-family:var(--display); font-weight:700;
  font-size:1.02rem; background:var(--ink); color:var(--paper);
  border-bottom:3px solid transparent;
}
/* Mesmo fundo --ink do cabeçalho "Antes": um preenchimento sólido em
   --accent por trás de texto branco mede só 3.79:1 (abaixo de AA) neste
   tamanho de fonte. Aqui a coluna "Depois" se distingue por cor de texto
   (--accent-text, 5.96:1 sobre --ink) e por uma borda inferior em --accent
   — sem nunca colocar texto pequeno sobre o laranja puro. */
.comparativo-table thead th.col-depois{ color:var(--accent-text); border-bottom-color:var(--accent); }
.comparativo-table tbody th{
  text-align:left; padding:1.15rem 1.6rem; font-weight:600; font-size:.96rem;
  color:var(--ink); background:var(--paper); white-space:nowrap;
  border-top:1px solid var(--line-ink);
}
.comparativo-table tbody td{
  padding:1.15rem 1.6rem; font-size:.94rem; border-top:1px solid var(--line-ink);
  color:var(--slate-paper); background:#fff;
}
.comparativo-table tbody td.col-depois{
  color:var(--ink); font-weight:500; background:rgba(226,84,44,.06);
}
.comparativo-table tbody tr:nth-child(odd) td:not(.col-depois){ background:var(--paper); }
.comparativo-table tbody tr:nth-child(odd) td.col-depois{ background:rgba(226,84,44,.1); }
.td-check{ display:inline-flex; align-items:center; gap:.55rem; }
.td-check::before{
  content:''; flex-shrink:0; width:16px; height:16px; border-radius:50%;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* ============================================================
   SERVIÇOS — carrossel horizontal com scroll-snap.
   O overflow-x fica só no .rail: nenhum ancestral de largura
   total pode herdar scroll lateral (senão a página inteira rola
   no mobile e o shoot.py acusa).
   ============================================================ */
.servicos-rail-wrap{ position:relative; }
.rail{
  display:flex; gap:1.25rem;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:.25rem .25rem 1.5rem;
  scrollbar-width:thin; scrollbar-color:var(--accent) var(--deep);
}
.rail:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.rail::-webkit-scrollbar{ height:8px; }
.rail::-webkit-scrollbar-track{ background:var(--deep); border-radius:8px; }
.rail::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:8px; }
.rail-card{
  flex:0 0 min(360px,82vw); scroll-snap-align:start;
  background:var(--deep); border:1px solid var(--line); border-radius:var(--radius);
  padding:2.2rem 2rem;
}
.rail-card-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:8px;
  background:var(--accent-deep); color:#fff;
  font-family:var(--display); font-weight:700; font-size:.98rem;
  margin-bottom:1.4rem;
}
.rail-card h3{ font-size:1.24rem; margin-bottom:.65rem; }
.rail-card p{ color:var(--muted-text); font-size:.95rem; }
.rail-nav{ display:flex; justify-content:flex-end; gap:.75rem; margin-top:-.5rem; margin-bottom:2.4rem; }
.rail-btn{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line);
  background:transparent; color:var(--paper); font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.rail-btn:hover{ background:var(--accent-deep); border-color:var(--accent-deep); color:#fff; }

/* ============================================================
   PROCESSO — 6 etapas em grade 3x2
   ============================================================ */
.processo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem 1.9rem; }
.processo-step{ position:relative; }
.processo-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:8px;
  background:var(--ink); color:var(--paper);
  font-family:var(--display); font-weight:700; font-size:1rem;
  margin-bottom:1.3rem;
}
.processo-step h3{ color:var(--ink); font-size:1.14rem; margin-bottom:.55rem; }
.processo-step p{ color:var(--slate-paper); font-size:.93rem; }

/* ============================================================
   INDICADORES — faixa de estatísticas do banner
   ============================================================ */
.indicadores{ padding:96px 0; }
.indic-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center; }
.indic-item{ position:relative; padding:0 1rem; }
.indic-item + .indic-item::before{
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--line-soft);
}
.indic-value{
  display:flex; align-items:baseline; justify-content:center; gap:.2rem;
  font-family:var(--display); font-weight:700; color:var(--accent);
  font-size:clamp(2.2rem,4.4vw,3.3rem);
}
/* .5em/600 no mobile computava 17.6px/peso 600 herdando --accent cru
   sobre --ink = 4.37:1 (reprova AA por 0.13). .56em/700 leva o glifo a
   ~19.7px em peso 700, que entra na faixa de "texto grande" (limite
   3:1) sem trocar a cor do "%" em relacao ao numero ao lado. */
.indic-value .unit{ font-size:.56em; font-weight:700; margin-left:.15rem; }
.indic-label{
  display:block; margin-top:.8rem; font-size:.86rem; font-weight:500;
  color:var(--muted-text); max-width:20ch; margin-left:auto; margin-right:auto;
}

/* ============================================================
   FORMATOS DE CONTRATAÇÃO — Projeto / Retainer / In-company
   ============================================================ */
.formatos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.formato-card{
  background:#fff; border:1px solid var(--line-ink); border-radius:var(--radius);
  padding:2.2rem 1.9rem; transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.formato-card:hover{ border-color:var(--accent); transform:translateY(-3px); }
.formato-tag{
  display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-deep); margin-bottom:1.1rem;
}
.formato-card h3{ color:var(--ink); font-size:1.3rem; margin-bottom:.75rem; }
.formato-card p{ color:var(--slate-paper); font-size:.95rem; }

/* ============================================================
   DEPOIMENTOS
   ============================================================ */
.depo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.depo-card{
  background:var(--deep); border-radius:var(--radius); padding:2.4rem 2.2rem;
  border-top:3px solid var(--accent);
}
.depo-card p{
  font-size:1.1rem; line-height:1.55; color:var(--paper); margin-bottom:1.6rem;
}
.depo-card cite{ display:block; font-style:normal; font-weight:700; color:var(--paper); font-size:.96rem; }
.depo-card cite span{ display:block; margin-top:.2rem; font-weight:400; color:var(--muted-text); font-size:.87rem; }

/* ============================================================
   CONTATO
   ============================================================ */
.contato-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:3.5rem; align-items:start; }
.contato-list{ margin-top:1.9rem; display:flex; flex-direction:column; gap:1.1rem; }
.contato-list li{ font-size:.98rem; color:var(--paper); }
.contato-list strong{
  display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--accent-text); font-weight:600; margin-bottom:.2rem;
}
.contato-list a:hover{ color:var(--accent-text); text-decoration:underline; }

.contato-form{ border-top:1px solid var(--line-soft); padding-top:2rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
.form-group{ margin-bottom:1.5rem; display:flex; flex-direction:column; gap:.5rem; }
.form-group label{
  font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text);
}
.form-group input, .form-group select, .form-group textarea{
  border:none; border-bottom:1.5px solid var(--line); border-radius:0; padding:.65rem .1rem;
  font-family:var(--body); font-size:.98rem; color:var(--paper); background:transparent;
  transition:border-color .2s var(--ease);
}
.form-group select{ appearance:none; }
.form-group select option{ background:var(--ink); color:var(--paper); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:none; border-color:var(--accent); }
.form-group input::placeholder, .form-group textarea::placeholder{ color:var(--muted-text); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:var(--muted-text); border-top:1px solid var(--line-soft); }
.footer-container{
  max-width:1210px; margin:0 auto; padding:80px 1.75rem 2.5rem;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem;
}
.footer-brand{ display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.footer-brand .mark-img{ height:26px; width:auto; display:block; }
.footer-brand span{ font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--paper); }
.footer-tagline{ font-size:.9rem; max-width:32ch; color:var(--muted-text); }
.footer-col h4{
  color:var(--paper); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.15rem;
}
.footer-col ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer-col a{ font-size:.9rem; color:var(--muted-text); transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--accent-text); }
.footer-col li{ font-size:.9rem; }
.footer-bottom{
  border-top:1px solid var(--line-soft);
  max-width:1210px; margin:0 auto; padding:1.5rem 1.75rem 2.25rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem;
}
.footer-bottom p{ font-size:.82rem; color:var(--muted-text); }
/* Bloco inferior em duas linhas, centralizado — os outros sites usam
   uma linha so com copyright e aviso lado a lado. */
.footer-bottom--stacked{ flex-direction:column; align-items:center; text-align:center; gap:.45rem; }
/* ".footer-bottom p" tinha mais especificidade que ".footer-note" sozinho
   e vencia a cascata mesmo sem !important — o aviso rendia no mesmo
   tamanho do copyright. Seletor mais especifico corrige isso.
   Contraste: rgba(146,156,168,.9) sobre #1B1F24 = 5.11:1 (AA). */
.footer-bottom .footer-note{ font-size:.8rem; color:rgba(146,156,168,.9); letter-spacing:.01em; }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-page{ padding:calc(var(--nav-h) + 64px) 0 100px; min-height:70vh; background:var(--ink); }
.legal-container{ max-width:760px; margin:0 auto; padding:0 1.75rem; }
.back-link{ display:inline-block; margin-bottom:2rem; color:var(--accent-text); font-weight:600; font-size:.92rem; }
.back-link:hover{ text-decoration:underline; }
.legal-container h1{ font-size:2.1rem; margin-bottom:.5rem; color:var(--paper); }
.legal-updated{ color:var(--muted-text); font-size:.88rem; margin-bottom:2.25rem; }
.legal-container h2{ font-size:1.16rem; margin:2rem 0 .75rem; color:var(--paper); font-family:var(--display); }
.legal-container p{ color:var(--muted-text); margin-bottom:.5rem; font-size:.98rem; }
.legal-container a{ color:var(--accent-text); font-weight:600; }
.legal-container a:hover{ text-decoration:underline; }
.legal-container ul{ margin:.5rem 0 1rem 1.2rem; list-style:disc; color:var(--muted-text); font-size:.98rem; }
.legal-container li{ margin-bottom:.4rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .footer-container{ grid-template-columns:1fr 1fr; row-gap:2.5rem; }
  .processo-grid{ grid-template-columns:1fr 1fr; }
  .formatos-grid{ grid-template-columns:1fr; }
  .indic-grid{ grid-template-columns:1fr; row-gap:2.5rem; }
  .indic-item + .indic-item::before{ display:none; }
}

@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-links.open{
    display:flex; flex-direction:column; position:fixed; top:calc(var(--nav-h) + 22px); left:14px; right:14px;
    background:var(--ink); padding:1.5rem 1.75rem; gap:1.1rem; border-radius:14px;
    box-shadow:0 16px 30px -18px rgba(0,0,0,.5); border:1px solid var(--line-soft);
    max-height:calc(100vh - var(--nav-h) - 30px); overflow-y:auto;
  }
  .nav-cta{ display:none; }

  .hero .container{ grid-template-columns:1fr; padding-top:calc(var(--nav-h) + 56px); text-align:left; }

  .processo-grid{ grid-template-columns:1fr; }
  .depo-grid{ grid-template-columns:1fr; }
  .contato-grid{ grid-template-columns:1fr; }
}

/* Tabela Antes/Depois empilhada: nada de segunda barra de rolagem lateral
   no mobile — o carrossel de serviços continua sendo a única. */
@media (max-width:700px){
  .comparativo-table, .comparativo-table thead, .comparativo-table tbody,
  .comparativo-table tr, .comparativo-table th, .comparativo-table td{
    display:block; width:100%;
  }
  .comparativo-table thead{ display:none; }
  .comparativo-table tbody tr{ border-top:1px solid var(--line-ink); }
  .comparativo-table tbody tr:first-child{ border-top:none; }
  .comparativo-table tbody th{ border-top:none; padding-bottom:.5rem; white-space:normal; }
  .comparativo-table tbody td{ border-top:none; padding-top:.4rem; padding-bottom:.4rem; }
  .comparativo-table tbody td::before{
    content:attr(data-label); display:block; font-size:.72rem; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; margin-bottom:.3rem;
  }
  .comparativo-table tbody td:not(.col-depois)::before{ color:var(--slate-paper); }
  .comparativo-table tbody td.col-depois::before{ color:var(--accent-deep); }
  .comparativo-table tbody tr:nth-child(odd) td:not(.col-depois){ background:#fff; }
  .comparativo-table tbody tr:nth-child(even) td:not(.col-depois){ background:var(--paper); }
}

@media (max-width:640px){
  .section-pad{ padding:76px 0; }
  .rail-card{ flex-basis:86vw; }
  .form-row{ grid-template-columns:1fr; }
  .footer-container{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; }
}