/* KCU Services, página inicial (10/11/2026): escuro + dourado, a cara da loja O OURO. */
:root{
  --bg:#0d0b07; --bg2:#14110a; --painel:#1a160d; --linha:rgba(232,190,95,.16); --linha2:rgba(232,190,95,.34);
  --ouro:#e8be5f; --ouro2:#f6d98c; --ouro3:#b8892b; --txt:#f4ecd9; --mute:#b9ab8c;
  --raio:16px; --disp:"Oswald",sans-serif; --sans:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--ouro);color:var(--bg)}
:focus-visible{outline:2px solid var(--ouro2);outline-offset:3px;border-radius:6px}
.largura{width:min(1160px,100% - 40px);margin-inline:auto}
.saltar{position:absolute;left:-999px;top:8px;z-index:50;background:var(--ouro);color:var(--bg);padding:8px 12px;border-radius:8px}
.saltar:focus{left:8px}

/* topo */
.topo{position:sticky;top:0;z-index:20;background:rgba(13,11,7,.82);backdrop-filter:blur(12px) saturate(1.3);border-bottom:1px solid var(--linha)}
.topo-in{display:flex;align-items:center;gap:28px;height:66px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--disp);font-size:20px;letter-spacing:.06em;text-transform:uppercase}
.marca img{width:34px;height:34px;border-radius:50%;border:1px solid var(--linha2)}
.marca b{color:var(--ouro)}
.menu{display:flex;gap:24px;margin-left:auto}
.menu a{text-decoration:none;color:var(--mute);font-size:14.5px;transition:color .2s}
.menu a:hover{color:var(--ouro2)}

/* botões */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:700;font-size:15px;
  color:#1a1305;background:linear-gradient(120deg,var(--ouro2),var(--ouro) 50%,var(--ouro3));box-shadow:0 10px 30px -12px rgba(232,190,95,.7);transition:transform .2s,box-shadow .2s}
.btn::before{content:"";position:absolute;top:0;bottom:0;width:60%;left:-80%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transition:left .6s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(232,190,95,.9)}
.btn:hover::before{left:120%}
.btn span[aria-hidden]{transition:transform .2s}
.btn:hover span[aria-hidden]{transform:translateX(4px)}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-grande{padding:16px 28px;font-size:17px}
.btn-linha{background:transparent;color:var(--txt);border:1px solid var(--linha2);box-shadow:none}
.btn-linha:hover{border-color:var(--ouro);color:var(--ouro2);box-shadow:none}

/* hero */
.hero{position:relative;isolation:isolate;padding:110px 0 90px;text-align:center;overflow:hidden}
.hero-fundo{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-fundo i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.hero-fundo .b1{width:620px;height:620px;left:50%;top:-260px;margin-left:-310px;background:radial-gradient(circle,rgba(232,190,95,.55),transparent 65%);animation:flut 14s ease-in-out infinite}
.hero-fundo .b2{width:420px;height:420px;right:-120px;bottom:-200px;background:radial-gradient(circle,rgba(184,137,43,.45),transparent 65%);animation:flut 18s ease-in-out infinite reverse}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(232,190,95,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(232,190,95,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)}
@keyframes flut{50%{transform:translate(30px,40px) scale(1.08)}}
.selo{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;border:1px solid var(--linha2);background:rgba(232,190,95,.06);font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ouro2)}
.ponto{width:8px;height:8px;border-radius:50%;background:var(--ouro);box-shadow:0 0 0 0 rgba(232,190,95,.7);animation:pulso 2s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 10px rgba(232,190,95,0)}100%{box-shadow:0 0 0 0 rgba(232,190,95,0)}}
.hero h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(40px,6.4vw,80px);line-height:1.02;margin:24px auto 22px;max-width:15em}
.hero h1 span,.hero h1 em{display:block}
.hero h1 em{font-style:normal;background:linear-gradient(180deg,var(--ouro2),var(--ouro) 50%,var(--ouro3));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .l1{animation:entra .8s .1s cubic-bezier(.2,.7,.2,1) both}
.hero h1 .l2{animation:entra .8s .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes entra{from{opacity:0;transform:translateY(24px);filter:blur(8px)}}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--mute);max-width:640px;margin:0 auto}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.confianca{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:34px;font-size:14px;color:var(--mute)}
.confianca i{color:var(--ouro);margin-right:6px}

/* blocos */
.bloco{padding:90px 0;border-top:1px solid var(--linha)}
.bloco-cab{text-align:center;margin-bottom:46px}
.sobre{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro)}
h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(30px,4.2vw,52px);line-height:1.06;margin-top:12px}
h2 span{color:var(--mute)}
h3{font-size:19px;line-height:1.25}

.tres{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tres li{padding:30px 26px;border-radius:var(--raio);background:linear-gradient(180deg,var(--painel),var(--bg2));border:1px solid var(--linha);text-align:center;transition:transform .3s,border-color .3s}
.tres li:hover{transform:translateY(-4px);border-color:var(--linha2)}
.tres i,.produto>i,.modos i{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 18px;border-radius:14px;font-size:22px;color:var(--ouro2);background:rgba(232,190,95,.1);border:1px solid var(--linha2)}
.tres p{color:var(--mute);margin-top:10px;font-size:15.5px}

.produtos{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.produto{position:relative;display:flex;flex-direction:column;padding:30px 28px;border-radius:var(--raio);background:linear-gradient(180deg,var(--painel),var(--bg2));border:1px solid var(--linha);transition:transform .3s,border-color .3s,box-shadow .3s}
.produto:hover{transform:translateY(-4px);border-color:var(--linha2);box-shadow:0 24px 50px -28px rgba(232,190,95,.5)}
.produto.destaque{border-color:var(--linha2);background:linear-gradient(180deg,#221b0e,var(--bg2))}
.produto>i{margin:0 0 18px}
.etq{position:absolute;top:30px;right:28px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.produto h3{font-size:22px}
.produto>p{color:var(--mute);margin:10px 0 16px;font-size:15.5px}
.inclui{list-style:none;margin-bottom:24px;flex:1}
.inclui li{position:relative;padding:7px 0 7px 26px;font-size:15px;border-top:1px solid var(--linha)}
.inclui li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:2px;top:8px;font-size:12px;color:var(--ouro)}
.produto .btn{align-self:flex-start}
.todos{text-align:center;margin-top:30px;color:var(--mute)}
.todos a{color:var(--ouro2);font-weight:600;text-decoration:none;border-bottom:1px solid var(--linha2)}

.prints{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.janela{border-radius:14px;overflow:hidden;border:1px solid var(--linha2);background:var(--painel);box-shadow:0 30px 70px -30px rgba(0,0,0,.9),0 0 60px -30px rgba(232,190,95,.4)}
.janela-barra{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--linha);font-family:var(--mono);font-size:12px;color:var(--mute)}
.janela-barra i{width:10px;height:10px;border-radius:50%;background:#3a3122}
.janela-barra span{margin-left:8px}
.janela img{width:100%}

.passos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:p}
.passos li{position:relative;padding:30px 26px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--bg2);text-align:center}
.passos b{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 16px;border-radius:50%;font-family:var(--disp);font-size:22px;color:#1a1305;background:linear-gradient(120deg,var(--ouro2),var(--ouro3))}
.passos p{color:var(--mute);margin-top:8px;font-size:15.5px}

.assist{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.assist>div>p{color:var(--mute);margin:18px 0 28px;max-width:30em}
.modos{list-style:none;display:grid;gap:14px}
.modos li{display:flex;gap:18px;align-items:center;padding:20px 22px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--bg2)}
.modos i{margin:0;flex:none}
.modos p{color:var(--mute);font-size:15px}

.faq details{max-width:820px;margin:0 auto;border-bottom:1px solid var(--linha)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:20px 4px;font-weight:600;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ouro);font-size:22px;line-height:1;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 4px 20px;color:var(--mute)}
.faq a{color:var(--ouro2)}

.fim{text-align:center;background:radial-gradient(ellipse at 50% 120%,rgba(232,190,95,.18),transparent 60%)}

.rodape{border-top:1px solid var(--linha);padding:34px 0 40px;font-size:14px;color:var(--mute)}
.rodape-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.legal{display:flex;flex-wrap:wrap;gap:8px 18px}
.rodape a{color:var(--mute);text-decoration:none}
.rodape a:hover{color:var(--ouro2)}
.outros{font-size:13px;opacity:.75}

/* entrada ao scroll (o JS só junta a classe; sem JS fica tudo visível) */
.revela{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.revela.visto{opacity:1;transform:none}

@media (max-width:900px){
  .menu{display:none}
  .topo-in{justify-content:space-between}
  .tres,.passos{grid-template-columns:1fr}
  .produtos,.prints,.assist{grid-template-columns:1fr}
  .assist{gap:36px;text-align:center}
  .assist>div>p{margin-inline:auto}
}
@media (max-width:640px){
  .hero{padding:70px 0 64px}
  .bloco{padding:64px 0}
  .bloco-cab{margin-bottom:32px}
  .hero-cta .btn{width:100%}
  .produto{text-align:center;padding:26px 22px}
  .produto>i{margin:0 auto 14px}
  .etq{position:static;display:block;margin-bottom:8px}
  .produto .btn{align-self:stretch}
  .inclui{text-align:left;max-width:280px;margin-inline:auto;width:100%}
  .modos li{flex-direction:column;text-align:center}
  .rodape-in{flex-direction:column;text-align:center}
  .legal{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .revela{opacity:1;transform:none}
}

/* shortcut: esconde a faixa que o kcu_loja.py antigo ainda injeta; sai quando o servidor novo for reiniciado */
.k-faixa,.k-faixa-x{display:none!important}

/* 10/11: faixa animada de desconto, entre o topo e "O que resolve" */
.promo{display:block;overflow:hidden;text-decoration:none;color:#1a1305;background:linear-gradient(90deg,var(--ouro3),var(--ouro2) 50%,var(--ouro3));border-block:1px solid var(--ouro2);box-shadow:0 0 40px -10px rgba(232,190,95,.6)}
.promo-trilho{display:flex;width:max-content;animation:promoCorre 28s linear infinite}
.promo:hover .promo-trilho{animation-play-state:paused}
.promo-grupo{display:flex;align-items:center;gap:22px;padding:13px 11px;font-family:var(--disp);font-size:17px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.promo-grupo i{margin-right:6px}
@keyframes promoCorre{to{transform:translateX(-50%)}}
@media (max-width:640px){.promo-grupo{font-size:14.5px;gap:16px;padding:11px 8px}}
@media (prefers-reduced-motion:reduce){.promo-trilho{animation:none!important;justify-content:center;width:auto}.promo-grupo+.promo-grupo{display:none}}

/* 10/11: pacotes (2 produtos juntos, mais baratos) */
.pacotes{margin-top:34px;padding:28px;border-radius:var(--raio);border:1px dashed var(--linha2);background:rgba(232,190,95,.04)}
.pacotes-frase{text-align:center;font-weight:600;color:var(--ouro2);margin-bottom:20px}
.pacotes-frase i{margin-right:8px}
.pacotes ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pacote{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:14px;border:1px solid var(--linha2);background:linear-gradient(180deg,#221b0e,var(--bg2))}
.pacote .etq{top:24px;right:24px}
.pacote>p{color:var(--mute);font-size:15px}
.pacote .pacote-preco{display:flex;align-items:baseline;gap:10px;margin:6px 0 10px;color:var(--txt)}
.pacote-preco b{font-family:var(--disp);font-size:30px;color:var(--ouro2)}
.pacote-preco s{color:var(--mute);font-size:17px}
.pacote .btn{align-self:flex-start}
@media (max-width:900px){.pacotes ul{grid-template-columns:1fr}}
@media (max-width:640px){.pacotes{padding:20px 14px}.pacote{text-align:center}.pacote .etq{position:static}.pacote .pacote-preco{justify-content:center}.pacote .btn{align-self:stretch}}