/* ==========================================================================
   NOBRE ORIQUE — vender-ouro.css
   Estilos exclusivos da Landing Page "Vender Ouro". Carrega DEPOIS de
   style.css e mobile.css, reaproveitando as variáveis (:root), tipografia,
   botões (.btn/.mob-btn), header/footer e o mecanismo de alternância
   desktop/mobile já existentes — sem duplicar esses componentes.
   ========================================================================== */

/* alterna a experiência mobile desta página (mesmo padrão de #mobileApp) */
.vo-mobile{ display:none; }
@media (max-width:768px){ .vo-mobile{ display:block; } }

@media (prefers-reduced-motion: reduce){
  .vo-item img, .vo-mob-item img, .vo-faq-question svg{ transition:none !important; }
}

/* --------------------------------------------------------------------------
   DESKTOP
   -------------------------------------------------------------------------- */
.vo-nav{ justify-content:space-between; }
.vo-back-link{
  color:var(--muted); font-size:14px; font-weight:600; margin-right:auto; margin-left:32px;
}
.vo-back-link:hover{ color:var(--gold2); }

.vo-hero{ position:relative; height:88vh; min-height:600px; max-height:820px; overflow:hidden; margin-top:-1px; }
.vo-hero-bg{ position:absolute; inset:0; }
.vo-hero-bg picture, .vo-hero-bg img{ display:block; width:100%; height:100%; }
.vo-hero-bg img{ object-fit:cover; object-position:center 35%; }
.vo-hero-bg:after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(5,4,3,.94) 0%,rgba(5,4,3,.72) 40%,rgba(5,4,3,.28) 75%,rgba(5,4,3,.1) 100%);
}
.vo-hero-inner{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; max-width:640px; }
.vo-eyebrow{
  display:inline-flex; align-items:center; gap:10px; color:var(--gold2); font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; font-weight:800; margin-bottom:16px;
}
.vo-eyebrow:before{ content:""; width:30px; height:1px; background:var(--gold2); }
.vo-hero-inner h1{
  font-family:var(--serif); font-weight:600; letter-spacing:-.02em; line-height:1.08;
  font-size:clamp(34px,4.2vw,52px); color:#fff; margin:0 0 18px;
  text-shadow:0 2px 20px rgba(0,0,0,.4);
}
.vo-hero-desc{ font-size:17px; line-height:1.65; color:rgba(255,255,255,.88); max-width:52ch; margin:0 0 22px; }
.vo-hero-highlights{
  list-style:none; margin:0 0 30px; padding:0; display:flex; flex-wrap:wrap; gap:10px 18px;
}
.vo-hero-highlights li{
  font-size:13.5px; font-weight:700; color:#fff; display:flex; align-items:center; gap:8px;
}
.vo-hero-highlights li:before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold2); flex:0 0 auto; }
.vo-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
.vo-hero-proof{ display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.85); font-size:14px; }
.vo-hero-proof-stars{ color:var(--gold2); letter-spacing:1px; }
.vo-hero-proof strong{ color:#fff; font-size:16px; }

.vo-trust{ background:var(--panel); border-bottom:1px solid var(--line); padding:26px 0; }
.vo-trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.vo-trust-item{ display:flex; align-items:center; gap:12px; font-size:14px; font-weight:700; color:#fff; }
.vo-trust-item svg{ width:26px; height:26px; flex:0 0 auto; fill:none; stroke:var(--gold2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.vo-section{ padding:88px 0; }
.vo-section-alt{ background:var(--bg2); }
.vo-kicker{
  color:var(--gold2); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; margin-bottom:12px;
}
.vo-h2{
  font-family:var(--serif); font-weight:600; letter-spacing:-.02em; color:#fff;
  font-size:clamp(26px,2.6vw,38px); max-width:20ch; margin:0 0 44px;
}

.vo-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.vo-step{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:32px 28px; }
.vo-step-num{ display:block; font-family:var(--serif); font-size:34px; color:var(--gold2); margin-bottom:14px; }
.vo-step h3{ font-size:18px; color:#fff; margin:0 0 10px; }
.vo-step p{ font-size:14.5px; line-height:1.6; color:var(--muted); margin:0; }

.vo-items-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.vo-item{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:1/1.05; background:#000; }
.vo-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.vo-item:hover img{ transform:scale(1.06); }
.vo-item:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(5,4,3,.85)); }
.vo-item span{ position:absolute; left:14px; bottom:12px; z-index:2; color:#fff; font-weight:700; font-size:14.5px; }
.vo-note{ margin-top:24px; font-size:13px; color:var(--muted); text-align:center; }

.vo-why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px 28px; }
.vo-why{ display:flex; align-items:center; gap:12px; font-size:15px; color:#fff; font-weight:600; }
.vo-why svg{ width:22px; height:22px; flex:0 0 auto; fill:none; stroke:var(--gold2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.vo-proof{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.vo-proof-rating{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:14.5px; margin-bottom:22px; }
.vo-proof-rating strong{ color:#fff; font-size:20px; font-family:var(--serif); }
.vo-testimonials{ display:flex; flex-direction:column; gap:18px; }
.vo-testimonial{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 24px; }
.vo-testimonial p{ font-size:15px; line-height:1.6; color:#fff; margin:10px 0 12px; }
.vo-testimonial b{ color:var(--gold2); font-size:13.5px; }
.vo-testimonial small{ color:var(--muted); font-size:12.5px; }

.vo-security-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 32px; max-width:900px; }
.vo-security-list li{ font-size:15px; color:#fff; line-height:1.5; padding-left:26px; position:relative; }
.vo-security-list li:before{ content:"—"; position:absolute; left:0; color:var(--gold2); }

.vo-location{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.vo-location-photo{ border-radius:18px; overflow:hidden; }
.vo-location-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.vo-location-body address{ font-style:normal; color:var(--muted); font-size:15px; line-height:1.6; margin:0 0 14px; }
.vo-hours{ color:var(--muted); font-size:14.5px; line-height:1.6; margin:0 0 24px; }
.vo-location-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.vo-faq-container{ max-width:820px; }
.vo-faq-list{ display:flex; flex-direction:column; gap:12px; }
.vo-faq-item{ border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; }
.vo-faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; background:transparent; border:none; color:#fff; font-size:15.5px; font-weight:700; text-align:left;
  min-height:44px;
}
.vo-faq-question svg{ width:20px; height:20px; flex:0 0 auto; fill:none; stroke:var(--gold2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease; }
.vo-faq-question[aria-expanded="true"] svg{ transform:rotate(180deg); }
.vo-faq-answer{ padding:0 22px 20px; }
.vo-faq-answer p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.65; }

.vo-cta-final{ background:linear-gradient(135deg,var(--panel),var(--bg2)); border-top:1px solid var(--line); padding:90px 0; text-align:center; }
.vo-cta-final-inner{ max-width:640px; margin:0 auto; }
.vo-cta-final h2{ font-family:var(--serif); font-weight:600; color:#fff; font-size:clamp(28px,3vw,40px); margin:0 0 16px; }
.vo-cta-final p{ color:var(--muted); font-size:16px; line-height:1.6; margin:0 0 30px; }
.vo-cta-final-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:26px; }
.vo-internal-links{ display:flex; gap:18px; justify-content:center; font-size:13.5px; }
.vo-internal-links a{ color:var(--muted); }
.vo-internal-links a:hover{ color:var(--gold2); }

@media (max-width:1180px){
  .vo-steps, .vo-items-grid{ grid-template-columns:repeat(2,1fr); }
  .vo-why-grid{ grid-template-columns:repeat(2,1fr); }
  .vo-proof, .vo-location{ grid-template-columns:1fr; gap:36px; }
}

/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */
.vo-mob-hero{ position:relative; height:82vh; min-height:580px; max-height:740px; overflow:hidden; }
@media (max-height:700px){ .vo-mob-hero{ height:76vh; min-height:420px; max-height:500px; } }
.vo-mob-hero-media{ position:absolute; inset:0; }
.vo-mob-hero-media picture, .vo-mob-hero-media img{ display:block; width:100%; height:100%; }
.vo-mob-hero-media img{ object-fit:cover; object-position:center 30%; }
.vo-mob-hero-media:after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(5,4,3,.14) 0%,rgba(5,4,3,.42) 38%,rgba(5,4,3,.76) 62%,rgba(5,4,3,.97) 100%);
}
.vo-mob-hero-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 var(--mp) 28px; }
.vo-mob-hero-body .mob-eyebrow{ margin-bottom:12px; }
.vo-mob-hero-body .mob-eyebrow span{
  color:var(--gold2); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.45);
}
.vo-mob-hero-body h1{
  font-family:var(--serif); font-weight:600; letter-spacing:-.03em; line-height:1.06; color:#fff;
  font-size:clamp(28px,8vw,38px); margin:0 0 12px;
  text-shadow:0 1px 2px rgba(0,0,0,.6), 0 6px 22px rgba(0,0,0,.5);
}
.vo-mob-hero-body p{ font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.9); margin:0 0 16px; text-shadow:0 1px 4px rgba(0,0,0,.7); }
.vo-mob-hero-body .vo-hero-highlights{ margin-bottom:18px; }
.vo-mob-hero-body .vo-hero-highlights li{ color:#fff; font-size:12.5px; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.vo-mob-hero-proof{ display:flex; align-items:center; gap:8px; margin-top:16px; color:rgba(255,255,255,.85); font-size:12.5px; }
.vo-mob-hero-proof span[aria-hidden]{ color:var(--gold2); letter-spacing:1px; }
.vo-mob-hero-proof strong{ color:#fff; font-size:14px; }

.vo-mob-trust{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.vo-mob-trust-item{
  display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:#fff;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px;
}
.vo-mob-trust-item svg{ width:20px; height:20px; flex:0 0 auto; fill:none; stroke:var(--gold2); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.vo-mob-steps{ display:flex; flex-direction:column; gap:16px; }
.vo-mob-step{ display:flex; gap:16px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; }
.vo-mob-step h3{ font-size:16px; color:#fff; margin:0 0 6px; }
.vo-mob-step p{ font-size:13.5px; line-height:1.55; color:var(--muted); margin:0; }

.vo-mob-items{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.vo-mob-item{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:1/1.05; background:#000; }
.vo-mob-item img{ width:100%; height:100%; object-fit:cover; }
.vo-mob-item:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(5,4,3,.85)); }
.vo-mob-item span{ position:absolute; left:12px; bottom:10px; z-index:2; color:#fff; font-weight:700; font-size:13px; }

.vo-mob-testimonials{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.vo-mob-testimonial{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.vo-mob-testimonial p{ font-size:13.5px; line-height:1.55; color:#fff; margin:0 0 8px; }
.vo-mob-testimonial b{ color:var(--gold2); font-size:12.5px; }
.vo-mob-testimonial small{ color:var(--muted); font-size:11.5px; }

.vo-mob-security-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.vo-mob-security-list li{ font-size:14px; color:#fff; line-height:1.5; padding-left:22px; position:relative; }
.vo-mob-security-list li:before{ content:"—"; position:absolute; left:0; color:var(--gold2); }

.vo-mob-hours{ color:rgba(255,255,255,.68); font-size:13.5px; line-height:1.6; margin:6px 0 16px; }

.vo-faq-list-mobile .vo-faq-question{ font-size:14px; padding:16px 16px; }
.vo-faq-list-mobile .vo-faq-answer{ padding:0 16px 16px; }
.vo-faq-list-mobile .vo-faq-answer p{ font-size:13.5px; }

.vo-mob-cta-final{ text-align:center; }
.vo-mob-cta-final h2{ margin-bottom:10px; }
.vo-mob-cta-final p{ font-size:14px; color:var(--muted); margin:0 0 20px; }
.vo-mob-cta-final .mob-btn{ margin-bottom:12px; }
.vo-mob-internal-links{ font-size:12.5px; color:var(--muted); margin-top:8px; }
.vo-mob-internal-links a{ color:var(--muted); }

/* --------------------------------------------------------------------------
   Botão "Ver avaliações no Google" (seção de Avaliações) — mesmo tratamento
   já usado no botão equivalente da Home (#avaliacoes .reviews-google-btn),
   só reescopado para a classe desta página. Sem isso, a imagem do logo do
   Google (512x512px no arquivo) renderiza no tamanho natural e infla a
   altura do botão inteiro.
   -------------------------------------------------------------------------- */
.vo-proof .google-logo{
  width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; box-shadow:none; overflow:visible; line-height:0; flex:0 0 auto;
}
.vo-proof .google-logo img{
  display:block; width:100%; height:100%; object-fit:contain; background:transparent; border:0; box-shadow:none;
}
.vo-proof .btn.ghost{ white-space:nowrap; }

/* Correção localizada: evita corte de textos longos da Hero/eyebrow em telas estreitas. */
.vo-eyebrow,
.vo-mob-hero-body .mob-eyebrow,
.vo-mob-hero-body .mob-eyebrow span {
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
}
.vo-mob-hero-body h1,
.vo-mob-hero-body p {
  max-width:100%;
  overflow-wrap:break-word;
}
@media (max-width:340px){
  .vo-mob-hero-body{ padding-left:16px; padding-right:16px; }
  .vo-mob-hero-body .mob-eyebrow span{ font-size:10px; line-height:1.35; letter-spacing:.1em; }
  .vo-mob-hero-body h1{ font-size:clamp(25px,7.6vw,32px); }
}

/* Correção final da Hero mobile: o conteúdo não pode ser recortado quando
   ultrapassa a altura da viewport. A Hero cresce naturalmente, mantendo a
   imagem ao fundo e preservando integralmente o desktop. */
@media (max-width:768px){
  .vo-mob-hero{
    height:auto;
    min-height:calc(100svh - 64px);
    max-height:none;
  }

  .vo-mob-hero-body{
    position:relative;
    min-height:calc(100svh - 64px);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding-top:32px;
  }
}