/* Allmana × Ágora Investimentos · Family Day Casa Aberta
   Sistema extraído do template Allmana (deck Chiesi "To the Top", Canva):
   telas Allmana em amarelo, preto e creme; telas do cliente em branco com diagonais cinza,
   aba escura com o logo do cliente e a cor do cliente como acento. */
:root{
  /* Allmana */
  --yellow:#FFB000; --black:#000; --cream:#F6F4EF; --cream2:#ECE8DF; --ink:#0B0B0B; --ink2:#161616; --ink3:#1F1F1F;
  /* Ágora (site oficial e SVG do logo) */
  --petrol:#01464D; --petrol-dk:#002C2E; --petrol-md:#175459; --mint:#00C88D; --mint-dk:#099E84; --mint-lt:#B6DFD2; --mint-xl:#D4EAE4;
  --gray:#F2F2F0; --gray2:#E7E7E3; --mute:#6E6E73; --line:rgba(0,0,0,.12);
  --fh:'Inter Tight','Inter',system-ui,sans-serif; --f:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1); --ease2:cubic-bezier(.7,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden;-webkit-font-smoothing:antialiased;font-family:var(--f)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:6px}

/* ---------- palco ---------- */
#stage{position:absolute;left:50%;top:50%;width:1600px;height:900px;transform-origin:center;overflow:hidden;background:#000}

/* ---------- telas ---------- */
.slide{position:absolute;inset:0;overflow:hidden;padding:150px 88px 70px;display:flex;flex-direction:column;
  visibility:hidden;opacity:0;transition:opacity .6s var(--ease),visibility 0s linear .6s}
.slide.is-active{visibility:visible;opacity:1;transition:opacity .6s var(--ease)}
.slide>*{position:relative;z-index:2}
.al-y{background:var(--yellow);color:#000}
.al-k{background:#000;color:#fff}
.al-c{background:var(--cream);color:var(--ink)}
.cl{background:#fff;color:#1B1B1B}
/* diagonais cinza das telas do cliente */
.cl::before{content:"";position:absolute;inset:0;z-index:0;background:var(--gray);clip-path:polygon(0 100%,100% 34%,100% 100%)}
.cl.d0::before{display:none}

/* ---------- cabeçalhos ---------- */
.hd{position:absolute;left:0;right:0;top:0;height:110px;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;padding:40px 56px 0}
.hd .lbls{display:flex;gap:30px;font-size:15px;padding-top:10px}
.hd .lbls span{opacity:.62}
.hd .lbls b{font-weight:600}
/* A da Allmana recortado do logo */
.amA{display:block;width:72px;height:72px;background:url(../assets/logos/allmana.png) 0 0/auto 100% no-repeat}
.amA.w{filter:brightness(0) invert(1)}
.amA.k{filter:brightness(0)}
.amA.sm{width:46px;height:46px}
/* assinatura Allmana (A amarelo + palavra escura) */
.amLock{display:flex;align-items:center;gap:6px;height:26px}
.amLock i{display:block;height:26px;background:url(../assets/logos/allmana.png) no-repeat;background-size:auto 26px}
.amLock i:first-child{width:26px;background-position:0 0}
.amLock i:last-child{width:110px;background-position:100% 0;filter:brightness(0)}
/* aba do cliente */
.tab{position:absolute;left:0;top:0;height:96px;width:330px;background:var(--petrol);clip-path:polygon(0 0,100% 0,86% 100%,0 100%);z-index:3;display:flex;align-items:center;padding-left:56px}
.tab img{height:27px;width:auto}
.cl .hd{justify-content:flex-end}
.cl .hd .amLock{margin-top:8px}

/* ---------- tipografia ---------- */
.ttl{font-family:var(--fh);font-weight:800;font-size:86px;line-height:.93;letter-spacing:-.028em;text-transform:uppercase}
.ttl.l{font-size:112px}
.ttl.xl{font-size:156px;line-height:.88}
.ttl.m{font-size:64px}
.ttl.s{font-size:50px}
.lead{font-size:27px;line-height:1.34;letter-spacing:-.006em}
.big{font-family:var(--fh);font-weight:700;font-size:58px;line-height:1.08;letter-spacing:-.022em}
.body{font-size:19px;line-height:1.46}
.sm{font-size:16px;line-height:1.45}
.xs{font-size:14px;line-height:1.4}
.lbl{font-size:15px;opacity:.6;margin-bottom:6px}
.mute{opacity:.62}
.y{color:var(--yellow)}
.pt{color:var(--petrol)}

/* ---------- componentes ---------- */
.pill{display:inline-flex;align-items:center;gap:16px;border-radius:999px;padding:9px 30px 9px 9px;font-family:var(--fh);font-weight:800;font-size:22px;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.pill .dt{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none}
.pill .dt .ic{width:20px;height:20px}
.pill.k{background:#000;color:var(--yellow)} .pill.k .dt{background:var(--yellow);color:#000}
.pill.g{background:var(--ink3);color:#fff;text-transform:none;font-family:var(--f);font-weight:600;font-size:19px} .pill.g .dt{background:var(--yellow);color:#000}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;background:var(--gray);font-size:16px;font-weight:600;white-space:nowrap}
.chip .ic{width:18px;height:18px}
.al-k .chip{background:var(--ink3)}
.chip.on{background:var(--petrol);color:#fff}
.card{border-radius:18px;padding:28px 30px;background:var(--gray)}
.al-c .card{background:var(--cream2)}
.al-k .card{background:var(--ink2)}
.card.dk{background:#1D1D1D;color:#fff}
.card.pe{background:var(--petrol);color:#fff}
.card.mi{background:var(--mint);color:var(--petrol-dk)}
.card.ye{background:var(--yellow);color:#000}
.card.wh{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 30px -18px rgba(0,0,0,.25)}
.card h4{font-family:var(--fh);font-weight:800;font-size:26px;letter-spacing:-.01em;text-transform:uppercase;line-height:1}
.card p{font-size:16px;line-height:1.45;opacity:.78}
.ar{opacity:.4;display:grid;place-items:center}
.ar .ic{width:22px;height:22px}

/* padrão gráfico da Allmana */
.band{position:absolute;left:0;right:0;bottom:0;height:92px;z-index:1;background:#000;
  -webkit-mask:url(../assets/img/padrao-allmana.png) 0 34%/1180px auto repeat-x;mask:url(../assets/img/padrao-allmana.png) 0 34%/1180px auto repeat-x}
.al-k .band{background:var(--yellow)}

/* ícones */
.ic{display:inline-block;width:28px;height:28px;flex:none}
.ic svg{width:100%;height:100%;display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* entradas */
[data-a]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
[data-a="l"]{transform:translateX(-40px)}
[data-a="r"]{transform:translateX(40px)}
[data-a="s"]{transform:scale(.94)}
[data-a="f"]{transform:none}
.is-active [data-a]{opacity:1;transform:none;transition-delay:calc(var(--d,0) * 1ms + 180ms)}

/* ---------- navegação ---------- */
.hud{position:fixed;right:18px;bottom:16px;z-index:100;display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;background:rgba(20,20,20,.78);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13px;font-weight:600;letter-spacing:.06em;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s var(--ease)}
body.show-hud .hud,.hud:hover,.hud:focus-within{opacity:1;transform:none}
.hud button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;transition:background .2s}
.hud button:hover{background:rgba(255,255,255,.14)}
.hud button .ic{width:18px;height:18px}
.hud .ct{min-width:66px;text-align:center;font-variant-numeric:tabular-nums}
.prog{position:fixed;left:0;bottom:0;height:3px;background:var(--mint);z-index:99;width:0;transition:width .6s var(--ease)}

/* índice */
.index{position:fixed;inset:0;z-index:200;background:#0B0B0B;color:#fff;padding:7vh 6vw;overflow:auto;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s linear .4s}
.index.open{opacity:1;visibility:visible;transition:opacity .4s}
.index header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4vh}
.index header h3{font-family:var(--fh);font-weight:800;font-size:clamp(22px,2.4vw,34px);text-transform:uppercase;letter-spacing:-.01em}
.index header button{width:48px;height:48px;border-radius:50%;background:#1C1C1C;display:grid;place-items:center}
.index section{margin-bottom:3.6vh}
.index h4{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--yellow);margin-bottom:12px}
.index ol{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.index li button{width:100%;text-align:left;padding:14px 16px;border-radius:14px;background:#161616;display:flex;gap:12px;align-items:baseline;transition:background .2s}
.index li button:hover,.index li button.cur{background:#232323}
.index li button.cur{box-shadow:inset 0 0 0 2px var(--yellow)}
.index li b{font-size:12px;opacity:.5;font-variant-numeric:tabular-nums}
.index li span{font-size:15px;font-weight:600}

.rot{display:none}
@media (orientation:portrait) and (max-width:820px){
  .rot{display:flex;position:fixed;left:12px;right:12px;bottom:14px;z-index:150;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(20,20,20,.9);color:#fff;font-size:13px;line-height:1.35}
  .rot.off{display:none}
  .rot .ic{width:26px;height:26px;color:var(--yellow)}
  .rot button{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.06em;padding:8px 12px;border-radius:999px;background:#2A2A2A}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}}