@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400;src:url(../fonts/Bodoni_Moda/static/BodoniModa_72pt-Regular.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400;src:url(../fonts/Bodoni_Moda/static/BodoniModa_72pt-Italic.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;src:url(../fonts/Lora/static/Lora-Italic.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Lora';font-style:italic;font-weight:500;src:url(../fonts/Lora/static/Lora-MediumItalic.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;src:url(../fonts/Lora/static/Lora-Regular.ttf) format('truetype');font-display:swap}

/* Every size is a multiple of --u, so the layout scales exactly like the 140px-wide reference */
:root{
  --u:calc(min(100vw,430px) / 140);
  --bg:#6b3c1d;
  --light:#efebe9;
  --cream:#f1e3d3;
  --ink:#6b3c1d;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:'Lora',serif;font-style:italic;color:var(--cream);background:#2a160a;display:flex;justify-content:center;overflow-x:hidden}
.app{width:100%;max-width:430px;min-height:100vh;position:relative;overflow:hidden;background:var(--bg)}
a{color:inherit;text-decoration:none}

/* ---------- HERO ---------- */
.hero{position:relative;height:calc(var(--u)*262)}
.hero .photo{position:absolute;inset:0;background:url(../images/home.jpg) 50% 0/cover}
.hero .photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0,transparent 66%,rgba(107,60,29,.55) 78%,var(--bg) 96%)}
.hero h1{font-family:"Bodoni Moda","Lora",serif;position:absolute;left:0;right:0;bottom:calc(var(--u)*10);text-align:center;font-weight:400;
  font-size:calc(var(--u)*19);line-height:calc(var(--u)*26);color:var(--cream)}

/* ---------- BANNER CARDS ---------- */
.menu{padding:calc(var(--u)*6) calc(var(--u)*13) calc(var(--u)*8);display:grid;gap:calc(var(--u)*5)}
.card{position:relative;display:flex;align-items:center;height:calc(var(--u)*37);overflow:hidden;
  border:calc(var(--u)*.5) solid rgba(241,227,211,.35);background:#3a1f0d}
.card .ph{position:absolute;top:0;bottom:0;width:calc(var(--u)*62);background-repeat:no-repeat}
.card .t{position:relative;z-index:2;font-size:calc(var(--u)*15);line-height:1.05;color:var(--cream)}
.card .t small{display:block;font-size:calc(var(--u)*3.2);letter-spacing:.22em;text-transform:uppercase;font-style:normal;margin-top:calc(var(--u)*1.5);opacity:.85}
.card:active{filter:brightness(1.15)}

/* A: photo left, text right */
.card.a .ph{left:0;background-image:url(../images/home.jpg);background-size:180% auto;background-position:44% 18%}
.card.a .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 45%,#3a1f0d 100%)}
.card.a .t{margin-left:auto;margin-right:calc(var(--u)*7);text-align:right}
.card.a.alt .ph{background-image:url(../images/sobre.jpg);background-position:46% 23%}
/* B: centered over photo, with button */
.card.b{justify-content:center;text-align:center}
.card.b .ph{inset:0;width:auto;background-image:url("../images/meus servicos.jpg");background-size:cover;background-position:55% 52%}
.card.b .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(58,31,13,.9),rgba(58,31,13,.62) 50%,rgba(58,31,13,.9))}
/* C: text left, photo right */
.card.c .ph{right:0;background-image:url("../images/botao fale comigo.jpg");background-size:200% auto;background-position:48% 17%}
.card.c .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,transparent 45%,#3a1f0d 100%)}
.card.c .t{margin-left:calc(var(--u)*7)}

/* ---------- PHOTO (curl and fades are part of the image) ---------- */
.lower{position:relative}
.lower img{display:block;width:100%;height:auto}
.lower::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--u)*30);
  background:linear-gradient(180deg,var(--bg),rgba(107,60,29,0));z-index:1}

/* ---------- LIGHT SHEET ---------- */
.sheet{background:var(--light);color:var(--ink);padding:0 calc(var(--u)*13) calc(var(--u)*20)}
.sheet h2{font-weight:400;font-size:calc(var(--u)*19);line-height:1.1;color:var(--ink);margin-bottom:calc(var(--u)*5)}
.sheet p{font-style:normal;line-height:1.7;font-size:calc(var(--u)*4.4);color:#5a3a26}
.sheet p+p{margin-top:calc(var(--u)*3)}
.sheet section+section{margin-top:calc(var(--u)*22)}
.sheet #quem-sou{padding-top:calc(var(--u)*6)}

.depo-track{display:flex;gap:calc(var(--u)*4);overflow-x:auto;scroll-snap-type:x mandatory;padding:calc(var(--u)*1) 0 calc(var(--u)*4);scrollbar-width:none}
.depo-track::-webkit-scrollbar{display:none}
.depo-track blockquote{flex:0 0 86%;scroll-snap-align:center;background:var(--bg);color:var(--cream);padding:calc(var(--u)*6);border-radius:calc(var(--u)*1)}
.depo-track blockquote p{font-style:italic;color:var(--cream)}
.depo-track cite{display:block;margin-top:calc(var(--u)*3);font-size:calc(var(--u)*3.8);color:#d9b48c}

.contato{text-align:center}
.btn{display:block;margin-top:calc(var(--u)*4);padding:calc(var(--u)*4.5);background:var(--bg);color:var(--cream);font-size:calc(var(--u)*5.2);border-radius:99px}
.btn.ghost{background:transparent;border:calc(var(--u)*.6) solid var(--bg);color:var(--bg)}
footer{background:var(--bg);text-align:center;padding:calc(var(--u)*7);font-size:calc(var(--u)*3.6);color:#d9b48c}

/* ---------- INNER PAGES ---------- */
.topbar{display:flex;align-items:center;gap:calc(var(--u)*4);padding:calc(var(--u)*8) calc(var(--u)*13) calc(var(--u)*4)}
.topbar a{font-style:normal;font-size:calc(var(--u)*8);line-height:1}
.topbar h1{font-weight:400;font-size:calc(var(--u)*15)}
.grid{padding:calc(var(--u)*4) calc(var(--u)*9) calc(var(--u)*14);columns:2;column-gap:calc(var(--u)*3)}
.grid .ph{margin-bottom:calc(var(--u)*3);break-inside:avoid;background-size:cover;border:calc(var(--u)*.5) solid rgba(241,227,211,.3)}
.grid .ph:nth-child(odd){height:calc(var(--u)*80)}
.grid .ph:nth-child(even){height:calc(var(--u)*58)}


.reveal{opacity:0;transform:translateY(18px);transition:.9s}
.reveal.in{opacity:1;transform:none}

/* "Quem sou eu?" sits over the fade at the bottom of the photo, centered */
.sheet #quem-sou h2{position:relative;z-index:2;top:calc(var(--u)*-44);margin-bottom:calc(var(--u)*-36);text-align:center}

/* Depoimentos: prints de conversa */
.depo-track img{flex:0 0 86%;width:86%;height:auto;align-self:flex-start;scroll-snap-align:center;border-radius:calc(var(--u)*2);box-shadow:0 calc(var(--u)*1.5) calc(var(--u)*5) rgba(107,60,29,.25)}

/* Portfólio: fotos inteiras, altura natural */
.grid img{display:block;width:100%;height:auto;margin-bottom:calc(var(--u)*3);break-inside:avoid;border:calc(var(--u)*.5) solid rgba(241,227,211,.3)}

/* Portfólio: imagem de fundo fixa */
.page-portfolio{background:#6b3c1d}
.page-portfolio::before{content:"";position:fixed;top:0;bottom:0;left:50%;width:min(100vw,430px);transform:translateX(-50%);z-index:0;
  background:linear-gradient(rgba(107,60,29,.3),rgba(107,60,29,.3)),url("../images/fundo portfolio.jpg") center/cover no-repeat}
.page-portfolio>*{position:relative;z-index:1}
.page-portfolio .topbar h1{text-shadow:0 0 calc(var(--u)*4) rgba(80,40,15,.6)}

/* ---------- SERVIÇOS: passos numerados em zigue-zague ---------- */

.s-head{display:flex;align-items:center;gap:calc(var(--u)*5);padding:calc(var(--u)*4) calc(var(--u)*13) calc(var(--u)*12);
  font-style:normal;font-size:calc(var(--u)*3.6);letter-spacing:.14em;text-transform:uppercase}
.s-head i{flex:1;height:1px;background:rgba(241,227,211,.6)}

.steps{padding:0 calc(var(--u)*13)}
.step{position:relative;width:56%;padding-bottom:calc(var(--u)*16)}
.step.right{margin-left:auto;text-align:right}
.step .num{font-family:"Bodoni Moda","Lora",serif;font-style:normal;font-weight:400;font-size:calc(var(--u)*21);line-height:1;letter-spacing:.02em}
.step h3{margin-top:calc(var(--u)*3);font-weight:400;font-style:normal;font-size:calc(var(--u)*3.8);letter-spacing:.12em;text-transform:uppercase}
.step p{margin-top:calc(var(--u)*2);font-style:normal;font-size:calc(var(--u)*4);line-height:1.5;color:rgba(241,227,211,.92)}

/* connector lines with a rounded corner, leading to the next step */
.step:not(:last-child)::after{content:"";position:absolute;pointer-events:none;border:0 solid rgba(241,227,211,.6)}
.step.left:not(:last-child)::after{top:calc(var(--u)*11);left:calc(var(--u)*28);right:calc(var(--u)*-51);bottom:calc(var(--u)*-2);
  border-top-width:1px;border-right-width:1px;border-top-right-radius:calc(var(--u)*4)}
.step.right:not(:last-child)::after{top:calc(var(--u)*29);right:calc(var(--u)*17);left:calc(var(--u)*-51);bottom:calc(var(--u)*-2);
  border-top-width:1px;border-left-width:1px;border-top-left-radius:calc(var(--u)*4)}


/* Serviços na home (mesmo visual da página de serviços) */
.servicos-home{position:relative;padding-top:calc(var(--u)*14);
  background:linear-gradient(var(--bg) 0,rgba(107,60,29,0) 9%,rgba(107,60,29,0) 91%,var(--bg) 100%),
             linear-gradient(rgba(40,20,8,.15),rgba(40,20,8,.3)),url("../images/fundo servicos.jpg") center/cover no-repeat}
.servicos-home .s-head{padding-top:0}

/* ---------- Desempenho mobile ---------- */
.depo-track{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.reveal{will-change:opacity,transform}
.reveal.in{will-change:auto}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{transition:none;opacity:1;transform:none}}

/* Créditos */
footer .dev{margin-top:calc(var(--u)*3);font-family:'Montserrat',sans-serif;font-style:normal;font-size:calc(var(--u)*3);color:var(--cream);opacity:.85}
footer .dev strong{font-weight:700;letter-spacing:.04em}