:root{
  --tinta:#0B1630;--marinho:#0E2A5C;--azul:#1F5FCC;--azul-2:#3B7BE6;--azul-3:#8DB8FF;--ceu:#DCEBFF;--ceu-2:#EEF5FF;
  --branco:#fff;--cinza:#6B7587;--cinza-2:#E3E8F0;--cinza-3:#AEB7C6;
  --fonte-titulo:"Archivo","Arial Narrow",Arial,sans-serif;--fonte:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);--lado:clamp(20px,5vw,72px);--topo-h:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.intro{overflow:hidden}
body{margin:0;font-family:var(--fonte);font-size:17px;line-height:1.6;color:var(--tinta);background:var(--tinta);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--fonte-titulo);margin:0;line-height:1.02;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
em{font-style:normal}
:focus-visible{outline:3px solid var(--azul-2);outline-offset:3px;border-radius:6px}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- tesoura (desenho único) ---------- */
.tes{display:block;width:100%;height:auto;overflow:visible}
.tes .ink{fill:#F2F5FA;stroke:#F2F5FA;stroke-width:2;stroke-linejoin:round;transition:fill .6s,stroke .6s}
.tes .blu{fill:var(--azul-2);stroke:var(--azul-2);stroke-width:2;stroke-linejoin:round}
.tes .anel{fill:none;stroke-width:10}
.tes .pino{fill:var(--tinta);stroke:#C9D3E3;stroke-width:3}

/* ---------- carregamento ---------- */
#carga{display:none}
.js.intro #carga{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#05080F}
#carga::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(31,95,204,.28),transparent 58%)}
.carga-centro{position:relative;text-align:center;width:min(86vw,640px)}
.marca-carga{position:relative;width:100%}
.lock{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,3.4vw,30px)}
.lock img{width:100%}
.lock .tes{width:36%}
.lock-fundo{opacity:.16}
.lock-cheio{position:absolute;inset:0;clip-path:inset(0 100% 0 0)}
.lock-cheio .tes{filter:drop-shadow(0 0 18px rgba(59,123,230,.45))}
.pct{margin-top:clamp(22px,4vw,38px);font-family:var(--fonte-titulo);font-stretch:112%;font-weight:800;font-size:clamp(30px,6vw,46px);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.pct small{font-size:.5em;margin-left:3px;color:var(--azul-3)}
#carga.sair{animation:cortina .8s var(--ease) forwards}
@keyframes cortina{to{clip-path:inset(0 0 100% 0)}}

/* ---------- topo ---------- */
.topo{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--topo-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--lado);transition:height .4s,color .4s}
.topo::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(11,22,48,.08);opacity:0;transition:opacity .4s,background .4s}
.topo.rolou{height:64px}
.topo.rolou::before{opacity:1}
.topo.sobre-escuro{color:#fff}
.topo.sobre-escuro::before{background:rgba(8,16,38,.74);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.marca{display:block;width:clamp(150px,18vw,210px);position:relative;z-index:3}
.marca img{width:100%}
.marca .logo-claro{display:none}
.topo.sobre-escuro .marca .logo-claro{display:block}
.topo.sobre-escuro .marca .logo-escuro{display:none}
.menu{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);font-weight:500;font-size:15px}
.menu a:not(.btn){text-decoration:none;position:relative;padding:6px 0}
.menu a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--azul-2);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.menu a:not(.btn):hover::after{transform:scaleX(1)}
.hamb{display:none;width:44px;height:44px;border:0;background:none;position:relative;cursor:pointer;color:inherit}
#progresso{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;background:linear-gradient(90deg,var(--azul),var(--azul-3));transform:scaleX(0);transform-origin:left}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s;font-family:var(--fonte)}
.btn-grande{min-height:58px;padding:0 30px;font-size:16px}
.btn-gigante{min-height:72px;padding:0 44px;font-size:clamp(17px,2vw,22px)}
.btn-azul{background:var(--azul);color:#fff;box-shadow:0 10px 26px -10px rgba(31,95,204,.7)}
.btn-azul:hover{background:#174FB0;transform:translateY(-2px)}
.btn-contorno-claro{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.btn-contorno-claro:hover{background:#fff;color:var(--tinta);transform:translateY(-2px)}
.btn-menu{min-height:42px;padding:0 20px}
/* chamada principal: branco com seta azul que avança */
.btn-cadeira{position:relative;overflow:hidden;background:linear-gradient(120deg,#fff 0%,var(--ceu) 100%);color:var(--tinta);font-weight:700;letter-spacing:.005em;box-shadow:0 18px 40px -14px rgba(141,184,255,.7),0 0 0 0 rgba(141,184,255,.5);padding-right:12px;gap:18px}
.btn-cadeira i{font-style:normal;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--azul);color:#fff;font-size:20px;transition:transform .4s var(--ease)}
.btn-gigante.btn-cadeira i{width:52px;height:52px;font-size:26px}
.btn-cadeira:hover{transform:translateY(-3px);box-shadow:0 24px 50px -14px rgba(141,184,255,.9)}
.btn-cadeira:hover i{transform:translateX(5px)}
.js.pronto .btn-cadeira{animation:pulso 2.8s 1.6s infinite}
@keyframes pulso{0%,70%,100%{box-shadow:0 18px 40px -14px rgba(141,184,255,.7),0 0 0 0 rgba(141,184,255,.5)}85%{box-shadow:0 18px 40px -14px rgba(141,184,255,.7),0 0 0 16px rgba(141,184,255,0)}}

/* ---------- abertura do site ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--topo-h) + 24px) var(--lado) 0;background:linear-gradient(180deg,#0E2A5C 0%,#0B1630 100%);color:#fff;overflow:hidden}
.hero-fundo{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 78% 62%,rgba(141,184,255,.30),transparent 70%),radial-gradient(40% 40% at 10% 0%,rgba(255,255,255,.10),transparent 70%)}
.hero-grade{position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(8px,1.6vw,22px);padding-bottom:clamp(20px,3vw,40px)}
.selo{font-family:var(--fonte-titulo);font-stretch:112%;font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--azul-3)}
.gigante{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(54px,11.2vw,200px);line-height:.86;letter-spacing:-.045em}
.gigante span{display:block}
.gigante .l2{display:flex;align-items:baseline;gap:.14em;flex-wrap:nowrap}
.gigante em{font-size:.5em;color:transparent;-webkit-text-stroke:2px var(--azul-3);letter-spacing:-.02em}
.gigante b{font-weight:900;background:linear-gradient(180deg,#fff 10%,var(--azul-3) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-base{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-top:clamp(14px,2.4vw,36px)}
.lead{max-width:470px;font-size:clamp(16px,1.4vw,19px);color:#C4D3EC}
.acoes{display:flex;flex-wrap:wrap;gap:14px}
/* perto da chamada, com as duas pontas inteiras à mostra */
.hero-tes{position:absolute;z-index:1;right:3vw;bottom:clamp(140px,17vh,200px);width:min(35vw,580px);pointer-events:none}
.js .hero-tes .tes-img{opacity:0;transform:translateY(24px) scale(.96);transition:opacity 1.1s .3s,transform 1.4s var(--ease) .3s}
.js.pronto .hero-tes .tes-img{opacity:1;transform:none}
.faixa{position:relative;z-index:2;margin:0 calc(var(--lado) * -1);padding:16px 0 22px;border-top:1px solid rgba(255,255,255,.12);overflow:hidden;white-space:nowrap}
.faixa-trilho{display:inline-flex;gap:0;animation:trilho 28s linear infinite}
.faixa span{font-family:var(--fonte-titulo);font-stretch:118%;font-weight:800;font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--azul-3);padding:0 28px;position:relative}
.faixa span::after{content:"";position:absolute;right:-3px;top:50%;width:6px;height:6px;margin-top:-3px;background:#fff;transform:rotate(45deg)}
@keyframes trilho{to{transform:translateX(-50%)}}

/* ---------- o ofício: cenário preso, tesoura corta ao rolar ---------- */
.hist{position:relative;height:420vh}
.hist-pin{position:sticky;top:0;height:100svh;overflow:hidden;color:#fff}
.hist-bg{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}
.b1{background:linear-gradient(180deg,#0A2150,#0E2A5C)}
.b2{background:linear-gradient(180deg,#0E2A5C 0%,#1F5FCC 100%)}
.b3{background:linear-gradient(180deg,#B9D5FF 0%,#fff 100%)}
.hist[data-fase="0"] .b1,.hist[data-fase="1"] .b2,.hist[data-fase="2"] .b3{opacity:1}
.hist[data-fase="2"] .hist-pin{color:var(--tinta)}
.hist[data-fase="2"] .tes .ink{fill:var(--tinta);stroke:var(--tinta)}
.hist-rotulo{position:absolute;z-index:3;left:var(--lado);top:calc(var(--topo-h) + 18px);font-family:var(--fonte-titulo);font-stretch:112%;font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;opacity:.8}
.hist-pal{position:absolute;z-index:1;left:0;right:0;top:20%;height:30%}
.palavra{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-stretch:120%;text-transform:uppercase;font-size:clamp(52px,15.5vw,270px);letter-spacing:-.05em;line-height:1;opacity:0;transform:translateY(40px) scale(.96);transition:opacity .6s var(--ease),transform .8s var(--ease);white-space:nowrap}
.palavra.on{opacity:1;transform:none}
.palavra[data-f="2"]{font-size:clamp(34px,9vw,160px)}
/* tesoura da foto, inteira e parada */
.tes-img{display:block;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 0 28px rgba(141,184,255,.34)) drop-shadow(0 28px 30px rgba(0,0,0,.4))}
.tes-hist{position:absolute;z-index:2;left:50%;top:51%;width:min(62vw,820px);transform:translate(-50%,-50%)}
.hist[data-fase="2"] .tes-img{filter:drop-shadow(0 26px 26px rgba(11,22,48,.3))}
.hist-leg{position:absolute;z-index:3;left:var(--lado);right:var(--lado);bottom:clamp(54px,9vh,96px);text-align:center;height:3.2em}
.leg{position:absolute;inset:0 0 auto 0;font-family:var(--fonte-titulo);font-weight:600;font-size:clamp(18px,2.2vw,26px);opacity:0;transform:translateY(16px);transition:opacity .5s,transform .6s var(--ease)}
.leg.on{opacity:1;transform:none}
.hist-ind{position:absolute;z-index:3;right:var(--lado);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.hist-ind li{width:6px;height:28px;border-radius:3px;background:currentColor;opacity:.25;transition:opacity .4s,height .4s var(--ease)}
.hist-ind li.on{opacity:1;height:44px}
.hist-dica{position:absolute;z-index:3;left:50%;bottom:24px;transform:translateX(-50%);font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}

/* ---------- seções ---------- */
[id]{scroll-margin-top:72px}
:root{--fade:clamp(160px,24vw,320px)}
.secao{position:relative;padding:clamp(80px,12vw,160px) var(--lado)}
/* Emendas em degradê: o fim de uma seção já vira a cor do começo da próxima, sem linha de corte. */
.fade-b{padding-bottom:calc(var(--fade) + clamp(10px,3vw,40px))}
.fade-b::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--fade);z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,22,48,0) 0%,rgba(11,22,48,.35) 45%,rgba(11,22,48,.82) 82%,#0B1630 100%)}
.reserva.fade-b::after{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(238,245,255,.5) 55%,#fff 100%)}
.emenda-final{height:clamp(200px,28vw,380px);background:linear-gradient(180deg,#fff 0%,#B9D5FF 28%,#0E2A5C 70%,#05080F 100%)}
#horarios{padding-top:calc(clamp(80px,12vw,160px) + 20px)}
.menu-zap{opacity:.9}
.conteudo{position:relative;z-index:1;max-width:1200px;margin:0 auto}
.centro{text-align:center}
.cabeca{max-width:720px}
.cabeca.centro{margin:0 auto clamp(40px,6vw,64px)}
.rotulo{font-family:var(--fonte-titulo);font-stretch:112%;font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--azul);margin-bottom:18px}
.secao h2{font-size:clamp(38px,6vw,84px);font-weight:900;font-stretch:108%;letter-spacing:-.04em}
.secao h2 em,.gigante-2 em{background:linear-gradient(100deg,var(--azul) 0%,var(--azul-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.texto{margin-top:22px;font-size:clamp(17px,1.4vw,19px);color:var(--cinza)}
.escura{background:linear-gradient(180deg,var(--tinta) 0%,#0A2150 100%);color:#fff;overflow:hidden}
.escura.fade-t{background:linear-gradient(180deg,var(--tinta) 0%,#0A2150 100%)}
.escura .rotulo{color:var(--azul-3)}
.escura .texto{color:#B9C6DC}
.escura h2 em{background:linear-gradient(100deg,#fff,var(--azul-3));-webkit-background-clip:text;background-clip:text}
.clara{background:linear-gradient(180deg,#fff 0%,var(--ceu-2) 100%);overflow:hidden}
.hex{position:absolute;inset:0;opacity:.55;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='194' viewBox='0 0 112 194'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1.5'%3E%3Cpath d='M56 2l54 31v62l-54 31L2 95V33z'/%3E%3Cpath d='M56 128v33m54-66l-54 31m0 0L2 95m54 66l54 31M2 161l54 31'/%3E%3C/g%3E%3C/svg%3E");mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
.selos{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.selos li{padding:8px 16px;border:1px solid rgba(11,22,48,.2);border-radius:999px;font-size:14px;color:var(--marinho)}


/* serviços */
.cartoes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cartao{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:30px 28px 28px;display:flex;flex-direction:column;gap:8px;transition:transform .5s var(--ease),background .5s,border-color .5s}
.cartao:hover{transform:translateY(-6px);background:rgba(255,255,255,.1);border-color:rgba(141,184,255,.6)}
.cartao .num{font-family:var(--fonte-titulo);font-weight:800;font-size:13px;color:var(--azul-3);letter-spacing:.14em}
.cartao h3{font-size:28px;font-weight:800;margin-top:10px;font-stretch:108%}
.cartao p{color:#B9C6DC;font-size:15.5px;flex:1}
.preco{font-family:var(--fonte-titulo);font-size:34px;font-weight:900;margin-top:14px;color:#fff;font-stretch:108%}
.preco small,.lista b small{font-family:var(--fonte);font-size:12px;font-weight:500;color:var(--cinza-3);margin-right:4px}
.cartao.destaque{background:linear-gradient(150deg,#fff,var(--ceu));color:var(--tinta);border-color:transparent}
.cartao.destaque p{color:#34405A}.cartao.destaque .preco{color:var(--tinta)}.cartao.destaque .num{color:var(--azul)}
.tabela{max-width:860px;margin:56px auto 0}
.tabela details{border-top:1px solid rgba(255,255,255,.16)}
.tabela details:last-of-type{border-bottom:1px solid rgba(255,255,255,.16)}
.tabela summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:22px 4px;font-family:var(--fonte-titulo);font-size:21px;font-weight:700}
.tabela summary::-webkit-details-marker{display:none}
.tabela summary::after{content:"+";font-size:30px;font-weight:400;color:var(--azul-3);transition:transform .35s var(--ease)}
.tabela details[open] summary::after{transform:rotate(45deg)}
.lista{padding:0 4px 20px}
.lista li{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.16);font-size:16px;color:#D6E1F2}
.lista li:last-child{border:0}
.lista li span em{display:block;font-size:13.5px;color:var(--cinza-3)}
.lista b{font-family:var(--fonte-titulo);white-space:nowrap;color:#fff}
.nota{font-size:13.5px;color:var(--cinza-3);margin:14px 4px 0}

/* como funciona */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,56px)}
.passo{position:relative;padding-top:clamp(70px,9vw,120px)}
.passo .n{position:absolute;top:0;left:-4px;font-family:var(--fonte-titulo);font-weight:900;font-stretch:120%;font-size:clamp(90px,12vw,170px);line-height:.8;color:transparent;-webkit-text-stroke:2px var(--azul);opacity:.5}
.passo h3{position:relative;font-size:26px;font-weight:800;font-stretch:108%}
.passo p{position:relative;margin-top:10px;color:var(--cinza)}

/* horários */
.dupla{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px);align-items:start}
.status{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.08);font-size:14.5px;color:#D6E1F2}
.status .ponto{width:9px;height:9px;border-radius:50%;background:var(--cinza-3)}
.status.aberto .ponto{background:#46D68C;box-shadow:0 0 0 5px rgba(70,214,140,.2)}
.horas{width:100%;margin-top:30px;border-collapse:collapse}
.horas th,.horas td{padding:15px 0;text-align:left;border-bottom:1px solid rgba(255,255,255,.12);font-weight:400}
.horas th{font-family:var(--fonte-titulo);font-weight:600;width:34%}
.horas td{color:#C4D1E6}
.horas tr.hoje th,.horas tr.hoje td{color:#fff;font-weight:600}
.horas tr.hoje th::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--azul-2);margin-right:10px}
.local{padding:clamp(26px,3vw,40px);border:1px solid rgba(255,255,255,.14);border-radius:26px;background:rgba(255,255,255,.04);margin-top:52px}
.local address{font-style:normal;font-family:var(--fonte-titulo);font-size:clamp(22px,2.4vw,28px);font-weight:600;line-height:1.3}
.local .pag{margin-top:16px;color:#B9C6DC;font-size:15px}
.local .acoes{margin-top:26px}

/* fechamento */
.reserva{position:relative;padding:clamp(100px,15vw,200px) var(--lado);background:linear-gradient(180deg,#0A2150 0%,#1F5FCC 130%);color:#fff;text-align:center;overflow:hidden}
.reserva .rotulo{color:var(--azul-3)}
.gigante-2{font-weight:900;font-stretch:120%;text-transform:uppercase;font-size:clamp(48px,12.5vw,210px);line-height:.9;letter-spacing:-.05em}
.gigante-2 em{background:linear-gradient(180deg,#fff,var(--azul-3));-webkit-background-clip:text;background-clip:text}
.reserva .texto{color:#DCE8FF;max-width:540px;margin:clamp(20px,3vw,34px) auto 0}
.reserva .acoes{justify-content:center;margin-top:clamp(30px,4vw,48px)}
.mini-info{margin-top:30px;font-size:14px;color:#B9D0F5;letter-spacing:.04em}
.rodape{background:#05080F;color:#9FB1CC;text-align:center;padding:56px var(--lado) 44px}
.rodape img{width:min(240px,60%);margin:0 auto 20px}
.rodape .mini{font-size:13px;margin-top:10px;opacity:.7}
.rodape .mini a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.zap{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:45;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -8px rgba(0,0,0,.45);transform:scale(0);transition:transform .5s var(--ease)}
.zap.visivel{transform:scale(1)}
.zap:hover{transform:scale(1.08)}

/* entrada ao rolar */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--atraso,0s)}
.js .rv.vis{opacity:1;transform:none}

/* ---------- celular ---------- */
@media (max-width:900px){
  :root{--topo-h:68px}
  .hamb{display:block;z-index:3}
  .menu{position:fixed;inset:0;z-index:2;flex-direction:column;justify-content:center;gap:26px;font-size:26px;font-family:var(--fonte-titulo);font-weight:700;background:var(--tinta);color:#fff;transform:translateY(-100%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s}
  .menu.aberto{transform:none;visibility:visible;transition:transform .6s var(--ease)}
  .menu .btn-menu{font-size:17px;min-height:52px;margin-top:8px}
  .menu a:not(.btn)::after{display:none}
  .topo:has(.menu.aberto){color:#fff}
  .topo:has(.menu.aberto) .logo-escuro{display:none}
  .topo:has(.menu.aberto) .logo-claro{display:block}
  .hero{justify-content:flex-start;padding-top:calc(var(--topo-h) + 28px)}
  .hero-grade{padding-bottom:0}
  .hero-tes{position:relative;right:auto;bottom:auto;width:94%;margin:18px auto 0;order:2}
  .hero-base{flex-direction:column;align-items:stretch;margin-top:12px}
  .hero-base .acoes .btn{flex:1 1 100%}
  .faixa{margin-top:auto;order:3}
  .gigante em{-webkit-text-stroke-width:1.5px}
  .cartoes{grid-template-columns:1fr 1fr}
  .passos{grid-template-columns:1fr;gap:34px}
  .dupla{grid-template-columns:1fr}
  .local{margin-top:12px}
  .hist-ind{display:none}
  .tes-hist{width:92vw;top:52%}
  .hist-pal{top:17%}
}
@media (max-width:560px){
  body{font-size:16px}
  .cartoes{grid-template-columns:1fr}
  .acoes .btn{flex:1 1 100%}
  .lista li{font-size:15px}
  .btn-gigante{padding:0 28px;width:100%}
  .hist{height:380vh}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
  .faixa-trilho{animation:none}
}

/* ---------- botão do menu: tesoura que abre ao tocar ---------- */
.hamb svg{display:block;margin:auto;overflow:visible}
.hamb .ib{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;transform-box:view-box;transform-origin:14px 16px;transition:transform .5s var(--ease)}
.hamb .ip{fill:currentColor}
.hamb .la{transform:rotate(-1.5deg)}
.hamb .lb{transform:rotate(1.5deg)}
.hamb[aria-expanded="true"] .la{transform:rotate(-26deg)}
.hamb[aria-expanded="true"] .lb{transform:rotate(26deg)}

/* ---------- menu: grupos ---------- */
.menu-links,.menu-acoes{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}

/* ---------- carrossel do espaço ---------- */
.carrossel{position:relative;margin-top:clamp(36px,5vw,64px)}
.car-pista{position:relative;display:flex;gap:clamp(16px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;padding:8px calc(50% - min(39vw,200px)) 30px;margin:0 calc(var(--lado) * -1);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car-pista::-webkit-scrollbar{display:none}
.car-item{flex:0 0 min(78vw,400px);margin:0;scroll-snap-align:center}
.car-item img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:999px 999px 28px 28px;background:var(--marinho);box-shadow:0 40px 60px -34px rgba(11,22,48,.65);transition:transform .8s var(--ease)}
.car-item:hover img{transform:scale(1.015)}
.car-seta{position:absolute;top:44%;z-index:3;width:58px;height:58px;border-radius:50%;border:0;display:grid;place-items:center;background:#fff;color:var(--tinta);cursor:pointer;box-shadow:0 14px 30px -10px rgba(11,22,48,.55);transition:transform .3s var(--ease),opacity .3s,background .3s,color .3s}
.car-seta:hover{background:var(--azul);color:#fff;transform:scale(1.07)}
.car-ant{left:clamp(0px,4vw,70px)}
.car-prox{right:clamp(0px,4vw,70px)}
.car-seta[disabled]{opacity:0;pointer-events:none}
.car-pontos{display:flex;justify-content:center;gap:10px;margin-top:4px}
.car-pontos button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(11,22,48,.22);cursor:pointer;transition:width .35s var(--ease),background .3s}
.car-pontos .on button{width:30px;border-radius:6px;background:var(--azul)}

/* ---------- computador: menu central e maior; tesoura da cena menor, abaixo das palavras ---------- */
@media (min-width:901px){
  :root{--topo-h:90px}
  .topo{display:grid;grid-template-columns:1fr auto 1fr}
  .topo.rolou{height:74px}
  .marca{width:clamp(190px,16vw,250px);justify-self:start}
  .menu{display:contents}
  .menu-links{justify-self:center;gap:clamp(28px,3.2vw,56px);font-size:17.5px;font-weight:500}
  .menu-acoes{justify-self:end;gap:28px;font-size:16.5px;font-weight:500}
  .menu-acoes .btn-menu{min-height:52px;padding:0 30px;font-size:16px}
  .hist-pal{top:13%;height:30%}
  .tes-hist{top:65%;width:min(32vw,45vh,440px)}
  .hist-leg{bottom:clamp(40px,7vh,80px)}
}
/* celular: o menu aberto empilha os dois grupos */
@media (max-width:900px){
  .menu-links,.menu-acoes{flex-direction:column;gap:26px}
  .hamb{width:48px;height:48px}
  .car-seta{width:50px;height:50px;top:42%}
  .car-ant{left:6px}.car-prox{right:6px}
}
/* ---------- primeira página com foto: o fundo é a cor da própria imagem ---------- */
.hero{--hero-bg:#000814;--hero-fim:#0A2150;background:var(--hero-bg)}
.hero-img{position:absolute;inset:0;z-index:0;margin:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:72% 35%}
/* escurece a esquerda (texto) e as bordas, e termina na cor da página de baixo, sem linha de corte */
.hero-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--hero-bg) 0%,rgba(0,8,20,.88) 22%,rgba(0,8,20,.4) 44%,rgba(0,8,20,0) 62%),linear-gradient(180deg,rgba(0,8,20,.72) 0%,rgba(0,8,20,0) 20%,rgba(0,8,20,0) 48%,rgba(0,8,20,.72) 74%,rgba(7,24,64,.95) 90%,var(--hero-fim) 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(120px,18vh,220px);z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,33,80,0),var(--hero-fim))}
.hero .gigante{font-size:clamp(48px,9.4vw,170px)}
.hero-base{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:26px}
.hero .lead{color:#D5E1F5;text-shadow:0 1px 18px rgba(0,8,20,.9)}
.hero .faixa{border-top:0;background:none}
@media (max-width:900px){
  /* foto em retrato na tela toda: título e texto no alto (parte escura), botões embaixo (toalha escurecida), rosto livre no meio */
  .hero{justify-content:flex-start;padding-top:calc(var(--topo-h) + 14px);padding-bottom:0}
  .hero-img img{object-position:50% 50%}
  .hero-img::after{background:linear-gradient(180deg,rgba(0,8,20,.78) 0%,rgba(0,8,20,.42) 22%,rgba(0,8,20,0) 38%,rgba(0,8,20,0) 66%,rgba(0,8,20,.86) 80%,rgba(7,24,64,.96) 92%,var(--hero-fim) 100%)}
  .hero-grade{flex:1;padding-bottom:6px}
  .hero .gigante{font-size:clamp(46px,13.4vw,84px)}
  .hero-base{flex:1;justify-content:space-between;gap:16px;margin-top:6px}
  .hero .lead{max-width:300px;font-size:15.5px}
  .hero-base .acoes{width:100%;margin-top:auto}
  .hero .faixa{padding-top:14px}
}
/* ---------- faixa grande (continuação do carrossel de palavras) ---------- */
.faixa-grande{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(4px,.8vw,12px);margin:0 calc(var(--lado) * -1) clamp(36px,4.6vw,76px);padding-top:clamp(14px,2vw,30px);overflow:hidden}
.fg-linha{overflow:hidden;white-space:nowrap}
.fg-trilho{display:inline-flex;animation:trilho 48s linear infinite}
.fg-linha.inversa .fg-trilho{animation-direction:reverse;animation-duration:56s}
.fg-trilho span{font-family:var(--fonte-titulo);font-weight:900;font-stretch:120%;text-transform:uppercase;font-size:clamp(46px,7vw,124px);line-height:1.04;letter-spacing:-.03em;padding:0 .32em;color:transparent;-webkit-text-stroke:2px rgba(141,184,255,.5)}
.fg-linha.inversa .fg-trilho span{color:rgba(141,184,255,.16);-webkit-text-stroke:0}
@media (prefers-reduced-motion:reduce){.fg-trilho{animation:none}}

/* ---------- carrossel dentro de um celular com template de rede social ---------- */
@media (min-width:901px){
  /* barra do topo: tudo junto e centralizado */
  .menu{display:flex;align-items:center;justify-self:center;gap:clamp(30px,3.2vw,56px)}
  .menu-links{gap:clamp(26px,2.6vw,46px)}
  .menu-acoes{gap:clamp(20px,2vw,32px)}
  /* a faixa grande ocupa o espaço entre o topo e "A cadeira é sua" */
  .reserva{padding-top:0}
  /* espaço: texto à esquerda, celular à direita */
  .espaco-grade{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(48px,8vw,140px);align-items:center}
  .espaco-grade .cabeca{max-width:560px}
  .aparelho{margin:0 auto}
}
/* mockup do celular: em todas as telas */
.aparelho{display:block;position:relative;width:min(372px,100%);margin:36px auto 0;padding:11px;border-radius:52px;background:linear-gradient(150deg,#222c44,#05080f 60%);box-shadow:0 60px 90px -34px rgba(11,22,48,.75),0 0 0 1.5px #313d5a inset}
.ap-notch{display:block;position:absolute;z-index:6;top:21px;left:50%;width:92px;height:27px;margin-left:-46px;border-radius:16px;background:#05080f}
.ig{display:block;background:#fff;color:#111;border-radius:42px;overflow:hidden}
.ig-status{display:flex;justify-content:space-between;align-items:center;padding:17px 30px 4px;font-size:14px;font-weight:600}
.ig-bat{width:24px;height:11px;border-radius:3px;border:1.6px solid #111;position:relative}
.ig-bat::after{content:"";position:absolute;inset:1.5px 5px 1.5px 1.5px;background:#111;border-radius:1px}
.ig-barra{display:block;text-align:center;font-weight:700;font-size:15.5px;padding:8px 0 10px;border-bottom:1px solid #efefef}
.ig-cab{display:flex;align-items:center;gap:10px;padding:10px 14px}
.ig-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;padding:2px;background:#fff;box-shadow:0 0 0 2px var(--azul)}
.ig-nome{display:flex;flex-direction:column;line-height:1.25}
.ig-nome strong{font-size:14px}
.ig-nome small{font-size:12px;color:#737373}
.ig-mais{margin-left:auto;font-size:20px;letter-spacing:1px;color:#262626;line-height:1}
.ig .carrossel{margin:0}
.ig .car-pista{gap:0;padding:0;margin:0;scroll-padding:0}
.ig .car-item{flex:0 0 100%;scroll-snap-align:start}
.ig .car-item img{aspect-ratio:4/5;border-radius:0;box-shadow:none;transition:none}
.ig .car-item:hover img{transform:none}
.ig .car-seta{width:34px;height:34px;top:calc(50% - 17px);background:rgba(255,255,255,.92);box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.ig .car-seta svg{width:18px;height:18px}
.ig .car-ant{left:8px}.ig .car-prox{right:8px}
.ig .car-pontos{position:absolute;left:0;right:0;bottom:10px;margin:0;gap:6px}
.ig .car-pontos button{width:7px;height:7px;background:rgba(255,255,255,.55)}
.ig .car-pontos .on button{width:7px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.ig-acoes{display:flex;align-items:center;gap:16px;padding:12px 14px 4px;color:#262626}
.ig-salvar{margin-left:auto;display:flex}
.ig-leg{display:block;padding:4px 14px 12px;font-size:13.5px;line-height:1.4}
.ig-tab{display:flex;justify-content:space-around;padding:12px 10px 18px;border-top:1px solid #efefef;color:#262626}
/* telas de computador menores: menu em uma linha só, sem quebrar */
@media (min-width:901px){
  .menu a{white-space:nowrap}
}
@media (min-width:901px) and (max-width:1279px){
  .topo{grid-template-columns:auto 1fr}
  .marca{width:clamp(150px,15vw,190px)}
  .menu{gap:clamp(14px,1.8vw,26px)}
  .menu-links{gap:clamp(12px,1.8vw,26px);font-size:15px}
  .menu-acoes{gap:clamp(12px,1.6vw,22px);font-size:15px}
  .menu-acoes .btn-menu{min-height:46px;padding:0 20px;font-size:15px}
}

/* ---------- objetos da cena "O ofício": máquina, tesoura e navalha trocando com as palavras ---------- */
.tes-hist{aspect-ratio:1.7}
.tes-hist .obj{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.86) rotate(-6deg);transition:opacity .55s var(--ease),transform .9s var(--ease);filter:drop-shadow(0 0 28px rgba(141,184,255,.34)) drop-shadow(0 26px 28px rgba(0,0,0,.4))}
.tes-hist .obj.on{opacity:1;transform:none}
.tes-hist .obj-maquina.on{transform:scale(1.22)}
.tes-hist .obj-navalha.on{transform:scale(1.05)}
.hist[data-fase="2"] .tes-hist .obj{filter:drop-shadow(0 26px 24px rgba(11,22,48,.35))}
@media (min-width:901px){.tes-hist{width:min(36vw,58vh,540px)}}
/* sem a faixa pequena: o topo termina nos botões, com folga para o degradê */
.hero-grade{padding-bottom:clamp(76px,9vw,130px)}
.reserva{padding-top:0}
@media (max-width:900px){.hero-grade{padding-bottom:56px}.faixa-grande{margin-bottom:34px}}
/* ---------- ajustes: máquina inteira no quadro e coluna do celular com largura fixa ---------- */
.tes-hist .obj-maquina.on,.tes-hist .obj-navalha.on{transform:none}
@media (min-width:901px){.espaco-grade{grid-template-columns:minmax(0,1fr) 372px}}
@media (max-width:900px){.tes-hist{width:88vw}}

.ig-avatar{width:40px;height:40px;padding:0;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 2px var(--azul)}
.ig-cab{gap:11px}

/* ---------- nova ordem: topo (escuro) > espaço (claro) > "A cadeira é sua" (escuro) > horários ---------- */
:root{--fade2:clamp(130px,17vw,240px)}
.fade-t{padding-top:calc(var(--fade2) + clamp(24px,4vw,64px))}
.fade-t::before{content:"";position:absolute;left:0;right:0;top:-1px;height:var(--fade2);z-index:0;pointer-events:none;background:linear-gradient(180deg,#0A2150 0%,rgba(10,33,80,.86) 24%,rgba(10,33,80,.4) 58%,rgba(10,33,80,0) 100%)}
.zona-topo{position:absolute;left:0;right:0;top:0;height:calc(var(--fade2) * .55);pointer-events:none}
/* "A cadeira é sua" agora desce para os horários, que são escuros */
.reserva.fade-b::after{background:linear-gradient(180deg,rgba(11,22,48,0) 0%,rgba(11,22,48,.45) 50%,#0B1630 100%)}
.reserva{background:linear-gradient(180deg,#0A2150 0%,#123C8C 55%,#1A51AF 100%)}
/* ---------- emenda "Um lugar feito para você" > "A cadeira é sua": mistura as cores das duas páginas ---------- */
:root{--fade3:clamp(260px,34vw,500px)}
#espaco.fade-b{padding-bottom:calc(var(--fade3) * .6 + 24px)}
#espaco.fade-b::after{height:var(--fade3);background:linear-gradient(180deg,rgba(238,245,255,0) 0%,#E3EEFF 14%,#BBD3FA 30%,#7FA9EE 46%,#3F7BDD 62%,#1F5FCC 72%,#14459E 84%,#0C2A66 93%,#0A2150 100%)}
.zona-base{position:absolute;left:0;right:0;bottom:0;height:calc(var(--fade3) * .42);pointer-events:none}
/* a "A cadeira é sua" começa exatamente na cor onde a emenda termina */
.reserva{background:linear-gradient(180deg,#0A2150 0%,#123C8C 55%,#1A51AF 100%)}
#espaco.fade-b::after{background:linear-gradient(180deg,rgba(238,245,255,0) 0%,#E8F1FF 11%,#C6DBFB 26%,#94B8F1 41%,#639AE8 54%,#3F7BDD 65%,#2C66C4 75%,#1F52A4 84%,#153C84 91%,#0F2C69 96%,#0A2150 100%)}