html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

a{
  text-decoration: none !important;
}

.form-rojo{
  border: 1px solid red !important;
}

.Principal{
	background-image: url('../images/Encontrar-sugar-daddy.webp');
  background-attachment: fixed;
  background-size: cover;
  min-height: 100vh; /* Usar min-height en lugar de height */
  background-position: center center;
  background-repeat: no-repeat;
  color: white;
}

.h1-aumentado{
  font-size: 38px;
}

.p-aumentado{
  font-size: 23px;
}

.new-container{
padding-top: 100px;
}

.bg-negro{
  background-color: #000000;
}

.none{
  display: inline;
}

.none-movil{
  display: none;
}

.aumento:hover{
  transform: scale(1.1);
}

.btn-aumento:hover{
  transform: scale(1.02);
}

.text-dorado{
  color: #D09A40;
}

.text-mostaza{
  color: #DCA54A;
}

.btn-dorado{
  color: #FFF;
  background-color: #D09A40;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 15px 15px 15px 15px;
  border: none;          /* quita borde */

}

header{
  padding-bottom: 35px;
  padding-top: 20px;
}


footer{
  background-color: #000;
  padding-top: 20px;
  padding-bottom: 10px;
  font-size: 12px;
  line-height: 1.4;
}



.footer-bottom{
  padding-top: 10px;
}

/* Estilos para el texto dentro de la sección #hero */
#hero {
    text-align: center;
    padding: 00px 20px; /* Espaciado para el contenido dentro de la sección */
    background: rgba(0, 0, 0, 0.5); /* Fondo oscuro para mejorar contraste */
    min-height: 100vh; /* Usar min-height en lugar de height */
}

.sombra-contenedor {
    box-shadow:  10px 10px 10px rgba(0, 0, 0, 1.10);
}

.sombra-form{
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

.sombra-btn{
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-abajo{
  margin-top: 15px;
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.carrusel-salida {
    animation: slideOut 0.6s ease-in-out;
}

.carrusel-animado {
    animation: slideIn 0.6s ease-in-out;
}


#rangeValue {
  font-weight: bold;
  color: #333; /* Puedes cambiar el color */
}


/* Estilos base: móviles (mobile first) */
/* Aquí va tu CSS normal, sin media query */

/* Tablets en modo vertical (≥ 600px) */
@media (min-width: 600px) {
  /* ajustes para pantallas medianas */
  .Principal{
    	background-image: url('../images/Encontrar-sugar-daddy-hoy.webp');
      background-attachment: fixed;
      background-size: cover;
      min-height: 100vh; /* Usar min-height en lugar de height */
      background-position: center center;
      background-repeat: no-repeat;
      color: white;
  }
  .none{
    display: none;
  }
  .none-movil{
    display: inline;
  }
}

/* Tablets grandes o pantallas chicas de laptop (≥ 768px) */
@media (min-width: 768px) {
  /* layout tipo grid, menús más amplios, etc. */
  .Principal{
    	background-image: url('../images/Encontrar-sugar-daddy-hoy.webp');
      background-attachment: fixed;
      background-size: cover;
      min-height: 100vh; /* Usar min-height en lugar de height */
      background-position: center center;
      background-repeat: no-repeat;
      color: white;
  }
  .none{
    display: none;
  }
  .none-movil{
    display: inline;
  }
}

/* Laptops / desktops estándar (≥ 1024px) */
@media (min-width: 1024px) {
  .Principal{
    	background-image: url('../images/Encontrar-sugar-daddy-hoy.webp');
      background-attachment: fixed;
      background-size: cover;
      min-height: 100vh; /* Usar min-height en lugar de height */
      background-position: center center;
      background-repeat: no-repeat;
      color: white;
  }
  .none{
    display: none;
  }
  .none-movil{
    display: inline;
  }
  /* estilos más amplios, sidebar, etc. */
}