/* Estilos para reemplazar degradados con colores sólidos */

/* Reemplazar variables de degradado con colores sólidos */
:root {
    --gradient-primary: #1e40af !important; /* Color azul sólido */
    --gradient-secondary: #0ea5e9 !important; /* Color celeste sólido */
    --gradient-accent: #f59e0b !important; /* Color naranja sólido */
    --gradient-hero: #1e40af !important; /* Color azul sólido para hero */
}

/* Aplicar colores sólidos a elementos específicos */
.sidebar-header {
    background: #1e40af !important; /* Color azul sólido */
}

.hero-section::before {
    background: #1e40af !important; /* Color azul sólido para el fondo del hero */
}

/* Asegurar que los textos sean legibles sobre fondos sólidos */
.sidebar-logo .logo-text h2,
.sidebar-logo .logo-text p {
    color: white !important;
}

/* Eliminar otros degradados */
.card-gradient,
.feature-card,
.testimonial-card {
    background: white !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e5e7eb !important;
}

/* Sección CTA con color sólido */
.cta-section {
    background: #f3f4f6 !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Ajustar colores de botones */
.btn-primary {
    background: #1e40af !important;
}

.btn-secondary {
    background: #0ea5e9 !important;
}

.btn-accent {
    background: #f59e0b !important;
}

/* Asegurar que el logo se vea bien */
.logo-icon img {
    filter: brightness(1.2) !important; /* Aumentar brillo para mejor visibilidad */
}

/* Ajustar tamaño del logo en la barra lateral */
.sidebar-logo .logo-icon {
    width: 60px !important;
    height: 60px !important;
}

/* Ajustar tamaño del texto del logo */
.sidebar-logo .logo-text h2 {
    font-size: 1.5rem !important;
    margin-bottom: 0 !important;
}

.sidebar-logo .logo-text p {
    font-size: 1.2rem !important;
    margin-top: 0 !important;
}

/* Mejorar aspecto de la sección hero */
.hero-section {
    position: relative;
    padding: 4rem 0 !important;
}

.hero-section .hero-content {
    position: relative;
    z-index: 2;
}

/* Solo aplicar texto blanco a elementos que están directamente sobre el fondo del hero */
.hero-section > .hero-content > div > h1,
.hero-section > .hero-content > div > h2 {
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Los elementos dentro de cajas blancas deben mantener su color original */
.hero-section div[style*="background: rgba(255, 255, 255"] p,
.hero-section div[style*="background: rgba(255, 255, 255"] h1,
.hero-section div[style*="background: rgba(255, 255, 255"] h2,
.hero-section div[style*="background: rgba(255, 255, 255"] h3 {
    color: inherit !important;
    text-shadow: none !important;
}

/* Asegurar que el texto en cajas blancas sea negro */
.hero-section div[style*="background: rgba(255, 255, 255"] p[style*="color: #374151"],
.hero-section div[style*="background: rgba(255, 255, 255"] p[style*="color: #1f2937"],
.hero-section div[style*="background: rgba(255, 255, 255"] p[style*="color: #4b5563"] {
    color: #374151 !important;
}

/* Reglas específicas para elementos con estilos inline */
section[style*="background: white"] p[style*="color: #374151"],
section[style*="background: white"] p[style*="color: #1f2937"],
section[style*="background: white"] p[style*="color: #4b5563"],
section[style*="background: #f8fafc"] p[style*="color: #374151"],
section[style*="background: #f8fafc"] p[style*="color: #1f2937"],
section[style*="background: #f8fafc"] p[style*="color: #4b5563"] {
    color: #374151 !important;
}

/* Regla general para asegurar texto legible en fondos blancos */
section[style*="background: white"] p,
section[style*="background: #f8fafc"] p,
div[style*="background: rgba(255, 255, 255"] p {
    color: #374151 !important;
}

/* Excepciones para elementos que deben mantener colores específicos */
section[style*="background: white"] p[style*="color: white"],
section[style*="background: #f8fafc"] p[style*="color: white"],
div[style*="background: rgba(255, 255, 255"] p[style*="color: white"] {
    color: white !important;
}

/* Reglas adicionales para asegurar texto negro en elementos específicos */
div[style*="background: #f8fafc"] p,
div[style*="background: white"] p,
div[style*="background: rgba(255, 255, 255, 0.97)"] p,
div[style*="background: rgba(255, 255, 255, 0.95)"] p {
    color: #374151 !important;
}

/* Asegurar que elementos con padding y background blanco tengan texto negro */
div[style*="padding"][style*="background: #f8fafc"] p,
div[style*="padding"][style*="background: white"] p,
div[style*="padding"][style*="background: rgba(255, 255, 255"] p {
    color: #374151 !important;
}

/* Reglas específicas para elementos con border-left (las cajas de información) */
div[style*="border-left"][style*="background: #f8fafc"] p {
    color: #1f2937 !important;
}

/* Regla de máxima prioridad para asegurar texto legible */
.hero-section div[style*="background: rgba(255, 255, 255"] * {
    color: #374151 !important;
}

/* Reglas específicas para títulos h2 en cajas blancas */
.hero-section div[style*="background: rgba(255, 255, 255"] h2[style*="color: #1f2937"],
div[style*="background: rgba(255, 255, 255"] h2[style*="color: #1f2937"],
section div[style*="background: rgba(255, 255, 255"] h2 {
    color: #1f2937 !important;
}

/* Asegurar que todos los elementos h2 en fondos blancos sean legibles */
div[style*="background: rgba(255, 255, 255"] h2,
div[style*="background: white"] h2,
div[style*="background: #f8fafc"] h2 {
    color: #1f2937 !important;
}

/* Reglas adicionales para elementos específicos que pueden estar anidados */
.hero-section h2[style*="color: #1f2937"],
section h2[style*="color: #1f2937"],
div h2[style*="color: #1f2937"] {
    color: #1f2937 !important;
}

/* Regla general para todos los h2 con estilos inline de color oscuro */
h2[style*="color: #1f2937"],
h2[style*="color: #374151"],
h2[style*="color: #4b5563"] {
    color: #1f2937 !important;
}

/* Excepciones para elementos que específicamente deben ser blancos */
.hero-section div[style*="background: linear-gradient"][style*="color: white"] *,
div[style*="background: linear-gradient"][style*="color: white"] * {
    color: white !important;
}

/* Mejorar aspecto de las tarjetas de servicios */
.service-card {
    background: white !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.service-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Mejorar aspecto del footer */
.footer {
    background-color: #1f2937 !important;
    border-top: 1px solid #374151 !important;
}

/* Mejorar aspecto de los botones */
.btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Mejorar aspecto de las preguntas frecuentes */
.faq-item {
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    margin-bottom: 1rem !important;
    overflow: hidden !important;
}

.faq-question {
    background-color: #f9fafb !important;
    padding: 1rem !important;
    cursor: pointer !important;
    font-weight: 600 !important;
}

.faq-answer {
    padding: 1rem !important;
    background-color: white !important;
    border-top: 1px solid #e5e7eb !important;
}

/* Mejorar aspecto de las tarjetas de blog */
.blog-card {
    background: white !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.blog-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Mejorar aspecto del formulario de contacto */
.contact-form input,
.contact-form textarea,
.contact-form select {
    border: 1px solid #e5e7eb !important;
    border-radius: 0.375rem !important;
    padding: 0.75rem !important;
    transition: border-color 0.2s ease !important;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: #1e40af !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.2) !important;
}