/* ==================== HEADER — FIRMA (desktop) ==================== */


:root{
  --azul: #009DE0;
  --branco: #FFFFFF;
  --cinza-compacto: #323131;

  /* animação base (usada como fallback em propriedades não ligadas à var) */
  --dur: 260ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* Header base — fixo no topo */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10000;

  /* fundo base (fallback) */
  background: rgba(33,33,33,0.92);

  /* ===== PROGRESSO (0 grande → 1 compacto) — controlado pelo JS via --p ===== */
  --p: 0; /* não remova; JS atualiza isso continuamente */

/* grande → compacto (novas medidas) */
--deco-w:      calc(50px  - 20px * var(--p));    /* 50  → 30  */
--deco-h:      calc(100px - 50px * var(--p));    /* 100 → 50  */
--brand-left:  calc(var(--deco-w) + 35px);       /* 35px após o deco */
--logo-h:      calc(85px - 40px * var(--p));     /* 85  → 45  */
/* gap dinâmico da NAV (mantemos seus limites) */
--nav-gap: clamp(30px, 3.00vw, 150px);
--login-w: 170px;
--login-shift: calc(140px * var(--p));
--nav-right: calc(var(--nav-gap) + max(0px, var(--login-w) - var(--login-shift)));


--nav-bottom: calc(35px - 20px * var(--p));  /* 35px (aberto) → 25px (compacto) */



height: calc(120px - 60px * var(--p));           /* 120 → 100 */


  /* fundo vai de 33,33,33 (92%) para 32,31,31 (80%) */
  background-color: color-mix(
    in srgb,
    rgba(33,33,33,0.92) calc(100% - (var(--p) * 100%)),
    rgba(50,49,49,0.80) calc(var(--p) * 100%)
  );

  will-change: height, background-color, backdrop-filter, box-shadow;
  box-shadow: 0 2px 16px rgba(0,0,0, calc(.12 * var(--p)));
  /* transições de fallback (quando var não for atualizada em algum navegador) */
  transition:
    height var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

/* retângulo azul esquerdo — raio apenas no canto inferior-direito */
.site-header .header-deco{
  position: absolute;
  top: 0; left: 0;
  width: var(--deco-w);
  height: var(--deco-h);
  background: var(--azul);
  background: color-mix(in srgb, var(--azul) calc(100% - (var(--p) * 100%)), #FFFFFF calc(var(--p) * 100%));
  border-radius: 0 0 25px 0; /* novo raio */
  

  transition:
    width var(--dur) var(--ease),
    height var(--dur) var(--ease),
    border-radius var(--dur) var(--ease);
  will-change: width, height, border-radius, background-color;
}

/* marca — 30px após o retângulo; 15px do fundo (progride p/ 5px) */
.site-header .brand{
  left: var(--brand-left);
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  line-height: 0;
  transition:
    left var(--dur) var(--ease),
    top var(--dur) var(--ease);
  position: relative; /* para o ::after cruzar */
}

.site-header::after{
  content:"";
  position:absolute;
  left:0; right:0; top:100%;
  height:24px; pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,0));
  opacity: calc(.5 * var(--p));
  transition: opacity var(--dur) var(--ease);
}


.site-header .brand img{
  height: var(--logo-h);
  width: auto;
  display: block;
  transition:
    height var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

/* botão Log-in — 220x90 com glow; encosta na direita e “sai” suavemente */
.site-header .login-btn{
  position: absolute;
  bottom: 25px;
  right: 0;
  width: 170px;
  height: 50px;
  background: var(--azul);
  color: var(--branco);
  text-decoration: none;
  border-radius: 25px 0 0 25px;             /* pílula (apenas lado esquerdo) */
  box-shadow: 0 0 8px rgba(0,157,224,0.75);  /* glow 8px, 75% */

  /* desliza para fora e esmaece conforme --p */
  transform: translateX(calc(140px * var(--p)));
  opacity: calc(1 - var(--p));

  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.site-header .login-inner{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 15px;

}
.site-header .login-inner img{  width: 37px; height: 37px; }
.site-header .login-text{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  color: var(--branco);
}

/* nave — 90px antes do botão (progride até 70px da direita) */
.site-header .nav{
  position: absolute;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  right: var(--nav-right);
  bottom: var(--nav-bottom);                   /* 45px do bottom, como pedido */
  display: inline-flex;
  gap: var(--nav-gap);
  font-weight: 600;
  font-size: calc(18px - 2px * var(--p));
  transition:
    right var(--dur) var(--ease),
    bottom var(--dur) var(--ease);
}
.site-header .nav{ will-change: right, bottom; }
.site-header .nav a{
  position: relative;
  padding: 8px 4px;
  outline: none;
  color: #FFFFFF;
  color: color-mix(in srgb, #FFFFFF calc(100% - (var(--p) * 100%)), #BABABA calc(var(--p) * 100%));
  text-decoration: none;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}


/* underline desenhado na largura do TEXTO */
.site-header .nav a .label{
  position: relative;
  display: inline-block; /* a linha acompanha somente o texto */
}
.site-header .nav a .label::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 220ms var(--ease);
}
.site-header .nav a[aria-current="page"] .label::after,
.site-header .nav a:hover .label::after,
.site-header .nav a:focus-visible .label::after{
  transform: scaleX(1);
}


/* foco acessível */
.site-header .nav a:focus-visible,
.site-header .login-btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,255,255,.18) inset;
  border-radius: 8px;
  outline: none;
}


/* ==================== ESTADO “COMPACTO” (fallback/fim de curso) ==================== */
/* O JS aplica essa classe quando passa do range definido; aqui só fixamos --p:1
   e garantimos trocas finais (logo mínima + desativa clique do login). */
.site-header.header--compact{
  --p: 1;
}
.site-header.header--compact .brand img{
  /* fallback pra quem não trocou via JS ainda */
  content: url("../img-padrao/logo-firma-minimal.svg");
}
.site-header.header--compact .login-btn{
  pointer-events: none;
}

/* --- Botão do menu (ícone) --- */
.nav-toggle{
  position: absolute;
  display: none;               /* só aparece com media query */
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  margin-right: -35px;
}
.nav-toggle img{ display: block; width: 32px; height: auto;}

/* --- Menu lateral + backdrop --- */
.side-nav{
  position: fixed;
  top: 0; right: 0;
  width: 140px; height: 350px;
  background: #009DE0;                      /* normal */
  border-radius: 0 0 0 80px;                /* canto inferior-esquerdo arredondado */
  box-shadow: -24px 0 40px rgba(0,0,0,.35); /* sombra projetada para a esquerda */
  transform: translateX(110%);              /* fora da tela */
  transition: transform var(--dur) var(--ease);
  z-index: 11000;
}
.side-nav.is-open{ transform: translateX(0); }

.side-nav__menu{
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 20px 0 0 20px;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
}
/* tracinho animado (hover/ativo) nos links do menu lateral */
.side-nav__menu a{
  color: #fff;
  position: relative;
  text-decoration: none;
}
/* underline só no texto no lateral também */
.side-nav__menu a{ color:#fff; position:relative; text-decoration:none; }
.side-nav__menu a .label{ position:relative; display:inline-block; }
.side-nav__menu a .label::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 220ms var(--ease);
}
.side-nav__menu a:hover .label::after,
.side-nav__menu a:focus-visible .label::after,
.side-nav__menu a[aria-current="page"] .label::after{
  transform: scaleX(1);
}



/* bloco de login no menu lateral */
.side-login{
  margin-top: 25px;                 /* mantém seu valor atual */
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  height: 50px; width: 100%;
  background: #0082AF;             /* normal */
  text-decoration: none;            /* <<< remove sublinhado */
}
.side-login img{ width: 42px; height: 42px; }
.side-login span{ 
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  text-decoration: none;            /* redundância segura */
}


.side-nav-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.25);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  z-index: 19;
}
.side-nav-backdrop.show{ opacity: 1; }


@supports (backdrop-filter: blur(1px)) {
  .site-header{
    /* 0px → 6px de blur com leve saturação */
    backdrop-filter: saturate(calc(1 + .05 * var(--p))) blur(calc(6px * var(--p)));
  }
}

@keyframes pulse-glow{
  0%   { box-shadow: 0 0 8px rgba(0,157,224,.70); filter: brightness(1); }
  40%  { box-shadow: 0 0 22px rgba(0,157,224,.95), 0 0 64px rgba(0,157,224,.45); filter: brightness(1.08); }
  100% { box-shadow: 0 0 8px rgba(0,157,224,.70); filter: brightness(1); }
}
/* prepara pro efeito ficar suave */
.site-header .login-btn{ will-change: box-shadow, filter; }
.site-header .login-btn.pulse-on{
  animation: pulse-glow 1.8s ease-out both; /* both = mantém início/fim coesos */
}

/* ===== Utilitário de glow/pulse reaproveitável ===== */
.u-glow{
  /* cor padrão do brilho; troque por elemento com --u-pulse-color */
  --u-pulse-color: #009DE0;
  --u-pulse-size: 8px;    /* blur base do brilho */
  --u-pulse-halo: 64px;   /* halo externo no pico */
  --u-pulse-dur: 1.8s;    /* duração da animação */
  color: var(--u-pulse-color);
  box-shadow: 0 0 var(--u-pulse-size)
              color-mix(in srgb, currentColor 70%, transparent);
  will-change: box-shadow, filter;
}

/* animação genérica controlada via .u-pulse-on */
@keyframes u-pulse-glow{
  0%{
    box-shadow:
      0 0 var(--u-pulse-size)
      color-mix(in srgb, currentColor 70%, transparent),
      0 0 0 transparent;
    filter: brightness(1);
  }
  40%{
    box-shadow:
      0 0 calc(var(--u-pulse-size) * 2.75)
      color-mix(in srgb, currentColor 95%, transparent),
      0 0 var(--u-pulse-halo)
      color-mix(in srgb, currentColor 45%, transparent);
    filter: brightness(1.08);
  }
  100%{
    box-shadow:
      0 0 var(--u-pulse-size)
      color-mix(in srgb, currentColor 70%, transparent),
      0 0 0 transparent;
    filter: brightness(1);
  }
}
.u-pulse-on{
  animation: u-pulse-glow var(--u-pulse-dur) ease-out both;
}

/* respeita “reduzir movimentos” */
@media (prefers-reduced-motion: reduce){
  .u-pulse-on{ animation: none !important; }
}


/* Acessibilidade — reduzir movimento quando o usuário preferir */
@media (prefers-reduced-motion: reduce){
  .site-header, .site-header *{
    transition: none !important;
  }
}

@media screen and (max-width:1200px) {
  .site-header .nav{
    font-size: 15px;
    margin-right: -30px;
  }

  .site-header .login-btn{
    width: 130px;
    height: 50px;
  }
  .site-header .login-inner{
    gap: 10px;
  }
  .site-header .login-inner img{  width: 28px; height: 28px; }
  .site-header .login-text{
    font-size: 16px;
  }

}

/* ====== 600px → 1000px : ícone no topo, NAV textual só no compacto ====== */
@media screen and (min-width:686px) and (max-width:1000px){
  /* --- ESTADO NORMAL (sem scroll) --- */
  /* por padrão, o bloco (max-width:1000px) já faz:
     .nav {display:none} e .nav-toggle {display:block} */
  /* reforço explícito para evitar heranças de blocos antigos */
  .site-header:not(.header--compact) .nav{ display: none; }
  .site-header:not(.header--compact) .nav-toggle{
    display: block;
    bottom: 40px;
    right: calc(var(--login-shift) + var(--login-w) + 20px);
  }

  /* --- ESTADO COMPACTO (após scroll) --- */
  .site-header.header--compact .nav{
    display: inline-flex;
    right: 45px;                   /* 45px da borda direita */
    bottom: var(--nav-bottom);     /* mantém sua vertical atual */
    gap: 45px;                     /* gap fixo */
    font-size: 15px;               /* tamanho fixo */
  }
  .site-header.header--compact .nav a{ color: #BABABA; }
  .site-header.header--compact .nav-toggle{ display: none; }
}



@media screen and (max-width:686px){
  /* header 100 → 60 com o scroll; mantém tua transição */
  .site-header{ height: calc(100px - 40px * var(--p)); }

  /* deco vai para a direita, vira "o botão" */
  .site-header .header-deco{
    left: auto; right: 0;
    width: 45px; height: 90px;
    border-radius: 0 0 0 25px;
    position: absolute;            /* garante contexto p/ ::after */
    z-index: 11;                   /* abaixo do botão (que é transparente) */
  }
  .site-header .header-deco{ will-change: width, height, border-radius, background-color; }

  .site-header .header-deco::after{
    content: "";
    position: absolute;
    inset: 0;
    /* usar propriedades explícitas evita que algum background:... sobrescreva */
    background-image:
    url("../img-padrao/nav-minimalista-p.svg"),
    url("../img-padrao/nav minimalista.svg"); /* fallback se a 1ª faltar */
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 24px auto, 24px auto;
    pointer-events: none;          /* clique continua no botão por cima */
    z-index: 1;                    /* garante por cima da cor do deco */
    opacity: .98;
  }


  /* some login e nave textual */
  .site-header .login-btn{ display: none; }
  .site-header .nav{ display: none; }

  /* o ícone ocupa a área do deco, centralizado */
  .nav-toggle{
    display: flex; align-items: center; justify-content: center;
    right: 0; bottom: 0;
    width: 45px; height: 90px;
  }

  .nav-toggle img{ display: none; }

  /* menu lateral: em compacto (scroll) troca a cor */
  .site-header.header--compact ~ .side-nav{ background: #BABABA; }
  .site-header.header--compact ~ .side-nav .side-login{ background: #999999; }

  .site-header{
    /* 15px da esquerda, independente do deco (que foi pra direita) */
    --brand-left: 15px;

    /* altura da logo: 70px (aberto) → 45px (compacto) */
    --logo-h: calc(70px - 25px * var(--p));
  }

  .site-header .brand{
    left: var(--brand-left);       /* aplica os 15px */
    /* mantemos seu alinhamento vertical atual (top:50%/translateY ou o que você já usa) */
  }
  .site-header .brand img{
    height: var(--logo-h);         /* 70 → 45 conforme scroll */
    width: auto;
  }

  /* Compacto (após scroll) — deco 35x50 e botão ocupando o mesmo retângulo */
  .site-header.header--compact .header-deco{
    width: 35px;
    height: 50px;
    border-radius: 0 0 0 25px; /* mantém a mesma quina arredondada */
  }

  /* o botão continua sendo toda a área do deco */
  .site-header.header--compact .nav-toggle{
    width: 35px;
    height: 50px;
    right: 0;
    bottom: 0;
  }

  /* ícone continua centralizado; 24px cabe bem nos 35x50 */
  .site-header.header--compact .header-deco::after{
    background-size: 24px auto; /* já está centralizado pelo background:center */
  }


}
/* impedir scroll do body quando menu lateral estiver aberto (não altera visual) */
body.nav-open{ overflow: hidden; }

/* ==================== FIM — HEADER ==================== */