/* comum a todas as páginas: tokens, tipografia do manual, régua (cabeçalho + painel das empresas), contato e rodapé.
   A home e as páginas das empresas carregam este arquivo; o que é só de uma delas fica nela. */

/* ── tokens ─────────────────────────────────────────── */
:root{
  --chao:#0C0B0A; --marfim:#FAF7ED; --texto:#D9D5CB; --texto-2:#A8A49B; --ouro:#D4B88C; --pedra:#3A3A35;
  --hosp-fundo:#140B08; --hosp-luz:#3A1F18; --hosp-arco:#8A1538; --hosp-champ:#D5B48F;
  --tech-fundo:#020810; --tech-luz:#0A1B3D; --tech-arco:#00B4FF; --tech-prata:#D7DEE9;
  --com-fundo:#1A293A; --com-luz:#22364B; --com-arco:#D2946D; --com-marfim:#FAEEDF;
  --display:'Bodoni Moda',Georgia,serif;
  --inter:'Inter',system-ui,sans-serif;
  --ease-saida:cubic-bezier(.23,1,.32,1);
  --ease-palco:cubic-bezier(.65,0,.35,1);
  --margem:clamp(20px,5vw,72px);
  /* duas famílias: Bodoni Moda no que a marca diz (títulos, tese, nomes, e-mail), Inter no que explica.
     escala: dois tamanhos de display, um de frase, corpo fixo, micro do manual */
  --t-d1:clamp(2.25rem,1.1rem + 4.9vw,5.75rem);
  --t-d2:clamp(1.875rem,1.05rem + 2.6vw,3.5rem);
  --t-frase:clamp(1.1875rem,1rem + .55vw,1.4375rem);
  --t-corpo:1.0625rem;
  --t-micro:.6875rem;
  --secao:clamp(104px,15vh,176px);
  --fio:1px;
  --folha:linear-gradient(90deg,#f3e0bd,#D4B88C 45%,#9c7748);
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* --fio só em bordas: um fundo de .5px de altura não é pintado pelo Chrome em tela 2x */
@media (min-resolution:2dppx){:root{--fio:.5px}}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;scrollbar-color:#3a3a35 var(--chao)}
html,body{margin:0;overflow-x:clip}
::selection{background:rgba(212,184,140,.32);color:var(--marfim)}
body{background:var(--chao) var(--grao);color:var(--texto);font:400 var(--t-corpo)/1.72 var(--inter);-webkit-font-smoothing:antialiased;letter-spacing:.01em;font-kerning:normal}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--ouro);outline-offset:4px;border-radius:2px}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{text-wrap:balance;font-weight:400}
p{text-wrap:pretty}

/* tipografia do manual: display em caixa-alta espaçada; frases-assinatura em Didot caps; descritor em Inter 600 */
.display{font-family:var(--display);font-optical-sizing:auto;text-transform:uppercase;letter-spacing:.03em;line-height:1.06;color:var(--marfim);font-feature-settings:"kern" 1,"liga" 1}
.assina{font-family:var(--display);font-optical-sizing:auto;text-transform:uppercase;letter-spacing:.24em;line-height:1.45;color:var(--marfim)}
.descritor{font:500 var(--t-micro)/1.6 var(--inter);text-transform:uppercase;letter-spacing:.3em;font-feature-settings:"case" 1}
.traco{display:block;width:36px;height:1px;background:var(--folha);border:0}

/* ── régua superior (moldura de papelaria) ─────────── */
.regua{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);
  padding:22px var(--margem) 30px;background:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,0))}
/* fora do topo a régua ganha chão próprio: sem isso a folha marfim e os títulos passam por baixo do logo e da nav */
.regua::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(12,11,10,.94);border-bottom:var(--fio) solid rgba(212,184,140,.18);opacity:0;transition:opacity 240ms ease}
.regua.solida::before,.regua.aberta::before{opacity:1}
@supports (backdrop-filter:blur(1px)){.regua::before{background:rgba(12,11,10,.82);backdrop-filter:blur(14px) saturate(1.1)}}
.sentinela{position:absolute;top:0;left:0;width:1px;height:96px;pointer-events:none}
.regua .marca img{display:block;width:120px} /* 120px = mínimo digital do manual */
.regua .fio{flex:1;height:0;border-top:var(--fio) solid;border-image:linear-gradient(90deg,rgba(212,184,140,.55),rgba(212,184,140,.12)) 1}
.regua nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);font:500 var(--t-micro)/1 var(--inter);letter-spacing:.26em;text-transform:uppercase}
.regua nav a,.regua nav button{text-decoration:none;color:var(--texto);padding:12px 0}
.regua nav button{font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.regua nav [aria-current="page"]{color:var(--marfim)}
.regua nav .acao{color:var(--marfim);border-bottom:var(--fio) solid var(--ouro);padding-bottom:7px}
/* a seta do Empresas: um V de dois fios que vira quando o painel abre */
.regua .abre::after{content:"";width:5px;height:5px;margin-top:-3px;border:solid var(--ouro);border-width:0 var(--fio) var(--fio) 0;transform:rotate(45deg);transition:transform 200ms var(--ease-saida)}
.regua.aberta .abre::after{transform:translateY(3px) rotate(-135deg)}
.regua .menu{display:none}
@media (max-width:760px){
  .regua nav .opc,.regua nav .acao{display:none}
  .regua .menu{display:inline-flex}
}

/* painel das empresas: cai da régua; cada empresa leva o fio na cor do manual dela */
.painel{position:absolute;top:100%;left:0;right:0;padding:clamp(28px,4vw,48px) var(--margem) clamp(32px,4.5vw,56px);
  background:rgba(12,11,10,.97);border-bottom:var(--fio) solid rgba(212,184,140,.22);
  visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity 200ms ease,transform 260ms var(--ease-saida),visibility 0s linear 260ms}
.regua.aberta .painel{visibility:visible;opacity:1;transform:none;transition:opacity 200ms ease,transform 260ms var(--ease-saida),visibility 0s}
@supports (backdrop-filter:blur(1px)){.painel{background:rgba(12,11,10,.9);backdrop-filter:blur(18px) saturate(1.1)}}
.painel .empresas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.painel .empresas a{display:grid;gap:14px;align-content:start;text-decoration:none;padding:6px 0 10px}
.painel .empresas .traco{width:28px;background:var(--cor);transform-origin:left;transition:transform 260ms var(--ease-saida)}
.painel .empresas .nome{font-family:var(--display);font-optical-sizing:auto;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(1rem,.85rem + .5vw,1.25rem);line-height:1.2;color:var(--marfim)}
.painel .empresas .linha{font:400 .875rem/1.6 var(--inter);color:var(--texto-2);max-width:26em}
.painel .hosp{--cor:linear-gradient(90deg,var(--hosp-arco),var(--hosp-champ))}
.painel .tech{--cor:linear-gradient(90deg,var(--tech-arco),#BFEFFF)}
.painel .com{--cor:linear-gradient(90deg,#A86A45,var(--com-arco))}
.painel [aria-current="page"] .nome{color:var(--ouro)}
.painel .extra{display:none}
@media (max-width:760px){
  .painel{max-height:calc(100svh - 90px);overflow-y:auto}
  .painel .empresas{grid-template-columns:minmax(0,1fr);gap:8px}
  .painel .empresas a{padding:14px 0}
  .painel .extra{display:grid;gap:4px;margin-top:20px;padding-top:20px;border-top:var(--fio) solid rgba(212,184,140,.18)}
  .painel .extra a{display:block;padding:12px 0;text-decoration:none;color:var(--texto)}
  .painel .extra .acao{color:var(--marfim)}
}

/* ── contato e rodapé ───────────────────────────────── */
.contato{padding:calc(var(--secao) * .5) var(--margem) 0}
.contato h2{font-size:var(--t-d2)}
.contato .mail{display:inline-block;margin-top:32px;font:400 calc(var(--t-frase) * 1.25)/1.3 var(--display);font-optical-sizing:auto;color:var(--marfim);text-decoration:none;border-bottom:var(--fio) solid var(--ouro);padding-bottom:8px}
.rodape{display:flex;align-items:center;gap:24px;margin-top:var(--secao);padding:24px 0 40px;color:var(--texto-2)}
.rodape img{width:120px}
.rodape .fio{flex:1;height:0;border-top:var(--fio) solid;border-image:linear-gradient(90deg,rgba(212,184,140,.4),rgba(212,184,140,.1)) 1}
.rodape .descritor{letter-spacing:.2em}
.rodape .descritor b{font-weight:400;color:var(--ouro);padding:0 .8em}
@media (max-width:760px){.rodape{flex-wrap:wrap}.rodape .fio{flex-basis:100%;order:2}.rodape .descritor{order:3;line-height:2.1}.rodape .descritor>span{display:block}.rodape .descritor b{display:none}}

@media (hover:hover) and (pointer:fine){
  .regua nav a,.regua nav button,.contato .mail,.painel .nome{transition:color 200ms ease,border-color 200ms ease}
  .regua nav a:hover,.regua nav button:hover{color:var(--marfim)}
  .contato .mail:hover{border-color:var(--marfim)}
  .painel .empresas a:hover .traco{transform:scaleX(2.2)}
  .painel .empresas a:hover .nome{color:var(--ouro)}
}
.regua nav .acao:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.painel,.regua.aberta .painel,.regua .abre::after,.painel .empresas .traco{transition:none}}