@font-face {
  font-family: "Impact";
  src: url("fonts/impact.ttf");
}

/* Reset y fuente profesional */

/* ELIMINAR ESPACIO SUPERIOR */
body {
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(
    90deg,
    rgb(151 151 151) 0%,
    rgb(0 0 0) 54%,
    rgb(151 151 151) 100%
  );
}



.pt-3 .py-3 {
    padding-top: 1rem !important;
}

.bg-dark {
    background: rgb(80 80 80);
    background: rgb(0, 0, 0);
    background: linear-gradient(250deg, rgb(151 151 151) 0%, rgb(0 0 0) 54%, rgb(151 151 151) 100%);
}


.contenedor-pago {
  max-width: 400px;
  margin: 40px auto;
  padding: 20px;
  color: #ffffff; /* verde neón */
  border-radius: 12px;
  box-shadow: 0 0 50px #ffffff;
  text-align: center;
  margin-bottom: 5rem;
  margin-top: 1rem;
}

.foto-producto {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 25px #ffffff;
  margin-bottom: 20px;
}

.titulo {
  margin-top: 10px; /* reduce el espacio arriba */
  margin-bottom: 10px; /* reduce el espacio abajo */
  padding-top: 0;
  padding-bottom: 0;
  /* También ajusta el tamaño y color si quieres */
}

.contenedor-pago .titulo {
  margin-top: 0px;
  margin-bottom: 30px;
}

/* Elimina el espacio superior del navegador */
.nav-bar {
  padding: 0 !important;
  margin: 0 !important;
}

.css-1fzhuxe-FloatingLabelInputElement-FloatingLabelInput {
    border-radius: 4px;
    border-width: 1px;
    background-color: rgb(255, 255, 255);
    border-color: rgb(183, 188, 191);
    border-style: solid;
    box-sizing: border-box;
    font-size: 16px;
    height: 40px;
    outline: 0px;
    padding: 16px 15px 0px;
    width: 120%;
}

/* Reduce el tamaño del nombre Sammy7Rainer para que el menú sea más delgado */
.navbar-brand h1 {
  margin: 0 !important;
  padding: 5px 0 !important;
}

/* SUBIR LA TARJETA: Ajusta este margen para acercarla al menú */

/* Reduce el espacio entre la foto y el título */
.foto-producto {
  max-width: 250px; /* O el ancho que quieras */
  height: 300px; /* Mismo valor que el ancho */
  object-position: center; /* Centra la imagen */
  margin-left: 20%; /*este valor para acercar la foto al título */
  margin-right: 10%; /*Ajusta este valor para acercar la foto al título */
}


/* Responsive: navbar y body */

@media (prefers-reduced-motion:reduce) {

       .custom-control-label::before,
       .custom-file-label,
       .custom-select {
              transition: none
       }
}

.nav {
       display: flex;
       flex-wrap: wrap;
       padding-left: 0;
       margin-bottom: 0;
       list-style: none
}

.nav-link {
       display: block;
       padding: .5rem 1rem
}

.nav-link:focus,
.nav-link:hover {
       text-decoration: none
}




.nav-link.disabled {
       color: #6c757d;
       pointer-events: none;
       cursor: default
}

.nav-tabs {
       border-bottom: 1px solid #dee2e6
}

.nav-tabs .nav-item {
       margin-bottom: -1px
}

.nav-tabs .nav-link {
       border: 1px solid transparent
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
       border-color: #e9ecef #e9ecef #dee2e6
}

.nav-tabs .nav-link.disabled {
       color: #6c757d;
       background-color: transparent;
       border-color: transparent
}



.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
       color: #495057;
       background-color: #fff;
       border-color: #dee2e6 #dee2e6 #fff
}

.nav-tabs .dropdown-menu {
       margin-top: -1px
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
       color: #fff;
       background-color: #ffffff
}

.nav-fill .nav-item,
.nav-fill>.nav-link {
       flex: 1 1 auto;
       text-align: center
}

.nav-justified .nav-item,
.nav-justified>.nav-link {
       flex-basis: 0;
       flex-grow: 1;
       text-align: center
}

.tab-content>.tab-pane {
       display: none
}

.tab-content>.active {
       display: block
}

.navbar {
       position: relative;
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: space-between;
       padding: .5rem 1rem
}

.navbar .container,
.navbar .container-fluid,
.navbar .container-lg,
.navbar .container-md,
.navbar .container-sm,
.navbar .container-xl {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: space-between
}

.navbar-brand {
       display: inline-block;
       padding-top: .3125rem;
       padding-bottom: .3125rem;
       margin-right: 1rem;
       font-size: 1.25rem;
       line-height: inherit;
       white-space: nowrap
}

.navbar-brand:focus,
.navbar-brand:hover {
       text-decoration: none
}

.navbar-nav {
       display: flex;
       flex-direction: column;
       padding-left: 0;
       margin-bottom: 0;
       list-style: none
}

.navbar-nav .nav-link {
       padding-right: 0;
       padding-left: 0
}

.navbar-nav .dropdown-menu {
       position: static;
       float: none
}

.navbar-text {
       display: inline-block;
       padding-top: .5rem;
       padding-bottom: .5rem
}

.navbar-collapse {
       flex-basis: 100%;
       flex-grow: 1;
       align-items: center
}



.navbar-toggler {
       padding: .25rem .75rem;
       font-size: 1.25rem;
       line-height: 1;
       background-color: transparent;
       border: 1px solid transparent
}

.navbar-toggler:focus,
.navbar-toggler:hover {
       text-decoration: none
}

.navbar-toggler-icon {
       display: inline-block;
       width: 1.5em;
       height: 1.5em;
       vertical-align: middle;
       content: "";
       background: no-repeat center center;
       background-size: 100% 100%
}


a {
       color: #ffffff;
       text-decoration: none;
       background-color: transparent;
       background-color: transparent;
}


.nav-item:hover {
       background-color: transparent;
       background: linear-gradient(250deg, rgb(151 151 151) 0%, rgb(0 0 0) 54%, rgb(151 151 151) 100%);
       text-decoration: none;
}

a:not([href]):not([class]) {
       color: inherit;
       text-decoration: none
}

a:not([href]):not([class]):hover {
       color: inherit;
       text-decoration: none
}



@media (max-width:575.98px) {

       .navbar-expand-sm>.container,
       .navbar-expand-sm>.container-fluid,
       .navbar-expand-sm>.container-lg,
       .navbar-expand-sm>.container-md,
       .navbar-expand-sm>.container-sm,
       .navbar-expand-sm>.container-xl {
              padding-right: 0;
              padding-left: 0
       }
}

@media (min-width:576px) {
       .navbar-expand-sm {
              flex-flow: row nowrap;
              justify-content: flex-start
       }

       .navbar-expand-sm .navbar-nav {
              flex-direction: row
       }

       .navbar-expand-sm .navbar-nav .dropdown-menu {
              position: absolute
       }

       .navbar-expand-sm .navbar-nav .nav-link {
              padding-right: .5rem;
              padding-left: .5rem
       }

       .navbar-expand-sm>.container,
       .navbar-expand-sm>.container-fluid,
       .navbar-expand-sm>.container-lg,
       .navbar-expand-sm>.container-md,
       .navbar-expand-sm>.container-sm,
       .navbar-expand-sm>.container-xl {
              flex-wrap: nowrap
       }

       .navbar-expand-sm .navbar-collapse {
              display: flex !important;
              flex-basis: auto
       }

       .navbar-expand-sm .navbar-toggler {
              display: none
       }
}

@media (max-width:767.98px) {

       .navbar-expand-md>.container,
       .navbar-expand-md>.container-fluid,
       .navbar-expand-md>.container-lg,
       .navbar-expand-md>.container-md,
       .navbar-expand-md>.container-sm,
       .navbar-expand-md>.container-xl {
              padding-right: 0;
              padding-left: 0
       }
}

@media (min-width:768px) {
       .navbar-expand-md {
              flex-flow: row nowrap;
              justify-content: flex-start
       }

       .navbar-expand-md .navbar-nav {
              flex-direction: row
       }

       .navbar-expand-md .navbar-nav .dropdown-menu {
              position: absolute
       }

       .navbar-expand-md .navbar-nav .nav-link {
              padding-right: .5rem;
              padding-left: .5rem
       }

       .navbar-expand-md>.container,
       .navbar-expand-md>.container-fluid,
       .navbar-expand-md>.container-lg,
       .navbar-expand-md>.container-md,
       .navbar-expand-md>.container-sm,
       .navbar-expand-md>.container-xl {
              flex-wrap: nowrap
       }

       .navbar-expand-md .navbar-collapse {
              display: flex !important;
              flex-basis: auto
       }

       .navbar-expand-md .navbar-toggler {
              display: none
       }
}

@media (max-width:991.98px) {

       .navbar-expand-lg>.container,
       .navbar-expand-lg>.container-fluid,
       .navbar-expand-lg>.container-lg,
       .navbar-expand-lg>.container-md,
       .navbar-expand-lg>.container-sm,
       .navbar-expand-lg>.container-xl {
              padding-right: 0;
              padding-left: 0
       }
}

@media (min-width:992px) {
       .navbar-expand-lg {
              flex-flow: row nowrap;
              justify-content: flex-start
       }

       .navbar-expand-lg .navbar-nav {
              flex-direction: row
       }

       .navbar-expand-lg .navbar-nav .dropdown-menu {
              position: absolute
       }

       .navbar-expand-lg .navbar-nav .nav-link {
              padding-right: .5rem;
              padding-left: .5rem
       }

       .navbar-expand-lg>.container,
       .navbar-expand-lg>.container-fluid,
       .navbar-expand-lg>.container-lg,
       .navbar-expand-lg>.container-md,
       .navbar-expand-lg>.container-sm,
       .navbar-expand-lg>.container-xl {
              flex-wrap: nowrap
       }

       .navbar-expand-lg .navbar-collapse {
              display: flex !important;
              flex-basis: auto
       }

       .navbar-expand-lg .navbar-toggler {
              display: none
       }
}

@media (max-width:1199.98px) {

       .navbar-expand-xl>.container,
       .navbar-expand-xl>.container-fluid,
       .navbar-expand-xl>.container-lg,
       .navbar-expand-xl>.container-md,
       .navbar-expand-xl>.container-sm,
       .navbar-expand-xl>.container-xl {
              padding-right: 0;
              padding-left: 0
       }
}

@media (min-width:1200px) {
       .navbar-expand-xl {
              flex-flow: row nowrap;
              justify-content: flex-start
       }

       .navbar-expand-xl .navbar-nav {
              flex-direction: row
       }

       .navbar-expand-xl .navbar-nav .dropdown-menu {
              position: absolute
       }

       .navbar-expand-xl .navbar-nav .nav-link {
              padding-right: .5rem;
              padding-left: .5rem
       }

       .navbar-expand-xl>.container,
       .navbar-expand-xl>.container-fluid,
       .navbar-expand-xl>.container-lg,
       .navbar-expand-xl>.container-md,
       .navbar-expand-xl>.container-sm,
       .navbar-expand-xl>.container-xl {
              flex-wrap: nowrap
       }

       .navbar-dark .navbar-nav .nav-link {
              color: rgba(255, 255, 255, .5)
       }

       .navbar-expand-xl .navbar-collapse {
              display: flex !important;
              flex-basis: auto
       }

       .navbar-expand-xl .navbar-toggler {
              display: none
       }
}




@media (max-width: 576px) {
  header h1 {
    font-size: 24px;
  }
  .contenedor-pago {
    margin: 20px 10px;
    padding: 15px;
  }
}

p {
  font-size: 20px;
}

h1 {
  color: #26ff00;
  margin-top: 10px; /* reduce el espacio arriba */
  margin-bottom: 10px; /* reduce el espacio abajo */
  padding-top: 0;
  padding-bottom: 0;
  /* También ajusta el tamaño y color si quieres */
}

/* Asegurar el centrado de la imagen en el contenedor principal */
.contenedor-pago {
    display: flex;
    flex-direction: column; /* Alinea los elementos verticalmente */
    /* ... resto de tus estilos para el contenedor ... */
}

/* Reglas específicas para la foto del producto */
.foto-producto {
    display: block;         /* Cambia a bloque para permitir márgenes automáticos */
    margin-left: auto !important; /* Fuerza el margen izquierdo automático */
    margin-right: auto !important; /* Fuerza el margen derecho automático */
    max-width: 100%;        /* Asegura que no se desborde en pantallas pequeñas */
    height: auto;           /* Mantiene la proporción de la imagen */
    /* ... resto de tus estilos para la foto ... */
}

/* Media Query para dispositivos móviles y tabletas (Android, iPad, etc.) */
@media (max-width: 991px) {
    .foto-producto {
        /* Puedes ajustar el max-width aquí si quieres que sea más pequeña en móviles */
        max-width: 80% !important; /* Ejemplo: 80% del ancho del contenedor en móviles */
    }
}