/* Variables principales */
:root {
  --primary: #1C0404;
  --secondary: #9633cc;
  --light: #ffffff;
  --dark: #343a40;
}

/* Reset básico */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: 'Inter', sans-serif;
  line-height: 1.15;
}

body,
html {
  font-family: 'Inter', Arial, sans-serif;
}

body {
  margin: 0;
  line-height: 1.5;
  color: #848484;
  background-color: #000 !important;
  /* fuerza el fondo negro */
  font-family: 'Inter', sans-serif;
  /* asegura que el body también la use */
}

/* Tipografía */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Alumni Sans SC', sans-serif;
  text-transform: uppercase;
  color: #262626;
  margin-top: 0;
}

/* Enlaces */
a {
  color: #fff;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #f2af13;
  
}


/* navbar */

/* Fondo y blur al hacer scroll */
.navbar-black-blur {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(2px);
}

/* Transiciones suaves */
.transition-bg {
  transition: background-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
}

/* Ocultar navbar */
.hide-navbar {
  transform: translateY(-100%);
}

/* Estilo links y redes */
.navbar .nav-link {
  color: #fff !important;
  transition: color 0.3s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: #f2af13 !important;
}

.navbar .fab {
  color: #fff;
  font-size: 1.3rem;
  transition: color 0.3s ease;
}

.navbar .fab:hover {
  color: #f2af13;
}

@media (min-width: 768px) {
  .navbar-nav {
    margin-left: 40px; /* Ajusta este valor según lo que veas necesario */
  }
}

/* Centrado del navbar */
.navbar-collapse {
    display: flex;
    justify-content: center;
}

.navbar-nav {
    margin-left: 0 !important; /* Elimina el margen que estaba descentrando */
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

/* Ajusta el contenedor de redes sociales */
.navbar .d-flex.align-items-center {
    margin-left: auto;
}

/* Asegura que en móviles también esté centrado */
@media (max-width: 767.98px) {
    .navbar-collapse {
        text-align: center;
    }
    
    .navbar-nav {
        justify-content: center;
        width: 100%;
    }
}

/* Carousel caption */
.carousel-caption {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Back to top */
.back-to-top {
  position: fixed;
  display: none;
  right: 30px;
  bottom: 30px;
  z-index: 11;
  animation: action 1s infinite alternate;
}

@keyframes action {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-15px);
  }
}

/* Testimonial */
.rock-testimonial {
  background: linear-gradient(120deg, #181c22 80%, #020102 100%);
  border-radius: 1.2rem 1.2rem 1.2rem 2.5rem;
  border-left: 6px solid #f2af1311;
  box-shadow: 0 8px 32px 0 #1a1a2a99, 0 0 0 4px #f2af1365 inset;
  margin: 0.5rem auto;
  max-width: 540px;
  padding: 2.1rem 2rem 1.6rem 2.4rem;
  position: relative;
  color: #fff;
  overflow: hidden;
  transition: box-shadow 0.3s;
  min-height: 320px;      /* Altura mínima para testimoniales cortos */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Distribuye header y body */
}

/* .rock-testimonial:hover {
  box-shadow: 0 16px 40px 0 #f2af13c5, 0 0 0 4px #9633cc99 inset;
} */

.rock-testimonial-header {
  display: flex;
  align-items: center;

  margin-bottom: 1.2rem;
}

.rock-name {
  font-family: 'Alumni Sans SC', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #f2af13;
  text-shadow: 0 2px 8px #000a;
  
}

.rock-role {
  font-size: 0.9rem;
  color: #b8c1ec;
  margin-left: auto;
  font-style: italic;
}

.rock-testimonial-body p {
  font-size: 1.15rem;
  font-family: 'Inter', Arial, sans-serif;
  color: #f6f6f6;
  margin: 0;
  line-height: 1.7;
  position: relative;
  padding-left: 1.2rem;
}

.rock-testimonial-body p:before {
  content: "“";
  color: #f2af1318;
  font-size: 2.5rem;
  position: absolute;
  left: -0.7rem;
  top: -0.7rem;
  font-family: serif;
  opacity: 0.7;
}

.rock-testimonial-body p:after {
  content: "”";
  color: #f2af1318;
  font-size: 2.5rem;
  position: absolute;
  right: -0.7rem;
  bottom: -0.7rem;
  font-family: serif;
  opacity: 0.7;
}

/* Contact form */
.contact-form .help-block ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

@media (max-width: 767.98px) {
  .contact-form {
    margin: 30px 0 45px 0;
  }
}

@media (min-width: 768px) {
  .contact-form {
    max-width: 700px;
    margin: -150px auto 15px auto;
    padding: 30px;
  }
}


/* Cards */
.custom-card {
  background: linear-gradient(135deg, #424242 0%, #2b2b2b 100%);
  border-radius: 1.25rem;
  box-shadow: 0 8px 32px 0 #f2af132c;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  transition: transform 0.3s cubic-bezier(.4, 0, .2, 1), box-shadow 0.3s cubic-bezier(.4, 0, .2, 1);
  border: none;
}

.custom-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 16px 40px 0 #f2af13c5;

}

.custom-card-img-wrapper {
  width: 100%;
  overflow: hidden;
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}

.custom-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.custom-card-content {
  flex: 1;
  padding: 1.5rem 1.25rem 1.25rem 1.25rem;
  background: rgba(0, 0, 0, 0.65);
  border-bottom-left-radius: 1.25rem;
  border-bottom-right-radius: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.custom-card-content h4 {
  color: #fff;
  font-family: 'Alumni Sans SC', sans-serif;
  font-size: 2rem;
  margin-bottom: 0;
}

.custom-card:hover .custom-card-content h4 {
  color: #f2af13 !important;
}

.custom-card-content p {
  color: #f6f6f6;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  text-align: justify;
}

.custom-card-content:hover .text-pack {
  color: #f2af13 !important;
}


/* Botones */
a.boton {
  display: inline-block;
  width: 15em;
  position: relative;
  height: 3.5em;
  line-height: 3.5em;
  text-align: center;
  text-decoration: none;
  border: 3px ridge #25D366;
  outline: none;
  background-color: transparent;
  color: white;
  transition: 1s;
  border-radius: 0.3em;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

a.boton::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: #000;
  transition: 0.5s;
  transform-origin: center;
}

a.boton::before {
  content: "";
  transform-origin: center;
  position: absolute;
  top: 80%;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: #000;
  transition: 0.5s;
}

a.boton:hover::before,
a.boton:hover::after {
  transform: scale(0);
}

a.boton:hover {
  box-shadow: inset 0px 0px 25px #25D366;
}

a.boton {
  display: inline-block;
  width: 15em;
  position: relative;
  height: 3.5em;
  line-height: 3.5em;
  text-align: center;
  text-decoration: none;
  border: 3px ridge #25D366;
  outline: none;
  background-color: transparent;
  color: white;
  transition: 1s;
  border-radius: 0.3em;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

a.boton::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: #000;
  transition: 0.5s;
  transform-origin: center;
}

a.boton::before {
  content: "";
  transform-origin: center;
  position: absolute;
  top: 80%;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: #000;
  transition: 0.5s;
}

a.boton:hover::before,
a.boton:hover::after {
  transform: scale(0);
}

a.boton:hover {
  box-shadow: inset 0px 0px 25px #25D366;
}


a.boton-contacto {
  display: inline-block;
  width: 15em;
  position: relative;
  height: 3.5em;
  line-height: 3.5em;
  text-align: center;
  text-decoration: none;
  border: 3px ridge #9633cc;
  outline: none;
  background-color: transparent;
  color: white;
  transition: 1s;
  border-radius: 0.3em;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

a.boton-contacto::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: #f2af13;
  transition: 0.5s;
  transform-origin: center;
}

a.boton-contacto::before {
  content: "";
  transform-origin: center;
  position: absolute;
  top: 80%;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: #f2af13;
  transition: 0.5s;
}

a.boton-contacto:hover::before,
a.boton-contacto:hover::after {
  transform: scale(0);
}

a.boton-contacto:hover {
  box-shadow: inset 0px 0px 25px #9633cc;
}

a.boton-contacto {
  display: inline-block;
  width: 15em;
  position: relative;
  height: 3.5em;
  line-height: 3.5em;
  text-align: center;
  text-decoration: none;
  border: 3px ridge #9633cc;
  outline: none;
  background-color: transparent;
  color: white;
  transition: 1s;
  border-radius: 0.3em;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

a.boton-contacto::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: #f2af13;
  transition: 0.5s;
  transform-origin: center;
}

a.boton-contacto::before {
  content: "";
  transform-origin: center;
  position: absolute;
  top: 80%;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: #f2af13;
  transition: 0.5s;
}

a.boton-contacto:hover::before,
a.boton-contacto:hover::after {
  transform: scale(0);
}

a.boton-contacto:hover {
  box-shadow: inset 0px 0px 25px #9633cc;
}




/* Fondo difuminado solo para el área del menú colapsado en móviles */
@media (max-width: 991.98px) {
  #mainNavbar .navbar-collapse.show {
    background: rgba(0, 0, 0, 0.425);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.322);
    border-radius: 0 0 1.5rem 1.5rem;
    backdrop-filter: blur(4px);
    transition: background 0.3s;
  }
  #mainNavbar .navbar-nav .nav-link {
    color: #fff !important;
  }
}

/* Cambia el color de las barras del botón hamburguesa */
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}


/* Formulario */
.contact-container {
    max-width: 700px;
    margin: 20px auto;
    background: #232837;
    border-radius: 1.2rem;
    box-shadow: 0 8px 32px 0 #1a1a2a55;
    padding: 2.5rem 2rem 2rem 2rem;
    text-align: center;
}
.logo-form {
    width: 80px;
    margin-bottom: 1rem;
}
h2 {
    color: #F79A20;
    margin-bottom: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
}
.form-group {
    margin-bottom: 1.2rem;
    text-align: left;
}
label {
    display: block;
    margin-bottom: 0.3rem;
    color: #b8c1ec;
    font-size: 1rem;
}
input, textarea {
    width: 100%;
    padding: 0.7rem;
    border-radius: 0.5rem;
    border: none;
    background: #373e49;
    color: #fff;
    font-size: 1rem;
    margin-bottom: 0.2rem;
    outline: none;
    transition: box-shadow 0.2s;
}
input:focus, textarea:focus {
    box-shadow: 0 0 0 2px #f2af13;
}

.btn-enviar{
  display: inline-block;
  width: 15em;
  position: relative;
  height: 3.5em;
  line-height: 3.5em;
  text-align: center;
  text-decoration: none;
  border: 3px ridge #9633cc;
  outline: none;
  background-color: transparent;
  color: rgb(255, 255, 255);
  transition: 1s;
  border-radius: 0.3em;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.btn-enviar::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: #000;
  transition: 0.5s;
  transform-origin: center;
}

.btn-enviar::before {
  content: "";
  transform-origin: center;
  position: absolute;
  top: 80%;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: #000;
  transition: 0.5s;
}

.btn-enviar:hover::before,
.btn-enviar:hover::after {
  transform: scale(0);
}

.btn-enviar:hover {
  box-shadow: inset 0px 0px 25px #9633cc;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0; width: 100vw; height: 100vh;
    background: rgba(20,24,34,0.85);
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-content {
    background: #000;
    color: #fff;
    border-radius: 1.2rem;
    padding: 2rem 2.5rem 1.5rem 2.5rem;
    text-align: center;
    box-shadow: 0 8px 32px 0 #1a1a2a99;
    position: relative;
    animation: modalPop 0.4s;
}
@keyframes modalPop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.modal-content.success { border: 2px solid #2ecc71; }
.modal-content.error { border: 2px solid #e74c3c; }
.modal-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.7rem;
}



/* Scrollbar personalizado para todo el sitio */
html::-webkit-scrollbar {
  width: 10px;
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background: linear-gradient(120deg, #f2af13 0%, #1e293b 100%);
  border-radius: 10px;
  border: 3px solid #181c22;
  box-shadow: 0 0 8px 2px #f2af1380;
  min-height: 40px;
  transition: background 0.3s, box-shadow 0.3s;
}

html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(120deg, #f2af13 0%, #6800a0 100%);
  box-shadow: 0 0 16px 4px #f2af1380;
}

html::-webkit-scrollbar-track {
  background: rgba(30,41,59,0.7);
  border-radius: 10px;
  margin: 8px 0;
  box-shadow: inset 0 0 6px #0008;
}

html::-webkit-scrollbar-corner {
  background: #181c22;
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #f2af13 #2328370e;
}


.plus {
  font-weight: bold;
  margin-left: 2px;
  font-size: 1em;
}


.card-horario:hover {
  transform: scale(1.02);
  transition: 0.3s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}