@font-face{font-family:"Estilo W04 Book";src:url("fonts/EstiloW04-Book.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
:root{
  --blue:#577096;          /* cor do logo (extraída do PNG e da apresentação) */
  --paper:#EBE5E3;         /* segunda cor da marca */
  --ink:#1D2A3E;           /* azul-noite derivado, para texto corrido */
  --white:#FBF9F8;
  --soft:#46556d;
  --deep:#2B3A55;
  /* Estilo Book é a fonte de títulos da marca (licenciada). Troque por @font-face quando houver o arquivo. */
  --display:"Estilo W04 Book",system-ui,sans-serif;
  --text:"Montserrat",system-ui,sans-serif;
  --m:clamp(16px,2.2vw,32px);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:300 17px/1.6 var(--text);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:1.02;text-wrap:balance}
strong,b{font-weight:500}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.svc-more :focus-visible,.how :focus-visible,.end :focus-visible,.fab:focus-visible{outline-color:var(--white)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--white);padding:10px 16px;z-index:50}
.skip:focus{left:8px}

.btn{display:inline-block;background:var(--blue);color:var(--white);font:500 17px/1 var(--text);padding:20px 30px;text-decoration:none;border-radius:0;transition:transform .2s ease,background .2s ease}
.btn:hover{background:var(--deep);transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light:hover{background:var(--white)}

/* ---------- divisão: palco fixo + coluna ---------- */
.split{display:grid;grid-template-columns:45fr 55fr;align-items:start}
.stage{position:sticky;top:0;height:100svh;background:var(--blue);display:grid;place-items:center;padding:var(--m)}
.stage-logo{width:min(62%,520px);height:auto;animation:rise 1.4s cubic-bezier(.2,.7,.2,1) both}
.stage-bar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--paper);color:var(--ink);padding:18px var(--m);font-size:15px;font-weight:500}
.column{padding:0 var(--m) 0 clamp(24px,5vw,72px);min-width:0}
.nav{display:flex;gap:clamp(16px,2.4vw,36px);flex-wrap:wrap;padding:18px 0;font-size:15px;font-weight:500}
.nav a{display:inline-block;padding:10px 0;text-decoration:none;transition:color .2s}
.nav a:hover{color:var(--deep)}

.hero{min-height:calc(100svh - 80px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:28px;padding:40px 0 80px}
.hero h1{font-size:clamp(44px,5.2vw,84px);color:var(--blue);max-width:12ch}
.lead{font-size:19px;max-width:38ch;text-wrap:balance}
.hero-note{font-size:15px;color:var(--soft)}

/* ---------- serviços (na coluna) ---------- */
.services{padding:120px 0 96px}
.services h2{font-size:clamp(40px,4.2vw,64px);color:var(--blue);margin-bottom:24px}
.intro{margin-bottom:64px;max-width:40ch}
.svc-main li{margin-bottom:56px;max-width:46ch}
.svc-main h3{font-size:clamp(28px,2.6vw,38px);margin-bottom:12px}
.svc-more{background:var(--blue);color:var(--white);padding:40px 36px 12px;margin:72px 0 0}
.svc-more li{margin-bottom:32px}
.svc-more h3{font-size:24px;margin-bottom:6px;color:var(--white)}
.svc-more p{font-size:16px;font-weight:400}
.for{font-weight:500;color:var(--soft);margin-bottom:8px}
.svc-more .for{color:var(--white)}
.compl{margin-top:56px;font-size:16px;max-width:42ch}

/* ---------- como agendar: faixa azul, bilhete ---------- */
.how{background:var(--blue);color:var(--white);display:grid;grid-template-columns:1fr 1fr;gap:var(--m);padding:160px var(--m);align-items:start}
.how-text{padding:0 clamp(0px,3vw,48px);display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.how h2{font-size:clamp(44px,5vw,80px);color:var(--white)}
.how-text p{max-width:34ch;font-size:18px;font-weight:400}
.slip{background:var(--paper);color:var(--ink);width:min(100%,480px);justify-self:center;padding:36px 32px 0;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),95% 100%,90% calc(100% - 14px),85% 100%,80% calc(100% - 14px),75% 100%,70% calc(100% - 14px),65% 100%,60% calc(100% - 14px),55% 100%,50% calc(100% - 14px),45% 100%,40% calc(100% - 14px),35% 100%,30% calc(100% - 14px),25% 100%,20% calc(100% - 14px),15% 100%,10% calc(100% - 14px),5% 100%,0 calc(100% - 14px));padding-bottom:28px}
.slip li{display:flex;align-items:baseline;gap:8px;font-size:16px;font-variant-numeric:tabular-nums;margin-bottom:22px}
.slip i{flex:1;min-width:16px;align-self:end;margin-bottom:5px;height:0;border-bottom:4px dotted var(--blue)}
.slip b{text-align:right}
.slip-end{background:var(--ink);color:var(--white);margin:30px -32px 0;padding:14px 32px;font-weight:500}

/* ---------- sobre + fotos reservadas ---------- */
.about{display:grid;grid-template-columns:8fr 4fr;gap:var(--m);padding:160px var(--m) 120px;align-items:start}
.about-text{padding:0 clamp(0px,3vw,48px);max-width:64ch}
.about h2{font-size:clamp(40px,4.4vw,68px);color:var(--blue);margin-bottom:32px}
.about-text p{margin-bottom:22px}
.sign{margin-top:36px;font-size:16px;color:var(--ink)}
.ph{margin:0;background:var(--blue);color:var(--white)}
.ph div{display:grid;place-content:center;text-align:center;gap:6px;height:100%;padding:16px;font-size:16px;font-weight:500}
.ph span{font-weight:300;font-size:14px;opacity:.9}
.ph-portrait{aspect-ratio:4/5}
.ph-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--m);margin-top:56px}
.ph-row .ph{aspect-ratio:4/5}

/* ---------- localização ---------- */
.place{display:grid;grid-template-columns:5fr 7fr;gap:var(--m);padding:0 var(--m) 160px;align-items:stretch}
.place-text{display:flex;flex-direction:column;gap:24px;align-items:flex-start;padding:0 clamp(0px,3vw,48px)}
.place h2{font-size:clamp(40px,4.4vw,68px);color:var(--blue)}
address{font-style:normal;font-size:20px;font-weight:500;line-height:1.5}
.map{min-height:460px;background:var(--blue)}
.map iframe{width:100%;height:100%;min-height:460px;border:0;display:block}

/* ---------- final ---------- */
.end{background:var(--deep);color:var(--white);padding:140px var(--m) 40px}
.end h2{font-size:clamp(36px,4.4vw,68px);color:var(--paper);max-width:16ch}
.end-top{display:flex;flex-direction:column;gap:40px;margin-bottom:120px}
.big{font-family:var(--display);font-size:clamp(40px,6.2vw,104px);line-height:1;letter-spacing:-.03em;color:var(--white);text-decoration:underline;text-decoration-thickness:.03em;text-underline-offset:.12em;text-decoration-color:var(--blue);transition:color .25s,text-decoration-color .25s;white-space:nowrap}
.big:hover{color:var(--paper);text-decoration-color:var(--paper)}
.call{align-self:flex-start;font-size:18px;font-weight:500;padding:12px 0}
.end-info{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:var(--m) 48px;align-items:start;font-size:16px;font-weight:400}
.end-mark{width:84px}
.end a{text-underline-offset:4px}
.end-info a{display:inline-block;padding:12px 0}
.legal{grid-column:2/-1;font-size:15px;margin-top:40px}

.fab{display:none}
.fab-js .fab{opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s .3s}
.fab-js .fab.show{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}

/* ---------- movimento ---------- */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].in{opacity:1;transform:none}
.hero h1,.lead,.hero .btn,.hero-note{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.lead{animation-delay:.08s}.hero .btn{animation-delay:.16s}.hero-note{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* ---------- tablet ---------- */
@media (max-width:1000px){
  .column{padding:0 var(--m)}
  .how,.about,.place{grid-template-columns:1fr}
  .how{padding:100px var(--m)}
  .how-text,.about-text,.place-text{padding:0}
  .about,.place{padding-bottom:100px}
  .about{padding-top:100px}
  .ph-portrait{max-width:420px}
  .ph-row{grid-template-columns:repeat(2,1fr);margin-top:56px}
  .end-info{grid-template-columns:1fr 1fr}
  .end-mark{grid-column:1/-1}
  .legal{grid-column:1/-1}
}
/* ---------- celular ---------- */
@media (max-width:900px){
  body{font-size:16px;padding-bottom:84px}
  .split{display:block}
  .stage{position:sticky;top:0;height:56svh;z-index:0}
  .stage-logo{width:min(70%,340px)}
  .stage-bar{font-size:14px;padding:12px var(--m)}
  .column{position:relative;z-index:1;background:var(--paper);padding:0 var(--m)}
  .nav{flex-wrap:wrap;gap:8px 24px;padding:10px 0 0}
  .nav::-webkit-scrollbar{display:none}
  .hero{min-height:0;padding:36px 0 64px;gap:22px}
  .hero h1{font-size:clamp(44px,13vw,60px)}
  .services{padding:72px 0 80px}
  .svc-more{padding:32px 22px 4px;margin-left:calc(var(--m) * -1);margin-right:calc(var(--m) * -1);padding-left:var(--m);padding-right:var(--m)}
  .slip{padding-left:20px;padding-right:20px}
  .slip-end{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
  .slip li{font-size:15px;flex-wrap:wrap}
  .ph-row{grid-template-columns:1fr 1fr}
  .place{padding-bottom:0}
  .place-text{padding-bottom:40px}
  .map,.map iframe{min-height:360px}
  .end{padding-top:88px}
  .end-top{margin-bottom:72px}
  .end-info{grid-template-columns:1fr}
  .big{font-size:10.5vw}
  .fab{display:block;position:fixed;z-index:20;left:12px;right:12px;bottom:12px;margin:0 auto;max-width:520px;background:var(--blue);color:var(--white);text-align:center;text-decoration:none;font:500 17px/1 var(--text);padding:19px 16px;transition:transform .2s}
  .fab:active{transform:translateY(1px)}
}
@media (max-width:600px){
  .btn{width:100%;text-align:center}
}

.nw{white-space:nowrap}
