/* Ventana de pago de EiAmazonia (formulario de HubSpot incrustado; ver recursos/pagos.js) */

/* Los botones de los planes siguen siendo enlaces <a>: si no hay JavaScript
   abren la página de pago de HubSpot como antes. */
:root a.abrir-pago{cursor:pointer}

dialog.dialogo-pago{
  max-width:640px;width:calc(100% - 24px);max-height:calc(100% - 24px);
  border:0;border-radius:var(--radio,16px);padding:28px 28px 22px;
  background:#fff;color:#333;line-height:1.6;
  box-shadow:0 20px 60px rgba(0,0,0,.4);overscroll-behavior:contain;
}
dialog.dialogo-pago::backdrop{background:rgba(0,0,0,.7)}
dialog.dialogo-pago h3{margin:0 44px 2px 0;color:var(--verde,#50653E);font-family:var(--roboto,inherit);font-size:24px;line-height:1.25}
dialog.dialogo-pago .importe{margin:0 0 12px;font-size:17px;font-weight:700;color:#222}
dialog.dialogo-pago .aviso-pago{
  margin:0 0 14px;padding:10px 12px;font-size:14px;line-height:1.45;color:#555;
  background:var(--fondo-suave,#F7F5F1);border-radius:var(--radio-peq,10px);
}
dialog.dialogo-pago .marco-pago{min-height:180px;margin-top:14px}
dialog.dialogo-pago .marco-pago iframe{display:block;width:100%;border:0;border-radius:var(--radio-peq,10px)}
dialog.dialogo-pago .cargando{margin:40px 0;text-align:center;color:#666;font-size:15px}
/* Botón oficial de donaciones de PayPal (se pinta dentro de la ventana) */
dialog.dialogo-pago .boton-paypal{text-align:center;margin:4px 0 16px}
dialog.dialogo-pago .boton-paypal img{display:inline-block;max-width:100%;height:auto}
dialog.dialogo-pago .marco-pago:has(.boton-paypal){min-height:0}
dialog.dialogo-pago .pie-pago{margin:0;text-align:center}
dialog.dialogo-pago .pie-pago a{color:var(--verde,#50653E);font-size:14px}
dialog.dialogo-pago .nota-pago{margin:6px 0 0;text-align:center;font-size:13px;line-height:1.45;color:#777}
dialog.dialogo-pago .cerrar{
  position:absolute;top:10px;right:12px;z-index:2;
  width:40px;height:40px;border:0;border-radius:50%;
  background:#eee;color:#222;font-size:26px;line-height:1;cursor:pointer;
}
dialog.dialogo-pago .cerrar:hover{background:#ddd}
dialog.dialogo-pago .cerrar:focus-visible{outline:3px solid var(--naranja,#F5A33A);outline-offset:2px}

/* Nota bajo los botones de donación puntual (por si la página no la define) */
.nota-donacion{font-size:14px;color:#555;margin-top:10px}

@media (max-width:480px){
  dialog.dialogo-pago{width:calc(100% - 12px);max-height:calc(100% - 12px);padding:24px 12px 18px}
  dialog.dialogo-pago h3{font-size:20px}
  dialog.dialogo-pago .importe{font-size:16px}
}