/* Layout: a página é um passeio pelo prédio. A planta em corte abre e serve de índice; depois as cenas
   ocupam a tela de ponta a ponta, o estúdio sangra pela direita e os ambientes passam numa faixa que
   se arrasta de lado. O botão de dia e noite, que existe no produto, muda a luz da página inteira. */
:root{
  color-scheme: light;
  --fundo:#ECE7DF;       /* a parede do próprio escritório */
  --fundo-2:#E3DCD1;
  --tinta:#3B2116;       /* nogueira */
  --suave:#6B5347;
  --cartao:#3B2116;
  --cartao-tinta:#EFE6D8;
  --cartao-suave:#DCCFC0;
  --linha:rgba(59,33,22,.22);
  --jade:#2F7D62;
  --salvia:#B9D49A;
  --coral:#E8604C;
  --latao:#C19A2E;
  --noite:#14161F;
  --noite-tinta:#EFE6D8;
  --display:"Sora","Trebuchet MS",system-ui,sans-serif;
  --texto:"Nunito Sans","Segoe UI",system-ui,sans-serif;
  --borda:clamp(1rem,4vw,3rem);
  --recuo-capa:clamp(2rem,6.5vw,6.5rem);
}
:root[data-luz="noite"]{
  color-scheme: dark;
  --fundo:#14161F; --fundo-2:#1B1E2A; --tinta:#EFE6D8; --suave:#B5AD9F;
  --cartao:#EFE6D8; --cartao-tinta:#3B2116; --cartao-suave:#6B5347; --linha:rgba(239,230,216,.2);
  --jade:#3F9A7A;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--tinta);font:400 1.0625rem/1.6 var(--texto);-webkit-font-smoothing:antialiased;transition:background-color .6s,color .6s;overflow-x:clip}
.pg{max-width:78rem;margin-inline:auto;padding-inline:var(--borda)}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--jade);outline-offset:3px;border-radius:4px}
img{display:block;max-width:100%;height:auto}

/* topo */
.topo{position:absolute;inset:0 0 auto 0;z-index:5;padding-block:1.1rem}
.topo-in{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
/* capa: a cena de ponta a ponta */
.capa{position:relative;overflow:clip;background:var(--fundo)}
.capa-img{position:relative;aspect-ratio:6336/2688;transform-origin:70% 50%;animation:respira 28s ease-in-out infinite alternate}
@keyframes respira{from{scale:1}to{scale:1.06}}
.capa-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;transition:opacity 1s}
.capa-img .de-noite{opacity:0}
:root[data-luz="noite"] .capa-img .de-noite{opacity:1}
:root[data-luz="noite"] .capa-img .de-dia{opacity:0}
.capa::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to top,var(--fundo) 0%,color-mix(in srgb,var(--fundo) 55%,transparent) 14%,transparent 34%),
  linear-gradient(100deg,rgba(28,14,8,.62) 0%,rgba(28,14,8,.38) 30%,rgba(28,14,8,0) 58%),
  linear-gradient(to bottom,rgba(28,14,8,.35) 0%,rgba(28,14,8,0) 22%)}
.capa-texto{position:absolute;inset:auto 0 clamp(4rem,11vw,10rem) 0;z-index:2;display:grid;gap:1.25rem;color:#fff;max-width:none;margin-inline:0;padding-inline:var(--recuo-capa)}
.capa-texto h1{font-weight:800;font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:.94;letter-spacing:-.045em;max-width:12ch;text-shadow:0 2px 30px rgba(0,0,0,.35);animation:sobe .9s .1s cubic-bezier(.2,.7,.2,1) both}
.capa-texto p{font-size:clamp(1.05rem,1.4vw,1.25rem);color:rgba(255,255,255,.88);max-width:34rem;text-shadow:0 1px 14px rgba(0,0,0,.4);animation:sobe .9s .3s cubic-bezier(.2,.7,.2,1) both}
.capa-texto .abre-acoes{animation:sobe .9s .45s cubic-bezier(.2,.7,.2,1) both}
.capa-texto .lk{color:#fff}
/* a etiqueta do produto sobre quem anda */
.voce-capa{position:absolute;left:54.5%;top:39%;translate:-50% -100%;display:grid;justify-items:center;gap:3px;animation:sobe .8s 1.4s both,anda 1.1s 2.2s ease-in-out infinite alternate}
.voce-capa b{font:600 .8rem/1 var(--texto);background:#3B2116;color:#EFE6D8;padding:.42rem .65rem;border-radius:99px;box-shadow:0 6px 18px -6px rgba(0,0,0,.6)}
.voce-capa i{width:0;height:0;border:6px solid transparent;border-top-color:#3B2116;border-bottom:0}
@keyframes anda{from{translate:-50% -100%}to{translate:-50% calc(-100% - 6px)}}
.marca{text-decoration:none;display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin-left:0}
.marca small{color:#fff;font:500 .68rem/1 var(--texto);letter-spacing:.08em;opacity:.85;text-shadow:0 1px 6px rgba(0,0,0,.5);padding-left:2px}
.marca .logo{height:3.1rem;width:auto;display:block;filter:drop-shadow(0 1px 4px rgba(0,0,0,.35))}
.marca .logo path[fill="#3B2116"]{fill:#fff;transition:fill .6s}
.marca .logo path[stroke="#C19A2E"]{stroke:#fff}
.topo nav{margin-left:auto;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.pilula{display:flex;border:1.5px solid var(--tinta);border-radius:99px;padding:2px}
.pilula button{font:600 .8125rem/1 var(--texto);border:0;background:none;color:var(--tinta);padding:.45rem .7rem;border-radius:99px;cursor:pointer}
.pilula button[aria-pressed="true"]{background:var(--tinta);color:var(--fundo)}
.botao{font:600 1rem/1 var(--texto);background:var(--jade);color:#fff;text-decoration:none;border:0;border-radius:99px;padding:.85rem 1.35rem;cursor:pointer;display:inline-block}
.botao:hover{filter:brightness(.9)}
.topo .botao{padding:.7rem 1.1rem;font-size:.9375rem}

/* abertura */
.abre{position:relative;padding-block:clamp(2.5rem,6vw,5rem) 0;overflow:clip}
/* entrada: uma sequência só, na chegada */
@keyframes sobe{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@keyframes chega{from{opacity:0;translate:0 70px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes pousa{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
.anel{animation:pousa .5s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(.2s + var(--i,0)*.1s)}
.rotulo{animation:pousa .5s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(.35s + var(--i,0)*.1s)}
.abre-texto{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.25rem clamp(1.25rem,3vw,2.5rem);align-items:end}
.abre h2{grid-column:1/span 7;font-weight:800;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1;letter-spacing:-.04em}
.abre-texto p{grid-column:9/span 4;font-size:1.0625rem;color:var(--suave);padding-bottom:.3rem}
.abre-acoes{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.abre-acoes a.lk{font-weight:600;text-underline-offset:.25em}

.planta{position:relative;margin-top:clamp(-3.5rem,-4vw,0rem);margin-inline:calc(var(--borda)*-1);perspective:1400px}
.planta::before{content:"";position:absolute;left:50%;top:58%;width:70%;height:40%;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(193,154,46,.28),rgba(193,154,46,0));filter:blur(30px);pointer-events:none}
:root[data-luz="noite"] .planta::before{background:radial-gradient(closest-side,rgba(255,190,90,.22),rgba(255,190,90,0))}
.planta-img{position:relative;max-width:1400px;margin-inline:auto;aspect-ratio:2000/1417;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.planta-img img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .8s;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 95%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 95%,transparent);mask-composite:intersect}
.planta-img .de-noite{opacity:0}
:root[data-luz="noite"] .planta-img .de-noite{opacity:1}
:root[data-luz="noite"] .planta-img .de-dia{opacity:0}
.anel{position:absolute;translate:-50% -50%;width:7.2%;aspect-ratio:2.3/1;padding:0;border:3px solid var(--latao);border-radius:50%;background:rgba(255,255,255,.001);cursor:pointer;box-shadow:0 2px 0 rgba(59,33,22,.25);transform:translateZ(30px)}
.anel::after{content:"";position:absolute;inset:-14px -6px}
.anel[aria-pressed="true"]{border-color:#fff;background:rgba(232,96,76,.28);box-shadow:0 0 0 3px var(--coral);animation:pousa .5s both,pulso 2.4s 1.6s ease-in-out infinite}
/* rótulos flutuantes, como as plaquinhas do produto */
.rotulo{position:absolute;translate:-50% -50%;z-index:2;transform:translateZ(60px);pointer-events:none;font:600 .8125rem/1 var(--texto);color:var(--jade);background:var(--fundo);padding:.45rem .7rem .48rem;border-radius:99px;box-shadow:0 6px 18px -6px rgba(59,33,22,.45);white-space:nowrap;transition:background-color .6s,color .6s}
.rotulo::after{content:"";position:absolute;left:50%;bottom:-4px;width:9px;height:9px;background:inherit;translate:-50% 0;rotate:45deg;border-radius:2px}
:root[data-luz="noite"] .rotulo{color:var(--salvia);box-shadow:0 6px 18px -6px rgba(0,0,0,.7)}
.rotulo.ativo{background:var(--coral);color:#fff}
/* a pessoa que passeia pelo prédio */
.voce{position:absolute;z-index:3;translate:-50% -100%;transform:translateZ(80px);pointer-events:none;display:grid;justify-items:center;gap:2px;transition:left 1.9s cubic-bezier(.45,.05,.3,1),top 1.9s cubic-bezier(.45,.05,.3,1)}
.voce span{font:600 .75rem/1 var(--texto);background:var(--tinta);color:var(--fundo);padding:.35rem .55rem;border-radius:99px;transition:background-color .6s,color .6s}
.voce i{display:block;width:12px;height:12px;border-radius:50%;background:var(--coral);border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.voce.andando i{animation:passo .32s ease-in-out infinite alternate}
@keyframes passo{from{translate:0 0}to{translate:0 -4px}}
@media (max-width:60rem){.rotulo,.voce{display:none}}
@keyframes pulso{50%{box-shadow:0 0 0 9px rgba(232,96,76,0),0 0 0 3px var(--coral)}0%,100%{box-shadow:0 0 0 3px var(--coral)}}
.ficha{position:absolute;z-index:3;right:var(--borda);top:clamp(2rem,5vw,4.5rem);width:min(19.5rem,27%);background:var(--cartao);color:var(--cartao-tinta);border-radius:1.25rem 1.25rem 1.25rem .25rem;padding:1.35rem 1.4rem 1.5rem;display:grid;gap:.6rem;transition:background-color .6s,color .6s}
.ficha .onde{font:600 .875rem/1.2 var(--texto);color:var(--jade)}
:root:not([data-luz="noite"]) .ficha .onde{color:var(--salvia)}
.ficha h2{font-weight:700;font-size:1.5rem;line-height:1.1}
.ficha p{font-size:.9688rem;line-height:1.5;color:var(--cartao-suave)}
.dica{font-size:.875rem;color:var(--suave);padding:.5rem var(--borda) 0;text-align:right}

/* cena de ponta a ponta */
.cena{position:relative;margin-top:clamp(3rem,7vw,6rem);color:#fff;isolation:isolate}
.cena>img{width:100%;height:clamp(26rem,52vw,46rem);object-fit:cover;object-position:var(--foco,70% 50%)}
.cena::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(24,12,7,.86) 0%,rgba(24,12,7,.62) 32%,rgba(24,12,7,0) 62%)}
.cena.escura::after{background:linear-gradient(90deg,rgba(12,13,20,.9) 0%,rgba(12,13,20,.66) 34%,rgba(12,13,20,0) 64%)}
.cena .pg{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.cena.dir::after{background:linear-gradient(270deg,rgba(12,13,20,.92) 0%,rgba(12,13,20,.7) 34%,rgba(12,13,20,0) 66%)}
.cena.dir .pg{justify-content:flex-end}
.cena .fala{max-width:27rem;display:grid;gap:1rem}
.cena.escura .fala{max-width:22.5rem}
.cena .fala p{color:rgba(255,255,255,.84)}
.fala h2{font-weight:800;font-size:clamp(1.85rem,3.6vw,3rem);line-height:1.02;letter-spacing:-.035em}
.fala p{color:var(--suave);max-width:34rem}
.fala ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem;font-weight:500}
.fala li{padding-left:1.6rem;position:relative}
.fala li::before{content:"";position:absolute;left:.1rem;top:.42em;width:.38rem;height:.7rem;border:solid var(--latao);border-width:0 2.5px 2.5px 0;transform:rotate(42deg);border-radius:1px}

/* estúdio: a imagem sangra pela direita */
.sangra{display:grid;grid-template-columns:minmax(var(--borda),1fr) minmax(0,25rem) clamp(1.5rem,5vw,5rem) minmax(0,calc(53rem + (100vw - 78rem)/2));align-items:center;padding-block:clamp(3.5rem,8vw,7rem)}
.sangra .fala{grid-column:2;display:grid;gap:1rem}
.sangra figure{grid-column:4;margin:0;min-width:0}
.sangra img{width:100%;height:clamp(20rem,40vw,36rem);object-fit:cover;object-position:60% 40%;border-radius:2rem 0 0 .4rem}
figcaption{font-size:.875rem;color:var(--suave);padding-top:.6rem}

/* passeio: faixa que se arrasta de lado */
.passeio{padding-block:clamp(3.5rem,8vw,7rem) clamp(3rem,6vw,5rem)}
.passeio-topo{display:flex;gap:1.5rem 3rem;flex-wrap:wrap;align-items:end;justify-content:space-between;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.passeio-topo .fala{display:grid;gap:1rem;max-width:40rem}
.setas{display:flex;gap:.5rem}
.setas button{width:3.25rem;height:3.25rem;border-radius:50%;border:1.5px solid var(--tinta);background:none;color:var(--tinta);cursor:pointer;display:grid;place-items:center}
.setas button:hover{background:var(--tinta);color:var(--fundo)}
.setas svg{width:1.25rem;height:1.25rem}
.faixa{display:flex;gap:clamp(1rem,2vw,1.75rem);overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:max(var(--borda),calc((100vw - 78rem)/2 + var(--borda)));scroll-padding-inline:max(var(--borda),calc((100vw - 78rem)/2 + var(--borda)));scrollbar-width:none;cursor:grab;margin:0;list-style:none;padding-block:0}
.faixa::-webkit-scrollbar{display:none}
.faixa.arrastando{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.faixa li{flex:0 0 min(82vw,44rem);scroll-snap-align:start;display:grid;gap:.9rem;align-content:start}
.faixa img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:1.75rem 1.75rem 1.75rem .35rem;pointer-events:none;user-select:none}
.faixa li:nth-child(even) img{border-radius:1.75rem 1.75rem .35rem 1.75rem}
.faixa .onde{font:600 .875rem/1.2 var(--texto);color:var(--jade)}
.faixa h3{font-weight:800;font-size:1.625rem;line-height:1.1;letter-spacing:-.03em}
.faixa p{color:var(--suave);max-width:34rem}

/* o que tem dentro */
.dentro{background:var(--fundo-2);padding-block:clamp(3.5rem,8vw,7rem);transition:background-color .6s}
.dentro h2{font-weight:800;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1;letter-spacing:-.04em;margin-bottom:clamp(2rem,4vw,3.5rem);max-width:36rem}
.lista{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:0 clamp(1.5rem,3vw,3rem)}
.lista div{padding-block:1.1rem;border-top:1.5px solid var(--linha)}
.lista dt{font:700 1.1875rem/1.2 var(--display);letter-spacing:-.015em}
.lista dd{margin:.3rem 0 0;color:var(--suave);font-size:.9688rem}

/* convite */
.convite{background:var(--coral);color:#2A0F09;padding-block:clamp(3.5rem,8vw,7rem)}
.convite .pg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem);align-items:start}
.convite h2{grid-column:1/span 7;font-weight:800;font-size:clamp(2.25rem,5.4vw,4.25rem);line-height:.98;letter-spacing:-.045em}
.convite .lado{grid-column:8/span 5;display:grid;gap:1.1rem;min-width:0}
.convite p{max-width:30rem}
.convite .preco{font-size:1.0625rem;line-height:1.3}
.convite .preco strong{font:800 clamp(2.5rem,5vw,3.5rem)/1 var(--titulo,var(--texto));letter-spacing:-.04em;display:block;margin-bottom:.25rem}
.convite .assinar{background:#3B2116;font-size:1.0625rem;padding:1rem 1.6rem}
.correio{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.correio code{font:600 1.125rem/1.2 var(--texto);background:#fff;color:#3B2116;padding:.8rem 1rem;border-radius:.75rem;user-select:all;overflow-wrap:anywhere}
.correio button{font:600 .9375rem/1 var(--texto);background:#3B2116;color:#fff;border:0;border-radius:99px;padding:.85rem 1.2rem;cursor:pointer}
.pe{padding-block:2rem;font-size:.9063rem;color:var(--suave);display:flex;gap:.5rem 2rem;flex-wrap:wrap;justify-content:space-between}

@media (max-width:60rem){
  .planta{margin-top:1.5rem}
  .planta-img{transform:none}
  .ficha{position:static;width:auto;margin:0 var(--borda);border-radius:1.25rem}
  .dica{text-align:left}
  .abre h2,.abre-texto p,.convite h2,.convite .lado{grid-column:1/-1}
  .capa-img{aspect-ratio:auto;height:34rem;animation:none}
  .capa-img img{object-position:82% 50%}
  .voce-capa{display:none}
  .capa-texto{position:relative;inset:auto;padding-block:1.5rem 2.5rem;color:var(--tinta)}
  .capa-texto p{color:var(--suave);text-shadow:none}
  .capa-texto h1{text-shadow:none}
  .capa-texto .lk{color:inherit}
  .capa::after{background:linear-gradient(to top,var(--fundo) 0%,transparent 30%)}
  .topo{position:static;padding-block:1rem}
  .anel{width:9%;border-width:2px}
  .topo .botao{display:none}
  .cena{background:#20120C;display:grid}
  .cena.escura{background:#0E0F16}
  .cena>img{height:auto;aspect-ratio:16/10;object-position:var(--foco-cel,75% 50%)}
  .cena::after,.cena.escura::after{display:none}
  .cena .pg{position:static;padding-block:1.75rem 2.25rem}
  .sangra{grid-template-columns:var(--borda) minmax(0,1fr) var(--borda);row-gap:1.75rem}
  .sangra .fala{grid-column:2}
  .sangra figure{grid-column:2/4;grid-row:1}
  .sangra img{height:18rem}
  .sangra figcaption{padding-right:var(--borda)}
}
@media (prefers-reduced-motion:reduce){
  .anel[aria-pressed="true"]{animation:none}
  .capa-img,.capa-texto h1,.capa-texto p,.capa-texto .abre-acoes,.voce-capa,.anel,.rotulo{animation:none}
  .voce{transition:none}
  .planta-img{transform:none;transition:none}
  html{scroll-behavior:auto}
  body,.planta-img img{transition:none}
}

/* ---- menu das páginas (cabeçalho) ---- */
.menu{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:.1rem;flex-wrap:wrap}
.menu a{display:block;padding:.5rem .7rem;border-radius:99px;color:#fff;text-decoration:none;font:600 .9rem/1 var(--texto);text-shadow:0 1px 6px rgba(0,0,0,.45);opacity:.9}
.menu a:hover,.menu a[aria-current="page"]{background:rgba(255,255,255,.14);opacity:1}
.topo nav{margin-left:0}
.topo-in{gap:.8rem 1.2rem}
.pagina .topo{color:#fff}
@media (max-width:60rem){.menu{order:3;flex-basis:100%;gap:0}.menu a{padding:.45rem .55rem;font-size:.85rem}}
/* ---- páginas internas ---- */
.cena.capa-pagina{margin-top:0}
.cena.capa-pagina>img{height:clamp(30rem,60vw,50rem)}
.cena.capa-pagina .fala{max-width:32rem;padding-top:4.5rem}
.cena.capa-pagina h1{font-weight:800;font-size:clamp(2.2rem,5vw,4.2rem);line-height:.98;letter-spacing:-.04em}
.cena .fala .onde,.sangra .fala .onde{font:600 .8rem/1 var(--texto);letter-spacing:.14em;text-transform:uppercase;color:var(--latao)}
.cena .fala .onde{color:#F2CB7A}
.sangra.esq{grid-template-columns:minmax(0,calc(53rem + (100vw - 78rem)/2)) clamp(1.5rem,5vw,5rem) minmax(0,25rem) minmax(var(--borda),1fr)}
.sangra.esq figure{grid-column:1;grid-row:1}.sangra.esq .fala{grid-column:3;grid-row:1}
@media (max-width:60rem){.sangra.esq figure{grid-row:auto}.sangra.esq .fala{grid-row:auto}}
.sangra.esq img{border-radius:0 2rem .4rem 0;object-position:50% 50%}
.sangra{margin-top:clamp(3rem,7vw,6rem)}
.sangra figcaption{color:var(--suave);font-size:.9rem;margin-top:.6rem}
.nota{font-size:.9rem;color:var(--suave);border-left:3px solid var(--latao);padding-left:.9rem}
.proximas{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.5rem}
.proximas a{color:inherit;text-decoration:none;border:1.5px solid currentColor;border-radius:99px;padding:.55rem .95rem;font:600 .9rem/1 var(--texto)}
.proximas a:hover{background:rgba(0,0,0,.08)}
.convite .nota{color:#2A0F09;opacity:.75;border-color:#2A0F09}

/* ---- seções de integração (logo, nome, selo de estado) ---- */
.integra{padding-block:clamp(2.5rem,6vw,4.5rem);border-top:1.5px solid var(--linha)}
.integra-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.integra.com-figura .integra-in{grid-template-columns:minmax(0,26rem) minmax(0,1fr)}
.integra:nth-of-type(even).com-figura .integra-in{grid-template-columns:minmax(0,1fr) minmax(0,26rem)}
.integra:nth-of-type(even).com-figura .integra-texto{order:2}
.integra-texto{display:grid;gap:1rem}
.integra-texto h2{font-weight:800;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.05;letter-spacing:-.03em}
.integra-texto p{color:var(--suave);max-width:36rem}
.integra-texto ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem;font-weight:500}
.integra-texto li{padding-left:1.6rem;position:relative}
.integra-texto li::before{content:"";position:absolute;left:.1rem;top:.42em;width:.38rem;height:.7rem;border:solid var(--latao);border-width:0 2.5px 2.5px 0;transform:rotate(42deg);border-radius:1px}
.integra-cabeca{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.logo-int{width:3rem;height:3rem;border-radius:.9rem;background:#fff;box-shadow:0 2px 10px -4px rgba(0,0,0,.35);display:grid;place-items:center;padding:.45rem;box-sizing:border-box}
.logo-int svg{width:100%;height:100%;display:block}
.integra-nome{font:700 1.1rem/1 var(--display);letter-spacing:-.01em}
.selo{font:700 .72rem/1 var(--texto);letter-spacing:.08em;text-transform:uppercase;padding:.4rem .6rem;border-radius:99px;background:#e6e1d8;color:#5c554a}
.selo.no-ar{background:#dff1e6;color:#1f5f45}
.selo.a-ligar{background:#fbe9c4;color:#7a5410}
.selo.planejada{background:#e6e1d8;color:#5c554a}
:root[data-luz="noite"] .selo.no-ar{background:#1f4a37;color:#bfe9d1}
:root[data-luz="noite"] .selo.a-ligar{background:#5a420f;color:#f7d98a}
:root[data-luz="noite"] .selo{background:#2a2d3a;color:#c9c3b8}
.integra figure{margin:0;min-width:0}
.integra figure img{width:100%;height:auto;border-radius:1.4rem;display:block}
.integra figcaption{color:var(--suave);font-size:.9rem;margin-top:.6rem}
@media (max-width:60rem){.integra.com-figura .integra-in,.integra:nth-of-type(even).com-figura .integra-in{grid-template-columns:1fr}.integra:nth-of-type(even).com-figura .integra-texto{order:0}}

/* ---- faixas das integrações: ilustração inteira ao fundo, texto escuro sobre a parede vazia ---- */
.cena.clara{margin-top:0;color:#2A1B12}
.cena.clara>img{height:var(--alt,clamp(30rem,56vw,46rem));object-position:50% 50%}
.cena.clara::after{background:linear-gradient(90deg,rgba(247,239,226,.72) 0%,rgba(247,239,226,.5) 34%,rgba(247,239,226,0) 54%)}
.cena.clara.dir::after{background:linear-gradient(270deg,rgba(247,239,226,.72) 0%,rgba(247,239,226,.5) 34%,rgba(247,239,226,0) 54%)}
.cena.clara .fala{max-width:30rem;gap:.9rem}
.cena.clara .fala h2{color:#2A1B12;font-size:clamp(1.7rem,3.2vw,2.6rem)}
.cena.clara .fala p{color:#4a3a30}
.cena.clara .fala li{color:#2A1B12;font-weight:600}
.cena.clara .integra-nome{color:#2A1B12}
.cena.clara .logo-int{width:2.5rem;height:2.5rem;border-radius:.7rem;padding:.35rem}
@media (max-width:60rem){.cena.clara>img{height:auto;aspect-ratio:16/9;object-fit:cover}.cena.clara .pg{position:static;display:block;padding-block:1.4rem}.cena.clara::after{display:none}.cena.clara{color:inherit}.cena.clara .fala h2,.cena.clara .integra-nome,.cena.clara .fala li{color:inherit}.cena.clara .fala p{color:var(--suave)}}

/* ---- transição suave entre as faixas: a imagem se dissolve no fundo da página em cima e embaixo ---- */
.cena.clara::before,.cena.capa-pagina::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.cena.clara::before{background:linear-gradient(to bottom,var(--fundo) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 74%,var(--fundo) 100%);transition:background .6s}
.cena.capa-pagina::before{background:linear-gradient(to bottom,rgba(0,0,0,0) 62%,var(--fundo) 100%)}
.cena.clara{margin-top:0}
/* as seções sólidas depois das faixas (computador, sala) também entram devagar */
.integra{border-top:0;padding-top:clamp(1.5rem,4vw,3rem)}

/* a faixa cresce com o texto: a imagem cobre o fundo e o texto fica no fluxo (nunca é cortado) */
.cena.clara{min-height:var(--alt,40rem);display:flex;align-items:center;overflow:hidden}
.cena.clara>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cena.clara .pg{position:relative;inset:auto;z-index:2;display:flex;align-items:center;width:100%;padding-block:clamp(3rem,6vw,5rem)}
@media (max-width:60rem){.cena.clara{min-height:0;display:block}.cena.clara>img{position:static;height:auto;aspect-ratio:16/9}}
/* 5, 6 e 8: a imagem vai mais para o lado e o texto ganha parede */
#trabalho>img{object-position:100% 50%}#ia>img,#publico>img{object-position:0% 50%}
#trabalho .fala,#ia .fala,#publico .fala{max-width:34rem}
#trabalho::after{background:linear-gradient(90deg,rgba(247,239,226,.8) 0%,rgba(247,239,226,.6) 44%,rgba(247,239,226,0) 62%)}
#ia::after,#publico::after{background:linear-gradient(270deg,rgba(247,239,226,.8) 0%,rgba(247,239,226,.6) 44%,rgba(247,239,226,0) 62%)}

/* ---- prédio: o mural vertical é o fundo; cada andar tem a proporção de um nono dele ---- */
.predio{background:url("img/mural-vertical.webp") top center/100% auto no-repeat;position:relative;isolation:isolate}
.andar{position:relative;aspect-ratio:2048/917.33;display:flex;align-items:center;color:#2A1B12}
.andar .pg{position:relative;z-index:2;display:flex;width:100%;align-items:center}
.andar.dir .pg{justify-content:flex-end}
.andar .fala{max-width:30rem;display:grid;gap:.8rem}
.andar .fala h2{font-weight:800;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.02;letter-spacing:-.035em;color:#2A1B12}
.andar .fala p{color:#4a3a30;max-width:34rem;font-size:.98rem}
.andar .fala ul{margin:0;padding:0;list-style:none;display:grid;gap:.4rem;font-weight:600;font-size:.95rem}
.andar .fala li{padding-left:1.6rem;position:relative}
.andar .fala li::before{content:"";position:absolute;left:.1rem;top:.42em;width:.38rem;height:.7rem;border:solid var(--latao);border-width:0 2.5px 2.5px 0;transform:rotate(42deg);border-radius:1px}
.andar .integra-nome{color:#2A1B12}
.andar .logo-int{width:2.3rem;height:2.3rem;border-radius:.65rem;padding:.3rem}
.andar::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(247,239,226,.62) 0%,rgba(247,239,226,.42) 38%,rgba(247,239,226,0) 54%)}
.andar.dir::after{background:linear-gradient(270deg,rgba(247,239,226,.62) 0%,rgba(247,239,226,.42) 38%,rgba(247,239,226,0) 54%)}
.andar .so-celular{display:none}
.predio+.integra{padding-top:clamp(2.5rem,6vw,4.5rem)}
@media (max-width:60rem){.predio{background:none}.andar{aspect-ratio:auto;display:block;color:inherit}.andar::after{display:none}.andar .so-celular{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.andar .pg{display:block;padding-block:1.4rem}.andar .fala h2,.andar .integra-nome{color:inherit}.andar .fala p{color:var(--suave)}}

/* ---- sem as "sombras brancas": o texto fica direto sobre a parede vazia ---- */
.andar::after,.andar.dir::after,.cena.clara::after,.cena.clara.dir::after,.cena.clara::before{display:none}
/* ---- grupos de três: um mural por grupo ---- */
.predio.grupo{background-image:var(--mural)}
.predio.grupo .andar{aspect-ratio:2048/1223.00}
.predio.grupo .fala{max-width:32rem}
/* ajuste fino por andar (grupos de três): o texto desce para a parede vazia do andar */
.predio.grupo #agenda .fala{transform:translate(-2rem,-32rem)}
.predio.grupo #mensagens .fala{transform:translate(-9rem,-8rem)}
.predio.grupo #mensagens .fala ul{transform:translateX(9rem)}
.predio.grupo #arquivos .fala{transform:translate(10rem,-6rem)}
.predio.grupo #trabalho .fala{transform:translateY(-2rem)}
.predio.grupo #ia .fala{transform:translate(14rem,-3rem)}
.predio.grupo #publico .fala{transform:translate(4rem,8rem)}
.predio.grupo #identidade .fala{transform:translateY(-4rem)}
.predio.grupo #midia .fala{transform:translateX(3rem)}
.predio.grupo #maiores .fala{transform:translateX(-5rem)}
/* fontes maiores nos andares */
.predio.grupo .fala{max-width:36rem;gap:1rem}
.predio.grupo .fala h2{font-size:clamp(2rem,3.4vw,3.1rem)}
.predio.grupo .fala p{font-size:1.15rem;line-height:1.55;max-width:36rem}
.predio.grupo .fala ul{font-size:1.08rem;gap:.55rem}
.predio.grupo .integra-nome{font-size:1.25rem}
.predio.grupo .selo{font-size:.8rem}
.predio.grupo .logo-int{width:2.7rem;height:2.7rem}
/* vidro fosco atrás do texto (legibilidade) */
.predio.grupo #agenda .fala{background:rgba(247,239,226,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:1.6rem 1.8rem;border-radius:1.4rem;box-shadow:0 10px 30px -18px rgba(59,33,22,.35)}

/* sem selos de estado: tudo apresentado como integrado (08/10) */
.selo{display:none}

/* capa de Integrações: a capa escura original, com uma folga entre ela e o primeiro mural */
.pagina:has(.predio.grupo) .cena.capa-pagina::before{background:linear-gradient(to bottom,rgba(0,0,0,0) 45%,var(--fundo) 100%)}


/* ---- toda junção de imagem em Integrações: cada mural nasce e termina esmaecido no fundo, com folga entre blocos ---- */
.predio.grupo{margin-top:clamp(1.5rem,4vw,3rem)}
.predio.grupo::before,.predio.grupo::after{content:"";position:absolute;left:0;right:0;height:clamp(6rem,14vw,14rem);z-index:1;pointer-events:none}
.predio.grupo::before{top:0;background:linear-gradient(to bottom,var(--fundo) 0%,rgba(236,231,223,0) 100%)}
.predio.grupo::after{bottom:0;background:linear-gradient(to top,var(--fundo) 0%,rgba(236,231,223,0) 100%)}
.cena.capa-pagina+.predio.grupo{margin-top:clamp(2.5rem,6vw,5rem)}
.predio.grupo+.integra{border-top:0;padding-block:clamp(2.5rem,6vw,4.5rem)}
@media (max-width:60rem){.predio.grupo::before,.predio.grupo::after{display:none}.predio.grupo{margin-top:0}}
.predio.grupo+.sangra{margin-top:0;padding-block:clamp(2rem,5vw,4rem)}
/* o último mural encosta direto no convite coral: sem fade no pé nem folga */
.predio.grupo:has(+.convite)::after{display:none}
.predio.grupo:has(+.convite){margin-bottom:0}
.predio.grupo+.convite{margin-top:0}
/* capa de Integrações: a sombra escura da esquerda também esmaece no pé, senão ela marca uma linha reta onde a imagem acaba */
.pagina:has(.predio.grupo) .cena.capa-pagina>img{display:block}
.pagina:has(.predio.grupo) .cena.capa-pagina::after{-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 100%);mask-image:linear-gradient(to bottom,#000 40%,transparent 100%)}
.pagina:has(.predio.grupo) .cena.capa-pagina::before{background:linear-gradient(to bottom,rgba(0,0,0,0) 35%,var(--fundo) 100%)}

/* ---- introdução de Integrações: frase curta no espaço entre a capa e o primeiro mural ---- */
.intro-int{padding-block:clamp(1rem,3vw,2.5rem) 0}
.intro-int .fala{max-width:46rem;display:grid;gap:1rem}
.intro-int h2{font-weight:800;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.04;letter-spacing:-.035em;color:#2A1B12}
.intro-int p{font-size:1.15rem;line-height:1.55;color:#4a3a30;max-width:42rem}
.intro-int+.predio.grupo{margin-top:clamp(1rem,3vw,2.5rem)}
/* index: a logo do cabeçalho e o texto da capa alinham no mesmo recuo da esquerda */
.topo .pg{max-width:none;padding-inline:var(--recuo-capa)}

/* ---- visita em primeira pessoa guiada pelo scroll: cena grande, mini-mapa, ficha e trilho ---- */
.visita{height:calc(100vh + 6*85vh);position:relative}
.visita-fixa{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.visita-pg{width:100%}
.cenario{position:relative;margin-inline:auto;width:min(100%,calc((100vh - 6rem)*16/9));aspect-ratio:16/9;overflow:hidden;border-radius:1.6rem;background:#1b1612;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.cenas{position:absolute;inset:0}
.cena-pp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform-origin:50% 55%;will-change:transform,opacity;transition:opacity .25s}
.cena-pp[data-r="recepcao"]{opacity:1}
.cenario::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;background:linear-gradient(to top,rgba(20,12,8,.55) 0%,rgba(20,12,8,0) 32%),linear-gradient(to bottom,rgba(20,12,8,.35) 0%,rgba(20,12,8,0) 24%)}
/* mini-mapa: a planta pequena com o "Você" e os anéis */
.mini{position:absolute;left:1.2rem;bottom:1.2rem;z-index:5;width:clamp(11rem,22%,17rem);border-radius:1rem;overflow:hidden;background:rgba(236,231,223,.9);box-shadow:0 12px 30px -12px rgba(0,0,0,.55);padding:.35rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
:root[data-luz="noite"] .mini{background:rgba(42,27,18,.8)}
.mini .planta-img{position:relative;max-width:none;aspect-ratio:2000/1417;transform:none;transition:none;transform-style:flat;border-radius:.7rem;overflow:hidden}
.mini .planta-img img{-webkit-mask-image:none;mask-image:none}
.mini .rotulo{display:none}
.mini .anel{transform:none;border-width:2px;cursor:pointer}
.mini .anel[aria-pressed="true"]{animation:pulso 2.4s ease-in-out infinite}
.mini .voce{transform:none}
.mini .voce span{font-size:.62rem;padding:.25rem .4rem}
.mini .voce i{width:9px;height:9px}
.cenario .ficha{top:1.2rem;right:1.2rem;z-index:5;width:min(19.5rem,30%)}
.trilho{position:absolute;right:1.2rem;bottom:1.2rem;z-index:5;margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.3rem;max-width:60%}
.trilho button{font:600 .78rem/1 var(--texto);color:#fff;background:rgba(255,255,255,.16);border:0;border-radius:99px;padding:.45rem .75rem;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:background-color .3s,color .3s}
.trilho button:hover{background:rgba(255,255,255,.32)}
.trilho button[aria-current="true"]{background:var(--coral);color:#fff;box-shadow:none}
.cenario .dica{position:absolute;right:1.2rem;bottom:3.4rem;z-index:5;padding:0;text-align:right;color:rgba(255,255,255,.75);font-size:.8rem}
@media (max-width:60rem),(prefers-reduced-motion:reduce){
  .visita{height:auto}.visita-fixa{position:static;height:auto;display:block}
  .cenario{width:auto;margin-inline:calc(var(--borda)*-1);border-radius:0;aspect-ratio:auto;overflow:visible;background:none;box-shadow:none}
  .cenas{position:relative;aspect-ratio:16/10;overflow:hidden}
  .cenario::after{display:none}
  .cena-pp{transition:opacity .5s}
  .mini{display:none}
  .cenario .ficha{position:static;width:auto}
  .visita-pg .ficha{margin:1rem var(--borda) 0}
  .trilho{position:static;justify-content:flex-start;max-width:none;padding:.8rem var(--borda) 0}
  .trilho button{color:var(--tinta);background:rgba(42,27,18,.08);box-shadow:none}
  :root[data-luz="noite"] .trilho button{color:var(--fundo);background:rgba(236,231,223,.14)}
  .trilho button[aria-current="true"],:root[data-luz="noite"] .trilho button[aria-current="true"]{background:var(--coral);color:#fff}
  .cenario .dica{position:static;text-align:left;color:var(--suave);padding:.5rem var(--borda) 0}
}