/* =========================================================
   J. MARQUEZAN — DESIGN SYSTEM
   Tipografia: Archivo (títulos) · Instrument Serif (números,
   citações) · Inter (corpo). Layout editorial com filetes;
   cards apenas onde há navegação real.
   ========================================================= */

:root{
  /* ---- fontes ---- */
  --f-display:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --f-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-serif:'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  /* ---- cor ---- */
  --wine:#5F111A;
  --wine-deep:#3A090F;
  --wine-mid:#6E1420;
  --wine-light:#7E1926;
  --accent:#FF8090;
  --accent-dark:#8F1220;

  --light:#FFFFFF;
  --light-alt:#F6F2F1;
  --ink:#160A0D;
  --ink-soft:#584649;
  --ink-faint:#766869;

  --white:#ffffff;
  --muted:rgba(255,255,255,0.76);
  --muted-dim:rgba(255,255,255,0.54);
  --line-d:rgba(255,255,255,0.15);
  --line-d-soft:rgba(255,255,255,0.08);
  --line-l:rgba(22,10,13,0.13);
  --line-l-soft:rgba(22,10,13,0.07);

  /* ---- escala tipográfica ---- */
  --t-display:clamp(2.3rem, 5.6vw, 4.2rem);
  --t-h1:clamp(2.25rem, 4.7vw, 3.5rem);
  --t-h2:clamp(1.85rem, 3.5vw, 2.7rem);
  --t-h3:1.0625rem;
  --t-lead:clamp(1.06rem, 1.3vw, 1.22rem);
  --t-body:1.0625rem;
  --t-small:0.9375rem;
  --t-micro:0.75rem;

  /* ---- ritmo vertical (variado, não uniforme) ---- */
  --sp-xs:clamp(48px, 6vw, 74px);
  --sp-sm:clamp(64px, 7.5vw, 98px);
  --sp-md:clamp(84px, 9.5vw, 130px);
  --sp-lg:clamp(104px, 12.5vw, 172px);
  --sp-xl:clamp(136px, 16vw, 227px);
  /* espaçamento dentro de componente, mesma razão de ~1.45 entre passos.
     Antes havia 96, 76, 60, 48, 46, 44, 38, 34, 30 e 28px cravados à mão
     em lugares diferentes — dez valores para o mesmo tipo de folga. */
  --g1:12px; --g2:18px; --g3:26px; --g4:38px; --g5:56px; --g6:80px;

  --radius:4px;
  --radius-lg:6px;
  --maxw:1240px;
  --maxw-narrow:780px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  font-family:var(--f-body);
  background:var(--wine);
  color:var(--white);
  font-size:var(--t-body);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1, "liga" 1;
}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-0.032em;   /* tracking fechado: o que dá o ar editorial */
}
h1{font-size:var(--t-h1);}
h2{font-size:var(--t-h2);}
h3{font-size:var(--t-h3); font-weight:600; letter-spacing:-0.014em; line-height:1.32;}
p{text-wrap:pretty;}
h1,h2{text-wrap:balance;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block; height:auto;}
ul,ol{list-style:none;}
button{font:inherit; color:inherit;}
::selection{background:var(--accent); color:var(--wine-deep);}

/* números e citações em serifa — o contraste editorial do sistema */
.serif{font-family:var(--f-serif); font-weight:400; letter-spacing:-0.01em;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 34px; position:relative; z-index:2;}
.wrap-narrow{max-width:var(--maxw-narrow); margin:0 auto; padding:0 34px; position:relative; z-index:2;}
section{position:relative;}
/* o header é fixo: sem isso o topo da seção para atrás dele ao clicar numa âncora */
section[id], main[id]{scroll-margin-top:86px;}
.pad-sm{padding:var(--sp-sm) 0;}
.pad-md{padding:var(--sp-md) 0;}
.pad-lg{padding:var(--sp-lg) 0;}
.pad-xl{padding:var(--sp-xl) 0;}
.pad-xs{padding:var(--sp-xs) 0;}
.section-pad{padding:var(--sp-md) 0;}   /* compat */

/* ---------- foco ---------- */
:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:2px;}
.s-light :focus-visible, .s-light-alt :focus-visible{outline-color:var(--accent-dark);}

.skip-link{
  position:absolute; left:16px; top:-64px; z-index:300;
  background:#fff; color:var(--wine); padding:12px 22px;
  font-weight:600; transition:top .2s var(--ease);
}
.skip-link:focus{top:0;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* =========================================================
   TEMAS DE SEÇÃO
   ========================================================= */
.s-dark{background:var(--wine); color:#fff; position:relative; overflow:hidden;}
.s-dark::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(ellipse 1000px 560px at 86% -8%, rgba(255,255,255,0.07), transparent 62%),
    radial-gradient(ellipse 780px 560px at -6% 106%, rgba(0,0,0,0.32), transparent 62%);
}
.s-deep{background:var(--wine-deep); color:#fff; position:relative; overflow:hidden;}
.s-light{background:var(--light); color:var(--ink);}
.s-light-alt{background:var(--light-alt); color:var(--ink);}
.pnet{position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block;}

/* =========================================================
   RÓTULOS E CABEÇALHOS
   ========================================================= */
.eyebrow{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  font-size:var(--t-micro); font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  margin-bottom:var(--g3);
}
.s-dark .eyebrow, .s-deep .eyebrow{color:var(--accent);}
.s-light .eyebrow, .s-light-alt .eyebrow{color:var(--accent-dark);}

/* NÃO usar 'ch' aqui: a unidade resolve na fonte do contêiner (corpo),
   não na do título — o que espremeria os h2. Limite fica no próprio h2. */
.section-head{max-width:min(100%, 760px); margin-bottom:var(--sp-xs);}
.section-head h2{margin-bottom:0; max-width:20ch;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head.center h2{margin-left:auto; margin-right:auto;}
.section-head p{font-size:var(--t-lead); margin-top:var(--g3); max-width:56ch; line-height:1.62;}
.s-dark .section-head p, .s-deep .section-head p{color:var(--muted);}
.s-light .section-head p, .s-light-alt .section-head p{color:var(--ink-soft);}

/* cabeçalho assimétrico 7/5 — quebra a simetria de template */
.head-split{
  display:grid; grid-template-columns:7fr 5fr; gap:clamp(36px,6vw,90px); align-items:start;
  margin-bottom:var(--sp-xs);
}
.head-split > div h2{max-width:18ch;}
.head-split p{font-size:var(--t-lead); max-width:46ch; line-height:1.62; padding-bottom:6px;}
.s-dark .head-split p{color:var(--muted);}
.s-light .head-split p, .s-light-alt .head-split p{color:var(--ink-soft);}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:17px 30px; border-radius:2px; font-weight:600; font-size:0.9375rem;
  letter-spacing:-0.005em; cursor:pointer; border:1px solid transparent;
  font-family:var(--f-display);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  white-space:nowrap;
}
.btn .arw{transition:transform .35s var(--ease); display:inline-block;}
.btn:hover .arw{transform:translateX(5px);}
.btn-primary{background:var(--white); color:var(--wine);}
.btn-primary:hover{background:var(--accent); color:var(--wine-deep); transform:translateY(-2px);}
.btn-outline{border-color:rgba(255,255,255,0.34); color:#fff;}
.btn-outline:hover{border-color:#fff; background:rgba(255,255,255,0.09); transform:translateY(-2px);}
.btn-wine{background:var(--wine); color:#fff;}
.btn-wine:hover{background:var(--wine-light); transform:translateY(-2px);}
.btn-sm{padding:14px 22px; font-size:0.875rem;}

/* =========================================================
   DIVISOR CURVO (discreto)
   ========================================================= */

/* =========================================================
   PROGRESSO
   ========================================================= */

/* =========================================================
   HEADER
   ========================================================= */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(58,9,15,0.92);
  border-bottom:1px solid var(--line-d-soft);
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
header.scrolled{background:rgba(58,9,15,0.985); border-bottom-color:var(--line-d);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:26px; padding:17px 34px; max-width:var(--maxw); margin:0 auto;}
/* 44px: a logo antiga tinha 32 e sumia ao lado do menu */
.logo img{height:clamp(38px, 3.4vw, 46px); width:auto;}
nav.links{display:flex; align-items:center; gap:32px;}
nav.links > a, .nav-drop > button{
  font-family:var(--f-display);
  font-size:0.875rem; font-weight:500; letter-spacing:-0.005em;
  color:rgba(255,255,255,0.84);
  transition:color .25s var(--ease); position:relative; padding:6px 0;
  background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
nav.links > a::after, .nav-drop > button::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
nav.links > a:hover::after, .nav-drop:hover > button::after, nav.links > a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left;}
nav.links > a:hover, .nav-drop:hover > button{color:#fff;}
nav.links > a[aria-current="page"]{color:var(--accent);}

.nav-drop{position:relative;}
.nav-drop > button svg{width:10px; height:10px; stroke:currentColor; fill:none; transition:transform .3s var(--ease);}
.nav-drop:hover > button svg, .nav-drop:focus-within > button svg{transform:rotate(180deg);}
.drop-panel{
  position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(-6px);
  background:var(--wine-deep); border:1px solid var(--line-d); border-radius:var(--radius);
  padding:8px; min-width:300px; opacity:0; visibility:hidden;
  box-shadow:0 26px 54px rgba(0,0,0,0.48);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
}
.nav-drop:hover .drop-panel, .nav-drop:focus-within .drop-panel{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility 0s;
}
.drop-panel a{
  display:block; padding:12px 14px; border-radius:2px; font-size:0.9rem; font-weight:500;
  font-family:var(--f-display); color:rgba(255,255,255,0.88); transition:background .22s, color .22s;
}
.drop-panel a small{display:block; font-family:var(--f-body); font-size:0.8rem; font-weight:400; color:var(--muted-dim); margin-top:3px; letter-spacing:0;}
.drop-panel a:hover{background:rgba(255,255,255,0.07); color:#fff;}

.nav-cta{display:flex; align-items:center; gap:12px;}
.icon-btn{
  width:38px; height:38px; border-radius:2px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-d); background:none; cursor:pointer; flex:none;
  transition:border-color .25s, background .25s;
}
.icon-btn:hover{border-color:var(--accent); background:rgba(255,128,144,0.13);}
.icon-btn svg{width:17px; height:17px; stroke:#fff; fill:none;}
.burger{display:none;}
.burger span{width:16px; height:1.5px; background:#fff; display:block; margin:2.6px 0;}

/* =========================================================
   HERO
   ========================================================= */
.hero{padding:clamp(158px,17vw,224px) 0 clamp(84px,10vw,132px);}
/* largura em px: as quebras do h1 já vêm definidas no HTML */
.hero-inner{max-width:min(100%, 1020px);}
.hero h1{font-size:var(--t-display); line-height:1.02; letter-spacing:-0.04em; margin-bottom:var(--g4); max-width:none;}
.hero p.lead{font-size:var(--t-lead); color:var(--muted); max-width:52ch; margin-bottom:var(--g5); line-height:1.62;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}

/* faixa de conversão no meio da página */
.cta-band{padding:clamp(44px,5vw,62px) 0;}
.cta-band-inner{
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.cta-band-inner p{
  font-family:var(--f-display); font-weight:600; letter-spacing:-0.022em;
  font-size:clamp(1.15rem,2vw,1.5rem); color:#fff; max-width:24ch;
}

.hero-inner-page{padding:clamp(138px,14vw,190px) 0 clamp(68px,8vw,104px);}
.hero-inner-page h1{font-size:var(--t-h1); max-width:16ch; margin-bottom:var(--g3); letter-spacing:-0.038em;}
.hero-inner-page > .wrap > p{font-size:var(--t-lead); color:var(--muted); max-width:54ch; line-height:1.62;}

.crumb{display:flex; align-items:center; gap:9px; font-size:0.8rem; color:var(--muted-dim); margin-bottom:var(--g3); flex-wrap:wrap;}
.crumb a{transition:color .2s;}
.crumb a:hover{color:var(--accent);}
.crumb svg{width:11px; height:11px; stroke:currentColor; fill:none; opacity:.55;}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  overflow:hidden; position:relative; padding:26px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* a animação só roda depois que o JS duplica a lista (classe .dup);
   sem JS a faixa fica estática, sem a lacuna do loop pela metade */
.marquee-track{display:flex; width:max-content;}
.marquee-track.dup{animation:slide 52s linear infinite;}
.marquee:hover .marquee-track.dup{animation-play-state:paused;}
@keyframes slide{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.marquee-item{
  display:flex; align-items:center; justify-content:center; flex:none; padding:0 26px;
}
.marquee-item img{
  width:96px; height:96px; object-fit:contain; border-radius:50%;
  transition:transform .45s var(--ease);
}
.marquee-item:hover img{transform:scale(1.07);}
.marquee-label{
  text-align:center; font-size:var(--t-micro); letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:4px;
}

/* =========================================================
   NÚMEROS — serifa grande, separados por filete
   ========================================================= */
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-l);}
.stat{padding:46px 34px 42px 0; border-right:1px solid var(--line-l);}
.stat:last-child{border-right:none; padding-right:0;}
.stat:not(:first-child){padding-left:34px;}
.stat .num{
  font-family:var(--f-serif); font-weight:400;
  font-size:clamp(3.2rem,5.6vw,4.6rem); line-height:.9; letter-spacing:-0.03em;
  color:var(--accent-dark); display:block; margin-bottom:22px;
  font-variant-numeric:lining-nums;
}
/* o número sobe e aparece junto com a contagem */
.js .stat .num{opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
.js .stat .num.counting, .js .stat .num.done{opacity:1; transform:none;}
.stat h3{font-size:0.98rem; color:var(--ink); margin-bottom:8px;}
.stat p{font-size:var(--t-small); color:var(--ink-soft); line-height:1.55;}
/* selo do ano, sobreposto ao canto */
.about-text p{color:var(--muted); font-size:var(--t-lead); line-height:1.62; margin-bottom:20px; max-width:46ch;}
.about-text p strong{color:#fff; font-weight:600;}
.about-text .about-hl{
  font-family:var(--f-serif); font-size:clamp(1.24rem,1.9vw,1.55rem);
  line-height:1.36; color:#fff; letter-spacing:-0.012em;
  border-left:2px solid var(--accent); padding-left:22px; margin:28px 0;
}

/* pilares: grid horizontal com filete no topo */

/* lista usada em "para quem é" nas páginas de serviço */
.about-split{display:grid; grid-template-columns:5fr 7fr; gap:clamp(40px,7vw,104px); align-items:start;}
.about-split .lead-txt h2{max-width:15ch;}
.about-split .lead-txt p{color:var(--ink-soft); font-size:var(--t-lead); margin-top:var(--g3); max-width:44ch; line-height:1.62;}
.about-list{display:grid;}
.about-list li{
  padding:30px 0; border-top:1px solid var(--line-l-soft);
  display:grid; grid-template-columns:56px 1fr; gap:24px; align-items:baseline;
}
.about-list li:last-child{border-bottom:1px solid var(--line-l-soft);}
.about-list .idx{font-family:var(--f-serif); font-size:1.24rem; color:var(--accent-dark); line-height:1;}
.about-list h3{font-size:1.02rem; margin-bottom:9px; color:var(--ink);}
.about-list p{font-size:var(--t-small); color:var(--ink-soft); line-height:1.6;}
.about-list .fw-item{
  font-family:var(--f-display); font-weight:500; font-size:1.02rem;
  letter-spacing:-0.014em; line-height:1.42; color:var(--ink); max-width:46ch;
}

/* =========================================================
   DIFERENCIAIS — filete + ícone sem caixa
   ========================================================= */
.diff-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.diff-card{
  position:relative; padding:38px 30px 8px 0; border-top:1px solid var(--line-l);
}
.diff-card + .diff-card{padding-left:30px; border-left:1px solid var(--line-l-soft);}
.diff-card::before{
  content:""; position:absolute; top:-1px; left:0; height:1px; width:100%;
  background:var(--accent-dark); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.diff-card:hover::before{transform:scaleX(1);}
.diff-card + .diff-card::before{left:30px; width:calc(100% - 30px);}
.diff-icon{margin-bottom:var(--g3);}
.diff-icon svg{width:26px; height:26px; stroke:var(--accent-dark); fill:none; transition:transform .45s var(--ease);}
.diff-card:hover .diff-icon svg{transform:translateY(-3px);}
.diff-card h3{font-size:1.02rem; margin-bottom:12px; color:var(--ink); max-width:16ch;}
.diff-card p{font-size:var(--t-small); color:var(--ink-soft); line-height:1.6; max-width:34ch;}
.svc-card .stretch:focus-visible{outline:none;}
.svc-card .stretch{position:absolute; inset:0; z-index:4;}

/* =========================================================
   METODOLOGIA / ESCOPO — passos com numeral serifado
   ========================================================= */
.method-inner{display:grid; grid-template-columns:4fr 8fr; gap:clamp(40px,7vw,100px); align-items:start;}
.method-sticky{position:sticky; top:130px;}
.method-sticky h2{max-width:14ch;}
.method-sticky p{color:var(--ink-soft); font-size:var(--t-lead); margin-top:var(--g3); max-width:38ch; line-height:1.62;}
/* Linha do tempo: um trilho vertical que se preenche conforme a rolagem,
   com cada etapa acendendo ao ser alcançada. */
/* Trilho por pseudo-elemento: inserir um <span> dentro do <ol> seria HTML
   inválido e ainda entraria no escalonamento do data-stagger. */
.method-steps{display:grid; position:relative;}
.method-steps::before{
  content:""; position:absolute; left:6px; top:38px; bottom:38px; width:2px;
  background:var(--line-l); z-index:0; pointer-events:none;
}
.method-steps::after{
  content:""; position:absolute; left:6px; top:38px; width:2px;
  height:var(--fill, 0px); background:var(--accent-dark); z-index:1;
  pointer-events:none; transition:height 1.1s var(--ease-out);
}
.s-dark .method-steps::before{background:var(--line-d-soft);}
.s-dark .method-steps::after{background:var(--accent);}
/* sem JS não há preenchimento: os números já entram acesos */
.no-js .method-step .mnum{color:var(--accent-dark);}
.no-js .s-dark .method-step .mnum{color:var(--accent);}

.method-step{
  display:grid; grid-template-columns:36px 92px 1fr; gap:0 26px; align-items:start;
  padding:34px 0; border-top:1px solid var(--line-l); position:relative;
}
.method-step:last-child{border-bottom:1px solid var(--line-l);}

/* marcador no trilho */
.method-step::before{
  content:""; width:14px; height:14px; border-radius:50%; margin-top:12px;
  background:var(--light); border:2px solid var(--line-l); position:relative; z-index:2;
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.s-light-alt .method-step::before{background:var(--light-alt);}
.s-dark .method-step::before{background:var(--wine); border-color:rgba(255,255,255,0.22);}
.method-step.on::before{background:var(--accent-dark); border-color:var(--accent-dark); transform:scale(1.2);}
.s-dark .method-step.on::before{background:var(--accent); border-color:var(--accent);}

.method-step .mnum{
  font-family:var(--f-serif); font-weight:400; font-size:3.1rem; line-height:.82;
  color:var(--line-l); letter-spacing:-0.03em;
  transition:color .55s var(--ease), transform .55s var(--ease);
  transform-origin:left center;
}
.method-step.on .mnum{color:var(--accent-dark); transform:scale(1.06);}
.s-dark .method-step .mnum{color:rgba(255,255,255,0.22);}
.s-dark .method-step.on .mnum{color:var(--accent);}

.method-step h3{font-size:1.14rem; margin-bottom:10px; color:var(--ink); transition:color .45s var(--ease);}
.method-step p{font-size:var(--t-small); color:var(--ink-soft); max-width:58ch; line-height:1.62;}
.s-dark .method-step{border-color:var(--line-d-soft);}
.s-dark .method-step h3{color:#fff;}
.s-dark .method-step p{color:var(--muted);}

/* o passo em foco no hover ganha um leve avanço */
.method-step > div{transition:transform .45s var(--ease);}
.method-step:hover > div{transform:translateX(5px);}

/* =========================================================
   FAQ
   ========================================================= */
.faq-wrap{display:grid; max-width:900px;}
.faq{border-top:1px solid var(--line-l);}
.faq:last-child{border-bottom:1px solid var(--line-l);}
.faq summary{
  list-style:none; cursor:pointer; padding:30px 52px 30px 0; position:relative;
  font-family:var(--f-display); font-weight:600; font-size:1.06rem; letter-spacing:-0.018em;
  color:var(--ink); line-height:1.4; transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--accent-dark);}
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:1px;
  background:currentColor; opacity:.55;
}
.faq summary::before{
  content:""; position:absolute; right:11px; top:50%; width:1px; height:11px;
  background:currentColor; opacity:.55; transform:translateY(-50%);
  transition:transform .35s var(--ease), opacity .3s;
}
.faq[open] summary::before{transform:translateY(-50%) rotate(90deg); opacity:0;}
.faq[open] summary{color:var(--accent-dark);}
.faq .faq-body{padding:0 60px 32px 0;}
.faq .faq-body p{font-size:var(--t-body); color:var(--ink-soft); max-width:64ch; line-height:1.68;}
.faq .faq-body p + p{margin-top:14px;}
.s-dark .faq{border-color:var(--line-d-soft);}
.s-dark .faq summary{color:#fff;}
.s-dark .faq summary:hover, .s-dark .faq[open] summary{color:var(--accent);}
.s-dark .faq .faq-body p{color:var(--muted);}

/* =========================================================
   ARTIGOS / OUTROS SERVIÇOS — cards (navegação real)
   ========================================================= */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-l); border:1px solid var(--line-l);}
.post{
  background:var(--light); padding:34px 30px 30px; display:flex; flex-direction:column; gap:16px;
  position:relative; transition:background .35s var(--ease);
  min-height:210px;
}
.s-light-alt .post{background:var(--light-alt);}
.post:hover{background:var(--light-alt);}
.s-light-alt .post:hover{background:#fff;}
.post .tag{font-size:var(--t-micro); letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-dark); font-weight:600;}
.post h3{font-size:1.12rem; color:var(--ink); flex:1; letter-spacing:-0.022em; line-height:1.34;}
.post .meta{font-size:var(--t-small); color:var(--ink-faint);}

/* =========================================================
   FORMULÁRIO
   ========================================================= */
.contact-split{display:grid; grid-template-columns:5fr 7fr; gap:clamp(40px,7vw,96px); align-items:start;}
.contact-aside h2{max-width:15ch;}
.contact-aside > p{color:var(--muted); font-size:var(--t-lead); margin:26px 0 40px; max-width:42ch; line-height:1.62;}
.contact-points{display:grid; gap:0;}
.contact-points li{
  display:grid; grid-template-columns:20px 1fr; gap:16px; align-items:start;
  font-size:var(--t-small); color:var(--muted); padding:17px 0; border-top:1px solid var(--line-d-soft);
}
.contact-points li:last-child{border-bottom:1px solid var(--line-d-soft);}
.contact-points svg{width:17px; height:17px; stroke:var(--accent); fill:none; margin-top:4px;}

.form-card{border:1px solid var(--line-d); padding:clamp(28px,3.4vw,44px); background:rgba(0,0,0,0.13);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.field{margin-bottom:20px;}
.field label{
  display:block; font-family:var(--f-display); font-size:0.8rem; font-weight:500;
  letter-spacing:0.04em; text-transform:uppercase; margin-bottom:10px; color:rgba(255,255,255,0.78);
}
.field label .req{color:var(--accent);}
.field input, .field select, .field textarea{
  width:100%; padding:14px 0; border-radius:0; font:inherit; font-size:var(--t-small);
  background:transparent; border:none; border-bottom:1px solid var(--line-d); color:#fff;
  transition:border-color .3s var(--ease);
}
.field textarea{min-height:104px; resize:vertical;}
.field input::placeholder, .field textarea::placeholder{color:rgba(255,255,255,0.46);}
.field input:focus, .field select:focus, .field textarea:focus{border-bottom-color:var(--accent); outline:none;}
.field select{
  appearance:none; cursor:pointer; padding-right:30px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center; background-size:15px;
}
.field select option{background:var(--wine-deep); color:#fff;}
.field .err{display:none; font-size:var(--t-small); color:var(--accent); margin-top:8px;}
.field.invalid input, .field.invalid select, .field.invalid textarea{border-bottom-color:var(--accent);}
.field.invalid .err{display:block;}
.form-note{font-size:var(--t-small); color:var(--muted-dim); margin-top:20px; line-height:1.55;}
.form-msg{display:none; margin-top:20px; padding:16px 18px; font-size:var(--t-small); background:rgba(255,128,144,0.13); border-left:2px solid var(--accent); color:#fff;}
.form-msg.show{display:block;}
.form-msg.erro{background:rgba(255,128,144,0.06); border-left-color:#FFB3BE;}

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta-final{padding:clamp(104px,13vw,176px) 0;}
.cta-final .wrap{max-width:var(--maxw);}
.cta-final h2{font-size:clamp(2rem,4.2vw,3.2rem); letter-spacing:-0.036em; max-width:17ch; margin-bottom:var(--g3);}
.cta-final p{color:var(--muted); font-size:var(--t-lead); margin-bottom:var(--g5); max-width:48ch; line-height:1.62;}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* =========================================================
   FOOTER
   ========================================================= */
footer{background:var(--wine-deep); border-top:1px solid var(--line-d-soft); padding:clamp(60px,7vw,88px) 0 32px;}
.footer-grid{display:grid; grid-template-columns:5fr 3fr 3fr 3fr; gap:clamp(30px,4vw,52px); padding-bottom:var(--g5); border-bottom:1px solid var(--line-d-soft);}
/* sem width:auto a imagem mantinha os 900px do atributo width e a altura
   de 30px do CSS — resultado: logo achatada. */
.footer-brand img{height:42px; width:auto; margin-bottom:var(--g3);}
.footer-brand p{font-size:var(--t-small); color:var(--muted-dim); max-width:32ch; line-height:1.6;}
.foot-badge{
  display:inline-flex; align-items:center; margin-top:var(--g3); font-size:var(--t-micro);
  color:var(--muted-dim); border:1px solid var(--line-d); padding:7px 13px;
  letter-spacing:0.12em; text-transform:uppercase;
}
.footer-col h3{
  font-family:var(--f-display); font-size:var(--t-micro); text-transform:uppercase;
  letter-spacing:0.17em; color:#fff; margin-bottom:22px; font-weight:600;
}
.footer-col li{margin-bottom:13px;}
.footer-col a, .footer-col span{font-size:var(--t-small); color:var(--muted-dim); transition:color .25s var(--ease);}
.footer-col a:hover{color:var(--accent);}
.social-row{display:flex; gap:10px; margin-top:var(--g3);}
.social-row a{
  width:36px; height:36px; border-radius:2px; border:1px solid var(--line-d);
  display:flex; align-items:center; justify-content:center; transition:border-color .25s, background .25s;
}
.social-row a:hover{border-color:var(--accent); background:rgba(255,128,144,0.13);}
.social-row svg{width:15px; height:15px; stroke:#fff; fill:none;}
.foot-bottom{display:flex; justify-content:space-between; padding-top:var(--g3); font-size:var(--t-micro); color:rgba(255,255,255,0.42); flex-wrap:wrap; gap:10px; letter-spacing:0.02em;}
.pending{color:var(--accent); opacity:.8;}

/* =========================================================
   ANIMAÇÕES (deslocamento curto — menos "efeito")
   ========================================================= */
.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}
.js .reveal.in{opacity:1; transform:none;}
.js [data-stagger] > *{opacity:0; transform:translateY(14px); transition:opacity .75s var(--ease-out), transform .75s var(--ease-out);}
.js [data-stagger].in > *{opacity:1; transform:none;}

/* Título do hero: as linhas já vêm quebradas no HTML.
   A máscara (overflow:hidden) só entra em telas largas, onde cada linha
   cabe inteira — se a linha quebrasse dentro da máscara, o texto seria
   cortado. Abaixo de 900px o h1 usa fade simples. */
.split-line{display:block;}
.js .hero-title{opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}
.js .hero-title.in{opacity:1; transform:none;}

@media (min-width:901px){
  .js .hero-title{opacity:1; transform:none; transition:none;}
  .js .hero-title .split-line{overflow:hidden; padding-bottom:0.06em;}
  .js .hero-title .split-line > span{display:block; transform:translateY(104%); transition:transform 1.05s var(--ease-out);}
  .js .hero-title.in .split-line > span{transform:none;}
}

/* =========================================================
   BRILHO DO CURSOR
   ========================================================= */

/* =========================================================
   WHATSAPP
   ========================================================= */
.wa-float{
  position:fixed; bottom:26px; right:26px; z-index:95; width:54px; height:54px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,0.42); transition:transform .28s var(--ease);
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:25px; height:25px; fill:#fff;}

/* =========================================================
   MENU MOBILE
   ========================================================= */
.mobile-menu{
  position:fixed; inset:0; background:var(--wine-deep); z-index:99;
  display:flex; flex-direction:column; justify-content:center; padding:0 34px;
  transform:translateY(-100%); visibility:hidden;
  transition:transform .5s var(--ease-out), visibility 0s linear .5s; overflow-y:auto;
}
.mobile-menu.open{transform:translateY(0); visibility:visible; transition:transform .5s var(--ease-out), visibility 0s;}
.mobile-menu nav{display:flex; flex-direction:column; max-width:520px; width:100%; margin:0 auto;}
.mobile-menu nav > a{
  font-family:var(--f-display); font-size:1.6rem; font-weight:600; letter-spacing:-0.03em;
  padding:15px 0; border-bottom:1px solid var(--line-d-soft);
}
.mobile-menu .mm-group{padding:20px 0 8px;}
.mobile-menu .mm-group span{font-size:var(--t-micro); letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:14px;}
.mobile-menu .mm-group a{display:block; font-size:1rem; color:var(--muted); padding:9px 0;}
.mobile-menu .btn{margin-top:var(--g3); align-self:flex-start;}
.mobile-close{position:absolute; top:22px; right:28px; background:none; border:none; color:#fff; font-size:32px; cursor:pointer; line-height:1; width:44px; height:44px;}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1100px){
            .diff-grid{grid-template-columns:repeat(2,1fr);}
  .diff-card + .diff-card{padding-left:0; border-left:none;}
  .diff-card + .diff-card::before{left:0; width:100%;}
  .diff-card:nth-child(2n){padding-left:30px; border-left:1px solid var(--line-l-soft);}
  .diff-card:nth-child(2n)::before{left:30px; width:calc(100% - 30px);}
  .method-inner, .about-split, .contact-split, .head-split{grid-template-columns:1fr; gap:34px;}
  .method-sticky{position:static;}
  .head-split{align-items:start;}
  .post-grid{grid-template-columns:1fr 1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stat{padding-right:24px;}
  .stat:nth-child(2n){border-right:none; padding-right:0;}
  .stat:nth-child(2n+1){padding-left:0;}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line-l);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:880px){
  nav.links{display:none;}
  .burger{display:flex; flex-direction:column;}
  .post-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  :root{--t-body:1rem;}
  .wrap, .wrap-narrow{padding:0 22px;}
  .hero-inner{max-width:none;}
        .cta-band-inner{flex-direction:column; align-items:flex-start; gap:20px;}
        .marquee-item{padding:0 16px;}
  .marquee-item img{width:74px; height:74px;}
  .diff-grid, .stats-grid{grid-template-columns:1fr;}
  .diff-card, .diff-card + .diff-card, .diff-card:nth-child(2n){padding-left:0; border-left:none;}
  .diff-card::before, .diff-card + .diff-card::before, .diff-card:nth-child(2n)::before{left:0; width:100%;}
  .stat{border-right:none; padding:34px 0; border-bottom:1px solid var(--line-l);}
  .stat:not(:first-child){padding-left:0;}
  .field-row{grid-template-columns:1fr;}
    .method-step{grid-template-columns:24px 54px 1fr; gap:0 14px;}
  .method-step .mnum{font-size:2rem;}
  .method-step::before{width:11px; height:11px; margin-top:9px;}
  .method-steps::before, .method-steps::after{left:5px;}
  .about-list li{grid-template-columns:40px 1fr; gap:16px;}
  .footer-grid{grid-template-columns:1fr;}
  .faq summary{font-size:0.98rem; padding-right:40px;}
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .reveal, .js [data-stagger] > *{opacity:1 !important; transform:none !important; transition:none !important;}
  .js .hero-title .split-line > span{transform:none !important;}
  .marquee-track{animation:none;}
    *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

/* marcador de check no "para quem é" */
.about-list .idx svg{width:17px; height:17px; stroke:var(--accent-dark); fill:none; display:block;}
.about-list li:has(.idx svg){align-items:start;}

/* card de serviço na navegação entre páginas */
.post-svc{padding-top:var(--g3);}
.post-svc .svc-mark{display:block; margin-bottom:4px;}
.post-svc .svc-mark svg{width:26px; height:26px; stroke:var(--accent-dark); fill:none; transition:transform .4s var(--ease);}
.post-svc:hover .svc-mark svg{transform:translateY(-3px);}

/* =========================================================
   BLOG — listagem
   ========================================================= */
.blog-lead{max-width:56ch; font-size:var(--t-lead); color:var(--muted); line-height:1.62;}

/* post em destaque */
.post-featured{
  display:grid; grid-template-columns:7fr 5fr; gap:clamp(30px,5vw,72px);
  align-items:center; padding:44px 0; border-top:1px solid var(--line-l);
  border-bottom:1px solid var(--line-l); position:relative;
  transition:background .4s var(--ease);
}
.post-featured:hover{background:var(--light-alt);}
.post-featured .cover{
  aspect-ratio:16/10; background:linear-gradient(150deg, var(--wine-mid), var(--wine-deep));
  position:relative; overflow:hidden; order:2;
}
.post-featured .cover canvas{position:absolute; inset:0; width:100%; height:100%;}
.post-featured .txt{order:1;}
.post-featured h2{font-size:clamp(1.5rem,2.6vw,2.15rem); margin:14px 0 16px; max-width:20ch;}
.post-featured p{color:var(--ink-soft); font-size:1rem; max-width:52ch; line-height:1.62;}
.post-featured .stretch{position:absolute; inset:0; z-index:4;}

/* grid de artigos */
.post-list{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.post-item{
  padding:38px 32px 34px 0; border-top:1px solid var(--line-l); position:relative;
  display:flex; flex-direction:column; gap:12px; min-height:250px;
  transition:background .35s var(--ease);
}
.post-item + .post-item{padding-left:32px; border-left:1px solid var(--line-l-soft);}
.post-item::before{
  content:""; position:absolute; top:-1px; left:0; height:1px; width:100%;
  background:var(--accent-dark); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.post-item:hover::before{transform:scaleX(1);}
.post-item + .post-item::before{left:32px; width:calc(100% - 32px);}
.post-item h3{font-size:1.14rem; color:var(--ink); line-height:1.34; flex:1;}
.post-item p{font-size:var(--t-small); color:var(--ink-soft); line-height:1.6;}
.post-item .stretch{position:absolute; inset:0; z-index:4;}

/* etiqueta de categoria e metadados */
.post-cat{
  font-size:var(--t-micro); letter-spacing:0.15em; text-transform:uppercase;
  color:var(--accent-dark); font-weight:600;
}
.post-meta{
  font-size:var(--t-small); color:var(--ink-faint); display:flex; gap:14px; flex-wrap:wrap;
  align-items:center;
}
.post-meta span + span::before{content:"·"; margin-right:14px; opacity:.6;}
.post-arrow{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--f-display);
  font-weight:600; font-size:0.875rem; color:var(--accent-dark); margin-top:4px;
}
.post-arrow svg{width:14px; height:14px; stroke:currentColor; fill:none; transition:transform .3s var(--ease);}
.post-featured:hover .post-arrow svg, .post-item:hover .post-arrow svg{transform:translateX(5px);}

/* aviso de blog ainda sem publicações */
.blog-empty{
  border:1px dashed var(--line-l); padding:44px 38px; text-align:center; margin-top:var(--g4);
}
.blog-empty p{color:var(--ink-soft); font-size:var(--t-small); max-width:56ch; margin:0 auto;}

/* =========================================================
   ARTIGO
   ========================================================= */
.article-head{max-width:820px;}
.article-head h1{font-size:clamp(1.95rem,3.8vw,3rem); margin:16px 0 22px; letter-spacing:-0.035em;}
.article-head .post-meta{color:var(--muted-dim);}
.article-head .post-cat{color:var(--accent);}
.article-resumo{
  font-family:var(--f-serif); font-size:clamp(1.2rem,1.9vw,1.5rem); line-height:1.45;
  color:#fff; max-width:46ch; margin-top:8px; letter-spacing:-0.012em;
}

.article-wrap{display:grid; grid-template-columns:1fr 250px; gap:clamp(40px,6vw,88px); align-items:start;}

/* sumário lateral */
.toc{position:sticky; top:120px;}
.toc h2{
  font-family:var(--f-display); font-size:var(--t-micro); letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px; font-weight:600;
}
.toc ol{display:grid; gap:0;}
.toc li{border-top:1px solid var(--line-l);}
.toc li:last-child{border-bottom:1px solid var(--line-l);}
.toc a{
  display:block; padding:12px 0; font-size:var(--t-small); color:var(--ink-soft);
  line-height:1.45; transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.toc a:hover{color:var(--accent-dark); padding-left:6px;}
.toc a.active{color:var(--accent-dark); font-weight:500;}

/* corpo do texto */
.article-body{max-width:70ch;}
.article-body > * + *{margin-top:22px;}
.article-body p{font-size:1.0625rem; line-height:1.78; color:var(--ink-soft);}
.article-body h2{
  font-size:clamp(1.35rem,2.2vw,1.72rem); color:var(--ink);
  margin-top:52px; letter-spacing:-0.026em; scroll-margin-top:100px;
}
.article-body h3{font-size:1.1rem; color:var(--ink); margin-top:var(--g4);}
.article-body strong{color:var(--ink); font-weight:600;}
.article-body ul{display:grid; gap:12px; margin-top:20px;}
.article-body ul li{
  position:relative; padding-left:24px; font-size:1.0625rem;
  line-height:1.7; color:var(--ink-soft);
}
.article-body ul li::before{
  content:""; position:absolute; left:2px; top:12px; width:7px; height:1px;
  background:var(--accent-dark);
}
.article-body blockquote{
  font-family:var(--f-serif); font-size:clamp(1.24rem,2vw,1.55rem); line-height:1.42;
  color:var(--ink); border-left:2px solid var(--accent-dark); padding-left:26px;
  margin:38px 0; letter-spacing:-0.012em;
}
.article-body .nota{
  background:var(--light-alt); border-left:2px solid var(--line-l);
  padding:22px 26px; font-size:var(--t-small); color:var(--ink-soft); line-height:1.65;
}

/* CTA ao fim do artigo */
.article-cta{
  border-top:1px solid var(--line-l); margin-top:var(--g5); padding-top:var(--g4);
  display:flex; gap:26px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.article-cta p{
  font-family:var(--f-display); font-weight:600; font-size:1.16rem;
  color:var(--ink); letter-spacing:-0.022em; max-width:34ch;
}

/* aviso de revisão técnica (remover quando o texto for validado) */
.rascunho{
  background:rgba(143,18,32,0.06); border:1px dashed var(--accent-dark);
  padding:16px 20px; font-size:var(--t-small); color:var(--accent-dark);
  margin-bottom:var(--g4); line-height:1.55;
}

@media (max-width:1100px){
  .post-featured{grid-template-columns:1fr; gap:26px;}
  .post-featured .cover{order:1;}
  .post-featured .txt{order:2;}
  .post-list{grid-template-columns:1fr 1fr;}
  .post-item + .post-item{padding-left:0; border-left:none;}
  .post-item + .post-item::before{left:0; width:100%;}
  .post-item:nth-child(2n){padding-left:32px; border-left:1px solid var(--line-l-soft);}
  .post-item:nth-child(2n)::before{left:32px; width:calc(100% - 32px);}
  .article-wrap{grid-template-columns:1fr; gap:0;}
  .toc{position:static; margin-bottom:var(--g4); padding-bottom:var(--g4); border-bottom:1px solid var(--line-l);}
}
@media (max-width:640px){
  .post-list{grid-template-columns:1fr;}
  .post-item, .post-item + .post-item, .post-item:nth-child(2n){padding-left:0; border-left:none; min-height:0;}
  .post-item::before, .post-item + .post-item::before, .post-item:nth-child(2n)::before{left:0; width:100%;}
  .article-cta{flex-direction:column; align-items:flex-start;}
}

/* =========================================================
   IMPRESSÃO
   ========================================================= */
@media print{
  body{background:#fff; color:#000;}
  .s-dark,.s-deep,.s-light-alt{background:#fff !important; color:#000 !important;}
  .s-dark *,.s-deep *{color:#000 !important;}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:0.75em; color:#555;}
  .pad-sm,.pad-md,.pad-lg,.section-pad{padding:24px 0;}
}

/* =========================================================
   LANDING PAGE DE CAMPANHA
   Sem menu, formulário na primeira dobra. Tráfego pago não
   deve ter rota de fuga.
   ========================================================= */
.lp-header{position:static; background:var(--wine-deep); border-bottom:1px solid var(--line-d-soft);}
.lp-header .nav{padding:16px 34px;}
.lp-header .logo img{height:40px;}
.lp-tel{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--f-display);
  font-weight:600; font-size:0.95rem; color:#fff; letter-spacing:-0.012em;
}
.lp-tel svg{width:17px; height:17px; stroke:var(--accent);}
.lp-tel:hover{color:var(--accent);}

.lp-hero{padding:clamp(56px,7vw,92px) 0 clamp(76px,9vw,116px);}
.lp-split{display:grid; grid-template-columns:1fr 440px; gap:clamp(36px,5vw,72px); align-items:center;}
.lp-txt h1{font-size:clamp(1.9rem,3.6vw,2.9rem); letter-spacing:-0.036em; margin-bottom:var(--g3); max-width:19ch;}
.lp-txt h2{font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:18px;}
.lp-sub{font-size:var(--t-lead); color:var(--muted); line-height:1.62; max-width:50ch;}

.lp-provas{display:flex; flex-wrap:wrap; gap:0; margin-top:var(--g4); border-top:1px solid var(--line-d-soft); max-width:520px;}
.lp-provas li{padding:20px 30px 0 0; font-size:var(--t-small); color:var(--muted); white-space:nowrap;}
.lp-provas li + li{padding-left:30px; border-left:1px solid var(--line-d-soft); margin-top:20px; padding-top:0;}
.lp-provas b{display:block; font-family:var(--f-serif); font-weight:400; font-size:1.9rem; line-height:1; color:var(--accent); margin-bottom:5px;}

/* formulário */
.lp-form{background:rgba(0,0,0,0.22); border:1px solid var(--line-d); padding:clamp(26px,3vw,34px);}
.lp-form-titulo{
  font-family:var(--f-display); font-weight:700; font-size:1.16rem; color:#fff;
  letter-spacing:-0.024em; margin-bottom:var(--g3); line-height:1.3;
}
.lp-form .field{margin-bottom:18px;}
.lp-form-nota{font-size:var(--t-small); color:var(--muted-dim); margin-top:16px; text-align:center; line-height:1.5;}

/* o que você recebe */
.lp-lista{display:grid; grid-template-columns:1fr 1fr; gap:0;}
.lp-item{
  display:grid; grid-template-columns:70px 1fr; gap:22px; align-items:start;
  padding:30px 34px 30px 0; border-top:1px solid var(--line-l);
}
.lp-item:nth-child(2n){padding-left:34px; border-left:1px solid var(--line-l-soft);}
.lp-num{font-family:var(--f-serif); font-size:2.4rem; line-height:.85; color:var(--accent-dark);}
.lp-item h3{font-size:1.06rem; color:var(--ink); margin-bottom:9px;}
.lp-item p{font-size:var(--t-small); color:var(--ink-soft); line-height:1.6;}

/* troca sem dor */
.lp-troca{display:grid; grid-template-columns:1fr 1fr; gap:0;}
.lp-troca-item{
  display:grid; grid-template-columns:30px 1fr; gap:20px; align-items:start;
  padding:28px 34px 28px 0; border-top:1px solid var(--line-d-soft);
}
.lp-troca-item:nth-child(2n){padding-left:34px; border-left:1px solid var(--line-d-soft);}
.lp-check svg{width:19px; height:19px; stroke:var(--accent); margin-top:3px;}
.lp-troca-item h3{font-size:1.04rem; color:#fff; margin-bottom:8px;}
.lp-troca-item p{font-size:var(--t-small); color:var(--muted); line-height:1.6;}

/* rodapé */
.lp-footer{background:var(--wine-deep); padding:30px 0; border-top:1px solid var(--line-l-soft);}
.lp-foot{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:var(--t-micro); color:rgba(255,255,255,0.45);
}
.lp-foot a{color:rgba(255,255,255,0.6);}
.lp-foot a:hover{color:var(--accent);}

@media (max-width:1000px){
  .lp-split{grid-template-columns:1fr; gap:38px;}
  .lp-lista, .lp-troca{grid-template-columns:1fr;}
  .lp-item:nth-child(2n), .lp-troca-item:nth-child(2n){padding-left:0; border-left:none;}
}
@media (max-width:640px){
  .lp-header .nav{padding:14px 22px; gap:14px;}
  .lp-tel{font-size:0.85rem;}
  .lp-provas li{padding:16px 20px 0 0; font-size:0.85rem;}
  .lp-provas li + li{padding-left:20px; margin-top:16px;}
  .lp-provas b{font-size:1.5rem;}
  .lp-item{grid-template-columns:48px 1fr; gap:14px;}
  .lp-num{font-size:1.7rem;}
}

/* =========================================================
   LP — BLOCOS DE PERSUASÃO
   ========================================================= */

/* selos de confiança sob o botão do formulário */
.lp-selos{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:18px;}
.lp-selos li{
  display:inline-flex; align-items:center; gap:7px; font-size:0.8rem; color:var(--muted-dim);
}
.lp-selos svg{width:14px; height:14px; stroke:var(--accent); fill:none; flex:none;}

/* reconhecimento do problema — checklist mental */
.lp-sinais{display:grid; grid-template-columns:1fr 1fr; gap:0;}
.lp-sinal{
  display:grid; grid-template-columns:26px 1fr; gap:18px; align-items:start;
  padding:26px 34px 26px 0; border-top:1px solid var(--line-l);
}
.lp-sinal:nth-child(2n){padding-left:34px; border-left:1px solid var(--line-l-soft);}
.lp-sinal .box{
  width:22px; height:22px; border:2px solid var(--line-l); margin-top:2px;
  display:flex; align-items:center; justify-content:center; flex:none;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.lp-sinal .box svg{width:13px; height:13px; stroke:#fff; fill:none; opacity:0; transition:opacity .3s;}
.lp-sinal:hover .box{border-color:var(--accent-dark); background:var(--accent-dark);}
.lp-sinal:hover .box svg{opacity:1;}
.lp-sinal p{font-size:1.02rem; color:var(--ink); line-height:1.5; font-weight:500;}

/* comparação: o que você tem hoje x o que passa a ter */
.lp-vs{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line-l);}
.lp-vs-col{padding:34px 32px;}
.lp-vs-col:first-child{background:var(--light-alt); border-right:1px solid var(--line-l);}
.lp-vs-col:last-child{background:#fff; position:relative;}
.lp-vs-col:last-child::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent-dark);
}
.lp-vs-tit{
  font-family:var(--f-display); font-weight:700; font-size:0.95rem; letter-spacing:-0.016em;
  margin-bottom:22px; display:flex; align-items:center; gap:10px;
}
.lp-vs-col:first-child .lp-vs-tit{color:var(--ink-faint);}
.lp-vs-col:last-child .lp-vs-tit{color:var(--accent-dark);}
.lp-vs li{
  font-size:var(--t-small); line-height:1.55; padding:11px 0 11px 26px; position:relative;
  border-bottom:1px solid var(--line-l-soft);
}
.lp-vs li:last-child{border-bottom:none;}
.lp-vs-col:first-child li{color:var(--ink-faint);}
.lp-vs-col:last-child li{color:var(--ink);}
.lp-vs li::before{
  content:""; position:absolute; left:2px; top:19px; width:11px; height:1.5px; background:currentColor; opacity:.5;
}
.lp-vs-col:last-child li::before{
  content:"✓"; width:auto; height:auto; background:none; top:10px; left:0;
  color:var(--accent-dark); font-size:0.9rem; opacity:1;
}

/* reversão de risco — bloco forte */
.lp-garantia{
  border:2px solid var(--accent); padding:clamp(30px,4vw,44px);
  display:grid; grid-template-columns:56px 1fr; gap:26px; align-items:start;
  background:rgba(255,128,144,0.05);
}
.lp-garantia .escudo svg{width:44px; height:44px; stroke:var(--accent); fill:none;}
.lp-garantia h2{font-size:clamp(1.4rem,2.4vw,1.9rem); color:#fff; margin-bottom:18px; max-width:22ch;}
.lp-garantia ul{display:grid; gap:12px;}
.lp-garantia li{
  font-size:1.02rem; color:var(--muted); padding-left:26px; position:relative; line-height:1.55;
}
.lp-garantia li::before{content:"—"; position:absolute; left:0; color:var(--accent);}
.lp-garantia strong{color:#fff; font-weight:600;}

/* urgência honesta */
.lp-urgencia{
  display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center;
  border-top:1px solid var(--line-l); border-bottom:1px solid var(--line-l); padding:32px 0;
}
.lp-urgencia .relogio svg{width:34px; height:34px; stroke:var(--accent-dark); fill:none;}
.lp-urgencia h3{font-size:1.14rem; color:var(--ink); margin-bottom:7px;}
.lp-urgencia p{font-size:var(--t-small); color:var(--ink-soft); line-height:1.6; max-width:64ch;}

/* três passos */
.lp-passos{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.lp-passo{padding:32px 30px 26px 0; border-top:2px solid var(--accent-dark); position:relative;}
.lp-passo + .lp-passo{padding-left:30px;}
.lp-passo .tempo{
  font-size:var(--t-micro); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent-dark); font-weight:600; display:block; margin-bottom:14px;
}
.lp-passo h3{font-size:1.08rem; color:var(--ink); margin-bottom:9px;}
.lp-passo p{font-size:var(--t-small); color:var(--ink-soft); line-height:1.6;}

/* para quem é / não é */
.lp-quem{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,54px);}
.lp-quem-bloco h3{
  font-family:var(--f-display); font-size:1.06rem; margin-bottom:22px;
  display:flex; align-items:center; gap:11px;
}
.lp-quem-bloco h3 svg{width:19px; height:19px; fill:none;}
.lp-quem-sim h3{color:#fff;} .lp-quem-sim h3 svg{stroke:var(--accent);}
.lp-quem-nao h3{color:var(--muted-dim);} .lp-quem-nao h3 svg{stroke:var(--muted-dim);}
.lp-quem li{
  font-size:var(--t-small); line-height:1.6; padding:13px 0; border-top:1px solid var(--line-d-soft);
}
.lp-quem-sim li{color:var(--muted);}
.lp-quem-nao li{color:var(--muted-dim);}

/* barra fixa no celular */
.lp-bar{display:none;}
@media (max-width:820px){
  .lp-bar{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:96;
    background:var(--wine-deep); border-top:1px solid var(--line-d);
    padding:10px 14px; gap:10px; box-shadow:0 -6px 22px rgba(0,0,0,0.35);
  }
  .lp-bar .btn{flex:1; justify-content:center; padding:15px 16px; font-size:0.9rem;}
  .lp-bar .btn-tel{
    flex:0 0 auto; border:1px solid var(--line-d); color:#fff; padding:15px 18px;
    display:inline-flex; align-items:center; gap:8px;
  }
  .lp-bar .btn-tel svg{width:17px; height:17px; stroke:var(--accent); fill:none;}
  body.tem-lp-bar{padding-bottom:var(--g6);}
  body.tem-lp-bar .wa-float{bottom:88px;}
}

@media (max-width:1000px){
  .lp-sinais, .lp-vs, .lp-quem{grid-template-columns:1fr;}
  .lp-sinal:nth-child(2n){padding-left:0; border-left:none;}
  .lp-vs-col:first-child{border-right:none; border-bottom:1px solid var(--line-l);}
  .lp-passos{grid-template-columns:1fr;}
  .lp-passo + .lp-passo{padding-left:0;}
  .lp-urgencia{grid-template-columns:auto 1fr; gap:20px;}
  .lp-urgencia .btn{grid-column:1 / -1;}
  .lp-garantia{grid-template-columns:1fr; gap:18px;}
}

/* =========================================================
   v23 — CAMADA DE ACABAMENTO
   Grão, índice de serviços, revelação por palavra, botões
   magnéticos e trilho de seções.
   ========================================================= */

/* --- 1. GRÃO ------------------------------------------------------------
   feTurbulence dessaturado em data-URI (≈380 bytes, zero requisição).
   Tira o aspecto de "cor chapada" das seções de vinho: em tela grande,
   um bloco sólido de 900px de altura lê como fundo de CSS; com grão,
   lê como superfície impressa.                                          */
.s-dark::before, .s-deep::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.085; mix-blend-mode:overlay;
  background-image: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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* --- 2. SERVIÇOS COMO ÍNDICE -------------------------------------------
   Quatro cards de igual peso não hierarquizam nada: o olho não sabe por
   onde entrar. Em lista numerada, a tipografia grande cria a hierarquia
   e o hover revela o detalhe sem empurrar a página.                     */
.svc-index{list-style:none; margin-top:clamp(38px,5vw,64px); border-top:1px solid var(--line-d-soft);}
.svc-row{border-bottom:1px solid var(--line-d-soft); position:relative;}

.svc-link{
  display:grid; grid-template-columns:clamp(56px,6vw,88px) 1fr auto;
  align-items:start; gap:0 clamp(16px,2vw,32px);
  padding:clamp(26px,3.2vw,40px) clamp(14px,2vw,28px);
  position:relative; z-index:2; color:inherit; text-decoration:none;
}
/* min-width:0 obrigatório: coluna 1fr em grid não encolhe abaixo do
   conteúdo por padrão, e um item de lista longo estouraria a linha */
.svc-main{min-width:0;}
/* varredura de preenchimento: da esquerda para a direita, como um marcador */
.svc-row::before{
  content:""; position:absolute; inset:0; z-index:1; background:var(--wine-mid);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .55s var(--ease);
}
.svc-row:hover::before, .svc-row:focus-within::before{transform:scaleX(1);}

.svc-n{
  font-family:var(--f-serif); font-size:clamp(.95rem,1.3vw,1.15rem);
  /* .55 e não .34: o numeral é conteúdo, não ornamento — abaixo disso
     não passa em 4.5:1 sobre o vinho */
  color:rgba(255,255,255,.55); line-height:1.9; letter-spacing:.02em;
  transition:color .45s var(--ease), transform .5s var(--ease);
}
.svc-row:hover .svc-n, .svc-row:focus-within .svc-n{color:var(--accent); transform:translateY(-2px);}

/* h3 de verdade: a seção precisa de subtítulos na árvore do documento,
   senão os quatro serviços somem do sumário para leitor de tela e busca */
.svc-t{
  display:block; margin:0; font-family:var(--f-display); font-weight:600; color:#fff;
  font-size:clamp(1.45rem,2.9vw,2.35rem); line-height:1.12; letter-spacing:-.03em;
  transition:transform .5s var(--ease);
}
.svc-row:hover .svc-t, .svc-row:focus-within .svc-t{transform:translateX(6px);}
.svc-d{
  display:block; margin-top:12px; max-width:62ch;
  font-size:var(--t-small); line-height:1.6; color:var(--muted);
  transition:color .45s var(--ease), transform .5s var(--ease);
}
.svc-row:hover .svc-d, .svc-row:focus-within .svc-d{color:rgba(255,255,255,.86); transform:translateX(6px);}

/* abertura por grid-template-rows: anima altura sem medir nada em JS */
.svc-more{display:grid; grid-template-rows:0fr; transition:grid-template-rows .58s var(--ease);}
.svc-row:hover .svc-more, .svc-row:focus-within .svc-more{grid-template-rows:1fr;}
.svc-more > span{overflow:hidden; min-height:0;}
.svc-tags{
  display:flex; flex-wrap:wrap; gap:8px; padding-top:20px;
  opacity:0; transition:opacity .4s var(--ease) .1s;
}
.svc-row:hover .svc-tags, .svc-row:focus-within .svc-tags{opacity:1;}
.svc-tags i{
  font-style:normal; font-size:.8rem; letter-spacing:.005em;
  color:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.26);
  padding:7px 13px; border-radius:2px; white-space:nowrap;
}

.svc-arrow{
  width:44px; height:44px; border:1px solid rgba(255,255,255,.24); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex:none; margin-top:4px;
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
}
.svc-arrow svg{width:16px; height:16px; stroke:#fff; fill:none; stroke-width:1.7;
  transition:stroke .4s var(--ease), transform .5s var(--ease);}
.svc-row:hover .svc-arrow, .svc-row:focus-within .svc-arrow{
  background:var(--accent); border-color:var(--accent); transform:rotate(-45deg);
}
.svc-row:hover .svc-arrow svg, .svc-row:focus-within .svc-arrow svg{stroke:var(--wine-deep);}
.svc-link:focus-visible{outline:2px solid var(--accent); outline-offset:-3px;}

/* --- 3. REVELAÇÃO POR PALAVRA ------------------------------------------
   Máscara por palavra em vez de fade do bloco inteiro. O padding/margin
   negativo dá folga para acentos e descidas (ç, õ, g) sem cortar.       */
.js .wsplit .w{display:inline-block; overflow:hidden; vertical-align:bottom;
  padding:.16em .05em .2em; margin:-.16em -.05em -.2em;}
.js .wsplit .w > i{
  display:inline-block; font-style:inherit; transform:translateY(108%);
  transition:transform .82s var(--ease-out);
}
.js .wsplit.in .w > i, .js .in .wsplit .w > i{transform:none;}
/* o contêiner some da animação: quem carrega o movimento é a máscara */
.js .reveal.rv-words{opacity:1; transform:none; transition:none;}

/* --- 4. BOTÕES MAGNÉTICOS ---------------------------------------------- */
.btn.magnetic{transition:background .3s var(--ease), color .3s var(--ease),
  border-color .3s var(--ease), transform .3s var(--ease-out);}
.btn.magnetic:hover{transform:translate(var(--mx,0px), calc(var(--my,0px) - 2px));}

/* --- 5. TRILHO DE SEÇÕES -----------------------------------------------
   mix-blend-mode:difference resolve o problema de um índice fixo sobre
   fundos que alternam claro/escuro: o traço se inverte sozinho.         */
.rail{display:none;}
.rail-item{display:flex; align-items:center; justify-content:flex-end; gap:12px;
  padding:7px 0; text-decoration:none;}
.rail-dash{display:block; width:20px; height:1px; background:#fff; flex:none;
  mix-blend-mode:difference; transition:width .45s var(--ease), background .3s var(--ease);}
.rail-item:hover .rail-dash{width:34px;}
.rail-item.on .rail-dash{width:34px; background:var(--accent); mix-blend-mode:normal;}
.rail-lbl{
  font-family:var(--f-display); font-size:.76rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background:var(--wine-deep);
  padding:5px 10px; border-radius:2px; white-space:nowrap;
  opacity:0; transform:translateX(6px); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.rail-item:hover .rail-lbl, .rail-item:focus-visible .rail-lbl{opacity:1; transform:none;}
.rail-item:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
@media (min-width:1280px){
  .rail{display:block; position:fixed; right:26px; top:50%; transform:translateY(-50%);
    z-index:90; text-align:right;}
}

/* --- 6. MOBILE ---------------------------------------------------------
   Sem cursor não há hover: o detalhe fica sempre aberto.                */
@media (max-width:760px){
  .svc-link{grid-template-columns:38px 1fr; padding:24px 0; gap:0 14px;}
  .svc-arrow{grid-column:1; grid-row:2; width:36px; height:36px; margin-top:18px;}
  .svc-more{grid-template-rows:1fr;}
  .svc-tags{opacity:1; padding-top:16px;}
  .svc-tags i{font-size:.75rem; padding:6px 10px;}
  .svc-d{margin-top:9px;}
}

/* --- 7. PREFERÊNCIAS DE MOVIMENTO E IMPRESSÃO -------------------------- */
@media (prefers-reduced-motion:reduce){
  .js .wsplit .w > i{transform:none !important; transition:none !important;}
  .svc-row::before{transition:none;}
  .btn.magnetic{transform:none !important;}
}
@media print{
  .rail{display:none !important;}
  .s-dark::before, .s-deep::before{display:none !important;}
  .svc-more{grid-template-rows:1fr;}
  .svc-tags{opacity:1;}
  .svc-row::before{display:none;}
  /* sem isto, tudo que ainda não entrou na tela sai em branco no papel */
  .reveal, .js .wsplit .w > i{opacity:1 !important; transform:none !important;}
}

/* =========================================================
   v24 — CAMADA VISUAL
   Figuras fotográficas, ilustrações de traço e composições.
   ========================================================= */

/* --- LUZ QUE SEGUE O CURSOR ------------------------------------------
   position:fixed com z-index 1: fica acima do fundo da seção e abaixo
   do .wrap, que é 2. Assim ela ilumina a superfície sem lavar o texto. */
.glow{
  position:fixed; top:0; left:0; width:min(620px, 60vw); aspect-ratio:1;
  border-radius:50%; pointer-events:none; z-index:1; opacity:0;
  background:radial-gradient(circle,
    rgba(255,128,144,.17) 0%, rgba(255,128,144,.07) 36%, transparent 70%);
  transition:opacity .55s var(--ease); will-change:transform;
}
.glow.on{opacity:1;}
@media (prefers-reduced-motion:reduce){ .glow{display:none;} }
@media (hover:none){ .glow{display:none;} }

/* --- FIGURAS -----------------------------------------------------------
   --max vem do Python e é o limite de nitidez do arquivo recebido.
   Esticar além disso não aumenta informação, só borra.                  */
.figura{margin:0; max-width:min(100%, var(--max, 100%));}
.figura-quadro{
  display:block; position:relative; overflow:hidden;
  aspect-ratio:var(--ratio, 3 / 2); background:var(--wine-deep);
  border-radius:2px;
}
.figura img{width:100%; height:100%; object-fit:cover; display:block;}
.figura-vazia svg{width:34px; height:34px; stroke:rgba(255,255,255,.32); fill:none; margin-bottom:4px;}
.figura-vazia b{font-family:var(--f-display); font-size:.9rem; font-weight:600; color:rgba(255,255,255,.82);}
.figura-vazia small{font-size:.76rem; color:rgba(255,255,255,.5);}
.figura-arq{font-family:var(--f-mono, ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing:-.01em;}

/* entrada: a moldura se abre de baixo para cima e a imagem assenta */
.js [data-figura] .figura-quadro{clip-path:inset(0 0 100% 0); transition:clip-path 1.05s var(--ease-out);}
.js .lugar-foto [data-figura] .figura-quadro,
.js .lugar-foto.figura .figura-quadro{clip-path:inset(0 100% 0 0); transition-duration:1.2s;}
.js .foto-sangria .figura-quadro{transition-duration:1.45s;}
.js [data-figura].in .figura-quadro{clip-path:inset(0 0 0 0);}
.js [data-figura] img{transform:scale(1.07); transition:transform 1.5s var(--ease-out);}
.js [data-figura].in img{transform:none;}

/* --- QUEM SOMOS: três blocos ------------------------------------------
   Escritório, CEO e equipe deixaram de dividir uma composição só. Cada
   um tem o seu bloco, com respiro entre eles.                          */

/* 1. ABERTURA + ESCRITÓRIO — um bloco só.
   Antes eram dois: um texto de largura total com metade da tela vazia à
   direita, e mais abaixo um bloco separado com a fachada. Juntando, o
   vazio da direita vira a foto e some uma emenda. */
.sobre-abre{
  display:grid; grid-template-columns:1fr minmax(0, 620px);
  gap:clamp(30px,4.5vw,80px); align-items:center;
  margin-top:clamp(30px,4vw,54px);
  margin-right:calc(50% - 50vw);
}
.sobre-txt{padding-right:clamp(0px,2.5vw,32px); max-width:46rem;}
.sobre-txt h2{margin-bottom:clamp(22px,2.6vw,34px);}
/* nível intermediário de tipografia: o salto de 48px do título direto
   para 17px de corpo era grande demais e deixava o bloco sem meio-termo */
.sobre-txt .lead-sobre{font-size:clamp(1.12rem,1.5vw,1.32rem); line-height:1.6; color:rgba(255,255,255,.9);}
.sobre-txt p{color:var(--muted); font-size:1.04rem; line-height:1.72; margin-bottom:18px;}
.sobre-txt p:last-of-type{margin-bottom:0;}
.lugar-foto .figura{max-width:none;}
/* canto reto do lado que encosta na borda */
.lugar-foto .figura-quadro{border-radius:2px 0 0 2px;}

/* os dois perfis lado a lado, com espaço de sobra para o dedo */
.perfis{display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--g3);}

/* linha discreta sob a foto da equipe: não é rótulo do que a imagem
   mostra, é um fato que a imagem não conta sozinha */
.nota-equipe{
  margin-top:18px; font-size:.84rem; letter-spacing:.02em;
  color:var(--muted-dim); font-family:var(--f-serif); font-style:italic;
}

/* 2. CEO — espelhado: foto sangra na esquerda, texto na coluna direita. */
.bloco-pessoa{
  display:grid; grid-template-columns:minmax(0, 400px) 1fr;
  /* 96px de vão: com uma foto de 520px de um lado e tipografia de 3rem
     do outro, o vão anterior de 72 deixava os dois se acotovelando */
  gap:clamp(34px,6vw,96px); align-items:center;
  margin-top:clamp(64px,8vw,116px);
  margin-left:calc(50% - 50vw);
  border-top:1px solid var(--line-d-soft);
  padding:clamp(48px,6vw,88px) 0 clamp(20px,3vw,44px);
}
.pessoa-foto .figura{max-width:none;}
.pessoa-foto .figura-quadro{border-radius:0 2px 2px 0;}
.pessoa-nome{
  font-family:var(--f-display); font-weight:600; color:#fff;
  /* o nome é o elemento que ocupa o espaço que o texto curto deixaria
     vazio. Tipografia grande preenchendo um campo é decisão de projeto;
     campo vazio é descuido — e a diferença entre os dois é o tamanho. */
  font-size:clamp(2.4rem,5.4vw,4.4rem); letter-spacing:-.04em;
  line-height:1.02; margin:0;
}
.pessoa-cargo{font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:10px; letter-spacing:.01em;}
.pessoa-bio{
  max-width:34ch; font-family:var(--f-serif); font-size:clamp(1.05rem,1.5vw,1.28rem);
  line-height:1.5; color:rgba(255,255,255,.87); margin-top:20px;
}
.pessoa-nota{font-size:var(--t-small); line-height:1.7; color:var(--muted); margin-top:20px; max-width:46ch;}

/* trajetória: quatro marcos com data. Os anos alinhados numa coluna
   estreita viram uma régua vertical — a leitura acontece antes da
   leitura, só pelo formato. */
.trajetoria{list-style:none; margin-top:var(--g3); border-top:1px solid var(--line-d-soft);}
.trajetoria li{
  display:grid; grid-template-columns:5.5rem 1fr; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--line-d-soft);
}
.tr-quando{
  font-family:var(--f-serif); font-size:1.02rem; color:var(--accent);
  line-height:1.35; white-space:nowrap;
}
.tr-oque{font-size:.9rem; line-height:1.5; color:var(--muted);}

/* credenciais: registro de classe e titulação são prova verificável,
   ao contrário de adjetivo. Ficam em caixa alta pequena, como assinatura */
.credenciais{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--g3);}
.credenciais li{
  font-family:var(--f-display); font-size:.74rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.86); border:1px solid rgba(255,255,255,.24);
  padding:8px 12px; border-radius:2px;
}

@media (max-width:520px){
  .trajetoria li{grid-template-columns:1fr; gap:4px;}
}

/* 3. EQUIPE — sangra até a borda da tela.
   É o que quebra a cadência: depois de quatro seções presas na mesma
   largura de contêiner, uma imagem que encosta nas bordas funciona como
   respiro. 100vw inclui a barra de rolagem, mas a seção tem overflow
   escondido, então não gera rolagem lateral. */
.foto-sangria{
  max-width:none !important; width:100%;
  /* margin:0 fazia a foto colar no bloco de cima — era a emenda visível.
     Embaixo ela fica rente: a seção zera o próprio padding final quando
     termina numa imagem, senão sobrariam 172px de vinho vazio depois de
     um corte que já é forte por si só. */
  margin:clamp(60px,7.5vw,104px) 0 0;
}
/* classe explícita em vez de :has(): o suporte hoje é universal, mas
   isto define onde a seção termina, e estrutura não deve depender de
   um seletor que, se falhar, muda o layout sem avisar. */
.fecha-em-foto{padding-bottom:0;}
/* 16:9 em largura total daria 1080px de altura numa tela de 1920 — parede,
   não faixa. Recorto para 2.35:1 e puxo o enquadramento para cima, onde
   estão os rostos; o que sai é teto e encosto de cadeira. */
.foto-sangria .figura-quadro{border-radius:0; aspect-ratio:2.6 / 1;}
.foto-sangria img{object-position:center 38%;}
@media (max-width:760px){
  /* na vertical o recorte largo comeria as pessoas das pontas */
  .foto-sangria .figura-quadro{aspect-ratio:16 / 9;}
}

/* link de Instagram, usado nos dois blocos */
.link-ig{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-display); font-size:.9rem; font-weight:600;
  color:var(--accent); text-decoration:none;
  padding:11px 17px; border:1px solid rgba(255,255,255,.26); border-radius:2px;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.link-ig svg{width:17px; height:17px; flex:none;}
.link-ig .ig-sai{width:13px; height:13px; opacity:.7; transition:transform .3s var(--ease);}
.link-ig:hover{background:var(--accent); border-color:var(--accent); color:var(--wine-deep);}
.link-ig:hover .ig-sai{transform:translate(2px,-2px);}
.link-ig:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

/* --- MÉTODO: retrato lateral ------------------------------------------- */

/* --- CONTATO: cartão da fachada ---------------------------------------- */

/* --- ILUSTRAÇÕES -------------------------------------------------------
   Traço em currentColor: uma ilustração serve fundo claro e escuro.     */
.il{display:block; width:100%; height:auto;}
.il-hero{max-width:clamp(220px, 26vw, 330px); color:rgba(255,255,255,.72);}
.il-fill{fill:rgba(255,255,255,.055);}
.il-ac{stroke:var(--accent);}
.il-dot{fill:var(--accent); stroke:none;}
.il-fill-ac{fill:var(--accent); stroke:none;}
.s-light .il{color:var(--ink-soft);}
.s-light .il-fill{fill:rgba(95,17,26,.05);}
.s-light .il-ac{stroke:var(--accent-dark);}
.s-light .il-dot, .s-light .il-fill-ac{fill:var(--accent-dark);}

/* desenho progressivo: pathLength="1" é posto pelo JS, o que normaliza
   traços de comprimentos diferentes num único tempo de animação */
.js .il [pathLength]{stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .95s var(--ease-out) var(--d, 0s);}
.js .in .il [pathLength], .js .il.in [pathLength]{stroke-dashoffset:0;}
.js .il .il-fill, .js .il .il-dot, .js .il .il-fill-ac{opacity:0;
  transition:opacity .55s var(--ease-out) .45s;}
.js .in .il .il-fill, .js .in .il .il-dot, .js .in .il .il-fill-ac,
.js .il.in .il-fill, .js .il.in .il-dot, .js .il.in .il-fill-ac{opacity:1;}

/* hero das páginas de serviço passa a ser texto + ilustração */
.hero-inner-page .wrap{position:relative; z-index:2;}
.hero-svc{display:grid; grid-template-columns:1fr auto; gap:clamp(24px,5vw,70px); align-items:center;}
/* páginas já convertidas não têm ilustração: o título ocupa a largura toda */
.hero-svc:not(:has(.hero-svc-il)){grid-template-columns:1fr;}
.hero-svc:not(:has(.hero-svc-il)) h1{max-width:20ch;}
.hero-svc:not(:has(.hero-svc-il)) > div > p{max-width:56ch;}
.hero-svc-il{justify-self:end;}

@media (max-width:900px){
  /* sem espaço para duas colunas, a sangria vira largura total simples */
  .sobre-abre, .bloco-pessoa{
  display:grid; grid-template-columns:minmax(0, 400px) 1fr;
  /* 96px de vão: com uma foto de 520px de um lado e tipografia de 3rem
     do outro, o vão anterior de 72 deixava os dois se acotovelando */
  gap:clamp(34px,6vw,96px); align-items:center;
  margin-top:clamp(64px,8vw,116px);
  margin-left:calc(50% - 50vw);
  border-top:1px solid var(--line-d-soft);
  padding:clamp(48px,6vw,88px) 0 clamp(20px,3vw,44px);
}
  .lugar-foto .figura, .pessoa-foto .figura{max-width:min(100%, 420px);}
  .lugar-foto .figura-quadro, .pessoa-foto .figura-quadro{border-radius:2px;}
  .sobre-txt{padding-right:0; max-width:none;}
    .hero-svc{grid-template-columns:1fr;}
  .hero-svc-il{justify-self:start; margin-top:var(--g3);}
  .il-hero{max-width:210px;}
}
@media (max-width:560px){
    }
@media (prefers-reduced-motion:reduce){
  .js [data-figura] .figura-quadro{clip-path:none !important; transition:none;}
  .js [data-figura] img{transform:none !important; transition:none;}
  .js .il [pathLength]{stroke-dashoffset:0 !important; transition:none;}
  .js .il .il-fill, .js .il .il-dot, .js .il .il-fill-ac{opacity:1 !important;}
}
@media print{
  .figura-quadro{clip-path:none !important;}
  .figura img{transform:none !important;}
  .il [pathLength]{stroke-dashoffset:0 !important;}
}

/* =========================================================
   v24b — MÉTODO COMO CICLO
   O anel é construído por JS. A lista continua no HTML como
   fonte para leitor de tela, busca e navegação sem script;
   ela só some da vista quando o anel de fato entrou.
   ========================================================= */
.ciclo{display:none;}

@media (min-width:1000px){
  /* sem a foto na coluna da esquerda, o grid de 4fr/8fr deixava metade da
     seção vazia. Coluna única: título em cima, anel centralizado embaixo. */
  .method-inner.tem-ciclo{grid-template-columns:1fr; gap:clamp(34px,4.5vw,58px);}
  .method-inner.tem-ciclo .method-sticky{max-width:720px;}
  .method-inner.tem-ciclo .ciclo{margin:0 auto; max-width:560px;}
  .js .tem-ciclo .method-steps{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .ciclo{display:block; position:relative; width:100%; max-width:520px; margin:0 auto;}
}

.ciclo-svg{display:block; width:100%; height:auto;}
.ciclo-trilho{stroke:var(--line-l);}
.ciclo-arco{stroke:var(--accent-dark); transition:stroke-dashoffset .75s var(--ease-out);}
.ciclo-no-bg{fill:var(--white);}
.ciclo-no-borda{stroke:var(--line-l); transition:stroke .45s var(--ease);}
.ciclo-no-num{
  font-family:var(--f-serif); font-size:17px; fill:var(--ink-faint);
  transition:fill .45s var(--ease);
}
.ciclo-no.on .ciclo-no-borda{stroke:var(--accent-dark);}
.ciclo-no.on .ciclo-no-num{fill:var(--accent-dark);}
.ciclo-no.atual .ciclo-no-bg{fill:var(--accent-dark);}
.ciclo-no.atual .ciclo-no-num{fill:#fff;}
.ciclo-no{transition:transform .45s var(--ease);}

/* centro: 46% do quadro deixa folga para o texto não tocar os nós */
.ciclo-centro{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46%; text-align:center;
}
.ciclo-tit{
  display:block; font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.05rem,1.5vw,1.28rem); letter-spacing:-.025em;
  color:var(--ink); margin-bottom:9px;
}
.ciclo-desc{font-size:.83rem; line-height:1.55; color:var(--ink-soft);}

.ciclo-botoes{display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:var(--g3);}
.ciclo-btn{
  font-family:var(--f-display); font-size:.78rem; font-weight:600;
  letter-spacing:.005em; color:var(--ink-soft); background:transparent;
  border:1px solid var(--line-l); border-radius:2px; padding:11px 15px;
  cursor:pointer; transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ciclo-btn:hover{color:var(--ink); border-color:var(--ink-faint);}
.ciclo-btn.on{color:#fff; background:var(--accent-dark); border-color:var(--accent-dark);}
.ciclo-btn:focus-visible{outline:2px solid var(--accent-dark); outline-offset:2px;}

@media (prefers-reduced-motion:reduce){
  .ciclo-arco{transition:none;}
}
@media print{
  .ciclo{display:none !important;}
  .js .tem-ciclo .method-steps{position:static !important; width:auto !important;
    height:auto !important; clip:auto !important; overflow:visible !important;
    white-space:normal !important; margin:0 !important;}
}

/* .lp-form-wrap existia no HTML sem regra: o formulário ficava colado no
   texto acima em telas estreitas e sem âncora de rolagem confiável. */
.lp-form-wrap{scroll-margin-top:var(--g6);}
@media (max-width:900px){.lp-form-wrap{margin-top:var(--g4);}}

/* =========================================================
   v36 — DIAGRAMAS DAS PÁGINAS DE SERVIÇO
   Quatro formas diferentes de propósito. Repetir o mesmo
   desenho quatro vezes seria trocar um molde por outro.
   ========================================================= */
.diag{margin:0;}
.diag-corpo{position:relative;}
.diag-leg{
  margin-top:var(--g3); font-size:.82rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted-dim);
  font-family:var(--f-display); font-weight:600;
}

/* --- 1. CONTÁBIL E FISCAL: escada horizontal ---------------------------
   Seis degraus subindo. O último é o único aceso — é a etapa que quase
   todo escritório não faz, e é o argumento da página. */
.escada{
  list-style:none; display:grid; gap:1px;
  grid-template-columns:repeat(6, 1fr); background:var(--line-d-soft);
  border:1px solid var(--line-d-soft);
}
.esc-passo{
  background:var(--wine); padding:26px 20px 30px;
  display:flex; flex-direction:column;
  transition:background .4s var(--ease);
}
.esc-passo:hover{background:var(--wine-mid);}
/* a escada sobe: cada degrau começa um pouco mais alto que o anterior */
.esc-passo:nth-child(1){padding-top:74px;}
.esc-passo:nth-child(2){padding-top:64px;}
.esc-passo:nth-child(3){padding-top:54px;}
.esc-passo:nth-child(4){padding-top:var(--g4);}
.esc-passo:nth-child(5){padding-top:var(--g4);}
.esc-passo:nth-child(6){padding-top:var(--g3);}
.esc-n{
  font-family:var(--f-serif); font-size:1.05rem; color:rgba(255,255,255,.55);
  margin-bottom:14px; line-height:1;
}
.esc-passo h3{font-size:.98rem; color:#fff; letter-spacing:-.02em; margin-bottom:9px;}
.esc-passo p{font-size:.82rem; line-height:1.55; color:var(--muted);}
.esc-alvo{background:var(--wine-deep);}
.esc-alvo .esc-n, .esc-alvo h3{color:var(--accent);}
.esc-alvo:hover{background:var(--wine-deep);}

/* --- 2. DEPARTAMENTO PESSOAL: linha da vida do colaborador -------------
   Horizontal, com três marcos acesos. O que a página vende é justamente
   saber onde o erro custa caro, então o risco é o que ganha cor. */
.vida{list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(16px,2vw,28px); position:relative; padding-top:var(--g4);}
.vida::before{
  content:""; position:absolute; left:0; right:0; top:11px;
  height:1px; background:var(--line-d-soft);
}
.vida-item{position:relative;}
.vida-marca{
  position:absolute; top:-33px; left:0; width:15px; height:15px;
  border-radius:50%; border:1.5px solid var(--line-d); background:var(--wine);
}
.vida-risco .vida-marca{background:var(--accent); border-color:var(--accent);}
.vida-item h3{font-size:1rem; color:#fff; letter-spacing:-.02em; margin-bottom:8px;}
.vida-item p{font-size:.83rem; line-height:1.58; color:var(--muted);}
.vida-tag{
  display:inline-block; margin-top:12px; font-size:.7rem; letter-spacing:.07em;
  text-transform:uppercase; font-family:var(--f-display); font-weight:600;
  color:var(--accent); border:1px solid rgba(255,128,144,.4);
  padding:5px 9px; border-radius:2px;
}

/* --- 3. SOCIETÁRIO: portas em sequência --------------------------------
   Cada órgão é uma porta, com uma seta entre elas. Vertical em duas
   colunas para não virar a mesma tira horizontal das outras duas. */
.portas{list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--line-d-soft); border:1px solid var(--line-d-soft);}
.porta{background:var(--wine); padding:30px 24px 32px; position:relative;}
.porta-n{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; margin-bottom:16px;
  border:1px solid var(--accent); color:var(--accent);
  font-family:var(--f-serif); font-size:1.05rem;
}
.porta h3{font-size:1.02rem; color:#fff; letter-spacing:-.02em; margin-bottom:9px;}
.porta p{font-size:.83rem; line-height:1.58; color:var(--muted);}

/* --- 4. APOIO AO EMPRESÁRIO: três camadas empilhadas -------------------
   Empilhadas e crescendo em peso: a de baixo é o piso e a de cima é o
   que se está vendendo. É a tese da página inteira num desenho. */
.camadas{list-style:none; display:flex; flex-direction:column-reverse; gap:1px;}
.camada{
  padding:26px clamp(22px,3vw,38px) 28px;
  border-left:3px solid var(--line-d-soft);
  background:linear-gradient(90deg, rgba(255,255,255,.03), transparent 60%);
}
.camada-topo{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:9px;}
.camada h3{font-size:1.12rem; color:#fff; letter-spacing:-.025em;}
.camada-nota{font-size:.78rem; color:var(--muted-dim); font-style:italic;}
.camada p{font-size:.88rem; line-height:1.6; color:var(--muted); max-width:56ch;}
/* nada de opacity em texto: ela multiplica contra o fundo e o contraste
   vira loteria. A hierarquia entre as camadas fica na cor, que se mede. */
.camada-1 h3, .camada-2 h3{color:rgba(255,255,255,.82);}
.camada-1 p, .camada-2 p{color:rgba(255,255,255,.66);}
.camada-3{
  border-left-color:var(--accent);
  background:linear-gradient(90deg, rgba(255,128,144,.09), transparent 62%);
}
.camada-3 h3{color:var(--accent);}
.camada-3 .camada-nota{color:rgba(255,255,255,.72);}

/* --- responsivo --------------------------------------------------------
   As tiras de 5 e 6 colunas não cabem em tela estreita: viram lista. */
@media (max-width:1000px){
  .escada{grid-template-columns:repeat(3,1fr);}
  .esc-passo:nth-child(n){padding-top:var(--g3);}
  .vida{grid-template-columns:repeat(2,1fr); gap:26px; padding-top:0;}
  .vida::before{display:none;}
  .vida-marca{position:static; display:block; margin-bottom:12px;}
}
@media (max-width:620px){
  .escada{grid-template-columns:1fr;}
  .vida{grid-template-columns:1fr;}
  .portas{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .esc-passo{transition:none;}
}
@media print{
  .camada-1,.camada-2{opacity:1;}
  .escada,.portas{border-color:#ccc;}
}

/* =========================================================
   v41 — AS FALAS DE QUEM CHEGA
   Discurso relatado, em serifada, com aspas de abertura como
   marca. É o cliente falando; o escritório não acusa ninguém.
   ========================================================= */
.falas{list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1px;
  background:var(--line-d-soft); border:1px solid var(--line-d-soft);}
.falas li{background:var(--wine); padding:32px 28px 34px; position:relative;}
.falas li::before{
  content:"\201C"; position:absolute; top:14px; left:24px;
  font-family:var(--f-serif); font-size:3.4rem; line-height:1;
  color:var(--accent); opacity:.5;
}
.falas p{
  position:relative; font-family:var(--f-serif);
  font-size:clamp(1.02rem,1.35vw,1.2rem); line-height:1.5;
  color:rgba(255,255,255,.92); padding-top:var(--g3);
}
@media (max-width:620px){
  .falas li{padding:26px 22px 28px;}
}

/* =========================================================
   v42 — DEPOIMENTOS REAIS (avaliações do Google)
   Serifada grande para a fala, atribuição em filete embaixo.
   A origem ("Avaliação no Google") fica visível de propósito:
   é o que separa depoimento verificável de frase de folheto.
   ========================================================= */
.deps{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,2.5vw,34px);}
.dep{
  margin:0; display:flex; flex-direction:column; justify-content:space-between;
  background:var(--white); border:1px solid var(--line-l);
  padding:clamp(26px,3vw,36px); border-radius:2px;
}
.dep blockquote{margin:0; position:relative;}
.dep blockquote::before{
  content:"\201C"; display:block; font-family:var(--f-serif);
  font-size:3rem; line-height:.6; color:var(--accent-dark); margin-bottom:14px;
}
.dep blockquote p{
  font-family:var(--f-serif); font-size:clamp(1.02rem,1.3vw,1.14rem);
  line-height:1.55; color:var(--ink);
}
.dep figcaption{
  margin-top:var(--g3); padding-top:16px; border-top:1px solid var(--line-l);
  display:flex; flex-direction:column; gap:3px;
}
.dep-nome{font-family:var(--f-display); font-weight:600; font-size:.94rem; color:var(--ink); letter-spacing:-.015em;}
.dep-onde{font-size:.78rem; color:var(--ink-faint); letter-spacing:.02em;}
/* versão sobre vinho */
.s-dark .dep{background:var(--wine-mid); border-color:var(--line-d-soft);}
.s-dark .dep blockquote::before{color:var(--accent);}
.s-dark .dep blockquote p{color:#fff;}
.s-dark .dep figcaption{border-top-color:var(--line-d-soft);}
.s-dark .dep-nome{color:#fff;}
.s-dark .dep-onde{color:var(--muted-dim);}

/* =========================================================
   v45 — FRASE EM MOVIMENTO E DEPOIMENTOS EM ESTEIRA
   Padrão portado do 21st (Testimonials Marquee): ciclo de
   20s, máscara de 25% nas bordas, pausa no hover. O que
   acrescentei: parar de verdade quando o visitante pede
   menos movimento, e parar também no foco por teclado —
   senão o cartão foge de quem navega sem mouse.
   ========================================================= */

/* --- faixa com a frase de posicionamento --- */
.faixa-frase{padding:clamp(26px,3vw,40px) 0; overflow:hidden;}
.frase-marquee{
  overflow:hidden; white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.frase-track{display:inline-flex; animation:desliza-frase 46s linear infinite;}
.frase-track span{
  padding-right:clamp(40px,5vw,90px); flex:none;
  font-family:var(--f-serif); font-size:clamp(1.15rem,2vw,1.7rem);
  color:rgba(255,255,255,.9); letter-spacing:-.01em;
}
@keyframes desliza-frase{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.faixa-frase:hover .frase-track{animation-play-state:paused;}

/* --- depoimentos em esteira --- */
.deps-esteira{
  overflow:hidden;
  /* 25% de máscara em cada borda, como no componente de referência */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}
.deps-track{display:flex; gap:clamp(18px,2.2vw,28px); width:max-content;
  animation:desliza-deps 40s linear infinite;}
.deps-esteira:hover .deps-track,
.deps-esteira:focus-within .deps-track{animation-play-state:paused;}
@keyframes desliza-deps{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.deps-track .dep{width:clamp(300px, 30vw, 400px); flex:none;}

@media (prefers-reduced-motion:reduce){
  /* nada de "quase parado": movimento infinito em quem tem sensibilidade
     vestibular causa mal-estar de verdade. Some a animação. */
  .frase-track, .deps-track{animation:none;}
  .deps-esteira, .frase-marquee{overflow-x:auto; -webkit-mask-image:none; mask-image:none;}
}
@media (max-width:620px){
  .deps-track .dep{width:78vw;}
}

/* =========================================================
   v47 — O QUE MUDA (antes → depois)
   Duas colunas por linha: a situação de hoje apagada, a de
   depois acesa. A seta é o único elemento colorido, e ela
   carrega o sentido da leitura.
   ========================================================= */
.muda{list-style:none; margin-top:clamp(30px,4vw,52px); border-top:1px solid var(--line-d-soft);}
.muda li{
  display:grid; grid-template-columns:1fr 44px 1fr; align-items:center;
  gap:clamp(10px,1.6vw,20px);
  padding:clamp(18px,2.2vw,26px) 0; border-bottom:1px solid var(--line-d-soft);
}
.mu-antes{
  font-size:var(--t-small); line-height:1.5;
  color:rgba(255,255,255,.5); text-align:right;
}
.mu-seta{
  justify-self:center; font-family:var(--f-serif); font-size:1.4rem;
  color:var(--accent); line-height:1;
}
.mu-depois{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(.98rem,1.3vw,1.1rem); line-height:1.45;
  letter-spacing:-.015em; color:#fff;
}
@media (max-width:760px){
  /* em coluna única a seta vira marcador de início da linha de baixo */
  .muda li{grid-template-columns:1fr; gap:6px; padding:20px 0;}
  .mu-antes{text-align:left;}
  .mu-seta{justify-self:start; font-size:1.15rem;}
}

/* =========================================================
   v52 — MISSÃO, VISÃO E VALORES
   Três colunas com filete no topo. Valores em coluna dupla
   de itens curtos, para não virar parágrafo.
   ========================================================= */
.mvv{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(24px,3vw,44px); margin-top:clamp(38px,5vw,64px);
}
.mvv-item{border-top:2px solid var(--accent); padding-top:20px;}
.mvv-item h3{
  font-family:var(--f-display); font-weight:600; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  margin-bottom:12px;
}
.mvv-item p{font-size:var(--t-small); line-height:1.62; color:var(--ink-soft);}
.mvv-valores ul{
  list-style:none; columns:2; column-gap:22px;
  font-size:var(--t-small); line-height:1.9; color:var(--ink-soft);
}
.mvv-valores li{break-inside:avoid;}
.mvv-valores li::before{content:"·"; color:var(--accent); margin-right:8px;}

/* =========================================================
   v52b — BLOCO DO CEO com mais peso visual
   A linha do tempo ganha trilho vertical e marcadores; as
   credenciais viram grade em vez de fila. É o que faltava
   para o bloco parecer composto e não empilhado.
   ========================================================= */
.trajetoria{position:relative; padding-left:0;}
.trajetoria::before{
  content:""; position:absolute; left:5.5rem; top:14px; bottom:14px;
  width:1px; background:var(--line-d-soft);
}
.trajetoria li{position:relative;}
.tr-quando{position:relative;}
.tr-quando::after{
  content:""; position:absolute; right:-1.72rem; top:50%;
  width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--wine);
}
.credenciais{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:8px; margin-top:var(--g3);
}
.credenciais li{
  display:flex; align-items:center; gap:9px;
  text-transform:none; letter-spacing:.01em; font-size:.8rem;
  border-color:rgba(255,255,255,.2);
}
.credenciais li::before{
  content:""; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--accent);
}
/* moldura deslocada atrás do retrato: dá profundidade sem mais imagem */
.pessoa-foto{position:relative;}
.pessoa-foto::before{
  content:""; position:absolute; z-index:0;
  left:18px; top:-18px; right:-18px; bottom:18px;
  border:1px solid rgba(255,255,255,.16); border-radius:2px;
  pointer-events:none;
}
.pessoa-foto .figura{position:relative; z-index:1;}

@media (max-width:520px){
  .trajetoria::before{display:none;}
  .tr-quando::after{display:none;}
  .pessoa-foto::before{display:none;}
  .mvv-valores ul{columns:1;}
}

/* =========================================================
   v53 — PÁGINA QUEM SOMOS
   O bloco do CEO virou página porque não cabia numa coluna:
   retrato, quatro marcos, quatro credenciais e dois perfis
   empilhados viravam lista. Aqui o retrato ocupa metade da
   tela e a trajetória vira faixa horizontal.
   ========================================================= */

/* --- topo: retrato grande + identificação --- */
.ceo-topo{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px,5vw,80px); align-items:center;
}
.ceo-retrato .figura{max-width:min(100%, 460px);}
.ceo-retrato .figura-quadro{box-shadow:0 0 0 1px var(--line-l);}
.ceo-papel{
  font-family:var(--f-display); font-size:.78rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent-dark);
  margin-bottom:14px;
}
.ceo-nome{
  font-family:var(--f-display); font-weight:600; color:var(--ink);
  font-size:clamp(2.4rem,5.6vw,4.6rem); line-height:1; letter-spacing:-.04em;
  margin:0;
}
.ceo-frase{
  font-family:var(--f-serif); font-size:clamp(1.14rem,1.7vw,1.5rem);
  line-height:1.45; color:var(--ink-soft); margin-top:22px; max-width:34ch;
}

/* --- credenciais em fundo claro --- */
.credenciais-claro li{
  color:var(--ink); border-color:var(--line-l);
  background:var(--white);
}
.credenciais-claro li::before{background:var(--accent-dark);}

/* --- botão de perfil em seção clara --- */
.link-ig-claro{
  color:var(--accent-dark); border-color:var(--line-l);
}
.link-ig-claro:hover{background:var(--accent-dark); border-color:var(--accent-dark); color:#fff;}

@media (max-width:900px){
  .ceo-topo{grid-template-columns:1fr; gap:28px;}
  .ceo-retrato .figura{max-width:min(100%, 340px);}
}

/* =========================================================
   v54 — TEXTO DO RESPONSÁVEL TÉCNICO
   O parágrafo lidera pela credencial institucional. Em serifada
   e em corpo grande, ele carrega o peso; a linha do tempo
   embaixo traz a história. Um dá autoridade, a outra dá gente.
   ========================================================= */
.ceo-frase{
  font-family:var(--f-serif); font-size:clamp(1.1rem,1.55vw,1.36rem);
  line-height:1.55; color:var(--ink); margin-top:var(--g3); max-width:46ch;
}
/* CRC/PR e Sescap/PR em destaque dentro do próprio parágrafo: são as
   duas palavras que um empresário reconhece como peso institucional */
.ceo-frase strong{font-weight:600; color:var(--accent-dark);}
.ceo-papel{
  display:inline-block; padding-bottom:9px;
  border-bottom:2px solid var(--accent-dark);
}

/* Tres pilares — Quem Somos, dentro da secao escura "A casa".
   Substitui .tres-pilares, que era usada no HTML mas nunca teve regra
   nenhuma no CSS: os itens saiam como h3 e p empilhados, sem grid, sem
   espaco e sem hierarquia. */
.pilares{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(26px,3vw,46px); margin-top:var(--sp-xs);
  padding-top:var(--g5); border-top:1px solid var(--line-d-soft);
}
.pilar h3{
  font-family:var(--f-display); font-weight:600; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  margin-bottom:var(--g1);
}
.pilar p{font-size:var(--t-small); line-height:1.62; color:var(--muted);}

/* A copia da esteira de depoimentos vive dentro de um <span aria-hidden>
   para nao ser lida duas vezes. O span precisa desaparecer do layout para
   os cartoes continuarem sendo filhos diretos do flex da trilha. */
.deps-clone{display:contents;}

/* =====================================================================
   ELEMENTOS GRÁFICOS DAS PÁGINAS DE SERVIÇO
   Ver graficos.py. Regra que vale para todos: o estado final é o estado
   padrão. A animação só existe sob .js e é revertida por reduced-motion.
   ===================================================================== */

/* ---------------------------------------------- percurso (4 nós, claro) */
.percurso{position:relative; margin-top:var(--sp-xs);}
.pc-linha{position:absolute; left:0; right:0; top:31px; width:100%; height:2px;}
.pc-linha line{stroke:var(--line-l); stroke-width:2; vector-effect:non-scaling-stroke;}
.pc-nos{
  list-style:none; display:grid; gap:var(--g4);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); position:relative;
}
.pc-marca{
  width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background:var(--light); border:1px solid var(--line-l); margin-bottom:var(--g2);
}
.s-light-alt .pc-marca{background:#fff;}
.pc-marca svg{width:25px; height:25px; stroke:var(--accent-dark);}
.pc-no h3{font-family:var(--f-display); font-size:1.05rem; margin-bottom:6px; color:var(--ink);}
.pc-no p{font-size:var(--t-small); color:var(--ink-soft); line-height:1.55;}

/* --------------------------------------- fluxo mensal em corrente (escuro)
   Substitui o anel. Rótulo é HTML: quebra linha e não depende de viewBox,
   que foi exatamente o que decepou os nomes na versão em círculo. */
.fluxo{position:relative; margin-top:var(--sp-xs); padding-top:var(--g3);}
.fx-onda{
  position:absolute; left:0; right:0; top:0; width:100%; height:132px;
  pointer-events:none;
}
.fx-onda path{
  fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round;
  vector-effect:non-scaling-stroke; opacity:.5;
}
.fx-etapas{
  list-style:none; display:grid; gap:var(--g4);
  grid-template-columns:repeat(6,1fr); position:relative;
}
.fx-etapa{padding-top:calc((1 - var(--alto)) * 60px);}
.fx-ponto{
  display:block; width:15px; height:15px; border-radius:50%;
  background:var(--wine); border:2px solid var(--accent); margin-bottom:var(--g3);
}
.fx-ult .fx-ponto{background:var(--accent);}
.fx-num{
  display:block; font-family:var(--f-display); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; color:var(--muted-dim); margin-bottom:5px;
}
.fx-etapa h3{font-family:var(--f-display); font-size:1.02rem; color:#fff; margin-bottom:7px;}
.fx-ult h3{color:var(--accent);}
.fx-etapa p{font-size:var(--t-small); line-height:1.55; color:var(--muted);}

/* ------------------------------------------- comparador de regimes (claro) */
.regimes{margin-top:var(--sp-xs);}
.rg-abas{display:flex; flex-wrap:wrap; gap:var(--g1); border-bottom:1px solid var(--line-l); margin-bottom:var(--g5);}
.rg-abas button{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--f-display); font-size:1rem; font-weight:600; color:var(--ink-faint);
  padding:12px 4px; margin-bottom:-1px; border-bottom:2px solid transparent;
  transition:color .22s var(--ease), border-color .22s var(--ease);
}
.rg-abas button + button{margin-left:var(--g3);}
.rg-abas button:hover{color:var(--ink);}
.rg-abas button[aria-selected="true"]{color:var(--accent-dark); border-bottom-color:var(--accent-dark);}
.rg-abas button:focus-visible{outline:2px solid var(--accent-dark); outline-offset:3px;}
.rg-resumo{font-family:var(--f-serif); font-size:clamp(1.3rem,2.3vw,1.75rem); color:var(--ink); line-height:1.35; max-width:34ch;}
.rg-barra{margin:var(--g5) 0;}
.rg-trilho{
  height:44px; background:var(--line-l-soft); border:1px solid var(--line-l);
  border-radius:3px; overflow:hidden;
}
.rg-preenche{
  display:block; height:100%; width:var(--w);
  background:linear-gradient(90deg, var(--wine) 0%, var(--wine-light) 100%);
}
.js .rg-preenche{transition:width .75s var(--ease-out);}
.rg-legenda{margin-top:var(--g2); font-size:var(--t-small); color:var(--ink-soft);}
.rg-legenda span{font-family:var(--f-display); font-weight:600; color:var(--ink);}
.rg-attrs{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:var(--g4);}
.rg-attr dt{
  font-family:var(--f-display); font-size:.76rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-dark); margin-bottom:8px;
  padding-top:14px; border-top:2px solid var(--accent-dark);
}
.rg-attr dd{margin:0; font-size:var(--t-small); line-height:1.6; color:var(--ink-soft);}
.rg-nota{margin-top:var(--g5); font-size:var(--t-micro); color:var(--ink-faint); max-width:60ch; line-height:1.6;}

/* ------------------------------------- linha do tempo da reforma (escuro) */
.linha-reforma{position:relative; margin-top:var(--sp-xs);}
.lr-trilho{position:absolute; left:0; right:0; top:9px; width:100%; height:2px;}
.lr-trilho line{stroke:var(--line-d); stroke-width:2; vector-effect:non-scaling-stroke;}
.lr-etapas{
  list-style:none; display:grid; gap:var(--g5);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); position:relative;
}
.lr-ponto{
  display:block; width:20px; height:20px; border-radius:50%;
  background:var(--wine-deep); border:2px solid var(--line-d); margin-bottom:var(--g3);
}
.lr-atual .lr-ponto{background:var(--accent); border-color:var(--accent);}
.lr-ano{
  display:block; font-family:var(--f-display); font-size:.8rem; font-weight:600;
  letter-spacing:.12em; color:var(--muted-dim); margin-bottom:6px;
}
.lr-atual .lr-ano{color:var(--accent);}
.lr-etapa h3{font-family:var(--f-display); font-size:1.12rem; color:#fff; margin-bottom:var(--g1);}
.lr-etapa p{font-size:var(--t-small); line-height:1.6; color:var(--muted);}
.lr-agora{
  display:inline-block; margin-left:9px; vertical-align:2px;
  font-family:var(--f-body); font-size:.66rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--wine-deep); background:var(--accent);
  padding:3px 8px; border-radius:2px;
}
.lr-nota{margin-top:var(--g5); font-size:var(--t-micro); color:var(--muted-dim);}

/* ------------------------------------ calendário de obrigações (claro) */
.calendario{margin-top:var(--sp-xs);}
.cal-topo{display:flex; align-items:baseline; gap:var(--g3); flex-wrap:wrap; margin-bottom:var(--g5);}
.cal-total{font-family:var(--f-display); font-size:clamp(3rem,7vw,5rem); font-weight:700; line-height:1; color:var(--accent-dark);}
.cal-total-rot{font-size:var(--t-small); color:var(--ink-soft); line-height:1.5;}
.cal-grade{display:grid; gap:2px;}
.cal-linha{
  display:grid; grid-template-columns:minmax(130px,190px) 1fr auto;
  align-items:center; gap:var(--g3); padding:13px 0; border-top:1px solid var(--line-l-soft);
}
.cal-nome{font-family:var(--f-display); font-size:var(--t-small); font-weight:600; color:var(--ink);}
.cal-pontos{display:flex; gap:5px; flex-wrap:wrap;}
.cal-ponto{width:11px; height:11px; border-radius:2px; background:var(--wine); display:block;}
.cal-freq{font-size:var(--t-micro); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint);}
.cal-nota{margin-top:var(--g4); font-size:var(--t-micro); color:var(--ink-faint);}

/* ----------------------------------------- grade do escopo 2x3 (claro) */
.grade-escopo{
  list-style:none; display:grid; gap:1px; margin-top:var(--sp-xs);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  background:var(--line-l); border:1px solid var(--line-l);
}
.ge-cel{background:var(--light); padding:var(--g5) var(--g4);}
.s-light-alt .ge-cel{background:#fff;}
.ge-ico{display:block; width:44px; height:44px; margin-bottom:var(--g3);}
.ge-ico svg{width:100%; height:100%; stroke:var(--accent-dark);}
.ge-cel h3{font-family:var(--f-display); font-size:1.08rem; color:var(--ink); margin-bottom:var(--g1);}
.ge-cel p{font-size:var(--t-small); line-height:1.62; color:var(--ink-soft);}

/* --------------------------------------------------------- animações */
/* Só sob .js: sem script, tudo já nasce no estado final. */
.js [data-percurso] .pc-linha line,
.js [data-reforma] .lr-trilho line{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.1s var(--ease-out);}
.js [data-percurso].in .pc-linha line,
.js [data-reforma].in .lr-trilho line{stroke-dashoffset:0;}

.js [data-percurso] .pc-no,
.js [data-reforma] .lr-etapa,
.js [data-grade] .ge-cel{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:calc(var(--i) * .09s);}
.js [data-percurso].in .pc-no,
.js [data-reforma].in .lr-etapa,
.js [data-grade].in .ge-cel{opacity:1; transform:none;}

.js [data-grade] .ge-ico svg *{stroke-dasharray:120; stroke-dashoffset:120; transition:stroke-dashoffset 1s var(--ease-out); transition-delay:calc(var(--i) * .09s + .2s);}
.js [data-grade].in .ge-ico svg *{stroke-dashoffset:0;}

.js [data-fluxo] .fx-onda path{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.5s var(--ease-out);}
.js [data-fluxo].in .fx-onda path{stroke-dashoffset:0;}
.js [data-fluxo] .fx-etapa{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:calc(var(--i) * .11s + .25s);}
.js [data-fluxo].in .fx-etapa{opacity:1; transform:none;}
.js [data-cal] .cal-ponto{opacity:0; transform:scale(.4); transition:opacity .35s var(--ease-out), transform .35s var(--ease-out); transition-delay:calc(var(--i) * .07s + var(--j) * .022s);}
.js [data-cal].in .cal-ponto{opacity:1; transform:none;}

@media (prefers-reduced-motion:reduce){
  .js [data-percurso] .pc-linha line, .js [data-reforma] .lr-trilho line,
  .js [data-grade] .ge-ico svg *{stroke-dashoffset:0 !important; transition:none;}
  .js [data-percurso] .pc-no, .js [data-reforma] .lr-etapa,
  .js [data-grade] .ge-cel, .js [data-fluxo] .fx-onda path{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.5s var(--ease-out);}
.js [data-fluxo].in .fx-onda path{stroke-dashoffset:0;}
.js [data-fluxo] .fx-etapa{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:calc(var(--i) * .11s + .25s);}
.js [data-fluxo].in .fx-etapa{opacity:1; transform:none;}
.js [data-cal] .cal-ponto{opacity:1 !important; transform:none !important; transition:none;}
  .js .rg-preenche{transition:none;}
}

@media (max-width:1100px){
  .fx-etapas{grid-template-columns:repeat(3,1fr); gap:var(--g5);}
  .fx-etapa{padding-top:0;}
  .fx-onda{display:none;}
}
@media (max-width:620px){
  .fx-etapas{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .pc-linha, .lr-trilho{display:none;}
  .cal-linha{grid-template-columns:1fr auto; row-gap:8px;}
  .cal-pontos{grid-column:1 / -1;}
}

/* Páginas de serviço respiram menos: são páginas de consulta, não de
   apresentação. Mesma progressão de 1,3 entre degraus, 22% menor. Fica
   escopado para a home, já aprovada, não mudar junto. */
.pagina-servico{
  --sp-xs:clamp(40px, 4.6vw, 58px);
  --sp-sm:clamp(52px, 5.8vw, 76px);
  --sp-md:clamp(66px, 7.4vw, 100px);
  --sp-lg:clamp(84px, 9.6vw, 130px);
  --sp-xl:clamp(108px, 12.3vw, 170px);
}

/* =====================================================================
   CELULAR: A LINHA VIRA ESPINHA VERTICAL
   Os três elementos de etapas — fluxo mensal, percurso e reforma — são
   ligados por uma linha horizontal que some abaixo de 900/1100px, porque
   as etapas empilham. Some a linha e some junto a leitura de sequência:
   sobram cartões soltos. Aqui a mesma ligação volta na vertical, que é a
   direção em que a lista cresce no celular, e se desenha de cima para
   baixo quando o bloco entra na tela.
   ===================================================================== */
@media (max-width:900px){
  .fx-etapas, .pc-nos, .lr-etapas{gap:0;}

  .fx-etapa, .pc-no, .lr-etapa{
    display:grid; grid-template-columns:22px 1fr; column-gap:20px;
    padding-bottom:var(--g5); position:relative;
  }
  .fx-etapa:last-child, .pc-no:last-child, .lr-etapa:last-child{padding-bottom:0;}

  /* a espinha: nasce no centro do marcador e desce até a etapa seguinte */
  .fx-etapa::before, .pc-no::before, .lr-etapa::before{
    content:""; position:absolute; left:10px; top:22px; bottom:0; width:2px;
    background:currentColor; opacity:.22;
  }
  .fx-etapa:last-child::before, .pc-no:last-child::before, .lr-etapa:last-child::before{display:none;}

  /* marcadores para a coluna estreita, todos com o mesmo diâmetro */
  .fx-ponto, .lr-ponto{width:20px; height:20px; margin:0; grid-row:1; grid-column:1;}
  .pc-marca{
    width:22px; height:22px; margin:0; grid-row:1; grid-column:1;
    border-radius:50%; place-items:center;
  }
  .pc-marca svg{width:12px; height:12px;}

  /* tudo que não é marcador vai para a coluna do texto */
  .fx-num, .fx-etapa h3, .fx-etapa p,
  .pc-no h3, .pc-no p,
  .lr-ano, .lr-etapa h3, .lr-etapa p{grid-column:2;}
  .fx-num, .lr-ano{grid-row:1; align-self:center;}
  .fx-etapa h3, .pc-no h3, .lr-etapa h3{margin-top:var(--g1);}

  /* a espinha se desenha de cima para baixo */
  .js [data-fluxo] .fx-etapa::before,
  .js [data-percurso] .pc-no::before,
  .js [data-reforma] .lr-etapa::before{
    transform:scaleY(0); transform-origin:top;
    transition:transform .5s var(--ease-out);
    transition-delay:calc(var(--i) * .11s + .2s);
  }
  .js [data-fluxo].in .fx-etapa::before,
  .js [data-percurso].in .pc-no::before,
  .js [data-reforma].in .lr-etapa::before{transform:scaleY(1);}
}

@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .js [data-fluxo] .fx-etapa::before,
  .js [data-percurso] .pc-no::before,
  .js [data-reforma] .lr-etapa::before{transform:none !important; transition:none;}
}