:root {
  --verde-oscuro: #022b14;
  --verde-boton: #084c25;
  --texto: #032109;
  --blanco: #ffffff;
  --gris: #666;
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--verde-oscuro);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', Arial, sans-serif;
}

.phone {
  width: min(390px, 94vw);
  aspect-ratio: 390 / 844;
  background: var(--blanco);
  border-radius: 34px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  width: 100%;
  height: 340px;
  background: url('https://res.cloudinary.com/dm3ndyl9x/image/upload/v1732028333/administradorqr/1/cksbblrahenwlwsntwvq.jpg') center/cover no-repeat;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

header::after {
  content: "";
  position: absolute;
  top: 80px;
  left: 20%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  background: url('https://res.cloudinary.com/dm3ndyl9x/image/upload/v1731941883/administradorqr/1/t6xhl1lrupwkx0mgoxc0.png') center/contain no-repeat;
  z-index: 2;
  pointer-events: none; /* evita interferir con clics */
}

.contenido {
  margin-top: 40px;
  text-align: center;
  width: 85%;
}

.titulo {
  background: var(--verde-boton);
  color: var(--blanco);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
  display: inline-block;
}

.valor {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 20px;
}

footer {
  text-align: center;
  margin-top: auto;
  margin-bottom: 18px;
  color: var(--texto);
}

@media (max-width: 480px) {
  body { background: var(--blanco); }
  .phone { width: 100vw; height: 100svh; border-radius: 0; }
}