body{
    color: #d2ae26 !important;
}

h1{
    font-family: 'Playfair Display', serif;
    font-size: 48px;
}

.logo-inicio{
    width: 90%;
    margin-top: 70px;
    margin-bottom: 70px;
}

.logo-seccion-contacto{
    width: 260px;
    height: 234px;
}

.icono-seccion-contacto{
    width: 20px;
    height: 20px;
}

.seccion-inicio, .seccion-servicios, .seccion-contacto, .form-control{
    background-color: #333333;
}

.seccion-nosotros, .seccion-galeria, .seccion-equipo, .modal-content, nav{
    background-color: #1a1a1a;
}

#verMas{
    cursor: pointer;
}

section.seccion-nosotros{
    height: 370px;
}

section.seccion-equipo{
    height: 270px;
    padding-top: 100px;
}
.nav-link, a{
    color: #d2ae26;
}

.nav-link:hover, a:hover{
    color: #9c811e;
}



.texto-nosotros{
    font-style: italic;
}

.texto-iconos{
    font-size: 1.5rem;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea.form-control:focus{
    outline: none !important;
    box-shadow: 0 0 10px #d2ae26;
    background-color: #333333;
    color: #d2ae26;
}

input[type="text"], input[type="email"], input[type="tel"], textarea.form-control{
    border: none;
    border-bottom: 1px solid #d2ae26;
    outline: none;
    background-color: transparent;
    color: #a18210; 
}

.form-floating input[type="text"]:focus + label, .form-floating input[type="email"]:focus + label, .form-floating input[type="tel"]:focus + label, .form-floating textarea.form-control + label{
    color: #d2ae26;
}



/* Estilo personalizado para el botón "Ir hacia arriba" */
#btnIrArriba {
    display: none; /* Inicialmente oculto */
    position: fixed;
    bottom: 10px;
    right: 15px;
    cursor: pointer;
    padding: 14px;
    opacity: 0.7;
    transition: opacity 0.3s ease-in-out;
}

#btnIrArriba:hover {
    opacity: 1;
}

.form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
    color: #c4a124;
}

.navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28210, 174, 38, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.img-eventos{
    margin-bottom: 10%;
    width: 100%;
}
.btn{
    color: #d2ae26;
    background-color: #333333;
    border: none;
    border-bottom: 1px solid #d2ae26;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    padding:13px 15px;
    margin: 10px;
    font-size:16px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    transition:all 1s;
    background-color: #1a1a1a;
    &:after,&:before{
        content:" ";
        width:10px;
        height:10px;
        position:absolute;
        border :0px solid #fff;
        transition:all 1s;
        }
    &:after{
        top:-1px;
        left:-1px;
        border-top:3px solid black;
        border-left:3px solid black;
    }
    &:before{
        bottom:-1px;
        right:-1px;
        border-bottom:3px solid black;
        border-right:3px solid black;
    }
    &:hover{
        border-top-right-radius:0px;
        border-bottom-left-radius:0px;
        background-color: #1a1a1a;
        &:before,&:after{         
            width:100%;
            height:100%;
            border-color:#c9a210;
        }
    }
}

/*---------------SERVICIOS------------------------*/
.services {
    margin-bottom: 50px;
    margin-top:2px;
}
.slider-container {
    text-align: center;
    width: 100%;
    padding: 20px;
}

.slider-container h2 {
    font-size: 50px;
    font-family: 'Orbitron', sans-serif;
    color: var(--Platinum);
}

.slider-img {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.slide-track {
    display: flex;
    width: calc(250px * 8); /* Ajustar este valor según el número de elementos */
    animation: scroll 10s ease-in-out infinite; /* Duración ajustada */
}

.slide {
    height: 100%;
    width: 400px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 15px;
}

.slide img {
    width: 100%;
    vertical-align: top;
}

@keyframes scroll {
    0% {
        transform: translateX(0); /* Posición inicial */
    }
    50% {
        transform: translateX(calc(-250px * (2.5 - 1))); /* N es el número total de elementos */
    }
    100% {
        transform: translateX(0); /* Regresar a la posición inicial */
    }
}

.separacion {
    margin-top: 12px;
    margin-left: 50px;
    margin-right: 50px;
}

/*--------------- FIN SERVICIOS------------------------*/

/*--------------- GLOW IMAGES --------------------*/

.separacion img {
  width: 100px;
  height: 100px;
  border-radius: 20%;
  transition: .5s;
  background: #333;
  box-shadow: 0 0 0 transparent;
}

.separacion img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20%;
  background: #ffee10;
  transition: .5s;
  transform: scale(.9);
  z-index: -1;
}

.separacion:hover img::before {
  transform: scale(1.1);
  box-shadow: 0 0 15px #ffee10;
}

.separacion:hover img {
  color: #ffee10;
  box-shadow: 0 0 15px #ffee10;
}

.separacion:hover .texto-iconos {
  color: #ffee10;
  text-shadow: 0 0 5px #ffee10;
}
.logo-nav {
    position: relative;
    width: 9%;
    margin-left: 20px;
    z-index: 1; /* Asegura que la imagen esté sobre el glow */
    transition: transform 0.3s ease-in-out;
}


.logo-nav:hover {
    transform: scale(1.1);
}
/* Estilo por defecto del navbar */
.navbar {
  transition: all 0.3s ease;
  background-color: #1a1a1a;
  padding: 15px 7px; /* Ajusta el padding para el tamaño inicial */
}
.navbar.scrolled img{
  width: 5%;
}
.navbar.scrolled ul li a{
    font-size: 13px;
}

/* Estilo del navbar al hacer scroll */
.navbar.scrolled {
  background-color: rgba(26, 26, 26, 0.8); /* Color con transparencia (0.8 de opacidad) */
  padding: 3px 3px; /* Reduce el padding para hacerlo más pequeño */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Agrega una sombra ligera */
}

/* Carrusel estilos */
.carrusel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.carrusel-items {
  display: flex;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 60px 0px;
  transition: scroll-left 0.5s ease-in-out; /* La transición se aplicará al scroll */
}

.carrusel-item {
  min-width: 300px;
  max-width: 300px;
  height: 300px;
  outline: 2px solid black;
  cursor: pointer;
}

.carrusel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Botones de flecha */
.arrow-btn {
  background-color: rgba(0, 0, 0, 0); /* Fondo semitransparente */
  color: white;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  padding: 10px;
  transition: background-color 0.3s ease;
  z-index: 10;
}

.arrow-btn:hover {
  background-color: rgba(0, 0, 0, 0.5); /* Fondo más oscuro al hacer hover */
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

/* Carrusel con puntos*/

.image-carousel {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  margin: auto;
}

.carousel-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 200%; /* Al ser dos imágenes, se pone el doble del ancho */
}

.carousel-slide img {
  width: 100%;
  flex: 0 0 100%; /* Cada imagen ocupa el 100% del ancho */
}

.carousel-dots {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

.dot {
  height: 18px;
  width: 18px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.dot:hover {
  background-color: #717171;
}

.active {
  background-color: #717171; /* Color del punto activo */
  box-shadow: 0 0 5px 2px gold; /* Sombra dorada alrededor del punto activo */
  transform: scale(1.2); /* Aumenta el tamaño del punto activo */
}

@media (max-width: 576px) {
    /* Estilos para dispositivos móviles pequeños */
    
    /* Ajuste del logo en la barra de navegación */
    .logo-nav {
        position: relative;
        width: 18%; /* Aumentamos ligeramente el tamaño del logo */
        margin-left: 5px; /* Disminuimos el margen para aprovechar mejor el espacio */
        z-index: 1;
        transition: transform 0.3s ease-in-out;
    }

    /* Ajuste del botón de menú (hamburger icon) */
    .navbar-toggler {
        position: absolute; /* Ajustamos para que flote dentro de la barra de navegación */
        top: 50%; /* Centrado verticalmente */
        right: 10px; /* Alineado a la derecha */
        transform: translateY(-50%); /* Centrado perfecto */
    }

    /* Ajuste de la sección de 'Nosotros' */
    section.seccion-nosotros {
        height: auto; /* Ajustamos la altura al contenido para que no sea del 100% */
    }
    .seccion-nosotros{
        padding-top: 30px;
    }
    .seccion-servicios{
        padding-top: 30px;
    }
    .seccion-galeria{
        padding-top: 30px;
        padding-bottom: 50px;
    }
    .seccion-contacto{
        padding-top: 30px;
    }

    /* Ajuste del margen en la sección de contacto */
    .logo-seccion-contacto {
        margin-top: 6%;
    }

    /* Ajuste del carrusel */
    .carousel-item {
        height: 31vh;
    }
    .navbar.scrolled {
        background-color: rgba(26, 26, 26, 0.8);
        padding: 5px 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .navbar.scrolled img{
      width: 10%;
    }
    @keyframes scroll {
        0% {
            transform: translateX(0); /* Posición inicial */
        }
        50% {
            transform: translateX(calc(-250px * (6 - 1))); /* N es el número total de elementos */
        }
        100% {
            transform: translateX(0); /* Regresar a la posición inicial */
        }
    }
    .slide-track {
        width: calc(250px * 7); /* Ajustar este valor según el número de elementos */
        animation: scroll 15s ease-in-out infinite; /* Duración ajustada */
    }
    .carousel-slide{
        width: 50%;
    }
}

@media (min-width: 577px) and (max-width: 767px) {
    /* Estilos para dispositivos móviles y tablets en modo retrato */
    /* Ajuste del logo en la barra de navegación */
    .logo-nav {
        position: relative;
        width: 20%; /* Aumentamos ligeramente el tamaño del logo */
        margin-left: 5px; /* Disminuimos el margen para aprovechar mejor el espacio */
        z-index: 1;
        transition: transform 0.3s ease-in-out;
    }

    /* Ajuste del botón de menú (hamburger icon) */
    .navbar-toggler {
        position: absolute; /* Ajustamos para que flote dentro de la barra de navegación */
        top: 50%; /* Centrado verticalmente */
        right: 10px; /* Alineado a la derecha */
        transform: translateY(-50%); /* Centrado perfecto */
    }
    .navbar.scrolled {
        background-color: rgba(26, 26, 26, 0.8);
        padding: 5px 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .navbar.scrolled img{
      width: 10%;
    }

    /* Ajuste del carrusel */
    .carousel-item {
        height: 31vh;
    }
    @keyframes scroll {
        0% {
            transform: translateX(0); /* Posición inicial */
        }
        50% {
            transform: translateX(calc(-250px * (6 - 1))); /* N es el número total de elementos */
        }
        100% {
            transform: translateX(0); /* Regresar a la posición inicial */
        }
    }
    .slide-track {
        width: calc(250px * 7); /* Ajustar este valor según el número de elementos */
        animation: scroll 12s ease-in-out infinite; /* Duración ajustada */
    }
    .carousel-slide{
        width: 50%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Estilos para tablets en modo paisaje y pantallas pequeñas de escritorio */
    /* Ajuste del logo en la barra de navegación */
    .logo-nav {
        position: relative;
        width: 14%; /* Aumentamos ligeramente el tamaño del logo */
        margin-left: 5px; /* Disminuimos el margen para aprovechar mejor el espacio */
        z-index: 1;
        transition: transform 0.3s ease-in-out;
    }

    /* Ajuste del botón de menú (hamburger icon) */
    .navbar-toggler {
        position: absolute; /* Ajustamos para que flote dentro de la barra de navegación */
        top: 50%; /* Centrado verticalmente */
        right: 10px; /* Alineado a la derecha */
        transform: translateY(-50%); /* Centrado perfecto */
    }
    .seccion-nosotros{
        padding-top: 40px;
    }
    .seccion-servicios{
        padding-top: 40px;
    }
    .seccion-galeria{
        padding-top: 40px;
        padding-bottom: 50px;
    }
    .seccion-contacto{
        padding-top: 40px;
    }

    /* Ajuste del carrusel */
    .carousel-item {
        height: 31vh;
    }
    .navbar.scrolled {
        background-color: rgba(26, 26, 26, 0.8);
        padding: 5px 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .navbar.scrolled img{
      width: 10%;
    }
    @keyframes scroll {
        0% {
            transform: translateX(0); /* Posición inicial */
        }
        50% {
            transform: translateX(calc(-250px * (5 - 1))); /* N es el número total de elementos */
        }
        100% {
            transform: translateX(0); /* Regresar a la posición inicial */
        }
    }
    .slide-track {
        width: calc(250px * 7); /* Ajustar este valor según el número de elementos */
        animation: scroll 12s ease-in-out infinite; /* Duración ajustada */
    }
    .carousel-slide{
        width: 50%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* Estilos para pantallas de escritorio medianas */
    /* Ajuste del logo en la barra de navegación */
    .logo-nav {
        position: relative;
        width: 13%; /* Aumentamos ligeramente el tamaño del logo */
        margin-left: 5px; /* Disminuimos el margen para aprovechar mejor el espacio */
        z-index: 1;
        transition: transform 0.3s ease-in-out;
    }

    /* Ajuste del botón de menú (hamburger icon) */
    .navbar-toggler {
        position: absolute; /* Ajustamos para que flote dentro de la barra de navegación */
        top: 50%; /* Centrado verticalmente */
        right: 10px; /* Alineado a la derecha */
        transform: translateY(-50%); /* Centrado perfecto */
    }
    .navbar.scrolled {
        background-color: rgba(26, 26, 26, 0.8);
        padding: 5px 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .navbar.scrolled img{
      width: 10%;
    }
    .seccion-nosotros{
        padding-top: 40px;
    }
    .seccion-servicios{
        padding-top: 40px;
    }
    .seccion-galeria{
        padding-top: 40px;
        padding-bottom: 50px;
    }
    .seccion-contacto{
        padding-top: 40px;
    }
    /* Ajuste del carrusel */
    .carousel-item {
        height: 31vh;
    }
    @keyframes scroll {
        0% {
            transform: translateX(0); /* Posición inicial */
        }
        50% {
            transform: translateX(calc(-250px * (4.5 - 1))); /* N es el número total de elementos */
        }
        100% {
            transform: translateX(0); /* Regresar a la posición inicial */
        }
    }
    .slide-track {
        width: calc(250px * 7); /* Ajustar este valor según el número de elementos */
        animation: scroll 12s ease-in-out infinite; /* Duración ajustada */
    }
    .carousel-slide{
        width: 50%;
    }
    .carrusel {
      height: 85vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
}
@media (min-width: 1200px) and (max-width: 1499px) {
    /* Estilos para pantallas de escritorio medianas */
    /* Ajuste del logo en la barra de navegación */
    .logo-nav {
        position: relative;
        width: 9%; /* Aumentamos ligeramente el tamaño del logo */
        margin-left: 5px; /* Disminuimos el margen para aprovechar mejor el espacio */
        z-index: 1;
        transition: transform 0.3s ease-in-out;
    }
    .navbar.scrolled {
        background-color: rgba(26, 26, 26, 0.8);
        padding: 5px 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .navbar.scrolled img{
      width: 5%;
    }
    .seccion-nosotros{
        padding-top: 20px;
    }
    .seccion-servicios{
        padding-top: 20px;
    }
    .seccion-galeria{
        padding-top: 20px;
        padding-bottom: 50px;
    }
    .seccion-contacto{
        padding-top: 20px;
    }
    /* Ajuste del carrusel */
    .carousel-item {
        height: 31vh;
    }
    @keyframes scroll {
        0% {
            transform: translateX(0); /* Posición inicial */
        }
        50% {
            transform: translateX(calc(-250px * (3.4 - 1))); /* N es el número total de elementos */
        }
        100% {
            transform: translateX(0); /* Regresar a la posición inicial */
        }
    }
    .slide-track {
        width: calc(250px * 7); /* Ajustar este valor según el número de elementos */
        animation: scroll 12s ease-in-out infinite; /* Duración ajustada */
    }
    .carousel-slide{
        width: 50%;
    }
    .carrusel {
      height: 70vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
}
@media (min-width: 1500px) {
    /* Estilos para pantallas de escritorio medianas */
    /* Ajuste del logo en la barra de navegación */
    .logo-nav {
        position: relative;
        width: 9%; /* Aumentamos ligeramente el tamaño del logo */
        margin-left: 5px; /* Disminuimos el margen para aprovechar mejor el espacio */
        z-index: 1;
        transition: transform 0.3s ease-in-out;
    }
    .navbar.scrolled {
        background-color: rgba(26, 26, 26, 0.8);
        padding: 5px 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .navbar.scrolled img{
      width: 5%;
    }
    .seccion-nosotros{
        padding-top: 20px;
    }
    .seccion-servicios{
        padding-top: 20px;
    }
    .seccion-galeria{
        padding-top: 20px;
        padding-bottom: 50px;
    }
    .seccion-contacto{
        padding-top: 20px;
    }
    /* Ajuste del carrusel */
    .carousel-item {
        height: 31vh;
    }
    @keyframes scroll {
        0% {
            transform: translateX(0); /* Posición inicial */
        }
        50% {
            transform: translateX(calc(-250px * (2.5 - 1))); /* N es el número total de elementos */
        }
        100% {
            transform: translateX(0); /* Regresar a la posición inicial */
        }
    }
    .slide-track {
        width: calc(250px * 7); /* Ajustar este valor según el número de elementos */
        animation: scroll 12s ease-in-out infinite; /* Duración ajustada */
    }
    .carousel-slide{
        width: 50%;
    }
    .carrusel {
      height: 70vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
}
@media (min-width: 1580px) {
    /* Estilos para pantallas de escritorio medianas */
    /* Ajuste del logo en la barra de navegación */
    .logo-nav {
        position: relative;
        width: 9%; /* Aumentamos ligeramente el tamaño del logo */
        margin-left: 5px; /* Disminuimos el margen para aprovechar mejor el espacio */
        z-index: 1;
        transition: transform 0.3s ease-in-out;
    }
    .navbar.scrolled {
        background-color: rgba(26, 26, 26, 0.8);
        padding: 5px 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .navbar.scrolled img{
      width: 5%;
    }
    .navbar {
        transition: all 0.3s ease;
        background-color: #1a1a1a;
        padding: 8px 2px;
    }
    .seccion-nosotros{
        padding-top: 20px;
    }
    .seccion-servicios{
        padding-top: 20px;
    }
    .seccion-galeria{
        padding-top: 20px;
        padding-bottom: 50px;
    }
    .seccion-contacto{
        padding-top: 20px;
    }
    /* Ajuste del carrusel */
    .carousel-item {
        height: 31vh;
    }
    @keyframes scroll {
        0% {
            transform: translateX(0); /* Posición inicial */
        }
        50% {
            transform: translateX(calc(-250px * (2 - 1))); /* N es el número total de elementos */
        }
        100% {
            transform: translateX(0); /* Regresar a la posición inicial */
        }
    }
    .slide-track {
        width: calc(250px * 7); /* Ajustar este valor según el número de elementos */
        animation: scroll 12s ease-in-out infinite; /* Duración ajustada */
    }
    .carousel-slide{
        width: 50%;
    }
    .carrusel {
      height: 70vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
}
@media (min-width: 1730px) {
    /* Estilos para pantallas de escritorio medianas */
    /* Ajuste del logo en la barra de navegación */
    .logo-nav {
        position: relative;
        width: 8%; /* Aumentamos ligeramente el tamaño del logo */
        margin-left: 5px; /* Disminuimos el margen para aprovechar mejor el espacio */
        z-index: 1;
        transition: transform 0.3s ease-in-out;
    }
    .navbar.scrolled {
        background-color: rgba(26, 26, 26, 0.8);
        padding: 5px 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .navbar.scrolled img{
      width: 5%;
    }
    .navbar {
        transition: all 0.3s ease;
        background-color: #1a1a1a;
        padding: 5px 2px;
    }
    .seccion-nosotros{
        padding-top: 20px;
    }
    .seccion-servicios{
        padding-top: 20px;
    }
    .seccion-galeria{
        padding-top: 20px;
        padding-bottom: 50px;
    }
    .seccion-contacto{
        padding-top: 20px;
    }
    /* Ajuste del carrusel */
    .carousel-item {
        height: 31vh;
    }
    @keyframes scroll {
        0% {
            transform: translateX(0); /* Posición inicial */
        }
        50% {
            transform: translateX(calc(-250px * (1.15 - 1))); /* N es el número total de elementos */
        }
        100% {
            transform: translateX(0); /* Regresar a la posición inicial */
        }
    }
    .slide-track {
        width: calc(250px * 7); /* Ajustar este valor según el número de elementos */
        animation: scroll 12s ease-in-out infinite; /* Duración ajustada */
    }
    .carousel-slide{
        width: 50%;
    }
    .carrusel {
      height: 70vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
}