/* =======================
   Variáveis e Reset
======================= */
:root{
  --bg:#0e1115;
  --panel:#131921;
  --panel-soft:#151c25;
  --text:#e9edf1;
  --muted:#aeb6bf;
  --line:#233041;
  --accent:#e84e1a;
  --accent-2:#ffa76a;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --shadow-soft:0 6px 20px rgba(0,0,0,.25);
  --header-h:64px;
  --container:1200px;
  --gap:20px;
  --trans:.25s ease;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
.no-scroll{overflow:hidden}

/* =======================
   Background global
======================= */
.site-bg{position:fixed;inset:0;z-index:-2;overflow:hidden}
.site-bg img{
  width:100%;height:100%;object-fit:cover;
  filter:blur(10px) brightness(.45) saturate(.9);
  transform:scale(1.05);
}
.site-bg .bg-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(0,0,0,.25), transparent 60%),
    radial-gradient(1200px 600px at 90% 0%, rgba(0,0,0,.25), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}

/* =======================
   Layout utilitário
======================= */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.center{text-align:center}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* =======================
   Header / Nav
======================= */
.header{
  position:sticky; top:0; z-index:50;
  height:var(--header-h);
  display:flex; align-items:center;
  backdrop-filter:saturate(120%) blur(8px);
  background:rgba(10,13,17,.6);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-flex{display:flex;align-items:center;justify-content:space-between}
.logo-img{
  height:38px;width:auto;
  background:#fff; padding:4px 8px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
#nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
#nav a{color:var(--text);padding:8px 10px;border-radius:10px;transition:background var(--trans), color var(--trans)}
#nav a:hover{background:rgba(255,255,255,.06)}
#btn-mobile{
  display:none;width:42px;height:42px;border:0;border-radius:12px;
  background:rgba(255,255,255,.12);color:var(--text);
  align-items:center;justify-content:center;
}
#btn-mobile svg{display:block}

/* Mobile nav */
@media (max-width: 920px){
  #btn-mobile{display:inline-flex}
  #nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    background:rgba(9,12,16,.96);
    transform:translateY(-8px);
    border-bottom:1px solid rgba(255,255,255,.06);
    opacity:0; pointer-events:none;
    transition:opacity var(--trans), transform var(--trans);
  }
  #nav.active{opacity:1; transform:none; pointer-events:auto}
  #nav ul{flex-direction:column; gap:0}
  #nav li{width:100%}
  #nav a{display:block; padding:16px 20px; border-radius:0}
}

/* =======================
   Hero
======================= */
.hero{padding:96px 0 56px}
.hero-content{display:grid;gap:24px;align-items:center}
.hero h1{font-size:clamp(28px, 4vw, 44px);line-height:1.15;margin:0}
.hero p{color:var(--muted);margin:0 0 8px;font-size:clamp(15px, 2.5vw, 18px)}
.btn{
  display:inline-block; background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#111; padding:12px 18px; border-radius:12px; font-weight:600; box-shadow:var(--shadow-soft)
}
.btn:hover{transform:translateY(-1px)}
.founder-hero{justify-self:center;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);max-width:min(920px, 92vw)}
.founder-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* =======================
   About
======================= */
.grid{display:grid;gap:28px}
.about .grid{grid-template-columns:1fr}
.about .text p{color:var(--muted)}

/* =======================
   Story (vídeo 9:16 auto loop)
======================= */
.story .story-wrapper{display:flex;justify-content:center;align-items:center;margin-top:18px}
.story-video{
  width:min(100%, 420px);
  max-height:80vh; aspect-ratio:9/16; object-fit:cover;
  border-radius:18px; box-shadow:var(--shadow); background:#000;
}

/* =======================
   Carrossel (centralizado SEM cortar)
======================= */
:root{ --carousel-h: 420px; } /* desktop */
.team .carousel{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-soft);
  padding:16px 56px; /* espaço p/ setas */
}
.carousel-viewport{
  position:relative; height:var(--carousel-h); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  outline:none;
}
.carousel-track{
  display:flex; height:100%; align-items:center;
  transition:transform .6s cubic-bezier(.22,.61,.36,1); will-change:transform;
}
.carousel-track, .carousel-track li{list-style:none;margin:0;padding:0}
.carousel-slide{
  min-width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.carousel-slide img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; border-radius:12px; box-shadow:var(--shadow-soft);
}
/* setas laterais do container */
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(15,19,24,.7); color:var(--text);
  display:grid;place-items:center; z-index:3; box-shadow:var(--shadow-soft);
}
.carousel-btn:hover{background:rgba(15,19,24,.9)}
.carousel-btn.prev{left:12px}
.carousel-btn.next{right:12px}
.carousel-dots{display:flex;gap:8px;justify-content:center;margin-top:12px}
.carousel-dots .dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35);border:0;transition:transform var(--trans), background var(--trans)}
.carousel-dots .dot.is-active{background:var(--accent);transform:scale(1.25)}
@media (max-width:920px){
  :root{ --carousel-h: 320px; }
  .team .carousel{ padding:12px 48px; }
}

/* =======================
   Contato
======================= */
.contact .grid{grid-template-columns:1fr 1fr; align-items:start; gap:24px}
@media (max-width: 920px){ .contact .grid{grid-template-columns:1fr} }
.form-wrapper{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:18px; box-shadow:var(--shadow-soft)
}
form input, form textarea{
  width:100%; margin:8px 0; padding:12px 14px;
  border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25); color:var(--text);
  outline:none; transition:border-color var(--trans), box-shadow var(--trans);
}
form input::placeholder, form textarea::placeholder{color:#93a1b1}
form input:focus, form textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,78,26,.18)}
form .btn{margin-top:6px}
.contact-quick p{margin:.35rem 0}
.contact-quick a{color:#ffd2be}
.info .address-block{
  margin:16px 0 22px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:14px;
}
.address-block h4{margin:0 0 4px}
.address-block p{margin:0 0 10px;color:var(--muted)}
.address-block iframe{width:100%;height:220px;border:0;border-radius:10px;filter:grayscale(.1) contrast(1.05)}

/* =======================
   Lightbox (central e controles nas bordas)
======================= */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.lightbox.open{opacity:1; pointer-events:auto}
.lightbox-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(2px);
}
.lightbox-stage{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  display:inline-block; z-index:2;   /* só do tamanho da imagem */
}
#lightbox-img{
  display:block; max-width:92vw; max-height:86vh;
  border-radius:14px; box-shadow:var(--shadow); background:#000;
}
/* X e setas fixos nas bordas da tela (nunca sobrepostos no meio) */
.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position:fixed;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(20,24,28,.85); color:#fff;
  display:grid; place-items:center;
}
.lightbox-close{top:12px; right:12px; z-index:1002; width:48px; height:48px}
.lightbox-prev{top:50%; left:16px; transform:translateY(-50%); z-index:1001}
.lightbox-next{top:50%; right:16px; transform:translateY(-50%); z-index:1001}
.lightbox button:hover{background:rgba(20,24,28,.98)}

/* =======================
   Footer
======================= */
.footer{padding:26px 0;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.25)}

/* =======================
   Acessibilidade
======================= */
:focus-visible{ outline:3px solid rgba(232,78,26,.45); outline-offset:2px }
::selection{background:rgba(232,78,26,.35)}