/* Área do Parceiro — capa (landing) e painel. Mobile primeiro. */

/* ---------- Marcadores de lugar (fotos/vídeos provisórios) ---------- */
.ph {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(232, 120, 32, .35), transparent 60%),
    radial-gradient(90% 80% at 90% 100%, rgba(250, 246, 240, .5), transparent 55%),
    linear-gradient(135deg, var(--areia) 0%, var(--areia-escura) 100%);
}
.ph-escuro {
  background:
    radial-gradient(120% 90% at 15% 20%, rgba(232, 120, 32, .45), transparent 55%),
    radial-gradient(90% 90% at 100% 100%, rgba(90, 53, 32, .9), transparent 60%),
    linear-gradient(160deg, var(--chocolate) 0%, var(--chocolate-escuro) 100%);
}
.ph::after {
  content: attr(data-rotulo); position: absolute; left: 10px; bottom: 10px; right: 10px;
  font: 600 10px/1.3 var(--fonte-texto); letter-spacing: .06em; text-transform: uppercase;
  color: rgba(61, 32, 16, .55); pointer-events: none;
}
.ph-escuro::after { color: rgba(250, 246, 240, .45); }

/* ---------- Topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: calc(.7rem + env(safe-area-inset-top, 0px)) 1rem .7rem; color: var(--linho);
  transition: background .25s ease, box-shadow .25s ease;
}
.topo.rolado { background: rgba(35, 18, 8, .92); backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.btn-p { min-height: 40px; padding: 0 1.1rem; font-size: .95rem; }
.btn-g { min-height: 54px; font-size: 1.1rem; padding: 0 1.7rem; }

/* ---------- Herói ---------- */
.heroi {
  position: relative; color: var(--linho); background: var(--chocolate-escuro);
  padding: calc(5.5rem + env(safe-area-inset-top, 0px)) 1.2rem 3rem; overflow: hidden;
  display: grid; gap: 2.4rem;
}
.heroi-fundo { position: absolute; inset: 0; opacity: .9; }
.heroi-fundo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(35, 18, 8, .2) 0%, rgba(35, 18, 8, .75) 70%, var(--chocolate-escuro) 100%);
}
.heroi-conteudo { position: relative; display: grid; gap: 1.2rem; max-width: 620px; }
.selo-regiao {
  display: inline-flex; align-items: center; gap: .5rem; justify-self: start;
  font-size: .82rem; font-weight: 600; padding: .4rem .8rem; border-radius: 999px;
  background: rgba(250, 246, 240, .1); border: 1px solid rgba(250, 246, 240, .2);
}
.ponto-vivo { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: pulso 2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
.heroi h1 { font-size: clamp(2.3rem, 9vw, 4.2rem); font-weight: 700; }
.heroi h1 span { color: var(--laranja); }
.heroi-sub { font-size: 1.08rem; color: rgba(250, 246, 240, .82); max-width: 34em; }
.heroi-acoes { display: grid; gap: .7rem; }
.selos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .9rem; color: rgba(250, 246, 240, .8); }
.selos span { color: var(--laranja); font-weight: 700; }

/* Miniatura da tela no carro */
.tela-carro { position: relative; margin: 0; display: grid; gap: .7rem; justify-items: center; }
.tela-moldura {
  position: relative; width: min(100%, 460px); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  border: 8px solid #120904; box-shadow: 0 30px 70px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transform: perspective(900px) rotateX(4deg);
}
.tela-video { position: absolute; inset: 0; }
.tela-marca {
  position: absolute; top: 7%; left: 4%; font: 700 10px var(--fonte-titulo); letter-spacing: .12em; color: var(--linho);
  padding: 4px 8px; border-radius: 999px; background: rgba(61, 32, 16, .75); border: 1.5px solid var(--laranja);
}
.tela-marca span { font-size: 12px; letter-spacing: 0; text-transform: lowercase; }
.tela-marca b { color: var(--laranja); }
.tela-qr {
  position: absolute; right: 4%; bottom: 20%; width: 24%; background: var(--linho); border: 3px solid var(--laranja);
  border-radius: 10px; padding: 6px; display: grid; gap: 3px; justify-items: center; color: var(--chocolate);
  animation: qr-entra 6s ease-in-out infinite;
}
.tela-qr small { font: 700 8px var(--fonte-titulo); }
.qr-falso {
  width: 100%; aspect-ratio: 1; border-radius: 3px;
  background:
    linear-gradient(90deg, var(--chocolate) 0 30%, transparent 30% 70%, var(--chocolate) 70%) top / 100% 30% no-repeat,
    linear-gradient(90deg, var(--chocolate) 0 30%, transparent 30%) bottom / 100% 30% no-repeat,
    repeating-conic-gradient(var(--chocolate) 0 25%, transparent 0 50%) 50% / 18% 18%;
}
@keyframes qr-entra { 0%, 15% { opacity: 0; transform: translateY(8px); } 25%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.tela-faixa {
  position: absolute; inset: auto 0 0 0; height: 15%; display: flex; align-items: center; gap: 8px; padding: 0 4%;
  font: 600 10px var(--fonte-titulo); color: var(--linho); white-space: nowrap; overflow: hidden;
  background: linear-gradient(90deg, var(--chocolate-escuro), var(--chocolate)); border-top: 2px solid var(--laranja);
}
.tela-faixa b { color: var(--laranja); font-size: 12px; }
.tela-carro figcaption { font-size: .82rem; color: rgba(250, 246, 240, .6); }

/* ---------- Seções ---------- */
.secao { padding: 3.6rem 1.2rem; display: grid; gap: 2rem; }
.secao > * { width: 100%; max-width: 1080px; margin-inline: auto; }
.secao-areia { background: var(--areia); }
.secao-escura { background: var(--chocolate); color: var(--linho); }
.secao-cab { display: grid; gap: .7rem; max-width: 640px; }
.secao-cab h2 { font-size: clamp(1.8rem, 6.5vw, 2.7rem); color: var(--chocolate); }
.secao-escura .secao-cab h2 { color: var(--linho); }
.secao-cab p:not(.sobretitulo) { color: var(--texto-suave); font-size: 1.05rem; }
.secao-escura .secao-cab p:not(.sobretitulo) { color: rgba(250, 246, 240, .78); }
.sobretitulo { font: 700 .78rem var(--fonte-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--laranja); }

.cartoes-3 { display: grid; gap: 1rem; }
.cartao-ganho {
  background: var(--branco); border-radius: var(--raio); padding: 1.4rem; box-shadow: var(--sombra);
  display: grid; gap: .5rem; border: 1px solid var(--areia);
}
.cartao-ganho.destaque { background: var(--chocolate); color: var(--linho); border-color: var(--chocolate); }
.cartao-ganho.destaque p { color: rgba(250, 246, 240, .8); }
.cartao-ganho h3 { font-size: 1.3rem; }
.cartao-ganho p { color: var(--texto-suave); }
.icone { font-size: 1.8rem; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: var(--laranja-suave); }
.destaque .icone { background: rgba(232, 120, 32, .25); }
.nota { font-size: .9rem; color: var(--texto-suave); padding: .9rem 1rem; border-left: 3px solid var(--laranja); background: var(--branco); border-radius: 0 12px 12px 0; }

.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.passos li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; background: var(--linho); padding: 1.2rem; border-radius: var(--raio); }
.passos h3 { font-size: 1.18rem; color: var(--chocolate); margin-bottom: .2rem; }
.passos p { color: var(--texto-suave); }
.num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--laranja); color: #fff; font: 700 1.2rem var(--fonte-titulo); }

.video-principal { aspect-ratio: 16 / 9; border-radius: 20px; display: grid; place-items: center; box-shadow: var(--sombra); }
.play {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; padding-left: 5px;
  background: var(--laranja); color: #fff; box-shadow: 0 10px 30px rgba(232, 120, 32, .5); position: relative; z-index: 1;
}
.galeria {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .4rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.galeria::-webkit-scrollbar { display: none; }
.foto { aspect-ratio: 4 / 5; border-radius: 16px; scroll-snap-align: start; }

.cartao-escuro { background: rgba(250, 246, 240, .06); border: 1px solid rgba(250, 246, 240, .12); border-radius: var(--raio); padding: 1.4rem; display: grid; gap: .45rem; }
.cartao-escuro h3 { color: var(--laranja); font-size: 1.2rem; }
.cartao-escuro p { color: rgba(250, 246, 240, .8); }

.dois { display: grid; gap: 1rem; }
.cartao-quem { background: var(--branco); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); display: grid; gap: .5rem; padding-bottom: 1.3rem; }
.cartao-quem h3, .cartao-quem p { padding: 0 1.3rem; }
.cartao-quem h3 { font-size: 1.3rem; color: var(--chocolate); margin-top: .5rem; }
.cartao-quem p { color: var(--texto-suave); }
.foto-quem { aspect-ratio: 16 / 9; }

.faq { display: grid; gap: .6rem; }
.faq details { background: var(--linho); border-radius: 14px; padding: 0 1.1rem; border: 1px solid var(--areia-escura); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.05rem 2rem 1.05rem 0; font: 600 1.05rem var(--fonte-titulo);
  color: var(--chocolate); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--laranja); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding-bottom: 1.1rem; color: var(--texto-suave); }

.final {
  padding: 4rem 1.2rem calc(6.5rem + env(safe-area-inset-bottom, 0px)); text-align: center; display: grid; gap: 1rem; justify-items: center;
  background: radial-gradient(100% 120% at 50% 0%, var(--chocolate-medio) 0%, var(--chocolate-escuro) 70%); color: var(--linho);
}
.final h2 { font-size: clamp(2rem, 7vw, 3rem); }
.final p { color: rgba(250, 246, 240, .75); }

.rodape { background: var(--chocolate-escuro); color: rgba(250, 246, 240, .6); padding: 2rem 1.2rem calc(6rem + env(safe-area-inset-bottom, 0px)); display: grid; gap: .6rem; justify-items: center; text-align: center; font-size: .85rem; }
.rodape .marca { color: var(--linho); }
.rodape a { color: rgba(250, 246, 240, .8); }

/* Barra fixa (só celular) */
.barra-fixa {
  position: fixed; inset: auto 0 0 0; z-index: 40; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 246, 240, .94); backdrop-filter: blur(10px); box-shadow: 0 -8px 24px rgba(35, 18, 8, .12);
  transform: translateY(110%); transition: transform .3s ease;
}
.barra-fixa.visivel { transform: none; }

/* Janelas */
.senha { position: relative; }
.senha .entrada { padding-right: 5.5rem; }
.ver-senha { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: var(--areia); border-radius: 8px; padding: .45rem .7rem; font-size: .8rem; font-weight: 600; cursor: pointer; color: var(--chocolate); }
.troca { text-align: center; font-size: .9rem; color: var(--texto-suave); }
.link { background: none; border: 0; padding: 0; color: var(--laranja-escuro); font-weight: 700; cursor: pointer; text-decoration: underline; }

/* ---------- Telas maiores ---------- */
@media (min-width: 720px) {
  .heroi-acoes { display: flex; flex-wrap: wrap; }
  .cartoes-3 { grid-template-columns: repeat(3, 1fr); }
  .dois { grid-template-columns: 1fr 1fr; }
  .passos { grid-template-columns: 1fr 1fr; }
  .galeria { grid-auto-columns: calc((100% - 2.4rem) / 4); }
  .barra-fixa { display: none; }
  .final, .rodape { padding-bottom: 3rem; }
}
@media (min-width: 1000px) {
  .topo { padding-inline: 2.5rem; }
  .heroi { grid-template-columns: 1.05fr 1fr; align-items: center; min-height: 92vh; padding: 7rem 3.5rem 4rem; }
  .secao { padding: 5.5rem 2.5rem; }
}

/* =================== PAINEL DO PARCEIRO =================== */
.painel { background: var(--areia); min-height: 100dvh; }
.painel-topo {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(.75rem + env(safe-area-inset-top, 0px)) 1rem .75rem; background: var(--chocolate-escuro); color: var(--linho);
}
.painel-topo .btn-p { background: rgba(250, 246, 240, .1); color: var(--linho); border: 1px solid rgba(250, 246, 240, .25); }
.painel-main { max-width: 760px; margin: 0 auto; padding: 1.2rem 1rem calc(3rem + env(safe-area-inset-bottom, 0px)); display: grid; gap: 1rem; }
.ola { display: grid; gap: .3rem; padding: .4rem .2rem; }
.ola h1 { font-size: 1.7rem; color: var(--chocolate); }
.ola p { color: var(--texto-suave); }
.status-pill { justify-self: start; font: 700 .75rem var(--fonte-titulo); letter-spacing: .06em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; background: var(--laranja-suave); color: var(--laranja-escuro); }
.status-pill.aprovado { background: var(--verde-suave); color: var(--verde); }
.bloco { background: var(--branco); border-radius: 18px; padding: 1.2rem; box-shadow: var(--sombra); display: grid; gap: .9rem; }
.bloco-cab { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.bloco-cab h2 { font-size: 1.2rem; color: var(--chocolate); }
.codigo { display: flex; align-items: center; justify-content: space-between; gap: .8rem; background: var(--chocolate); color: var(--linho); border-radius: 18px; padding: 1.1rem 1.2rem; }
.codigo small { display: block; font-size: .78rem; color: rgba(250, 246, 240, .7); }
.codigo strong { font: 700 1.6rem var(--fonte-titulo); letter-spacing: .08em; color: var(--laranja); }
.codigo button { background: rgba(250, 246, 240, .12); color: var(--linho); border: 1px solid rgba(250, 246, 240, .3); border-radius: 999px; padding: .55rem 1rem; font-weight: 600; cursor: pointer; }
.progresso { height: 10px; background: var(--areia); border-radius: 999px; overflow: hidden; }
.progresso > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--laranja), #f5a352); border-radius: inherit; transition: width .5s ease; }
.etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.etapa { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: .85rem .9rem; border-radius: 14px; background: var(--linho); border: 1px solid var(--areia); }
.etapa .bola { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--areia-escura); color: var(--chocolate); }
.etapa.feita .bola { background: var(--verde); color: #fff; }
.etapa b { display: block; color: var(--chocolate); font-size: .98rem; }
.etapa small { color: var(--texto-suave); font-size: .82rem; }
.etapa button { border: 0; border-radius: 999px; padding: .55rem .95rem; background: var(--laranja); color: #fff; font-weight: 700; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.etapa.feita button { background: var(--areia); color: var(--chocolate); }
.aparelho { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.aparelho-icone { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; background: var(--areia); }
.luz { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .85rem; }
.luz::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #b9ab9c; }
.luz.ligado::before { background: #2ecc71; box-shadow: 0 0 0 4px rgba(46, 204, 113, .2); }
.ganhos { display: grid; gap: .5rem; }
.ganho-linha { display: flex; justify-content: space-between; align-items: center; padding: .8rem .9rem; border-radius: 12px; background: var(--linho); }
.ganho-linha span:last-child { font-weight: 700; color: var(--texto-suave); font-size: .85rem; }
.horas-rotulo { display: flex; justify-content: space-between; font-size: .85rem; color: var(--texto-suave); }
.suporte { background: linear-gradient(135deg, var(--chocolate), var(--chocolate-medio)); color: var(--linho); }
.suporte h2 { color: var(--linho) !important; }
.suporte p { color: rgba(250, 246, 240, .8); }
.grade-2 { display: grid; gap: .9rem; }
@media (min-width: 560px) { .grade-2 { grid-template-columns: 1fr 1fr; } }
.escolha { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.escolha label { border: 1.5px solid var(--areia-escura); border-radius: 14px; padding: .9rem; text-align: center; cursor: pointer; font-weight: 600; background: var(--branco); }
.escolha input { position: absolute; opacity: 0; pointer-events: none; }
.escolha input:checked + span { color: var(--laranja-escuro); }
.escolha label:has(input:checked) { border-color: var(--laranja); background: var(--laranja-suave); }
.fotos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.slot { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; border: 2px dashed var(--areia-escura); display: grid; place-items: center; text-align: center; padding: .5rem; cursor: pointer; background: var(--branco) center / cover no-repeat; font-size: .8rem; font-weight: 600; color: var(--texto-suave); overflow: hidden; }
.slot.cheio { border-style: solid; border-color: var(--verde); }
.slot.cheio span { background: rgba(35, 18, 8, .7); color: #fff; padding: .25rem .5rem; border-radius: 8px; }
.slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot span { position: relative; z-index: 1; }
.aviso { font-size: .82rem; color: var(--texto-suave); background: var(--linho); border-radius: 12px; padding: .7rem .8rem; }