/* Key Produtora — camada visual v9
   Só visual. Não altera layout de formulários, IDs ou fluxos. */

:root{
  --glow:rgba(249,211,66,.14);
  --glow-forte:rgba(249,211,66,.28);
  --sombra:0 18px 48px rgba(0,0,0,.38);
  --sombra-curta:0 8px 24px rgba(0,0,0,.28);
  --ease:cubic-bezier(.22,.8,.28,1);
  color-scheme:dark;
}

::selection{background:var(--ambar);color:var(--pedra)}

html{scrollbar-color:rgba(249,211,66,.45) var(--pedra)}
body{
  background-image:
    radial-gradient(ellipse 70% 42% at 18% -8%, rgba(249,211,66,.07), transparent 58%),
    radial-gradient(ellipse 90% 60% at 48% 8%, rgba(60,53,42,.55), transparent 70%);
}

/* topo */
.topo{
  background:rgba(20,18,15,.78);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  border-bottom-color:rgba(249,211,66,.22);
  transition:background .3s var(--ease), min-height .3s var(--ease), box-shadow .3s var(--ease);
}
.topo.is-scrolled{
  background:rgba(16,14,12,.94);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.topo .logo img{transition:height .3s var(--ease), filter .3s var(--ease)}
.topo .logo:hover img{filter:brightness(1.08)}
.menu a{
  position:relative;
  transition:color .2s var(--ease);
}
.menu a:not(.cta)::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-6px;
  height:1px;
  background:var(--ambar);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s var(--ease);
}
.menu a:not(.cta):hover::after{transform:scaleX(1)}
.menu .cta{
  border-radius:999px;
  padding:11px 22px;
  transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.menu .cta:hover{
  background:var(--ambar);
  color:var(--pedra);
  box-shadow:0 0 0 4px var(--glow);
}
.menu-btn{
  border-radius:999px;
  padding-inline:18px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
}

/* tipografia */
.olho{
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  font-size:12px;
}
.titulo-1,.titulo-2,.titulo-3{text-wrap:balance}
.lead{max-width:62ch}

/* botões */
.btn{
  border-radius:999px;
  letter-spacing:.01em;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-ambar{
  box-shadow:0 10px 28px rgba(249,211,66,.18);
}
.btn-ambar:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(249,211,66,.28);
}
.btn-linha{
  border-radius:999px;
  backdrop-filter:blur(6px);
}
.btn-linha:hover{
  transform:translateY(-2px);
  background:rgba(249,211,66,.06);
}
.btn:active{transform:translateY(0) scale(.98)}

/* hero */
.hero{
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  right:-8%;
  top:8%;
  width:min(520px,48vw);
  height:min(520px,48vw);
  border-radius:50%;
  background:radial-gradient(circle, rgba(249,211,66,.16) 0%, rgba(249,211,66,.04) 42%, transparent 70%);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}
.hero-simbolo{
  position:relative;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.45));
}
.hero-simbolo img{
  animation:key-float 7s ease-in-out infinite;
}
@keyframes key-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* cartões */
.cartao{
  border-radius:4px;
  background:linear-gradient(180deg, rgba(31,28,21,.92), var(--pedra-2));
  transition:transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.cartao:hover{
  transform:translateY(-4px);
  border-color:rgba(249,211,66,.42);
  box-shadow:var(--sombra-curta), 0 0 0 1px rgba(249,211,66,.08);
}
.cartao-destaque{
  background:linear-gradient(180deg, rgba(249,211,66,.08), var(--pedra-2));
  box-shadow:inset 0 1px 0 rgba(249,211,66,.18);
}
.faixa-gratis .grade-3{counter-reset:tool}
.faixa-gratis .grade-3 .cartao h3::before{
  counter-increment:tool;
  content:counter(tool, decimal-leading-zero);
  display:block;
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.18em;
  color:var(--ambar);
  margin-bottom:10px;
  font-weight:400;
}
.prova{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  margin-top:36px;
  padding-top:22px;
  border-top:1px solid var(--linha);
  color:var(--texto-3);
  font-size:13.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.prova b{color:var(--ambar);font-weight:600;margin-right:8px}
.selo{
  border-radius:999px;
  letter-spacing:.16em;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  z-index:2;
}
.cartao-artigo .ler{transition:letter-spacing .2s var(--ease)}
.cartao-artigo:hover .ler{letter-spacing:.04em}

/* pilares */
.pilares h3{letter-spacing:-.02em}

/* faixa grátis */
.faixa-gratis{
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(249,211,66,.06), transparent 55%),
    var(--pedra-3);
}
.snapshot-destaque{
  border-radius:4px;
  box-shadow:0 20px 50px rgba(249,211,66,.16);
}

/* fases */
.fases{
  counter-reset:fase;
  gap:0;
}
.fases > div{
  position:relative;
  padding-top:52px;
}
.fases > div::before{
  counter-increment:fase;
  content:counter(fase, decimal-leading-zero);
  position:absolute;
  top:18px;
  left:0;
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.18em;
  color:var(--ambar);
  opacity:.7;
}
@media (max-width:1000px){
  .fases > div{padding-top:20px}
  .fases > div::before{position:static;display:block;margin-bottom:8px}
}

/* planos */
.plano{
  border-radius:4px;
  background:linear-gradient(180deg, rgba(31,28,21,.95), var(--pedra-2));
  transition:transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.plano:hover{
  transform:translateY(-5px);
  box-shadow:var(--sombra);
}
.plano-destaque{
  background:linear-gradient(180deg, rgba(249,211,66,.12), var(--pedra-2) 38%);
  box-shadow:0 18px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(249,211,66,.22);
  transform:translateY(-8px);
}
.plano-destaque:hover{transform:translateY(-12px)}
@media (max-width:860px){
  .plano-destaque{transform:none}
  .plano-destaque:hover{transform:translateY(-4px)}
}

/* portas */
.porta{
  border-radius:4px;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.porta:hover{
  transform:translateY(-4px);
  box-shadow:var(--sombra-curta);
}
.porta-ambar{
  box-shadow:0 18px 40px rgba(249,211,66,.18);
}

/* esteira */
.item,.servico{
  transition:background .2s var(--ease);
  border-radius:2px;
}
.item:hover,.servico:hover{
  background:rgba(249,211,66,.04);
}

/* formulários */
.caixa-form{border-radius:4px}
.campo input,.campo select,.campo textarea,.escolhas label{
  border-radius:3px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  box-shadow:0 0 0 3px var(--glow);
}
.escolhas label:hover{border-color:rgba(249,211,66,.45)}
.escolhas label:has(input:checked){
  background:rgba(249,211,66,.08);
  box-shadow:0 0 0 3px var(--glow);
}

/* critérios e passos */
.criterios li{
  border-radius:3px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.criterios li:hover{
  border-color:var(--ambar);
  background:rgba(249,211,66,.06);
}

/* rodapé e zap */
.rodape{background:linear-gradient(180deg, transparent, rgba(0,0,0,.22))}
.zap{
  transition:transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.zap:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 14px 32px rgba(249,211,66,.28);
}

/* revelação */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in{
  opacity:1;
  transform:none;
}
/* imagens editoriais */
.hero-cinema{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(72px,12vw,148px) clamp(56px,8vw,112px);
}
.hero-cinema .hero-bg{
  position:absolute;
  inset:0;
  z-index:-1;
}
.hero-cinema .hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.86) contrast(1.02);
}
.hero-cinema .hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(20,18,15,.96) 0%, rgba(20,18,15,.82) 46%, rgba(20,18,15,.38) 100%),
    linear-gradient(0deg, var(--pedra) 0%, transparent 34%);
}
@media (max-width:760px){
  .hero-cinema .hero-bg::after{
    background:
      linear-gradient(180deg, rgba(20,18,15,.55) 0%, rgba(20,18,15,.88) 42%, var(--pedra) 100%);
  }
}
.hero-cinema .hero-simbolo{
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.55));
  opacity:.92;
}
.hero-forca{background-image:url("../img/editorial/hero-stage.webp")}
.hero-ecad{background-image:url("../img/editorial/mic.webp")}
.hero-servicos{background-image:url("../img/editorial/studio.webp")}

.cartao:has(.cartao-fig){padding-top:0}
.cartao-fig{
  margin:0 calc(clamp(26px,3vw,36px) * -1) 4px;
  aspect-ratio:5/4;
  overflow:hidden;
  position:relative;
  background:var(--pedra);
}
.cartao-fig img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s var(--ease);
}
.cartao:hover .cartao-fig img{transform:scale(1.06)}
.cartao-fig::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 46%, rgba(20,18,15,.72));
  pointer-events:none;
}
.cartao-artigo .cartao-fig{aspect-ratio:16/10}

.galeria-bar{
  position:relative;
  line-height:0;
  background:var(--pedra);
  border-bottom:2px solid var(--ambar);
}
.galeria-grade{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}
.galeria-grade img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:contain;
  margin:0;
  padding:0;
  opacity:1;
  filter:none;
  mix-blend-mode:normal;
}

.antes-depois img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  display:block;
  margin:10px 0 12px;
  border:1px solid var(--linha);
}
.foto-faixa{
  margin:0;
  position:relative;
  overflow:hidden;
  max-height:420px;
}
.foto-faixa img{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
  filter:saturate(.75);
}
.foto-faixa::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(20,18,15,.55), transparent 40%, rgba(20,18,15,.4));
  pointer-events:none;
}
.art-cover{
  margin:0 0 32px;
  overflow:hidden;
  border:1px solid var(--linha);
}
.art-cover img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}

@media (prefers-reduced-motion:reduce){
  [data-reveal],.hero-simbolo img,.btn,.cartao,.plano,.porta,.zap,.cartao-fig img,.galeria-chave img{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    opacity:1!important;
  }
}