@font-face{font-family:'Yulio';src:url('Yulio.otf') format('opentype');font-display:block}

/* ============================================================
   SISTEMA (medido do studio-simms.com):
   duas fontes, um peso cada · escala fluida 100vw/1500 ·
   lh 1.23 pra ler, 0.9 pra display · tracking -0.02 global,
   -0.05 display sans, -0.01 itálica · tinta única por alpha ·
   expo.out em tudo, durações 1s+
   ============================================================ */
:root{
  --bg:#F5F1ED;
  --faixa:calc(200rem + 15rem);
  --wrapx:15rem;
  --ink:#000000;
  --verde:#405A45;
  --rule:rgba(0,0,0,.14);
  --ghost:rgba(0,0,0,.5);
  --ease:cubic-bezier(.19,1,.22,1);
  --sans:"Inter Tight",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
}
html{font-size:calc(100vw / 1500)}
@media (max-width:820px){ html{font-size:calc(100vw / 430)} }
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:13rem;
  line-height:1.23;
  letter-spacing:-.02em;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img,video{display:block;max-width:100%}
.wrap{padding:0 15rem}

/* acento improvisado no U de Estúdio (a Yulio nao tem acentuadas) */
.ac{position:relative;display:inline-block}
.ac::after{
  content:'\2019';
  position:absolute;left:.47em;top:-.12em;
  font-size:.62em;line-height:1;
  transform:rotate(16deg) scaleX(.9);
  pointer-events:none;
}

/* rótulo fantasma: mesma tinta, 50% */
.ghost{font-size:12rem;text-transform:uppercase;color:var(--ghost);letter-spacing:-.01em}

/* o par assinatura: sans em cima, itálica ~11% maior embaixo */
.pair{font-size:28rem;line-height:.9;letter-spacing:-.05em}
.pair em{font-family:var(--serif);font-style:italic;font-size:1.108em;letter-spacing:-.01em;display:block}

/* pílulas (par de CTAs, padrão Nero) */
.btn{
  display:inline-flex;align-items:center;
  font-size:13rem;letter-spacing:-.02em;
  padding:12rem 22rem;border-radius:999px;
  border:1px solid var(--verde);
  background:var(--verde);color:var(--bg);
  transition:transform .6s var(--ease);
}
.btn--linha{background:transparent;color:inherit;border-color:currentColor}
.btn:hover{transform:translateY(-2rem)}

/* ============================================================
   CURSOR (mix-blend difference, lerp)
   ============================================================ */
.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;mix-blend-mode:difference;will-change:transform;opacity:0;transition:opacity .3s ease}
.cursor.is-visible{opacity:1}
.cursor__inner{
  position:absolute;top:0;left:0;
  transform:translate(-50%,-50%) scale(.3);
  width:96rem;height:96rem;border-radius:999px;
  background:#fff;
  transition:transform .45s var(--ease);
}
.cursor.is-active .cursor__inner{transform:translate(-50%,-50%) scale(.5)}
html.has-custom-cursor, html.has-custom-cursor *{cursor:none !important}

/* ============================================================
   REVEALS (linhas, fade, mídia, fileiras)
   ============================================================ */
.line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.line__inner{display:block}
.js .line__inner{transform:translateY(118%);transition:transform 1s var(--ease);transition-delay:var(--d,0ms)}
.js .is-revealed .line__inner{transform:translateY(0)}

.js [data-reveal="fade"]{opacity:0;transform:translateY(24rem);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal="fade"].is-revealed{opacity:1;transform:none}

.media{overflow:hidden}
.media__inner{display:block;width:100%;height:100%;overflow:hidden}
.js .media__inner{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease);transition-delay:var(--d,0ms)}
.js .media.is-revealed .media__inner{clip-path:inset(0 0 0% 0)}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.js .media img,.js .media video{transform:scale(1.18);transition:transform 1.4s var(--ease);transition-delay:var(--d,0ms)}
.js .media.is-revealed img,.js .media.is-revealed video{transform:scale(1)}

.row{
  display:grid;grid-template-columns:1fr auto auto;gap:16rem;align-items:baseline;
  padding:7rem 0;border-top:1px solid var(--rule);
}
.js .row{opacity:0;transform:translateY(14rem);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.js .row.is-revealed{opacity:1;transform:none}
.row .meta{color:var(--ghost);font-variant-numeric:tabular-nums}

/* legenda de foto: título em cima, meta embaixo */
.caption{display:flex;justify-content:space-between;gap:16rem;padding-top:8rem;font-size:13rem}
.caption span:last-child{color:var(--ghost)}

/* ============================================================
   TOPO (estrutura mantida do site atual)
   ============================================================ */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:20;
  transition:background .4s ease,color .4s ease,box-shadow .4s ease,padding .35s ease;
  display:flex;align-items:center;justify-content:space-between;
  padding:20rem 15rem;
  color:var(--bg);
}
.topo-nav{display:flex;gap:22rem;font-size:13rem;align-items:center}
.topo-marca{font-family:'Yulio';font-size:26rem;transform:rotate(-2deg);transition:font-size .35s ease}
.topo-dir{display:flex;gap:24rem;align-items:center;font-size:13rem}
.topo .btn{padding:10rem 18rem;background:transparent;border-color:var(--bg);color:var(--bg)}
.topo .btn:hover{background:var(--bg);color:var(--ink)}

/* ============================================================
   HERO (banner tela cheia, estrutura mantida)
   ============================================================ */
.hero{
  position:relative;
  height:100svh;
  color:var(--bg);
  display:flex;align-items:flex-end;
}
.hero-foto{position:absolute;inset:0;overflow:hidden}
.hero-foto img{width:100%;height:100%;object-fit:cover}
.hero-foto::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.34),transparent 30%),linear-gradient(0deg,rgba(0,0,0,.44),transparent 55%);
}
.hero-conteudo{position:relative;z-index:2;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:40rem;padding:0 15rem 34rem}
.hero-titulo{font-size:58rem;line-height:.94;letter-spacing:-.035em;font-weight:350}
.hero-titulo em{font-family:var(--serif);font-style:italic;font-size:1.108em;letter-spacing:-.01em;font-weight:400}
.hero-eyebrow{font-size:12rem;text-transform:uppercase;color:rgba(245,241,237,.75);margin-bottom:18rem}
.hero-sub{font-size:16rem;max-width:340rem;margin-top:22rem}
.hero-ctas{display:flex;gap:10rem;margin-top:26rem}
.hero-dir{text-align:right;font-size:13rem;color:rgba(245,241,237,.75);white-space:nowrap}

/* ============================================================
   LETTERING EM MOVIMENTO (estrutura mantida do site atual)
   ============================================================ */
.marquee{
  overflow:hidden;
  border-bottom:1px solid var(--rule);
  padding:26rem 0 20rem;
}
.marquee-track{
  display:flex;gap:56rem;width:max-content;
  font-family:var(--serif);
  font-size:58rem;line-height:.9;letter-spacing:-.01em;
  color:var(--verde);
  white-space:nowrap;
  animation:anda 36s linear infinite;
}
.marquee-track span{display:flex;align-items:baseline;gap:56rem}
.marquee-track i{font-style:normal;font-size:.5em;color:var(--ghost)}
@keyframes anda{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   SEÇÕES
   ============================================================ */
section{padding:13vh 0 0}
.eyebrow{font-size:12rem;text-transform:uppercase;color:var(--ghost);margin-bottom:26rem}
.lead{
  font-size:28rem;line-height:1.1;letter-spacing:-.05em;
  margin-left:auto;max-width:min(880rem,72%);
}
.lead em{font-family:var(--serif);font-style:italic;letter-spacing:-.01em}
.tabela{margin-top:7vh}
.tabela .row{grid-template-columns:auto 1fr auto}
.tabela .row .num{color:var(--verde);font-size:12rem;min-width:34rem}

.lead--b{margin-top:5vh}
.lead--centro{margin:0 auto;text-align:center}
/* feed editorial dos cenários */
.feed{display:grid;grid-template-columns:repeat(12,1fr);gap:24rem;row-gap:0}
.bloco{display:flex;flex-direction:column;gap:0}
.bloco .pair{margin-bottom:18rem}
.bloco-a{grid-column:1/8;margin-top:9vh}
.bloco-b{grid-column:9/13;margin-top:22vh}
.bloco-c{grid-column:1/5;margin-top:18vh}
.bloco-d{grid-column:6/13;margin-top:8vh}
.media--paisagem{aspect-ratio:16/10}
.media--retrato{aspect-ratio:3/4}
.media--quadrado{aspect-ratio:1}

/* preços */
.precos-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24rem;margin-top:7vh}
.precos-regra{grid-column:1/7}
.precos-totais{grid-column:8/13}
.preco-row{display:flex;justify-content:space-between;align-items:baseline;padding:16rem 0;border-top:1px solid var(--rule)}
.preco-row b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:44rem;line-height:.9;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.totais-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.total{display:flex;flex-direction:column;justify-content:space-between;min-height:120rem;padding:12rem 12rem 12rem 0;border-bottom:1px solid var(--rule)}
.total:nth-child(odd){border-right:1px solid var(--rule);padding-left:0}
.total:nth-child(even){padding-left:14rem}
.total:nth-child(3),.total:nth-child(4){border-bottom:none}
.total i{font-style:normal;font-size:12rem;text-transform:uppercase;color:var(--ghost)}
.total b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:31rem;line-height:.9;letter-spacing:-.01em}
.precos-notas{margin-top:26rem;font-size:13rem;color:var(--ghost);display:flex;flex-direction:column;gap:6rem}
.precos-notas strong{color:var(--verde);font-weight:400}
.precos-ctas{display:flex;gap:10rem;margin-top:32rem;flex-wrap:wrap}

/* preços: bloco preto, momento de conversão */
#precos{
  background:var(--ink);
  color:var(--bg);
  margin:13vh calc(var(--wrapx) * -1) 0;
  padding:90rem var(--wrapx) 100rem;
}
#precos .eyebrow,#precos .ghost,#precos .total i,#precos .precos-notas{color:var(--bg)}
#precos .preco-row,#precos .totais-grid,#precos .total{border-color:rgba(245,241,237,.22)}
#precos .precos-notas strong{color:var(--bg)}
#precos .lead em{color:var(--bg)}
#precos .btn--linha{border-color:rgba(245,241,237,.6)}

/* FAQ */
.faq{max-width:820rem}
.faq details{border-top:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:20rem;padding:14rem 0;font-size:16rem}
.faq summary::-webkit-details-marker{display:none}
.faq .mais{font-family:var(--serif);font-style:italic;color:var(--ghost);font-size:16rem;transition:transform .6s var(--ease)}
.faq details[open] .mais{transform:rotate(45deg)}
.faq details p{font-size:13rem;color:rgba(0,0,0,.72);padding:0 40rem 16rem 0;max-width:520rem}

/* ============================================================
   FOOTER (identidade Simms)
   ============================================================ */
footer{margin-top:15vh;padding:0 15rem 15rem}
.footer-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24rem;align-items:end;
  border-top:1px solid var(--rule);padding-top:20rem;
}
.footer-logo{
  font-size:128rem;line-height:.82;letter-spacing:-.05em;white-space:nowrap;
  margin-left:-4rem;
}
.footer-logo em{font-family:var(--serif);font-style:normal;letter-spacing:-.02em}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:24rem;font-size:13rem;align-items:start}
.footer-cols h4{font-size:12rem;text-transform:uppercase;color:var(--ghost);font-weight:400;margin-bottom:10rem}
.footer-cols a:hover{color:var(--verde)}
.relogio{font-variant-numeric:tabular-nums;color:var(--ghost)}
.footer-c{color:var(--ghost);white-space:nowrap}

/* ============================================================
   PHOTO ARCHIVE: faixa em loop + arquivo
   ============================================================ */
.strip{
  position:fixed;top:0;right:0;width:200rem;height:100vh;
  overflow:hidden;z-index:15;
  transition:transform 1.1s var(--ease);
}
.strip.is-open{transform:translateX(100%)}
.strip__track{display:flex;flex-direction:column;will-change:transform}
.strip__group{display:flex;flex-direction:column}
.strip__item{position:relative;width:200rem;height:270rem;overflow:hidden;margin-bottom:3rem;
  background-image:url(images/atlas-faixa.webp);background-repeat:no-repeat;
  background-size:200rem 3510rem;}
.strip__item[data-i='0']{background-position-y:0rem}
.strip__item[data-i='1']{background-position-y:-270rem}
.strip__item[data-i='2']{background-position-y:-540rem}
.strip__item[data-i='3']{background-position-y:-810rem}
.strip__item[data-i='4']{background-position-y:-1080rem}
.strip__item[data-i='5']{background-position-y:-1350rem}
.strip__item[data-i='6']{background-position-y:-1620rem}
.strip__item[data-i='7']{background-position-y:-1890rem}
.strip__item[data-i='8']{background-position-y:-2160rem}
.strip__item[data-i='9']{background-position-y:-2430rem}
.strip__item[data-i='10']{background-position-y:-2700rem}
.strip__item[data-i='11']{background-position-y:-2970rem}
.strip__item[data-i='12']{background-position-y:-3240rem}

.strip__label{position:absolute;inset:0;padding:10rem 12rem;display:flex;flex-direction:column;justify-content:space-between;font-size:12rem;color:#fff;opacity:0;transition:opacity .5s var(--ease)}
.strip:hover .strip__label{opacity:1}

.archive{
  position:fixed;inset:0;background:var(--bg);
  overflow-y:auto;overscroll-behavior:contain;
  padding:50rem 15rem;
  transform:translateX(100%);
  transition:transform 1.1s var(--ease);
  z-index:30;
}
.archive.is-open{transform:none}
.archive__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28rem}
.archive__head h2{font-family:var(--serif);font-style:italic;font-size:20rem;font-weight:400}
.archive__close{font:inherit;background:none;border:0;color:var(--ghost);cursor:pointer;text-transform:uppercase;font-size:12rem;padding:12rem 0 12rem 12rem}
.archive__close:hover{color:var(--ink)}
.agrid{display:flex;flex-wrap:wrap;gap:3rem}
.cell{
  position:relative;
  width:calc((100% - 5 * 3rem) / 6);
  aspect-ratio:240/325;
}
.cell__media{position:absolute;inset:0;overflow:hidden}
.js .cell__media{opacity:0;transform:scale(1.06);transition:transform 2s var(--ease),opacity 1s var(--ease);transition-delay:var(--d,0ms)}
.js .cell.is-in .cell__media{opacity:1;transform:scale(1)}
.cell.is-blank .cell__media{display:none}
.cell__media img{width:100%;height:100%;object-fit:cover}
.cell__content{
  position:absolute;inset:0;padding:10rem 12rem;
  display:flex;flex-direction:column;justify-content:space-between;
  font-size:13rem;pointer-events:none;z-index:2;
}
.cell:not(.is-blank) .cell__content{opacity:0;transition:opacity .5s var(--ease)}
.cell:not(.is-blank):hover .cell__content{opacity:1;color:#fff;mix-blend-mode:difference}
.cell__content span:last-child{color:var(--ghost)}
.cell:not(.is-blank):hover .cell__content span:last-child{color:#fff}

/* topo rolado: ganha chao creme e tinta quando a pagina anda */
.topo--rolado{background:var(--bg);color:var(--ink);box-shadow:0 1px 0 var(--rule);padding-top:9rem;padding-bottom:9rem}
.topo--rolado .topo-marca{color:var(--ink);font-size:19rem}
.topo--rolado .btn{padding:7rem 16rem}
.topo--rolado .btn{border-color:var(--verde);color:var(--verde);background:transparent}
.topo--rolado .btn:hover{background:var(--verde);color:var(--bg)}

/* trilho da faixa: so nas paginas que tem a faixa (body.com-trilho) */
body.com-trilho .topo{right:var(--faixa)}
body.com-trilho .hero{margin-right:var(--faixa)}
body.com-trilho .marquee{margin-right:var(--faixa)}
body.com-trilho footer{margin-right:var(--faixa)}
@media (max-width:820px){
  body.com-trilho .topo{right:0}
  body.com-trilho .hero,body.com-trilho .marquee,body.com-trilho footer{margin-right:0}
}
/* conteúdo respeita a faixa à direita */
.com-faixa{margin-right:var(--faixa);padding-right:15rem}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:820px){
  :root{--wrapx:20rem}
  .wrap{padding:0 20rem}
  .com-faixa{margin-right:0;padding-right:20rem}
  .topo{right:0}
  .hero,.marquee,footer{margin-right:0}
  .strip{display:none}
  .topo{padding:10rem 20rem}
  .topo-nav a,.topo-dir a:not(.btn){padding:16rem 0;display:inline-flex;align-items:center}
  .topo .btn{padding:11rem 18rem}
  .topo-nav a:nth-child(2),.topo-nav a:nth-child(3){display:none}
  .topo-dir a:not(.btn){display:none}
  .topo-marca{font-size:20rem}
  .hero-conteudo{flex-direction:column;align-items:flex-start;gap:18rem;padding:0 20rem 30rem}
  .hero-titulo{font-size:52rem}
  .hero-dir{text-align:left}
  .marquee-track{font-size:44rem}
  .lead{max-width:100%;margin-left:0}
  .pair{font-size:24rem}
  .feed{grid-template-columns:1fr;gap:0}
  .bloco-a,.bloco-b,.bloco-c,.bloco-d{grid-column:1/-1;margin-top:9vh}
  .precos-grid{grid-template-columns:1fr;gap:0}
  .precos-regra,.precos-totais{grid-column:1/-1}
  .precos-totais{margin-top:7vh}
  .footer-grid{grid-template-columns:1fr;gap:40rem}
  .footer-logo{font-size:64rem;white-space:normal}
  .footer-cols{grid-template-columns:1fr 1fr;gap:28rem 20rem}
  .arquivo-botao-mobile{display:inline-flex}
  .archive{padding:24rem 20rem}
  .cell{width:calc((100% - 3rem) / 2)}
}
.arquivo-botao-mobile{display:none}
@media (max-width:820px){
  .arquivo-botao-mobile{display:inline-flex;margin-top:9vh}
}

/* ============================================================
   CAPTURA / REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .line__inner{transform:none}
  .cursor{display:none}
}
html.shot *{transition:none !important;animation:none !important}
html.shot .line__inner{transform:none}
html.shot .hero{height:820px}
html.shot section{padding:120px 0 0}
html.shot .lead--b{margin-top:52px}
html.shot .tabela{margin-top:64px}
html.shot .bloco-a{margin-top:80px}
html.shot .bloco-b{margin-top:200px}
html.shot .bloco-c{margin-top:160px}
html.shot .bloco-d{margin-top:70px}
html.shot .precos-grid{margin-top:64px}
html.shot #precos{margin-top:120px;padding-top:80px;padding-bottom:90px}
html.shot footer{margin-top:130px}