/* GERADO por construir-paginas.py a partir do <style> de index.html.
   Nao edite aqui: edite a home (ou o bloco CSS_EXTRA do script) e rode de novo. */
/* ============================================================
   FONTES
   Servidas por este site, nao pelo Google. Antes eram duas idas a
   servidores externos (fonts.googleapis.com e fonts.gstatic.com) antes de
   qualquer texto aparecer na tela. Os arquivos sao variaveis (eixo 100-900),
   entao uma regra por familia cobre todos os pesos.
   O navegador baixa latin-ext apenas se a pagina usar algum caractere dele.
   ============================================================ */
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fontes/outfit-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fontes/outfit-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fontes/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fontes/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* ============================================================
   ALUMIA
   Metafora: luz sobre o escuro. O escuro e a opacidade
   (burocracia, pendencia, medo); o ambar e a luz que a Alumia
   acende. Toda transicao de secao encena essa virada.
   ============================================================ */
:root{
  --ink:#29221E;
  --amber:#E99A4B;
  --cream:#F1EAE3;
  --white:#FFFFFF;

  --ink-90:color-mix(in srgb, var(--ink) 90%, transparent);
  --ink-72:color-mix(in srgb, var(--ink) 72%, transparent);   /* 5,34 sobre o creme; 64% dava 4,45 e reprovava na WCAG */
  --ink-46:color-mix(in srgb, var(--ink) 46%, transparent);
  --ink-16:color-mix(in srgb, var(--ink) 16%, transparent);
  --ink-08:color-mix(in srgb, var(--ink) 8%, transparent);
  --cream-64:color-mix(in srgb, var(--cream) 64%, transparent);
  --cream-52:color-mix(in srgb, var(--cream) 52%, transparent); /* 4,88 sobre o escuro; 40% dava 3,38 */
  --cream-22:color-mix(in srgb, var(--cream) 22%, transparent);
  --cream-12:color-mix(in srgb, var(--cream) 12%, transparent);
  --amber-30:color-mix(in srgb, var(--amber) 30%, transparent);
  --amber-14:color-mix(in srgb, var(--amber) 14%, transparent);
  --ink-deep:#1C1714;
  --sand:#D8C8B8;   /* o degrau do meio entre o creme e o escuro */

  --u:8px;
  --pad:clamp(20px, 5vw, 64px);
  --max:1240px;

  --display:"Outfit", -apple-system, sans-serif;
  --sans:"Archivo", -apple-system, sans-serif;

  /* escala de pesos: o contraste entre o fio dos titulos e o corpo dos
     rotulos e o que da ritmo a leitura. Quanto maior o tipo, mais leve. */
  --w-fio:200;    /* titulo da home */
  --w-leve:300;   /* titulos de secao */
  --w-livro:400;  /* corpo */
  --w-medio:500;  /* subtitulos e destaques no corpo */
  --w-forte:600;  /* rotulos, botoes, enfase */

  --ease:cubic-bezier(.22,1,.36,1);

  /* Escala de tempo. O tempo passa a dizer o que o elemento e:
     resposta ao usuario abaixo de 220ms, ambiente continua lento. */
  --t-toque:120ms;    /* confirmacao de pressao */
  --t-rapido:180ms;   /* hover, foco, cor, sublinhado */
  --t-medio:220ms;    /* cartoes e blocos maiores */
  --t-revelar:600ms;  /* entrada por rolagem */
  --ease-io:cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:clamp(15px,1.02vw,17px);line-height:1.62;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* grao de papel */
body::after{
  content:"";position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* a lanterna: luz que segue o cursor sobre as secoes escuras */
.lantern{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;
  transition:opacity .7s var(--ease);mix-blend-mode:screen;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--amber) 17%,transparent), transparent 72%);
}
body.lit .lantern{opacity:1}

/* ============================================================
   tipografia
   ============================================================ */
.display{font-family:var(--display);font-weight:400;line-height:.98;letter-spacing:-.022em}
/* sem italico no Outfit: a enfase vira salto de peso + cor */
.display em{font-style:normal;font-weight:var(--w-forte);color:var(--amber);letter-spacing:-.028em}
.h1{font-size:clamp(2.6rem,6.6vw,5.6rem);line-height:.96}
.h2{font-size:clamp(1.95rem,4.3vw,3.5rem);line-height:1.06;font-weight:var(--w-leve);letter-spacing:-.034em}
.h3{font-size:clamp(1.25rem,1.95vw,1.68rem);line-height:1.18;font-weight:var(--w-medio);letter-spacing:-.018em}
.eyebrow{font-size:.7rem;font-weight:var(--w-forte);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-46);display:flex;align-items:center;gap:calc(var(--u)*1.5)}
.eyebrow::before{content:"";width:calc(var(--u)*4);height:1px;background:var(--amber);flex:none}
.eyebrow--light{color:var(--cream-52)}
.lede{
  font-family:var(--display);font-weight:var(--w-leve);
  font-size:clamp(1.1rem,1.5vw,1.36rem);line-height:1.48;letter-spacing:-.016em;
  color:var(--ink-72);max-width:56ch;
}
.band--dark .lede{color:var(--cream-64)}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* marcador do que ainda falta o cliente definir */
.tbd{
  color:var(--amber);font-style:normal;
  border-bottom:1.5px dashed color-mix(in srgb,var(--amber) 55%,transparent);
  padding-bottom:1px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* ============================================================
   layout e emendas entre secoes
   ============================================================ */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}
.band{padding-block:clamp(76px,10vw,140px)}
.band--dark{background:var(--ink);color:var(--cream)}
.band--deep{background:var(--ink-deep);color:var(--cream)}
.band--sand{background:var(--sand);color:var(--ink)}

/* EMENDA 1 - amanhecer: o ambar vaza do escuro para o claro */
.seam-glow{position:relative;height:0}
.seam-glow::before{
  content:"";position:absolute;left:50%;translate:-50% -50%;width:min(1100px,100%);height:300px;
  background:radial-gradient(ellipse at center, var(--amber-30), transparent 66%);
  filter:blur(26px);opacity:0;transition:opacity 1.4s var(--ease);pointer-events:none;
}
.seam-glow.in::before{opacity:.75}

/* EMENDA 2 - eclipse: a roseta encaixada exatamente na juncao */
.seam-eclipse{position:relative;height:0;z-index:5;display:flex;justify-content:center}
.seam-eclipse span{
  position:absolute;translate:0 -50%;width:clamp(64px,8vw,92px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  transition:rotate 1.6s var(--ease),scale .9s var(--ease);scale:.6;rotate:-90deg;
}
.seam-eclipse.in span{scale:1;rotate:0deg}
.seam-eclipse img{width:52%}
.seam-eclipse--onInk span{background:var(--ink)}
.seam-eclipse--onDeep span{background:var(--ink-deep)}
.seam-eclipse--onCream span{background:var(--cream)}
.seam-eclipse--onSand span{background:var(--sand)}


/* ============================================================
   botoes
   ============================================================ */
.btn{
  --bg:var(--amber);--fg:var(--ink);
  display:inline-flex;align-items:center;gap:calc(var(--u)*1.25);
  padding:calc(var(--u)*1.75) calc(var(--u)*3.25);
  background:var(--bg);color:var(--fg);border-radius:999px;
  font-family:var(--sans);font-weight:var(--w-forte);font-size:.9rem;position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--t-rapido) var(--ease),color var(--t-rapido) var(--ease),box-shadow var(--t-rapido) var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);transition:transform var(--t-medio) var(--ease)}
.btn:hover{color:var(--cream);transform:translateY(-2px);box-shadow:0 16px 30px -16px color-mix(in srgb,var(--ink) 60%,transparent)}
.btn:hover::before{transform:translateY(0)}
.btn__dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}
/* o simbolo do WhatsApp herda a cor do botao (currentColor) em vez de usar
   o verde da marca, que brigaria com o ambar do fundo */
.ico-wa{width:18px;height:18px;flex:none;fill:currentColor}
.btn--ghost{--bg:transparent;box-shadow:inset 0 0 0 1px var(--ink-16)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px transparent}
.btn--light{--bg:var(--cream)}
.btn--light::before{background:var(--amber)}
.btn--light:hover{color:var(--ink)}
.btn--onInk{--bg:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px var(--cream-22)}
.btn--onInk::before{background:var(--amber)}
.btn--onInk:hover{color:var(--ink);box-shadow:inset 0 0 0 1px transparent}

.slink{position:relative;display:inline-block;padding-bottom:2px}
.slink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--t-rapido) var(--ease)}
.slink:hover::after{transform:scaleX(1);transform-origin:left}

.wa{display:inline-flex;align-items:center;gap:calc(var(--u)*1.25);font-weight:500}
.wa::before{
  content:"";width:9px;height:9px;border-radius:50%;background:#4ADE80;flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,#4ADE80 70%,transparent);animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,#4ADE80 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ============================================================
   header + barra fixa do celular
   ============================================================ */
.beam{position:fixed;top:0;left:0;height:2px;width:0;background:var(--amber);z-index:1000;transition:width .1s linear}
.hdr{position:fixed;top:0;left:0;right:0;z-index:800;background:color-mix(in srgb,var(--cream) 82%,transparent);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid transparent;transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease)}
.hdr.is-stuck{border-bottom-color:var(--ink-16)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--u);height:76px}
.hdr__logo{position:relative;display:block}
.hdr__logo img{height:24px;width:auto;transition:opacity .45s var(--ease)}
.hdr__logo--cream{position:absolute;inset:0;opacity:0}
/* o header assume o tom da secao que esta passando por tras dele */
.hdr[data-tom="areia"]{background:color-mix(in srgb,var(--sand) 86%,transparent)}
.hdr[data-tom="escuro"],.hdr[data-tom="fundo"]{backdrop-filter:blur(14px) saturate(1.2)}
.hdr[data-tom="escuro"]{background:color-mix(in srgb,var(--ink) 74%,transparent)}
.hdr[data-tom="fundo"]{background:color-mix(in srgb,var(--ink-deep) 72%,transparent)}
.hdr[data-tom="escuro"],.hdr[data-tom="fundo"]{border-bottom-color:transparent}
.hdr[data-tom="escuro"] .hdr__logo--cream,.hdr[data-tom="fundo"] .hdr__logo--cream{opacity:1}
.hdr[data-tom="escuro"] .hdr__logo--ink,.hdr[data-tom="fundo"] .hdr__logo--ink{opacity:0}
.hdr[data-tom="escuro"] .hdr__nav a,.hdr[data-tom="fundo"] .hdr__nav a{color:var(--cream-64)}
.hdr[data-tom="escuro"] .hdr__nav a:hover,.hdr[data-tom="fundo"] .hdr__nav a:hover{color:var(--cream)}
.hdr[data-tom="escuro"] .burger span,.hdr[data-tom="escuro"] .burger span::before,.hdr[data-tom="escuro"] .burger span::after,
.hdr[data-tom="fundo"] .burger span,.hdr[data-tom="fundo"] .burger span::before,.hdr[data-tom="fundo"] .burger span::after{background:var(--cream)}
.hdr.is-open{background:var(--cream)!important}
.hdr.is-open .hdr__logo--cream{opacity:0}
.hdr.is-open .hdr__logo--ink{opacity:1}
.hdr.is-open .burger span::before,.hdr.is-open .burger span::after{background:var(--ink)}
.hdr__nav{display:flex;align-items:center;gap:calc(var(--u)*4)}
.hdr__nav a{font-size:.88rem;font-weight:var(--w-medio);color:var(--ink-72);transition:color var(--t-rapido) var(--ease)}
.hdr__nav a:hover{color:var(--ink)}
.hdr__cta{display:flex;align-items:center;gap:calc(var(--u)*2)}
.hdr .btn{padding:calc(var(--u)*1.35) calc(var(--u)*2.5);font-size:.85rem}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;margin-right:-10px}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink);position:relative;transition:transform var(--t-medio) var(--ease),background var(--t-rapido)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--ink);transition:transform var(--t-medio) var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.is-open .burger span{background:transparent}
.is-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.is-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:850;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--ink-16);
  border-top:1px solid var(--ink-16);
  transform:translateY(105%);transition:transform .55s var(--ease);
}
.mbar.show{transform:none}
.mbar a{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*1);padding:calc(var(--u)*2.25) var(--u);background:var(--cream);font-size:.88rem;font-weight:var(--w-forte)}
.mbar a:first-child{background:var(--amber)}

/* ============================================================
   HERO — a luz acendendo
   A primeira dobra e o escuro em que a pessoa chega. Um facho ambar
   atravessa a tela e revela o texto por tras de si. A mascara mora
   nos keyframes de proposito: se a animacao nao rodar, o conteudo
   aparece inteiro em vez de ficar preso invisivel.
   ============================================================ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(600px,86svh,900px);display:flex;align-items:center;
  padding-block:clamp(104px,12.5vh,152px) clamp(48px,7vh,88px);
}
/* a foto cobre o banner inteiro, em duotone quente, por tras de tudo */
.hero__art{position:absolute;z-index:-3;inset:0;margin:0;overflow:hidden}
.hero__art picture{display:contents}
.hero__art img{
  width:100%;height:100%;object-fit:cover;object-position:62% 42%;
  filter:grayscale(1) brightness(.92) contrast(1.1) sepia(.62) saturate(1.85) hue-rotate(-10deg);
  opacity:0;animation:brotarArt 2.6s var(--ease) .5s forwards;
}
@keyframes brotarArt{to{opacity:.8}}
/* o veu garante a leitura do texto por cima da foto */
.hero__art::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,var(--ink-deep) 0 22%,color-mix(in srgb,var(--ink-deep) 88%,transparent) 42%,color-mix(in srgb,var(--ink-deep) 52%,transparent) 64%,color-mix(in srgb,var(--ink-deep) 26%,transparent)),
    linear-gradient(0deg,var(--ink-deep) 0 6%,transparent 34%),
    linear-gradient(180deg,color-mix(in srgb,var(--ink-deep) 88%,transparent) 0 8%,transparent 30%);
}
.hero__aura{
  position:absolute;z-index:-2;inset:-24% -12% auto;aspect-ratio:1.4;
  background:radial-gradient(ellipse at 34% 46%,color-mix(in srgb,var(--amber) 12%,transparent),transparent 62%);
  opacity:0;animation:brotar2 2.4s var(--ease) .7s forwards;
}
@keyframes brotar2{to{opacity:1}}
.hero__facho{
  position:absolute;z-index:-1;top:-10%;bottom:-10%;left:0;width:30%;pointer-events:none;
  background:linear-gradient(95deg,transparent,color-mix(in srgb,var(--amber) 14%,transparent) 48%,color-mix(in srgb,var(--amber) 34%,transparent) 74%,color-mix(in srgb,var(--cream) 16%,transparent) 88%,transparent);
  filter:blur(10px);opacity:0;
  animation:facho 2.15s cubic-bezier(.42,0,.16,1) .2s both;
}
@keyframes facho{
  0%{transform:translateX(-130%);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:translateX(345%);opacity:0}
}
.hero__reveal{
  -webkit-mask-image:linear-gradient(92deg,#000 0 34%,rgba(0,0,0,.35) 44%,transparent 58%);
  mask-image:linear-gradient(92deg,#000 0 34%,rgba(0,0,0,.35) 44%,transparent 58%);
  -webkit-mask-size:290% 100%;mask-size:290% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:varrer 2s cubic-bezier(.42,0,.16,1) .3s both;
}
@keyframes varrer{
  from{-webkit-mask-position:100% 0;mask-position:100% 0}
  to{-webkit-mask-position:0% 0;mask-position:0% 0}
}
.hero__say{max-width:min(54%,640px)}
.hero .h1{margin:calc(var(--u)*3.25) 0 calc(var(--u)*3);max-width:16ch}
.hero .lede{max-width:46ch;color:var(--cream-64)}

/* ---- a escolha: duas portas, cada uma com o seu chamado ---- */
.hero__choice{margin-top:clamp(36px,5vh,64px);max-width:940px}
.hero__q{
  font-family:var(--display);font-weight:var(--w-leve);letter-spacing:-.026em;
  font-size:clamp(1.3rem,2.1vw,1.75rem);color:var(--cream);
  display:flex;align-items:center;gap:calc(var(--u)*2.5);margin-bottom:calc(var(--u)*3);
}
.hero__q::after{content:"";height:1px;flex:1;background:var(--cream-12)}
.sws{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*2.5)}
.sw{
  position:relative;isolation:isolate;text-align:left;
  display:flex;flex-direction:column;gap:calc(var(--u)*1.5);
  padding:calc(var(--u)*3.5);
  border:1px solid var(--cream-12);border-radius:calc(var(--u)*.75);
  background:color-mix(in srgb,var(--cream) 4%,transparent);
  transition:transform var(--t-medio) var(--ease),border-color var(--t-medio) var(--ease),background var(--t-medio) var(--ease);
}
.sw::before{
  content:"";position:absolute;z-index:-1;inset:auto -10% -55% -10%;aspect-ratio:2.2;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--amber) 22%,transparent),transparent 66%);
  opacity:0;transition:opacity .6s var(--ease);
}
.sw:hover,.sw:focus-visible{transform:translateY(-3px);border-color:color-mix(in srgb,var(--amber) 45%,transparent)}
.sw:hover::before,.sw:focus-visible::before,.sw[aria-pressed="true"]::before{opacity:1}
.sw[aria-pressed="true"]{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 9%,transparent)}
.sw__t{
  display:flex;align-items:baseline;gap:calc(var(--u)*1.75);
  font-family:var(--display);font-weight:var(--w-medio);letter-spacing:-.022em;
  font-size:clamp(1.12rem,1.5vw,1.38rem);line-height:1.22;
}
.sw__bulb{
  flex:none;width:calc(var(--u)*1.25);height:calc(var(--u)*1.25);border-radius:50%;
  background:var(--cream-22);translate:0 -.15em;
  transition:background var(--t-medio) var(--ease),box-shadow var(--t-medio) var(--ease);
}
.sw:hover .sw__bulb,.sw:focus-visible .sw__bulb,.sw[aria-pressed="true"] .sw__bulb{
  background:var(--amber);box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 18%,transparent),0 0 18px var(--amber);
}
.sw__d{font-size:.92rem;line-height:1.5;color:var(--cream-64);padding-left:calc(var(--u)*3)}
.sw__cta{
  margin-top:calc(var(--u)*1.5);align-self:flex-start;margin-left:calc(var(--u)*3);
  display:inline-flex;align-items:center;gap:calc(var(--u)*1.25);
  padding:calc(var(--u)*1.35) calc(var(--u)*2.75);border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--cream-22);
  font-family:var(--sans);font-weight:var(--w-forte);font-size:.82rem;letter-spacing:.01em;color:var(--cream);
  transition:background var(--t-medio) var(--ease),color var(--t-medio) var(--ease),box-shadow var(--t-medio) var(--ease);
}
.sw:hover .sw__cta,.sw:focus-visible .sw__cta,.sw[aria-pressed="true"] .sw__cta{
  background:var(--amber);color:var(--ink);box-shadow:inset 0 0 0 1px transparent;
}

/* ============================================================
   POR QUE EXISTIMOS — 100 luzes, 15 apagam
   ============================================================ */
.why{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,96px);align-items:start}
.why .h2{max-width:20ch;margin-top:calc(var(--u)*3)}
.why__p{margin-top:calc(var(--u)*4)}
.lights{border:1px solid var(--ink-16);padding:clamp(24px,3vw,36px);background:color-mix(in srgb,var(--white) 52%,transparent)}
.lights__grid{display:grid;grid-template-columns:repeat(20,1fr);gap:clamp(5px,.62vw,9px);margin-block:calc(var(--u)*3)}
.lights__grid i{
  aspect-ratio:1;border-radius:50%;background:var(--ink-08);
  transition:background .5s var(--ease),box-shadow .5s var(--ease);
}
.lights.on i{background:var(--amber);box-shadow:0 0 7px var(--amber-30);transition-delay:calc(var(--d,0)*11ms)}
.lights.on i.out{background:color-mix(in srgb,var(--ink) 9%,transparent);box-shadow:none;transition-delay:calc(1200ms + var(--o,0)*90ms)}
.lights__k{display:flex;justify-content:space-between;gap:var(--u);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-46);font-weight:var(--w-forte)}
.lights__k b{color:var(--amber);font-weight:600}
.lights__n{display:block;font-family:var(--display);font-weight:var(--w-forte);font-size:clamp(4.6rem,9.5vw,8rem);line-height:.84;letter-spacing:-.055em;color:var(--ink)}
.lights__lead{display:block;margin-bottom:calc(var(--u)*3)}
.lights__cap{display:block;margin-top:calc(var(--u)*1.5);font-size:1.02rem;font-weight:var(--w-medio);color:var(--ink-72);max-width:24ch;line-height:1.35}
.src{margin-top:calc(var(--u)*3);font-size:.72rem;line-height:1.5;color:var(--ink-46)}

/* ============================================================
   MOMENTOS — uma caixa so, com linha separando cada bloco
   As duas colunas tem o mesmo numero de itens e a mesma altura de
   linha, entao as reguas atravessam a caixa alinhadas.
   ============================================================ */
.mom{
  display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(40px,5vw,72px);
  border:1px solid var(--ink-16);background:color-mix(in srgb,var(--white) 30%,transparent);
}
.mom__col{position:relative;transition:opacity var(--t-medio) var(--ease)}
.mom__col + .mom__col{border-left:1px solid var(--ink-16)}
.mom__h{
  display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*2);
  min-height:calc(var(--u)*9);padding:calc(var(--u)*2) calc(var(--u)*4);
  border-bottom:1px solid var(--ink-16);background:color-mix(in srgb,var(--ink) 5%,transparent);
}
.mom__h h3{font-family:var(--display);font-weight:var(--w-medio);font-size:clamp(1.02rem,1.4vw,1.2rem);letter-spacing:-.018em;line-height:1.2}
.mom__tag{
  flex:none;font-size:.62rem;font-weight:var(--w-forte);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--amber);padding:3px calc(var(--u)*1.25);border-radius:999px;
  opacity:0;scale:.8;transition:opacity var(--t-medio) var(--ease),scale var(--t-medio) var(--ease);
}
.mom__list li{
  display:flex;align-items:center;gap:calc(var(--u)*2);
  min-height:calc(var(--u)*8.5);padding:calc(var(--u)*1.75) calc(var(--u)*4);
  border-bottom:1px solid var(--ink-08);
  font-size:1rem;font-weight:var(--w-medio);line-height:1.35;
}
.mom__list li:last-child{border-bottom:0}
.mom__list li::before{content:"";flex:none;width:calc(var(--u)*2);height:1px;background:var(--amber);transition:width var(--t-rapido) var(--ease)}
.mom__list li:hover::before{width:calc(var(--u)*4)}
/* estado vindo do seletor do banner */
body[data-momento="abrindo"] .mom__col[data-k="pendencias"],
body[data-momento="pendencias"] .mom__col[data-k="abrindo"]{opacity:.4}
body[data-momento="abrindo"] .mom__col[data-k="abrindo"] .mom__tag,
body[data-momento="pendencias"] .mom__col[data-k="pendencias"] .mom__tag{opacity:1;scale:1}
.mom__reset{display:none;margin-top:calc(var(--u)*4);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:var(--w-forte);color:var(--ink-46)}
body[data-momento] .mom__reset{display:inline-flex;align-items:center;gap:calc(var(--u)*1)}

/* ============================================================
   ONDE COSTUMA TRAVAR — cada linha e um interruptor
   No escuro o problema fica apagado e so o lado da Alumia acende.
   ============================================================ */
.jam{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--cream-22)}
.jam__head{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*3);padding:calc(var(--u)*2) 0;border-bottom:1px solid var(--cream-12)}
.jam__head span{font-size:.7rem;font-weight:var(--w-forte);letter-spacing:.18em;text-transform:uppercase;color:var(--cream-52)}
.jam__head span:last-child{color:var(--amber)}
.jam__row{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*3);align-items:stretch;border-bottom:1px solid var(--cream-12)}
.jam__cell{padding:calc(var(--u)*3.5) calc(var(--u)*3) calc(var(--u)*3.5) 0;position:relative;font-size:.98rem;line-height:1.55}
.jam__cell--dark{color:var(--cream);font-weight:var(--w-livro)}
.jam__cell--light{
  display:flex;align-items:flex-start;gap:calc(var(--u)*2.5);
  padding-left:calc(var(--u)*4);border-left:1px solid var(--cream-12);color:var(--cream);
}
.jam__cell--light::before{
  content:"";flex:none;margin-top:.45em;width:calc(var(--u)*1.25);height:calc(var(--u)*1.25);border-radius:50%;
  background:var(--cream-12);transition:background .6s var(--ease),box-shadow .6s var(--ease);
}
.jam__row.lit .jam__cell--light::before{background:var(--amber);box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 16%,transparent),0 0 16px var(--amber-30)}
.jam__cell--light strong{font-weight:var(--w-medio)}
.jam__k{display:none}

/* ============================================================
   COMO TRABALHAMOS
   ============================================================ */
.creed{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);margin-top:clamp(44px,5vw,80px)}
.creed article{position:relative;padding-top:calc(var(--u)*4);border-top:1px solid var(--ink-16)}
.creed p{font-size:1rem}
.creed article::before{content:"";position:absolute;top:-2px;left:0;width:0;height:3px;background:var(--amber);transition:width 1.1s var(--ease)}
.creed article.lit::before{width:calc(var(--u)*8)}
.creed h3{font-family:var(--display);font-weight:var(--w-medio);font-size:clamp(1.3rem,2vw,1.75rem);letter-spacing:-.024em;margin-bottom:calc(var(--u)*2)}
.creed p{color:var(--ink-72);font-size:.98rem}

/* ============================================================
   O CAMINHO — a linha de luz que se desenha
   ============================================================ */
.path{margin-top:clamp(48px,6vw,88px);position:relative}
.path__rail{position:absolute;top:calc(var(--u)*1.5);left:0;right:0;height:1px;background:var(--cream-12)}
.path__rail i{display:block;height:100%;width:calc(var(--p,0)*100%);background:var(--amber);box-shadow:0 0 12px var(--amber-30)}
.path__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px)}
.path__step{position:relative;padding-top:calc(var(--u)*6)}
.path__step::before{
  content:"";position:absolute;top:calc(var(--u)*1.5);left:0;translate:0 -50%;
  width:calc(var(--u)*1.5);height:calc(var(--u)*1.5);border-radius:50%;background:var(--ink-deep);
  box-shadow:inset 0 0 0 1px var(--cream-22);transition:background .5s var(--ease),box-shadow .5s var(--ease)
}
.path__step.lit::before{background:var(--amber);box-shadow:0 0 0 5px color-mix(in srgb,var(--amber) 16%,transparent),0 0 16px var(--amber-30)}
.path__k{font-size:.74rem;font-weight:var(--w-forte);letter-spacing:.16em;color:var(--cream-52);transition:color .5s var(--ease)}
.path__step.lit .path__k{color:var(--amber)}
.path__step h3{font-family:var(--display);font-weight:var(--w-medio);font-size:clamp(1.2rem,1.75vw,1.5rem);letter-spacing:-.022em;margin:calc(var(--u)*1.5) 0 calc(var(--u)*1.5)}
.path__step p{font-size:.94rem;color:var(--cream-64);line-height:1.5}

/* ============================================================
   DIAGNÓSTICO — sobre o creme
   ============================================================ */
.diag{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,80px);align-items:center}
/* o formulario mora num cartao e os campos tem caixa, borda e foco
   visiveis: antes pareciam so texto e ninguem via onde escrever */
.formcard{
  background:var(--white);border:1px solid var(--ink-16);border-radius:calc(var(--u)*1.5);
  padding:clamp(24px,3vw,40px);box-shadow:0 30px 60px -44px color-mix(in srgb,var(--ink) 60%,transparent);
}
.formcard__hd{display:flex;align-items:baseline;justify-content:space-between;gap:calc(var(--u)*2);flex-wrap:wrap;
  padding-bottom:calc(var(--u)*3);margin-bottom:calc(var(--u)*3);border-bottom:1px solid var(--ink-08)}
.formcard__hd h3{font-family:var(--display);font-weight:var(--w-medio);font-size:1.2rem;letter-spacing:-.022em}
.formcard__hd span{font-size:.8rem;color:var(--ink-46)}
.form{display:grid;gap:calc(var(--u)*2.5)}
.field{display:grid;gap:calc(var(--u)*.75)}
.field label,.fset legend,.lbl{font-size:.8rem;font-weight:var(--w-forte);color:var(--ink);letter-spacing:0;text-transform:none}
.field label .opt,.fset legend .opt{font-weight:var(--w-livro);color:var(--ink-46)}
.req{color:var(--amber);font-weight:var(--w-forte)}
.field input,.field textarea{
  font:inherit;font-size:.98rem;font-weight:var(--w-medio);color:var(--ink);
  background:color-mix(in srgb,var(--cream) 55%,var(--white));
  border:1px solid var(--ink-16);border-radius:calc(var(--u)*1);
  padding:calc(var(--u)*1.75) calc(var(--u)*2);
  transition:border-color var(--t-rapido) var(--ease),box-shadow var(--t-rapido) var(--ease),background var(--t-rapido) var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-46);font-weight:var(--w-livro)}
.field input:hover,.field textarea:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.field input:focus,.field textarea:focus{
  outline:none;background:var(--white);border-color:var(--amber);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 26%,transparent);
}
.field textarea{resize:vertical;min-height:84px}
.field .help{font-size:.78rem;color:var(--ink-46)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*2.5)}
.fset{border:0;padding:0;margin:0;display:grid;gap:calc(var(--u)*1.5)}
.chips{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.25)}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-flex;align-items:center;gap:calc(var(--u)*1);
  padding:calc(var(--u)*1.35) calc(var(--u)*2.25);border:1px solid var(--ink-16);border-radius:999px;
  font-size:.88rem;font-weight:var(--w-medio);cursor:pointer;background:color-mix(in srgb,var(--cream) 55%,var(--white));
  transition:background var(--t-rapido) var(--ease),border-color var(--t-rapido) var(--ease);
}
.chip span:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.chip span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-16);transition:background var(--t-rapido) var(--ease),box-shadow var(--t-rapido) var(--ease)}
.chip input:checked + span{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 16%,transparent)}
.chip input:checked + span::before{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.chip input:focus-visible + span{outline:2px solid var(--amber);outline-offset:3px}
.err{font-size:.82rem;font-weight:var(--w-medio);color:#A8341B;display:none}
.field.bad input,.field.bad textarea{border-bottom-color:#A8341B}
.field.bad .err,.fset.bad .err{display:block}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*2.5);padding-top:calc(var(--u)*1)}
.form__foot .btn{flex:none}
.form__note{font-size:.76rem;color:var(--ink-46);max-width:44ch}
.sent{
  padding:clamp(28px,3.4vw,44px);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);
  background:color-mix(in srgb,var(--amber) 13%,transparent);
  display:none;gap:calc(var(--u)*2);animation:glow .7s var(--ease) both;margin-top:calc(var(--u)*2);
}
.sent.show{display:grid}
.sent img{width:40px}
.sent h3{font-family:var(--display);font-weight:var(--w-leve);font-size:1.6rem;letter-spacing:-.03em;color:var(--ink)}
.sent p{color:var(--ink-72)}
.direct{margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--ink-16)}
.direct div{display:flex;justify-content:space-between;gap:var(--u);align-items:baseline;padding:calc(var(--u)*2.25) 0;border-bottom:1px solid var(--ink-16);flex-wrap:wrap}
.direct dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-46);font-weight:var(--w-forte)}
.direct dd{font-size:1rem;font-weight:var(--w-medio);text-align:right}

/* ============================================================
   RODAPÉ — tres contatos e a marca gigante sangrando na base
   ============================================================ */
.ftr{background:var(--ink-deep);color:var(--cream);overflow:hidden}
.ftr__in{
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(28px,5vw,72px);flex-wrap:wrap;
  padding-block:clamp(56px,8vw,104px) clamp(36px,5vw,56px);
}
.ftr__say{
  font-family:var(--display);font-weight:var(--w-leve);letter-spacing:-.03em;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.1;max-width:14ch;
}
.ftr__links{display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap}
.ftr__link{font-size:1rem;font-weight:var(--w-medio);color:var(--cream-64);transition:color var(--t-rapido) var(--ease)}
.ftr__ig{display:inline-flex;align-items:center;gap:calc(var(--u)*1.25)}
.ftr__ig svg{flex:none}
/* o rodape passou a carregar dados do escritorio: a coluna da direita empilha
   horario, telefone, registro e politica, em vez de alinhar tudo numa linha */
.ftr__sub{margin-top:calc(var(--u)*1.5);font-size:.95rem;line-height:1.7;color:var(--cream-64)}
.ftr__links--col{flex-direction:column;align-items:flex-start;gap:calc(var(--u)*1.25)}
.ftr__meta{font-size:.95rem;line-height:1.6;color:var(--cream-64)}
.ftr__sep{color:var(--cream-52);padding-inline:calc(var(--u)*.5)}
.ftr__wa{display:inline-flex;align-items:center;gap:calc(var(--u)*1.25)}
.ftr__pp{text-decoration:underline;text-underline-offset:.25em;text-decoration-color:var(--cream-52)}
.ftr__link:hover{color:var(--amber)}
.ftr__base{
  display:flex;flex-wrap:wrap;gap:var(--u) clamp(20px,3vw,40px);justify-content:space-between;
  padding-top:calc(var(--u)*3);padding-bottom:clamp(28px,4vw,48px);
  border-top:1px solid var(--cream-12);font-size:.74rem;color:var(--cream-52);line-height:1.6;
}
.ftr__mark{line-height:0;padding-inline:clamp(12px,2vw,28px)}
.ftr__mark img{width:100%;height:auto;opacity:.17;margin-bottom:-4.5%}

/* ============================================================
   ANIMAÇÃO
   ============================================================ */
.rv{opacity:0;transform:translateY(24px);transition:opacity var(--t-revelar) var(--ease),transform var(--t-revelar) var(--ease);transition-delay:calc(var(--i,0)*55ms)}
.rv.in{opacity:1;transform:none}
/* entrada lateral, para variar o gesto entre secoes */
.rv--side{transform:translateX(-28px)}
.rv--side.in{transform:none}
/* cada palavra do titulo sobe por tras da propria mascara */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.02em .07em .16em;margin:-.02em -.07em -.16em}
.w > span{display:inline-block;transform:translateY(108%);transition:transform .95s var(--ease);transition-delay:calc(var(--i,0)*48ms)}
.in .w > span{transform:none}
.boot .w > span{animation:up 1s var(--ease) forwards;animation-delay:calc(var(--i,0)*52ms + 260ms)}
@keyframes up{to{transform:none}}
.boot-f{opacity:0;animation:fade .9s var(--ease) forwards;animation-delay:calc(var(--i,0)*95ms + 260ms)}
@keyframes fade{to{opacity:1}}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1040px){
  .why,.diag{grid-template-columns:1fr}
  .creed{grid-template-columns:1fr;gap:calc(var(--u)*5)}
  .path__steps{grid-template-columns:1fr;gap:calc(var(--u)*4)}
  .path__rail{top:0;left:calc(var(--u)*.6);right:auto;width:1px;height:100%}
  .path__rail i{width:100%;height:calc(var(--p,0)*100%)}
  .path__step{padding-top:0;padding-left:calc(var(--u)*4)}
  .path__step::before{top:calc(var(--u)*1);left:0;translate:-38% -50%}
  .ftr__in{gap:calc(var(--u)*4)}
  .lights__grid{grid-template-columns:repeat(20,1fr)}
}
@media (max-width:820px){
  .hdr__nav,.hdr__phone{display:none}
  .burger{display:flex}
  .hdr__in{height:66px}
  .hdr__logo img{height:21px}
  .hdr .btn{padding:calc(var(--u)*1.1) calc(var(--u)*2);font-size:.78rem;white-space:nowrap}
  .hdr__cta{gap:calc(var(--u)*1)}
  .hdr.is-open{background:var(--cream)}
  .hdr__nav.is-mobile{display:flex;position:fixed;inset:66px 0 auto;flex-direction:column;align-items:flex-start;gap:0;background:var(--cream);padding:var(--pad) var(--pad) calc(var(--u)*5);border-bottom:1px solid var(--ink-16)}
  .hdr__nav.is-mobile a{font-size:1.4rem;font-family:var(--display);font-weight:var(--w-leve);letter-spacing:-.025em;color:var(--ink);padding:calc(var(--u)*1.75) 0;width:100%;border-bottom:1px solid var(--ink-08)}
  .mbar{display:grid}
  body{padding-bottom:58px}
  .hero{min-height:0;padding-block:clamp(104px,16vh,140px) clamp(56px,9vh,88px)}
  .hero .h1{max-width:12ch}
  .hero__say{max-width:none}
  .hero__art img{object-position:68% 24%}
  .hero__art::after{background:
    linear-gradient(0deg,var(--ink-deep) 0 22%,color-mix(in srgb,var(--ink-deep) 72%,transparent) 55%,color-mix(in srgb,var(--ink-deep) 42%,transparent)),
    linear-gradient(180deg,color-mix(in srgb,var(--ink-deep) 82%,transparent) 0 8%,transparent 28%)}
  .sws{grid-template-columns:1fr}
  .mom{grid-template-columns:1fr}
  /* o interruptor vira empilhado: escuro em cima, luz embaixo */
  .jam__head{display:none}
  .jam__row{grid-template-columns:1fr;gap:0;padding-block:calc(var(--u)*2.5)}
  .jam__cell{padding:calc(var(--u)*2.5)}
  .jam__cell--dark{margin-right:0}
  .jam__cell--light{padding-left:calc(var(--u)*2.5);align-items:flex-start}
  .jam__cell--light::before{margin-top:.5em}
  .jam__k{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;font-weight:var(--w-forte);margin-bottom:calc(var(--u)*1);color:var(--cream-64)}
  .jam__cell--light .jam__k{color:var(--amber);opacity:1}
  .form__row{grid-template-columns:1fr}
  .ftr__in{flex-direction:column;align-items:flex-start;gap:calc(var(--u)*4)}
  .ftr__links{gap:calc(var(--u)*2.5)}
  .direct dd{text-align:left}
  .lights__grid{grid-template-columns:repeat(10,1fr);gap:7px}
  .lantern{display:none}
}
@media (max-width:430px){
  /* em telas pequenas o CTA do topo disputa espaco com a marca e o menu.
     A barra fixa de baixo ja carrega "Pedir diagnostico", entao aqui ele sai. */
  .hdr .btn{display:none}
  .hdr__logo img{height:23px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .hero__reveal{-webkit-mask-image:none;mask-image:none}
  .hero__facho{display:none}
  .hero__aura{opacity:1;animation:none}
  .hero__art img{opacity:.8;animation:none}
  .w > span{transform:none!important;animation:none!important}
  .boot-f{opacity:1}
  .lantern{display:none}
}

/* ============ POLITICA DE PRIVACIDADE (sobreposicao) ============
   Mesma paleta do site: cartao creme sobre veu escuro. z-index acima do
   cabecalho fixo (1000) e da barra de acoes do mobile. */
.pp{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px)}
.pp__veu{position:absolute;inset:0;background:color-mix(in srgb, var(--ink-deep) 84%, transparent);animation:ppVeu .3s var(--ease)}
.pp__card{
  position:relative;display:flex;flex-direction:column;
  width:min(100%,720px);max-height:min(88vh,860px);
  background:var(--cream);color:var(--ink);border-radius:clamp(14px,2vw,22px);
  box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden;animation:ppCard .38s var(--ease);
}
.pp__topo{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--u);
  padding:clamp(20px,3vw,32px) clamp(20px,3vw,36px) calc(var(--u)*2);border-bottom:1px solid var(--ink-16);
}
.pp__titulo{font-family:var(--display);font-weight:var(--w-leve);letter-spacing:-.03em;font-size:clamp(1.4rem,3.4vw,2rem);line-height:1.1;margin:0}
.pp__x{
  flex:none;display:grid;place-items:center;width:40px;height:40px;margin:-6px -8px 0 0;
  border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background var(--t-toque) var(--ease);
}
.pp__x:hover{background:var(--ink-08)}
.pp__doc{overflow-y:auto;padding:clamp(20px,3vw,32px) clamp(20px,3vw,36px)}
.pp__doc h3{font-family:var(--display);font-weight:var(--w-medio);letter-spacing:-.02em;font-size:clamp(1.05rem,2.2vw,1.25rem);line-height:1.3;margin:calc(var(--u)*4) 0 calc(var(--u)*1.25)}
.pp__doc p,.pp__doc ul{margin:0 0 calc(var(--u)*2);line-height:1.75}
/* o reset global zera list-style; num documento corrido os marcadores ajudam */
.pp__doc ul{padding-left:1.25em;list-style:disc}
.pp__doc li::marker{color:var(--amber)}
.pp__doc li{margin-bottom:calc(var(--u)*.75)}
.pp__doc a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--amber)}
.pp__doc a:hover{color:var(--amber)}
.pp__intro{font-size:1.05rem;color:var(--ink-72);margin-top:0}
.pp__data{margin-top:calc(var(--u)*4);padding-top:calc(var(--u)*2.5);border-top:1px solid var(--ink-16);font-size:.85rem;color:var(--ink-72)}
.pp__pe{padding:calc(var(--u)*2) clamp(20px,3vw,36px) clamp(20px,3vw,28px);border-top:1px solid var(--ink-16)}
.form__pp{color:inherit;text-decoration:underline;text-underline-offset:.2em}
body.pp-aberto{overflow:hidden}
@keyframes ppVeu{from{opacity:0}to{opacity:1}}
@keyframes ppCard{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
/* ---- acrescimos das paginas de servico ---- */
.mom__list a{color:inherit;text-decoration:underline;text-underline-offset:.22em;text-decoration-color:var(--ink-16);transition:color var(--t-rapido) var(--ease),text-decoration-color var(--t-rapido) var(--ease)}
.mom__list a:hover{color:var(--amber);text-decoration-color:var(--amber)}
.assoc{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(var(--u)*3)}
.assoc h2{font-family:var(--display);font-weight:var(--w-leve);letter-spacing:-.03em;line-height:1.1;font-size:clamp(1.5rem,3.2vw,2.3rem);max-width:18ch}
.assoc p{margin-top:calc(var(--u)*1.5);color:var(--ink-72);max-width:46ch}
.google{display:inline-flex;align-items:center;gap:calc(var(--u)*1.25);font-size:.95rem;font-weight:var(--w-medio);color:var(--ink-72)}
.google:hover{color:var(--amber)}
.google svg{flex:none}
.ftr__in{align-items:flex-start}
.ftr__serv h2{font-size:.7rem;font-weight:var(--w-forte);letter-spacing:.2em;text-transform:uppercase;color:var(--cream-52);margin-bottom:calc(var(--u)*2)}
.ftr__serv ul{display:grid;gap:calc(var(--u)*1.25)}
.ftr__serv a{font-size:.95rem;color:var(--cream-64);transition:color var(--t-rapido) var(--ease)}
.ftr__serv a:hover{color:var(--amber)}
.ftr__serv{max-width:26ch}
/* ============================================================
   RESPOSTA AO TOQUE
   O site nao tinha nenhum :active. Sem ele, no celular o botao nao da sinal
   de ter recebido o toque, e o intervalo ate a tela reagir parece travamento.
   A escala e sutil de proposito: confirma sem chamar atencao para si.
   Vem depois das regras de :hover para vencer por ordem, nao por peso.
   ============================================================ */
.btn:active{transform:scale(.97)}
.sw:active{transform:scale(.99)}
.chip span:active{transform:scale(.97)}
.burger:active{transform:scale(.92)}
.pp__x:active{transform:scale(.92)}
.btn,.sw,.chip span,.burger,.pp__x{-webkit-tap-highlight-color:transparent}

/* Em tela de toque o :hover gruda depois do toque: o elemento fica preso no
   estado de passagem ate a pessoa tocar em outro lugar. Aqui ele e desfeito.
   O cartao que estiver escolhido mantem a borda ambar, por isso o :not(). */
@media (hover:none){
  .btn:hover{transform:none;box-shadow:none;color:var(--fg)}
  .btn:hover::before{transform:translateY(101%)}
  .sw:hover{transform:none}
  .sw:hover:not([aria-pressed="true"]){border-color:var(--cream-12)}
  .slink:hover::after{transform:scaleX(0)}
  .mom__list li:hover::before{width:calc(var(--u)*2)}
}

/* ============================================================
   PAGINAS DE SERVICO
   Acrescimos sobre a folha da home. Nada aqui altera a home.
   ============================================================ */

/* Sem JS nada fica invisivel: a animacao so liga quando o script roda. */
.rv{opacity:1;transform:none}
.seam-eclipse span{scale:1;rotate:0deg}
html.anima .rv{opacity:0;transform:translateY(24px)}
html.anima .rv.in{opacity:1;transform:none}
html.anima .seam-eclipse span{scale:.6;rotate:-90deg}
html.anima .seam-eclipse.in span{scale:1;rotate:0deg}

/* o topo da pagina precisa de folga para o cabecalho fixo */
.pg__topo{padding-top:clamp(112px,14vw,176px)}

/* caminho de navegacao */
.crumb{font-size:.78rem;color:var(--ink-72);display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*1)}
.crumb a{color:var(--ink-72);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--ink-16)}
.crumb a:hover{color:var(--amber);text-decoration-color:var(--amber)}
.crumb [aria-current]{color:var(--ink-72)}

.pg__h1{font-size:clamp(2.3rem,6.4vw,4.4rem);font-weight:var(--w-leve);margin-top:calc(var(--u)*3);max-width:18ch}
.pg__intro{max-width:58ch;margin-top:calc(var(--u)*3.5)}
.pg__acoes{display:flex;flex-wrap:wrap;gap:calc(var(--u)*2);margin-top:clamp(28px,4vw,44px)}

/* listas de conteudo: marcador ambar, duas colunas quando couber */
.pg__lista{margin-top:clamp(28px,4vw,44px);display:grid;gap:calc(var(--u)*2);grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.pg__lista li{position:relative;padding-left:calc(var(--u)*3.25);line-height:1.65}
.pg__lista li::before{
  content:"";position:absolute;left:0;top:.62em;width:calc(var(--u)*1.25);height:1px;background:var(--amber);
}

/* perguntas frequentes */
.faq{margin-top:clamp(28px,4vw,44px);max-width:74ch;border-top:1px solid var(--ink-16)}
.faq__item{border-bottom:1px solid var(--ink-16)}
.faq__q{margin:0}
.faq__b{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:calc(var(--u)*2);
  padding:calc(var(--u)*3) 0;background:none;border:0;cursor:pointer;text-align:left;color:inherit;
  font-family:var(--display);font-weight:var(--w-medio);letter-spacing:-.02em;
  font-size:clamp(1.05rem,2.1vw,1.3rem);line-height:1.35;
}
.faq__b:hover{color:var(--amber)}
.faq__i{flex:none;width:20px;height:20px;margin-top:.15em;transition:transform var(--t-medio) var(--ease);stroke:var(--amber)}
/* a linha da pergunta ocupa a largura toda: escala nela tremeria o texto,
   entao a confirmacao de toque vem por opacidade */
.faq__b{transition:color var(--t-rapido) var(--ease),opacity var(--t-toque) var(--ease);-webkit-tap-highlight-color:transparent}
.faq__b:active{opacity:.68}
@media (hover:none){ .faq__b:hover{color:inherit} }
.faq__b[aria-expanded="true"] .faq__i{transform:rotate(45deg)}
.faq__a{padding-bottom:calc(var(--u)*3);max-width:66ch}
.faq__a p{line-height:1.75}

/* avaliacoes no Google */
.google{display:inline-flex;align-items:center;gap:calc(var(--u)*1.25);font-size:.95rem;font-weight:var(--w-medio);color:var(--ink-72)}
.google:hover{color:var(--amber)}
.google svg{flex:none}

/* rodape com a coluna de servicos */
.ftr__serv h2{font-size:.7rem;font-weight:var(--w-forte);letter-spacing:.2em;text-transform:uppercase;color:var(--cream-52);margin-bottom:calc(var(--u)*2)}
.ftr__serv ul{display:grid;gap:calc(var(--u)*1.25)}
.ftr__serv a{font-size:.95rem;color:var(--cream-64)}
.ftr__serv a:hover{color:var(--amber)}

/* bloco de associacoes na home */
.assoc{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(var(--u)*3)}
.assoc h2{font-family:var(--display);font-weight:var(--w-leve);letter-spacing:-.03em;line-height:1.1;font-size:clamp(1.5rem,3.2vw,2.3rem);max-width:18ch}
.assoc p{margin-top:calc(var(--u)*1.5);color:var(--ink-72);max-width:46ch}

/* links dentro dos cartoes de momento */
.mom__list a{color:inherit;text-decoration:underline;text-underline-offset:.22em;text-decoration-color:var(--ink-16);transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.mom__list a:hover{color:var(--amber);text-decoration-color:var(--amber)}
.band--dark .mom__list a{text-decoration-color:var(--cream-22)}

@media (max-width:760px){
  .pg__h1{font-size:clamp(2rem,9vw,2.6rem)}
  .faq__b{padding:calc(var(--u)*2.5) 0}
}