/* ============================================
   COLORES PERSONALIZADOS - DRA. ESBEIDY
   Esquema multicolor inspirado en el logotipo
   ============================================ */

:root {
    /* Colores principales del logotipo */
    --color-naranja: #FF8B47;
    --color-rojo: #E74C3C;
    --color-azul: #4DB8E8;
    --color-verde: #A8D582;
    --color-morado: #9B59B6;
    --color-amarillo: #F9DC5C;
    
    /* Colores de apoyo */
    --color-naranja-claro: #FFB380;
    --color-azul-oscuro: #2980B9;
    --color-verde-claro: #C8E6A0;
    
    /* Tonos neutros */
    --color-blanco: #FFFFFF;
    --color-gris-claro: #F8F9FA;
    --color-gris: #6C757D;
    --color-oscuro: #343A40;
}

/* ============================================
   NAVBAR - Colores del menú principal
   ============================================ */

.navbar-dark {
    background: linear-gradient(135deg, var(--color-azul) 0%, var(--color-azul-oscuro) 100%) !important;
}

.navbar-brand h1 {
    color: var(--color-blanco) !important;
}

.navbar-brand i {
    color: var(--color-amarillo) !important;
}

.nav-link.active {
    color: var(--color-amarillo) !important;
}

.nav-link:hover {
    color: var(--color-naranja-claro) !important;
}

/* ============================================
   BOTONES PRINCIPALES
   ============================================ */

.btn-primary {
    background: linear-gradient(135deg, var(--color-naranja) 0%, var(--color-rojo) 100%) !important;
    border-color: var(--color-naranja) !important;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-rojo) 0%, var(--color-naranja) 100%) !important;
    border-color: var(--color-rojo) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
}

/* ============================================
   HEADER / HERO SECTION
   ============================================ */

.bg-primary {
    background: linear-gradient(135deg, var(--color-azul) 0%, var(--color-morado) 100%) !important;
}

.bg-header {
    background: linear-gradient(135deg, var(--color-azul) 0%, var(--color-verde) 100%) !important;
}

/* ============================================
   TEXTOS Y TÍTULOS
   ============================================ */

.text-primary {
    color: var(--color-azul) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-azul-oscuro) !important;
}

.section-title h5 {
    color: var(--color-naranja) !important;
}

.section-title h1 {
    color: var(--color-azul-oscuro) !important;
}

/* ============================================
   ICONOS Y ELEMENTOS DE SERVICIO
   ============================================ */

.service-icon {
    background: linear-gradient(135deg, var(--color-naranja) 0%, var(--color-rojo) 100%) !important;
}

/* Alternar colores de iconos de servicios */
.service-item:nth-child(1) .service-icon {
    background: linear-gradient(135deg, var(--color-naranja) 0%, var(--color-rojo) 100%) !important;
}

.service-item:nth-child(2) .service-icon {
    background: linear-gradient(135deg, var(--color-azul) 0%, var(--color-morado) 100%) !important;
}

.service-item:nth-child(3) .service-icon {
    background: linear-gradient(135deg, var(--color-verde) 0%, var(--color-azul) 100%) !important;
}

.service-item:nth-child(4) .service-icon {
    background: linear-gradient(135deg, var(--color-morado) 0%, var(--color-rojo) 100%) !important;
}

.service-item:nth-child(5) .service-icon {
    background: linear-gradient(135deg, var(--color-amarillo) 0%, var(--color-naranja) 100%) !important;
}

.service-item:nth-child(6) .service-icon {
    background: linear-gradient(135deg, var(--color-verde) 0%, var(--color-azul) 100%) !important;
}

/* ============================================
   FEATURES / CARACTERÍSTICAS
   ============================================ */

.col-lg-4:nth-child(1) .bg-primary {
    background: linear-gradient(135deg, var(--color-naranja) 0%, var(--color-rojo) 100%) !important;
}

.col-lg-4:nth-child(2) .bg-primary {
    background: linear-gradient(135deg, var(--color-azul) 0%, var(--color-morado) 100%) !important;
}

.col-lg-4:nth-child(3) .bg-primary {
    background: linear-gradient(135deg, var(--color-verde) 0%, var(--color-azul) 100%) !important;
}

.col-lg-4:nth-child(4) .bg-primary {
    background: linear-gradient(135deg, var(--color-morado) 0%, var(--color-rojo) 100%) !important;
}

/* ============================================
   ESTADÍSTICAS / FACTS
   ============================================ */

.facts .bg-primary {
    background: linear-gradient(135deg, var(--color-azul) 0%, var(--color-morado) 100%) !important;
}

.facts .bg-white {
    background: var(--color-blanco) !important;
}

.facts .text-primary {
    color: var(--color-naranja) !important;
}

.facts .fa-users {
    color: var(--color-azul) !important;
}

.facts .fa-check {
    color: var(--color-verde) !important;
}

.facts .fa-award {
    color: var(--color-amarillo) !important;
}

/* ============================================
   BOTONES DE ACCIÓN
   ============================================ */

.btn-lg-square {
    background: var(--color-naranja) !important;
    border-color: var(--color-naranja) !important;
}

.btn-lg-square:hover {
    background: var(--color-rojo) !important;
    border-color: var(--color-rojo) !important;
    transform: scale(1.1);
}

/* ============================================
   REDES SOCIALES
   ============================================ */

.btn-outline-light:hover {
    background: var(--color-naranja) !important;
    border-color: var(--color-naranja) !important;
}

.btn-square:nth-child(1) {
    background: var(--color-azul) !important;
}

.btn-square:nth-child(2) {
    background: var(--color-morado) !important;
}

.btn-square:nth-child(3) {
    background: var(--color-verde) !important;
}

.btn-square:nth-child(4) {
    background: var(--color-naranja) !important;
}

/* ============================================
   FOOTER
   ============================================ */

.footer-about .bg-primary {
    background: linear-gradient(135deg, var(--color-azul) 0%, var(--color-morado) 100%) !important;
}

.footer .text-primary {
    color: var(--color-amarillo) !important;
}

.footer .bi-geo-alt,
.footer .bi-envelope-open,
.footer .bi-telephone,
.footer .bi-clock {
    color: var(--color-naranja) !important;
}

.footer .bi-arrow-right {
    color: var(--color-amarillo) !important;
}

/* ============================================
   FORMULARIOS
   ============================================ */

.form-control:focus {
    border-color: var(--color-azul) !important;
    box-shadow: 0 0 0 0.2rem rgba(77, 184, 232, 0.25) !important;
}

.btn-dark {
    background: linear-gradient(135deg, var(--color-azul-oscuro) 0%, var(--color-morado) 100%) !important;
    border: none !important;
}

.btn-dark:hover {
    background: linear-gradient(135deg, var(--color-morado) 0%, var(--color-azul-oscuro) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(41, 128, 185, 0.3);
}

/* ============================================
   TESTIMONIOS
   ============================================ */

.testimonial-item {
    border-left: 3px solid var(--color-naranja) !important;
}

.testimonial-item:hover {
    border-left-color: var(--color-azul) !important;
    box-shadow: 0 5px 20px rgba(77, 184, 232, 0.2);
}

/* ============================================
   CHECKS Y ELEMENTOS DECORATIVOS
   ============================================ */

.fa-check {
    color: var(--color-verde) !important;
}

.fa-phone-alt {
    color: var(--color-naranja) !important;
}

.fa-envelope-open {
    color: var(--color-azul) !important;
}

.fa-map-marker-alt {
    color: var(--color-rojo) !important;
}

/* ============================================
   EFECTOS HOVER GENERALES
   ============================================ */

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(77, 184, 232, 0.2);
}

.team-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 139, 71, 0.2);
}

/* ============================================
   ELEMENTOS ANIMADOS
   ============================================ */

.bg-light {
    background: linear-gradient(135deg, #FFFFFF 0%, var(--color-gris-claro) 100%) !important;
}

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

.carousel-caption h5 {
    color: var(--color-amarillo) !important;
}

.carousel-caption h1 {
    color: var(--color-blanco) !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* ============================================
   TOPBAR
   ============================================ */

.bg-dark {
    background: linear-gradient(135deg, var(--color-azul-oscuro) 0%, var(--color-oscuro) 100%) !important;
}

.topbar .text-light:hover {
    color: var(--color-amarillo) !important;
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */

.back-to-top {
    background: linear-gradient(135deg, var(--color-naranja) 0%, var(--color-rojo) 100%) !important;
    border: none !important;
}

.back-to-top:hover {
    background: linear-gradient(135deg, var(--color-rojo) 0%, var(--color-naranja) 100%) !important;
    transform: translateY(-3px);
}

/* ============================================
   ELEMENTOS ESPECIALES - PHONE BOX
   ============================================ */

.d-flex .bg-primary.rounded {
    background: linear-gradient(135deg, var(--color-azul) 0%, var(--color-morado) 100%) !important;
}

/* ============================================
   RESPONSIVE - Ajustes para móviles
   ============================================ */

@media (max-width: 768px) {
    .navbar-brand h1 {
        font-size: 1.5rem !important;
    }
    
    .service-icon {
        width: 50px !important;
        height: 50px !important;
    }
}

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

@keyframes rainbow {
    0% { border-color: var(--color-naranja); }
    25% { border-color: var(--color-azul); }
    50% { border-color: var(--color-verde); }
    75% { border-color: var(--color-morado); }
    100% { border-color: var(--color-naranja); }
}

.service-item:hover .service-icon {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================
   BORDER DECORATIVOS
   ============================================ */

.border-bottom {
    border-bottom-color: var(--color-amarillo) !important;
}

.border-white {
    border-color: var(--color-blanco) !important;
}

/* ============================================
   SOMBRAS COLORIDAS
   ============================================ */

.shadow {
    box-shadow: 0 0.5rem 1rem rgba(77, 184, 232, 0.15) !important;
}

/* ============================================
   FIN DE ESTILOS PERSONALIZADOS
   ============================================ */