/* ==========================================================================
   NOSSA HISTÓRIA — interações e animações
   Pedido do Isaac (30/10/2026): "deixe a página com mais interações e
   animações".

   Tudo aqui é PROGRESSIVO: se o JS falhar ou o usuário pedir menos
   movimento (prefers-reduced-motion), a página continua 100% legível.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ENTRADA DAS SEÇÕES (reveal on scroll)
   -------------------------------------------------------------------------- */
.vh-reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1)}
.vh-reveal.vh-visivel{opacity:1;transform:none}

/* filhos em cascata */
.vh-reveal.vh-visivel.vh-stagger > *{animation:vhSobe .62s cubic-bezier(.22,.61,.36,1) both}
.vh-stagger > *:nth-child(1){animation-delay:.04s}
.vh-stagger > *:nth-child(2){animation-delay:.12s}
.vh-stagger > *:nth-child(3){animation-delay:.20s}
.vh-stagger > *:nth-child(4){animation-delay:.28s}
.vh-stagger > *:nth-child(5){animation-delay:.36s}
.vh-stagger > *:nth-child(6){animation-delay:.44s}
@keyframes vhSobe{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

/* --------------------------------------------------------------------------
   2. HERO — entrada suave do título e do texto
   -------------------------------------------------------------------------- */
.phero h1{animation:vhEntraTitulo 1s cubic-bezier(.22,.61,.36,1) both}
.phero p{animation:vhEntraTexto 1s .22s cubic-bezier(.22,.61,.36,1) both}
@keyframes vhEntraTitulo{
  from{opacity:0;transform:translateY(20px);letter-spacing:.04em}
  to{opacity:1;transform:none}
}
@keyframes vhEntraTexto{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* --------------------------------------------------------------------------
   3. CARDS DOS HOTÉIS — hover com elevação e logo que cresce
   -------------------------------------------------------------------------- */
.grid.g4 .g-card{transition:transform .3s cubic-bezier(.22,.61,.36,1),
  box-shadow .3s,border-color .3s,background .3s}
.grid.g4 .g-card:hover{transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(28,25,26,.13);
  border-color:rgba(177,44,49,.28)}
.grid.g4 .g-card .g-logo img{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.grid.g4 .g-card:hover .g-logo img{transform:scale(1.08) rotate(-2deg)}
.grid.g4 .g-card .g-link{transition:gap .22s,color .22s}
.grid.g4 .g-card:hover .g-link{color:#B12C31}
.grid.g4 .g-card .g-link svg{transition:transform .22s}
.grid.g4 .g-card:hover .g-link svg{transform:translateX(4px)}

/* card ativo: leve pulso na entrada */
.grid.g4 .g-card.on{animation:vhPulso 2.6s ease-in-out 1.2s 2}
@keyframes vhPulso{
  0%,100%{box-shadow:0 0 0 0 rgba(177,44,49,0)}
  45%{box-shadow:0 0 0 6px rgba(177,44,49,.10)}
}

/* --------------------------------------------------------------------------
   4. NÚMEROS DO FUNDADOR — contam de 0 até o valor
   -------------------------------------------------------------------------- */
.founder .f-stats > div{transition:transform .25s,background .25s}
.founder .f-stats > div:hover{transform:translateY(-3px)}
.founder .f-stats strong{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   5. LINHA DO TEMPO — cartões entram alternando o lado
   -------------------------------------------------------------------------- */
.vh-tl-item{opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1)}
.vh-tl-item.vh-visivel{opacity:1;transform:none}
.vh-tl-item:hover{transform:translateX(5px)}

/* --------------------------------------------------------------------------
   6. FOTO DO FUNDADOR — zoom lento e sutil no hover
   -------------------------------------------------------------------------- */
.founder img{transition:transform .8s cubic-bezier(.22,.61,.36,1),
  filter .4s}
.founder img:hover{transform:scale(1.035)}

/* --------------------------------------------------------------------------
   7. BOTÕES — micro-interação consistente
   -------------------------------------------------------------------------- */
.btn, .g-link, .mf-insta, .mf-ig-seta{transition:transform .2s,
  box-shadow .2s, background .2s, color .2s, border-color .2s}
.btn:active, .g-link:active{transform:scale(.97)}

/* --------------------------------------------------------------------------
   8. BARRA DE PROGRESSO DE LEITURA (topo)
   -------------------------------------------------------------------------- */
.vh-progresso{position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,#B12C31,#D7555C 60%,#EBA9AD);
  z-index:9999;transition:width .1s linear;pointer-events:none;
  box-shadow:0 0 10px rgba(177,44,49,.5)}

/* --------------------------------------------------------------------------
   9. PARALLAX SUAVE NO HERO
   -------------------------------------------------------------------------- */
.phero{overflow:hidden}
.phero .vh-hero-bg{will-change:transform;transition:transform .12s linear}

/* --------------------------------------------------------------------------
   10. RESPEITA QUEM PEDIU MENOS MOVIMENTO
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .vh-reveal, .vh-tl-item{opacity:1!important;transform:none!important}
  .vh-reveal.vh-visivel.vh-stagger > *{animation:none!important}
  .phero h1, .phero p{animation:none!important}
  .grid.g4 .g-card.on{animation:none!important}
  .vh-progresso{display:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ==========================================================================
   FAIXA DE MARCAS — INTERAÇÕES (pedido 30/10/2026)
   ========================================================================== */

/* 1. entrada da faixa como um cartão que se eleva */
.marcas-faixa{transition:box-shadow .35s,transform .35s,border-color .35s}
.marcas-faixa:hover{box-shadow:0 14px 36px rgba(28,25,26,.10);
  border-color:rgba(177,44,49,.16);transform:translateY(-2px)}

/* 2. cada marca reage ao mouse: logo cresce, texto desliza */
.marcas-faixa .mf-item{transition:background .22s,transform .22s}
.marcas-faixa .mf-logo{transition:transform .3s cubic-bezier(.22,.61,.36,1),
  border-color .3s,box-shadow .3s}
.marcas-faixa .mf-item:hover .mf-logo{transform:scale(1.06) rotate(-3deg);
  border-color:rgba(177,44,49,.30);box-shadow:0 6px 16px rgba(177,44,49,.14)}
.marcas-faixa .mf-txt{transition:transform .22s}
.marcas-faixa .mf-item:hover .mf-txt{transform:translateX(2px)}
.marcas-faixa .mf-txt strong{transition:color .22s}
.marcas-faixa .mf-item:hover .mf-txt strong{color:#B12C31!important}

/* 3. divisor que "acende" no hover de qualquer item */
.marcas-faixa .mf-div{transition:background .3s,height .3s}
.marcas-faixa:hover .mf-div{background:rgba(177,44,49,.25)!important;height:44px!important}

/* 4. Instagram: anel que gira no hover */
.marcas-faixa .mf-ig-ico{transition:transform .45s cubic-bezier(.22,.61,.36,1),
  box-shadow .3s}
.marcas-faixa .mf-insta:hover .mf-ig-ico{transform:rotate(360deg) scale(1.05);
  box-shadow:0 0 0 3px rgba(238,42,123,.16)}
.marcas-faixa .mf-ig-txt strong{transition:color .2s}
.marcas-faixa .mf-insta:hover .mf-ig-txt strong{color:#B12C31!important}
.marcas-faixa .mf-ig-seta{transition:background .2s,transform .2s,box-shadow .2s}
.marcas-faixa .mf-insta:hover .mf-ig-seta{transform:scale(1.05);
  box-shadow:0 5px 16px rgba(177,44,49,.38)!important}
.marcas-faixa .mf-insta:active .mf-ig-seta{transform:scale(.96)}

/* 5. brilho que atravessa a faixa uma vez, quando ela entra na tela */
.marcas-faixa.vh-visivel::after{
  content:"";position:absolute;top:0;left:-40%;width:35%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:vhBrilho 1.5s .35s ease-out 1;
  pointer-events:none;border-radius:18px}
.marcas-faixa{position:relative;overflow:hidden}
@keyframes vhBrilho{
  0%{left:-40%;opacity:0}
  25%{opacity:1}
  100%{left:110%;opacity:0}
}

@media(prefers-reduced-motion:reduce){
  .marcas-faixa.vh-visivel::after{display:none!important}
  .marcas-faixa .mf-insta:hover .mf-ig-ico{transform:none!important}
  .marcas-faixa .mf-item:hover .mf-logo{transform:none!important}
}

/* ==========================================================================
   MAIS INTERAÇÕES NA PÁGINA (pedido 30/10/2026)
   ========================================================================== */

/* 1. CURSOR SUAVE NOS CARDS + SOMBRA QUE SEGUE O MOUSE (spotlight) */
.vh-spot{position:relative;overflow:hidden}
.vh-spot::before{content:"";position:absolute;inset:0;pointer-events:none;
  opacity:0;transition:opacity .35s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
             rgba(177,44,49,.09),transparent 62%)}
.vh-spot:hover::before{opacity:1}

/* 2. TÍTULOS COM SUBLINHADO QUE CRESCE */
.vh-sub{position:relative;display:inline-block;padding-bottom:6px}
.vh-sub::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;
  border-radius:99px;background:linear-gradient(90deg,#B12C31,#D7555C);
  transition:width .7s cubic-bezier(.22,.61,.36,1)}
.vh-visivel .vh-sub::after, .vh-sub.vh-visivel::after{width:100%}

/* 3. FOTO DO FUNDADOR COM MOLDURA QUE SE DESENHA */
.founder .vh-moldura{position:relative}
.founder .vh-moldura::after{content:"";position:absolute;inset:-10px;
  border:2px solid rgba(177,44,49,.22);border-radius:24px;
  opacity:0;transform:scale(.96);
  transition:opacity .5s,transform .5s}
.founder .vh-moldura:hover::after{opacity:1;transform:scale(1)}

/* 4. CARDS DE VALORES (última seção) — sobem e ganham barra vermelha */
.sec .vh-card{position:relative;overflow:hidden;transition:transform .3s,
  box-shadow .3s,border-color .3s}
.sec .vh-card::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,#B12C31,#D7555C);transition:width .4s}
.sec .vh-card:hover{transform:translateY(-5px);
  box-shadow:0 16px 34px rgba(28,25,26,.11);
  border-color:rgba(177,44,49,.24)}
.sec .vh-card:hover::after{width:100%}

/* 5. LINK "VOLTAR AO TOPO" QUE APARECE AO ROLAR */
.vh-topo{position:fixed;right:22px;bottom:22px;width:46px;height:46px;
  border-radius:50%;background:#2E2D2F;color:#fff;display:grid;place-items:center;
  border:0;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s,transform .3s,background .2s,visibility .3s;
  z-index:800;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.vh-topo.vh-on{opacity:1;visibility:visible;transform:none}
.vh-topo:hover{background:#B12C31;transform:translateY(-3px)}
.vh-topo svg{width:19px;height:19px;stroke:currentColor;fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* 6. SEÇÕES DA LINHA DO TEMPO — marcador que pulsa ao entrar */
.vh-tl-item .vp-tl-ano{transition:transform .3s,color .3s}
.vh-tl-item:hover .vp-tl-ano{transform:scale(1.12);color:#B12C31}

/* 7. BOTÕES COM "PRESS" REAL */
.btn:active, .g-link:active, .mf-insta:active, .btn-blue:active{
  transform:scale(.96)!important}

@media(max-width:760px){
  .vh-topo{right:16px;bottom:16px;width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
  .vh-spot::before, .vh-topo{transition:none!important}
  .sec .vh-card:hover, .founder .vh-moldura:hover{transform:none!important}
}