/* ==========================================================================
   impulso+ · presite (portal)
   ========================================================================== */
:root{
  --ink:#0B1B3B; --blue:#2E7DF6; --blue-dark:#02448E; --white:#FFFFFF;
  --ease:cubic-bezier(.6,.05,.1,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --voce-bg:#F5F1E6; --voce-ink:#232323; --voce-mut:#787773;
  --emp-ink:#0C1017; --emp-grey:#797D86;
  --panel:#FFFFFF; --hair:rgba(12,16,23,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Satoshi","General Sans",system-ui,-apple-system,sans-serif;
  background:#FFFFFF; color:#0C1017;
  min-height:100vh; min-height:100dvh; overflow:hidden;
}
a{text-decoration:none; color:inherit}

/* ---------- Background video ---------- */
.bg{position:fixed; inset:0; z-index:0;
  background:linear-gradient(120deg,#ECEEF2 0%,#F2F4F7 50%,#F8F9FB 100%)}
.bg__video{
  position:fixed; left:23%; top:50%; transform:translateY(-50%);
  height:clamp(440px,77vh,720px); aspect-ratio:286/620; width:auto;
  object-fit:cover; border-radius:36px; filter:saturate(1.04) contrast(1.02);
  box-shadow:0 50px 90px -36px rgba(20,32,66,.42), 0 16px 38px -16px rgba(20,32,66,.28);
  animation:videoIn 1.1s var(--ease-out) both, videoFloat 9s ease-in-out 1.2s infinite;
}
.bg__dim{display:none}

/* ---------- Shell ---------- */
.shell{position:relative; z-index:1; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column}

.topbar{
  flex:0 0 auto; height:120px; display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(24px,4vw,72px); position:relative;
  animation:fadeIn .8s var(--ease) both;
}
.brand{display:inline-flex; align-items:center}
.brand img{height:58px; width:auto; display:block; transition:transform .4s var(--ease-out)}
.brand:hover img{transform:scale(1.03)}

.utils{display:flex; align-items:center; gap:10px; position:relative}
.utils button{
  background:none; border:0; cursor:pointer; padding:9px; border-radius:12px;
  color:#0C1017; display:grid; place-items:center; position:relative;
  transition:background .25s var(--ease), transform .25s var(--ease-out);
}
.utils button:hover{background:rgba(12,16,23,.06)}
.utils button:active{transform:scale(.92)}
.utils button:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.utils svg{width:24px;height:24px;display:block}

/* current language pill next to globe */
.lang-current{
  position:absolute; bottom:2px; right:1px; font-size:9px; font-weight:700; letter-spacing:.02em;
  background:var(--blue); color:#fff; padding:1px 4px; border-radius:6px; line-height:1.3; pointer-events:none;
}

/* ---------- Language popover ---------- */
.lang-pop{
  position:absolute; top:calc(100% + 10px); right:0; min-width:190px;
  background:var(--panel); border:1px solid var(--hair); border-radius:16px; padding:6px;
  box-shadow:0 24px 60px -24px rgba(11,27,59,.40), 0 8px 20px -12px rgba(11,27,59,.24);
  transform-origin:top right; opacity:0; transform:translateY(-8px) scale(.96); pointer-events:none;
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out); z-index:40;
}
.lang-pop.is-open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
.lang-pop button{
  width:100%; display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px;
  background:none; border:0; cursor:pointer; font:inherit; font-size:15px; color:#0C1017; text-align:left;
  transition:background .2s var(--ease);
}
.lang-pop button:hover{background:rgba(12,16,23,.05)}
.lang-pop button .flag{font-size:18px; line-height:1}
.lang-pop button.is-active{font-weight:600}
.lang-pop button.is-active::after{content:"✓"; margin-left:auto; color:var(--blue); font-weight:700}

/* ---------- Portal content ---------- */
.portal{flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:flex-end;
  padding:0 clamp(28px,5vw,90px) clamp(30px,5vh,64px)}
.content{width:clamp(340px,46%,560px); display:flex; flex-direction:column;
  gap:clamp(20px,2.8vh,32px); transform:translateY(-5vh)}
.cards{display:flex; flex-direction:column; gap:clamp(16px,2vh,24px)}

.card{
  position:relative; overflow:hidden; text-decoration:none; color:inherit;
  width:100%; min-height:clamp(184px,23vh,232px);
  border-radius:18px; padding:clamp(22px,2.2vw,34px);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; text-align:left;
  box-shadow:0 20px 50px -30px rgba(11,27,59,.28), inset 0 0 0 1px var(--hair);
  background:#FFFFFF; color:#0C1017;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), opacity .5s var(--ease);
  animation:riseIn .8s var(--ease) both;
}
.card::after{ /* sheen on hover */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:linear-gradient(120deg,transparent 30%,rgba(46,125,246,.10) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .8s var(--ease-out); opacity:0;
}
.card__content{position:relative; z-index:1; width:100%}
.card .arrow{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-size:14px; font-weight:600; color:var(--blue); opacity:0; transform:translateX(-6px);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.card .arrow svg{width:18px;height:18px}

.intro{animation:riseIn .8s var(--ease) both; animation-delay:.18s}
.intro p{margin:0; font-size:clamp(22px,2.4vw,32px); font-weight:400; line-height:1.3; letter-spacing:-.015em; color:#0C1017}
.intro .hl{color:#457CEE}

.card--voce{animation-delay:.30s}
.card--empresas{animation-delay:.40s}
.card--voce .desc, .card--empresas .desc{color:#4A5160}

.title{font-size:clamp(24px,2.4vw,34px); font-weight:400; line-height:1.06; letter-spacing:-.02em; color:#0C1017; margin-bottom:12px}
.desc{font-size:clamp(15px,1.1vw,17px); line-height:1.5; font-weight:400; margin:0}

@media (hover:hover) and (min-width:1025px){
  .cards:hover .card:not(:hover){opacity:.5; transform:scale(.99)}
  .card:hover, .card:focus-within{
    transform:translateY(-6px) scale(1.03);
    box-shadow:0 36px 72px -26px rgba(11,27,59,.42), inset 0 0 0 1px rgba(12,16,23,.16);
  }
  .card:hover::after{transform:translateX(120%); opacity:1}
  .card:hover .arrow, .card:focus-within .arrow{opacity:1; transform:translateX(0)}
}
.card:focus-visible{outline:3px solid #0C1017; outline-offset:4px}

/* ---------- Drawer (hamburger menu) ---------- */
.scrim{
  position:fixed; inset:0; z-index:70; background:rgba(8,14,28,.42);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.scrim.is-open{opacity:1; pointer-events:auto}

.drawer{
  position:fixed; top:0; right:0; z-index:80; height:100%;
  width:min(400px,88vw); background:var(--panel);
  box-shadow:-30px 0 80px -30px rgba(11,27,59,.5);
  transform:translateX(105%); transition:transform .42s var(--ease-out);
  display:flex; flex-direction:column; overflow-y:auto; padding:22px 26px 32px;
}
.drawer.is-open{transform:translateX(0)}
.drawer__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.drawer__top img{height:40px; width:auto}
.drawer__close{background:none; border:0; cursor:pointer; padding:8px; border-radius:10px; color:#0C1017; display:grid; place-items:center; transition:background .2s var(--ease)}
.drawer__close:hover{background:rgba(12,16,23,.06)}
.drawer__close svg{width:22px;height:22px}

.drawer section{padding:20px 0; border-top:1px solid var(--hair)}
.drawer section:first-of-type{border-top:0}
.drawer h3{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#9099A6; margin-bottom:12px}
.drawer a.link{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:18px; font-weight:500; color:#0C1017; padding:11px 12px; margin:0 -12px;
  border-radius:12px; transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease-out);
}
.drawer a.link:hover{background:rgba(46,125,246,.07); color:var(--blue); transform:translateX(2px)}
.drawer a.link .chev{width:18px;height:18px;opacity:.45;transition:transform .2s var(--ease-out)}
.drawer a.link:hover .chev{transform:translateX(3px);opacity:.9}

.drawer .acct{display:flex; gap:10px}
.drawer .acct a{flex:1; text-align:center; padding:13px 10px; border-radius:12px; font-size:15px; font-weight:600; transition:transform .2s var(--ease-out), box-shadow .2s var(--ease)}
.drawer .acct .ghost{border:1px solid var(--hair); color:#0C1017}
.drawer .acct .ghost:hover{background:rgba(12,16,23,.04); transform:translateY(-1px)}
.drawer .acct .solid{background:var(--blue); color:#fff}
.drawer .acct .solid:hover{transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(46,125,246,.6)}

.drawer .langrow{display:flex; gap:8px; flex-wrap:wrap}
.drawer .langrow button{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 12px; border-radius:11px; border:1px solid var(--hair); background:none; cursor:pointer;
  font:inherit; font-size:14px; color:#0C1017; transition:background .2s var(--ease), border-color .2s var(--ease)}
.drawer .langrow button .flag{font-size:16px}
.drawer .langrow button:hover{background:rgba(12,16,23,.04)}
.drawer .langrow button.is-active{border-color:var(--blue); color:var(--blue); font-weight:600; background:rgba(46,125,246,.06)}

.drawer .blurb{font-size:14.5px; line-height:1.55; color:#5B6573}
.drawer .talk{
  display:inline-flex; align-items:center; gap:9px; margin-top:14px; padding:12px 18px;
  border-radius:999px; background:#0C1017; color:#fff; font-weight:600; font-size:14.5px;
  transition:transform .2s var(--ease-out)}
.drawer .talk:hover{transform:translateY(-1px)}
.drawer .talk svg{width:18px;height:18px}

/* staggered drawer item entrance when opening */
.drawer.is-open section{animation:drawerItem .5s var(--ease-out) both}
.drawer.is-open section:nth-of-type(1){animation-delay:.06s}
.drawer.is-open section:nth-of-type(2){animation-delay:.12s}
.drawer.is-open section:nth-of-type(3){animation-delay:.18s}
.drawer.is-open section:nth-of-type(4){animation-delay:.24s}

/* ---------- Keyframes ---------- */
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes riseIn{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:translateY(0)}}
@keyframes videoIn{from{opacity:0; transform:translateY(-50%) scale(1.06)} to{opacity:1; transform:translateY(-50%) scale(1)}}
@keyframes videoFloat{0%,100%{transform:translateY(calc(-50% - 6px))} 50%{transform:translateY(calc(-50% + 6px))}}
@keyframes drawerItem{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)}}

/* ==========================================================================
   Responsive — Tablet
   ========================================================================== */
@media (max-width:1024px){
  body{overflow:auto}
  .shell{min-height:100dvh}
  /* vídeo rola junto com a página (evita sobrepor o texto ao rolar) */
  .bg{position:absolute}
  .bg__video{
    position:absolute;
    left:50%; right:auto; top:96px; bottom:auto; transform:translateX(-50%);
    width:auto; height:38vh; max-height:420px; aspect-ratio:286/620; border-radius:30px;
    box-shadow:0 28px 56px -26px rgba(20,32,66,.42), 0 10px 26px -14px rgba(20,32,66,.26);
    animation:videoInT 1s var(--ease-out) both;
  }
  .topbar{height:88px}
  .brand img{height:48px}
  .portal{align-items:flex-start; justify-content:center; padding:calc(38vh + 116px) 24px 56px}
  .content{width:100%; max-width:620px; transform:none; gap:22px}
  .cards{flex-direction:row; gap:18px}
  .card{flex:1 1 0; min-height:200px}
  .intro p{text-align:center; font-size:clamp(22px,3.2vw,30px)}
  @keyframes videoInT{from{opacity:0; transform:translateX(-50%) scale(1.06)} to{opacity:1; transform:translateX(-50%) scale(1)}}
}

/* ==========================================================================
   Responsive — Mobile
   ========================================================================== */
@media (max-width:600px){
  .bg__video{top:84px; height:34vh; max-height:330px; border-radius:24px}
  .topbar{height:74px; padding:0 18px}
  .brand img{height:42px}
  .utils button{padding:8px}
  .portal{padding:calc(34vh + 100px) 18px 44px; align-items:flex-start}
  .content{max-width:480px; gap:18px}
  .cards{flex-direction:column; gap:14px}
  .card{min-height:150px; padding:22px; border-radius:16px}
  .title{font-size:24px; margin-bottom:8px}
  .desc{font-size:15px}
  .intro p{font-size:22px}
  .card .arrow{opacity:1; transform:none; margin-top:12px}
  .lang-pop{min-width:170px}
  .drawer{width:100%; padding:18px 20px 28px}
}

/* very small */
@media (max-width:360px){
  .bg__video{height:28vh}
  .portal{padding:calc(28vh + 92px) 16px 36px}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .bg__video{filter:none}
  .card .arrow{opacity:1; transform:none}
}