* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Nunito', Arial, sans-serif; background: #fff; color: #333; line-height: 1.7; }

.wrp { max-width: 750px; margin: 0 auto; background: #fff; padding: 0 20px; }

.fto-topo { width: 100%; max-width: 360px; margin: 28px auto 20px; display: block; border-radius: 12px; object-fit: cover; }
.fto-meio { width: 100%; max-width: 360px; margin: 22px auto; display: block; border-radius: 12px; object-fit: cover; }

.h1-pg { text-align: center; font-size: 26px; font-weight: 800; color: #1a1a1a; padding: 0 8px; margin: 18px 0 26px; line-height: 1.35; font-family: 'Poppins', sans-serif; }

/* META / BARRA */
.meta-wrap { background: #fff; padding: 18px 0; margin: 18px 0; }
.meta-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; }
.meta-lft { display: flex; flex-direction: column; }
.lbl-meta { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; font-weight: 700; }
.val-meta { color: #27ae60; font-weight: 900; font-size: 24px; font-family: 'Poppins', sans-serif; }
.alvo-meta { color: #00B9FF; font-size: 15px; font-weight: 800; font-family: 'Poppins', sans-serif; }
.barra-fundo { background: #eee; height: 22px; border-radius: 6px; overflow: hidden; margin: 8px 0; }
.barra-fill { background: linear-gradient(90deg, #00B9FF, #0097d6); height: 100%; border-radius: 6px; transition: width .8s ease; }
.meta-apoia { font-size: 12px; color: #888; text-align: right; margin-top: 4px; }

/* BOTAO PRINCIPAL */
.btn-doe { background: #00B9FF; color: #fff; border: none; padding: 18px 28px; font-size: 18px; font-weight: 900; cursor: pointer; border-radius: 10px; transition: all .25s; width: 100%; max-width: 600px; margin: 22px auto; display: block; text-align: center; font-family: 'Poppins', sans-serif; box-shadow: 0 6px 20px rgba(0,185,255,.35); letter-spacing: .3px; }
.btn-doe:hover { background: #0097d6; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,185,255,.5); }

/* TEXTO CORPORAL */
.corpo-txt p { margin-bottom: 18px; color: #333; font-size: 16px; line-height: 1.8; }
.corpo-txt h2 { color: #1a1a1a; font-size: 22px; margin: 28px 0 14px; font-weight: 800; font-family: 'Poppins', sans-serif; text-align: center; line-height: 1.3; }

.caixa-hl { background: #f0f9ff; border-left: 4px solid #00B9FF; padding: 14px 16px; margin: 20px 0; border-radius: 6px; font-size: 15px; }
.caixa-hl strong { color: #0077aa; }

/* GRID DE VALORES */
.sec-valor { background: #fff; padding: 28px 0; margin: 28px 0; border-top: 2px solid #f0f0f0; border-bottom: 2px solid #f0f0f0; }
.sec-valor h2 { text-align: center; color: #1a1a1a; margin-bottom: 22px; font-size: 20px; font-weight: 900; font-family: 'Poppins', sans-serif; }
.grid-valor { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-val { background: #00B9FF; color: #fff; border: none; padding: 17px 12px; font-size: 18px; font-weight: 900; cursor: pointer; border-radius: 10px; transition: all .2s; font-family: 'Poppins', sans-serif; min-height: 54px; display: flex; align-items: center; justify-content: center; }
.btn-val:hover { background: #0097d6; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,185,255,.4); }
.btn-val:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* COMENTARIOS */
.sec-coments { margin: 28px 0; padding: 0; }
.sec-coments h2 { color: #aaa; font-size: 13px; margin-bottom: 16px; font-weight: 400; font-family: 'Nunito', sans-serif; padding-bottom: 10px; border-bottom: 1px solid #eee; text-align: left; }
.card-coment { background: #fff; padding: 16px; margin-bottom: 16px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.coment-head { display: flex; align-items: center; margin-bottom: 10px; gap: 10px; }
.coment-foto { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #00B9FF; object-fit: cover; flex-shrink: 0; }
.coment-info strong { color: #222; display: block; font-size: 14px; }
.coment-info span { font-size: 11px; color: #aaa; }
.card-coment p { color: #555; line-height: 1.55; margin: 0; font-size: 14px; text-align: left; }

/* RODAPE */
footer { background: #f7f7f7; color: #777; padding: 28px 0; text-align: center; margin-top: 36px; margin-left: -20px; margin-right: -20px; font-size: 13px; }
footer p { margin-bottom: 8px; line-height: 1.6; }
footer a { color: #00B9FF; text-decoration: none; }
footer a:hover { text-decoration: underline; }
.rod-copy { font-size: 11px; color: #bbb; margin-top: 12px; }

/* MODAL PIX */
.ovl-fundo { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; z-index: 9999; background: rgba(0,0,0,.82); padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ovl-fundo.active { display: flex; }
.ovl-card { background: #fff; padding: 18px 18px 22px; border-radius: 16px; max-width: 400px; width: 100%; position: relative; margin: auto 0; flex-shrink: 0; }
.btn-fechar { position: absolute; right: 12px; top: 12px; background: #e53935; color: #fff; border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.aviso-info { text-align: center; color: #005f8a; font-size: 12px; line-height: 1.4; margin-bottom: 10px; font-weight: 600; background: #e3f7ff; padding: 8px 10px; border-radius: 8px; }
.ovl-titulo { text-align: center; font-size: 17px; font-weight: 900; color: #222; margin-bottom: 6px; font-family: 'Poppins', sans-serif; }
.ovl-valor-tag { text-align: center; font-size: 13px; color: #666; margin-bottom: 10px; }
.ovl-valor-tag strong { color: #00B9FF; font-size: 20px; font-family: 'Poppins', sans-serif; }
#qr-box { text-align: center; margin: 6px auto 8px; max-width: 164px; display: flex; align-items: center; justify-content: center; }
#qr-box canvas, #qr-box img { border-radius: 8px; }
.pix-ou { text-align: center; font-size: 11px; color: #aaa; margin: 4px 0; }
#pix-txt { width: 100%; padding: 9px 10px; border: 1px solid #ddd; border-radius: 8px; font-family: monospace; font-size: 10px; resize: none; height: 52px; text-align: center; background: #f9f9f9; color: #555; }
.pix-aviso { text-align: center; color: #888; font-size: 11px; margin: 6px 0; line-height: 1.4; }
#copiar-btn { width: 100%; padding: 13px; background: #27ae60; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 900; cursor: pointer; text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; transition: background .2s; }
#copiar-btn:hover { background: #219a52; }
#copiar-btn.copiado { background: #1e8449; }
.pix-tempo { text-align: center; font-size: 22px; font-weight: 900; color: #e53935; margin: 8px 0 4px; letter-spacing: 3px; font-family: 'Poppins', sans-serif; }
.pix-como { margin-top: 10px; }
.como-linha { display: flex; align-items: flex-start; margin-bottom: 7px; font-size: 12px; color: #555; line-height: 1.4; gap: 8px; }
.como-icon { font-size: 15px; flex-shrink: 0; width: 18px; }
.pago-pane { text-align: center; padding: 28px 20px; }
.pago-icone { width: 72px; height: 72px; background: #27ae60; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; margin: 0 auto 16px; box-shadow: 0 4px 14px rgba(39,174,96,.35); }
.pago-titulo { color: #27ae60; font-size: 22px; margin-bottom: 10px; font-weight: 900; font-family: 'Poppins', sans-serif; }
.pago-desc { color: #777; font-size: 14px; }

/* TOAST */
.alerta-box { position: fixed; bottom: 28px; left: 24px; background: #e3f7ff; color: #005f8a; border: 1px solid #80dcff; padding: 13px 18px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.12); font-size: 13px; z-index: 9998; display: none; max-width: 320px; font-weight: 600; }
.alerta-box.show { display: block; animation: deslize 6s ease-in-out forwards; }
@keyframes deslize { 0%{opacity:0;transform:translateY(16px)} 10%{opacity:1;transform:translateY(0)} 88%{opacity:1} 100%{opacity:0;transform:translateY(16px)} }

@media(max-width:600px) {
  .h1-pg { font-size: 21px; }
  .btn-doe { font-size: 16px; padding: 16px 20px; }
  .btn-val { font-size: 16px; padding: 15px 10px; min-height: 50px; }
  .grid-valor { gap: 8px; }
  .alerta-box { left: 12px; right: 12px; bottom: 16px; max-width: none; }
  .ovl-card { padding: 14px 13px 18px; }
}