/* ============================================================
   PROTO NEWS — Aviso de donación (Zelle)
   Zelle no tiene enlace web, así que mostramos el número
   para que el usuario lo copie y lo pegue en su banco.
   ============================================================ */

.aviso-fondo{
  position:fixed;inset:0;z-index:200;
  background:rgba(3,3,5,0.82);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;
  padding:1.2rem;
  opacity:0;transition:opacity .25s ease;
}
.aviso-fondo.abierto{display:flex;opacity:1}

.aviso-caja{
  position:relative;
  width:100%;max-width:440px;
  border-radius:8px;
  padding:2rem 1.8rem 1.6rem;
  background:linear-gradient(165deg,rgba(32,26,18,0.98) 0%,rgba(12,12,15,0.99) 55%,rgba(20,16,10,0.98) 100%);
  border:1px solid rgba(201,169,97,0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 30px 70px -20px rgba(0,0,0,0.98),
    0 0 60px -18px rgba(201,169,97,0.45);
  transform:translateY(14px) scale(.97);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.aviso-fondo.abierto .aviso-caja{transform:translateY(0) scale(1)}

.aviso-cerrar{
  position:absolute;top:.7rem;right:.7rem;
  width:34px;height:34px;border-radius:4px;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--texto-tenue);
  font-size:1.1rem;line-height:1;
  transition:all .2s ease;
}
.aviso-cerrar:hover{
  background:rgba(229,9,20,0.18);
  border-color:var(--linea-roja);
  color:#fff;
}

.aviso-icono{
  width:56px;height:56px;border-radius:50%;
  margin:0 auto 1.1rem;
  display:grid;place-items:center;
  background:linear-gradient(180deg,#FFE9A8 0%,#E3CB84 45%,#A8873F 100%);
  box-shadow:
    0 8px 24px -8px rgba(201,169,97,0.85),
    inset 0 1px 0 rgba(255,255,255,0.60),
    inset 0 -2px 5px rgba(0,0,0,0.28);
}
.aviso-icono svg{width:28px;height:28px;fill:#0A0B0E}

.aviso-titulo{
  font-family:'Cinzel',serif;font-weight:700;
  font-size:1.28rem;line-height:1.2;
  text-align:center;color:#fff;
  margin-bottom:.5rem;
}
.aviso-texto{
  font-size:.88rem;line-height:1.6;
  text-align:center;color:var(--texto-tenue);
  margin-bottom:1.3rem;
}

.aviso-numero-caja{
  display:flex;align-items:center;gap:.6rem;
  padding:.85rem 1rem;
  border-radius:5px;
  background:rgba(0,0,0,0.45);
  border:1px solid rgba(201,169,97,0.30);
  margin-bottom:1.1rem;
}
.aviso-numero{
  flex:1;
  font-family:'JetBrains Mono',monospace;
  font-size:1.12rem;font-weight:500;
  letter-spacing:.06em;
  color:var(--oro-300);
  text-align:center;
  user-select:all;
}
.aviso-copiar{
  flex-shrink:0;
  padding:.5rem .85rem;border-radius:4px;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(180deg,#F7E9BE 0%,#D9BC72 48%,#A8873F 100%);
  border:1px solid rgba(255,244,205,0.55);
  color:#0A0B0E;
  box-shadow:0 4px 14px -5px rgba(201,169,97,0.7),inset 0 1px 0 rgba(255,255,255,0.55);
  transition:all .22s cubic-bezier(.16,1,.3,1);
}
.aviso-copiar:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px -6px rgba(201,169,97,0.95),inset 0 1px 0 rgba(255,255,255,0.70);
}
.aviso-copiar:active{transform:translateY(0)}
.aviso-copiar.copiado{
  background:linear-gradient(180deg,#4AE07A 0%,#25D366 52%,#128C4A 100%);
  border-color:rgba(150,255,190,0.55);
  color:#fff;
}

.aviso-pasos{
  list-style:none;
  display:flex;flex-direction:column;gap:.5rem;
  margin-bottom:1.2rem;
}
.aviso-pasos li{
  display:flex;gap:.6rem;align-items:flex-start;
  font-size:.8rem;line-height:1.5;color:var(--texto-apagado);
}
.aviso-pasos li span:first-child{
  flex-shrink:0;
  width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(201,169,97,0.16);
  border:1px solid rgba(201,169,97,0.35);
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;color:var(--oro-400);
  margin-top:.1rem;
}

.aviso-nota{
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;line-height:1.5;
  text-align:center;color:var(--texto-apagado);
  padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,0.07);
}

.aviso-llamar{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;
  padding:.75rem 1rem;
  margin-bottom:1.1rem;
  border-radius:4px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10);
  transition:all .25s cubic-bezier(.16,1,.3,1);
}
.aviso-llamar svg{width:16px;height:16px;fill:currentColor}
.aviso-llamar:hover{
  color:#fff;
  border-color:rgba(201,169,97,0.45);
  background:rgba(201,169,97,0.10);
  transform:translateY(-2px);
  box-shadow:0 8px 22px -10px rgba(201,169,97,0.6),inset 0 1px 0 rgba(255,255,255,0.16);
}
.aviso-llamar:active{transform:translateY(0)}

@media (max-width:480px){
  .aviso-caja{padding:1.6rem 1.2rem 1.3rem}
  .aviso-titulo{font-size:1.1rem}
  .aviso-numero{font-size:.98rem}
}