/* ======================================== 
   Estilo del Botón de Donación 
   ======================================== */

/* Estilo general del botón */
form button {
  padding: 0; /* Elimina el padding por defecto */
  margin: 0; /* Elimina el margen por defecto */
  border: none; /* Elimina el borde */
  background: none; /* Elimina el fondo */
  cursor: pointer; /* Cambia el cursor a mano cuando se pasa sobre el botón */
  --primary-color: #1561b8; /* Color principal (azul) */
  --hovered-color: #d6d31d; /* Color cuando se pasa el cursor (amarillo) */
  position: relative;
  display: flex;
  font-weight: 600;
  font-size: 24px; /* Tamaño de fuente */
  gap: 0.5rem; /* Espaciado entre texto e icono */
  align-items: center; /* Alinea el contenido verticalmente */
  transition: transform 0.3s ease; /* Transición suave para el movimiento */
}

.row p {
  text-align: justify;
}

/* Estilo del texto dentro del botón */
button p {
  margin: 0; /* Elimina margen */
  position: relative;
  font-size: 1.5rem; /* Tamaño de fuente para el texto */
  color: var(--primary-color); /* Color del texto */
  text-align: center;
}

form  {
  display: flex;
  justify-content: center;
  align-items: center; /* Alinea el contenido verticalmente */

}

/* Línea debajo del botón */
button::after {
  position: absolute;
  content: "";
  width: 0; /* Comienza con ancho 0 */
  left: 0;
  bottom: -7px; /* Posiciona la línea debajo del texto */
  background: var(--hovered-color); /* Color de la línea */
  height: 2px; /* Altura de la línea */
  transition: width 0.3s ease-out; /* Transición para aumentar el ancho */
}

/* Estilo del texto "DONAR" en hover */
button p::before {
  position: absolute;
  content: "DONAR"; /* Texto de la acción */
  width: 0%; /* Comienza con ancho 0 */
  inset: 0; /* Alinea el texto */
  color: var(--hovered-color); /* Color del texto en hover */
  overflow: hidden; /* Oculta el contenido cuando el ancho es 0 */
  transition: width 0.3s ease-out; /* Transición para mostrar el texto */
}

/* Estilo del botón al pasar el cursor */
button:hover::after {
  width: 100%; /* Expande la línea */
}

button:hover p::before {
  width: 100%; /* Muestra el texto "DONAR" */
}

/* Efecto en el icono SVG al pasar el cursor */
button:hover svg {
  transform: translateX(4px); /* Mueve el icono hacia la derecha */
  color: var(--hovered-color); /* Cambia el color del icono */
}

/* Estilo de los iconos SVG */
button svg {
  color: var(--primary-color); /* Color del icono */
  transition: 0.2s; /* Transición suave */
  position: relative;
  width: 20px; /* Tamaño del icono */
  transition-delay: 0.2s; /* Retraso en la transición */
}

/* ======================================== 
   Responsividad para tamaños de pantalla pequeños 
   ======================================== */

/* Para pantallas con un ancho máximo de 768px */
@media (max-width: 768px) {
  button {
    font-size: 20px; /* Reducir el tamaño de la fuente */
    gap: 0.3rem; /* Reducir el espacio entre el texto y el icono */
  }

  button p {
    font-size: 1.5rem; /* Reducir el tamaño del texto */
  }

  button svg {
    width: 30px; /* Reducir el tamaño del icono */
  }
}

/* Para pantallas con un ancho máximo de 480px */
@media (max-width: 480px) {
  button {
    font-size: 30px; /* Reducir aún más el tamaño de la fuente */
    gap: 0.2rem; /* Reducir el espacio entre el texto y el icono */
  }

  button p {
    font-size: 1.5rem; /* Reducir el tamaño del texto */
  }

  button svg {
    width: 16px; /* Reducir el tamaño del icono */
  }
}

/* ======================================== 
   Estilo para centrar contenido de la página 
   ======================================== */

/* Centra el contenido de la sección */
.centrarDonar {
  text-align: center;
}

/* ======================================== 
   Estilo de la Imagen 
   ======================================== */

/* Asegura que la imagen se ajuste al contenedor */
img {
  max-width: 100%; /* Asegura que la imagen no exceda el tamaño de su contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  display: block; /* Elimina espacio en línea */
  margin: 0 auto; /* Centra la imagen */
}

/* ======================================== 
   Estilo del Contenedor del Código QR 
   ======================================== */

/* Estilo para el contenedor del QR */
.qr-container {
  max-width: 300px; /* Limita el tamaño máximo del QR */
  margin: 0 auto; /* Centra el contenedor */
  text-align: center; /* Centra el texto dentro del contenedor */
}

/* Ajustes de tamaño para pantallas medianas */
@media (max-width: 768px) {
  .qr-container {
    max-width: 250px; /* Reduce el tamaño del QR en pantallas medianas */
  }
}

/* Ajustes de tamaño para pantallas pequeñas */
@media (max-width: 480px) {
  .qr-container {
    max-width: 200px; /* Reduce aún más el tamaño del QR */
  }
}