:root {
  --bg-light: #ffffff;
  --text-light: #000000;
  --bg-dark: #121212;
  --text-dark: #ffffff;
  --card-dark: #1e1e1e;
}

body.theme-light {
  --bg: var(--bg-light);
  --text: var(--text-light);
  --card-bg: #ffffff;
  --card-text: #000000;
  --navbar-bg: #343a40;
  --navbar-text: #ffffff;
}

body.theme-dark {
  --bg: var(--bg-dark);
  --text: var(--text-dark);
  --card-bg: var(--card-dark);
  --card-text: var(--text-dark);
  --navbar-bg: #000000;
  --navbar-text: #ffffff;
}

body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar, footer {
  background-color: var(--navbar-bg) !important;
  color: var(--navbar-text);
}


.titulo-seccion {
    font-size: xx-large;
    font-weight: 650;
	text-decoration-line: underline
}
/*.card-body {
  background-color: var(--card-bg);
  color: var(--card-text);
}
  */

/* Animaciones scroll */
.scroll-animate {
  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}
.scroll-animate.animate-left {
  transform: translateX(-30px); /* antes: -40px */
}

.scroll-animate.animate-right {
  transform: translateX(30px); /* antes: 40px */
}
.scroll-animate.visible { opacity: 1; transform: translateX(0); }

/* Imagen animaciones */
.consejo-img { transition: transform 0.5s ease-in-out; }
.consejo-card:hover .consejo-img { transform: scale(1.05) rotate(-2deg); }

.noticia-img { opacity: 0; transition: opacity 0.8s ease-in-out; }
.noticia-card.visible .noticia-img { opacity: 1; }

.negocio-img { filter: grayscale(100%); transition: filter 0.6s ease-in-out; }
.negocio-card.visible .negocio-img { filter: grayscale(0%); }

.hero {
  background: url('https://p4.wallpaperbetter.com/wallpaper/322/1022/388/ducati-vehicles-motorbikes-black-background-1920x1200-motorcycles-ducati-hd-art-wallpaper-preview.jpg') center/cover no-repeat;
  height: 90vh;
  position: relative;
display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(80, 0, 0, 0.9));
  z-index: 1;
}

.hero > div {
  position: relative;
  z-index: 2;
  text-align: center;
}





/* Soluciona desbordes en móviles */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Evita que tarjetas u otros elementos causen desbordes */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .scroll-animate.animate-left,
  .scroll-animate.animate-right {
    transform: none;
  }
}



.video-section {
  position: relative;
  overflow: hidden;
}

.video-section video {
  width: 100%;
  height: auto;
  display: block;
}

.video-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.content-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

.logo-slider-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  /* background-color: #fff;*/
}

.logo-slider-track {
  width: 100%;
}

.logo-slider {
  display: flex;
  gap: 40px;
  animation: scrollLogos 30s linear infinite;
  align-items: center;
  width: max-content;
}

.logo-slider img {
  height: 60px;
  width: auto;
  object-fit: contain;
  filter: brightness(1.2);
  transition: transform 0.3s ease;
}

.logo-slider img:hover {
  transform: scale(1.1);
}

@keyframes scrollLogos {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .logo-slider {
    gap: 20px;
  }

  .logo-slider img {
    height: 90px;
  }
}

@media (max-width: 768px) {
  .hero {
    height: 50vh;
  }
}
/* ----- Sección Slider de Frases ----- */

#slider-frases {
  min-height: 400px;
}

/* Estilo del contenedor del carousel */
.carousel-inner {
  height: 100%;
  position: relative;
}

/* Cada slide ocupa toda el área pero se oculta con opacity */
.carousel-item {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 5px;
}

/* Slide activo: visible */
.carousel-item.active,
.carousel-item-next.carousel-item-start,
.carousel-item-prev.carousel-item-end {
  position: relative;
  opacity: 1;
  z-index: 1;
}

/* Evita que se vean por un momento los anteriores */
.carousel-item-start,
.carousel-item-end {
  z-index: 0;
  opacity: 0;
  transition: none;
}

/* ----- Degradados personalizados por slide ----- */

.bg-slide-1 {
  background: linear-gradient(to bottom, #000000, #3f0d12);
}

.bg-slide-2 {
  background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364);
}

.bg-slide-3 {
  background: linear-gradient(to bottom, #2c3e50, #4ca1af);
}

.bg-slide-4 {
  background: linear-gradient(to bottom, #1e130c, #9a8478);
}

/* ----- Estética del texto ----- */

#slider-frases h3 {
  font-size: 2.5rem;
  max-width: 700px;
  font-weight: 400;
  padding: 0 15px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  color: #ffffff;
  text-align: center;
}

/* ----- Responsive para móviles ----- */

@media (max-width: 768px) {
  #slider-frases h3 {
    font-size: 2.3rem;
  }
}