/* ===========================================================
   Peça-conceito — leitura do rosto por critério
   GOMA studio · a identidade mora em assets/js/identidade.js
   =========================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;overflow-x:clip}
body{
  background:var(--papel);color:var(--tinta);
  font:400 16px/1.7 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
:root{
  --papel:#F4F1EB; --papel2:#EDE8DF; --tinta:#17150F; --grafite:#554E42;
  --linha:#DED6C8; --traco:#C0B4A1; --aceso:#9A6A3E; --realce:#D9C3A2;
  --larg:1180px;
}
.caixa,section{position:relative}
h1,h2{margin:0;font-weight:400}
em{font-style:normal}

/* ---------- selo de conceito ---------- */
.selo-conceito{
  position:fixed;z-index:60;left:50%;transform:translateX(-50%);bottom:14px;
  background:rgba(23,21,15,.9);color:#F4F1EB;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:7px 16px;border-radius:999px;backdrop-filter:blur(6px);
  pointer-events:none;white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis}

/* ---------- topo ---------- */
.topo{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px clamp(18px,5vw,56px);
  background:color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linha)}
.assinatura{display:flex;flex-direction:column;line-height:1.25}
.assinatura .nome{font-family:'Instrument Serif',Georgia,serif;font-size:19px;letter-spacing:.01em}
.assinatura .reg,.locais{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grafite)}
.locais{text-align:right}

/* ---------- abertura ---------- */
.abertura{
  min-height:clamp(560px,86svh,860px);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(60px,10vh,120px) clamp(18px,5vw,56px) 70px;max-width:var(--larg);margin:0 auto}
.sobretitulo{margin:0 0 26px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--grafite)}
.manchete{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(42px,7.4vw,92px);
  line-height:1.03;letter-spacing:-.015em}
.manchete .l{display:block;opacity:0;transform:translateY(16px);
  animation:sobe .9s cubic-bezier(.22,.8,.3,1) forwards}
.manchete .l:nth-child(2){animation-delay:.14s}
.manchete .it{font-style:italic;color:var(--aceso)}
@keyframes sobe{to{opacity:1;transform:none}}
.fina{max-width:52ch;margin:30px 0 0;font-size:clamp(15px,1.6vw,18px);color:var(--grafite);
  opacity:0;animation:sobe .9s .3s cubic-bezier(.22,.8,.3,1) forwards}
.desca{margin-top:54px;width:1px;height:62px;background:linear-gradient(var(--traco),transparent);
  position:relative;opacity:0;animation:sobe .9s .5s forwards}
.desca span{position:absolute;top:0;left:-2px;width:5px;height:5px;border-radius:50%;
  background:var(--aceso);animation:desce 2.6s ease-in-out infinite}
@keyframes desce{0%{top:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:58px;opacity:0}}

/* ---------- o estudo ---------- */
.estudo{padding:0 clamp(18px,5vw,56px) clamp(60px,10vh,120px)}
.estudo-grade{max-width:var(--larg);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(24px,5vw,72px);align-items:start}

.palco{position:sticky;top:96px}
.palco-interno{background:var(--papel2);border:1px solid var(--linha);border-radius:4px;
  padding:clamp(14px,2vw,26px)}
.palco-rotulo{margin:0 0 10px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grafite);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.palco-rotulo span{color:var(--traco)}
.rosto{display:block;width:100%;height:auto}

.guia{stroke:var(--traco);stroke-width:1;stroke-dasharray:2 6;opacity:.75}
.rot{font-family:'Inter',sans-serif;font-size:11px;fill:var(--traco);letter-spacing:.14em;text-transform:uppercase}
.chave{fill:none;stroke:var(--traco);stroke-width:1}
.terco{font-family:'Inter',sans-serif;font-size:12px;fill:var(--grafite);letter-spacing:.08em}
.pele{fill:url(#g-pele);stroke:none}
.perfil{fill:none;stroke:var(--tinta);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.marca{fill:none;stroke:var(--traco);stroke-width:1.5;stroke-linecap:round}
.pescoco .marca{opacity:.55}

.pt{cursor:pointer}
.pt .halo{fill:var(--aceso);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.pt .disco{fill:var(--papel);stroke:var(--traco);stroke-width:1.5;transition:stroke .3s,fill .3s}
.pt .num{font-family:'Inter',sans-serif;font-size:12px;font-weight:500;fill:var(--grafite);
  text-anchor:middle;dominant-baseline:central;transition:fill .3s}
.fio{stroke:var(--traco);stroke-width:1;stroke-dasharray:3 4;opacity:.55;transition:stroke .3s,opacity .3s}
.fio.on{stroke:var(--aceso);opacity:1}
.pt.on .disco{fill:var(--aceso);stroke:var(--aceso)}
.pt.on .num{fill:var(--papel)}
.pt.on .halo{opacity:.16;animation:pulsa 2.6s ease-in-out infinite}
@keyframes pulsa{0%,100%{transform:scale(.72);opacity:.2}50%{transform:scale(1.25);opacity:.05}}

/* cartões de critério */
.criterios{display:flex;flex-direction:column;gap:clamp(26px,7vh,70px);padding-top:16px}
.cartao{opacity:.3;transform:translateY(10px);transition:opacity .5s,transform .5s;
  border-top:1px solid var(--linha);padding-top:22px}
.cartao.on{opacity:1;transform:none}
.cartao .cab{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.cartao .n{font-family:'Instrument Serif',Georgia,serif;font-size:30px;color:var(--aceso);line-height:1}
.cartao .reg-nome{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grafite)}
.cartao h3{margin:0 0 12px;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(23px,2.9vw,33px);line-height:1.18;letter-spacing:-.01em}
.cartao p{margin:0;color:var(--grafite);font-size:15.5px;max-width:46ch}
.cartao .nao{margin-top:16px;display:flex;gap:10px;align-items:flex-start;
  background:var(--papel2);border-left:2px solid var(--aceso);padding:11px 15px}
.cartao .nao b{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--aceso);
  white-space:nowrap;padding-top:3px}
.cartao .nao span{font-size:14.5px;color:var(--tinta)}

/* ---------- seções de texto ---------- */
.titulo-sec{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(30px,4.6vw,56px);
  line-height:1.1;letter-spacing:-.015em}
.titulo-sec em{font-style:italic;color:var(--aceso)}
.sub-sec{margin:14px 0 0;color:var(--grafite);max-width:50ch}

.recusas{background:var(--tinta);color:var(--papel);padding:clamp(60px,11vh,130px) clamp(18px,5vw,56px)}
.recusas .titulo-sec{color:var(--papel)}
.recusas .titulo-sec em{color:var(--realce)}
.recusas .sub-sec{color:#B4A994}
.lista-recusas{list-style:none;margin:46px auto 0;padding:0;max-width:var(--larg);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;
  background:rgba(244,241,235,.14);border:1px solid rgba(244,241,235,.14)}
.lista-recusas li{background:var(--tinta);padding:26px 24px;min-width:0}
.lista-recusas .x{display:block;font-family:'Instrument Serif',serif;font-size:26px;
  color:var(--realce);line-height:1;margin-bottom:12px}
.lista-recusas b{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#9A8E78;font-weight:400;margin-bottom:7px}
.lista-recusas p{margin:0;font-size:16px;line-height:1.55}
.recusas .titulo-sec,.recusas .sub-sec{max-width:var(--larg);margin-inline:auto}

.metodo{padding:clamp(60px,11vh,130px) clamp(18px,5vw,56px);max-width:var(--larg);margin:0 auto}
.passos{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:clamp(18px,3vw,38px)}
.passo{min-width:0;border-top:1px solid var(--linha);padding-top:20px}
.passo .n{font-family:'Instrument Serif',serif;font-size:13px;letter-spacing:.2em;color:var(--aceso)}
.passo h3{margin:10px 0 8px;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:24px}
.passo p{margin:0;color:var(--grafite);font-size:15px}

/* ---------- contato ---------- */
.contato{padding:clamp(50px,9vh,110px) clamp(18px,5vw,56px) clamp(60px,10vh,120px);
  max-width:760px;margin:0 auto}
.form{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:flex;flex-direction:column;gap:7px;font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--grafite);min-width:0}
.form .largo{grid-column:1/-1}
input[type=text],select,textarea{font:400 15.5px/1.5 'Inter',sans-serif;color:var(--tinta);
  background:transparent;border:0;border-bottom:1px solid var(--traco);padding:12px 2px;
  border-radius:0;text-transform:none;letter-spacing:0;width:100%;min-height:46px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--aceso)}
textarea{resize:vertical}
.caixa{flex-direction:row!important;align-items:flex-start;gap:11px;text-transform:none;
  letter-spacing:0;font-size:13.5px;line-height:1.5}
.caixa input{width:17px;height:17px;flex:0 0 auto;margin-top:3px;accent-color:var(--aceso)}
.bt-env{grid-column:1/-1;justify-self:start;font:500 12px/1 'Inter',sans-serif;letter-spacing:.17em;
  text-transform:uppercase;background:var(--tinta);color:var(--papel);border:0;border-radius:999px;
  padding:16px 34px;cursor:pointer;transition:background .2s,transform .2s;min-height:48px}
.bt-env:hover{background:var(--aceso);transform:translateY(-1px)}
.aviso-form{grid-column:1/-1;margin:0;font-size:13.5px;color:var(--aceso)}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--linha);padding:44px clamp(18px,5vw,56px) 78px;
  max-width:var(--larg);margin:0 auto}
.rod-assin{display:flex;flex-direction:column;margin-bottom:24px}
.rod-assin .nome{font-family:'Instrument Serif',Georgia,serif;font-size:21px}
.rod-assin .reg{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grafite)}
.conformidade{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:72ch}
.conformidade li{font-size:12px;line-height:1.6;color:var(--grafite);padding-left:15px;position:relative}
.conformidade li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:1px;background:var(--traco)}
.credito{margin:26px 0 0;font-size:11px;letter-spacing:.1em;color:var(--traco)}

/* ---------- celular ---------- */
@media(max-width:900px){
  /* no celular a prancha é indicador, não controle: o scroll comanda.
     Tirar o toque evita alvo menor que 44 px. */
  .pt{pointer-events:none}
  .estudo-grade{grid-template-columns:1fr;gap:20px}
  .palco{position:sticky;top:64px;z-index:20;
    background:var(--papel);padding-bottom:10px;margin:0 calc(-1 * clamp(18px,5vw,56px));
    padding-inline:clamp(18px,5vw,56px)}
  .palco-interno{padding:12px}
  .rosto{max-height:40svh;width:auto;margin:0 auto}
  .criterios{padding-top:4px;gap:40px}
  .cartao{opacity:1;transform:none}
  .form{grid-template-columns:1fr}
  .topo{padding:12px clamp(18px,5vw,56px)}
  .assinatura .nome{font-size:17px}
  .locais{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .manchete .l,.fina,.desca{opacity:1;transform:none}
}