:root {
    --primary-color: #DB2B23; /* Tu color rojo personalizado */
    --dark-bg: #121212;
    --dark-section-bg: #1c1c1c;
    --text-color: #f0f0f0;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-color);
    overflow-x: hidden;
    
}


/* Estado inicial: invisible y desplazado a la izquierda */
.fade-slide-left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: transform, opacity;
}

/* Estado inicial: invisible y desplazado a la derecha */
.fade-slide-right {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: transform, opacity;
}

/* Cuando queremos mostrar el elemento, removemos la traslación y ponemos opacidad 1 */
.fade-slide-left.visible,
.fade-slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}


html {
  overflow: auto;
}

/* Header y Navegación */
.navbar {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(5px);
    transition: background-color 0.3s ease-in-out;
}

.navbar-brand .logo {
    height: 55px;
}

.navbar .nav-link {
    color: var(--dark-bg);
    font-weight: 700;
    transition: color 0.3s;
}

.navbar .nav-link:hover, .navbar .nav-link.active {
    color: var(--primary-color);
}


.navbar-dark, .navbar[data-bs-theme="dark"] {
  --bs-navbar-active-color: var(--primary-color);
}

.dropdown-menu {
    background-color: rgba(255, 255, 255, 0.97);
    border: none;
}

.dropdown-item {
    transition: background-color 0.3s;
    color: var(--dark-bg);
}

.dropdown-item.active {
    background-color: var(--primary-color);
}

.dropdown-item:hover {
    background-color: var(--primary-color);
}

/* Estilo personalizado para el botón hamburguesa */
.navbar-toggler {
    border: 2px solid #1212120d;
    transition: box-shadow 0.2s ease-in-out;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(219, 43, 35, 0.25); /* Sombra al hacer foco */
}

.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(219, 43, 35, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Estilo para el menú desplegable en dos columnas (solo en desktop) */
@media (min-width: 992px) {
    .dropdown-menu.show {
        display: grid; /* Usamos Grid para una mejor organización */
        grid-template-columns: repeat(2, 1fr); /* Crea 2 columnas de igual tamaño */
        gap: 0; /* Elimina el espacio entre los elementos */
        max-height: 400px;
        margin-left: -5rem;
    }

    .dropdown-menu .dropdown-item {
        white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    }
}

/* Sección de Inicio / Banner */
.hero-banner {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.85)), url('Frente_taller_IA.png') no-repeat center center/cover;
    position: relative;
}

.hero-banner h1 {
    font-size: 4rem;
    font-weight: 700;
    text-transform: uppercase;
}

.hero-banner .lead {
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 2px;
}

.lead-text {
    font-size: 1.1rem;
}

.hero-banner .slogan {
    font-size: 1.2rem;
    font-weight: 600;
    color: #FFF;
    text-transform: uppercase;
    animation: pulse 2s infinite;
    text-shadow: 0px 0px 10px #f00;
    letter-spacing: 2px;
}

.btn-danger {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 700;
    transition: transform 0.3s;
}

.btn-danger:hover {
    background-color: #ff3333;
    border-color: #ff3333;
    transform: scale(1.05);
}

/* Animación para el slogan */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Clases de WOW.js para animaciones */
.wow {
    visibility: hidden;
}


/* Sección Nuestra Empresa */
.bg-dark-section {
    background-color: var(--dark-section-bg);
}

.bg-dark-card {
    background-color: #242424;
    color: var(--text-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease-in-out;
}

.bg-dark-card:hover {
    transform: translateY(-10px);
}

.card-body i {
    color: var(--primary-color) !important;
}

/* Estilo para la imagen de la sección "Nuestra Empresa" */
.section-empresa-img {
    transition: transform 0.5s ease-in-out; /* Suaviza la transición para la rotación y el zoom */
}

.section-empresa-img:hover {
    transform: scale(1.05) rotate(1deg); /* Aumenta el tamaño un 5% y rota 1 grado */
}

/* Frase Destacada de Experiencia */
.experience-bar {
    background-color: var(--primary-color);
}

.experience-bar h3 {
    font-size: 1.9rem;
}

/* Media Queries para Responsive Design */
@media (max-width: 768px) {
    .experience-bar h3 {
        font-size: 1.5rem;
    }
}


/* Animación de resaltado para el número del contador */
@keyframes highlight-number {
  /* Estado intermedio: el momento de máximo efecto */
  50% {
    transform: scale(1.5); /* Aumenta el tamaño un 50% */
    color: #FAC015;       /* Cambia el color a un dorado brillante */
  }
  /* Estado final: vuelve a la normalidad */
  100% {
    transform: scale(1);
    color: inherit; /* Hereda el color original (blanco) */
  }
}

/* Clase que usaremos para activar la animación */
.animate-highlight {
  display: inline-block; /* Necesario para que la transformación de escala funcione correctamente */
  animation: highlight-number 0.8s ease-in-out; /* Aplica la animación durante 0.8 segundos */
}


/* Sección ¿Dónde Estamos? */
.card-body .fas {
    color: var(--primary-color);
}

/* Altura por defecto (aplica a mobile) */
.map-container {
    height: 40vh !important; /* Usa el 40% de la altura de la pantalla en móviles */
    width: 100%;
}

/* Estilo para pantallas de 992px o más (desktop) */
@media (min-width: 992px) {
    .map-container {
        height: 100% !important; /* El mapa ocupa el 100% de la altura de su columna */
    }
}


/* Sección de Categorías */
.category-card {
    background-color: #242424;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    color: var(--text-color); /* Soluciona el problema de visibilidad del texto */
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
}

.category-card-link {
    text-decoration: none;
    color: inherit;
}

.category-card-link:hover .card-title {
    color: var(--primary-color);
}

.category-card .card-img-top {
    height: 200px; /* Ajusta este valor si necesitas más altura */
    object-fit: cover;
    width: 100%;
}

/* Efecto de resaltado temporal */
.category-card.highlight {
    box-shadow: 0 0 50px var(--primary-color) !important;
    transition: box-shadow 0.6s ease-in-out !important;
}

@keyframes highlightFade {
    0% {
        box-shadow: 0 0 50px var(--primary-color) !important;
    }
    100% {
        box-shadow: none !important;
    }
}



/* Sección de Servicios */

#servicios {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.70)), url('mecanico.png') no-repeat center center/cover;
}

.service-card {
    background-color: #1d1d1d;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    color: var(--text-color); /* Soluciona el problema de visibilidad del texto */
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
}

.service-card .card-body i {
    color: var(--primary-color);
}

.cta-bar {
    background-color: #1d1d1d;
    color: var(--text-color);
    box-shadow: 0 0px 10px rgba(230, 0, 0, 0.69) !important;
}

/* Colores de los iconos de la imagen de referencia */
.service-card .fa-tools { color: #007bff; } /* Azul */
.service-card .fa-balance-scale { color: #dc3545; } /* Rojo */
.service-card .fa-cogs { color: #6f42c1; } /* Púrpura */
.service-card .fa-wrench { color: #28a745; } /* Verde */
.service-card .fa-box { color: #fd7e14; } /* Naranja */

/* Botón de WhatsApp */
.btn-success {
    background-color: #25d366;
    border-color: #25d366;
}

.btn-success:hover {
    background-color: #128c7e;
    border-color: #128c7e;
}

/* Nuevo color de fondo para la sección de servicios */
.bg-dark-services {
    background-color: #101010;
}

/* Solución para igualar la altura de las tarjetas y la imagen */
@media (min-width: 992px) {
    #servicios .row.g-5 .col-lg-6:first-child {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #servicios .row.g-5 .col-lg-6:first-child img {
        height: 100%;
        max-height: 480px; /* Ajusta esta altura si es necesario para el tamaño de tu imagen */
        object-fit: cover;
    }

    #servicios .row.g-5 .col-lg-6:nth-child(2) {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #servicios .service-card {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}


/* Sección de Contacto */
#contacto .form-control {
    background-color: #242424;
    border: 1px solid #444;
    color: var(--text-color);
}

#contacto .form-control:focus {
    background-color: #242424;
    color: var(--text-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(230, 0, 0, 0.25);
}

#contacto .form-control::placeholder {
    color: #888;
}

.hidden {
    display: none !important;
}

.phone-link {
    color: inherit; /* Hereda el color del texto (blanco/gris) */
    text-decoration: none; /* Elimina el subrayado */
    transition: color 0.3s;
}

.phone-link:hover {
    color: var(--primary-color); /* Cambia al color primario al pasar el mouse */
    text-decoration: underline;
}

/* Modal */
.modal-content.bg-dark-card {
    background-color: #242424;
}

.modal-header .btn-close {
    filter: invert(1);
}


/* Footer */
footer {
    background-color: #101010 !important; /* Asegura el color de fondo */
    color: #f0f0f0; /* Color general del texto */
}

.footer-logo {
    height: 70px;
}

.footer-link {
    color: #f0f0f0;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.footer-link:hover {
    color: var(--primary-color);
}

.social-icon {
    color: #f0f0f0; /* Color de los íconos de redes sociales */
    transition: color 0.3s ease-in-out;
}

.social-icon:hover {
    color: var(--primary-color);
}

/* Estilo del menú para la vista móvil cuando está abierto */
@media (max-width: 991.98px) {
    /* Contenedor principal del menú */
    .navbar-collapse {
        padding: 1rem 0;
        /* APLICAMOS EL SCROLL Y ALTURA MÁXIMA AQUÍ */
        max-height: 85vh; /* Ej: 85% de la altura de la pantalla */
        overflow-y: auto; /* 'auto' es mejor que 'scroll' para que la barra solo aparezca si es necesaria */
    }

    .navbar-collapse .nav-link {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #DB2B2336;
    }

    /* Submenú de categorías */
    .navbar-collapse .dropdown-menu {
        position: static;
        background-color: transparent;
        border: none;
    }

    .navbar-collapse .dropdown-item {
        padding: 0.7rem 2rem;
    }
}

/* Media query para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
    .hero-banner h1 {
        font-size: 2.5rem; /* Tamaño de fuente más pequeño para móviles */
    }
    .hero-banner .lead {
        font-size: 1.2rem;
    }
    .hero-banner .slogan {
        font-size: 1rem;
    }
}

@media (max-width: 991.98px) {
    .dropdown-menu.dropdown-menu-dark {
        max-height: 70vh; /* Set the maximum height to 70% of the viewport height */
        overflow-y: scroll; /* Enable vertical scrolling */
    }
}



/*btn wsp*/

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #DB2B23B2;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 999;
}

.whatsapp-float img {
  width: 35px;
  height: 35px;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0,0,0,0.4);
  background-color: var(--primary-color);
}

@media (max-width: 768px) {
  .whatsapp-float {
    width: 70px;
    height: 70px;
  }
  .whatsapp-float img {
    width: 40px;
    height: 40px;
  }
}