/* ============================================================
   Conecta+ - Override de paleta sobre el template base
   Colores extraidos del logo (logo.jpg)
   ============================================================ */

:root {
    --conecta-dark:        #28283C;   /* Azul marino oscuro - titulos, texto */
    --conecta-primary:     #7864DC;   /* Violeta - botones, links */
    --conecta-primary-h:   #6450c8;   /* Violeta hover */
    --conecta-secondary:   #50A0DC;   /* Celeste - acentos */
    --conecta-tertiary:    #50C8C8;   /* Turquesa - tercer acento */
    --conecta-light:       #f4f4fb;   /* Lila muy suave para fondos */
    --conecta-white:       #ffffff;
    --conecta-text:        #4a4a5e;   /* Texto secundario */
    --conecta-border:      #e5e5ef;
    --conecta-gradient:    linear-gradient(135deg, #8C50DC 0%, #50A0DC 100%);
    --conecta-gradient-r:  linear-gradient(135deg, #50A0DC 0%, #8C50DC 100%);
}

/* ---------- Base ---------- */
body { background-color: var(--conecta-white) !important; color: var(--conecta-text); }
a    { color: var(--conecta-primary); text-decoration: none; }
a:hover { color: var(--conecta-primary-h); text-decoration: none; }

h1,h2,h3,h4,h5,h6,
.h1-title,.h2-title,.h3-title,.h4-title,.h5-title,.h6-title { color: var(--conecta-dark); }

.conecta-title  { color: var(--conecta-dark) !important; }
.conecta-accent { color: var(--conecta-primary) !important; }

/* ---------- Botones ---------- */
.sec-btn,
.btn-conecta,
.btn-primary {
    background: var(--conecta-gradient) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 12px 28px;
    border-radius: 30px;
    display: inline-block;
    transition: all .3s ease;
    font-weight: 600;
}
.sec-btn span { color: #fff; }
.sec-btn:hover,
.btn-conecta:hover,
.btn-primary:hover {
    background: var(--conecta-gradient-r) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(120,100,220,0.30);
    color: #fff !important;
}

.sm-btn { padding: 8px 20px; font-size: .9rem; }

/* ---------- Header ---------- */
.site-header .top-header        { background: var(--conecta-dark); color: #fff; }
.site-header .top-header a      { color: #fff; }
.site-header .top-header a:hover{ color: var(--conecta-tertiary); }
.site-header .bottom-header     { background: #fff; box-shadow: 0 2px 12px rgba(40,40,60,0.06); }

.site-branding img { max-height: 70px; width: auto; }

/* ---------- Menu ---------- */
.menu-container ul li a {
    color: var(--conecta-dark);
    font-weight: 600;
    padding: 10px 16px;
    transition: color .2s;
}
.menu-container ul li a:hover,
.menu-container ul li.active > a { color: var(--conecta-primary); }

/* ---------- Hero / Banner ---------- */
.banner-area, .hero-banner { background-color: var(--conecta-dark); color: #fff; }
.banner-text h1, .banner-text h2 { color: #fff; }

/* ---------- Sections ---------- */
section .sec-title .line-title h4,
section .sec-title .line-title .h4-title {
    color: var(--conecta-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
}
section .sec-title h2 { color: var(--conecta-dark); }

/* ---------- Cards (destinos, tours) ---------- */
.destination-box, .tour-box, .blog-box {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(40,40,60,0.06);
    transition: all .3s ease;
}
.destination-box:hover, .tour-box:hover, .blog-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(120,100,220,0.18);
}

.tour-price, .destination-price {
    color: var(--conecta-primary);
    font-weight: 700;
}

/* ---------- Servicios (boxes home) ---------- */
.tour-services        { background: var(--conecta-light); border-radius: 16px; padding: 30px 0; }
.tour-service-icon    { color: var(--conecta-primary); font-size: 2.5rem; }
.tour-service-icon i  { background: var(--conecta-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--conecta-dark) !important;
    color: #cfcfdc;
}
.site-footer h3, .site-footer h4, .site-footer .h3-title, .site-footer .h4-title { color: #fff; }
.site-footer a { color: #cfcfdc; }
.site-footer a:hover { color: var(--conecta-tertiary); }
.site-footer .footer-text p { color: #cfcfdc; }
.site-footer .bottom-footer { border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px; margin-top: 30px; }

/* ---------- Form controls ---------- */
.form-input, .form-control {
    border: 1px solid var(--conecta-border);
    border-radius: 8px;
    padding: 10px 14px;
}
.form-input:focus, .form-control:focus {
    border-color: var(--conecta-primary);
    box-shadow: 0 0 0 3px rgba(120,100,220,.15);
    outline: 0;
}

/* ---------- Scroll to top ---------- */
.scrolltop {
    background: var(--conecta-gradient) !important;
    color: #fff !important;
    border-radius: 50%;
}

/* ---------- Util ---------- */
.bg-conecta-light  { background: var(--conecta-light); }
.bg-conecta-dark   { background: var(--conecta-dark); color: #fff; }
.text-conecta      { color: var(--conecta-primary); }
.decorationNone, .decorationNone:hover { text-decoration: none; }