/* páginas das empresas. A capa repete a sala da empresa na home (mesmo fundo, mesmo lockup): quem clica em
   "Conhecer" entra na sala que acabou de ver. Cada página define as cores pela classe do body. */
body.hosp{--c-fundo:var(--hosp-fundo);--c-luz:var(--hosp-luz);--c-arco:var(--hosp-arco);--c-acento:var(--hosp-champ);--c-texto:#E7D7C7}
body.tech{--c-fundo:var(--tech-fundo);--c-luz:var(--tech-luz);--c-arco:var(--tech-arco);--c-acento:#BFEFFF;--c-texto:var(--tech-prata)}
body.com{--c-fundo:var(--com-fundo);--c-luz:var(--com-luz);--c-arco:var(--com-arco);--c-acento:#F0C4A2;--c-texto:var(--com-marfim)}
body{background:var(--c-fundo) var(--grao)}

/* ── capa: a sala da empresa ────────────────────────── */
.capa{position:relative;min-height:100svh;display:grid;align-content:center;justify-items:center;text-align:center;
  padding:150px var(--margem) clamp(120px,16vh,180px);overflow:hidden}
.capa::after{content:"";position:absolute;inset:0;background:var(--grao);pointer-events:none}
body.hosp .capa{background:radial-gradient(85% 60% at 50% 52%,var(--hosp-luz),var(--hosp-fundo) 80%)}
body.tech .capa{background:radial-gradient(80% 70% at 72% 18%,var(--tech-luz),var(--tech-fundo) 70%)}
body.com .capa{background:radial-gradient(100% 80% at 50% 110%,var(--com-luz),var(--com-fundo) 70%)}
.capa .conteudo{position:relative;display:grid;justify-items:center;max-width:44rem}
.trilha{color:var(--texto-2);margin-bottom:clamp(28px,5vh,48px)}
.trilha a{text-decoration:none;color:var(--texto)}
.trilha b{font-weight:400;color:var(--c-acento);padding:0 .9em}
/* sem z-index no conteúdo: um contexto de empilhamento isolaria o lockup e o lighten não enxergaria o fundo */
.capa .lockup{width:min(560px,80vw);mix-blend-mode:lighten;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.capa .frase{text-wrap:balance;margin-top:clamp(24px,4vh,40px);font:400 calc(var(--t-frase) * .86)/1.65 var(--inter);color:var(--c-texto);opacity:.9;max-width:32em}
/* o arco da marca fecha a capa, na cor da empresa, como a costura entre as salas da home */
.capa .arco{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(70px,9vw,140px);pointer-events:none;overflow:visible}
.capa .arco path{fill:none;stroke:url(#g-empresa);stroke-width:2;vector-effect:non-scaling-stroke}
body.tech .capa .arco path{stroke-width:1.5;filter:drop-shadow(0 0 6px rgba(0,180,255,.6))}

@media (prefers-reduced-motion:no-preference){
  /* a entrada do lockup anda na PRÓPRIA imagem, nunca no h1: opacidade, transform ou animação num ancestral isola
     o grupo e o lighten do lockup deixa de enxergar o fundo (a caixa escura aparecia durante a entrada) */
  html.js .capa .conteudo>:not(h1),html.js .capa .conteudo>h1>.lockup{opacity:0;transform:translateY(14px)}
  html.js.entrou .capa .conteudo>:not(h1),html.js.entrou .capa .conteudo>h1>.lockup{opacity:1;transform:none;transition:opacity 850ms var(--ease-saida),transform 850ms var(--ease-saida);transition-delay:calc(150ms + var(--i,0) * 140ms)}
  html.js .capa .arco path{stroke-dasharray:1600;stroke-dashoffset:1600}
  html.js.entrou .capa .arco path{stroke-dashoffset:0;transition:stroke-dashoffset 1800ms var(--ease-saida) 500ms}
}

/* ── blocos de texto ────────────────────────────────── */
.secao{padding:var(--secao) var(--margem)}
.tese{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,7vw,120px);align-items:end}
.tese h2{font-size:var(--t-d2);line-height:1.12;max-width:16em}
.tese .traco{margin-bottom:24px;background:linear-gradient(90deg,var(--c-arco),var(--c-acento))}
.tese p{max-width:31rem;color:var(--texto)}
.rotulo{color:var(--c-acento);margin-bottom:clamp(32px,5vw,56px)}
.ver{display:inline-flex;align-items:center;min-height:44px;margin-top:28px;text-decoration:none;color:var(--marfim);border-bottom:var(--fio) solid var(--c-arco);padding:0 2px}
body.hosp .ver{border-color:var(--c-acento)}
@media (max-width:900px){.tese{grid-template-columns:minmax(0,1fr);gap:28px}}

/* ── Hospitality: as casas (foto de um lado, texto do outro; a segunda inverte) ── */
.casas{display:grid;gap:clamp(72px,11vw,160px)}
.casa{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,6vw,104px);align-items:center}
.casa.inversa .quadro{order:2}
.casa .quadro{position:relative;aspect-ratio:4/5;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,.5),0 30px 60px -24px rgba(0,0,0,.85)}
.casa .quadro img{width:100%;height:100%;object-fit:cover}
.casa .onde{color:var(--c-acento)}
.casa h3{margin-top:14px;font-size:var(--t-d2)}
.casa p{margin-top:24px;max-width:30rem}
/* Amelya ainda não tem foto: no lugar dela, uma placa da marca — nada de imagem que finja ser a casa */
.placa{display:grid;place-items:center;background:radial-gradient(80% 60% at 50% 45%,var(--hosp-luz),#0D0A09 85%)}
.placa::after{content:"";position:absolute;inset:0;background:var(--grao)}
.placa svg{position:absolute;left:-10%;width:120%;top:46%;height:22%;overflow:visible}
.placa svg path{fill:none;stroke:url(#g-empresa);stroke-width:2;vector-effect:non-scaling-stroke}
.placa span{position:relative;font-family:var(--display);font-optical-sizing:auto;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(1.75rem,1rem + 2.4vw,3rem);color:#F4E7D8}
@media (max-width:900px){.casa{grid-template-columns:minmax(0,1fr)}.casa.inversa .quadro{order:0}}

/* eventos: a faixa clara da página, no marfim quente e no espresso do manual */
.faixa{background:#F4E7D8;color:#3A1F18}
.faixa .display{color:#3A1F18}
.faixa .tese p{color:#4A3128}
.faixa .traco{background:linear-gradient(90deg,var(--hosp-arco),#B0896A)}
.faixa .ver{color:#3A1F18;border-color:var(--hosp-arco)}
.faixa :focus-visible{outline-color:var(--hosp-arco)}

/* ── Tech: da ideia ao resultado (é uma sequência de verdade, por isso numerada) ── */
.passos{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);counter-reset:passo}
.passos li{position:relative;display:grid;gap:14px;align-content:start;padding-top:28px;border-top:var(--fio) solid rgba(0,180,255,.35)}
.passos li::before{counter-increment:passo;content:"0" counter(passo);font:500 var(--t-micro)/1 var(--inter);letter-spacing:.3em;color:var(--tech-arco)}
.passos li::after{content:"";position:absolute;top:-3px;left:0;width:6px;height:6px;border-radius:50%;background:#BFEFFF;box-shadow:0 0 10px 2px rgba(0,180,255,.8)}
.passos h3{font-family:var(--display);font-optical-sizing:auto;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.5rem,1.1rem + 1.2vw,2.25rem);color:var(--marfim);line-height:1.1}
.passos p{color:var(--texto);max-width:24rem}
.frentes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,6vw,104px)}
.frentes li{display:grid;gap:16px;align-content:start}
.frentes .traco{width:28px;background:linear-gradient(90deg,var(--tech-arco),#BFEFFF)}
.frentes h3{font-family:var(--display);font-optical-sizing:auto;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.375rem,1.05rem + 1vw,2rem);color:var(--marfim);line-height:1.15}
.frentes p{color:var(--texto);max-width:30rem}
@media (max-width:900px){.passos,.frentes{grid-template-columns:minmax(0,1fr)}}

/* ── Comercial: as três frases do manual, uma por linha ── */
.tripe li{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,5vw,96px);align-items:baseline;padding:clamp(28px,4vw,48px) 0;border-top:var(--fio) solid rgba(210,148,109,.35)}
.tripe li:last-child{border-bottom:var(--fio) solid rgba(210,148,109,.35)}
.tripe h3{font-size:var(--t-d2)}
.tripe p{color:var(--com-marfim);opacity:.86;max-width:30rem}
@media (max-width:900px){.tripe li{grid-template-columns:minmax(0,1fr)}}

/* contato da empresa: o fio do e-mail na cor dela */
.contato .mail{border-bottom-color:var(--c-arco)}
body.hosp .contato .mail{border-bottom-color:var(--c-acento)}
@media (hover:hover) and (pointer:fine){
  .ver{transition:border-color 200ms ease}
  .ver:hover{border-color:var(--marfim)}
  .faixa .ver:hover{border-color:#3A1F18}
}
.ver:active{transform:scale(.98)}