/*******************************/
/********* Root Variables ******/
/*******************************/
:root {
    --primary: #8e44ad;       /* Morado SynerG principal */
    --primary-hover: #732d91; /* Morado más oscuro para hovers */
    --secondary: #a569bd;     /* Lila claro */
    --dark: #2c3e50;          /* Gris oscuro azulado para textos fuertes */
    --text-color: #666666;    /* Color de texto general */
    --bg-light: #f8f9fa;      /* Fondos grises claros */
    --white: #ffffff;
}

/*******************************/
/********* General CSS *********/
/*******************************/
body {
    color: var(--text-color);
    background: var(--white);
    font-family: 'Montserrat', sans-serif;
    line-height: 1.7;
}

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

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

a:hover,
a:active,
a:focus {
    color: var(--primary);
    outline: none;
    text-decoration: none;
}

.btn:focus,
.form-control:focus {
    box-shadow: none;
}

.container-fluid {
    max-width: 1366px;
}

/* --- Botones Modernizados --- */
.btn {
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--white);
    background: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 6px; /* Borde ligeramente redondeado, más moderno */
    transition: all 0.3s ease;
}

.btn:hover {
    color: var(--white);
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-3px); /* Efecto de elevación */
    box-shadow: 0 8px 20px rgba(142, 68, 173, 0.3); /* Sombra morada suave */
}

/* --- Loader --- */
#loader {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-out, visibility 0s linear .3s;
    z-index: 9999;
}

#loader.show {
    transition: opacity .6s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

#loader .loader {
    width: 45px;
    height: 45px;
    border: 5px solid #dddddd;
    border-top: 5px solid var(--primary);
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.back-to-top {
    position: fixed;
    display: none;
    width: 44px;
    height: 44px;
    padding: 8px 0;
    text-align: center;
    line-height: 1;
    font-size: 22px;
    right: 20px;
    bottom: 20px;
    border-radius: 50%; /* Botón circular moderno */
    z-index: 99;
}

.back-to-top i {
    color: var(--white);
}

/**********************************/
/*********** Nav Bar CSS **********/
/**********************************/
.navbar {
    position: relative;
    transition: .5s;
    z-index: 999;
}

.navbar.nav-sticky {
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Sombra más sutil */
}

.navbar .navbar-brand {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: .5s;
}

.navbar .navbar-brand img {
    max-width: 100%;
    max-height: 45px;
}

.navbar .dropdown-menu {
    margin-top: 0;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

@media (min-width: 992px) {
    .navbar {
        position: absolute;
        width: 100%;
        padding: 25px 45px;
        background: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 9;
    }
    
    .navbar.nav-sticky {
        padding: 10px 45px;
        background: var(--white) !important;
    }
    
    .navbar .navbar-brand { color: var(--white); }
    .navbar.nav-sticky .navbar-brand { color: var(--primary); }

    .navbar-light .navbar-nav .nav-link {
        padding: 8px 12px;
        color: var(--white);
        font-size: 15px;
        font-weight: 500;
        margin: 0 5px;
        border-radius: 4px;
        transition: all 0.3s ease;
    }
    
    .navbar-light.nav-sticky .navbar-nav .nav-link {
        color: var(--dark);
    }

    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-link.active {
        color: var(--primary);
        background: rgba(255,255,255,0.1); /* Efecto sutil en el header transparente */
    }
    
    .navbar-light.nav-sticky .navbar-nav .nav-link:hover,
    .navbar-light.nav-sticky .navbar-nav .nav-link.active {
        color: var(--primary);
        background: rgba(142,68,173,0.05); /* Fondo sutil al hacer hover en sticky */
    }
}

@media (max-width: 991.98px) {   
    .navbar {
        padding: 15px;
        background: var(--white) !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    
    .navbar .navbar-brand { color: var(--primary); }
    .navbar .navbar-nav { margin-top: 15px; }
    .navbar a.nav-link { padding: 10px 5px; border-bottom: 1px solid #eee; }
    .navbar a.nav-link:last-child { border-bottom: none; }
}

/*******************************/
/********** Hero CSS ***********/
/*******************************/
.hero {
    position: relative;
    width: 100%;
    margin-bottom: 45px;
    padding: 140px 0 0px 0;
    overflow: hidden;
    /* Degradado morado corporativo profundo SynerG */
    background: linear-gradient(rgba(142, 68, 173, .85), rgba(142, 68, 173, .85)), url(../img/hero-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero .hero-image img {
    max-width: 90%;
    filter: drop-shadow(0px 20px 30px rgba(0,0,0,0.3)); /* Sombra a la imagen flotante */
    animation: floatImage 4s ease-in-out infinite; /* Animación flotante */
}

@keyframes floatImage {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

.hero .hero-content {
    padding-left: 75px;
}

.hero .hero-text p {
    color: #ffffff !important; /* Forzamos blanco para "Bienvenido a" */
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px; /* Reducimos para acercar el título */
}

/* --- AJUSTE CRÍTICO DE APILAMIENTO VISUAL ACE (NUEVO) --- */

/* 1. SynerG Estático (H1): Como bloque para ocupar su línea y forzar salto */
.hero .hero-text h1.typed-rebranding {
    display: block; /* Ocupa todo el ancho visual */
    color: #ffffff;
    font-size: 60px;
    font-weight: 800;
    letter-spacing: 3px;
    margin: 0;
    line-height: 1.1; /* Ajustamos para el apilado limpio */
    vertical-align: baseline; /* Reset vertical alignment */
}

/* 2. Frase Animada (SPAN #typed): Como bloque justo DEBAJO */
.hero .hero-text span#typed {
    display: inline; /* Importante para que fluya junto al cursor (|) */
    color: #ffffff !important; /* <--- CAMBIO AQUÍ: Ahora es BLANCO para unificar la marca ACE */
    font-size: 35px; /* Tamaño del texto animado (como en tu original) */
    font-weight: 600;
    vertical-align: middle; /* Alineación vertical central en su línea */
    margin-top: 5px; /* Sutil espacio con el H1 superior */
    margin-bottom: 15px; /* Espacio antes de los botones */
}

/* Fuente de cadenas oculta */
.hero .hero-text .typed-text {
    display: none;
}

/* 3. Cursor que parpadea (|): Alineación STPS Profesional */
.hero .hero-text .typed-cursor {
    font-size: 40px; /* Tamaño corporativo del cursor */
    color: #ffffff;
    font-weight: 300;
    vertical-align: middle; /* Crucial para alinear verticalmente el | en su línea */
    margin-left: 5px;
}

.hero .hero-btn .btn {
    margin-top: 15px; /* Ajustamos margen por el apilado superior */
    background: var(--white);
    color: var(--primary);
    border-color: var(--white);
}

.hero .hero-btn .btn:hover {
    background: transparent;
    color: var(--white);
}

.hero .hero-btn .btn:first-child {
    margin-right: 15px;
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.hero .hero-btn .btn:first-child:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

@media (max-width: 991.98px) {
    .hero .hero-content { padding: 0 15px; }
    .hero .hero-text h1.typed-rebranding { font-size: 50px; } /* Ajuste selector rebranding */
}

@media (max-width: 767.98px) {
    .hero { padding: 100px 0 60px 0; text-align: center; }
    .hero .hero-text h1.typed-rebranding { font-size: 40px; } /* Ajuste selector rebranding */
    .hero .hero-text p { font-size: 16px; }
    .hero .hero-text span#typed { font-size: 28px; } /* Ajuste responsivo para el animado */
}

/*******************************/
/******* Section Header ********/
/*******************************/
.section-header {
    position: relative;
    margin-bottom: 50px;
}

.section-header p {
    display: inline-block;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(142, 68, 173, 0.1); /* Fondo en píldora moderno */
    padding: 8px 20px;
    border-radius: 50px;
}

.section-header h2 {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    color: var(--dark);
}

@media (max-width: 767.98px) {
    .section-header h2 { font-size: 30px; }
}

/*******************************/
/********** About CSS **********/
/*******************************/
.about { margin: 45px 0; }
.about .about-img img { border-radius: 15px; box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.about .about-content { padding-left: 50px; }
.about .about-text p { font-size: 16px; color: var(--text-color); margin-bottom: 25px;}

.about .skills { margin-top: 30px; }
.skill-name p { font-weight: 600; color: var(--dark); margin-bottom: 8px;}
.about .progress {
    height: 8px;
    border-radius: 10px;
    background: #e9ecef;
    margin-bottom: 20px;
}
.about .progress .progress-bar {
    background: var(--primary);
    border-radius: 10px;
}

@media (max-width: 991.98px) {
    .about .about-content { padding: 40px 15px 0 15px; }
}

/*******************************/
/******* Experience CSS ********/
/*******************************/
.experience { padding: 60px 0; background: var(--bg-light); }
.experience .timeline { position: relative; width: 100%; }
.experience .timeline::after {
    content: ''; position: absolute; width: 3px;
    background: rgba(142, 68, 173, 0.2); /* Línea central más sutil */
    top: 0; bottom: 0; left: 50%; margin-left: -1.5px;
}

.experience .timeline .timeline-item { position: relative; width: 50%; margin-bottom: 40px; }
.experience .timeline .timeline-item.left { left: 0; padding-right: 40px; }
.experience .timeline .timeline-item.right { left: 50%; padding-left: 40px; }

.experience .timeline .timeline-item::after {
    content: ''; position: absolute; width: 20px; height: 20px;
    top: 30px; right: -10px;
    background: var(--primary);
    border: 4px solid var(--white);
    border-radius: 50%; z-index: 1;
    box-shadow: 0 0 10px rgba(142,68,173,0.4);
}
.experience .timeline .timeline-item.right::after { left: -10px; }

.experience .timeline .timeline-date {
    font-size: 14px; font-weight: 700;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px; display: block;
}

.experience .timeline .timeline-text {
    padding: 30px;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}
.experience .timeline .timeline-text:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(142,68,173,0.1);
}

.experience .timeline .timeline-text h2 { font-size: 20px; font-weight: 700; margin-bottom: 5px; }
.experience .timeline .timeline-text h4 { font-size: 15px; color: var(--text-color); margin-bottom: 15px; }

@media (max-width: 767.98px) {
    .experience .timeline::after { left: 15px; }
    .experience .timeline .timeline-item { width: 100%; padding-left: 45px; padding-right: 0; }
    .experience .timeline .timeline-item.right { left: 0%; }
    .experience .timeline .timeline-item::after { left: 5px; top: 20px;}
}

/*******************************/
/********* Service CSS *********/
/*******************************/
.service { padding: 60px 0; }
.service .service-item {
    padding: 35px 25px;
    margin-bottom: 30px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid #f1f1f1;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

/* Efecto FLOTANTE moderno */
.service .service-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(142, 68, 173, 0.15);
    border-color: var(--secondary);
}

.service .service-icon {
    width: 70px; height: 70px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(142, 68, 173, 0.1);
    border-radius: 15px;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.service .service-icon i {
    font-size: 35px;
    color: var(--primary);
}

.service .service-item:hover .service-icon {
    background: var(--primary);
}
.service .service-item:hover .service-icon i {
    color: var(--white);
}

.service .service-text h3 {
    font-size: 20px; font-weight: 700; margin-bottom: 15px;
}
.service .service-text p {
    font-size: 15px; color: var(--text-color); margin: 0;
}


/*******************************/
/******** Portfolio CSS ********/
/*******************************/
.portfolio { padding: 60px 0; background: var(--bg-light); }
.portfolio #portfolio-filter {
    margin-bottom: 40px; text-align: center;
}
.portfolio #portfolio-filter li {
    cursor: pointer; display: inline-block;
    margin: 5px; padding: 8px 20px;
    font-size: 14px; font-weight: 600;
    color: var(--dark); background: var(--white);
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.portfolio #portfolio-filter li:hover,
.portfolio #portfolio-filter li.filter-active {
    color: var(--white);
    background: var(--primary);
}

.portfolio .portfolio-wrap {
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.portfolio .portfolio-img img {
    width: 100%; transition: 0.5s;
}
.portfolio .portfolio-wrap:hover .portfolio-img img {
    transform: scale(1.05);
}

.portfolio .portfolio-text {
    padding: 25px;
    background: var(--white);
    display: flex; align-items: center; justify-content: space-between;
}
.portfolio .portfolio-text h3 {
    font-size: 18px; font-weight: 700; margin: 0; color: var(--dark);
}
.portfolio .portfolio-text a.btn {
    width: 40px; height: 40px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 20px;
}

/*******************************/
/********* Banner CSS **********/
/*******************************/
.banner {
    padding: 90px 0;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.banner .section-header h2 { color: var(--white); }
.banner .section-header h2 span { color: #f1c40f; /* Un toque de contraste dorado/amarillo ACE */ }
.banner .banner-text p { font-size: 18px; color: var(--white); margin-bottom: 30px;}
.banner .custom-file-label { text-align: left; color: var(--text-color); }
.banner .banner-text .btn {
    background: var(--dark); border-color: var(--dark); color: var(--white);
}
.banner .banner-text .btn:hover { background: #1a252f; }

/*******************************/
/********* Pricing CSS *********/
/*******************************/
.price { padding: 60px 0; }
.price .price-item {
    padding: 40px 30px;
    background: var(--white);
    border-radius: 15px;
    border: 1px solid #f1f1f1;
    text-align: center;
    margin-bottom: 30px;
    transition: all 0.4s ease;
}
.price .price-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.price .featured-item {
    box-shadow: 0 15px 35px rgba(142,68,173,0.15);
    border: 2px solid var(--primary);
    transform: scale(1.03); /* Ligeramente más grande STPS premium */
}
.price .featured-item:hover { transform: scale(1.03) translateY(-10px); }

.price .price-title h2 { font-size: 22px; font-weight: 700; color: var(--dark); }
.price .price-title p { font-size: 14px; color: var(--text-color); }
.price .featured-item .price-title h2 { color: var(--primary); }
.price .featured-item .price-title p { color: var(--primary); font-weight: 600; }

.price .price-prices { margin: 30px 0; }
.price .price-prices h2 { font-size: 40px; font-weight: 800; color: var(--dark); }
.price .price-prices h2 small { font-size: 20px; vertical-align: super; }
.price .price-prices h2 span { font-size: 16px; font-weight: 500; color: var(--text-color); }

.price .price-description ul { list-style: none; padding: 0; margin-bottom: 30px; text-align: left;}
.price .price-description ul li { padding: 10px 0; border-bottom: 1px dashed #eee; color: var(--text-color); }
.price .price-description ul li::before {
    content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
    color: var(--primary); margin-right: 10px;
}

.price .price-action .btn { width: 100%; border-radius: 50px; }
.price .price-item:not(.featured-item) .price-action .btn { background: var(--bg-light); color: var(--dark); border-color: #ddd;}
.price .price-item:not(.featured-item) .price-action .btn:hover { background: var(--primary); color: var(--white); border-color: var(--primary);}

/*******************************/
/********* Contact CSS *********/
/*******************************/
.contact { padding: 80px 0; background: var(--bg-light); }
.contact .contact-form {
    padding: 50px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}
.contact .contact-form input,
.contact .contact-form textarea {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    color: var(--dark);
    margin-bottom: 15px;
    background: #fdfdfd;
}
.contact .contact-form input:focus,
.contact .contact-form textarea:focus {
    border-color: var(--primary);
    background: var(--white);
}
.contact .contact-form .btn { width: 100%; border-radius: 8px; }

/*******************************/
/********* Footer CSS **********/
/*******************************/
.footer { background: var(--dark); color: rgba(255,255,255,0.7); padding-top: 70px; }
.footer .footer-info h2 { color: var(--white); font-size: 35px; font-weight: 800; margin-bottom: 10px; }
.footer .footer-info h3 { color: var(--secondary); font-size: 18px; font-weight: 500; margin-bottom: 30px; }

.footer .footer-menu { display: flex; justify-content: center; margin-bottom: 30px; }
.footer .footer-menu p { font-size: 16px; padding: 0 20px; border-right: 1px solid rgba(255,255,255,0.2); margin: 0; color: var(--white);}
.footer .footer-menu p:last-child { border: none; }

.footer .footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.1); color: var(--white);
    margin: 0 10px; transition: all 0.3s ease;
}
.footer .footer-social a:hover { background: var(--primary); transform: translateY(-3px); }

.footer .copyright { margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); padding: 25px 0; text-align: center; }
.footer .copyright a { color: var(--secondary); font-weight: 600; }
.footer .copyright a:hover { color: var(--white); }

@media (max-width: 575.98px) {
    .footer .footer-menu { flex-direction: column; }
    .footer .footer-menu p { border: none; padding: 10px 0; }
}

/* --- Excepción Premium ACE: Texto blanco para plan destacado --- */
.price-item.featured-item .price-description.text-light-exception ul li {
    color: #ffffff !important; /* Forzamos el color blanco con máxima prioridad */
}

/* Opcional: Si quieres que el icono de check (✓) también sea blanco en este plan */
.price-item.featured-item .price-description.text-light-exception ul li::before {
    color: #ffffff !important;
}

/*******************************/
/********* Pricing CSS *********/
/*******************************/
.price { padding: 60px 0; }
.price .price-item {
    padding: 40px 30px;
    background: var(--white);
    border-radius: 15px;
    border: 1px solid #f1f1f1;
    text-align: center;
    margin-bottom: 30px;
    transition: all 0.4s ease;
}
.price .price-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* --- AJUSTE CRÍTICO DE SINERGIA VISUAL ACE (NUEVO) --- */
/* Forzamos TEXTO BLANCO en la CABECERA del Plan Destacado sin afectar otros */

/* 1. Título y Subtítulo (h2, p) en Blanco */
.price .featured-item .price-title h2,
.price .featured-item .price-title p {
    color: #ffffff !important; /* <--- CAMBIO AQUÍ: Ahora es BLANCO para Sinergia Total ACE */
}

/* 2. Precio (h2, small, span) en Blanco */
.price .featured-item .price-prices h2,
.price .featured-item .price-prices h2 small,
.price .featured-item .price-prices h2 span {
    color: #ffffff !important; /* <--- CAMBIO AQUÍ: Ahora es BLANCO para Sinergia Total ACE */
}

/* --- Fin del ajuste crítico --- */


.price .price-title h2 { font-size: 22px; font-weight: 700; color: var(--dark); }
.price .price-title p { font-size: 14px; color: var(--text-color); }
/* Eliminamos las reglas viejas que forzaban color morado para no confundir */
/* .price .featured-item .price-title h2 { color: var(--primary); } */
/* .price .featured-item .price-title p { color: var(--primary); font-weight: 600; } */

.price .price-prices { margin: 30px 0; }
.price .price-prices h2 { font-size: 40px; font-weight: 800; color: var(--dark); }
.price .price-prices h2 small { font-size: 20px; vertical-align: super; }
.price .price-prices h2 span { font-size: 16px; font-weight: 500; color: var(--text-color); }

.price .price-description ul { list-style: none; padding: 0; margin-bottom: 30px; text-align: left;}
.price .price-description ul li { padding: 10px 0; border-bottom: 1px dashed #eee; color: var(--text-color); }
.price .price-description ul li::before {
    content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
    color: var(--primary); margin-right: 10px;
}

.price .price-action .btn { width: 100%; border-radius: 50px; }
.price .price-item:not(.featured-item) .price-action .btn { background: var(--bg-light); color: var(--dark); border-color: #ddd;}
.price .price-item:not(.featured-item) .price-action .btn:hover { background: var(--primary); color: var(--white); border-color: var(--primary);}

.price .featured-item .price-action .btn {
    background: #ffffff !important; /* <--- CAMBIO AQUÍ: Ahora es BLANCO para Sinergia Total ACE */
    color: var(--primary) !important; /* <--- CAMBIO AQUÍ: Ahora es MORADO para Sinergia Total ACE */
    border-color: #ffffff !important; /* <--- CAMBIO AQUÍ: Borde Blanco */
}

/* 2. Botón Blanco con Letra Morada en Hover */
.price .featured-item .price-action .btn:hover {
    background: transparent !important; /* <--- CAMBIO AQUÍ: Transparente en Hover */
    color: #ffffff !important; /* <--- CAMBIO AQUÍ: Texto Blanco en Hover ACE */
    border-color: #ffffff !important; /* <--- CAMBIO AQUÍ: Borde Blanco en Hover */
}