/* === PALETA DE COLORES PROFESIONAL DEL COLEGIO DE NOTARIOS === */
:root {
    --color-primary-cream: #D4CDBD;     /* Crema principal */
    --color-secondary-blue: #A9B5BA;    /* Azul grisáceo */
    --color-accent-green: #C7D2AB;      /* Verde suave */
    --color-dark-green: #76805D;        /* Verde oscuro */
    --color-warm-beige: #C8AC94;        /* Beige cálido */
    --color-white: #FFFFFF;             /* Blanco puro */
    --color-soft-white: #FEFEFE;        /* Blanco suave */
    --color-text-dark: #2C2C2C;         /* Texto oscuro */
    --color-text-medium: #5A5A5A;       /* Texto medio */
    --color-shadow: rgba(118, 128, 93, 0.15); /* Sombra suave */
}

/* === ESTILOS GLOBALES === */
* {
    transition: all 0.3s ease;
}

body {
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-primary-cream) 50%, var(--color-soft-white) 100%) !important;
    color: var(--color-text-dark) !important;
    font-family: 'Fahkwang', sans-serif !important;
}

/* === HEADER COMPLETO === */
.header-top-area-wrapper {
    background: linear-gradient(135deg, var(--color-dark-green), var(--color-secondary-blue)) !important;
    color: var(--color-white) !important;
}

.header-top-one-wrapper .left .mail a,
.header-top-one-wrapper .left .working-time p {
    color: var(--color-white) !important;
}

.header-top-one-wrapper .left .mail a:hover {
    color: var(--color-accent-green) !important;
}

.social-wrapper-one li a {
    background: var(--color-accent-green) !important;
    color: var(--color-dark-green) !important;
    transition: all 0.3s ease !important;
}

.social-wrapper-one li a:hover {
    background: var(--color-warm-beige) !important;
    color: var(--color-white) !important;
    transform: translateY(-2px) !important;
}

.btn-login {
    background: linear-gradient(135deg, var(--color-accent-green), var(--color-warm-beige)) !important;
    color: var(--color-dark-green) !important;
    border: 2px solid var(--color-white) !important;
}

.btn-login:hover {
    background: var(--color-white) !important;
    color: var(--color-dark-green) !important;
    transform: translateY(-2px) !important;
}

/* === HEADER PRINCIPAL === */
.header-main {
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-primary-cream) 100%) !important;
    box-shadow: 0 4px 20px var(--color-shadow) !important;
    border-bottom: 3px solid var(--color-accent-green) !important;
}

.header-main-one-wrapper {
    padding: 25px 0 !important;
}

/* === NAVEGACIÓN === */
.nav-area .main-nav > a {
    color: var(--color-dark-green) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.nav-area .main-nav > a:hover {
    color: var(--color-warm-beige) !important;
}

.rts-mega-menu {
    background: var(--color-white) !important;
    border: 2px solid var(--color-accent-green) !important;
    box-shadow: 0 10px 30px var(--color-shadow) !important;
}

.single-service-menu .title {
    color: var(--color-dark-green) !important;
}

.single-service-menu .details {
    color: var(--color-text-medium) !important;
}

.single-service-menu:hover {
    background: var(--color-accent-green) !important;
}

.single-service-menu:hover .title {
    color: var(--color-white) !important;
}

/* === BOTONES === */
.rts-btn.btn-primary {
    background: linear-gradient(135deg, var(--color-dark-green), var(--color-accent-green)) !important;
    border: none !important;
    color: var(--color-white) !important;
    font-weight: 600 !important;
}

.rts-btn.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-warm-beige), var(--color-dark-green)) !important;
    transform: translateY(-2px) !important;
}

.menu-btn {
    background: var(--color-accent-green) !important;
    border-radius: 8px !important;
    padding: 12px !important;
}

.menu-btn:hover {
    background: var(--color-dark-green) !important;
}

/* === TIPOGRAFÍA === */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-dark-green) !important;
    font-weight: 700 !important;
}

p {
    color: var(--color-text-medium) !important;
    line-height: 1.7 !important;
}

a {
    color: var(--color-dark-green) !important;
    transition: all 0.3s ease !important;
}

a:hover {
    color: var(--color-warm-beige) !important;
}

/* === BREADCRUMB === */
.breadcrumb {
    background: linear-gradient(135deg, var(--color-accent-green), var(--color-primary-cream)) !important;
    border-radius: 10px !important;
    padding: 15px 25px !important;
}

.breadcrumb a {
    color: var(--color-dark-green) !important;
}

.breadcrumb .active {
    color: var(--color-warm-beige) !important;
}

/* === FORMULARIOS === */
input, textarea, select {
    border: 2px solid var(--color-accent-green) !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    background: var(--color-white) !important;
    color: var(--color-text-dark) !important;
}

input:focus, textarea:focus, select:focus {
    outline: none !important;
    border-color: var(--color-dark-green) !important;
    box-shadow: 0 0 0 3px rgba(118, 128, 93, 0.1) !important;
}

/* === TABLAS === */
table {
    background: var(--color-white) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 20px var(--color-shadow) !important;
}

table thead {
    background: linear-gradient(135deg, var(--color-dark-green), var(--color-accent-green)) !important;
}

table thead th {
    color: var(--color-white) !important;
    font-weight: 600 !important;
    padding: 15px !important;
}

table tbody td {
    padding: 12px 15px !important;
    border-bottom: 1px solid var(--color-primary-cream) !important;
    color: var(--color-text-dark) !important;
}

table tbody tr:hover {
    background: var(--color-accent-green) !important;
}

/* === CARDS === */
.card {
    background: var(--color-white) !important;
    border: 2px solid var(--color-accent-green) !important;
    border-radius: 15px !important;
    box-shadow: 0 6px 20px var(--color-shadow) !important;
    transition: all 0.3s ease !important;
}

.card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px var(--color-shadow) !important;
}

.card-header {
    background: linear-gradient(135deg, var(--color-accent-green), var(--color-primary-cream)) !important;
    border-bottom: 2px solid var(--color-warm-beige) !important;
    color: var(--color-dark-green) !important;
    font-weight: 600 !important;
}

.card-body {
    background: var(--color-white) !important;
}

/* === FOOTER === */
footer {
    background: linear-gradient(135deg, var(--color-dark-green), var(--color-secondary-blue)) !important;
    color: var(--color-white) !important;
}

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

footer a {
    color: var(--color-accent-green) !important;
}

footer a:hover {
    color: var(--color-warm-beige) !important;
}

/* === ELEMENTOS ESPECÍFICOS === */
.service-card, .blog-card, .notario-card {
    background: var(--color-white) !important;
    border: 2px solid var(--color-accent-green) !important;
    border-radius: 15px !important;
    box-shadow: 0 6px 20px var(--color-shadow) !important;
}

.service-card:hover, .blog-card:hover, .notario-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px var(--color-shadow) !important;
}

.gallery-item {
    border: 2px solid var(--color-accent-green) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px var(--color-shadow) !important;
}

.gallery-item:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 8px 25px var(--color-shadow) !important;
}

.link-card {
    background: var(--color-white) !important;
    border: 2px solid var(--color-accent-green) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px var(--color-shadow) !important;
    margin-bottom: 20px !important;
}

.link-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px var(--color-shadow) !important;
}

.link-card a {
    color: var(--color-dark-green) !important;
    text-decoration: none !important;
}

.link-card a:hover {
    color: var(--color-warm-beige) !important;
}

.content-wrapper {
    background: var(--color-white) !important;
    border: 2px solid var(--color-accent-green) !important;
    border-radius: 15px !important;
    box-shadow: 0 6px 20px var(--color-shadow) !important;
}

/* === SOCIAL MEDIA === */
.social-wrapper-one a {
    background: linear-gradient(135deg, var(--color-accent-green), var(--color-dark-green)) !important;
    color: var(--color-white) !important;
}

.social-wrapper-one a:hover {
    background: linear-gradient(135deg, var(--color-warm-beige), var(--color-secondary-blue)) !important;
    transform: translateY(-2px) !important;
}

.social-wrapper-two.menu a {
    background: linear-gradient(135deg, var(--color-dark-green), var(--color-accent-green)) !important;
    color: var(--color-white) !important;
}

.social-wrapper-two.menu a:hover {
    background: linear-gradient(135deg, var(--color-warm-beige), var(--color-secondary-blue)) !important;
    transform: translateY(-3px) rotate(5deg) !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .header-main-one-wrapper {
        padding: 15px 0 !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-size: calc(1.2rem + 0.5vw) !important;
    }
    
    .card {
        margin: 10px !important;
    }
}