/* Página de vendas: componentes extras sobre o style.css dos modelos (mesma paleta e tipografia) */
.btn-wpp{background:#25d366;color:#fff;display:inline-flex;align-items:center;gap:10px}
.btn-wpp:hover{background:#1ebe5a;transform:translateY(-2px)}
.btn-wpp img{width:20px;height:20px}
.topo-cta.btn-wpp{padding:10px 20px!important}

/* hero: mockup de navegador trocando os modelos */
.hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem)}
.hero-mock{position:relative}
.mock{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.mock-barra{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#eef0f3}
.mock-barra i{width:10px;height:10px;border-radius:50%;background:#d5d9de}
.mock-barra i:nth-child(1){background:#ff6058}.mock-barra i:nth-child(2){background:#ffbd2e}.mock-barra i:nth-child(3){background:#28c940}
.mock-url{margin-left:10px;flex:1;background:#fff;border-radius:20px;font:500 .7rem Montserrat,sans-serif;color:#8a94a0;padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-telas{position:relative;aspect-ratio:16/10}
.mock-telas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .9s ease}
.mock-telas img.ativa{opacity:1}
.hero-mock .selo{left:-24px;bottom:-26px}

/* portfólio */
.modelos{background:var(--bege-cl)}
.nota-portfolio{max-width:820px;margin:-24px auto 48px;background:#fff;border-left:4px solid var(--bege);border-radius:0 var(--raio) var(--raio) 0;padding:18px 24px;font-size:.93rem;box-shadow:0 6px 22px rgba(34,56,79,.06)}
.nota-portfolio b{color:var(--azul);font-weight:600}
.modelos-grade{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.modelo{background:#fff;border-radius:var(--raio);overflow:hidden;box-shadow:0 6px 22px rgba(34,56,79,.08);transition:.3s;display:flex;flex-direction:column}
.modelo:hover{transform:translateY(-8px);box-shadow:var(--sombra)}
.modelo .mock{border-radius:0;box-shadow:none}
.tela{display:block;aspect-ratio:16/11;background-repeat:no-repeat;background-size:100% auto;background-position:top center;transition:background-position 7s ease-in-out;position:relative}
.modelo:hover .tela,.tela:focus-visible{background-position:bottom center}
.tela::after{content:"Passe o mouse para ver o projeto";position:absolute;right:14px;bottom:14px;background:rgba(34,56,79,.85);color:#fff;font:500 .72rem Montserrat,sans-serif;padding:6px 12px;border-radius:50px;transition:.3s}
.modelo:hover .tela::after{opacity:0}
.modelo-info{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.tag{align-self:flex-start;font:600 .7rem Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);background:var(--bege-cl);padding:5px 12px;border-radius:50px;margin-bottom:12px}
.modelo-info h3{font-size:1.5rem;margin-bottom:8px}
.modelo-info p{font-size:.93rem;margin-bottom:22px;flex:1}
.modelo-btns{display:flex;flex-wrap:wrap;gap:12px}
.modelo-btns .btn{padding:12px 22px;font-size:.84rem}
.btn-linha{border-color:var(--azul);color:var(--azul)}
.btn-linha:hover{background:var(--azul);color:#fff}
.nichos{margin-top:48px;text-align:center}
.nichos p{margin-bottom:14px}
.nichos ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.nichos li{background:#fff;border:1px solid rgba(52,82,111,.14);border-radius:50px;padding:7px 16px;font:500 .82rem Montserrat,sans-serif;color:var(--azul)}

/* diferenciais em 6 cards */
.dif h3{color:#fff;font-size:1.25rem;margin-bottom:8px}

/* como funciona */
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:passo}
.passo{position:relative;background:#fff;border:1px solid rgba(52,82,111,.12);border-radius:var(--raio);padding:34px 26px 30px;transition:.3s}
.passo:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.passo::before{counter-increment:passo;content:"0" counter(passo);font-family:"Tenor Sans",serif;font-size:2.4rem;color:var(--bege);display:block;margin-bottom:8px}
.passo h3{font-size:1.2rem;margin-bottom:8px}
.passo p{font-size:.92rem}

/* incluso */
.incluso{background:var(--bege-cl)}
.incluso-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.incluso-txt h2{font-size:clamp(2rem,4vw,2.6rem)}
.incluso-txt h3{font-family:Montserrat,sans-serif;font-size:1rem;font-weight:500;color:var(--bege);margin:10px 0 18px}
.incluso-txt p{margin-bottom:26px}
.lista{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;background:#fff;border-radius:var(--raio);padding:36px;box-shadow:var(--sombra)}
.lista li{display:flex;gap:12px;align-items:flex-start;font-size:.93rem;font-weight:400}
.lista li::before{content:"✓";flex:0 0 24px;height:24px;border-radius:50%;background:var(--azul);color:#fff;display:grid;place-items:center;font-size:.75rem;margin-top:1px}

/* contato → WhatsApp */
.form select{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid #d5d9de;border-radius:8px;font:inherit;font-weight:300;color:var(--texto);background:#fff}
.form select:focus{outline:2px solid var(--bege);border-color:transparent}
.form .btn-wpp{width:100%;justify-content:center}
.garantia{margin-top:14px;font-size:.8rem;text-align:center;opacity:.75}

@media (max-width:1100px){
  .hero-mock{max-width:560px;margin:10px auto 0;width:100%}
  .hero-mock .selo{left:0}
  .passos{grid-template-columns:1fr 1fr}
  .incluso-in{grid-template-columns:1fr}
}
@media (max-width:760px){
  .modelos-grade,.lista{grid-template-columns:1fr}
  .lista{padding:26px 22px}
}
@media (max-width:600px){
  .passos{grid-template-columns:1fr}
  .hero-mock .selo{bottom:-20px;padding:12px 16px}
  .tela::after{content:"Toque para ver"}
}