:root{
  --azul-marinho:#051029;
  --branco:#ffffff;
  --preto:#000000;
  --amarelo-escuro:#cfa600;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100dvh;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--branco);
  background: var(--azul-marinho) url('backgrouddesktop.jpeg') center/cover no-repeat fixed;
  overflow-x:hidden;
}

/* Vídeo de topo fino */
.vid-cabeça{position:fixed;inset:0 0 auto 0;height:50px;overflow:hidden;z-index:99}
.vid-cabeça video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Cabeçalho */
.cabeca{
  position:fixed;top:0;left:0;width:100%;height:50px;z-index:1002;
  display:flex;align-items:center;overflow:hidden;
  background: linear-gradient(90deg, var(--azul-marinho), rgba(0,0,0,.85));
  border-bottom:1px solid rgba(255,255,255,.15);
  box-shadow:0 4px 30px rgba(2,0,29,.35);
}
.header-container{display:flex;align-items:center;gap:1rem}
.menubotao{
  position:fixed; top:55px; left:8px; z-index:1002;
  border:0; border-radius:12px; cursor:pointer;
  min-width:44px; min-height:44px;
  color:var(--branco); background:#000000a2; padding:.6rem; backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
  animation:pulseButton 2.2s ease-in-out infinite;
}
.menubotao:hover{background:var(--amarelo-escuro);color:var(--azul-marinho);transform:scale(1.05);box-shadow:0 10px 24px rgba(2,1,0,.45)}
@keyframes pulseButton{0%{transform:scale(1); box-shadow:0 0 0 0 rgba(255,255,255,.35)}50%{transform:scale(1.05); box-shadow:0 0 0 12px rgba(255,255,255,.15)}100%{transform:scale(1); box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.menubotao:hover{background:var(--amarelo-escuro);color:var(--azul-marinho);transform:scale(1.05);box-shadow:0 6px 20px rgba(2,1,0,.4)}
.tipage {
  position: relative;
  display: inline-block;
  background: linear-gradient(45deg, var(--branco), var(--amarelo-escuro));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  overflow: hidden;
}

.tipage::after {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.8) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: shine-title 5s infinite;
}

/* Animação do reflexo */
@keyframes shine-title {
  0%   { left: -75%; }
  10%  { left: 125%; } /* passa pelo texto */
  100% { left: 125%; } /* espera até o próximo ciclo */
}
/* ===== Ícones sociais ===== */
.social-sidebar{position:fixed;right:20px;top:8px;display:flex;gap:18px;z-index:1003}
/* Wrapper animado (mantém click em toda a área) */
.social-icon{position:relative;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;transform:translateY(0);will-change:transform}
/* Oscilância oposta entre os dois botões */
.instagram-icon{animation:osc-up 2.6s ease-in-out infinite}
.whatsapp-icon{animation:osc-down 2.6s ease-in-out infinite}
@keyframes osc-up{0%{transform:translateY(-5px)}50%{transform:translateY(5px)}100%{transform:translateY(-5px)}}
@keyframes osc-down{0%{transform:translateY(5px)}50%{transform:translateY(-5px)}100%{transform:translateY(5px)}}

/* Link ocupa 100% e recebe hover extravagante */
.social-icon a{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;text-decoration:none}
.social-icon img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 0 0 transparent);transition:transform .25s ease, filter .25s ease}
/* Glow/anel cônico animado no hover */
.social-icon a::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from 0deg, rgba(207,166,0,0), rgba(207,166,0,.35), rgba(207,166,0,0));filter:blur(10px);opacity:0;transition:opacity .2s ease}
.social-icon:hover a::before{opacity:1;animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Pop & tilt sutis no hover sem sair do header */
.social-icon:hover img{transform:scale(1.05) rotateY(10deg);filter:drop-shadow(0 6px 16px rgba(207,166,0,.35))}

/* ===== Menu lateral ===== */
.menulat{
  position:fixed;top:50px;left:0;width:280px;height:calc(100dvh - 60px);
  background:rgba(10,15,26,.95);padding:2rem 1.5rem;border-right:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;justify-content:space-between;
  transform:translateX(-100%);transition:transform .3s ease-in-out;z-index:1003;backdrop-filter:blur(10px);
}
.menulat-open,.menulat.ativo{transform:translateX(0)}
.menulat ul{list-style:none;margin:0 0 .5rem;padding:.8rem}
.menulat li{margin-bottom:.8rem;border-bottom:1px solid rgba(207,166,0,.1);padding:.5rem 0}
.menulat a{color:var(--branco);text-decoration:none;font-size:1.1rem;letter-spacing:1.5px;display:block;padding:.5rem;border-radius:8px}
.menulat a:hover{color:var(--amarelo-escuro)}
.imagemenu img{width:100%;height:auto;margin-bottom:1rem;border-radius:12px;filter:brightness(.95)}
.direitos{width:100%;text-align:center;font-size:.85rem;color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.2);padding-top:1rem;margin-top:1rem;position:fixed;bottom:0;left:0;z-index:1001;background:linear-gradient(to top, rgba(10,15,26,.4), transparent)}

/* ===== Conteúdo principal ===== */
.homepage{width:100%;margin-top:30px;min-height:100vh;position:relative}

/* ===== Rodapé institucional ===== */
.rodape-empresa{width:100%;background:rgba(5,10,20,.8);backdrop-filter:blur(10px);border-top:2px solid rgba(255,255,255,.7);display:flex;flex-direction:column;align-items:center;padding:2rem;gap:1rem}
.rodape-empresa h4{color:var(--amarelo-escuro);font-size:1.2rem;letter-spacing:2px;text-transform:uppercase}

@media (min-width:769px){
  .menubotao{display:none}
  .menulat{
    position:fixed; top:50px; left:0; width:100%; height:70px;
    transform:none; /* vira barra horizontal */
    background: linear-gradient(to bottom, rgba(5,16,41,.85), rgba(10,15,26,.8));
    border:none; border-bottom:1px solid rgba(207,166,0,.15);
    box-shadow:0 2px 10px rgba(0,0,0,.12);
    padding:0; flex-direction:row; align-items:center; justify-content:center;
  }
  .menulat ul{display:flex; flex-direction:row; align-items:center; justify-content:center; gap:2rem; margin:0; padding:0 1rem}
  .menulat li{margin:0; padding:0; border:none}
  .menulat a{font-size:.95rem; padding:.5rem 1rem; letter-spacing:.06em; background:none}
  .menulat a.active{background-color:var(--amarelo-escuro); color:var(--preto); border-radius:6px; padding:.6rem 1rem}
  .imagemenu,.direitos{display:none}
}
/* ===== Botão flutuante ===== */
.tipage{
  position: relative;
  display: inline-block;
  background: linear-gradient(45deg, var(--branco), var(--amarelo-escuro));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  overflow: hidden;
}
.tipage::after{
  content:"";
  position:absolute; inset:0 auto 0 -75%;
  width:50%; height:100%; transform: skewX(-20deg);
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.85) 50%, transparent 100%);
  animation: shine-title 5s infinite;
}
@keyframes shine-title{
  0%{ left:-75% }
  10%{ left:125% }   /* passa pelo título */
  100%{ left:125% }  /* espera até o próximo ciclo */
}

/* ——— Botão .anuncie (sem reflexo automático) ——— */
.anuncie{
  position:fixed !important;
  z-index:9999;
  right:max(env(safe-area-inset-right), 20px);
  bottom:max(env(safe-area-inset-bottom), 20px);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.4rem;
  border:0; border-radius:999px;
  font-weight:900; letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--preto);
  background:linear-gradient(135deg,var(--amarelo-escuro),#ffd966);
  box-shadow:0 12px 28px rgba(207,166,0,.35), inset 0 -2px 0 rgba(0,0,0,.15);
  cursor:pointer; overflow:visible; will-change:transform;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  animation:anuncie-float 3s ease-in-out infinite;
}

/* anel de energia (hover) */
.anuncie::before{
  content:"";
  position:absolute; inset:-10px; border-radius:inherit; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(207,166,0,0), rgba(207,166,0,.35), rgba(207,166,0,0));
  filter: blur(10px);
  opacity:0; transition: opacity .2s ease;
}

/* brilho varrendo (hover) */
.anuncie::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,0) 25%, rgba(255,255,255,.42) 48%, rgba(255,255,255,0) 75%);
  transform: translateX(-130%);
  opacity:0;
}

.anuncie:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow:0 18px 38px rgba(207,166,0,.45), inset 0 -2px 0 rgba(0,0,0,.2);
}
.anuncie:hover::before{ opacity:1; animation: spin 1.2s linear infinite }
.anuncie:hover::after{ opacity:.9; animation: sheen .9s ease }

.anuncie:active{ transform: translateY(-1px) scale(.98) }
.anuncie:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(207,166,0,.35), 0 12px 28px rgba(207,166,0,.35)
}

/* animações base */
@keyframes anuncie-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes sheen{ from{ transform:translateX(-130%)} to{ transform:translateX(130%)} }

@media (prefers-reduced-motion: reduce){
  .anuncie{ animation:none }
  .anuncie::before,.anuncie::after{ animation:none }
  .tipage::after{ animation:none }
}