body{
  font-family:'Rubik',sans-serif;
  scroll-behavior:smooth;
  opacity:0;
  transition:opacity 1s ease-in-out;
  margin:0;
  padding:0;
  overflow-x:hidden;
}

body.loaded{
  opacity:1;
}

/* =========================
   VARIABLES
========================= */

:root{
  --navbar-height:72px;
  --gold:#FFD700;
  --dark:#323232;
}

/* =========================
   NAVBAR
========================= */

.navbar{
  background:rgba(0,0,0,.85)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:.7rem 0;
}

.navbar-brand{
  margin-left:auto;
  margin-right:auto;
  display:block;
  text-align:center;
}

.navbar-brand img{
  height:3rem;
}

.navbar .nav-link{
  color:#fff!important;
  transition:.3s;
  font-weight:500;
}

.navbar .nav-link:hover{
  color:var(--gold)!important;
}

/* =========================
   HEADER
========================= */

.main-header{
  width:100%;
  padding-top:var(--navbar-height);
  background:#000;
  overflow:hidden;
  position:relative;
}

.main-header img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

/* Overlay cinematográfico opcional */

.main-header::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.25),
    rgba(0,0,0,.05),
    rgba(0,0,0,.25)
  );
  pointer-events:none;
}

/* =========================
   GENERAL
========================= */

header,
section{
  padding:3rem 0;
}

.btn-danger{
  background-color:var(--gold);
  border:none;
  color:#000;
  font-weight:700;
  transition:.3s;
}

.btn-danger:hover{
  transform:translateY(-2px);
  background:#ffdf32;
  color:#000;
}

.hero-header{
  padding-top:7rem;
}

.navbar .btn-danger{
  margin-left:1rem;
}

.form-control,
textarea{
  border-radius:.5rem;
}

footer p{
  margin:0;
}

/* =========================
   INFO BOX
========================= */

.info-box{
  padding:2rem;
  border-radius:1rem;
  background:#f8f9fa;
  margin-bottom:1.5rem;
  text-align:center;
  transition:transform .3s ease;
}

.info-box:hover{
  transform:scale(1.05);
}

.info-box i{
  font-size:2rem;
  color:var(--gold);
  margin-bottom:1rem;
}

form .form-control:focus,
textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 .2rem rgba(229,57,53,.25);
}

/* =========================
   BLUR BOX
========================= */

.blur-box{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(8px);
  border-radius:1rem;
  box-shadow:0 4px 15px rgba(0,0,0,.1);
  padding:1.5rem;
  margin-bottom:2rem;
  height:100%;
  display:flex;
  flex-direction:column;
}

.blur-box img{
  display:block;
  max-height:250px;
  width:auto;
  height:auto;
  object-fit:contain;
  margin:0 auto 1rem;
  border-radius:.5rem;
}

.blur-box h5{
  text-align:center;
  font-weight:bold;
}

/* =========================
   LISTAS
========================= */

.list-section i{
  color:var(--gold);
  margin-right:10px;
}

/* =========================
   DARK SECTION
========================= */

.bg-dark-section{
  background-color:var(--dark);
  color:#fff;
}

.bg-dark-section .list-section i{
  color:#fff;
}

/* =========================
   TABLAS
========================= */

.table-categorias{
  border-collapse:collapse;
  width:100%;
  font-size:1rem;
  background-color:#f0f0f0;
  margin:auto;
  text-align:center;
  box-shadow:0 4px 15px rgba(0,0,0,.2);
}

.table-categorias thead th{
  background:#000;
  color:#fff;
  text-align:center;
}

.table-categorias tbody tr:nth-child(odd){
  background:#f8f9fa;
}

.table-categorias tbody tr:nth-child(even){
  background:#606161;
  color:#fff;
}

.table-categorias tbody tr{
  transition:transform .2s ease-in-out;
  cursor:pointer;
}

.table-categorias tbody tr:hover{
  transform:scale(1.02);
  z-index:2;
  position:relative;
  box-shadow:0 4px 8px rgba(0,0,0,.15);
}

/* =========================
   TIMELINE
========================= */

.timeline{
  position:relative;
  max-width:1000px;
  margin:auto;
}

.timeline::after{
  content:'';
  position:absolute;
  width:6px;
  background-color:var(--gold);
  top:0;
  bottom:0;
  left:50%;
  margin-left:-3px;
}

.timeline-step{
  padding:10px 40px;
  position:relative;
  background-color:inherit;
  width:50%;
}

.timeline-step::after{
  content:"";
  position:absolute;
  width:25px;
  height:25px;
  right:-17px;
  background:white;
  border:4px solid var(--gold);
  top:15px;
  border-radius:50%;
  z-index:1;
}

.left{
  left:0;
}

.right{
  left:50%;
}

.left::before{
  content:" ";
  position:absolute;
  top:22px;
  right:30px;
  border:10px solid transparent;
  border-left-color:#333;
}

.right::before{
  content:" ";
  position:absolute;
  top:22px;
  left:30px;
  border:10px solid transparent;
  border-right-color:#333;
}

.timeline-content{
  padding:20px;
  background:#333;
  color:white;
  position:relative;
  border-radius:6px;
  transition:.3s;
}

.timeline-step:hover .timeline-content{
  background:var(--gold);
  color:#000;
  box-shadow:0 0 10px rgba(0,0,0,.2);
}

/* =========================
   IMAGENES
========================= */

.img-hover{
  transition:transform .3s ease;
}

.img-hover:hover{
  transform:scale(1.05);
}

.img-hotel{
  max-width:80%;
  height:auto;
  display:block;
  margin:20px auto;
  border-radius:8px;
}

/* =========================
   CAROUSEL
========================= */

.carousel-inner{
  aspect-ratio:16/9;
  position:relative;
  overflow:hidden;
}

.carousel-inner img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.carousel-caption{
  top:0;
  bottom:0;
  padding:0 2rem;
}

.carousel-img{
  height:100%;
  width:100%;
  object-fit:cover;
  filter:brightness(.4);
}

#grandParkCarousel .carousel-inner{
  aspect-ratio:16/9;
}

.carousel-caption h3,
.carousel-caption p{
  color:#fff;
}

/* =========================
   GALERIA
========================= */

.galeria-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:15px;
}

.galeria-grid img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  transition:transform .3s ease;
}

.galeria-grid img:hover{
  transform:scale(1.05);
}

/* =========================
   SPONSORS
========================= */

.sponsor-img{
  height:100px;
  max-width:180px;
  object-fit:contain;
  filter:grayscale(100%);
  transition:.3s;
}

.sponsor-img:hover{
  filter:none;
  transform:scale(1.05);
}

/* =========================
   ANIMACIONES
========================= */

@keyframes fadeIn{
  0%{
    opacity:0;
    transform:translateY(20px);
  }

  100%{
    opacity:1;
    transform:translateY(0);
  }
}

.fade-in{
  animation:fadeIn 1.2s ease-out both;
}

.fade-in-section{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s ease-out,transform .8s ease-out;
}

.fade-in-section.visible{
  opacity:1;
  transform:none;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:768px){

  :root{
    --navbar-height:64px;
  }

  .timeline::after{
    left:30px;
  }

  .timeline-step{
    width:100%;
    padding-left:70px;
    padding-right:25px;
    margin-bottom:30px;
  }

  .timeline-step::after{
    left:15px;
    right:auto;
  }

  .left,
  .right{
    left:0;
  }

  .left::before,
  .right::before{
    left:45px;
    border-left-color:#333;
    border-width:10px;
    top:22px;
  }

  .galeria-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .carousel-caption h3{
    font-size:1.2rem;
  }

  .carousel-caption p{
    font-size:.9rem;
  }

  .carousel-caption{
    padding:0 1rem;
  }

  .main-header img{
    width:100%;
    height:auto;
  }

}

@media (max-width:576px){

  .navbar-brand img{
    height:2.4rem;
  }

  .galeria-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .img-hotel{
    max-width:95%;
  }

  .tiktok-video-wrapper{
    width:220px;
    max-width:220px;
  }

  .tiktok-video-wrapper video{
    width:220px;
    max-width:220px;
    height:391px;
  }

}
  
  /* VIDEO SECTION */

.tiktok-video-section{
  background:#000;
  padding:30px 0;
  text-align:center;
}

/* CONTENEDOR */

.tiktok-video-wrapper{
  width:180px;
  margin:0 auto;
  overflow:hidden;
  border-radius:18px;
  background:#000;
  line-height:0;
}

/* VIDEO */

.tiktok-video-wrapper video{
  width:180px;
  height:320px;
  object-fit:cover;
  display:block;
}

}