/* ============================================================================= 
Tempranitos Color Palette - Based on Logo Colors
============================================================================= */

:root {
    /* Colores principales del logo */
    --tempranitos-turquoise: #00b4d8;    /* Azul turquesa del reloj */
    --tempranitos-orange: #ff9e00;        /* Naranja del logo */
    --tempranitos-yellow: #ffd23f;        /* Amarillo del logo */
    --tempranitos-sky-blue: #4cc9f0;      /* Azul cielo del logo */
    --tempranitos-green: #06d6a0;         /* Verde del logo */
    
    /* Colores secundarios */
    --tempranitos-dark: #2b2d42;          /* Texto oscuro */
    --tempranitos-light: #f8f9fa;         /* Fondo claro */
    --tempranitos-white: #ffffff;         /* Blanco */
    --tempranitos-gray: #6c757d;          /* Gris texto */
    
               /* Gradientes */
           --tempranitos-gradient-primary: linear-gradient(135deg, var(--tempranitos-turquoise) 0%, var(--tempranitos-sky-blue) 50%, var(--tempranitos-green) 100%);
           --tempranitos-gradient-secondary: linear-gradient(135deg, var(--tempranitos-orange) 0%, var(--tempranitos-yellow) 100%);
           --tempranitos-gradient-accent: linear-gradient(135deg, var(--tempranitos-green) 0%, var(--tempranitos-turquoise) 50%, var(--tempranitos-sky-blue) 100%);
           --tempranitos-gradient-warm: linear-gradient(135deg, var(--tempranitos-orange) 0%, var(--tempranitos-yellow) 50%, var(--tempranitos-green) 100%);
           --tempranitos-gradient-cool: linear-gradient(135deg, var(--tempranitos-turquoise) 0%, var(--tempranitos-sky-blue) 100%);
}

/* ============================================================================= 
Aplicación de colores a elementos específicos
============================================================================= */

/* Botones principales */
.btn-primary, .theme-btn {
    background-color: var(--tempranitos-turquoise) !important;
    border-color: var(--tempranitos-turquoise) !important;
    color: var(--tempranitos-white) !important;
}

.btn-primary:hover, .theme-btn:hover {
    background-color: var(--tempranitos-sky-blue) !important;
    border-color: var(--tempranitos-sky-blue) !important;
}

/* Botones secundarios */
.btn-secondary, .theme-btn-sec {
    color: var(--tempranitos-turquoise) !important;
    background: rgba(0, 180, 216, 0.07) !important;
    border-color: var(--tempranitos-turquoise) !important;
}

.btn-secondary:hover, .theme-btn-sec:hover {
    background: var(--tempranitos-gradient-primary) !important;
    color: var(--tempranitos-white) !important;
}

/* Enlaces */
a {
    color: var(--tempranitos-turquoise);
}

a:hover {
    color: var(--tempranitos-sky-blue);
}

/* Formularios */
.form-control:focus {
    border-color: var(--tempranitos-turquoise) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 180, 216, 0.25) !important;
}

/* Navegación */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--tempranitos-turquoise) !important;
}

/* Paginación */
.page-item.active .page-link {
    background: var(--tempranitos-gradient-primary) !important;
    border-color: var(--tempranitos-turquoise) !important;
}

.page-item .page-link:hover {
    color: var(--tempranitos-turquoise) !important;
    background: rgba(0, 180, 216, 0.07) !important;
}

/* Iconos de características - Estilo limpio y centrado */
.feature-icon {
    background: transparent !important;
    color: var(--tempranitos-turquoise) !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 48px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 20px auto !important;
}

.feature-icon.icon-1 { 
    color: var(--tempranitos-turquoise) !important; 
}
.feature-icon.icon-2 { 
    color: var(--tempranitos-orange) !important; 
}
.feature-icon.icon-3 { 
    color: var(--tempranitos-yellow) !important; 
}
.feature-icon.icon-4 { 
    color: var(--tempranitos-sky-blue) !important; 
}
.feature-icon.icon-5 { 
    color: var(--tempranitos-green) !important; 
}
.feature-icon.icon-6 { 
    color: var(--tempranitos-turquoise) !important; 
}

/* Footer */
.footer-social-links a:hover {
    color: var(--tempranitos-turquoise) !important;
    background: var(--tempranitos-white) !important;
}

/* Back to top */
#back-to-top .top {
    background-color: var(--tempranitos-turquoise) !important;
    color: var(--tempranitos-white) !important;
}

#back-to-top .top:hover {
    background-color: var(--tempranitos-sky-blue) !important;
}

/* Carousel dots */
.owl-dot.active span {
    background: var(--tempranitos-turquoise) !important;
}

/* Carousel navigation */
.owl-nav .owl-prev, .owl-nav .owl-next {
    color: var(--tempranitos-turquoise) !important;
    background: rgba(0, 180, 216, 0.07) !important;
}

.owl-nav .owl-prev:hover, .owl-nav .owl-next:hover {
    background: var(--tempranitos-gradient-primary) !important;
    color: var(--tempranitos-white) !important;
}

/* FAQ Accordion */
.accordion .card button:hover,
.accordion .card button:focus {
    color: var(--tempranitos-turquoise) !important;
}

/* Contact form */
.contact-form button {
    background: var(--tempranitos-gradient-primary) !important;
    color: var(--tempranitos-white) !important;
}

/* Newsletter form */
.newsletter-form button {
    background: var(--tempranitos-gradient-primary) !important;
    color: var(--tempranitos-white) !important;
}

/* List items with checkmarks */
ul.list-checked li i {
    color: var(--tempranitos-turquoise) !important;
    background: rgba(0, 180, 216, 0.07) !important;
}

/* Text highlights */
.text-primary {
    color: var(--tempranitos-turquoise) !important;
}

.bg-primary {
    background-color: var(--tempranitos-turquoise) !important;
}

       /* Gradients for backgrounds */
       .bg-gradient-primary {
           background: var(--tempranitos-gradient-primary) !important;
       }

       .bg-gradient-secondary {
           background: var(--tempranitos-gradient-secondary) !important;
       }

       .bg-gradient-accent {
           background: var(--tempranitos-gradient-accent) !important;
       }

       .bg-gradient-warm {
           background: var(--tempranitos-gradient-warm) !important;
       }

       .bg-gradient-cool {
           background: var(--tempranitos-gradient-cool) !important;
       }

       /* Aplicación de degradados a elementos específicos */
       .hero-section {
           background: var(--tempranitos-gradient-primary) !important;
       }

       .feature-section {
           background: linear-gradient(135deg, rgba(248, 249, 250, 0.9) 0%, rgba(255, 255, 255, 1) 100%) !important;
       }

       .cta-section {
           background: var(--tempranitos-gradient-warm) !important;
       }

       .footer {
           background: var(--tempranitos-gradient-cool) !important;
       }

       /* Mejoras adicionales para los degradados */
       .bg-gradient-primary {
           position: relative;
           overflow: hidden;
       }

       .bg-gradient-primary::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: var(--tempranitos-gradient-primary);
           opacity: 0.9;
           z-index: -1;
       }

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

       .cta-section::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: var(--tempranitos-gradient-warm);
           opacity: 0.8;
           z-index: -1;
       }

       .footer {
           position: relative;
           overflow: hidden;
       }

       .footer::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: var(--tempranitos-gradient-cool);
           opacity: 0.9;
           z-index: -1;
       }

       /* Ajustes de legibilidad para texto sobre degradados */
       .bg-gradient-primary h1,
       .bg-gradient-primary h2,
       .bg-gradient-primary h3,
       .bg-gradient-primary h4,
       .bg-gradient-primary h5,
       .bg-gradient-primary h6 {
           color: var(--tempranitos-white) !important;
           font-weight: 700 !important;
       }

       .bg-gradient-primary p {
           color: var(--tempranitos-white) !important;
           font-weight: 500 !important;
       }

       .cta-section h1,
       .cta-section h2,
       .cta-section h3,
       .cta-section h4,
       .cta-section h5,
       .cta-section h6 {
           color: var(--tempranitos-dark) !important;
           font-weight: 700 !important;
       }

       .cta-section p {
           color: var(--tempranitos-dark) !important;
           font-weight: 500 !important;
       }

       .footer h1,
       .footer h2,
       .footer h3,
       .footer h4,
       .footer h5,
       .footer h6 {
           color: var(--tempranitos-white) !important;
           font-weight: 700 !important;
       }

       .footer p,
       .footer a {
           color: var(--tempranitos-white) !important;
           font-weight: 500 !important;
       }

       /* Colores específicos para secciones de características */
       .feature-section h1,
       .feature-section h2,
       .feature-section h3,
       .feature-section h4,
       .feature-section h5,
       .feature-section h6 {
           color: var(--tempranitos-dark) !important;
           font-weight: 700 !important;
       }

       .feature-section p {
           color: var(--tempranitos-gray) !important;
           font-weight: 400 !important;
       }

       /* Colores para formularios */
       .form-control {
           color: var(--tempranitos-dark) !important;
       }

       .form-control::placeholder {
           color: var(--tempranitos-gray) !important;
       }

       /* Colores para botones */
       .btn {
           color: var(--tempranitos-white) !important;
       }

       .btn-secondary {
           color: var(--tempranitos-turquoise) !important;
       }

       /* Eliminar todas las sombras de texto */
       * {
           text-shadow: none !important;
       }

       .footer a:hover {
           color: var(--tempranitos-yellow) !important;
       }

       /* Ajustes específicos para elementos de formulario */
       .cta-section .form-control {
           background: rgba(255, 255, 255, 0.9) !important;
           border: 2px solid rgba(255, 255, 255, 0.3) !important;
           color: var(--tempranitos-dark) !important;
       }

       .cta-section .form-control:focus {
           background: var(--tempranitos-white) !important;
           border-color: var(--tempranitos-turquoise) !important;
           box-shadow: 0 0 0 0.2rem rgba(0, 180, 216, 0.25) !important;
       }

       .cta-section .form-control::placeholder {
           color: var(--tempranitos-gray) !important;
       }

       /* Ajustes para botones en secciones con degradado */
       .bg-gradient-primary .theme-btn {
           background: var(--tempranitos-white) !important;
           color: var(--tempranitos-turquoise) !important;
           border: 2px solid var(--tempranitos-white) !important;
       }

       .bg-gradient-primary .theme-btn:hover {
           background: transparent !important;
           color: var(--tempranitos-white) !important;
           border-color: var(--tempranitos-white) !important;
       }

       .cta-section .theme-btn {
           background: var(--tempranitos-turquoise) !important;
           color: var(--tempranitos-white) !important;
           border: 2px solid var(--tempranitos-turquoise) !important;
       }

       .cta-section .theme-btn:hover {
           background: var(--tempranitos-sky-blue) !important;
           border-color: var(--tempranitos-sky-blue) !important;
       }

       /* Ajustes para la sección de características */
       .feature-section h1,
       .feature-section h2,
       .feature-section h3,
       .feature-section h4,
       .feature-section h5,
       .feature-section h6 {
           color: var(--tempranitos-dark) !important;
       }

       .feature-section p {
           color: var(--tempranitos-gray) !important;
       }

       /* Ajustes para iconos en secciones con degradado */
       .bg-gradient-primary .feature-icon {
           color: var(--tempranitos-white) !important;
           font-weight: 700 !important;
       }

       .cta-section .feature-icon {
           color: var(--tempranitos-dark) !important;
           font-weight: 700 !important;
       }

       /* Ajustes para elementos de navegación */
       .bg-gradient-primary .navbar-nav .nav-link {
           color: var(--tempranitos-white) !important;
           font-weight: 600 !important;
       }

       .bg-gradient-primary .navbar-nav .nav-link:hover {
           color: var(--tempranitos-yellow) !important;
       }

       .bg-gradient-primary .navbar-toggler-icon {
           color: var(--tempranitos-white) !important;
       }

       /* Título principal con colores corporativos */
       .hero-title {
           background: linear-gradient(135deg, 
               var(--tempranitos-turquoise) 0%, 
               var(--tempranitos-sky-blue) 25%, 
               var(--tempranitos-green) 50%, 
               var(--tempranitos-orange) 75%, 
               var(--tempranitos-yellow) 100%);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           background-clip: text;
           font-weight: 800 !important;
           font-size: 3.5rem !important;
           line-height: 1.2 !important;
           text-align: center !important;
           margin-bottom: 1.5rem !important;
       }

       /* Título con degradado corporativo mejorado */
       .hero-title-alt {
           color: var(--tempranitos-dark) !important;
           font-weight: 800 !important;
           font-size: 3.5rem !important;
           line-height: 1.2 !important;
           text-align: center !important;
           margin-bottom: 1.5rem !important;
           text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8) !important;
       }

       /* Título con colores corporativos por palabras - REMOVIDO para usar degradado completo */

       /* Botones con degradados */
       .btn-gradient-primary {
           background: var(--tempranitos-gradient-primary) !important;
           border: none !important;
           color: var(--tempranitos-white) !important;
       }

       .btn-gradient-secondary {
           background: var(--tempranitos-gradient-secondary) !important;
           border: none !important;
           color: var(--tempranitos-white) !important;
       }

       .btn-gradient-accent {
           background: var(--tempranitos-gradient-accent) !important;
           border: none !important;
           color: var(--tempranitos-white) !important;
       }

/* Hover effects */
.hover-turquoise:hover {
    color: var(--tempranitos-turquoise) !important;
}

.hover-bg-turquoise:hover {
    background-color: var(--tempranitos-turquoise) !important;
    color: var(--tempranitos-white) !important;
}

/* Border colors */
.border-turquoise {
    border-color: var(--tempranitos-turquoise) !important;
}

/* Shadow effects */
.shadow-turquoise {
    box-shadow: 0 0.5rem 1rem rgba(0, 180, 216, 0.15) !important;
}

/* Animation keyframes for Tempranitos theme */
@keyframes tempranitos-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 180, 216, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 180, 216, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 180, 216, 0);
    }
}

       .animate-tempranitos-pulse {
           animation: tempranitos-pulse 2s infinite;
       }

       /* Imagen del hero con overlay */
       .hero-image-container {
           position: relative;
           border-radius: 15px;
           overflow: hidden;
       }

       .hero-image {
           width: 100%;
           height: auto;
           border-radius: 15px;
           transition: transform 0.3s ease;
       }

       .hero-image-container:hover .hero-image {
           transform: scale(1.05);
       }

       .hero-overlay {
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: linear-gradient(135deg, 
               rgba(0, 180, 216, 0.8) 0%, 
               rgba(76, 201, 240, 0.6) 50%, 
               rgba(6, 214, 160, 0.8) 100%);
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 15px;
       }

       .overlay-icon {
           background: rgba(255, 255, 255, 0.2);
           border-radius: 50%;
           width: 120px;
           height: 120px;
           display: flex;
           align-items: center;
           justify-content: center;
           backdrop-filter: blur(10px);
           border: 3px solid rgba(255, 255, 255, 0.3);
       }