/* ---------- topo ---------- */












.ficha{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.14);border-radius:var(--raio);overflow:hidden;margin:34px 0 30px;
}
.ficha>div{background:var(--chumbo-esc);padding:16px 17px}
.ficha .k{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#98A3AA}
.ficha .v{display:block;font-family:Archivo;font-weight:800;font-size:1.3rem;color:#fff;margin-top:6px;white-space:nowrap}
.ficha .v.forte{color:var(--lima);font-size:1.75rem}
.ficha .v .antigo{
  font-size:1rem;color:#8A959B;text-decoration:line-through;margin-right:10px;font-weight:600;
}

.hero{display:grid;grid-template-columns:1fr;gap:0}
.hero-midia{margin-top:34px}
@media(min-width:940px){
  .hero{grid-template-columns:1.18fr .82fr;gap:48px;align-items:center}
  .hero-midia{margin-top:0}
  .ficha{margin-bottom:0}
}
.filme{
  position:relative;width:100%;max-width:430px;aspect-ratio:4/5;
  border-radius:var(--raio);overflow:hidden;background:var(--chumbo-esc);
  border:1px solid rgba(255,255,255,.12);
}
.filme video{width:100%;height:100%;object-fit:cover;display:block}
.creditos{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px;font-size:.84rem;color:#98A3AA}

/* ---------- passos ---------- */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;counter-reset:p}
.passo{
  background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:26px 24px;counter-increment:p;
}
.passo::before{
  content:counter(p);display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;background:var(--lima);
  font-family:Archivo;font-weight:800;color:var(--tinta);margin-bottom:14px;
}
.passo p{margin-top:8px;font-size:.97rem}

/* ---------- galpao ---------- */
.galpao{background:var(--cinza)}
.galpao .grade{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.foto{
  aspect-ratio:4/3;border-radius:var(--raio);width:100%;object-fit:cover;display:block;
  border:1px solid #CBD3D8;background:#C6CED3;
}
.galpao p{margin-top:14px}

/* ---------- tabela ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;margin-top:30px;font-size:1rem}
th{
  text-align:left;font:600 12px/1 Inter;letter-spacing:.12em;text-transform:uppercase;
  color:#7E8A91;padding:0 18px 12px;
}
td{background:#fff;padding:17px 18px;border-top:1px solid var(--borda)}
tr td:first-child{border-left:1px solid var(--borda);border-radius:var(--raio) 0 0 var(--raio)}
tr td:last-child{border-right:1px solid var(--borda);border-radius:0 var(--raio) var(--raio) 0}
tbody tr+tr td{border-top:1px solid var(--borda)}
.val{font-family:Archivo;font-weight:800;font-size:1.2rem;color:var(--tinta)}
tr.aqui td{background:var(--tinta);color:#fff;border-color:var(--tinta)}
tr.aqui .val{color:var(--lima)}
tr.aqui .tag{
  display:inline-block;margin-left:10px;padding:3px 9px;border-radius:99px;
  background:var(--lima);color:var(--tinta);font:600 11px/1.4 Inter;letter-spacing:.06em;
}
.condicoes{margin-top:20px;font-size:.92rem;color:#6C767C;max-width:76ch}

/* ---------- formulario ---------- */
#falar{background:var(--chumbo)}
.form{
  background:#fff;border-radius:14px;padding:38px;max-width:760px;margin:0 auto;
  border:1px solid var(--borda);
}
.form 
.form .sub{font-size:.96rem;margin-bottom:26px}
.linha{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{margin-bottom:16px;display:flex;flex-direction:column}
label{font:600 13px/1 Inter;color:var(--tinta);margin-bottom:7px}
input,select{
  font:400 16px Inter;color:var(--tinta);padding:13px 14px;
  border:1px solid var(--borda);border-radius:8px;background:var(--frio);
}
input:focus,select:focus{outline:2px solid var(--lima);outline-offset:1px;border-color:var(--chumbo)}
.isca{position:absolute;left:-9999px}
.ciente{display:flex;gap:10px;align-items:flex-start;font:400 .88rem/1.45 Inter;color:#5A6469;margin-top:12px}
.ciente input{width:18px;height:18px;flex:none;margin-top:2px}
.botao{
  width:100%;margin-top:24px;padding:17px;border:0;border-radius:8px;cursor:pointer;
  background:var(--lima);color:var(--tinta);
  font-family:Archivo;font-weight:800;font-size:1.06rem;letter-spacing:.01em;
  transition:background .15s;
}
.botao:hover{background:var(--lima-esc)}
.aviso{text-align:center;font-size:.84rem;color:#7E8A91;margin-top:14px}

/* ---------- rodape ---------- */




@media(max-width:860px){
  
  .ficha,.passos{grid-template-columns:1fr}
  .galpao .grade{grid-template-columns:1fr;gap:26px}
  .linha{grid-template-columns:1fr}
  .form{padding:26px 20px}
}
/* no celular a foto vira o fundo da secao, com o texto por cima —
   mesmo efeito da LP dos potes. No desktop segue lado a lado. */
@media(max-width:860px){
  .galpao{
    position:relative;overflow:hidden;isolation:isolate;
    padding:64px 0;color:#EDF1F3;background:var(--tinta);
  }
  .galpao .foto{
    position:absolute;inset:0;z-index:-2;
    width:100%;height:100%;aspect-ratio:auto;object-position:center 38%;
    border:0;border-radius:0;
  }
  .galpao::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(to bottom,rgba(20,24,27,.62),rgba(20,24,27,.88));
  }
  .galpao .grade{gap:0}
  .galpao 
  .galpao p{color:#C5CED3}
  .galpao 
}
/* no celular a tabela vira lista: 4 colunas nao cabem em 390px e empurram a pagina */
@media(max-width:620px){
  table thead{display:none}
  table,tbody,tr,td{display:block;width:100%}
  tbody tr{
    background:#fff;border:1px solid var(--borda);border-radius:var(--raio);
    padding:14px 16px;margin-bottom:12px;
  }
  tbody tr.aqui{background:var(--tinta);border-color:var(--tinta)}
  tbody tr.aqui td{color:#fff}
  td{
    border:0!important;background:transparent;padding:5px 0;
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  }
  td::before{
    content:attr(data-r);font:600 12px/1 Inter;letter-spacing:.1em;
    text-transform:uppercase;color:#8A959B;
  }
  tr.aqui td::before{color:#98A3AA}
  td:first-child{
    font-family:Archivo;font-weight:800;font-size:1.05rem;color:var(--tinta);
    padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--borda)!important;
    justify-content:flex-start;   /* sem o ::before, o space-between jogava o titulo pra direita */
  }
  tr.aqui td:first-child{color:#fff;border-bottom-color:rgba(255,255,255,.18)!important}
  td:first-child::before{content:""}
}

/* retorno do envio */
.retorno{margin-top:14px;padding:13px 15px;border-radius:8px;font-size:.9rem;display:none;line-height:1.5}
.retorno.erro{display:block;background:#FDECEC;border-left:3px solid #D14343;color:#8C2A2A}
.retorno.ok{display:block;background:#F1FAD9;border-left:3px solid var(--lima-esc);color:#3F5410}
.botao[disabled]{opacity:.6;cursor:progress}