/* ================= VARIABLES DE COLOR ================= */
:root {
    /* Color base para Navbar y Footer */
    --theme-bg: #0c1018; 
    --theme-text: #ffffff;
    
    /* Colores para botones y acentos */
    --accent-color: #b10c0c; 
    --accent-hover: #810808; 
    --accent-text: #ffffff;
}

/* ================= GENERAL ================= */
html {
    scroll-behavior: smooth; /* Desplazamiento suave nativo */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 60px; /* Compensa la nav fija */
}

/* ================= NAVBAR Y FOOTER ================= */
.theme-bar {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text) !important;
}

.nav-logo {
    max-height: 40px; /* Limita la altura del logo */
    width: auto;
    object-fit: contain;
}

.nav-left, .nav-center, .nav-right {
    flex: 1;
}

.nav-center {
    display: flex;
    justify-content: center;
}

.nav-right {
    display: flex;
    justify-content: flex-end;
}

/* ================= BOTONES PERSONALIZADOS ================= */
.custom-btn {
    background-color: var(--accent-color);
    color: var(--accent-text);
    border: none;
    padding: 10px 24px;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.custom-btn:hover {
    background-color: var(--accent-hover);
    color: var(--accent-text);
    transform: translateY(-2px); /* Pequeño salto al hacer hover */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ================= BOTONES OVALADOS (HERO Y CTA) ================= */
/* Apuntamos solo a los botones dentro del carrusel principal y la sección de contacto */
.hero-section .custom-btn,
.cta-section .custom-btn {
    border-radius: 50px; /* Esto es lo que redondea las esquinas hasta crear un óvalo perfecto */
    padding: 12px 36px; /* Aumentamos el espacio interno horizontal para que el óvalo se vea proporcionado y elegante */
}

/* ================= OFFCANVAS (MENÚ LATERAL) ================= */
.custom-submenu a {
    color: #cbd5e1;
    text-decoration: none;
    display: block;
    padding: 8px 0;
    transition: color 0.3s ease;
}

.custom-submenu a:hover {
    color: var(--accent-color);
    padding-left: 5px; /* Efecto sutil de indentación */
}

/* ================= HERO CAROUSEL ================= */
.hero-section {
    height: calc(100vh - 60px); /* Ocupa la pantalla completa menos la nav */
    width: 100%;
}

.bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.carousel-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6); /* Oscurece la imagen para leer el texto */
}

.hero-arrow {
    width: 5%;
}

/* ================= CAROUSEL SERVICIOS ================= */
.custom-carousel-container {
    position: relative;
    overflow: hidden;
}

.service-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

/* 1. Ajuste de las flechas y corrección del clic "congelado" */
.service-arrow {
    width: 3%; /* Reducimos un poco el ancho para que no invada el texto */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Esto evita que Bootstrap deje la flecha visible después de hacerle clic */
.service-arrow:focus {
    opacity: 0; 
}

.service-arrow i {
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

/* La flecha solo aparece si el cursor está sobre TODO el contenedor blanco */
.custom-carousel-container:hover .service-arrow {
    opacity: 0.7; 
}

.custom-carousel-container:hover .service-arrow:hover {
    opacity: 1 !important;
}

/* 2. Separar el texto de la flecha derecha */
/* Apuntamos directamente a la columna que contiene el texto sin tocar el HTML */
.carousel-item .col-md-6:last-child {
    padding-right: 4rem !important; /* Crea un margen interno derecho más grande */
}

/* 3. Ocultar flechas en móvil para navegar deslizando (swipe) */
@media (max-width: 767px) {
    .service-arrow {
        display: none !important; /* Desaparecen en pantallas pequeñas */
    }
    
    /* Devolvemos el espacio del texto a la normalidad en móvil para aprovechar la pantalla */
    .carousel-item .col-md-6:last-child {
        padding-right: 1.5rem !important; 
    }
}

/* Puntos indicadores estéticos */
.custom-indicators {
    bottom: -15px;
}
.custom-indicators button {
    background-color: #94a3b8 !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    margin: 0 5px !important;
}
.custom-indicators button.active {
    background-color: var(--accent-color) !important;
    transform: scale(1.2);
}

/* ================= CTA Y FOOTER ================= */
.cta-section {
    background-color: var(--theme-bg);
    background-image: linear-gradient(135deg, var(--theme-bg) 0%, #1e293b 100%);
    border-bottom: 2px solid var(--accent-color);
}

.social-icons a i {
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-icons a:hover i {
    transform: scale(1.2); /* Efecto en iconos de redes */
    color: var(--accent-color);
}

.phone-link {
    transition: color 0.3s;
}
.phone-link:hover {
    color: var(--accent-color) !important;
}

.bottom-footer small {
    color: #9ca3af;
}

/* ================= JUSTIFICADO DE TEXTOS ESPECÍFICOS ================= */
/* Apuntamos solo a los párrafos dentro del carrusel de servicios y la sección sobre nosotros */
#servicesCarousel p.text-muted,
#sobre-nosotros p.text-muted {
    text-align: justify;
}

/* ================= NAVBAR NO FIJA EN MÓVILES ================= */
@media (max-width: 767px) {
    /* Cambiamos la posición de fija a absoluta para que se quede en la parte superior del documento y desaparezca al bajar */
    .navbar.fixed-top {
        position: absolute !important;
    }
}

/* ================= NUESTROS CLIENTES ================= */
.client-logo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    height: 120px; /* Altura uniforme para todos los logos */
    border-radius: 12px;
    opacity: 0.5; /* Transparentes por defecto */
    filter: grayscale(100%); /* Efecto gris profesional */
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Efecto al pasar el cursor (hover) */
.client-logo-btn:hover {
    opacity: 1;
    filter: grayscale(0%); /* Vuelve a su color original */
    background-color: rgba(0, 0, 0, 0.04); /* Fondo ligeramente oscurecido */
    transform: translateY(-5px); /* Pequeño salto hacia arriba */
}

.client-logo-img {
    max-height: 70px; /* Evita que logos muy grandes rompan el diseño */
    max-width: 100%;
    object-fit: contain;
}

/* ================= CARRUSEL DE CLIENTES PC ================= */
.clientes-pc-track {
    display: flex;
    overflow-x: hidden; /* Oculta los logos extra y la barra de desplazamiento */
    scroll-behavior: smooth; /* Hace que el deslizamiento sea suave */
    width: 100%;
}

.cliente-item {
    flex: 0 0 33.3333%; /* Obliga a que cada logo ocupe exactamente 1/3 de la pantalla (3 a la vez) */
    padding: 0 15px; /* Mantiene la separación entre botones */
}

/* Ajuste de flechas de PC (Ocultas por defecto) */
.client-arrow-pc {
    width: 5%;
    opacity: 0; /* Invisibles hasta que pases el cursor por la sección */
    cursor: pointer;
    transition: opacity 0.3s ease;
    border: none;
    background: transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}
/* Esto evita que la flecha se quede "congelada" y visible después de hacerle clic */
.client-arrow-pc:focus {
    opacity: 0; 
}
/* Solo se revelan cuando el cursor entra en la caja del carrusel */
.d-none.d-md-block.position-relative:hover .client-arrow-pc {
    opacity: 0.5;
}

/* Se oscurecen más cuando pones el cursor directamente sobre la flecha */
.d-none.d-md-block.position-relative:hover .client-arrow-pc:hover {
    opacity: 1;
}

/* Posicionamiento para que no se muevan de los extremos */
.client-arrow-pc.carousel-control-prev { left: 0; }
.client-arrow-pc.carousel-control-next { right: 0; }

/* Ajuste de los puntos en móvil para que no se peguen a la caja */
.clients-indicators {
    bottom: -30px;
}