@font-face{font-family:Zodiak;src:url(../assets/zodiak-300.woff2) format('woff2');font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:Synonym;src:url(../assets/synonym-400.woff2) format('woff2');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;--night:#030910;--ink:#f2f6f6;--muted:#c0d1dc;--line:#c0d1dc33;--focus:#c2e9ff;--gut:clamp(16px,6vw,96px);--max:1280px;--ease:cubic-bezier(.16,1,.3,1);
 --mundo:#030910;--marca:#2A7DE1;--marca-texto:#2A7DE1;--ano-apagado:#2264b4}
.tema-gt{--mundo:#06101f;--marca:#2A7DE1;--marca-texto:#2A7DE1;--ano-apagado:#2264b4}          /* 4,65:1 e 3,22:1 */
.tema-vida{--mundo:#120e0d;--marca:#E74010;--marca-texto:#E74010;--ano-apagado:#b93414}        /* 4,70:1 e 3,26:1 (fundo neutro #120e0d, acabamento T12) */
.tema-renylab{--mundo:#0b0d10;--marca:#484595;--marca-texto:#7875b1;--ano-apagado:#605e90}     /* a logo da 2,37:1: texto e traco usam #7875b1, 4,61:1; ano 3,24:1 */
.tema-quokka{--mundo:#04130f;--marca:#3EB592;--marca-texto:#3EB592;--ano-apagado:#26715b}      /* 7,45:1 e 3,25:1 */
.tema-imaes{--mundo:#031416;--marca:#1EA89C;--marca-texto:#1EA89C;--ano-apagado:#14716a}       /* 6,40:1 e 3,23:1 */
*{box-sizing:border-box}
html{background:var(--mundo);scrollbar-color:#436275 var(--mundo);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mundo);color:var(--ink);font:400 17px/1.6 Synonym,system-ui,sans-serif;overflow-x:clip}
::selection{background:#b9daeb;color:#0a1722}
a{color:inherit;text-underline-offset:.3em}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:4px;box-shadow:0 0 0 6px #030910;border-radius:6px}
img{display:block;max-width:100%}
h1,h2,h3{font-family:Zodiak,Georgia,serif;font-weight:300;margin:0;text-wrap:balance}
p{margin:0}
sup{font-size:.45em;vertical-align:.9em;line-height:0}
.pular{position:fixed;left:16px;top:-100px;z-index:80;background:var(--night);color:var(--ink);padding:12px 16px}
.pular:focus{top:16px}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* cabecalho das 4 (bloco da area cabecalho-menu): so o que esta area precisa. A marca do grupo deixa de ser texto espacado (contrato 'marca') */
.topo{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(12px,2.4vh,24px) var(--gut);pointer-events:none}
.topo>*{pointer-events:auto}
.topo__marca{font:300 20px/1 Zodiak,serif;letter-spacing:0;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;text-shadow:0 2px 10px #030910cc}
.fim-a-vista header [data-voltar],.fim-a-vista header [data-volta-cidade],.fim-a-vista .topo [data-voltar],.fim-a-vista .menu__voltar{visibility:hidden}

.botao{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 20px;border:1px solid #f2f6f666;border-radius:999px;font:400 15px/1 Synonym,sans-serif;text-decoration:none;color:var(--ink);background:#030910d9;transition:background-color .2s,border-color .2s,color .2s}
.botao svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
.botao:hover{background:var(--ink);color:var(--night);border-color:var(--ink)}
.botao--cheio{background:var(--ink);color:var(--night);border-color:var(--ink)}
.botao--cheio:hover{background:transparent;color:var(--ink)}

/* ── HERO: palco preso enquanto a rolagem conduz a cena da empresa (parallax em empresa.js) */
.hero{position:relative;height:200svh;outline:none}
.hero__palco{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;isolation:isolate;container-type:size;background:var(--mundo)}
.hero__cena{position:absolute;inset:0;contain:paint}
.camada{position:absolute;pointer-events:none;user-select:none;transform-origin:50% 50%}
.hero__quadro{position:absolute;--qw:max(100cqw,calc(100cqh * 2560 / 1429));width:var(--qw);height:calc(var(--qw) * 1429 / 2560);left:calc(50% - var(--qw) / 2);top:calc(50% - var(--qw) * 1429 / 5120);will-change:transform;transform-origin:50% 60%}
.hero__quadro .camada--fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
/* o texto fica sobre a cor do mundo (canto inferior esquerdo escurecido): 4,5:1 garantido pela opacidade do veu, nao pela imagem */
.hero__cena::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,var(--mundo) 2%,color-mix(in srgb,var(--mundo) 70%,transparent) 26%,transparent 52%),linear-gradient(90deg,color-mix(in srgb,var(--mundo) 92%,transparent) 10%,color-mix(in srgb,var(--mundo) 62%,transparent) 36%,transparent 64%)}
.hero__texto{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:clamp(88px,15vh,160px);max-width:min(940px,100%)}
.hero__logo{display:block;height:clamp(40px,5.6vh,60px);width:auto;max-width:100%;margin-bottom:clamp(18px,3vh,30px)}
.hero__frase{display:block}
.tema-renylab .hero__logo{height:clamp(48px,6.8vh,74px)}
.hero__lede{max-width:52ch}
.hero h1{font-size:clamp(36px,4.6vw,74px);line-height:1.06;letter-spacing:-.03em}
.hero h1::after{content:"";display:block;width:52px;height:2px;margin-top:clamp(16px,2.4vh,24px);background:var(--marca-texto);transform-origin:left}
.hero__lede{margin-top:clamp(16px,2.4vh,26px);max-width:52ch;font-size:clamp(16px,1.25vw,19px);color:var(--muted);text-wrap:pretty}
.hero--simples{height:auto}
.hero--simples .hero__palco{position:relative;height:auto;min-height:0;container-type:normal;padding:clamp(96px,16vh,180px) var(--gut) clamp(96px,14vh,160px)}
.hero--simples .hero__texto{position:static;max-width:780px}
.hero--simples .pausa{position:static;margin-top:clamp(28px,4vh,40px)}
/* pausa do movimento (contrato 'movimento'): botao escuro e opaco no canto do palco, onde a cena se mexe */
.pausa{position:absolute;z-index:3;right:var(--gut);bottom:clamp(24px,5vh,48px);min-height:44px;padding:0 18px;border:1px solid #f2f6f680;border-radius:999px;background:#030910e6;color:var(--ink);font:400 14px/1 Synonym,sans-serif;cursor:pointer}
.pausa:hover{border-color:var(--ink)}
.pausa[aria-pressed=true]::before{content:"";display:inline-block;width:0;height:0;margin-right:10px;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;vertical-align:-1px}

/* camadas da cena: Ken Burns lento (compositor) */
@keyframes j-kb{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.075) translate3d(-1.2%,-.8%,0)}}
.hero__kb{position:absolute;inset:0;transform-origin:50% 68%;animation:j-kb 26s ease-in-out infinite alternate}
.hero__kb>.camada--video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s var(--ease);-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}
.hero--video .camada--video{opacity:1}
/* VIDA: liquido em tempo real (canvas WebGL so na caixa do liquido, recortado pela mascara medida) */
.hero__kb>.liquido{position:absolute;pointer-events:none;opacity:0;-webkit-mask-image:url(../assets/empresas/vida/mascara-liquido.png);mask-image:url(../assets/empresas/vida/mascara-liquido.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hero__kb>.liquido.ligado{opacity:1}
[data-caixa]{position:absolute;pointer-events:none}
.reny-colonia{border-radius:50%;opacity:0;transform:scale(.55);will-change:transform,opacity;animation:reny-cresce 5.4s var(--ease) infinite}
.reny-b{background:radial-gradient(circle,#fbf8f1d9 0,#efe8dc80 42%,transparent 70%)}
.reny-s{background:radial-gradient(circle,#b0161bd9 0,#7d0a0e80 45%,transparent 70%)}
.reny-c{background:radial-gradient(circle,#8a5530d9 0,#5a321a80 45%,transparent 70%)}
.reny-g2{animation-delay:1.8s}.reny-g3{animation-delay:3.6s}
@keyframes reny-cresce{0%{opacity:0;transform:scale(.55)}35%{opacity:.7;transform:scale(1.04)}70%,100%{opacity:0;transform:scale(1.15)}}
/* Imaes: planos verde-agua e uma varredura de luz (a identidade dela) */
.imaes-varredura{position:absolute;inset:-20% -40%;background:linear-gradient(105deg,transparent 40%,#bffcf322 48%,#e6fffb40 50%,#bffcf322 52%,transparent 60%);will-change:transform;animation:imaes-varre 7s ease-in-out infinite}
@keyframes imaes-varre{0%{transform:translate3d(-35%,0,0)}100%{transform:translate3d(35%,0,0)}}
.imaes-forma{position:absolute;border-radius:42% 58% 55% 45%/48% 42% 58% 52%;background:radial-gradient(circle at 30% 30%,#7ff0e455,#1aa79d22 60%,transparent 72%);will-change:transform;animation:imaes-flutua 14s ease-in-out infinite alternate}
.imaes-forma--1{left:52%;top:12%;width:26%;height:46%}
.imaes-forma--2{left:70%;top:48%;width:20%;height:36%;animation-duration:18s;animation-delay:-6s}
.imaes-forma--3{left:36%;top:58%;width:18%;height:30%;animation-duration:11s;animation-delay:-3s}
@keyframes imaes-flutua{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}100%{transform:translate3d(-6%,8%,0) rotate(24deg) scale(1.12)}}
.fora-da-tela .hero__kb,.fora-da-tela .reny-colonia,.fora-da-tela .imaes-varredura,.fora-da-tela .imaes-forma{animation-play-state:paused}

/* entrada do topo: logo, titulo palavra por palavra, traco, texto */
@keyframes j-subir{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
@keyframes j-palavra{from{opacity:0;transform:translate3d(0,.55em,0)}to{opacity:1;transform:none}}
@keyframes j-linha{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes j-aparecer{from{opacity:0}to{opacity:1}}
.hero__frase .palavra{display:inline-block;white-space:pre}
.anima .hero__logo{animation:j-subir 1s var(--ease) .2s both}
.anima .hero__frase:not(.dividida){animation:j-aparecer .6s 1.1s both}
.anima .hero__frase .palavra{animation:j-palavra .95s var(--ease) calc(.5s + var(--i) * 90ms) both}
.anima .hero h1::after{animation:j-linha 1.1s var(--ease) 1.25s both}
.anima .hero__lede{animation:j-subir 1s var(--ease) 1.4s both}

.rotulo{font:300 clamp(26px,2.4vw,36px)/1.15 Zodiak,Georgia,serif;letter-spacing:-.015em;color:var(--ink)}
.js .revelar{opacity:0;translate:0 34px;transition:opacity .9s var(--ease),translate 1s var(--ease);transition-delay:calc(var(--i,0) * 90ms);will-change:opacity,translate}
.js .revelar.visto{opacity:1;translate:none}

/* atuacao: uma frase grande no centro, sem coluna de titulo ao lado */
.atuacao{max-width:1120px;margin:0 auto;padding:clamp(96px,16vh,180px) var(--gut);text-align:center}
.atuacao .rotulo{font-size:clamp(18px,1.4vw,21px);font-family:Synonym,system-ui,sans-serif;font-weight:400;color:var(--muted);letter-spacing:0}
.atuacao__texto{margin:clamp(20px,3vh,32px) auto 0;max-width:26ch;font:300 clamp(30px,3.6vw,56px)/1.18 Zodiak,Georgia,serif;letter-spacing:-.025em;text-wrap:balance}
.atuacao__texto em{font-style:normal;color:var(--marca-texto)}

/* historia: titulo em cima, linha do tempo larga (anos grandes a esquerda); desenhada pela rolagem */
.historia{max-width:var(--max);margin:0 auto;padding:clamp(72px,12vh,140px) var(--gut);border-top:1px solid var(--line)}
.historia .rotulo{margin-bottom:clamp(36px,6vh,64px)}
.linha-caixa{position:relative;max-width:920px}
.linha__svg{position:absolute;left:0;top:0;width:12px;height:100%;overflow:visible}
.linha__trilho,.linha__traco{fill:none}
.linha__trilho{stroke:var(--line);stroke-width:1}
.linha__traco{stroke:var(--marca-texto);stroke-width:2}
.linha{list-style:none;margin:0;padding:0 0 0 clamp(28px,4vw,48px);position:relative}
.linha li{position:relative;padding:0 0 clamp(36px,6vh,56px);display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:6px clamp(16px,3vw,40px);align-items:baseline}
.linha li:last-child{padding-bottom:0}
.linha li::before{content:"";position:absolute;left:calc(-1 * clamp(28px,4vw,48px));top:.62em;width:11px;height:11px;border-radius:50%;background:var(--mundo);border:1px solid var(--marca-texto);transition:background-color .4s var(--ease)}
.linha li.aceso::before{background:var(--marca-texto)}
.linha time{font:300 clamp(28px,2.4vw,38px)/1 Zodiak,serif;color:var(--marca-texto);font-variant-numeric:lining-nums;transition:color .5s var(--ease)}
.anima .linha li:not(.aceso) time{color:var(--ano-apagado)}
.linha p{max-width:56ch;text-wrap:pretty}
.historia--um .linha__svg,.historia--um .linha li::before{display:none}
.historia--um .linha{padding-left:0}

.numeros{padding:clamp(72px,12vh,140px) 0;border-top:1px solid var(--line);overflow:hidden}
.numeros .rotulo{max-width:var(--max);margin:0 auto clamp(32px,5vh,56px);padding:0 var(--gut)}
.numeros__janela{overflow:hidden}
.numeros__trilho{list-style:none;margin:0;padding:0 var(--gut);display:flex;gap:clamp(48px,8vw,140px);width:max-content;will-change:transform}
.numeros__item{display:flex;flex-direction:column;gap:12px;padding-left:clamp(20px,2vw,28px);border-left:2px solid var(--marca-texto);flex:none}
.numero{display:block;font:300 clamp(56px,7vw,112px)/.95 Zodiak,serif;letter-spacing:-.035em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.numero__pre{font-size:.32em;letter-spacing:0;color:var(--muted);vertical-align:.9em}
.numero__suf{font-size:.4em;letter-spacing:0;margin-left:.12em;color:var(--marca-texto)}
.numero--texto{font-size:clamp(40px,4.6vw,72px)}
.numeros__leg{color:var(--muted);max-width:28ch}
.parado .numeros__trilho,[data-movimento=pausado] .numeros__trilho{transform:none!important;flex-wrap:wrap;width:auto;max-width:var(--max);margin:0 auto;row-gap:48px}

.linhas{max-width:var(--max);margin:0 auto;padding:clamp(72px,12vh,140px) var(--gut);border-top:1px solid var(--line)}
.linhas__titulo{font-size:clamp(34px,4vw,60px);line-height:1.06;letter-spacing:-.03em;max-width:18ch}
.linhas__lista{list-style:none;margin:clamp(36px,6vh,64px) 0 0;padding:0}
.produto{display:grid;grid-template-columns:minmax(150px,2fr) 5fr minmax(220px,4fr);gap:8px clamp(20px,3vw,48px);align-items:baseline;padding:clamp(22px,3.4vh,34px) 0;border-top:1px solid var(--line)}
.produto:last-child{border-bottom:1px solid var(--line)}
.produto__cat{color:var(--marca-texto);font-size:15px}
.produto__nome{font-size:clamp(30px,3.4vw,52px);line-height:1.04;letter-spacing:-.02em;overflow-wrap:anywhere}
.produto__nome .inteiro{white-space:nowrap}
.produto__spec{color:var(--muted);max-width:40ch;text-wrap:pretty}
.resto{margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:minmax(150px,2fr) 9fr;gap:8px clamp(20px,3vw,48px)}
.resto__titulo{font:400 15px/1.6 Synonym,system-ui,sans-serif;color:var(--muted)}
.resto__lista{list-style:none;margin:0;padding:0;columns:2 280px;column-gap:clamp(24px,4vw,56px)}
.resto__lista li{break-inside:avoid;margin:0 0 12px;color:var(--muted);text-wrap:pretty}
.resto__cat{color:var(--ink)}

.fim{max-width:var(--max);margin:0 auto;padding:clamp(72px,12vh,140px) var(--gut) clamp(56px,9vh,96px);border-top:1px solid var(--line)}
.fim .rotulo{font-size:clamp(18px,1.4vw,21px);font-family:Synonym,system-ui,sans-serif;font-weight:400;color:var(--muted);letter-spacing:0}
.proxima{margin-top:20px;display:flex;align-items:center;flex-wrap:wrap;gap:clamp(16px,3vw,40px);padding:clamp(24px,4vh,40px) clamp(20px,3vw,36px);border:1px solid var(--line);border-radius:20px;background:#030910;text-decoration:none;color:var(--ink);transition:border-color .25s}
.proxima:hover{border-color:var(--ink)}
.proxima__logo{height:clamp(36px,5vw,56px);width:auto}
.proxima__nome{font:300 clamp(24px,2.6vw,40px)/1.1 Zodiak,serif;letter-spacing:-.02em}
.proxima__seta{margin-left:auto;display:inline-flex;width:56px;height:56px;border-radius:50%;border:1px solid #f2f6f666;align-items:center;justify-content:center}
.proxima__seta svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .25s var(--ease)}
.proxima:hover .proxima__seta svg{transform:translateX(4px)}
.fim__anterior{margin-top:18px;color:var(--muted)}
.fim__anterior a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.fim__acoes{margin-top:clamp(32px,5vh,48px);display:flex;flex-wrap:wrap;gap:14px}
.rodape{max-width:var(--max);margin:0 auto;padding:0 var(--gut) 48px;font-size:14px;color:var(--muted)}
.rodape a{text-decoration:underline;display:inline-block;padding:12px 0}

@media(max-width:820px){
 .hero{height:170svh}
 .topo__marca{font-size:16px}
 .botao{padding:0 16px;font-size:14px}
 .produto{grid-template-columns:1fr}
 .resto{grid-template-columns:1fr}
 .atuacao{text-align:left}
 .atuacao__texto{margin-left:0}
 .proxima__seta{width:44px;height:44px}
}
@media(max-width:600px){
  .linha li{grid-template-columns:1fr}
 .hero__texto{bottom:clamp(96px,16vh,150px)}
 .pausa{left:var(--gut);right:auto}
 /* tela em pe: o texto do topo ocupa a metade de baixo; o veu da cor do mundo sobe junto para o texto nunca ficar sobre a parte clara da cena */
 .hero__cena::after{background:linear-gradient(0deg,var(--mundo) 6%,color-mix(in srgb,var(--mundo) 82%,transparent) 48%,transparent 78%)}
 .numero{font-size:clamp(52px,15vw,72px)}
}
/* movimento reduzido: tudo pronto e parado; pausado pelo botao: as animacoes param onde estao (contrato 'movimento') */
@media(prefers-reduced-motion:reduce){
 .hero{height:auto}
 .hero__palco{position:relative}
 .js .revelar{opacity:1;translate:none;transition:none}
 .hero__kb,.reny-colonia,.imaes-varredura,.imaes-forma{animation:none}
 .reny-colonia,.imaes-varredura,.imaes-forma{display:none}
 .botao,.linha li::before,.linha time,.proxima__seta svg{transition:none}
}
[data-movimento=pausado] .hero__kb,[data-movimento=pausado] .reny-colonia,[data-movimento=pausado] .imaes-varredura,[data-movimento=pausado] .imaes-forma{animation-play-state:paused!important}
/* Quokka (T13, correção 1, achado 4): a Quokka não tem foto própria (a pata saiu na T11, D-T11-26; o prédio saiu na T12, pedido 6) e o
   quadro parado do fluido saiu (P10). O topo é a cor da marca: o verde-escuro do mundo da Quokka com uma luz larga no verde da logo
   (#3EB592), no alto à direita, longe da logo e do texto; anda devagar com o Ken Burns das outras páginas (Pausar e movimento reduzido
   param). Sem imagem e sem textura; a logo é o arquivo original, sem placa, halo nem contorno. */
.tema-quokka .hero__kb{background:radial-gradient(ellipse 46% 64% at 63% 16%,color-mix(in srgb,#3EB592 30%,var(--mundo)) 0%,color-mix(in srgb,#3EB592 12%,var(--mundo)) 46%,transparent 100%),var(--mundo)}
/* Fechamento da T13 (CG-63 parte B): o mesmo degradê e o mesmo véu de .hero__cena::after, com pontilhado, num <canvas> que empresa.js pinta
   dentro do .hero__kb (sem imagem). Com ele pronto (html[data-pontilhado]), o véu do CSS sai só na Quokka, porque já está no desenho.
   Sem JavaScript ficam o degradê de cima e o véu do CSS. */
.hero__kb>.kb-pontilhado{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
[data-pontilhado] .tema-quokka .hero__cena::after{display:none}

/* Acabamento T12: a GT não tem mais placa azul em lugar nenhum (nota do Victor de 13/10 06:20); usa gt-escuro.svg, a aplicação 03 do manual sem o campo. */