/* =============================================
   Custom Styles
   ============================================= */

/* --- Font Faces --- */
@font-face {
  font-family: 'BasisGrotesque';
  src: url('../fonts/BasisGrotesque-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BasisGrotesque';
  src: url('../fonts/BasisGrotesque-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('../fonts/Figtree-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('../fonts/Figtree-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('../fonts/Figtree-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


.font-basis-bold {
  font-family: 'BasisGrotesque', sans-serif;
  font-weight: 700;
}

.font-basis {
  font-family: 'BasisGrotesque', sans-serif;
  font-weight: 400;
}

.font-figtree-light {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
}

.font-figtree {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
}

.font-figtree-semibold {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
}


.car-model-text {
  font-family: 'BasisGrotesque', sans-serif;
  font-weight: 900;
  font-size: clamp(100px, 28vw, 280px);
  color: rgba(230, 230, 230, 0.50);
  line-height: 0.85;
  user-select: none;
  pointer-events: none;
}


:root {
  --animate-duration: 0.4s;
}

.overlay-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.overlay-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.menu-option {
  transition: opacity 0.2s ease;
}

.menu-option:hover {
  opacity: 0.6;
}

.swiper-button-prev,
.swiper-button-next {
  color: #9ca3af !important;
  width: 30px !important;
  height: 30px !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 20px !important;
  font-weight: 700;
}

.gallery-swiper .swiper-slide {
  width: auto !important;
}

.gallery-swiper .swiper-slide img {
  height: 65vh;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .gallery-swiper .swiper-slide img {
    height: 45vh;
  }
}

.video-modal-bg {
  background: rgba(0, 0, 0, 0.95);
}

.cta-btn {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.section-content {
  transition: opacity 0.3s ease;
}

body.overlay-open {
  overflow: hidden;
}

/* --- Mobile: usar dvh para descontar barra del navegador --- */
@media (max-width: 767px) {
  body {
    min-height: 100dvh !important;
  }
}

/* --- Ajustes para viewports con poca altura (laptops pequeñas) --- */
@media (max-height: 750px) {
  #hero .mb-8 {
    margin-bottom: 1rem;
  }
  #hero .mb-4 {
    margin-bottom: 0.5rem;
  }
  #hero header {
    padding-top: 1rem;
  }
}