/*═══════════════════════════════════════════════════════════════
  TIKITO TATTOO — style.css · conceito "Tinta & Cor"
  (em produção: mover para assets/css/ e ajustar os <link>)
═══════════════════════════════════════════════════════════════*/

/*═══════════════════════════════════════════════════════════════
  TOKENS — "TINTA & COR"
═══════════════════════════════════════════════════════════════*/
:root{
  --tinta:#050504;            /* fundo — preto de nanquim         */
  --carvao:#0c0c0b;           /* cartões                          */
  --fumaca:#151513;           /* superfícies elevadas             */
  --osso:#ece7db;             /* texto — branco-osso, tom de pele */
  --osso-2:rgba(236,231,219,.62);
  --mudo:rgba(236,231,219,.38);
  --ouro:#c9a961; --ouro-claro:#e4c98b; --ouro-escuro:#a8874a;
  --ouro-fosco:rgba(201,169,97,.07);
  --linha:rgba(201,169,97,.16);
  --linha-suave:rgba(236,231,219,.07);
  --vzion:#d9a3a6;
  /* pigmentos — a paleta que "acende" (tons de tinta, não neon) */
  --pg-1:#b3382e; --pg-2:#d98e32; --pg-3:#3f8f7a; --pg-4:#4a6fb3;
  --grad-cor:linear-gradient(100deg,var(--pg-1),var(--pg-2) 32%,var(--pg-3) 64%,var(--pg-4));
  --ff-display:'Playfair Display',serif;
  --ff-body:'Inter',sans-serif;
  --ff-script:'Alex Brush',cursive;
  --ease:cubic-bezier(.4,0,.2,1);
  --suave:cubic-bezier(.22,1,.36,1);
  --duo:grayscale(1) contrast(1.06) brightness(.92);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--tinta);
  scrollbar-width:thin;scrollbar-color:var(--ouro) #0a0a09}
body{background:var(--tinta);color:var(--osso);font-family:var(--ff-body);
  line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;font-variant-numeric:lining-nums}
body.travado{overflow:hidden}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:#0a0a09}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--ouro-escuro),var(--ouro));
  border-radius:8px;border:2px solid #0a0a09}
::selection{background:var(--ouro);color:#111}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:2px}


/* rótulo-estêncil (eyebrow padrão de todas as seções) */
.rotulo{display:flex;align-items:center;gap:12px;
  font-size:.66rem;font-weight:700;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ouro);white-space:nowrap}
.rotulo i{font-size:.7rem;transform:rotate(-42deg)}
.rotulo::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,var(--linha),transparent)}
.rotulo .rotulo-sub{color:var(--mudo);letter-spacing:.32em;font-weight:600}

.secao{max-width:1240px;margin:0 auto;padding:104px 32px 0}
.secao-titulo{font-family:var(--ff-display);font-weight:700;line-height:1.04;
  font-size:clamp(2.1rem,4.4vw,3.4rem);margin:18px 0 10px;letter-spacing:.01em}
.secao-titulo em{font-style:italic;color:var(--ouro-claro)}
.secao-desc{color:var(--osso-2);max-width:560px;font-size:.96rem;font-weight:300}

/* aparecer no scroll */
/* A entrada: o bloco chega desfocado e assenta. É o mesmo gesto de
   uma lente achando o foco — o conteúdo não pisca do nada nem é
   raspado por uma máscara, ele só termina de chegar. Curto de
   propósito: passou de meio segundo, vira espera. */
.surge{
  opacity:0;transform:translateY(18px);filter:blur(7px);
  transition:opacity .42s ease-out,transform .5s var(--suave),filter .5s ease-out;
}
.surge.visivel{ opacity:1;transform:none;filter:blur(0); }

/* Vindo de lado — pra seções que ganham mais entrando na diagonal
   do que subindo. O lado é escolhido no HTML, não aqui. */
.surge-esq{ opacity:0;transform:translateX(-42px);filter:blur(7px);
  transition:opacity .5s ease-out,transform .7s var(--suave),filter .55s ease-out; }
.surge-dir{ opacity:0;transform:translateX(42px);filter:blur(7px);
  transition:opacity .5s ease-out,transform .7s var(--suave),filter .55s ease-out; }
.surge-esq.visivel,
.surge-dir.visivel{ opacity:1;transform:none;filter:blur(0); }

@media(prefers-reduced-motion:reduce){
  .surge,.surge-esq,.surge-dir{ opacity:1;transform:none;filter:none; }
}

/*───────────────────────────────────────────────────────────────
  PRELOADER — a linha que desenha (agulha)
───────────────────────────────────────────────────────────────*/
.carrega{position:fixed;inset:0;z-index:1600;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(ellipse at 50% 38%,#0d0d0b 0%,var(--tinta) 68%);
  transition:opacity .7s ease,visibility .7s ease}
.carrega.some{opacity:0;visibility:hidden;pointer-events:none}
.carrega svg{width:min(340px,72vw);overflow:visible}
.carrega text{font-family:var(--ff-display);font-weight:900;font-size:74px;
  letter-spacing:.06em;fill:none;stroke:var(--ouro);stroke-width:1.1}
.carrega .car-sub{font-size:.62rem;letter-spacing:.5em;text-transform:uppercase;
  color:var(--mudo);opacity:0;animation:carSub .9s .7s ease forwards}
@keyframes carSub{to{opacity:1}}
.carrega .car-linha{width:0;height:1px;background:var(--ouro);
  animation:carLinha 1.1s .2s var(--suave) forwards}
@keyframes carLinha{to{width:min(340px,72vw)}}

/*───────────────────────────────────────────────────────────────
  PORTAL — INÍCIO RÁPIDO (Tikito ou V-zion)
  overlay de entrada: foto à esquerda, dois caminhos + contatos
  à direita. Controlado por script.js (#portal / .visivel).
───────────────────────────────────────────────────────────────*/
#portal{
  position:fixed;inset:0;z-index:1700;
  background:var(--tinta);
  display:flex;align-items:center;justify-content:center;
  padding:24px 20px;
  opacity:0;pointer-events:none;
  transition:opacity .55s ease;
  overflow:hidden;
}
#portal.visivel{
  opacity:1;pointer-events:all;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  align-items:safe center;
}
@media(min-width:641px) and (max-height:720px){
  #portal.visivel{align-items:flex-start}
}
.curta-card{animation:curtaCardIn .5s var(--suave) both}
.curta-card:nth-child(1){animation-delay:.15s}
.curta-card:nth-child(2){animation-delay:.25s}
.curta-card:nth-child(3){animation-delay:.35s}
.curta-card:nth-child(4){animation-delay:.45s}
.curta-pergunta{animation:curtaCardIn .5s var(--suave) .1s both}
.curta-skip-destaque{animation:curtaCardIn .5s var(--suave) .55s both}
.curta-foto{animation:curtaFotoIn .8s var(--suave) both}
@keyframes curtaCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes curtaFotoIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
@keyframes curtaSkipPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(201,169,97,0);border-color:var(--linha)}
  50%{box-shadow:0 0 18px 4px rgba(201,169,97,.25);border-color:var(--ouro)}
}
.curta-inner{
  display:flex;align-items:stretch;
  width:100%;max-width:900px;margin:auto;
  border-radius:20px;overflow:hidden;background:var(--tinta);
}

/* ── coluna esquerda — foto / logos ── */
.curta-foto-col{
  flex:0 0 48%;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 260px 190px at 50% 0px,var(--ouro-fosco) 0%,rgba(201,169,97,.06) 55%,transparent 80%),var(--tinta);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:230px;
}
.curta-foto-logos{position:absolute;top:65px;left:0;right:0;z-index:6;
  display:flex;align-items:center;justify-content:center;gap:40px}
.curta-foto-logos::before{
  content:'';position:absolute;top:-20px;left:-20px;width:58px;height:58px;
  clip-path:polygon(0 0,100% 0,0 100%);
  background:linear-gradient(135deg,var(--ouro-claro) 0%,rgba(201,169,97,.35) 55%,transparent 100%);
  box-shadow:3px 3px 12px rgba(0,0,0,.5);z-index:7;pointer-events:none;
}
.curta-foto-logo-item{filter:drop-shadow(0 4px 18px rgba(0,0,0,.8)) drop-shadow(0 0 12px rgba(201,169,97,.35))}
.curta-foto-logo-vzion{height:150px;width:auto;position:relative;left:-25px}
.curta-foto-logo-tikito{height:110px;width:auto;position:relative;left:25px}
.curta-foto{width:100%;object-fit:contain;object-position:center;display:block;margin-top:0;position:relative;z-index:1}
.curta-foto-col::after{
  content:'';position:absolute;top:0;left:0;width:100px;height:100px;
  clip-path:polygon(0 0,100% 0,0 100%);
  background:linear-gradient(135deg,var(--ouro-claro) 0%,rgba(201,169,97,.4) 50%,transparent 100%);
  box-shadow:4px 4px 16px rgba(0,0,0,.55);z-index:5;pointer-events:none;
}
.curta-foto-fade{display:none}
.curta-foto-social{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;margin-top:10px;padding-left:2px}
.curta-divider-elegant{display:flex;align-items:center;gap:12px;margin:16px 0 18px}
.curta-divider-elegant::before,.curta-divider-elegant::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--linha),transparent)}
.curta-divider-elegant span{color:var(--ouro);font-size:.62rem;flex-shrink:0;letter-spacing:1px}
.curta-foto-soc-btn{
  display:flex;align-items:center;gap:6px;padding:8px 15px;border-radius:999px;
  background:rgba(236,231,219,.04);border:1.5px solid var(--linha);
  color:var(--osso);font-size:.7rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:.25s;
}
.curta-foto-soc-btn:hover{border-color:var(--ouro);color:var(--ouro-claro);background:var(--ouro-fosco)}
.curta-foto-soc-btn i{color:#e1306c;font-size:.86rem}
.curta-foto-social-mobile{display:none}

/* ── coluna direita — cards ── */
.curta-cards-col{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:48px 40px 48px 28px;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 320px 220px at bottom right,var(--ouro-fosco) 0%,rgba(201,169,97,.05) 35%,transparent 75%);
}
.curta-cards-col::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 80% 15%,var(--ouro-fosco) 0%,rgba(201,169,97,.05) 30%,transparent 70%);
}
.curta-pergunta{font-size:.62rem;letter-spacing:3px;text-transform:uppercase;color:var(--mudo);margin:0 0 12px}
.curta-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;position:relative}
.curta-grid-secondary{display:none}
.curta-card-desktop-only{display:flex}
.curta-card{
  display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:11px;
  text-decoration:none;cursor:pointer;border:1px solid var(--linha-suave);
  background:rgba(236,231,219,.03);transition:all .25s var(--suave);
  font-family:inherit;text-align:left;width:100%;
}
.curta-card:hover{border-color:rgba(201,169,97,.4);background:var(--ouro-fosco);transform:translateX(4px)}
.curta-card:hover .cc-arrow{color:var(--ouro-claro);transform:translateX(3px)}
.cc-icon{width:40px;height:40px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.15rem;transition:.25s}
.cc-texts{flex:1;min-width:0}
.cc-label{color:var(--osso);font-weight:700;font-size:.87rem;line-height:1.2}
.cc-hint{color:var(--mudo);font-size:.68rem;margin-top:2px}
.cc-arrow{color:var(--osso-2);opacity:.5;font-size:.72rem;flex-shrink:0;transition:.25s}
.cc-wpp .cc-icon{background:transparent;border:1.5px solid rgba(201,169,97,.5);color:var(--ouro-claro)}
.cc-wpp .cc-label{color:var(--ouro-claro)}
.cc-agenda .cc-icon{background:transparent;border:1.5px solid rgba(201,169,97,.5);color:var(--ouro-claro)}
.cc-agenda .cc-label{color:var(--ouro-claro)}
.cc-loc .cc-icon{background:transparent;border:1.5px solid rgba(201,169,97,.5);color:var(--ouro-claro)}
.cc-loc .cc-label{color:var(--ouro-claro)}

.curta-skip-destaque{
  display:flex;align-items:center;gap:12px;padding:13px 18px;border-radius:12px;
  border:1.5px solid var(--linha);background:var(--ouro-fosco);
  text-decoration:none;transition:all .25s;margin-top:10px;cursor:pointer;
  font-family:inherit;width:100%;
}
.curta-skip-destaque:hover{border-color:var(--ouro);background:rgba(201,169,97,.12)}
.curta-skip-logo{height:36px;width:auto;flex-shrink:0;filter:drop-shadow(0 2px 8px rgba(201,169,97,.3))}
.curta-skip-texts{flex:1;display:flex;flex-direction:column;gap:2px}
.curta-skip-texts strong{color:var(--osso);font-size:.84rem;font-weight:700;letter-spacing:.5px}
.curta-skip-texts span{color:var(--ouro);opacity:.7;font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase}
.curta-skip-cta{font-size:.72rem;font-weight:700;color:var(--ouro-claro);white-space:nowrap;display:flex;align-items:center;gap:5px;flex-shrink:0}
.curta-skip-cta i{font-size:.65rem}
.curta-skip-mobile-wrap{display:none}
body.overlay-open{overflow:hidden;height:100%}

@media(max-width:640px){
  #portal{padding:0;align-items:flex-start;display:block;overflow:hidden;height:100dvh;max-height:100dvh}
  .curta-inner{flex-direction:column;border-radius:0;overflow:hidden;width:100%;max-width:100%;height:100dvh;min-height:100dvh;max-height:100dvh}
  .curta-foto-col{
    flex:1 1 auto;width:100%;height:auto;order:1;position:relative;
    padding-top:112px;justify-content:flex-start;align-items:center;overflow:hidden;
    display:flex;flex-direction:column;
    background:radial-gradient(ellipse 220px 150px at 50% 0px,var(--ouro-fosco) 0%,rgba(201,169,97,.06) 55%,transparent 80%),var(--tinta);
  }
  .curta-foto{width:100%;flex:1;min-height:0;max-height:none;object-fit:contain;object-position:center top;display:block;position:relative;z-index:1;margin-top:-30px}
  .curta-foto-fade{display:block;position:absolute;bottom:0;left:0;right:0;height:100px;
    background:linear-gradient(to bottom,transparent,var(--tinta) 100%);pointer-events:none;z-index:3}
  .curta-foto-logos{top:-8px;gap:120px;z-index:6}
  .curta-foto-logos::before{width:42px;height:42px;top:-14px;left:-14px}
  .curta-foto-col::after{width:70px;height:70px}
  .curta-foto-logo-item.curta-foto-logo-vzion{height:90px;width:auto}
  .curta-foto-logo-item.curta-foto-logo-tikito{height:68px;width:auto}
  .curta-foto-social{display:none}
  .curta-foto-social-mobile{
    display:flex;align-items:center;justify-content:center;gap:10px;
    position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:88%;z-index:8;
  }
  .curta-foto-social-mobile .curta-foto-soc-btn{flex:1;justify-content:center;background:rgba(5,5,4,.55);backdrop-filter:blur(6px)}
  .curta-skip-mobile-wrap{
    position:absolute;bottom:68px;top:auto;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;gap:8px;z-index:10;width:82%;align-items:center;
  }
  .curta-skip-mobile-wrap .curta-skip-destaque{
    position:static;top:auto;left:auto;transform:none;width:100%;min-width:0;margin:0;
    padding:10px 18px;gap:11px;animation:curtaSkipPulse 2.2s ease-in-out infinite;
    backdrop-filter:blur(6px);background:rgba(5,5,4,.7);border:1.5px solid rgba(201,169,97,.5);
  }
  .curta-skip-logo{height:34px}
  .curta-skip-texts strong{font-size:.82rem}
  .curta-skip-texts span{display:block;font-size:.58rem;letter-spacing:.8px;white-space:nowrap}
  .curta-skip-cta{font-size:.7rem;padding-right:6px}
  .curta-skip-destaque{padding:10px 18px;gap:11px;min-width:240px}
  .curta-cards-col{display:none}
  .curta-pergunta{display:none}
  .curta-grid{display:none}
  .curta-grid-secondary{order:1;display:flex;flex-direction:row;gap:8px;margin-top:0}
  .curta-card-desktop-only{display:none!important}
  .curta-grid-secondary .curta-card{flex:1;flex-direction:row;align-items:center;padding:10px 12px;gap:8px}
  .curta-grid-secondary .cc-hint{display:none}
  .curta-grid-secondary .cc-icon{width:32px;height:32px;font-size:.95rem;flex-shrink:0}
  .curta-grid-secondary .cc-label{font-size:.78rem}
  .curta-grid-secondary .cc-arrow{display:none}
}

/*───────────────────────────────────────────────────────────────
  TRANSIÇÃO ENTRE PÁGINAS — só o conteúdo sobe/some.
  Header, nav mobile e o preloader ficam de fora — nunca somem.
───────────────────────────────────────────────────────────────*/
main,
footer.rodape{transition:opacity .38s ease, transform .42s var(--suave)}
body.pg-entra main,
body.pg-entra footer.rodape{opacity:0;transform:translateY(22px)}
body.pg-sai main,
body.pg-sai footer.rodape{opacity:0;transform:translateY(-26px)}
body.pg-sai{pointer-events:none}

/*───────────────────────────────────────────────────────────────
  TOPBAR
───────────────────────────────────────────────────────────────*/
.topo{position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;gap:30px;
  padding:0 clamp(20px,4vw,44px);height:72px;
  border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease,height .4s ease}
.topo.solido{background:rgba(5,5,4,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-color:var(--linha-suave);height:62px}
/* O `margin-right:auto` vivia aqui e empurrava TUDO que vem depois
   pra direita — inclusive o endereço, que era pra ficar colado na
   marca. Quem empurra agora é o menu: o resultado no canto direito
   é o mesmo, e o endereço fica onde deve. */
.topo-marca{display:flex;align-items:center;gap:12px}
.topo-links{margin-left:auto}
.topo-logo{width:36px;height:36px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:radial-gradient(circle at 32% 28%,#1c1c19,#0a0a09);
  border:1px solid var(--ouro);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -6px rgba(201,169,97,.4)}
.topo-logo img{width:70%;height:70%;object-fit:contain}
.topo-marca-txt{display:flex;align-items:baseline;gap:10px}
.topo-nome{font-family:var(--ff-display);font-weight:900;font-size:1.16rem;
  letter-spacing:.08em}
.topo-nome b{color:var(--ouro)}
.topo-cidade{font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--mudo);transform:translateY(-1px)}
.topo-links{display:flex;align-items:center;gap:26px}
.topo-link{position:relative;font-size:.74rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--osso-2);
  padding:6px 0;transition:color .3s ease}
.topo-link::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--ouro);transition:width .35s var(--suave)}
.topo-link:hover{color:var(--osso)}
.topo-link:hover::after,.topo-link.ativo::after{width:100%}
.topo-link.ativo{color:var(--ouro-claro)}
.topo-acoes{display:flex;align-items:center;gap:14px}
.topo-entrar{font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--osso-2);display:flex;align-items:center;gap:8px;
  transition:color .3s}
.topo-entrar:hover{color:var(--ouro-claro)}
.btn-ouro{display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:#171204;background:linear-gradient(120deg,var(--ouro),var(--ouro-claro),var(--ouro));
  background-size:200% 100%;padding:13px 26px;border-radius:999px;
  transition:background-position .5s ease,transform .3s ease,box-shadow .3s ease}
.btn-ouro:hover{background-position:100% 0;transform:translateY(-1px);
  box-shadow:0 10px 28px -10px rgba(201,169,97,.45)}
.btn-linha{display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--osso);border:1px solid var(--linha);padding:12px 26px;border-radius:999px;
  transition:all .3s ease}
.btn-linha:hover{border-color:var(--ouro);color:var(--ouro-claro);background:var(--ouro-fosco)}

/*───────────────────────────────────────────────────────────────
  HERO — spread editorial
───────────────────────────────────────────────────────────────*/
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  max-width:1240px;margin:0 auto;padding:130px 32px 0}
.hero::before{content:'';position:absolute;top:-10%;left:-22%;width:70%;height:80%;
  background:radial-gradient(closest-side,rgba(201,169,97,.055),transparent 70%);
  pointer-events:none}
.hero-linha{flex:1;min-height:0;display:flex;align-items:center;
  gap:clamp(30px,4vw,70px);padding-bottom:40px}
.hero-texto{flex:1.15;min-width:0;position:relative;z-index:2}
.hero-titulo{font-family:var(--ff-display);line-height:.94;margin:26px 0 24px;
  font-size:clamp(3rem,7.6vw,6.4rem);letter-spacing:.005em}
.hero-titulo .ht-contorno{display:block;font-weight:700;color:transparent;
  -webkit-text-stroke:1.5px rgba(236,231,219,.75)}
.hero-titulo .ht-solido{display:block;font-weight:900;font-style:italic;
  padding-right:.06em}
.hero-titulo .ht-cor{display:block;font-weight:900;font-size:.62em;margin-top:14px;
  letter-spacing:.02em}
.hero-titulo .ht-cor .e{color:var(--osso-2);font-weight:400;font-style:italic;
  font-size:.8em;margin-right:.18em}
.tinta-cor{background:var(--grad-cor);background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:pigmento 9s ease-in-out infinite}
@keyframes pigmento{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-sub{color:var(--osso-2);max-width:470px;font-size:1rem;font-weight:300}
.hero-sub b{color:var(--osso);font-weight:600}
.hero-ctas{display:flex;align-items:center;gap:16px;margin-top:34px;flex-wrap:wrap}
.hero-fatos{display:flex;align-items:center;gap:14px;margin-top:44px;
  font-size:.76rem;letter-spacing:.08em;color:var(--mudo);flex-wrap:wrap;row-gap:8px}
.hero-fatos>span{white-space:nowrap}
.hero-fatos b{color:var(--ouro-claro);font-weight:700;font-size:.92rem;
  font-family:var(--ff-display)}
.hero-fatos .hf-sep{color:var(--linha);font-size:.5rem}

@media(max-width:480px){
  .hero-fatos{gap:9px;font-size:.66rem}
  .hero-fatos b{font-size:.82rem}
}

/* retrato com moldura deslocada */
.hero-visual{flex:.85;position:relative;min-width:0;display:flex;justify-content:center}
.hero-quadro{position:relative;width:min(400px,100%)}
.hero-quadro::before{content:'';position:absolute;inset:0;
  transform:translate(18px,18px);border:1px solid var(--linha);border-radius:4px;
  transition:transform .6s var(--suave)}
.hero-quadro:hover::before{transform:translate(10px,10px)}
.hero-quadro img{position:relative;z-index:1;width:100%;aspect-ratio:4/5.1;
  object-fit:cover;border-radius:4px;filter:var(--duo);
  transition:filter 1.1s ease}
.hero-quadro:hover img{filter:grayscale(0) contrast(1.03)}
.hero-assina{position:absolute;z-index:3;right:-6px;bottom:-30px;
  font-family:var(--ff-script);font-size:2.5rem;color:var(--ouro-claro);
  transform:rotate(-5deg);text-shadow:0 4px 22px rgba(0,0,0,.7)}
.letreiro-hero{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

/*───────────────────────────────────────────────────────────────
  LETREIRO — flash sheet (marquee)
───────────────────────────────────────────────────────────────*/
.letreiro{margin-top:20px;border-top:1px solid var(--linha-suave);
  border-bottom:1px solid var(--linha-suave);overflow:hidden;
  padding:20px 0;position:relative}
.letreiro-faixa{display:flex;gap:54px;width:max-content;
  animation:letreiro 30s linear infinite}
.letreiro-item{display:flex;align-items:center;gap:54px;
  font-family:var(--ff-display);font-size:1.3rem;font-style:italic;
  color:var(--osso-2);white-space:nowrap}
.letreiro-item i{font-size:.62rem;color:var(--ouro);transform:rotate(-42deg)}
.letreiro-item .li-cor{color:transparent;background:var(--grad-cor);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;
  animation:pigmento 9s ease-in-out infinite}
@keyframes letreiro{to{transform:translateX(-50%)}}

/*───────────────────────────────────────────────────────────────
  PORTFÓLIO — carrossel que acende
───────────────────────────────────────────────────────────────*/
/* carrossel infinito — trilha duplicada via JS, loop contínuo sem costura */
/* Sem máscara nas bordas. O apagado nas pontas fazia a peça
   parecer cortada pela metade em vez de continuar passando —
   o loop já conta sozinho que a fita não tem fim. */
.pf-carrossel{position:relative;margin-top:32px;overflow:hidden}
.pf-trilha{display:flex;gap:18px;width:max-content;will-change:transform;
  animation:pfLoop 34s linear infinite}
.pf-carrossel:hover .pf-trilha,
.pf-carrossel:focus-within .pf-trilha{animation-play-state:paused}
@keyframes pfLoop{to{transform:translateX(var(--pf-fim,-50%))}}

.pf-card{position:relative;flex:0 0 auto;width:270px;height:360px;
  overflow:hidden;border-radius:6px;cursor:pointer;
  background:var(--carvao);border:1px solid transparent;
  transition:border-color .4s ease}
.pf-card img{width:100%;height:100%;object-fit:cover;
  filter:var(--duo);
  transition:filter .9s ease}
.pf-card:hover,.pf-card:focus-visible{border-color:var(--linha)}
.pf-card:hover img,.pf-card:focus-visible img{
  filter:grayscale(0) contrast(1.04) brightness(.98)}
.pf-card::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(5,5,4,.88));
  opacity:.6;transition:opacity .5s ease}
.pf-card:hover::after,.pf-card:focus-visible::after{opacity:1}
.pf-card .peca-info{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.peca-cat{font-size:.6rem;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:var(--osso);
  border-left:2px solid var(--ouro);padding-left:10px}
.peca-mais{font-size:.62rem;letter-spacing:.14em;color:var(--ouro-claro);
  display:flex;align-items:center;gap:7px;white-space:nowrap}
.peca-vazia{text-align:center;color:var(--mudo);
  padding:60px 20px;font-size:.86rem}
.portfolio-rodape{display:flex;justify-content:center;margin-top:34px}


/*───────────────────────────────────────────────────────────────
  CURSOS — catálogo editorial
───────────────────────────────────────────────────────────────*/
.cursos-lista{display:flex;flex-direction:column;margin-top:34px;
  border-top:1px solid var(--linha)}
/* A linha que separa um curso do outro era um border-bottom, e
   borda de 1px sempre termina em canto reto. Virou uma barrinha
   de 2px com as pontas arredondadas — e some no último item. */
.curso{display:grid;grid-template-columns:210px 1fr auto;gap:clamp(20px,3vw,40px);
  align-items:center;padding:26px 8px;
  transition:background .4s ease,padding .4s var(--suave);position:relative}
.curso::after{
  content:'';position:absolute;left:8px;right:8px;bottom:0;height:2px;
  border-radius:2px;background:var(--linha-suave);
  transition:left .4s var(--suave),background .4s ease;
}
.curso:last-child::after{ display:none; }
/* Hover é só cor. O deslocamento e o zoom faziam a linha inteira
   pular a cada passada do mouse — numa lista de itens grandes,
   isso é a página tremendo, não resposta ao ponteiro. */
.curso:hover::after{ background:var(--linha); }
.curso:hover{
  padding-left:18px}
.curso-capa{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:3/2}
.curso-capa img{width:100%;height:100%;object-fit:cover;filter:var(--duo);
  transition:filter .8s ease,transform .8s var(--suave)}
.curso:hover .curso-capa img{filter:grayscale(0) contrast(1.03)}
.curso-breve-fita{position:absolute;top:10px;left:10px;z-index:2;
  font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(5,5,4,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--ouro-claro);
  border:1px solid var(--linha);padding:6px 10px;border-radius:999px}
.curso-nome{font-family:var(--ff-display);font-weight:700;font-size:1.4rem;
  line-height:1.15}
.curso-desc{color:var(--mudo);font-size:.84rem;margin-top:8px;max-width:520px}
.curso-meta{display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap;
  font-size:.68rem;letter-spacing:.1em;color:var(--osso-2)}
.curso-meta i{color:var(--ouro);margin-right:6px;font-size:.66rem}
.curso-ir{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ouro-claro);padding:13px 22px;border:1px solid var(--linha);
  border-radius:999px;transition:all .35s ease}
.curso-ir i{transition:transform .35s ease}
.curso:hover .curso-ir{background:var(--ouro);border-color:var(--ouro);color:#171204}

.curso.indisponivel .curso-ir{color:var(--mudo);border-style:dashed;pointer-events:none}
.curso.indisponivel:hover .curso-ir{background:none;border-color:var(--linha-suave);color:var(--mudo)}

/*───────────────────────────────────────────────────────────────
  SORTEIO — o bilhete dourado
───────────────────────────────────────────────────────────────*/
.sorteio-wrap{display:flex;justify-content:center;margin-top:40px}
.bilhete{position:relative;width:min(880px,100%);display:grid;
  grid-template-columns:1.05fr 1fr;background:var(--carvao);
  border:1px solid var(--linha);border-radius:10px;overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.bilhete::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 300px at 85% 0%,rgba(201,169,97,.09),transparent 65%)}
.bilhete-foto{position:relative;min-height:320px}
.bilhete-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:var(--duo);transition:filter 1s ease}
.bilhete:hover .bilhete-foto img{filter:grayscale(0) contrast(1.03)}
.bilhete-foto::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 55%,var(--carvao))}
.bilhete-vivo{position:absolute;top:16px;left:16px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;font-size:.6rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--osso);
  background:rgba(5,5,4,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--linha);padding:8px 14px;border-radius:999px}
.bilhete-vivo em{width:7px;height:7px;border-radius:50%;background:#4caf6d;
  animation:pulsa 1.6s ease infinite}
@keyframes pulsa{50%{opacity:.35;transform:scale(.8)}}
/* picote vertical */
.bilhete-corpo{position:relative;padding:36px 38px 30px;
  border-left:1px dashed rgba(201,169,97,.35)}
.bilhete-corpo::before,.bilhete-corpo::after{content:'';position:absolute;
  left:-13px;width:26px;height:26px;border-radius:50%;background:var(--tinta);
  border:1px solid var(--linha)}
.bilhete-corpo::before{top:-14px}
.bilhete-corpo::after{bottom:-14px}
.bilhete-rotulo{font-size:.58rem;font-weight:700;letter-spacing:.4em;
  text-transform:uppercase;color:var(--ouro)}
.bilhete-titulo{font-family:var(--ff-display);font-weight:700;font-size:1.7rem;
  line-height:1.15;margin:12px 0 8px}
.bilhete-desc{color:var(--mudo);font-size:.82rem;max-width:380px}
.progresso{margin-top:22px}
.progresso-barra{height:5px;border-radius:99px;background:var(--linha-suave);
  overflow:hidden;position:relative}
.progresso-fill{height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--ouro-escuro),var(--ouro-claro));
  position:relative;transition:width 1.4s var(--suave)}
.progresso-fill::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-100%);animation:brilho 2.6s 1.2s ease infinite}
@keyframes brilho{60%,100%{transform:translateX(100%)}}
.progresso-info{display:flex;justify-content:space-between;margin-top:9px;
  font-size:.66rem;letter-spacing:.1em;color:var(--mudo)}
.progresso-info b{color:var(--ouro-claro)}
.bilhete-rodape{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-top:24px;flex-wrap:wrap}
.bilhete-preco span{display:block;font-size:.58rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--mudo)}
.bilhete-preco b{font-family:var(--ff-display);font-weight:900;font-size:2rem;
  color:var(--osso)}
.bilhete-preco b small{font-size:.9rem;color:var(--ouro);font-weight:700}
.bilhete-datas{display:flex;gap:20px;font-size:.68rem;color:var(--osso-2);
  letter-spacing:.06em;margin-top:14px;flex-wrap:wrap}
.bilhete-datas i{color:var(--ouro);margin-right:7px}
.sorteio-pontos{display:flex;justify-content:center;gap:9px;margin-top:22px}
.sorteio-ponto{width:7px;height:7px;border-radius:50%;background:var(--linha);
  transition:all .3s ease}
.sorteio-ponto.ativo{background:var(--ouro);transform:scale(1.25)}


/*───────────────────────────────────────────────────────────────
  REGRAS — ficha técnica do estúdio
───────────────────────────────────────────────────────────────*/
.regras-grade{display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 clamp(30px,5vw,70px);margin-top:26px}
.regra-bloco{border-top:1px solid var(--linha);padding:20px 0 26px}
.regra-cat{display:flex;align-items:center;gap:11px;font-size:.66rem;
  font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ouro);margin-bottom:14px}
.regra-linha{display:grid;grid-template-columns:128px 1fr;gap:14px;
  padding:8px 0;font-size:.82rem;border-bottom:1px dashed var(--linha-suave)}
.regra-linha:last-child{border-bottom:none}
.regra-chave{color:var(--osso);font-weight:600;font-size:.76rem;
  letter-spacing:.04em}
.regra-valor{color:var(--mudo);font-weight:300}
.regra-aviso{grid-column:1/-1;margin-top:8px;display:flex;gap:16px;
  align-items:flex-start;background:var(--ouro-fosco);
  border:1px solid var(--linha);border-left:3px solid var(--ouro);
  border-radius:6px;padding:20px 22px}
.regra-aviso i{color:var(--ouro-claro);font-size:1.1rem;margin-top:2px}
.regra-aviso p{color:var(--osso-2);font-size:.84rem}
.regra-aviso b{color:var(--osso)}

/*───────────────────────────────────────────────────────────────
  LOCALIZAÇÃO + CTA FINAL
───────────────────────────────────────────────────────────────*/
.fim{text-align:center;padding-top:118px}
.fim-titulo{font-family:var(--ff-display);font-weight:700;line-height:1.06;
  font-size:clamp(2.4rem,5.6vw,4.4rem)}
.fim-titulo em{font-style:italic;color:var(--ouro-claro)}
.fim-sub{color:var(--mudo);margin-top:16px;font-size:.94rem}
.fim-ctas{display:flex;justify-content:center;gap:16px;margin-top:34px;flex-wrap:wrap}
.local{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--linha-suave);border:1px solid var(--linha-suave);
  border-radius:8px;overflow:hidden;margin-top:64px}
.local-item{background:var(--tinta);padding:24px 22px;text-align:left;
  display:flex;gap:15px;align-items:flex-start;transition:background .35s ease}
a.local-item:hover{background:var(--carvao)}
.local-item i{color:var(--ouro);font-size:1rem;margin-top:3px}
.local-item span{display:block;font-size:.58rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--mudo)}
.local-item b{font-size:.86rem;font-weight:600;color:var(--osso);margin-top:4px;
  display:block;line-height:1.4}

/*───────────────────────────────────────────────────────────────
  RODAPÉ
───────────────────────────────────────────────────────────────*/
.rodape{position:relative;margin-top:130px;padding:0 32px;overflow:hidden;
  background:linear-gradient(180deg,transparent,var(--carvao) 160px)}
.rodape::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--linha) 20%,var(--linha) 80%,transparent)}

/* CTA — convite final antes das colunas, tom editorial */
.rodape-cta{position:relative;z-index:1;max-width:1240px;margin:0 auto;
  padding:64px 0 46px;border-bottom:1px solid var(--linha-suave);
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap}
.rodape-cta-titulo{font-family:var(--ff-display);font-weight:700;
  font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.1;margin-top:14px}
.rodape-cta-titulo em{font-style:italic;color:var(--ouro-claro)}

.rodape-topo{position:relative;z-index:1;max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:56px;padding:52px 0 118px}
.rodape-col--marca .rodape-marca{font-family:var(--ff-display);font-weight:900;
  font-size:1.5rem;letter-spacing:.06em}
.rodape-marca b{color:var(--ouro)}
.rodape-tag{font-size:.82rem;line-height:1.75;color:var(--osso-2);
  max-width:340px;margin:16px 0 22px}

/* ícones sociais — isolados de .rodape-links pra não herdar estilo de lista */
.rodape-social{display:flex;gap:12px}
.rodape-soc{width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--linha-suave);display:flex;align-items:center;
  justify-content:center;color:var(--osso-2);font-size:.92rem;line-height:1;
  transition:all .3s ease}
.rodape-soc i{display:block}
.rodape-soc:hover{border-color:var(--ouro);color:#171204;
  background:var(--ouro);transform:translateY(-3px)}

.rodape-titulo{display:block;font-size:.64rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ouro);margin-bottom:20px}
.rodape-col{display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.rodape-links a{font-size:.84rem;color:var(--osso-2);line-height:1.6;
  transition:color .3s ease,transform .3s var(--suave);display:inline-flex;
  align-items:flex-start;gap:9px}
.rodape-links a i{color:var(--ouro);font-size:.78rem;margin-top:3px;flex:0 0 auto}
.rodape-links a:hover{color:var(--ouro-claro);transform:translateX(3px)}

/* assinatura tipográfica em contorno, atrás da base do rodapé */
.rodape-marca-fundo{position:absolute;z-index:0;left:50%;bottom:-.16em;
  transform:translateX(-50%);font-family:var(--ff-display);font-weight:900;
  font-size:clamp(4.5rem,15vw,11.5rem);letter-spacing:.02em;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--linha-suave);
  white-space:nowrap;pointer-events:none;user-select:none}

.rodape-base{position:relative;z-index:1;max-width:1240px;margin:0 auto;
  padding:26px 0 30px;border-top:1px solid var(--linha-suave);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.68rem;color:var(--mudo)}
.rodape-dev a{color:var(--ouro);font-weight:600}
.rodape-dev a:hover{color:var(--ouro-claro)}
.rodape-dev .cod{color:var(--linha);margin-left:4px}


/*───────────────────────────────────────────────────────────────
  LIGHTBOX (galeria da peça — sem Bootstrap)
───────────────────────────────────────────────────────────────*/
.caixa-luz{position:fixed;inset:0;z-index:1400;display:none;
  flex-direction:column;background:rgba(4,4,3,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.caixa-luz.aberta{display:flex}
.cl-topo{display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,3vw,34px)}
.cl-cat{font-size:.62rem;font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ouro-claro);
  border-left:2px solid var(--ouro);padding-left:12px}
.cl-fechar{width:44px;height:44px;border-radius:50%;
  border:1px solid var(--linha);color:var(--osso);font-size:.9rem;
  display:flex;align-items:center;justify-content:center;transition:all .3s ease}
.cl-fechar:hover{background:var(--ouro);color:#171204;border-color:var(--ouro)}
.cl-palco{flex:1;position:relative;display:flex;align-items:center;
  justify-content:center;padding:0 70px;min-height:0}
.cl-palco img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;
  animation:clSurge .45s var(--suave)}
@keyframes clSurge{from{opacity:0;transform:scale(.97)}}
.cl-nav{position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;border:1px solid var(--linha);
  color:var(--osso);display:flex;align-items:center;justify-content:center;
  transition:all .3s ease;background:rgba(5,5,4,.4)}
.cl-nav:hover{background:var(--ouro);color:#171204;border-color:var(--ouro)}
.cl-ant{left:clamp(10px,2vw,26px)}
.cl-prox{right:clamp(10px,2vw,26px)}
.cl-tiras{display:flex;gap:10px;justify-content:center;
  padding:16px 20px calc(18px + env(safe-area-inset-bottom))}
.cl-tira{width:62px;height:62px;border-radius:4px;overflow:hidden;
  border:1px solid var(--linha-suave);opacity:.5;cursor:pointer;
  transition:all .3s ease;padding:0}
.cl-tira img{width:100%;height:100%;object-fit:cover}
.cl-tira.ativa{opacity:1;border-color:var(--ouro)}
.cl-tira:hover{opacity:.85}

/*───────────────────────────────────────────────────────────────
  NAV MOBILE — curva com a logo no centro (mantida e refinada)
───────────────────────────────────────────────────────────────*/
.mnav{position:fixed;left:0;right:0;bottom:0;z-index:950;display:none}
.mnav-curva{display:block;width:100%;height:20px;margin-bottom:-1px}
.mnav-inner{display:flex;align-items:stretch;justify-content:space-around;
  background:#080807;padding:0 4px calc(6px + env(safe-area-inset-bottom))}
.mnav-item{flex:1;display:flex;flex-direction:column;align-items:center;
  gap:3px;padding:5px 2px;color:var(--mudo);font-size:.5rem;
  letter-spacing:.1em;text-transform:uppercase;transition:color .3s ease}
.mnav-item i{font-size:.86rem}
.mnav-item.ativo,.mnav-item:hover{color:var(--ouro-claro)}
.mnav-fab-wrap{flex:0 0 64px;position:relative}
.mnav-fab{position:absolute;left:50%;top:-18px;transform:translateX(-50%);
  width:46px;height:46px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 32% 28%,#1c1c19,#0a0a09);
  border:1px solid var(--ouro);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px -6px rgba(201,169,97,.4);
  font-family:var(--ff-display);font-weight:900;color:var(--ouro-claro);font-size:1.1rem}
.mnav-fab img{width:70%;height:70%;object-fit:contain}

/*───────────────────────────────────────────────────────────────
  RESPONSIVO
───────────────────────────────────────────────────────────────*/
@media(max-width:1080px){
  .topo-links{display:none}
  .pf-card{width:240px;height:320px}
}
@media(max-width:900px){
  .hero{padding-top:118px;min-height:0}
  .hero-linha{flex-direction:column;align-items:stretch;gap:54px;padding-bottom:30px}
  .hero-visual{width:100%;justify-content:center}
  .hero-quadro{width:min(340px,86%)}
  .letreiro-hero{margin-top:0}
  .bilhete{grid-template-columns:1fr}
  .bilhete-foto{min-height:230px}
  .bilhete-foto::after{background:linear-gradient(180deg,transparent 55%,var(--carvao))}
  .bilhete-corpo{border-left:none;border-top:1px dashed rgba(201,169,97,.35)}
  .bilhete-corpo::before{top:-13px;left:-14px;width:26px;height:26px}
  .bilhete-corpo::after{bottom:auto;top:-13px;left:auto;right:-14px}
  .regras-grade{grid-template-columns:1fr}
  .local{grid-template-columns:1fr 1fr}
  .rodape-topo{grid-template-columns:1fr 1fr;gap:40px 24px}
  .rodape-col--marca{grid-column:1/-1}
}
@media(max-width:760px){
  .secao{padding:84px 20px 0}
  .hero{padding-left:20px;padding-right:20px}
  .mnav{display:block}
  .topo-acoes .btn-ouro{display:none}
  .rodape{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .rodape-topo{grid-template-columns:1fr;gap:34px;padding-bottom:38px}
  .rodape-col--marca{grid-column:auto}
  .rodape-base{flex-direction:column;align-items:flex-start;gap:6px}
  .rodape-cta{flex-direction:column;align-items:flex-start;padding:48px 0 36px}
  .rodape-cta .btn-ouro{align-self:stretch;justify-content:center}
  .rodape-marca-fundo{font-size:16vw}
  .pf-card{width:190px;height:255px}
  .pf-trilha{gap:12px}
  /* imagem à esquerda como no desktop, tudo mais compacto e o
     botão na MESMA linha dos detalhes — economiza uma linha    */
  .curso{
    grid-template-columns:82px 1fr;
    grid-template-areas:"capa info" "capa acao";
    column-gap:12px;row-gap:8px;padding:14px 4px;align-items:start;
  }
  .curso-capa{grid-area:capa;align-self:stretch;aspect-ratio:3/4}
  .curso-info{grid-area:info;display:flex;flex-direction:column;justify-content:center}
  .curso-nome{font-size:.92rem;line-height:1.18}
  .curso-desc{font-size:.68rem;margin-top:4px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .curso-meta{
    display:flex;align-items:center;gap:8px;margin-top:8px;
    font-size:.56rem;letter-spacing:.04em;
  }
  /* 2 detalhes por linha + o botão ao lado, tudo numa faixa só */
  .curso-meta > span:nth-child(n+3){display:none}
  .curso-meta i{margin-right:4px;font-size:.54rem}
  .curso-ir{
    grid-area:acao;justify-self:end;align-self:center;margin-left:0;
    padding:7px 12px;font-size:.54rem;letter-spacing:.1em;
    gap:6px;white-space:nowrap;
  }
  .curso-meta{padding-right:0;flex-wrap:nowrap;overflow:hidden}
  .curso.indisponivel .curso-ir{border-style:dashed}
  .curso-ir i{font-size:.5rem}
  .local{grid-template-columns:1fr}
  .hero-assina{right:6px}
}

/*───────────────────────────────────────────────────────────────
  MOVIMENTO REDUZIDO
───────────────────────────────────────────────────────────────*/
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .surge{opacity:1;transform:none}
  html{scroll-behavior:auto}
}


/* miudezas dependentes de JS */
section[id]{scroll-margin-top:84px}
/* Entrada coreografada do hero.

   Ela disparava no `body.pronto`, ou seja, no carregamento da
   página. Só que nesta home o hero não é a primeira coisa: vem
   depois dos cursos e do carrossel. A coreografia acontecia
   inteirinha fora da tela e, quando você finalmente rolava até
   lá, já tinha acabado — parecia que não existia.

   Agora dispara quando a seção entra em quadro, pelo mesmo
   observador do resto. A classe `surge` no <section> é só o
   gatilho; ela não pinta nada por conta própria. */
.hero.surge{ opacity:1;transform:none;filter:none;transition:none; }
.hero .rotulo,.hero-titulo>span,.hero-sub,.hero-ctas,.hero-fatos,.hero-visual{
  opacity:0}
.hero.visivel .rotulo,.hero.visivel .hero-titulo>span,.hero.visivel .hero-sub,
.hero.visivel .hero-ctas,.hero.visivel .hero-fatos,.hero.visivel .hero-visual{
  animation:heroEntra .9s var(--suave) forwards}
.hero.visivel .rotulo{animation-delay:.05s}
.hero.visivel .hero-titulo .ht-contorno{animation-delay:.15s}
.hero.visivel .hero-titulo .ht-solido{animation-delay:.26s}
.hero.visivel .hero-titulo .ht-cor{animation-delay:.37s}
.hero.visivel .hero-sub{animation-delay:.5s}
.hero.visivel .hero-ctas{animation-delay:.6s}
.hero.visivel .hero-fatos{animation-delay:.72s}
.hero.visivel .hero-visual{animation-delay:.35s;animation-duration:1.1s}
/* O texto do estúdio autoral entra pela esquerda e a arte pela
   direita — as duas metades se encontram no meio em vez de
   subirem juntas. Numa tela larga isso lê como abertura de
   cortina; subindo, lê como carregamento. */
@keyframes heroEntra{from{opacity:0;transform:translate(-34px,6px)}
  to{opacity:1;transform:none}}
@keyframes heroEntraDir{from{opacity:0;transform:translate(38px,6px)}
  to{opacity:1;transform:none}}
.hero.visivel .hero-visual{ animation-name:heroEntraDir; }
@media(prefers-reduced-motion:reduce){
  .hero .rotulo,.hero-titulo>span,.hero-sub,.hero-ctas,.hero-fatos,.hero-visual{opacity:1}
}
.car-traco{stroke-dasharray:900;stroke-dashoffset:900;
  animation:desenha 1.5s .1s var(--suave) forwards}
@keyframes desenha{to{stroke-dashoffset:0}}

/*── Correções pontuais do topo (desenho da v1 mantido) ──*/
/* ── O QUE CORRIGE O CONTEÚDO ATRAVESSANDO AS BARRAS (Safari) ──
   1) as duas barras são 100% opacas em qualquer posição de scroll;
   2) sem backdrop-filter nelas — blur em elemento fixed no Safari é
      justamente o que deixa o conteúdo "vazar";
   3) cada barra ganha camada própria de composição (translateZ). */
.topo,.topo.solido{background:#070706;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transform:translateZ(0);-webkit-transform:translateZ(0)}
.mnav{transform:translateZ(0);-webkit-transform:translateZ(0)}
.mnav-inner{background:#080807}
/* o corte de arrasto lateral já é feito pelo overflow-x:hidden do body
   (linha ~36) — duplicar aqui no html quebra a propagação do overflow
   do body pra janela e faz o navegador tratar os dois como caixas de
   rolagem independentes, cada uma com a própria scrollbar (a 2ª barra
   "colada" à esquerda da nativa que aparecia em toda página). */
@media(max-width:760px){
  /* altura fixa: a barra de endereço do celular dispara scroll o tempo todo e
     o header remontava a altura a cada vez — daí a sensação de nada estar preso */
  .topo,.topo.solido{height:62px;transition:background .35s ease,border-color .35s ease}
  .topo-logo{width:28px;height:28px}
  .topo-marca{gap:9px}
  /* rótulos de seção: sem nowrap. "regras & cuidados — leia antes de agendar"
     não cabe em 360px e empurrava a página inteira de lado */
  .rotulo{flex-wrap:wrap;white-space:normal;row-gap:6px;letter-spacing:.28em}
  .rotulo .rotulo-sub{letter-spacing:.18em}
  .rotulo::after{min-width:24px}
}

/* Safari/browser sem blur: barra sólida em vez de deixar o conteúdo atravessar */
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .topo.solido{background:#0a0a09}
}


/*═════════════════ PÁGINAS INTERNAS — cabeçalho editorial ═════════════════*/
.pag-hero{max-width:1240px;margin:0 auto;padding:150px 32px 0}
.pag-hero .secao-titulo{font-size:clamp(2.4rem,5.4vw,4.2rem)}
.pag-volta{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-size:.66rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--mudo);transition:color .3s ease}
.pag-volta:hover{color:var(--ouro-claro)}
.pag-volta i{font-size:.6rem}
@media(max-width:760px){.pag-hero{padding:118px 20px 0}}

/*═════════════════ SORTEIOS — vitrine de bilhetes ═════════════════*/
.sorteios-grade{display:grid;grid-template-columns:1fr;gap:34px;margin-top:44px}
.sorteios-grade .bilhete{width:100%;cursor:pointer;transition:transform .45s var(--suave),box-shadow .45s ease}
.sorteios-grade .bilhete:hover{transform:translateY(-4px);
  box-shadow:0 50px 100px -50px rgba(0,0,0,1),0 0 0 1px var(--linha)}
.bilhete-encerrado{opacity:.55;pointer-events:none;filter:grayscale(.4)}
.bilhete-abrir{display:inline-flex;align-items:center;gap:10px;
  font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ouro-claro);padding:14px 24px;border:1px solid var(--linha);
  border-radius:999px;transition:all .35s ease}
.bilhete-abrir i{transition:transform .35s ease}
.bilhete:hover .bilhete-abrir{background:var(--ouro);border-color:var(--ouro);color:#171204}
.bilhete:hover .bilhete-abrir i{transform:translateX(4px)}

/*── modal do sorteio — escolher números ──*/
.ms{position:fixed;inset:0;z-index:1400;display:none;align-items:flex-end;
  justify-content:center;background:rgba(4,4,3,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ms.aberta{display:flex}
.ms-caixa{width:min(760px,100%);max-height:92vh;max-height:92dvh;display:flex;
  flex-direction:column;background:var(--carvao);border:1px solid var(--linha);
  border-radius:14px 14px 0 0;overflow:hidden;
  animation:msEntra .5s var(--suave)}
@keyframes msEntra{from{transform:translateY(40px);opacity:0}}
@media(min-width:780px){
  .ms{align-items:center;padding:30px}
  .ms-caixa{border-radius:14px}
}
.ms-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:24px 26px 0}
.ms-rotulo{font-size:.56rem;font-weight:700;letter-spacing:.4em;
  text-transform:uppercase;color:var(--ouro)}
.ms-titulo{font-family:var(--ff-display);font-weight:700;font-size:1.45rem;
  line-height:1.15;margin-top:8px}
.ms-fechar{width:40px;height:40px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--linha);color:var(--osso);font-size:.82rem;
  display:flex;align-items:center;justify-content:center;transition:all .3s ease}
.ms-fechar:hover{background:var(--ouro);color:#171204;border-color:var(--ouro)}
.ms-corpo{padding:16px 26px 20px;overflow-y:auto;flex:1;min-height:0}
.ms-meta{display:flex;flex-wrap:wrap;gap:14px 22px;margin:8px 0 16px;
  font-size:.7rem;color:var(--osso-2);letter-spacing:.05em}
.ms-meta i{color:var(--ouro);margin-right:7px}
.ms-meta b{color:var(--osso)}
.ms-passos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 20px}
.ms-passo{border:1px solid var(--linha-suave);border-radius:10px;padding:12px 12px 11px;
  font-size:.68rem;color:var(--osso-2);line-height:1.45}
.ms-passo b{display:flex;align-items:center;gap:8px;color:var(--ouro-claro);
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:6px}
.ms-passo b em{font-family:var(--ff-display);font-style:normal;font-size:.92rem}
@media(max-width:640px){.ms-passos{grid-template-columns:1fr}}
.ms-legenda{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 12px;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mudo)}
.ms-legenda i{width:13px;height:13px;border-radius:3px;display:inline-block;
  vertical-align:-2px;margin-right:6px;border:1px solid var(--linha)}
.ms-legenda .lg-livre i{background:transparent}
.ms-legenda .lg-sel i{background:var(--ouro);border-color:var(--ouro)}
.ms-legenda .lg-res i{background:rgba(236,231,219,.12);border-color:transparent}
.ms-legenda .lg-pago i{background:rgba(201,169,97,.22);border-color:transparent}
.ms-numeros{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:7px}
.ms-num{aspect-ratio:1;border:1px solid var(--linha-suave);border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--osso-2);transition:all .2s ease;cursor:pointer;user-select:none}
.ms-num:hover{border-color:var(--ouro);color:var(--osso)}
.ms-num.sel{background:var(--ouro);border-color:var(--ouro);color:#171204;font-weight:800}
.ms-num.res,.ms-num.pago{cursor:not-allowed;pointer-events:none}
.ms-num.res{background:rgba(236,231,219,.07);border-color:transparent;color:var(--mudo)}
.ms-num.pago{background:rgba(201,169,97,.16);border-color:transparent;
  color:rgba(201,169,97,.55);text-decoration:line-through}
.ms-rodape{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 26px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linha-suave);background:var(--fumaca);flex-wrap:wrap}
.ms-resumo{font-size:.74rem;color:var(--osso-2)}
.ms-resumo b{color:var(--ouro-claro);font-size:.95rem}
.ms-resumo .ms-nums-sel{display:block;font-size:.62rem;color:var(--mudo);
  margin-top:3px;max-width:340px}
.ms-acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ms-limpar{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mudo);transition:color .3s ease}
.ms-limpar:hover{color:var(--osso)}
.btn-ouro.desativado{opacity:.4;pointer-events:none}

/*═════════════════ RESERVAS — área do cliente ═════════════════*/
.aviso-simu{display:flex;align-items:center;gap:12px;margin-top:26px;
  border:1px dashed var(--linha);border-radius:12px;padding:13px 18px;
  font-size:.72rem;color:var(--osso-2)}
.aviso-simu i{color:var(--ouro)}
.res-secao{max-width:1240px;margin:0 auto;padding:64px 32px 0}
@media(max-width:760px){.res-secao{padding:52px 20px 0}}

/* próxima sessão — o destaque */
.prox{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3.4vw,44px);
  align-items:center;margin-top:30px;background:var(--carvao);
  border:1px solid var(--linha);border-radius:12px;
  padding:clamp(22px,3.4vw,34px);position:relative;overflow:hidden}
.prox::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(480px 240px at 0% 0%,rgba(201,169,97,.1),transparent 65%)}
.prox-data{text-align:center;border-right:1px dashed rgba(201,169,97,.3);
  padding-right:clamp(20px,3.4vw,44px)}
.prox-data b{display:block;font-family:var(--ff-display);font-weight:900;
  font-size:2.9rem;line-height:1;color:var(--ouro-claro)}
.prox-data span{display:block;font-size:.6rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--mudo);margin-top:6px}
.prox-data .prox-hora{margin-top:12px;font-size:.86rem;color:var(--osso);
  font-weight:600;letter-spacing:.06em}
.prox-info h3{font-family:var(--ff-display);font-weight:700;font-size:1.4rem;line-height:1.2}
.prox-linhas{display:flex;flex-direction:column;gap:0;margin-top:14px;max-width:460px}
.prox-linha{display:flex;justify-content:space-between;gap:18px;padding:8px 0;
  border-bottom:1px solid var(--linha-suave);font-size:.76rem}
.prox-linha span{color:var(--mudo);letter-spacing:.08em;text-transform:uppercase;font-size:.62rem;
  padding-top:2px}
.prox-linha b{color:var(--osso);font-weight:600;text-align:right}
.prox-lado{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
@media(max-width:860px){
  .prox{grid-template-columns:1fr}
  .prox-data{border-right:none;border-bottom:1px dashed rgba(201,169,97,.3);
    padding:0 0 18px;text-align:left}
  .prox-data b{display:inline;font-size:2.2rem}
  .prox-data span{display:inline;margin-left:10px}
  .prox-lado{align-items:flex-start}
}

/* chips de status */
.chip-st{display:inline-flex;align-items:center;gap:7px;font-size:.58rem;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;border:1px solid var(--linha-suave);
  color:var(--osso-2);white-space:nowrap}
.chip-st i{font-size:.56rem}
.chip-st.ok{color:#7fc79a;border-color:rgba(127,199,154,.3)}
.chip-st.aguarda{color:var(--ouro-claro);border-color:var(--linha)}
.chip-st.cancel{color:rgba(236,231,219,.4);text-decoration:none}
.chip-st.feito{color:var(--osso-2)}

/* histórico */
.res-lista{display:flex;flex-direction:column;margin-top:26px;border-top:1px solid var(--linha)}
.res-item{display:grid;grid-template-columns:120px 1fr auto auto;gap:clamp(14px,2.6vw,34px);
  align-items:center;padding:20px 8px;border-bottom:1px solid var(--linha-suave);
  transition:background .35s ease,padding .35s var(--suave)}
.res-item:hover{background:linear-gradient(90deg,var(--ouro-fosco),transparent 70%);padding-left:16px}
.res-quando b{display:block;font-family:var(--ff-display);font-weight:700;font-size:1.02rem}
.res-quando span{font-size:.64rem;color:var(--mudo);letter-spacing:.1em}
.res-oq b{display:block;font-weight:600;font-size:.9rem}
.res-oq span{font-size:.68rem;color:var(--mudo)}
.res-oq span i{margin-right:6px;color:var(--ouro);font-size:.6rem}
.res-sinal{font-size:.66rem;color:var(--osso-2);text-align:right;letter-spacing:.04em}
.res-sinal b{color:var(--osso)}
.res-cancelada .res-quando,.res-cancelada .res-oq{opacity:.45}
@media(max-width:760px){
  .res-item{grid-template-columns:1fr auto;grid-template-areas:"quando chip" "oq oq" "sinal sinal"}
  .res-quando{grid-area:quando}.res-oq{grid-area:oq}
  .res-sinal{grid-area:sinal;text-align:left}
  .res-item .chip-st{grid-area:chip;justify-self:end}
}

/* agenda — sugerir horário */
.agenda{margin-top:30px;background:var(--carvao);border:1px solid var(--linha);
  border-radius:12px;padding:clamp(20px,3vw,30px)}
.agenda-dias{display:flex;gap:9px;overflow-x:auto;padding:4px 2px 12px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.agenda-dia{flex:0 0 66px;border:1px solid var(--linha-suave);border-radius:10px;
  padding:11px 4px;text-align:center;cursor:pointer;transition:all .25s ease;user-select:none}
.agenda-dia span{display:block;font-size:.54rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mudo)}
.agenda-dia b{display:block;font-family:var(--ff-display);font-weight:700;
  font-size:1.2rem;margin-top:3px}
.agenda-dia:hover{border-color:var(--ouro)}
.agenda-dia.sel{background:var(--ouro);border-color:var(--ouro);color:#171204}
.agenda-dia.sel span{color:rgba(23,18,4,.65)}
.agenda-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:8px;margin-top:0;max-height:0;overflow:hidden;opacity:0;
  transform:translateY(-8px);
  transition:max-height .45s var(--suave),opacity .35s ease,
    transform .4s var(--suave),margin-top .45s var(--suave)}
.agenda-slots.mostra{margin-top:14px;max-height:400px;opacity:1;transform:none}
.agenda-slot{border:1px solid var(--linha-suave);border-radius:8px;padding:11px 6px;
  text-align:center;font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--osso-2);cursor:pointer;transition:all .2s ease;user-select:none;
  opacity:0;animation:slotSurge .4s ease forwards}
@keyframes slotSurge{to{opacity:1}}
.agenda-slot:hover{border-color:var(--ouro);color:var(--osso)}
.agenda-slot.sel{background:var(--ouro);border-color:var(--ouro);color:#171204;font-weight:800}
.agenda-slot.ocupado{pointer-events:none;background:rgba(236,231,219,.06);
  border-color:transparent;color:var(--mudo);text-decoration:line-through}
.agenda-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.agenda-form label{display:flex;flex-direction:column;gap:7px;
  font-size:.6rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mudo)}
.agenda-form input{background:var(--fumaca);border:1px solid var(--linha-suave);
  border-radius:9px;padding:13px 15px;color:var(--osso);font-family:inherit;
  font-size:.84rem;transition:border-color .3s ease}
.agenda-form input:focus{outline:none;border-color:var(--ouro)}
.agenda-form input::placeholder{color:var(--mudo)}
@media(max-width:640px){.agenda-form{grid-template-columns:1fr}}
.agenda-rodape{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-top:20px;flex-wrap:wrap}
.agenda-dica{font-size:.66rem;color:var(--mudo);max-width:420px;line-height:1.6}
.agenda-dica i{color:var(--ouro);margin-right:6px}

/*───────────────────────────────────────────────────────────────
  AUTENTICAÇÃO — entrar / criar conta na mesma página (abas)
───────────────────────────────────────────────────────────────*/
.auth-caixa{width:min(440px,100%);background:var(--fumaca);border:1px solid var(--linha);
  border-radius:14px;padding:clamp(24px,4vw,38px);position:relative}
.auth-abas{position:relative;display:grid;grid-template-columns:1fr 1fr;
  background:rgba(236,231,219,.05);border:1px solid var(--linha-suave);border-radius:999px;
  padding:4px;margin-bottom:28px}
.auth-aba{position:relative;z-index:2;background:none;border:none;padding:12px 10px;
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--osso-2);border-radius:999px;transition:color .3s ease;cursor:pointer}
.auth-aba.ativa{color:#171204}
.auth-aba-marca{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);
  background:linear-gradient(120deg,var(--ouro),var(--ouro-claro),var(--ouro));
  border-radius:999px;transition:transform .4s var(--suave);z-index:1}
.auth-abas[data-ativa="criar"] .auth-aba-marca{transform:translateX(100%)}

.auth-form{display:flex;flex-direction:column;gap:16px;
  transition:opacity .26s var(--suave),transform .26s var(--suave)}
.auth-form[hidden]{display:none}
.auth-form.auth-sai{opacity:0;transform:translateY(-8px)}
.auth-form.auth-entra{opacity:0;transform:translateY(10px)}
.auth-form label{display:flex;flex-direction:column;gap:7px;font-size:.6rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mudo)}
.auth-form input[type=text],.auth-form input[type=email],
.auth-form input[type=password],.auth-form input[type=tel]{
  width:100%;background:var(--tinta);border:1px solid var(--linha-suave);border-radius:9px;
  padding:13px 15px;color:var(--osso);font-family:inherit;font-size:.88rem;
  transition:border-color .3s ease}
.auth-form input:focus{outline:none;border-color:var(--ouro)}
.auth-form input::placeholder{color:var(--mudo)}

.auth-campo-senha{position:relative;display:flex;align-items:center}
.auth-campo-senha input{padding-right:46px}
.auth-olho{position:absolute;right:5px;background:none;border:none;color:var(--mudo);
  padding:9px;cursor:pointer;font-size:.82rem;line-height:1;border-radius:7px}
.auth-olho:hover{color:var(--ouro-claro)}

.auth-linha-extra{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;margin-top:-4px}
.auth-check{display:flex !important;flex-direction:row !important;align-items:center;gap:8px;
  font-size:.68rem !important;letter-spacing:.02em !important;text-transform:none !important;
  color:var(--osso-2) !important;font-weight:400 !important;cursor:pointer}
.auth-check input{accent-color:var(--ouro);width:15px;height:15px;flex-shrink:0}
.auth-esqueci{font-size:.68rem;color:var(--osso-2);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--linha)}
.auth-esqueci:hover{color:var(--ouro-claro)}
.auth-termos{line-height:1.5}

.auth-enviar{width:100%;justify-content:center;margin-top:4px;border:none}

.auth-msg{display:none;align-items:flex-start;gap:10px;margin-top:16px;padding:12px 14px;
  border-radius:9px;font-size:.74rem;line-height:1.5;background:var(--ouro-fosco);
  border:1px solid var(--linha);color:var(--osso-2)}
.auth-msg.mostra{display:flex}
.auth-msg i{color:var(--ouro);flex-shrink:0;margin-top:2px}

.auth-rodape-txt{text-align:center;margin-top:22px;font-size:.74rem;color:var(--osso-2)}
.auth-link{background:none;border:none;color:var(--ouro-claro);font-weight:700;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-size:inherit;
  font-family:inherit;padding:0}
.auth-link:hover{color:var(--ouro)}

@media(max-width:480px){.auth-caixa{border-radius:12px}}



/*──────────────────────────────────────────────────────────────
# CONTA — menu de quem está logado
# Sem bolinha de inicial: só o nome e a seta.
# No mobile o nome some e fica "conectado" com um ponto verde.
──────────────────────────────────────────────────────────────*/
.conta{ position:relative; }

.conta-btn{
  display:flex;align-items:center;gap:8px;
  padding:8px 4px;border:0;background:none;
  color:rgba(255,255,255,.86);font-family:inherit;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:color .22s ease;
}
.conta-btn:hover{ color:var(--ouro-claro); }
.conta-btn:focus-visible{ outline:2px solid var(--ouro);outline-offset:4px;border-radius:6px; }

.conta-ponto{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.16);
}
.conta-nome{ white-space:nowrap; }
.conta-mob{ display:none;letter-spacing:.14em; }
.conta-seta{ font-size:.52rem;opacity:.55;transition:transform .22s ease; }
.conta.aberto .conta-seta{ transform:rotate(180deg);opacity:1; }

.conta-menu{
  position:absolute;top:calc(100% + 12px);right:0;z-index:1200;
  width:272px;padding:6px;border-radius:14px;
  background:#0d0d0d;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 22px 60px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.conta.aberto .conta-menu{ opacity:1;visibility:visible;transform:translateY(0); }

.conta-cab{
  display:flex;flex-direction:column;gap:2px;
  padding:13px 13px 14px;margin-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.conta-cab-lbl{
  font-size:.56rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.32);margin-bottom:3px;
}
.conta-cab-linha{ display:flex;align-items:center;gap:8px;min-width:0; }
.conta-cab-nome{
  font-size:.88rem;font-weight:700;color:#fff;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.conta-cab-mail{
  font-size:.66rem;color:rgba(255,255,255,.4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.conta-cab-rank{
  flex-shrink:0;padding:3px 9px;border-radius:999px;
  font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(201,169,97,.14);color:var(--ouro);
}

.conta-lista{ display:flex;flex-direction:column;gap:1px; }
.conta-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;text-decoration:none;
  transition:background .18s ease;
}
.conta-item:hover{ background:rgba(255,255,255,.055); }
.conta-item > i{
  width:17px;text-align:center;font-size:.86rem;
  color:rgba(255,255,255,.34);transition:color .18s ease;
}
.conta-item:hover > i{ color:var(--ouro); }
.conta-item span{ display:flex;flex-direction:column;gap:1px;min-width:0; }
.conta-item b{ font-size:.76rem;font-weight:600;color:rgba(255,255,255,.88); }
.conta-item em{ font-style:normal;font-size:.62rem;color:rgba(255,255,255,.32); }
.conta-item:hover b{ color:#fff; }
.conta-admin > i{ color:var(--ouro); }

.conta-sep{ height:1px;margin:5px 10px;background:rgba(255,255,255,.07); }

.conta-sair{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;text-decoration:none;
  font-size:.74rem;font-weight:600;color:rgba(255,255,255,.5);
  transition:.18s ease;
}
.conta-sair i{ font-size:.8rem; }
.conta-sair:hover{ background:rgba(220,38,38,.1);color:#f87171; }

@media(max-width:860px){
  .conta-nome{ display:none; }
  .conta-mob{ display:inline;font-size:.6rem;color:rgba(255,255,255,.55);
    letter-spacing:.1em;text-transform:uppercase; }

  /* folha que sobe de baixo — flutuando ficava cortado na tela */
  .conta-menu{
    position:fixed;inset:auto 0 0 0;width:auto;
    padding:8px 12px calc(16px + env(safe-area-inset-bottom));
    border-radius:20px 20px 0 0;border-left:0;border-right:0;border-bottom:0;
    transform:translateY(100%);
    box-shadow:0 -18px 50px rgba(0,0,0,.7);
    max-height:82vh;overflow-y:auto;
  }
  .conta.aberto .conta-menu{ transform:translateY(0); }
  .conta-menu::before{
    content:'';display:block;width:38px;height:4px;border-radius:99px;
    background:rgba(255,255,255,.16);margin:2px auto 10px;
  }
  .conta-item{ padding:13px 12px; }
  .conta-item b{ font-size:.82rem; }
  .conta-sair{ padding:13px 12px;font-size:.8rem; }
  .conta.aberto::after{
    content:'';position:fixed;inset:0;z-index:-1;
    background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }
}
@media(prefers-reduced-motion:reduce){
  .conta-menu,.conta-seta{ transition:none; }
}

/*──────────────────────────────────────────────────────────────
# AUTH — mensagem de erro do login
──────────────────────────────────────────────────────────────*/
.auth-erro{
  display:flex;align-items:center;gap:9px;
  margin:0 0 16px;padding:11px 14px;border-radius:11px;
  background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.28);
  color:#fca5a5;font-size:.74rem;line-height:1.45;
}
.auth-erro i{ flex-shrink:0; }


/*──────────────────────────────────────────────────────────────
# ESTADOS — acesso negado / erro
──────────────────────────────────────────────────────────────*/
.estado{
  min-height:62vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:60px clamp(18px,5vw,64px);
}
.estado-ico{
  width:66px;height:66px;border-radius:20px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(201,169,97,.08);border:1.5px solid rgba(201,169,97,.24);
  color:var(--ouro-claro);font-size:1.5rem;
}
.estado-cod{
  font-family:var(--ff-display,'Playfair Display',serif);
  font-size:.72rem;font-weight:700;letter-spacing:.34em;
  color:rgba(255,255,255,.28);margin-bottom:8px;
}
.estado-titulo{
  font-family:var(--ff-display,'Playfair Display',serif);
  font-size:clamp(1.7rem,5vw,2.6rem);font-weight:700;color:#fff;
  line-height:1.15;margin:0 0 12px;letter-spacing:-.5px;
}
.estado-titulo em{
  font-style:italic;color:var(--ouro);
}
.estado-txt{
  font-size:.84rem;color:rgba(255,255,255,.5);line-height:1.65;
  max-width:440px;margin:0 0 26px;
}
.estado-ctas{ display:flex;gap:11px;flex-wrap:wrap;justify-content:center; }
.estado .atalhos{ margin-top:44px;width:100%;max-width:760px;padding-left:0;padding-right:0; }

/*───────────────────────────────────────────────────────────────
  MEUS CURSOS — mesma linguagem da lista de cursos da home
───────────────────────────────────────────────────────────────*/
.mc-lista{
  display:flex;flex-direction:column;margin-top:26px;
  border-top:1px solid var(--linha,rgba(201,169,97,.2));
}
.mc-item{
  display:grid;grid-template-columns:168px 1fr auto;
  gap:clamp(18px,3vw,36px);align-items:center;
  padding:24px 8px;border-bottom:1px solid var(--linha-suave,rgba(255,255,255,.07));
  transition:background .4s ease,padding .4s ease;position:relative;
}
.mc-item:hover{
  background:linear-gradient(90deg,var(--ouro-fosco,rgba(201,169,97,.05)),transparent 70%);
  padding-left:18px;
}
.mc-pendente{ opacity:.62; }

.mc-capa{ position:relative;overflow:hidden;border-radius:4px;aspect-ratio:3/2; }
.mc-capa img{
  width:100%;height:100%;object-fit:cover;filter:var(--duo,grayscale(1) contrast(1.05));
  transition:filter .8s ease,transform .8s ease;
}
.mc-item:hover .mc-capa img{ filter:grayscale(0) contrast(1.03);transform:scale(1.05); }
.mc-fita{
  position:absolute;top:9px;left:9px;padding:5px 10px;border-radius:999px;
  font-size:.54rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(5,5,4,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.mc-fita.ok{ color:#86efac;border:1px solid rgba(61,220,132,.3); }
.mc-fita.aguarda{ color:var(--ouro-claro);border:1px solid var(--linha,rgba(201,169,97,.24)); }

.mc-corpo{ min-width:0; }
.mc-nome{
  font-family:var(--ff-display,'Playfair Display',serif);
  font-weight:700;font-size:1.3rem;line-height:1.15;color:#fff;margin:0;
}
.mc-desc{
  color:var(--mudo,rgba(255,255,255,.42));font-size:.8rem;margin:7px 0 0;max-width:500px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mc-meta{
  display:flex;align-items:center;gap:16px;margin-top:13px;flex-wrap:wrap;
  font-size:.66rem;letter-spacing:.08em;color:var(--osso-2,rgba(255,255,255,.5));
}
.mc-meta i{ color:var(--ouro);margin-right:6px;font-size:.62rem; }

.mc-barra{
  height:3px;border-radius:999px;margin-top:14px;
  background:rgba(255,255,255,.08);overflow:hidden;max-width:420px;
}
.mc-barra-fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--ouro),var(--ouro-claro));
  transition:width .6s ease;
}
.mc-pct{
  display:block;margin-top:7px;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mudo,rgba(255,255,255,.36));
}

.mc-acao{ display:flex;flex-direction:column;align-items:flex-end;gap:9px; }
.mc-btn{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ouro-claro);padding:13px 22px;
  border:1px solid var(--linha,rgba(201,169,97,.2));border-radius:999px;
  text-decoration:none;transition:all .35s ease;
}
.mc-btn i{ transition:transform .35s ease; }
.mc-item:hover .mc-btn{ background:var(--ouro);border-color:var(--ouro);color:#171204; }
.mc-item:hover .mc-btn i{ transform:translateX(4px); }
.mc-btn.desativado{
  color:var(--mudo,rgba(255,255,255,.4));border-style:dashed;pointer-events:none;
}
.mc-item:hover .mc-btn.desativado{
  background:none;border-color:var(--linha-suave,rgba(255,255,255,.09));
  color:var(--mudo,rgba(255,255,255,.4));
}
.mc-link{
  font-size:.62rem;letter-spacing:.1em;color:var(--mudo,rgba(255,255,255,.38));
  text-decoration:none;transition:color .25s;
}
.mc-link:hover{ color:var(--ouro-claro); }
.mc-link i{ margin-right:5px; }

.mc-vazio{
  text-align:center;padding:70px 26px;border-radius:16px;margin-top:26px;
  background:rgba(255,255,255,.015);
  border:1px dashed var(--linha-suave,rgba(255,255,255,.1));
}
.mc-vazio i{ font-size:2.2rem;color:var(--ouro);opacity:.36;margin-bottom:18px;display:block; }
.mc-vazio h3{
  font-family:var(--ff-display,'Playfair Display',serif);
  font-size:1.24rem;color:#fff;margin:0 0 9px;
}
.mc-vazio p{ font-size:.78rem;color:var(--mudo,rgba(255,255,255,.42));margin:0 0 24px; }

@media(max-width:760px){
  .mc-item{
    grid-template-columns:82px 1fr;gap:12px;padding:16px 4px;align-items:center;
  }
  .mc-capa{ aspect-ratio:3/4; }
  .mc-nome{ font-size:.94rem; }
  .mc-desc{ display:none; }
  .mc-meta{ gap:9px;margin-top:7px;font-size:.56rem;flex-wrap:nowrap;overflow:hidden; }
  .mc-meta i{ margin-right:4px;font-size:.52rem; }
  .mc-barra{ margin-top:10px; }
  .mc-pct{ font-size:.56rem;margin-top:5px; }
  .mc-acao{
    grid-column:2/-1;flex-direction:row;align-items:center;
    justify-content:space-between;gap:10px;margin-top:11px;
  }
  .mc-btn{ padding:8px 15px;font-size:.56rem;letter-spacing:.12em;gap:6px; }
  .mc-link{ font-size:.56rem; }
}

/*──────────────────────────────────────────────────────────────
# PLAYER DO CURSO
──────────────────────────────────────────────────────────────*/
.pl-body{ background:#080808; }
.pl-topo{
  position:sticky;top:0;z-index:80;display:flex;align-items:center;gap:14px;
  padding:11px clamp(12px,3vw,22px);
  background:rgba(8,8,8,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.pl-voltar{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.7);transition:.2s;
}
.pl-voltar:hover{ border-color:var(--ouro);color:var(--ouro-claro); }
.pl-topo-txt{ flex:1;min-width:0;display:flex;flex-direction:column;gap:1px; }
.pl-curso{ font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.36); }
.pl-aula-nome{
  font-size:.82rem;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl-topo-pct{ display:flex;align-items:center;gap:9px;flex-shrink:0; }
.pl-topo-pct span{ font-size:.66rem;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums; }
.pl-barra{ width:104px;height:4px;border-radius:20px;background:rgba(255,255,255,.09);overflow:hidden; }
.pl-barra-fill{ height:100%;background:var(--ouro);transition:width .4s ease; }
.pl-menu-btn{
  display:none;width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.7);cursor:pointer;
}

.pl-shell{ display:grid;grid-template-columns:1fr 316px;gap:0;align-items:start; }
.pl-main{ min-width:0;padding:clamp(12px,2.4vw,22px); }
.pl-video{
  border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9;
  border:1px solid rgba(255,255,255,.08);
}
.pl-video video{ width:100%;height:100%;display:block;background:#000; }

.pl-info{ padding:20px 2px 0; }
.pl-titulo{
  font-family:var(--ff-display,'Playfair Display',serif);
  font-size:1.34rem;font-weight:700;color:#fff;margin:0 0 10px;line-height:1.25;
}
.pl-meta{ display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px; }
.pl-meta span{ font-size:.68rem;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:6px; }
.pl-meta i{ color:rgba(201,169,97,.6); }
.pl-ok{ color:#3ddc84!important; }
.pl-ok i{ color:#3ddc84!important; }
.pl-desc{ font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.7;margin:0 0 16px; }
.pl-material{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:10px;
  background:rgba(201,169,97,.08);border:1px solid rgba(201,169,97,.24);
  color:var(--ouro-claro);font-size:.72rem;font-weight:600;text-decoration:none;
}
.pl-material:hover{ background:rgba(201,169,97,.14); }

.pl-nav{ display:flex;justify-content:space-between;gap:10px;margin-top:26px; }
.pl-nav-btn{
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.72);font-size:.72rem;font-weight:600;text-decoration:none;transition:.2s;
}
.pl-nav-btn:hover{ border-color:var(--ouro);color:#fff; }
.pl-nav-btn.destaque{ background:var(--ouro);border-color:var(--ouro);color:#0a0a0a; }
.pl-nav-btn.destaque:hover{ filter:brightness(1.1);color:#0a0a0a; }

.pl-lado{
  position:sticky;top:59px;max-height:calc(100vh - 59px);overflow-y:auto;
  border-left:1px solid rgba(255,255,255,.07);padding:14px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;
}
.pl-lado-cab{ display:flex;flex-direction:column;gap:2px;padding:4px 6px 14px; }
.pl-lado-cab b{ font-size:.78rem;color:#fff; }
.pl-lado-cab span{ font-size:.64rem;color:rgba(255,255,255,.36); }
.pl-mod{ margin-bottom:14px; }
.pl-mod-tit{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.34);padding:0 6px 7px;
}
.pl-aula{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
  text-decoration:none;transition:background .18s ease;
}
.pl-aula:hover{ background:rgba(255,255,255,.05); }
.pl-aula i{ font-size:.76rem;color:rgba(255,255,255,.22);flex-shrink:0; }
.pl-aula-txt{
  flex:1;min-width:0;font-size:.72rem;color:rgba(255,255,255,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl-aula-dur{ font-size:.62rem;color:rgba(255,255,255,.28);flex-shrink:0; }
.pl-aula.feita i{ color:#3ddc84; }
.pl-aula.feita .pl-aula-txt{ color:rgba(255,255,255,.44); }
.pl-aula.atual{ background:rgba(201,169,97,.1); }
.pl-aula.atual i{ color:var(--ouro); }
.pl-aula.atual .pl-aula-txt{ color:#fff;font-weight:600; }

@media(max-width:960px){
  .pl-shell{ grid-template-columns:1fr; }
  .pl-menu-btn{ display:flex;align-items:center;justify-content:center; }
  .pl-topo-pct span{ display:none; }
  .pl-barra{ width:64px; }
  .pl-lado{
    position:fixed;inset:59px 0 0 auto;width:min(320px,86vw);z-index:90;
    background:#0b0b0b;transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);max-height:none;
  }
  body.pl-aberto .pl-lado{ transform:translateX(0); }
}


/*───────────────────────────────────────────────────────────────
  CURSOS NA HOME — primeiro conteúdo da página
───────────────────────────────────────────────────────────────*/
.secao-cursos-home{ padding-top:clamp(96px,12vh,150px); }
.secao-cursos-home .cursos-lista{ margin-top:26px; }

/* "Em breve": o fundo que só aparecia no hover fica fixo.
   Passar o mouse não muda mais o fundo — só a imagem acorda.  */
.curso.indisponivel{
  background:linear-gradient(90deg,var(--ouro-fosco),transparent 70%);
}
.curso.indisponivel:hover{
  background:linear-gradient(90deg,var(--ouro-fosco),transparent 70%);
}
.curso.indisponivel:hover .curso-capa img{
  filter:grayscale(0) contrast(1.03);
}

/*───────────────────────────────────────────────────────────────
  CARROSSEL DE TRABALHOS — logo abaixo dos cursos, compacto
───────────────────────────────────────────────────────────────*/
.secao-carrossel{ padding-top:44px; }
.secao-carrossel .pf-carrossel{ margin-top:0; }
.secao-carrossel .pf-card{ width:210px;height:280px; }
.secao-carrossel .portfolio-rodape{ margin-top:22px; }

@media(max-width:760px){
  .secao-cursos-home{ padding-top:104px; }
  .secao-carrossel{ padding-top:30px; }
  .secao-carrossel .pf-card{ width:148px;height:198px; }
  .secao-carrossel .pf-trilha{ gap:10px; }
}

/*───────────────────────────────────────────────────────────────
  SORTEIOS — mais compacto no mobile
───────────────────────────────────────────────────────────────*/
@media(max-width:760px){
  .sorteios-grade{ gap:14px; }
  .bilhete{ grid-template-columns:1fr; }
  .bilhete-foto{ min-height:0;aspect-ratio:16/10; }
  .bilhete-corpo{ padding:16px 15px 18px; }
  .bilhete-titulo{ font-size:1.05rem;line-height:1.2; }
  .bilhete-desc{
    font-size:.72rem;margin-top:6px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .bilhete-rodape{ margin-top:14px; }
  .bilhete-preco b{ font-size:1.1rem; }
  .bilhete-abrir{ font-size:.6rem;letter-spacing:.14em; }
  .bilhete-datas{ font-size:.6rem;gap:8px; }
  .progresso{ margin-top:13px; }
}

/* botão do login enquanto envia */
.auth-enviar.enviando{ opacity:.72;pointer-events:none; }


/* No mobile o "Começar agora" vira parte da linha de detalhes.
   O grid tem 2 colunas, então o botão sai do fluxo e encosta
   na meta usando position — sem quebrar o desktop.            */
@media(max-width:760px){
  .curso{position:relative}
  .curso > div:nth-of-type(1){display:flex;flex-direction:column;justify-content:center}
  .curso-meta{padding-right:0;flex-wrap:nowrap;overflow:hidden}
  .curso.indisponivel .curso-ir{border-style:dashed}
}
@media(max-width:400px){
  .curso{grid-template-columns:70px 1fr;gap:10px}
  .curso-desc{-webkit-line-clamp:1}
  .curso-meta > span:nth-child(n+2){display:none}
}


/*───────────────────────────────────────────────────────────────
  V-ZION — agendamento
───────────────────────────────────────────────────────────────*/
.vz-passo{
  display:flex;align-items:center;gap:11px;margin:32px 0 14px;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.8);
}
.vz-num{
  width:23px;height:23px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--ouro);color:#171204;font-size:.66rem;font-weight:800;
}

/* ── calendário da semana ── */
.vz-cal{ background:none; }
.vz-cal-hdr{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 0 14px;
}
.vz-cal-mes{
  flex:1;text-align:center;color:#fff;font-weight:700;font-size:.98rem;
  font-family:var(--ff-display,'Playfair Display',serif);
}
.vz-cal-nav{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--linha,rgba(201,169,97,.24));
  color:var(--ouro-claro);transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.vz-cal-nav:hover:not(:disabled){ background:rgba(201,169,97,.07);border-color:var(--ouro); }
.vz-cal-nav:disabled{ opacity:.2;cursor:not-allowed; }
.vz-cal-dias{ display:grid;grid-template-columns:repeat(7,1fr);gap:5px;padding:12px; }
.vz-cal-load,.vz-cal-erro{
  grid-column:1/-1;padding:26px;text-align:center;
  color:var(--mudo,rgba(255,255,255,.4));font-size:.8rem;
}
.vz-cal-erro i{ color:var(--ouro);margin-right:6px; }

.vz-dia{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 4px;border-radius:12px;cursor:pointer;font-family:inherit;
  background:rgba(0,0,0,.24);border:1px solid var(--linha-suave,rgba(255,255,255,.08));
  transition:.2s ease;
}
.vz-dia:hover:not(.off){ border-color:var(--ouro);transform:translateY(-2px); }
.vz-dia:focus-visible{ outline:2px solid var(--ouro);outline-offset:2px; }
.vz-dia.ativo{ background:var(--ouro);border-color:transparent; }
.vz-dia.ativo .vz-dia-sem,.vz-dia.ativo .vz-dia-num,.vz-dia.ativo .vz-dia-nota{ color:#171204; }
.vz-dia.hoje:not(.ativo){ border-color:var(--ouro-claro); }
.vz-dia.off{ opacity:.32;cursor:not-allowed; }
.vz-dia-sem{
  font-size:.56rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mudo,rgba(255,255,255,.4));
}
.vz-dia-num{ font-size:1.12rem;font-weight:700;color:#fff;line-height:1.1; }
.vz-dia-nota{ font-size:.52rem;color:var(--ouro-claro);white-space:nowrap; }

/* ── horários ── */
.vz-slots-card{ background:none;display:flex;flex-direction:column; }
/* A rolagem e o agrupamento por período moram no bloco
   "HORÁRIOS — manhã e tarde" mais abaixo, que é o original desta
   tela. Duas regras pro mesmo elemento em lugares diferentes é
   como esse arquivo começou a brigar consigo mesmo. */
.vz-slots-hdr{
  display:flex;align-items:center;gap:9px;padding:0 0 14px;
  font-family:var(--ff-display,'Playfair Display',serif);
  font-size:.98rem;font-weight:700;color:#fff;
}
.vz-slots-hdr i{ color:var(--ouro); }
/* A grade dos horários é a `.vz-slots-linha`, dentro de cada
   grupo de período — ver o bloco "HORÁRIOS — manhã e tarde". */
.vz-slots-vazio{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:30px 16px;text-align:center;
  color:var(--mudo,rgba(255,255,255,.4));font-size:.78rem;
}
.vz-slots-vazio i{ font-size:1.5rem;color:var(--ouro);opacity:.42; }

.vz-slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-width:0;padding:16px 8px;border-radius:14px;text-decoration:none;
  border:1px solid var(--linha-suave,rgba(255,255,255,.09));
  font-family:inherit;font-size:1.02rem;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.vz-slot-sub{
  font-size:.53rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.8;
}
/* O verde de "disponível" destoava do resto do site — a única cor
   fora do dourado/preto. Agora "livre" fica neutro em repouso e só
   ganha o dourado da marca no hover, igual a todo o resto da tela
   (dia do calendário, serviço, trilho). Uma cor de destaque só.

   Sem `transform` no hover: numa grade densa, o botão pulando faz
   os vizinhos parecerem tremer. Muda só a cor. */
.vz-slot.livre{
  background:rgba(255,255,255,.02);border-color:var(--linha,rgba(201,169,97,.24));
  color:#fff;cursor:pointer;
}
.vz-slot.livre:hover{
  background:linear-gradient(160deg,rgba(201,169,97,.18),rgba(201,169,97,.05));
  border-color:var(--ouro);color:var(--ouro-claro);
}
.vz-slot.livre.sel{
  background:var(--ouro);border-color:var(--ouro);color:#171204;
}
.vz-slot.ocupado{
  background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.06);
  color:rgba(255,255,255,.26);cursor:not-allowed;
}
.vz-slot.passou{ background:rgba(255,255,255,.03);color:rgba(255,255,255,.3);cursor:not-allowed; }

.vz-legenda{
  display:flex;gap:16px;flex-wrap:wrap;padding:18px 0 0;
  border-top:1px solid var(--linha-suave,rgba(255,255,255,.07));
}
.vz-leg{ display:flex;align-items:center;gap:6px;font-size:.64rem;color:var(--mudo,rgba(255,255,255,.4)); }
.vz-leg-dot{ width:8px;height:8px;border-radius:50%; }
.vz-leg.livre   .vz-leg-dot{ background:var(--ouro); }
.vz-leg.ocupado .vz-leg-dot{ background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.18); }
.vz-leg.passou  .vz-leg-dot{ background:rgba(255,255,255,.28); }

/*───────────────────────────────────────────────────────────────
  V-ZION — reservas e histórico
───────────────────────────────────────────────────────────────*/
.vz-res-lista{ display:flex;flex-direction:column;gap:9px;margin-top:22px; }
.vz-res{
  display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;
  padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.02);border:1px solid var(--linha-suave,rgba(255,255,255,.07));
  transition:border-color .25s ease;
}
.vz-res:hover{ border-color:var(--linha,rgba(201,169,97,.2)); }
.vz-res-passada{ opacity:.62; }
.vz-res-data{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8px 4px;border-radius:11px;background:rgba(201,169,97,.06);
}
.vz-res-data b{
  font-family:var(--ff-display,'Playfair Display',serif);
  font-size:1.2rem;color:var(--ouro-claro);line-height:1;
}
.vz-res-data span{
  font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mudo,rgba(255,255,255,.4));margin-top:3px;
}
.vz-res-info{ min-width:0;display:flex;flex-direction:column;gap:3px; }
.vz-res-info b{ font-size:.88rem;color:#fff; }
.vz-res-info span{ font-size:.7rem;color:var(--mudo,rgba(255,255,255,.42)); }
.vz-res-info i{ color:rgba(201,169,97,.6);margin-right:5px; }
.vz-res-obs{ font-style:italic; }
.vz-res-lado{ display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0; }
.vz-res-val{ font-size:.78rem;font-weight:700;color:var(--ouro-claro); }

.vz-nada{
  display:flex;align-items:center;gap:12px;margin-top:22px;
  padding:20px;border-radius:14px;
  background:rgba(255,255,255,.02);border:1px dashed var(--linha-suave,rgba(255,255,255,.1));
  font-size:.8rem;color:var(--mudo,rgba(255,255,255,.44));line-height:1.6;
}
.vz-nada i{ font-size:1.2rem;color:var(--ouro);opacity:.6;flex-shrink:0; }
.vz-nada a{ color:var(--ouro-claro);border-bottom:1px solid rgba(201,169,97,.3);text-decoration:none; }

@media(max-width:760px){
  .vz-serv-grid{ grid-template-columns:1fr; }
  .vz-cal-dias{ gap:4px;padding:9px; }
  .vz-dia{ padding:8px 2px;border-radius:10px; }
  .vz-dia-num{ font-size:.98rem; }
  .vz-dia-nota{ font-size:.48rem; }
  .vz-slot{ min-width:0;flex:1 0 calc(33.333% - 6px);padding:8px 4px; }
  .vz-res{ grid-template-columns:54px 1fr;gap:11px;padding:12px; }
  .vz-res-lado{ grid-column:2/-1;flex-direction:row;justify-content:space-between;align-items:center; }
  .vz-passo{ margin:26px 0 12px;font-size:.66rem; }
}


/*───────────────────────────────────────────────────────────────
  LINK V-ZION / TIKITO NA TOPBAR — sem container, só destaque
───────────────────────────────────────────────────────────────*/
.topo-link-vzion{
  margin-left:22px;color:var(--ouro-claro);position:relative;
}
.topo-link-vzion b{ font-weight:700;color:#fff; }
.topo-link-vzion::before{
  content:'';position:absolute;left:-13px;top:50%;transform:translateY(-50%);
  width:1px;height:13px;background:var(--linha,rgba(201,169,97,.24));
}
.topo-link-vzion:hover{ color:#fff; }
.topo-link-vzion:hover b{ color:var(--ouro-claro); }
@media(max-width:760px){ .topo-link-vzion{ display:none; } }

/* piscadinha ao chegar numa âncora */
.alvo-piscou{ animation:alvoPisca 1.3s ease; }
@keyframes alvoPisca{
  0%,100%{ box-shadow:none; }
  25%    { box-shadow:0 -14px 0 -12px var(--ouro); }
}

/*───────────────────────────────────────────────────────────────
  CONTA — folha de baixo no mobile, pendurada no <body>
  (a .topo usa backdrop-filter e prendia o position:fixed)
───────────────────────────────────────────────────────────────*/
.conta-fundo{
  position:fixed;inset:0;z-index:1190;background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .26s ease;
  /* SEM isto ele fica invisível por cima de tudo e engole
     todo clique e hover da página — inclusive o header      */
  pointer-events:none;
  visibility:hidden;
}
.conta-fundo.visivel{ opacity:1;pointer-events:auto;visibility:visible; }

.conta-menu-solto{
  position:fixed!important;inset:auto 0 0 0!important;z-index:1200!important;
  width:auto!important;max-height:84vh;overflow-y:auto;
  border-radius:20px 20px 0 0;border-left:0;border-right:0;border-bottom:0;
  padding:8px 12px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(100%);opacity:1!important;visibility:visible!important;
  box-shadow:0 -20px 55px rgba(0,0,0,.75);
  pointer-events:none;                       /* fechada, não bloqueia */
  transition:transform .32s cubic-bezier(.32,.72,0,1);
}
.conta-menu-solto.aberto{ transform:translateY(0);pointer-events:auto; }
.conta-menu-solto::before{
  content:'';display:block;width:38px;height:4px;border-radius:99px;
  background:rgba(255,255,255,.18);margin:2px auto 12px;
}
.conta-menu-solto .conta-item{ padding:14px 12px; }
.conta-menu-solto .conta-item b{ font-size:.84rem; }
.conta-menu-solto .conta-sair{ padding:14px 12px;font-size:.82rem; }
body.conta-aberta{ overflow:hidden; }

/*───────────────────────────────────────────────────────────────
  V-ZION — trilho dos passos
───────────────────────────────────────────────────────────────*/
.pag-hero-vz{ padding-bottom:0; }

.vz-trilho{
  display:flex;align-items:center;gap:8px;margin:30px 0 6px;
}
.vz-trilho-item{
  display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;text-align:left;
  opacity:.4;transition:opacity .3s ease;
}
.vz-trilho-item.agora,.vz-trilho-item.feito{ opacity:1; }
.vz-trilho-num{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--linha,rgba(201,169,97,.24));
  color:var(--mudo,rgba(255,255,255,.4));font-size:.68rem;font-weight:800;
  transition:.3s ease;
}
.vz-trilho-item.agora .vz-trilho-num{ background:var(--ouro);border-color:transparent;color:#171204; }
.vz-trilho-item.feito .vz-trilho-num{
  background:rgba(201,169,97,.14);border-color:var(--ouro);color:var(--ouro-claro);
}
.vz-trilho-txt{
  display:flex;flex-direction:column;gap:1px;min-width:0;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mudo,rgba(255,255,255,.42));
}
.vz-trilho-txt em{
  font-style:normal;letter-spacing:0;text-transform:none;
  font-size:.74rem;color:#fff;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;
}
.vz-trilho-linha{ flex:1;height:1px;background:var(--linha-suave,rgba(255,255,255,.09)); }

.vz-etapa{ display:none; }
.vz-etapa.ativa{ display:block;animation:vzEntra .42s cubic-bezier(.16,1,.3,1); }
.vz-etapa.vz-saindo{ display:block;animation:vzSai .2s ease forwards; }
@keyframes vzEntra{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes vzSai{ from{opacity:1;transform:none} to{opacity:0;transform:translateY(-10px)} }

.vz-voltar{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mudo,rgba(255,255,255,.4));transition:color .25s;
}
.vz-voltar:hover{ color:var(--ouro-claro); }

/*───────────────────────────────────────────────────────────────
  V-ZION — serviços no formato da lista de cursos
───────────────────────────────────────────────────────────────*/
.vz-serv-lista{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:34px;
}
.vz-serv{
  display:grid;grid-template-columns:100px 1fr auto;gap:0 clamp(16px,2vw,22px);
  align-items:center;width:100%;text-align:left;cursor:pointer;position:relative;
  padding:16px;border:1px solid var(--linha-suave,rgba(255,255,255,.09));border-radius:18px;
  background:rgba(255,255,255,.018);font-family:inherit;
  transition:background .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.vz-serv::before{
  content:'';position:absolute;left:0;top:18px;bottom:18px;width:2px;
  border-radius:0 3px 3px 0;background:transparent;transition:background .4s ease;
}
.vz-serv:hover,.vz-serv:focus-visible{
  background:linear-gradient(100deg,var(--ouro-fosco,rgba(201,169,97,.07)),rgba(255,255,255,.018) 68%);
  border-color:var(--linha,rgba(201,169,97,.22));
  box-shadow:0 14px 34px -26px rgba(201,169,97,.55);
  outline:none;
}
.vz-serv:hover::before{ background:var(--ouro); }
.vz-serv-capa{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:3/2;border-radius:12px;
  background:rgba(201,169,97,.06);border:1px solid var(--linha-suave,rgba(255,255,255,.09));
  color:var(--ouro-claro);font-size:1.5rem;transition:.4s ease;
}
.vz-serv:hover .vz-serv-capa{ background:rgba(201,169,97,.12);color:var(--ouro); }
.vz-serv-corpo{ min-width:0;display:flex;flex-direction:column; }
.vz-serv-nome{
  font-family:var(--ff-display,'Playfair Display',serif);
  font-weight:700;font-size:1.16rem;line-height:1.2;color:#fff;
}
.vz-serv-desc{
  color:var(--mudo,rgba(255,255,255,.42));font-size:.77rem;margin-top:6px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vz-serv-meta{
  display:flex;align-items:center;gap:13px;margin-top:12px;flex-wrap:nowrap;overflow:hidden;min-width:0;
  font-size:.63rem;letter-spacing:.06em;color:var(--osso-2,rgba(255,255,255,.5));
}
.vz-serv-meta > span{ white-space:nowrap; }
.vz-serv-meta > span:nth-child(n+3){ display:none; }
.vz-serv-meta i{ color:var(--ouro);margin-right:6px;font-size:.62rem; }
.vz-serv-ir{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ouro-claro);padding:11px 17px;
  border:1px solid var(--linha,rgba(201,169,97,.22));border-radius:999px;
  transition:background .35s ease,border-color .35s ease,color .35s ease;
}
.vz-serv:hover .vz-serv-ir{ background:var(--ouro);border-color:var(--ouro);color:#171204; }

/*───────────────────────────────────────────────────────────────
  NAV MOBILE DA V-ZION — item de volta pro Tikito
───────────────────────────────────────────────────────────────*/
.mnav-item-tikito img{
  width:19px;height:19px;object-fit:contain;border-radius:50%;
  margin-bottom:2px;opacity:.7;
}
.mnav-item-tikito:hover img,.mnav-item-tikito.ativo img{ opacity:1; }

@media(max-width:760px){
  .vz-trilho{ gap:5px;margin:20px 0 18px;padding-bottom:16px; }
  .vz-trilho-txt{ font-size:.54rem; }
  .vz-trilho-txt em{ font-size:.66rem;max-width:82px; }
  .vz-trilho-num{ width:22px;height:22px;font-size:.6rem; }

  .vz-serv-lista{ grid-template-columns:1fr;gap:10px;margin-top:22px; }
  .vz-serv{ grid-template-columns:78px 1fr;gap:12px;padding:12px;border-radius:14px; }
  .vz-serv::before{ top:12px;bottom:12px; }
  .vz-serv-capa{ align-self:stretch;aspect-ratio:3/4;border-radius:10px;font-size:1.1rem; }
  .vz-serv-corpo{ display:flex;flex-direction:column;justify-content:center; }
  .vz-serv-nome{ font-size:.96rem;line-height:1.18; }
  .vz-serv-desc{ font-size:.7rem;margin-top:4px;-webkit-line-clamp:1; }
  .vz-serv-meta{ gap:8px;margin-top:0;font-size:.56rem;letter-spacing:.04em; }
  .vz-serv-ir{
    grid-column:2/-1;justify-self:flex-start;margin-top:11px;
    padding:8px 15px;font-size:.56rem;letter-spacing:.12em;
  }
}

/* na própria V-zion o atalho vira a nav inferior — sem botão duplicado */

/*───────────────────────────────────────────────────────────────
  BOTÃO FLUTUANTE V-ZION — canto inferior direito, só mobile,
  logo acima da nav de baixo
───────────────────────────────────────────────────────────────*/
.fab-vzion{ display:none; }
@media(max-width:760px){
  .fab-vzion{
    display:flex;align-items:center;justify-content:center;
    position:fixed;right:14px;z-index:740;
    bottom:calc(96px + env(safe-area-inset-bottom));
    width:50px;height:50px;border-radius:50%;
    background:#0b0b0b;border:1.5px solid var(--ouro);
    box-shadow:0 6px 20px rgba(0,0,0,.5),0 0 0 4px rgba(201,169,97,.08);
    color:var(--ouro);font-weight:800;font-size:1rem;text-decoration:none;
    transition:transform .22s ease;
  }
  .fab-vzion:active{ transform:scale(.92); }
  .fab-vzion img{ width:30px;height:30px;object-fit:contain;border-radius:50%; }
  body.menu-open .fab-vzion,
  body.conta-aberta .fab-vzion{ display:none; }
}
/* na própria V-zion o atalho já está na nav de baixo */
.vz-tema .fab-vzion{ display:none!important; }


/*───────────────────────────────────────────────────────────────
  MEU PERFIL
───────────────────────────────────────────────────────────────*/
.pf-secao{ padding-top:24px; }
.pf-aviso{
  display:flex;align-items:center;gap:10px;margin:0 0 20px;
  padding:13px 16px;border-radius:12px;font-size:.78rem;line-height:1.5;
}
.pf-aviso.ok  { background:rgba(61,220,132,.07);border:1px solid rgba(61,220,132,.24);color:#86efac; }
.pf-aviso.erro{ background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.26); color:#fca5a5; }

.pf-grade{ display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px; }
.pf-bloco{
  padding:24px;border-radius:16px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--linha-suave,rgba(255,255,255,.07));
}
.pf-bloco-largo{ grid-column:1/-1; }
.pf-bloco-cab{
  display:flex;align-items:center;gap:13px;
  padding-bottom:16px;margin-bottom:20px;
  border-bottom:1px solid var(--linha-suave,rgba(255,255,255,.07));
}
.pf-bloco-cab > i{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(201,169,97,.07);border:1px solid var(--linha,rgba(201,169,97,.2));
  color:var(--ouro-claro);font-size:.94rem;
}
.pf-bloco-cab div{ display:flex;flex-direction:column;gap:2px; }
.pf-bloco-cab b{
  font-family:var(--ff-display,'Playfair Display',serif);
  font-size:1.02rem;color:#fff;font-weight:700;
}
.pf-bloco-cab span{ font-size:.68rem;color:var(--mudo,rgba(255,255,255,.4)); }

.pf-campo{
  display:flex;flex-direction:column;gap:7px;margin-bottom:16px;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mudo,rgba(255,255,255,.42));
}
.pf-campo input{
  width:100%;padding:13px 15px;border-radius:11px;
  background:rgba(0,0,0,.32);border:1px solid var(--linha-suave,rgba(255,255,255,.09));
  color:#fff;font-family:inherit;font-size:.84rem;
  letter-spacing:0;text-transform:none;transition:border-color .22s ease;
}
.pf-campo input::placeholder{ color:rgba(255,255,255,.22); }
.pf-campo input:focus{ outline:0;border-color:var(--ouro); }
.pf-campo input:disabled{ opacity:.42;cursor:not-allowed; }
.pf-dica{
  font-style:normal;font-size:.62rem;letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.26);
}
.pf-linha{ display:grid;grid-template-columns:1fr 1fr;gap:12px; }

.pf-salvar{
  display:inline-flex;align-items:center;gap:10px;margin-top:6px;
  padding:13px 24px;border-radius:999px;cursor:pointer;font-family:inherit;
  background:none;border:1px solid var(--linha,rgba(201,169,97,.2));
  color:var(--ouro-claro);
  font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  transition:all .35s ease;
}
.pf-salvar:hover{ background:var(--ouro);border-color:var(--ouro);color:#171204; }
.pf-salvar i{ transition:transform .35s ease; }
.pf-salvar:hover i{ transform:translateX(3px); }

.pf-areas{ display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px; }
.pf-area{
  display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:13px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--linha-suave,rgba(255,255,255,.08));
  border-left:2px solid var(--c,var(--ouro));
}
.pf-area-ico{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);color:var(--c,var(--ouro));font-size:.9rem;
}
.pf-area-txt{ flex:1;min-width:0;display:flex;flex-direction:column;gap:1px; }
.pf-area-txt b{ font-size:.82rem;color:#fff; }
.pf-area-txt span{ font-size:.64rem;color:var(--mudo,rgba(255,255,255,.4)); }
.pf-area-num{
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c,var(--ouro));font-weight:700;white-space:nowrap;
}

.pf-nota{
  margin:18px 0 0;font-size:.74rem;line-height:1.65;
  color:var(--mudo,rgba(255,255,255,.42));
}
.pf-nota a{
  color:var(--ouro-claro);text-decoration:none;
  border-bottom:1px solid rgba(201,169,97,.3);
}
.pf-nota-vazia{
  display:flex;gap:11px;padding:16px;border-radius:13px;margin-top:0;
  background:rgba(255,255,255,.02);
  border:1px dashed var(--linha-suave,rgba(255,255,255,.1));
}
.pf-nota-vazia i{ color:var(--ouro);flex-shrink:0;margin-top:3px; }

@media(max-width:600px){
  .pf-grade{ grid-template-columns:1fr; }
  .pf-linha{ grid-template-columns:1fr; }
  .pf-bloco{ padding:18px; }
  .pf-salvar{ width:100%;justify-content:center; }
}

/*───────────────────────────────────────────────────────────────
  MEUS CURSOS — "ver os cursos" na linguagem do site
───────────────────────────────────────────────────────────────*/
.mc-vazio .btn-ouro{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:999px;
  background:none;border:1px solid var(--linha,rgba(201,169,97,.2));
  color:var(--ouro-claro);text-decoration:none;
  font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  transition:all .35s ease;
}
.mc-vazio .btn-ouro:hover{
  background:var(--ouro);border-color:var(--ouro);color:#171204;
}
.mc-vazio .btn-ouro i{ transition:transform .35s ease; }
.mc-vazio .btn-ouro:hover i{ transform:translateX(4px); }

/*───────────────────────────────────────────────────────────────
  BOTÃO FLUTUANTE DO TIKITO — espelho do da V-zion
───────────────────────────────────────────────────────────────*/
.fab-tikito{ border-color:var(--ouro); }
.vz-tema .fab-tikito{ display:none; }
@media(max-width:760px){
  .vz-tema .fab-tikito{ display:flex!important; }
}


/*═══════════════════════════════════════════════════════════════
  V-ZION · AGENDAMENTO — calendário compacto + horários ao lado

  Passo 1 escolhe o serviço. Passo 2 mostra calendário e horários
  lado a lado: clicou no dia, os horários aparecem na hora, sem
  trocar de tela.

  As regras antigas de .vz-cal-dias e .vz-dia continuam no arquivo
  e não atrapalham: a grade nova usa .vz-cal-grade.
═══════════════════════════════════════════════════════════════*/

/*───────────────────────────────────────────────────────────────
  TOPBAR — voltar pro Tikito
───────────────────────────────────────────────────────────────*/
.topo-link-tikito{ color:var(--ouro-claro); }
.topo-link-tikito b{ color:#fff; }
.topo-link-tikito:hover{ color:#fff; }
.topo-link-tikito:hover b{ color:var(--ouro-claro); }

/*───────────────────────────────────────────────────────────────
  AS DUAS COLUNAS — sem caixa, só o dourado marcando o que importa
  (mesma ideia da aura: cartão só nos serviços; dia/horário é aberto)
───────────────────────────────────────────────────────────────*/
.vz-agbox{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:16px 32px;align-items:start;margin-top:28px;
  padding-top:22px;border-top:1px solid var(--linha-suave,rgba(255,255,255,.07));
}

/*───────────────────────────────────────────────────────────────
  CALENDÁRIO — coluna estreita, agora sem caixa
───────────────────────────────────────────────────────────────*/
.vz-cal-sem{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:0;
}
.vz-cal-sem span{
  text-align:center;font-size:.54rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--mudo,rgba(255,255,255,.32));
}

.vz-cal-grade{
  display:grid;grid-template-columns:repeat(7,1fr);gap:5px;padding:8px 0 0;
}
.vz-cal-grade .vz-cal-load,
.vz-cal-grade .vz-cal-erro{ grid-column:1/-1;padding:34px 10px; }

.vz-dia-vazio{ aspect-ratio:1; }

.vz-cal-grade .vz-dia{
  position:relative;aspect-ratio:1;padding:0;gap:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:11px;cursor:pointer;font-family:inherit;
  background:transparent;border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.vz-cal-grade .vz-dia-num{
  font-size:.84rem;font-weight:600;color:rgba(255,255,255,.6);line-height:1;
}
/* o ponto embaixo do número diz "aqui tem horário" */
.vz-cal-grade .vz-dia-pt{
  width:3px;height:3px;border-radius:50%;margin-top:5px;background:transparent;
}
.vz-cal-grade .vz-dia.tem{
  background:rgba(201,169,97,.05);border-color:var(--linha-suave,rgba(255,255,255,.08));
}
.vz-cal-grade .vz-dia.tem .vz-dia-num{ color:#fff;font-weight:700; }
.vz-cal-grade .vz-dia.tem .vz-dia-pt{ background:var(--ouro); }
.vz-cal-grade .vz-dia.tem:hover{ border-color:var(--ouro);transform:translateY(-1px); }
.vz-cal-grade .vz-dia.hoje:not(.ativo){ border-color:var(--ouro-claro); }
.vz-cal-grade .vz-dia.hoje .vz-dia-num{ color:var(--ouro-claro); }
.vz-cal-grade .vz-dia.ativo{ background:var(--ouro);border-color:transparent;transform:none; }
.vz-cal-grade .vz-dia.ativo .vz-dia-num{ color:#171204;font-weight:800; }
.vz-cal-grade .vz-dia.ativo .vz-dia-pt{ background:rgba(23,18,4,.5); }
.vz-cal-grade .vz-dia.off{ opacity:.26;cursor:not-allowed; }
.vz-cal-grade .vz-dia:focus-visible{ outline:2px solid var(--ouro);outline-offset:2px; }

.vz-cal-rodape{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 0 0;margin-top:14px;
  border-top:1px solid var(--linha-suave,rgba(255,255,255,.06));
}
.vz-cal-leg{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  font-size:.6rem;color:var(--mudo,rgba(255,255,255,.34));
}
.vz-cal-leg-pt{ width:4px;height:4px;border-radius:50%;background:var(--ouro); }
.vz-cal-nota{
  font-size:.6rem;color:var(--mudo,rgba(255,255,255,.38));
  text-align:right;line-height:1.3;
}

/*───────────────────────────────────────────────────────────────
  HORÁRIOS — coluna da direita, botões maiores no formato pílula
  (mesmas proporções do au-slot da aura: coluna centralizada,
  hora em cima, rótulo pequeno embaixo)
───────────────────────────────────────────────────────────────*/
.vz-agbox .vz-slots-card{ display:flex;flex-direction:column; }
.vz-slots{ display:block;padding:0; }
.vz-agbox .vz-slots{
  flex:1;overflow-y:auto;max-height:min(58vh,460px);
  scrollbar-width:thin;scrollbar-color:rgba(201,169,97,.28) transparent;
}
.vz-agbox .vz-slots::-webkit-scrollbar{ width:5px; }
.vz-agbox .vz-slots::-webkit-scrollbar-thumb{
  background:rgba(201,169,97,.26);border-radius:99px;
}

.vz-slots-grupo{ padding-top:22px; }
.vz-slots-grupo:first-child{ padding-top:0; }
.vz-slots-per{
  display:flex;align-items:center;gap:8px;padding:0 2px;
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.vz-slots-per i{ color:var(--ouro);font-size:.7rem; }
.vz-slots-per em{
  margin-left:auto;font-style:normal;letter-spacing:.06em;
  font-size:.58rem;font-weight:600;color:var(--ouro-claro);
}
.vz-slots-linha{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:10px;padding:14px 2px 2px;
}
.vz-slots-linha .vz-slot{ min-width:0; }

/* o horário clicado fica marcado, inclusive ao voltar do WhatsApp —
   mesmo preenchimento dourado do dia ativo no calendário e do passo
   atual no trilho: é o único "selecionado" que existe na tela. */
.vz-slot.escolhido{
  background:var(--ouro);border-color:var(--ouro);color:#171204;
}
.vz-slot.escolhido .vz-slot-sub{ opacity:.72; }

.vz-slots-vazio{ padding:44px 20px; }

/*───────────────────────────────────────────────────────────────
  EMPILHA NO MOBILE
───────────────────────────────────────────────────────────────*/
@media(max-width:900px){
  .vz-agbox{ grid-template-columns:1fr;gap:12px; }
  .vz-agbox .vz-slots{ max-height:none;overflow:visible; }
}
@media(max-width:760px){
  .vz-cal-grade{ gap:4px; }
  .vz-cal-grade .vz-dia-num{ font-size:.86rem; }
  .vz-cal-rodape{ flex-wrap:wrap; }
  .vz-slots-linha{ grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:7px; }
  .vz-slots-linha .vz-slot{ padding:11px 4px;font-size:.86rem; }
  .vz-slots-vazio{ padding:34px 16px; }
}

/*───────────────────────────────────────────────────────────────
  RESERVAS · o formulário ao lado do calendário
───────────────────────────────────────────────────────────────*/
.agenda .vz-agbox{ margin-top:0; }
.ag-form{ display:flex;flex-direction:column;gap:11px;padding:14px; }
.ag-form label{
  display:flex;flex-direction:column;gap:6px;
  font-size:.62rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mudo,rgba(255,255,255,.42));
}
.ag-form input,
.ag-form select{
  padding:11px 13px;border-radius:9px;font-family:inherit;
  font-size:.78rem;font-weight:500;letter-spacing:.01em;text-transform:none;
  color:#fff;background:rgba(0,0,0,.26);
  border:1px solid var(--linha-suave,rgba(255,255,255,.09));
  transition:border-color .2s ease;
}
.ag-form input:focus,
.ag-form select:focus{ outline:none;border-color:var(--ouro); }
.ag-form input::placeholder{ color:rgba(255,255,255,.24); }
.ag-form select option{ background:#14100a;color:#fff; }

.ag-reco{
  display:flex;align-items:flex-start;gap:9px;margin:0;
  padding:11px 13px;border-radius:9px;
  font-size:.72rem;line-height:1.55;color:rgba(255,255,255,.62);
  background:rgba(201,169,97,.06);
  border:1px solid var(--linha,rgba(201,169,97,.18));
}
.ag-reco i{ color:var(--ouro);margin-top:2px;flex-shrink:0; }
.ag-reco b{ color:var(--ouro-claro);font-weight:700; }

.agenda .agenda-rodape{
  padding:12px 14px;
  border-top:1px solid var(--linha-suave,rgba(255,255,255,.06));
}

/*───────────────────────────────────────────────────────────────
  RESERVAS · quem vai tatuar e o estado vazio
───────────────────────────────────────────────────────────────*/
.prox-quem,
.res-quem{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--c,var(--ouro))!important;
}
.prox-quem i,
.res-quem i{ font-size:.72em;opacity:.85; }
.res-quem{
  font-size:.66rem;font-weight:600;letter-spacing:.02em;
}

.res-vazio{
  padding:52px 26px;text-align:center;border-radius:16px;
  background:rgba(0,0,0,.2);
  border:1px dashed var(--linha-suave,rgba(255,255,255,.09));
}
.res-vazio i{
  font-size:2rem;color:var(--ouro);opacity:.32;margin-bottom:14px;display:block;
}
.res-vazio h3{
  font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:600;
  color:#fff;margin:0 0 8px;
}
.res-vazio p{
  font-size:.76rem;line-height:1.65;color:var(--mudo,rgba(255,255,255,.44));
  max-width:390px;margin:0 auto;
}

/*───────────────────────────────────────────────────────────────
  PORTAL · nada aparece por trás durante o fade

  O .carrega some em .7s e o #portal entra em .55s. Nesse cruzamento
  os dois ficam translúcidos e a topbar de trás vaza na tela.

  display:none é proposital: opacity ou z-index perdem pra qualquer
  contexto de empilhamento que apareça no caminho. Assim não tem
  como vazar. A classe entra e sai no script.js.
───────────────────────────────────────────────────────────────*/
body.portal-on .topo,
body.portal-on .mnav,
body.portal-on .fab-vzion,
body.portal-on .fab-tikito,
body.portal-on .conta-menu,
/* rede de segurança: se o JS não tiver rodado ainda, o próprio
   estado do portal já derruba o header */
body:has(#portal.visivel) .topo,
body:has(#portal.visivel) .mnav,
body:has(#portal.visivel) .fab-vzion,
body:has(#portal.visivel) .fab-tikito,
body:has(#portal.visivel) .conta-menu{
  display:none!important;
}

/* e o portal por cima de tudo, sem depender de quem veio antes */
body.portal-on #portal,
body:has(#portal.visivel) #portal{ z-index:9999; }

/*───────────────────────────────────────────────────────────────
  NOVA SENHA · barrinha de força

  Três traços que acendem conforme a senha melhora. É retorno
  visual, não regra — quem barra é o mínimo de 6 no servidor.
───────────────────────────────────────────────────────────────*/
.rs-forca{
  display:flex;align-items:center;gap:5px;margin:-6px 0 2px;
}
.rs-forca span{
  flex:1;height:3px;border-radius:99px;
  background:var(--linha-suave,rgba(255,255,255,.08));
  transition:background .3s ease;
}
.rs-forca em{
  flex-shrink:0;margin-left:6px;font-style:normal;
  font-size:.6rem;letter-spacing:.06em;color:var(--mudo);
}
.rs-forca[data-n="1"] span:nth-child(1){ background:#d97757; }
.rs-forca[data-n="2"] span:nth-child(-n+2){ background:var(--ouro-claro); }
.rs-forca[data-n="3"] span{ background:var(--ouro); }
.rs-forca[data-n="3"] em{ color:var(--ouro-claro); }

/*───────────────────────────────────────────────────────────────
  RESERVAS · com quem marcar

  Cada profissional tem a própria agenda, então trocar de botão
  recarrega o calendário — não é filtro, é outra agenda.
───────────────────────────────────────────────────────────────*/
.ag-quem{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.ag-quem-btns{ display:flex;gap:7px;flex-wrap:wrap; }
.ag-quem-lbl{
  font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mudo,rgba(255,255,255,.42));
}
.ag-quem-btn{
  /* Eram dois nomes curtos esticados pela largura toda por causa
     do flex:1. Viraram chips do tamanho do próprio texto. */
  flex:0 0 auto;min-width:0;padding:7px 14px;border-radius:99px;cursor:pointer;font-family:inherit;
  font-size:.64rem;font-weight:600;letter-spacing:.05em;line-height:1.15;
  color:rgba(255,255,255,.6);background:rgba(0,0,0,.24);
  border:1px solid var(--linha-suave,rgba(255,255,255,.09));
  transition:all .22s ease;
}
.ag-quem-btn:hover{ color:#fff;border-color:var(--c,var(--ouro)); }
.ag-quem-btn.ativo{
  color:#171204;font-weight:700;
  background:var(--c,var(--ouro));border-color:transparent;
}

/* descrição da reserva, abaixo do local */
.res-desc{
  font-size:.66rem;line-height:1.5;color:var(--mudo,rgba(255,255,255,.42));
  display:block;margin-top:2px;
}

/* enquanto grava o pedido, o botão avisa que está trabalhando */
.btn-ouro.enviando{ opacity:.7;pointer-events:none; }

/*───────────────────────────────────────────────────────────────
  CURSOS — telas muito estreitas
───────────────────────────────────────────────────────────────*/
@media(max-width:400px){
  .curso{grid-template-columns:70px 1fr;gap:10px}
  .curso-desc{-webkit-line-clamp:1}
  .curso-meta > span:nth-child(n+2){display:none}
}


/*───────────────────────────────────────────────────────────────
  ENDEREÇO NO HEADER
  Saiu do bloco de quatro cartões do rodapé e virou uma linha só.
  Fica logo depois da marca, respirando de "piçarras — sc" sem
  encostar: perto o bastante pra ler junto, longe o bastante pra
  não virar subtítulo da logo. Some abaixo de 1180px, onde o
  espaço é todo do menu.
───────────────────────────────────────────────────────────────*/
.topo-end{
  display:inline-flex;align-items:center;gap:8px;
  margin-left:0;
  font-size:.7rem;letter-spacing:.08em;color:var(--mudo);
  white-space:nowrap;transition:color .3s ease;
}
/* Um risco embaixo, como se a linha estivesse apoiada no chão.
   Ele nasce curto sob o texto e completa a largura no hover —
   marca a informação sem gritar que é um link. */
.topo-end span{ position:relative;padding-bottom:3px; }
.topo-end span::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--ouro),transparent);
  opacity:.55;transform-origin:left;transform:scaleX(.62);
  transition:transform .45s var(--suave),opacity .35s ease;
}
.topo-end:hover span::after{ transform:scaleX(1);opacity:1; }
.topo-end i{ font-size:.72rem;color:var(--ouro); }
.topo-end:hover{ color:var(--osso); }
@media(max-width:1180px){ .topo-end{ display:none; } }


/*───────────────────────────────────────────────────────────────
  SALDO NO MENU DA CONTA — impresso pelo includes/pontos.php
───────────────────────────────────────────────────────────────*/
/* Vive entre o cabeçalho do menu e a lista de links: é sobre
       quem a pessoa é no clube, não é mais um destino. Por isso
       tem cara de painel e não de item clicável comum. */
    .conta-saldo{
      display:flex;align-items:center;gap:12px;text-decoration:none;
      margin:10px 12px 4px;padding:12px 13px;border-radius:13px;
      border:1px solid rgba(201,169,97,.4);
      background:linear-gradient(135deg,rgba(201,169,97,.16),rgba(201,169,97,.03));
      transition:border-color .18s ease,transform .18s ease;
    }
    .conta-saldo:hover{ border-color:rgba(201,169,97,.9);transform:translateY(-1px); }
    .conta-saldo > i:first-child{ font-size:15px;color:var(--ouro,#c9a961); }
    .conta-saldo-txt{ display:flex;flex-direction:column;gap:2px;line-height:1.15;min-width:0; }
    .conta-saldo-lbl{
      font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
      color:rgba(255,255,255,.5);
    }
    .conta-saldo-num{
      font-size:16px;font-weight:800;color:var(--ouro,#c9a961);
      font-variant-numeric:tabular-nums;
    }
    .conta-saldo-num small{
      font-size:9.5px;font-weight:600;opacity:.65;margin-left:4px;letter-spacing:.06em;
    }
    .conta-saldo-ir{ margin-left:auto;font-size:11px;color:rgba(255,255,255,.4); }


/*==============================================================
  CLUBE TIKITO
  Duas colunas: à esquerda quem você é no clube, à direita o que
  dá pra fazer com isso. Em telas estreitas vira uma coluna só,
  com o saldo em cima — é o que a pessoa abre a página pra ver.
==============================================================*/
.clube{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:26px;align-items:start;
}
/* A coluna da esquerda é um elemento só, empilhado por dentro.

   Antes eram irmãos soltos no grid, com a loja mandada pra
   `grid-row:1 / span 99` — e span 99 cria 99 linhas de verdade.
   Daí o vão enorme entre o clube e o "Boa sorte": eram noventa e
   poucas linhas vazias ocupando espaço. */
.cl-col{ display:flex;flex-direction:column;gap:22px;min-width:0; }
/* A loja fica na direita, parada no topo da própria coluna — nada
   de sticky: quando a esquerda acabava, ela seguia colada no alto
   da tela com um vão embaixo, parecendo quebrado. */
.cl-loja-col{ align-self:start; }
@media(max-width:940px){
  .clube{ grid-template-columns:1fr;gap:22px; }
}

.cl-bloco{
  border:1px solid rgba(255,255,255,.09);border-radius:18px;
  background:rgba(255,255,255,.02);padding:20px;
}
.cl-cab{ display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px; }
.cl-cab h3{ font-size:16px;font-weight:800;margin:0;letter-spacing:-.01em; }
.cl-cab span{ font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.5; }

/* ── meu saldo ─────────────────────────────────────────────── */
.cl-meu{
  display:flex;align-items:center;gap:16px;margin-bottom:18px;padding:16px 18px;
  border-radius:15px;border:1px solid var(--ouro,#c9a961);
  background:linear-gradient(135deg,rgba(201,169,97,.14),rgba(201,169,97,.03));
}
.cl-meu-num{ font-size:34px;font-weight:800;line-height:1;color:var(--ouro,#c9a961); }
.cl-meu-lbl{ font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.65;display:block;margin-top:4px; }
.cl-meu-pos{ margin-left:auto;text-align:right;font-size:11.5px;line-height:1.5;opacity:.75; }
.cl-meu-pos b{ display:block;font-size:17px;color:#fff; }

.cl-entrar{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  margin-bottom:18px;padding:16px 18px;border-radius:15px;
  border:1px dashed rgba(255,255,255,.16);
}
.cl-entrar p{ margin:0;font-size:12.5px;line-height:1.6;opacity:.8; }

/* ── ranking ───────────────────────────────────────────────── */
.cl-rank{ display:flex;flex-direction:column; }
.cl-rk{
  display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:12px;
  padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.06);
}
.cl-rk:last-child{ border-bottom:none; }
.cl-rk-pos{ font-size:12px;font-weight:800;opacity:.45;text-align:right; }
.cl-rk:nth-child(1) .cl-rk-pos{ color:var(--ouro,#c9a961);opacity:1; }
.cl-rk:nth-child(2) .cl-rk-pos,
.cl-rk:nth-child(3) .cl-rk-pos{ opacity:.8; }
.cl-rk-nome{ font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cl-rk-pts{ font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ouro,#c9a961); }
.cl-rk.eu{
  border-radius:10px;padding:10px 10px;margin:6px -10px 0;
  background:rgba(201,169,97,.1);border:1px solid rgba(201,169,97,.4);
}
.cl-rk.eu .cl-rk-nome::after{ content:' — você';opacity:.6;font-weight:400; }
.cl-fora{
  margin-top:10px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.12);
}

/* ── loja ──────────────────────────────────────────────────── */
.cl-loja{ display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px; }
.cl-prem{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid rgba(255,255,255,.09);border-radius:14px;
  background:rgba(255,255,255,.02);transition:.2s ease;
}
.cl-prem.pode{ border-color:rgba(201,169,97,.5); }
.cl-prem.pode:hover{ transform:translateY(-2px); }
.cl-prem.longe{ opacity:.55; }

/* Sem foto, o card mostra a marca sobre a cor da recompensa —
   melhor um lugar cheio de propósito que um retângulo cinza. */
.cl-prem-capa{
  position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;
  background:var(--c,#8b949e);
}
.cl-prem-capa::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 0,rgba(255,255,255,.22),transparent 70%);
}
.cl-prem-capa img{ width:100%;height:100%;object-fit:cover; }
.cl-prem-capa .cl-marca{ width:44%;max-width:78px;opacity:.9;filter:drop-shadow(0 3px 10px rgba(0,0,0,.4)); }
.cl-prem-corpo{ padding:12px 13px 14px;display:flex;flex-direction:column;gap:5px;flex:1; }
.cl-prem-nome{ font-size:13px;font-weight:700;line-height:1.3; }
.cl-prem-desc{ font-size:11px;line-height:1.5;opacity:.6;flex:1; }
.cl-prem-pe{ display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px; }
.cl-prem-custo{ font-size:12.5px;font-weight:800;color:var(--ouro,#c9a961);white-space:nowrap; }
.cl-prem-custo small{ font-size:9px;font-weight:600;opacity:.6;letter-spacing:.08em;text-transform:uppercase; }
.cl-prem-btn{
  border:1px solid var(--ouro,#c9a961);background:transparent;color:var(--ouro,#c9a961);
  font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:6px 12px;border-radius:999px;cursor:pointer;transition:.18s ease;
}
.cl-prem-btn:hover{ background:var(--ouro,#c9a961);color:#0b0b0c; }
.cl-prem-btn:disabled{ border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.35);cursor:not-allowed;background:none; }
.cl-falta{ font-size:10.5px;opacity:.55; }

/* ── resgates da pessoa ────────────────────────────────────── */
.cl-meus{ margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08); }
.cl-meu-res{
  display:flex;align-items:center;gap:10px;padding:8px 0;font-size:12px;
}
.cl-cod{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;letter-spacing:.08em;
  border:1px solid rgba(201,169,97,.5);color:var(--ouro,#c9a961);
  border-radius:7px;padding:4px 9px;font-size:11.5px;
}

/* ── regras ────────────────────────────────────────────────── */
.cl-tab{ width:100%;border-collapse:collapse;font-size:12.5px; }
.cl-tab td{ padding:9px 4px;border-bottom:1px solid rgba(255,255,255,.06); }
.cl-tab td:last-child{ text-align:right;font-weight:800;color:var(--ouro,#c9a961);white-space:nowrap; }
.cl-tab tr:last-child td{ border-bottom:none; }
.cl-miudo{ margin-top:14px;font-size:11.5px;line-height:1.7;opacity:.6; }
.cl-miudo li{ margin-bottom:3px; }

/* ── em breve ──────────────────────────────────────────────── */
/* Uma coluna: o convite é uma área de trabalho (link, botões,
   números) e a roleta é um aviso de "vem aí". Lado a lado, o
   aviso roubava metade do espaço de quem veio compartilhar. */
.cl-breve{ display:grid;grid-template-columns:1fr;gap:14px; }
.cl-breve-card{
  position:relative;padding:22px 20px;border-radius:16px;
  border:1px dashed rgba(255,255,255,.15);background:rgba(255,255,255,.015);
}
.cl-breve-tag{
  position:absolute;top:14px;right:14px;
  font-size:8.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ouro,#c9a961);border:1px solid rgba(201,169,97,.45);
  border-radius:999px;padding:3px 9px;
}
.cl-breve-card i{ font-size:20px;color:var(--ouro,#c9a961);opacity:.75; }
.cl-breve-card h4{ font-size:14.5px;font-weight:800;margin:11px 0 6px; }
.cl-breve-card p{ font-size:12px;line-height:1.65;opacity:.6;margin:0; }


/*───────────────────────────────────────────────────────────────
  CURSOS — a lista dentro de um container

  Mesma caixa da "cadeira reservada" da barbearia: a lista deixa
  de ser uma tira solta na largura da página e passa a ter borda,
  canto e um fundo quase imperceptível. O ganho não é decorativo —
  é o de dizer onde a lista começa e onde termina. Solta, ela se
  confundia com o resto da seção.

  Vale pra qualquer .cursos-lista, então a home e a cursos.php
  pegam a mesma caixa sem precisar de regra separada.
───────────────────────────────────────────────────────────────*/
.cursos-lista{
  /* 920px era a medida da barbearia, onde a caixa divide a tela com
     mais coisa. Aqui ela é o conteúdo principal da seção — vai até
     onde a seção vai, tirando o respiro das laterais. */
  max-width:1176px;margin-left:auto;margin-right:auto;
  border-top:none;
  border:1px solid var(--linha);border-radius:22px;
  background:rgba(236,231,219,.015);
  /* Sem padding no container e com overflow escondido: o respiro
     vira padding de cada item, e aí o fundo do "em breve" e o
     realce do hover vão de borda a borda em vez de pararem antes
     dela — era isso que parecia recorte na esquerda e nas pontas.
     O overflow ainda garante que o fundo respeite o canto de 22px. */
  padding:0;overflow:hidden;
}
.cursos-lista .curso{ padding-left:clamp(16px,3vw,30px);padding-right:clamp(16px,3vw,30px); }
.cursos-lista .curso:first-child{ padding-top:28px; }
.cursos-lista .curso:last-child{ padding-bottom:28px; }
/* o fio entre itens acompanha o respiro lateral */
.cursos-lista .curso::after{ left:clamp(16px,3vw,30px);right:clamp(16px,3vw,30px); }


/* o rótulo e o título acompanham a largura da caixa */
.secao-cursos-home .rotulo,
.secao-cursos-home .secao-titulo,
.secao-cursos-home .portfolio-rodape{
  max-width:1176px;margin-left:auto;margin-right:auto;
}

@media(max-width:760px){
  .cursos-lista{ border-radius:16px; }
  .cursos-lista .curso{ padding-left:12px;padding-right:12px; }
  .cursos-lista .curso:first-child{ padding-top:18px; }
  .cursos-lista .curso:last-child{ padding-bottom:18px; }
  .cursos-lista .curso::after{ left:12px;right:12px; }
}


/*───────────────────────────────────────────────────────────────
  SORTEIO — descrição que abre

  A descrição de um sorteio pode ser um parágrafo inteiro, e o card
  virava um muro de texto. Ela nasce cortada em duas linhas com um
  "continuar" ao lado; quem quer ler, abre ali mesmo, sem sair do
  card e sem modal nenhum no caminho.
───────────────────────────────────────────────────────────────*/
/* Só corta quando o PHP disse que há o que cortar. Clampar tudo
   deixava descrição de uma linha com reticências invisíveis e o
   botão prometendo texto que não existia. */
.bilhete-desc.cortada{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.bilhete-desc.cortada.aberta{ -webkit-line-clamp:unset;overflow:visible; }
.bilhete-mais{
  display:none;align-items:center;gap:5px;margin-top:6px;
  background:none;border:none;padding:0;cursor:pointer;font-family:inherit;
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:lowercase;
  color:var(--ouro);transition:color .25s ease;
}
.bilhete-mais.aparece{ display:inline-flex; }
.bilhete-mais:hover{ color:var(--ouro-claro); }
.bilhete-mais i{ font-size:.6rem;transition:transform .3s var(--suave); }
.bilhete-mais.aberto i{ transform:rotate(180deg); }


/* A chamada do clube colava no primeiro bloco — texto e conteúdo
   sem intervalo leem como uma coisa só. */
#clube .secao-desc{ margin-bottom:34px; }

/*───────────────────────────────────────────────────────────────
  ARRASTO — o que não é texto não se arrasta

  Segurar o botão em cima de uma imagem começava um arrasto de
  arquivo, com aquela miniatura fantasma colada no cursor. Em cima
  de um card, começava uma seleção que pintava metade da tela de
  azul. Nenhum dos dois é o que a pessoa queria fazer — ela só
  estava tentando rolar a página.

  Texto de leitura continua selecionável: parágrafo, descrição e
  regra ficam de fora da regra.
───────────────────────────────────────────────────────────────*/
img, svg, video{ -webkit-user-drag:none;user-select:none; }

.topo, .mnav, .rodape-base,
.curso-capa, .curso-meta, .curso-ir,
.bilhete-foto, .bilhete-rodape, .bilhete-datas,
.vz-slot, .vz-dia, .vz-serv, .vz-trilho-item,
.cl-prem, .cl-rk, .cl-cod, .cl-breve-tag,
.pf-carrossel, .rotulo, .btn-ouro, .btn-linha,
button, .conta-menu{
  user-select:none;-webkit-user-select:none;
}

/* rolagem elástica não puxa a página inteira junto */
html, body{ overscroll-behavior-y:none; }

/* marcador de versão — se este seletor não existir no CSS que o
   navegador carregou, é arquivo velho em cache, não bug de estilo */
:root{ --tikito-css:"v3-agenda-vzion"; }

/*───────────────────────────────────────────────────────────────
  HORÁRIOS — a troca de um dia pro outro

  Antes a lista sumia e a nova aparecia pronta: um corte seco, e
  como as duas têm alturas diferentes a coluna colapsava e voltava
  a crescer no meio do caminho.

  Agora a antiga recua sem sair do lugar — segura a altura — e a
  nova entra em cascata, um período por vez. A cascata é curta de
  propósito: ela dá a leitura de "chegou coisa nova" sem virar
  espera. Três grupos no máximo, 55ms entre eles.
───────────────────────────────────────────────────────────────*/
.vz-slots{
  transition:opacity .2s ease,filter .2s ease;
}
.vz-slots.trocando{
  opacity:.28;filter:blur(1.5px);pointer-events:none;
}

.vz-slots-grupo{
  animation:vzSlotEntra .34s cubic-bezier(.22,1,.36,1) both;
}
.vz-slots-grupo:nth-child(2){ animation-delay:.055s; }
.vz-slots-grupo:nth-child(3){ animation-delay:.11s; }
@keyframes vzSlotEntra{
  from{ opacity:0;transform:translateY(9px); }
  to  { opacity:1;transform:none; }
}

/* o dia escolhido no calendário também troca com transição, em vez
   de piscar de um quadrado pro outro */
.vz-dia{ transition:background .22s ease,border-color .22s ease,color .22s ease; }

@media(prefers-reduced-motion:reduce){
  .vz-slots.trocando{ opacity:1;filter:none; }
  .vz-slots-grupo{ animation:none; }
}

/*───────────────────────────────────────────────────────────────
  INVENTÁRIO — o que os pontos viraram
───────────────────────────────────────────────────────────────*/
.inv-topo{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:22px 24px;border-radius:18px;margin-bottom:34px;
  border:1px solid rgba(201,169,97,.4);
  background:linear-gradient(135deg,rgba(201,169,97,.13),rgba(201,169,97,.02));
}
.inv-saldo-num{ font-size:40px;font-weight:800;line-height:1;color:var(--ouro); }
.inv-saldo-lbl{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.6;display:block;margin-top:5px;
}
.inv-mini{ display:flex;flex-direction:column;gap:2px; }
.inv-mini b{ font-size:17px;font-weight:800; }
.inv-mini span{ font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.5; }
.inv-topo .btn-ouro{ margin-left:auto; }

.inv-secao{ margin-bottom:40px; }
.inv-lista{
  display:flex;flex-direction:column;margin-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.inv-item{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:15px 4px;border-bottom:1px solid rgba(255,255,255,.08);
}
.inv-item.cancelado{ opacity:.5; }

.inv-item-est{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  font-size:14px;color:var(--ouro);
  background:rgba(201,169,97,.1);border:1px solid rgba(201,169,97,.3);
}
.inv-item.entregue .inv-item-est,
.inv-item-est.ok{
  color:#4ade80;background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.35);
}
.inv-item.cancelado .inv-item-est{
  color:var(--mudo);background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);
}

.inv-item-txt{ display:flex;flex-direction:column;gap:2px;min-width:0; }
.inv-item-txt b{ font-size:14px;font-weight:700; }
.inv-item-txt em{ font-size:11px;opacity:.5;font-style:normal; }
.inv-item-est-txt{ font-size:11.5px;opacity:.75;margin-top:3px; }

/* O código é o que a pessoa mostra no balcão — por isso ele tem
   peso de etiqueta, não de detalhe. Depois de entregue, recua. */
.inv-cod{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;font-weight:700;letter-spacing:.1em;white-space:nowrap;
  color:var(--ouro);border:1px solid rgba(201,169,97,.45);
  border-radius:9px;padding:8px 12px;
}
.inv-cod.usado{
  color:var(--mudo);border-color:rgba(255,255,255,.12);
  text-decoration:line-through;
}
.inv-ganho{
  font-size:15px;font-weight:800;color:#4ade80;font-variant-numeric:tabular-nums;
}

@media(max-width:620px){
  .inv-topo{ gap:18px;padding:18px; }
  .inv-topo .btn-ouro{ margin-left:0;width:100%;justify-content:center; }
  .inv-item{ grid-template-columns:auto 1fr;row-gap:8px; }
  .inv-cod,.inv-ganho{ grid-column:2;justify-self:start; }
}

/*───────────────────────────────────────────────────────────────
  MODAL DO CLUBE — confirmar o resgate e mostrar o código

  Substitui o `alert()` do navegador, que além de feio não deixa
  copiar o código nem oferece caminho pro inventário — e, pior,
  não dava chance de desistir: o ponto já tinha saído quando a
  caixa aparecia.
───────────────────────────────────────────────────────────────*/
/* `hidden` é atributo e o navegador o aplica com um `display:none`
   de peso mínimo — qualquer classe com `display` ganha dele. O
   modal declara `display:grid`, então ficava cobrindo a página
   inteira em opacity:0: invisível e engolindo todo clique. */
[hidden]{ display:none!important; }

.pm{
  position:fixed;inset:0;z-index:9000;
  display:grid;place-items:center;padding:22px;
  background:rgba(5,5,4,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s ease;
}
.pm.aberto{ opacity:1; }

.pm-caixa{
  position:relative;width:min(430px,100%);padding:34px 30px 26px;
  border-radius:20px;text-align:center;
  background:linear-gradient(160deg,#14130f,#0a0a09);
  border:1px solid rgba(201,169,97,.32);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:translateY(14px) scale(.97);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.pm.aberto .pm-caixa{ transform:none; }

.pm-fechar{
  position:absolute;top:14px;right:14px;
  background:none;border:none;color:var(--mudo);cursor:pointer;font-size:14px;
  padding:6px 8px;border-radius:8px;transition:.2s ease;
}
.pm-fechar:hover{ color:var(--osso);background:rgba(255,255,255,.06); }

.pm-ico{
  width:56px;height:56px;margin:0 auto 16px;border-radius:50%;
  display:grid;place-items:center;font-size:22px;
  color:var(--pm-cor,var(--ouro));
  background:color-mix(in srgb,var(--pm-cor,#c9a961) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--pm-cor,#c9a961) 45%,transparent);
}
.pm-titulo{
  font-family:var(--ff-display,'Playfair Display',serif);
  font-size:1.5rem;font-weight:700;margin-bottom:9px;
}
.pm-msg{ font-size:.88rem;line-height:1.65;color:var(--osso-2);margin-bottom:20px; }
.pm-msg b{ color:var(--osso); }

/* O código tem peso de etiqueta: é a única coisa da tela que a
   pessoa precisa levar embora. */
.pm-cod{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:-6px 0 20px;padding:13px;border-radius:13px;
  background:rgba(201,169,97,.08);border:1px dashed rgba(201,169,97,.45);
}
.pm-cod span{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.15rem;font-weight:700;letter-spacing:.16em;color:var(--ouro);
}
.pm-copiar{
  background:none;border:1px solid rgba(255,255,255,.14);color:var(--mudo);
  font-family:inherit;font-size:.62rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 10px;border-radius:99px;cursor:pointer;
  transition:.2s ease;
}
.pm-copiar:hover{ color:var(--osso);border-color:var(--ouro); }

.pm-acoes{ display:flex;gap:9px;justify-content:center;flex-wrap:wrap; }
.pm-btn{
  flex:1;min-width:130px;padding:12px 18px;border-radius:99px;cursor:pointer;
  font-family:inherit;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;text-align:center;
  border:1px solid transparent;transition:.22s ease;
}
.pm-ouro{ background:var(--ouro);color:#171204; }
.pm-ouro:hover{ background:var(--ouro-claro); }
.pm-ouro:disabled{ opacity:.55;cursor:default; }
.pm-ghost{ background:none;border-color:rgba(255,255,255,.16);color:var(--osso-2); }
.pm-ghost:hover{ border-color:var(--ouro);color:var(--ouro); }

@media(max-width:460px){
  .pm-caixa{ padding:30px 20px 22px; }
  .pm-btn{ flex:1 1 100%; }
}

/*───────────────────────────────────────────────────────────────
  CONVITE — o link de indicação
───────────────────────────────────────────────────────────────*/
.cl-convite{
  padding:20px;border-radius:16px;
  border:1px solid rgba(201,169,97,.34);
  background:linear-gradient(150deg,rgba(201,169,97,.11),rgba(201,169,97,.02));
}
.cl-conv-cab{ display:flex;gap:13px;align-items:flex-start;margin-bottom:15px; }
.cl-conv-cab > i{ font-size:19px;color:var(--ouro);margin-top:2px; }
.cl-conv-cab h4{ font-size:14.5px;font-weight:800;margin-bottom:4px; }
.cl-conv-cab p{ font-size:11.5px;line-height:1.6;opacity:.62;margin:0; }

/* Campo em vez de texto solto: no celular, marcar uma URL longa
   com o dedo é penoso, e no desktop o clique duplo pega metade. */
.cl-link{ display:flex;gap:8px;margin-bottom:11px; }
.cl-link input{
  flex:1;min-width:0;padding:11px 13px;border-radius:11px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.1);
  color:var(--osso);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;text-overflow:ellipsis;
}
.cl-link input:focus{ outline:none;border-color:var(--ouro); }
.cl-link-btn{
  display:flex;align-items:center;gap:7px;padding:0 15px;border-radius:11px;
  background:var(--ouro);border:none;color:#171204;cursor:pointer;
  font-family:inherit;font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;transition:.2s ease;
}
.cl-link-btn:hover{ background:var(--ouro-claro); }
.cl-link-btn.ok{ background:#22c55e;color:#05140a; }

.cl-conv-acoes{ display:flex;gap:8px;margin-bottom:15px; }
.cl-conv-share,.cl-conv-wpp{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px;border-radius:11px;cursor:pointer;text-decoration:none;
  font-family:inherit;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  background:none;border:1px solid rgba(255,255,255,.14);color:var(--osso-2);
  transition:.2s ease;
}
.cl-conv-share:hover{ border-color:var(--ouro);color:var(--ouro); }
.cl-conv-wpp:hover{ border-color:#25d366;color:#25d366; }

.cl-conv-nums{
  display:flex;gap:18px;flex-wrap:wrap;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.09);
}
.cl-conv-nums span{ font-size:10.5px;opacity:.55;display:flex;flex-direction:column;gap:1px; }
.cl-conv-nums b{ font-size:16px;font-weight:800;color:var(--ouro);opacity:1; }

.cl-conv-nota{
  display:flex;gap:8px;align-items:flex-start;margin:13px 0 0;
  font-size:11px;line-height:1.6;opacity:.55;
}
.cl-conv-nota i{ color:var(--ouro);margin-top:2px; }

/*───────────────────────────────────────────────────────────────
  ROLETA DA SORTE

  A roda é SVG vindo do servidor: as fatias e os pesos ficam lá,
  onde ninguém edita pelo console. Aqui ela só gira.
───────────────────────────────────────────────────────────────*/
.cl-roleta{
  padding:20px;border-radius:16px;text-align:center;
  border:1px solid rgba(201,169,97,.34);
  background:linear-gradient(150deg,rgba(201,169,97,.11),rgba(201,169,97,.02));
}
.cl-roleta .cl-conv-cab{ text-align:left; }

.rl-palco{
  position:relative;width:min(268px,80vw);aspect-ratio:1;margin:6px auto 18px;
}
.rl-roda{
  width:100%;height:100%;border-radius:50%;
  box-shadow:0 0 0 6px rgba(201,169,97,.16),0 18px 40px rgba(0,0,0,.45);
  will-change:transform;
}
.rl-svg{ width:100%;height:100%;display:block;border-radius:50%; }

/* O ponteiro fica parado no topo e a roda passa por baixo — é o
   contrário do que a intuição pede, mas é como roleta funciona
   na vida real, e evita ter que animar duas coisas. */
.rl-seta{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:0;height:0;z-index:3;
  border-left:11px solid transparent;border-right:11px solid transparent;
  border-top:19px solid var(--ouro);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));
}
.rl-centro{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#0b0b0a;border:2px solid var(--ouro);color:var(--ouro);
  font-size:14px;z-index:2;
}

.rl-btn{ width:100%;justify-content:center;margin-bottom:14px; }
.rl-btn:disabled{ opacity:.45;cursor:not-allowed; }

.rl-fatias{
  display:flex;flex-wrap:wrap;gap:7px 14px;justify-content:center;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.09);
}
.rl-fatias span{ font-size:10.5px;opacity:.6;display:flex;align-items:center;gap:6px; }
.rl-fatias i{ width:9px;height:9px;border-radius:3px;display:inline-block; }

@media(prefers-reduced-motion:reduce){
  .rl-roda{ transition:none!important; }
}