/* Extra do site - modal PIX + campos lead. Tudo local. */
.pix-lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.pix-lead-grid .full{grid-column:1/-1}
.pix-field label{display:block;font-weight:700;margin-bottom:4px;font-size:14px}
.pix-field input{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:8px;font-size:15px}
.pix-modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:9999;padding:16px}
.pix-modal.open{display:flex}
.pix-box{background:#fff;border-radius:16px;max-width:440px;width:100%;padding:22px;text-align:center;color:#222;max-height:92vh;overflow:auto}
.pix-box h3{margin:0 0 6px;color:#1CABE2}
.pix-qr{background:#fff;padding:10px;display:inline-block;border:1px solid #eee;border-radius:12px}
.pix-qr img,.pix-qr canvas,.pix-qr table{margin:0 auto}
.pix-code{background:#f1f5f9;border:1px dashed #94a3b8;border-radius:10px;padding:10px;font-size:12px;word-break:break-all;margin:12px 0;max-height:110px;overflow:auto;text-align:left}
.pix-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pix-btn{border:0;border-radius:10px;padding:12px 18px;font-weight:800;cursor:pointer;font-size:15px}
.pix-btn.pay{background:#00b140;color:#fff}
.pix-btn.copy{background:#1CABE2;color:#fff}
.pix-btn.close{background:#e2e8f0;color:#222}
.pix-err{color:#dc2626;font-size:13px;min-height:18px;margin-top:6px}
@media(max-width:600px){.pix-lead-grid{grid-template-columns:1fr}}

/* =====================================================================
   Ajustes de responsividade para celular (max-width: 767.98px)
   O tema original escondia a imagem do topo e deixava o logo estourar
   a largura da tela. Aqui reexibimos a imagem (o <picture> ja tem a
   versao mobile) e limitamos o logo para o layout caber no celular.
   ===================================================================== */
@media (max-width: 767.98px) {
  /* A barra do logo tinha largura fixa de 446px (calc(470px - 1.5rem)),
     o que estourava a tela do celular. Agora ocupa a largura toda. */
  .navbar.form-width .navbar-brand-wrapper,
  .navbar.logo-width .navbar-brand-wrapper,
  .navbar.display-logo-only .navbar-brand-wrapper {
    width: 100%;
    max-width: 100%;
    min-height: 56px;
  }

  .navbar .navbar-brand-wrapper .navbar-brand {
    padding: 0;
    width: 100%;
  }

  /* Logo do topo em tamanho adequado para nao cortar nas laterais */
  .navbar .navbar-brand-wrapper .navbar-brand img,
  .navbar.form-width .navbar-brand-wrapper .navbar-brand img,
  .navbar.display-logo-only .navbar-brand-wrapper .navbar-brand img {
    width: auto;
    height: auto;
    max-width: 190px;
    max-height: 50px;
  }

  /* Reexibe a imagem do topo no celular (antes ficava display:none).
     O <picture> ja entrega a versao mobile da imagem. */
  .page_top .hero-banner-img.hero_image,
  .page_top .hero-banner-img.hide-hero {
    display: block !important;
    top: 56px;
  }

  /* Empurra o formulario para baixo da imagem do topo (proporcao 16:9) */
  .page_top .hidden-hero-image.unicef-wireframe-screen-xs .main-content {
    margin-top: 56.25% !important;
    padding: 10px 0 0 !important;
  }

  /* Seguranca: nada pode passar da largura da tela */
  .page_top,
  .page-wrapper {
    overflow-x: hidden;
  }
}