/* Estilos exclusivos da homepage (paginas/index.html).
   Depende de rios-tokens.css, site-chrome.css e site.css. */

/* ---------- Água (three.js) atrás do conteúdo, escurecida ---------- */
.hp-water-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hp-water-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,36,.80) 0%,rgba(10,16,36,.86) 100%)}
#hpWaterCanvas{width:100%;height:100%;display:block;opacity:.82;transform:scale(1.01);will-change:transform}
body.home #content{position:relative;z-index:1}
.hpv2{position:relative;z-index:1}

/* Seções da home 20px mais altas que o padrão do site */
body.home .section{padding-top:116px}
body.home .section--last{padding-bottom:116px}
body.home .sf{position:relative;z-index:1}

/* ---------- Logo flutuante: sai do hero e encaixa no header ---------- */
.hp-floating-logo{position:fixed;left:0;top:0;width:0;height:0;z-index:1002;pointer-events:none;will-change:left,top,width,height,opacity}
.hp-floating-logo img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(3,10,24,.45))}

/* ============================================================
   HERO  (.hh)
   ============================================================ */
.hh{position:relative;background:var(--site-navy);overflow:hidden;min-height:calc(100svh - var(--site-header-h) - 3px);display:flex;border-bottom:1px solid var(--site-gold-line)}
.hh__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:grayscale(.3)}
.hh__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,11,28,.92) 0%,rgba(8,21,53,.70) 55%,rgba(8,21,53,.40) 100%)}
.hh__inner{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:clamp(56px,8vw,112px) 24px clamp(56px,8vw,112px);display:flex;flex-direction:column}
.hh__main{flex:1;display:flex;align-items:center;gap:48px}
.hh__copy{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:28px}

.hh__titles{display:grid}
.hh__titles>*{grid-area:1/1}
.hh__title{
  margin:0;max-width:16ch;display:flex;flex-direction:column;
  font-family:var(--font-serif);font-weight:400;font-size:clamp(40px,6vw,76px);line-height:1.06;letter-spacing:-.02em;color:#fff;text-wrap:balance;
}
.hh__title--services{font-size:clamp(36px,5.4vw,68px);line-height:1.1;max-width:none}
.hh__title .line{display:block}
.hh__title .hl{color:var(--rios-gold);font-style:italic}
/* Altura fixa: frase, serviços e uma cópia invisível da frase completa
   ocupam a mesma célula; o GSAP só alterna a visibilidade. */
#hpHeroIntroText{display:flex!important;visibility:hidden}
.hh__ghost{visibility:hidden;pointer-events:none}
#hpHeroIntroText span{min-height:1.06em}

.hh__sub{margin:0;max-width:52ch;font-size:16px;line-height:1.6;color:rgba(255,255,255,.72)}
.hh__actions{display:flex;flex-wrap:wrap;gap:12px}

.hh__logo-anchor{flex:none;display:block;width:clamp(184px,20.7vw,276px);aspect-ratio:1/1;pointer-events:none}

.hh__video-btn{
  position:absolute;right:16px;top:16px;z-index:3;height:32px;padding:0 12px;
  border:1px solid var(--border-on-navy);border-radius:3px;background:rgba(6,11,28,.72);
  color:rgba(255,255,255,.85);font-family:var(--font-sans);font-size:12px;font-weight:500;cursor:pointer;
  transition:background-color 120ms var(--site-ease),border-color 120ms var(--site-ease);
}
.hh__video-btn:hover{background:rgba(201,177,122,.12);border-color:rgba(201,177,122,.55);color:#fff}
.hh__video-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* ============================================================
   FRENTES DE ATUAÇÃO
   ============================================================ */
.hp-fronts{display:flex;gap:12px;overflow-x:auto;scrollbar-width:thin}
.hp-front{
  position:relative;display:block;flex:1 0 160px;min-width:0;height:460px;
  border:1px solid var(--border-subtle);border-radius:4px;overflow:hidden;background:var(--site-navy);
  color:#fff!important;transition:flex 280ms var(--site-ease),border-color 120ms var(--site-ease);
}
.hp-front.is-active{flex:2.4 0 300px}
.hp-front__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.85);transition:filter 280ms var(--site-ease)}
.hp-front.is-active .hp-front__img{filter:grayscale(0)}
.hp-front__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,11,28,.05) 30%,rgba(6,11,28,.88) 100%)}
.hp-front__line{position:absolute;left:0;right:0;top:0;height:2px;background:var(--rios-gold);opacity:0;transition:opacity 280ms var(--site-ease)}
.hp-front.is-active .hp-front__line{opacity:1}
.hp-front__body{position:absolute;left:20px;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px}
.hp-front__n{font-family:var(--font-mono);font-size:11px;color:var(--rios-gold)}
.hp-front__title{font-size:20px;font-weight:600;line-height:1.2;color:#fff}
.hp-front__desc{font-size:13px;line-height:1.5;color:rgba(255,255,255,.72);max-width:36ch}
.hp-front__more{font-size:12px;font-weight:600;color:var(--rios-gold)}
.hp-front:not(.is-active) .hp-front__desc,.hp-front:not(.is-active) .hp-front__more{display:none}

/* ============================================================
   EQUIPE
   ============================================================ */
.hp-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.hp-member{overflow:hidden}
.hp-member__photo{position:relative;aspect-ratio:4/3.6;overflow:hidden;background:var(--bg-sunken)}
.hp-member__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:grayscale(1) brightness(.85);transition:filter 280ms var(--site-ease)}
.hp-member.is-active .hp-member__photo img{filter:grayscale(0)}
.hp-member__photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rios-gold);opacity:0;transition:opacity 280ms var(--site-ease)}
.hp-member.is-active .hp-member__photo::after{opacity:1}
.hp-member__body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:6px}
.hp-member__role{margin:0;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--rios-gold)}
.hp-member__name{margin:0;font-size:18px;font-weight:600;color:var(--fg-1)}
.hp-member__bio{margin:0;font-size:13px;line-height:1.55;color:var(--fg-2);text-wrap:pretty}

/* ============================================================
   CONTATO
   ============================================================ */
.hp-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px;align-items:start}
.hp-contact__intro{display:flex;flex-direction:column;gap:24px}
.hp-contact__title{font-size:clamp(30px,3.8vw,46px)}
.hp-channels{margin:0;border-top:1px solid var(--border-default)}
.hp-channels>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--border-subtle)}
.hp-channels dt{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);padding-top:3px}
.hp-channels dd{margin:0;font-size:14px;line-height:1.5;color:var(--fg-1)}
body.site-h .hp-channels a{color:var(--fg-1)}
body.site-h .hp-channels a:hover{color:var(--fg-link)}
.hp-form{padding:28px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow-sm)}
.hp-form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.hp-form__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:4px}
.hp-form__foot small{font-size:11px;color:var(--fg-3)}
.field--mono input{font-family:var(--font-mono)}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:900px){
  .hh__main{flex-direction:column-reverse;align-items:flex-start;gap:24px}
  .hh__logo-anchor{width:clamp(110px,29.9vw,161px);align-self:center}
}
@media (max-width:700px){
  .hp-front,.hp-front.is-active{flex:0 0 78%;height:420px}
  .hp-front .hp-front__img{filter:grayscale(0)}
  .hp-front:not(.is-active) .hp-front__desc,.hp-front:not(.is-active) .hp-front__more{display:block}
  .hp-channels>div{grid-template-columns:96px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .hp-water-bg canvas{transform:none}
}