/* Añadir variables RGB para usar con transparencia */
:root {
    /* Variables existentes */
    --secondary-color-rgb: 0, 84, 80; /* Valores RGB para el color secundario */
    --accent-color-rgb: 0, 122, 116; /* Valores RGB para el color de acento */
}

/* Paleta de colores extendida - Combinando colores del logo con verde */

/* ELEMENTOS CON COLORES DEL LOGO */

/* Header, footer y elementos de identidad */
.top-bar,
.site-footer,
.footer-bottom {
    background-color: var(--primary-color);
}

.main-header {
    border-bottom-color: var(--secondary-color);
}

/* Títulos y elementos decorativos de identidad */
.section-title:after,
.hero-title:after,
.footer-title:after,
.column-icon,
.timeline-marker {
    background-color: var(--secondary-color);
}

/* Iconos y elementos de navegación */
.practice-area i,
.feature-icon,
.footer-menu a:before,
.contact-list i,
.faq-icon,
.quote-icon {
    color: var(--secondary-color);
}

/* Estados de hover para elementos de identidad */
.menu-item a:hover,
.contact-info a:hover,
.footer-menu a:hover,
.contact-list a:hover {
    color: var(--secondary-color);
}

/* ELEMENTOS CON VERDE (ACENTO ADICIONAL) */

/* Botones de acción principales */
.btn-primary, 
.hero-btn-primary, 
.cta-button, 
.submit-button,
.tab-button,
.about-btn,
.back-to-top,
.cta-button a {  /* Añadimos específicamente .cta-button a */
    background-color: var(--green-accent);
    color: var(--light-text);
}

.btn-primary:hover, 
.hero-btn-primary:hover, 
.cta-button:hover, 
.submit-button:hover,
.tab-button:hover,
.about-btn:hover,
.back-to-top:hover,
.cta-button a:hover {  /* Añadimos específicamente .cta-button a:hover */
    background-color: var(--green-light);
}

/* Elementos relacionados con servicios/crecimiento */
.skill-level,
.service-icon,
.approach-icon,
.contact-icon,
.info-card-icon {
    background-color: var(--green-accent);
    color: var(--light-text);
}

/* Elementos activos y destacados */
.practice-tab-button.active .tab-icon,
.dot.active,
.highlight-icon {
    background-color: var(--green-accent);
}

.practice-tab-button.active .tab-title {
    color: var(--green-accent);
}

/* Bordes y acentos secundarios */
.card:hover {
    border-bottom-color: var(--green-accent);
}

.faq-item.active .faq-question {
    border-left-color: var(--green-accent);
}

.faq-highlight {
    border-left-color: var(--green-accent);
}

/* COMBINACIONES ESPECIALES */

/* Botones secundarios - Combinando dorado con transparencia */
.btn-secondary, 
.hero-btn-secondary {
    background-color: transparent;
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
}

.btn-secondary:hover, 
.hero-btn-secondary:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

/* Elementos con doble acento */
.cta-button a {
    background-color: var(--green-accent);
    color: var(--light-text);
}

.cta-button a:hover {
    background-color: var(--green-light);
}

/* Secciones especiales */
.hero-subtitle:before {
    background-color: var(--secondary-color);
}

/* Ajustes para mejor contraste */
.footer-social a:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

/* Elementos con transición de color */
.contact-card:hover .info-card-icon {
    background-color: var(--secondary-color);
}

.contact-card:hover .info-card-icon i {
    color: var(--primary-color);
}

/* Asegurar que los iconos de servicio tengan el color correcto */
.service-icon {
    background-color: var(--secondary-color);
    color: var(--light-text) !important;
}

.service-icon i {
    color: var(--light-text) !important;
}

/* Asegurar que todos los botones btn-primary sean verdes */
.btn-primary {
    background-color: var(--green-accent) !important; /* Forzar color verde */
    color: var(--light-text) !important; /* Forzar color blanco para el texto */
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 28px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    background-color: var(--green-light) !important; /* Color verde más claro al hover */
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0, 84, 80, 0.2) !important;
}

.btn-primary i {
    transition: transform 0.3s ease !important;
}

.btn-primary:hover i {
    transform: translateX(5px) !important;
}
