/* ============================================================
   ESTATE MKT — "prancha de projeto"
   Papel · tinta · caneta vermelha de markup
   Archivo (display/texto) · IBM Plex Mono (anotações) · Caveat (caneta)
   ============================================================ */

:root{
  --paper:#EFEAE0;
  --paper-2:#E7E1D4;
  --ink:#17150F;
  --ink-soft:#4c4639;
  --red:#E03616;
  --rule:#17150F;           /* linhas de prancha: tinta cheia */
  --rule-soft:rgba(23,21,15,.18);
  --sans:'Archivo', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --hand:'Caveat', cursive;
  --pad:clamp(20px,4vw,64px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--red);color:var(--paper)}
img{max-width:100%}
.mono{font-family:var(--mono)}
u{text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
mark{background:none;box-shadow:inset 0 -.55em rgba(224,54,22,.22);color:inherit;padding:0 .05em}

/* anotação à mão (caneta vermelha) */
.handnote{
  font-family:var(--hand);font-size:1.35rem;line-height:1.15;
  color:var(--red);transform:rotate(-2deg);font-weight:600;
}

/* ---------- tipografia de display ---------- */
h1,h2{
  font-family:var(--sans);
  font-weight:800;
  font-stretch:75%;
  line-height:.92;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
h3{font-weight:700;font-stretch:85%;text-transform:uppercase;letter-spacing:.02em;font-size:1.05rem}
.dot{color:var(--red)}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:stretch;
  background:var(--paper);
  border-bottom:2px solid var(--rule);
  height:56px;
}
.tb-brand{
  display:flex;align-items:center;
  padding:0 var(--pad);
  font-weight:800;font-stretch:80%;font-size:1.05rem;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;
  border-right:1px solid var(--rule);
}
.tb-brand span{color:var(--red);margin:0 .1em}
.tb-nav{display:flex;margin-right:auto}
.tb-nav a{
  display:flex;align-items:center;gap:.5em;
  padding:0 1.3rem;
  color:var(--ink);text-decoration:none;
  font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  border-right:1px solid var(--rule-soft);
}
.tb-nav a i{font-family:var(--mono);font-style:normal;font-size:.68rem;color:var(--red)}
.tb-nav a:hover{background:var(--paper-2)}
.tb-cta{
  display:flex;align-items:center;
  padding:0 var(--pad);
  background:var(--ink);color:var(--paper);
  text-decoration:none;font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
}
.tb-cta:hover{background:var(--red)}
.tb-toggle{
  display:none;margin-left:auto;padding:0 var(--pad);
  background:none;border:none;border-left:1px solid var(--rule);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.15em;color:var(--ink);cursor:pointer;
}

/* ---------- sheets ---------- */
.sheet{
  position:relative;
  padding:clamp(3.5rem,7vw,6rem) var(--pad);
  border-bottom:2px solid var(--rule);
}
.sheet-rule{background:var(--paper-2)}
.sheet-label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:var(--ink-soft);
  text-transform:uppercase;
}
.sheet-head{
  display:grid;grid-template-columns:auto 1fr;gap:1rem clamp(2rem,5vw,5rem);
  align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem);
}
.sheet-head .sheet-label{grid-column:1/-1}
.sheet-intro{max-width:44ch;color:var(--ink-soft);font-size:1.02rem;padding-bottom:.4rem}

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);
  gap:1.5rem clamp(2rem,5vw,5rem);
  align-items:start;
  overflow:hidden;
}
.hero .sheet-label{grid-column:1/-1;margin-bottom:2.2rem}
.hero-title{
  font-size:clamp(3rem,8.5vw,8rem);
  margin-left:-.04em;
}
.ht-line{display:block}
.circled{position:relative;display:inline-block;padding:0 .06em}
.circled svg{
  position:absolute;inset:-14% -7% -16%;width:114%;height:132%;
  overflow:visible;pointer-events:none;
}
.circled svg path{
  fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:1200;stroke-dashoffset:1200;
  animation:draw 1.1s .5s ease forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}

.hero-side{padding-top:1rem;display:flex;flex-direction:column;gap:1.3rem;align-items:flex-start}
.hero-note{margin-bottom:-.4rem}
.hero-desc{font-size:1.05rem;max-width:40ch}
.hero-fine{font-size:.72rem;color:var(--ink-soft);letter-spacing:.04em}

.btn-ink{
  display:inline-block;
  background:var(--ink);color:var(--paper);
  padding:1rem 1.8rem;
  text-decoration:none;font-weight:700;font-size:.88rem;letter-spacing:.08em;
  border:2px solid var(--ink);
  transition:background .15s,color .15s;
}
.btn-ink:hover{background:var(--red);border-color:var(--red)}
.btn-ink:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* cotas */
.dims{
  grid-column:1/-1;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,4vw,4rem);
  margin-top:clamp(2.5rem,5vw,4.5rem);
}
.dim{display:flex;flex-direction:column;gap:.4rem}
.dim-line{
  height:11px;position:relative;
  border-left:1.5px solid var(--ink);border-right:1.5px solid var(--ink);
}
.dim-line::before{
  content:'';position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--ink);
}
.dim-line::after{
  content:'';position:absolute;top:50%;left:-1px;right:-1px;height:0;
  border-top:1.5px solid transparent;
}
.dim-value{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:500}
.dim-key{font-size:.8rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}

/* carimbo APROVADO */
.stamp{
  position:absolute;right:clamp(16px,6vw,90px);top:clamp(70px,9vw,120px);
  transform:rotate(9deg);
  border:3px solid var(--red);color:var(--red);
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.2em;
  text-align:center;line-height:1.5;
  padding:.55rem .9rem;border-radius:4px;
  opacity:.75;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' /%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .93 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-size:120px;
  pointer-events:none;
}

/* ---------- método / fases ---------- */
.phases{
  list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:2px solid var(--rule);border-left:2px solid var(--rule);
}
.phase{
  border-right:2px solid var(--rule);border-bottom:2px solid var(--rule);
  padding:1.6rem 1.4rem 1.8rem;
  display:flex;flex-direction:column;gap:.8rem;
  background:var(--paper);
}
.phase:hover{background:var(--paper-2)}
.ph-rev{font-size:.7rem;letter-spacing:.2em;color:var(--red)}
.phase p{font-size:.92rem;color:var(--ink-soft);flex:1}
.ph-out{font-size:.7rem;letter-spacing:.06em;border-top:1px solid var(--rule-soft);padding-top:.8rem}

/* ---------- memorial / spec ---------- */
.spec{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(2rem,5vw,5rem);
  border-top:2px solid var(--rule);
}
.spec-item{
  padding:1.5rem 0 1.6rem;
  border-bottom:1px solid var(--rule-soft);
}
.spec-item dt{
  font-weight:700;font-stretch:85%;text-transform:uppercase;letter-spacing:.02em;
  display:flex;gap:1rem;align-items:baseline;margin-bottom:.5rem;
}
.spec-item dt .mono{color:var(--red);font-size:.8rem;font-weight:500}
.spec-item dd{color:var(--ink-soft);font-size:.95rem;padding-left:2.6rem}
.spec-note{margin-top:2rem;text-align:right}

/* ---------- medições ---------- */
.meds{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,4vw,4rem);
  margin-bottom:clamp(3rem,6vw,4.5rem);
}
.med{border-top:2px solid var(--rule);padding-top:1.2rem}
.med-n{
  font-size:clamp(3.2rem,6vw,5rem);font-weight:500;line-height:1;
  color:var(--red);margin-bottom:.6rem;
}
.med-n small{font-size:.45em}
.med h3{margin-bottom:.6rem}
.med p:last-child{font-size:.92rem;color:var(--ink-soft)}

.quotes{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);
}
.quotes blockquote p{
  font-size:clamp(1.15rem,1.8vw,1.45rem);
  font-weight:500;line-height:1.4;letter-spacing:-.01em;
}
.quotes blockquote p::before{content:'“';color:var(--red)}
.quotes footer{margin-top:.9rem;font-size:.72rem;color:var(--ink-soft);letter-spacing:.05em}

/* ---------- quem atendemos ---------- */
.who{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-left:2px solid var(--rule);
}
.who-col{
  border-right:2px solid var(--rule);
  padding:0 1.6rem;
}
.who-col:first-child{padding-left:0;border-left:none}
.who-col h3{margin-bottom:.9rem;position:relative}
.who-col h3 .mono{color:var(--red);font-weight:500;margin-right:.4rem}
.who-flag{display:block;font-size:1.15rem;margin-top:.2rem;transform:rotate(-2deg)}
.who-col>p{font-size:.93rem;color:var(--ink-soft);margin-bottom:1.2rem}
.who-col ul{list-style:none;font-size:.76rem}
.who-col li{
  padding:.55rem 0;border-top:1px solid var(--rule-soft);
}
.who-col li::before{content:'▸ ';color:var(--red)}

/* ---------- FAQ ---------- */
.faq{border-top:2px solid var(--rule);max-width:880px}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq summary{
  display:flex;align-items:baseline;gap:1.1rem;
  padding:1.3rem 0;cursor:pointer;list-style:none;
  font-weight:700;font-stretch:90%;font-size:1.05rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .mono{color:var(--red);font-size:.78rem;font-weight:500}
.faq summary b{
  margin-left:auto;font-weight:400;font-size:1.4rem;color:var(--red);
  transition:transform .2s;line-height:1;
}
.faq details[open] summary b{transform:rotate(45deg)}
.faq details p{padding:0 3rem 1.5rem 2.8rem;color:var(--ink-soft);font-size:.96rem;max-width:70ch}

/* ---------- CTA / carimbo ---------- */
.cta{background:var(--ink);color:var(--paper);border-bottom:none}
.cta .sheet-label{color:rgba(239,234,224,.5)}
.cta-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,6rem);
  margin-top:2.5rem;align-items:start;
}
.cta-copy h2{margin-bottom:1.2rem}
.cta-copy p{color:rgba(239,234,224,.72);max-width:44ch}
.cta-hand{margin-top:1.4rem;color:#ff6a4d}

.carimbo{border:2px solid var(--paper)}
.cb-row{
  display:grid;grid-template-columns:180px 1fr;
  border-bottom:2px solid var(--paper);
}
.cb-row label{
  padding:1rem;font-size:.66rem;letter-spacing:.14em;
  color:rgba(239,234,224,.6);
  border-right:2px solid var(--paper);
  display:flex;align-items:center;
}
.cb-row input,.cb-row select{
  background:transparent;border:none;
  padding:1rem 1.1rem;
  color:var(--paper);font-family:var(--sans);font-size:1rem;width:100%;
}
.cb-row select{appearance:none;cursor:pointer}
.cb-row select option{color:var(--ink)}
.cb-row select:invalid{color:rgba(239,234,224,.4)}
.cb-row input::placeholder{color:rgba(239,234,224,.4)}
.cb-row input:focus,.cb-row select:focus{outline:none;background:rgba(239,234,224,.07)}
.cb-btn{
  width:100%;border:none;background:var(--paper);color:var(--ink);
  padding:1.15rem;cursor:pointer;font-family:var(--sans);
}
.cb-btn:hover{background:var(--red);color:var(--paper)}

/* ---------- footer carimbo ---------- */
.footer{
  display:grid;
  grid-template-columns:1.4fr 1.6fr .8fr .8fr 1.4fr;
  border-top:2px solid var(--rule);
  background:var(--paper);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
}
.ft-cell{
  padding:1rem var(--pad) 1.1rem 1.2rem;
  border-right:1px solid var(--rule-soft);
  line-height:1.7;
}
.ft-cell:first-child{padding-left:var(--pad)}
.ft-cell:last-child{border-right:none}
.ft-cell span{color:var(--ink-soft);text-transform:none;letter-spacing:.03em}
.ft-brand{font-weight:600}
.ft-links{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.ft-links a{color:var(--ink);text-decoration:none}
.ft-links a:hover{color:var(--red)}

/* ---------- responsivo ---------- */
@media (max-width:1020px){
  .tb-nav a{padding:0 .9rem}
  .hero{grid-template-columns:1fr}
  .hero-side{max-width:520px}
  .phases{grid-template-columns:1fr 1fr}
  .stamp{top:auto;bottom:38%;right:8vw}
}
@media (max-width:760px){
  .tb-nav{
    display:none;position:absolute;top:56px;left:0;right:0;
    background:var(--paper);border-bottom:2px solid var(--rule);
    flex-direction:column;
  }
  .tb-nav.open{display:flex}
  .tb-nav a{padding:1rem var(--pad);border-right:none;border-bottom:1px solid var(--rule-soft)}
  .tb-cta{display:none}
  .tb-toggle{display:block}
  .sheet-head{grid-template-columns:1fr}
  .sheet-intro{padding-bottom:0}
  .phases{grid-template-columns:1fr}
  .spec{grid-template-columns:1fr}
  .meds{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .who{grid-template-columns:1fr;border-left:none}
  .who-col{border-right:none;border-top:2px solid var(--rule);padding:1.6rem 0 1.8rem}
  .who-col:first-child{border-top:none;padding-top:0}
  .cta-grid{grid-template-columns:1fr}
  .cb-row{grid-template-columns:1fr}
  .cb-row label{border-right:none;border-bottom:1px dashed rgba(239,234,224,.3);padding-bottom:.4rem}
  .faq details p{padding-left:0;padding-right:0}
  .footer{grid-template-columns:1fr 1fr}
  .ft-cell{padding:1rem var(--pad)}
  .stamp{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .circled svg path{stroke-dashoffset:0}
}