/* ===== Home Pro (estilo SaaS) ===== */
:root {
    --hp-primario: var(--color-primario, #430071);
    --hp-primario-claro: var(--color-primario_claro, #9a60c3);
    --hp-primario-suave: var(--color-primario_superClaro, #efdaff);
    --hp-secundario: var(--color-secundario, #fd7119);
    --hp-texto: #1f1d2b;
    --hp-texto-suave: #6b6880;
    --hp-borde: rgba(67, 0, 113, .08);
    --hp-radio: 20px;
    --hp-sombra: 0 10px 30px rgba(31, 29, 43, .06), 0 2px 6px rgba(31, 29, 43, .04);
    --hp-sombra-hover: 0 20px 45px rgba(67, 0, 113, .14), 0 4px 10px rgba(31, 29, 43, .06);
}

html { background: #fff !important; padding: 0 !important; text-align: initial !important; scroll-behavior: smooth; }
body { color: var(--hp-texto); background: #fff; -webkit-font-smoothing: antialiased; margin: 0 !important; }

/* ---------- Header ---------- */
#header {
    background: rgba(255, 255, 255, .75) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--hp-borde);
    padding: 14px 0;
    transition: padding .25s ease, box-shadow .25s ease;
}
#header.header-scrolled { padding: 8px 0; box-shadow: 0 6px 24px rgba(31, 29, 43, .06); }
#header .navbar a, #header .navbar a:focus { color: var(--hp-texto); font-weight: 500; }
#header .navbar a:hover, #header .navbar .active { color: var(--hp-primario) !important; }
#header .navbar .getstarted, #header .navbar .getstarted:focus {
    background: linear-gradient(135deg, var(--hp-primario), var(--hp-primario-claro));
    color: #fff !important;
    border: none;
    border-radius: 999px;
    padding: 9px 22px;
    box-shadow: 0 8px 20px rgba(67, 0, 113, .25);
    transition: transform .2s ease, box-shadow .2s ease;
}
#header .navbar .getstarted:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(67, 0, 113, .32); }

/* ---------- Aviso promo ---------- */
#alert-successMes {
    top: 96px !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    padding: 4px 22px !important;
    font-size: .95rem;
    background: linear-gradient(135deg, var(--hp-secundario), #ff9a4d) !important;
    box-shadow: 0 10px 30px rgba(253, 113, 25, .35) !important;
    animation: hpBajar .5s ease;
}
@keyframes hpBajar { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Hero ---------- */
#hero {
    background:
        radial-gradient(1000px 500px at 85% 10%, rgba(154, 96, 195, .25), transparent 60%),
        radial-gradient(800px 500px at 0% 100%, rgba(253, 113, 25, .12), transparent 60%),
        linear-gradient(180deg, #faf7ff 0%, #ffffff 100%) !important;
    padding-top: 110px;
}
#hero .hero-title {
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.03em;
    background: linear-gradient(135deg, var(--hp-texto) 10%, var(--hp-primario) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#hero .hero-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 400;
    line-height: 1.65;
    color: var(--hp-texto-suave) !important;
    max-width: 560px;
}
#hero .btn-primary {
    background: linear-gradient(135deg, var(--hp-primario), var(--hp-primario-claro)) !important;
    border: none !important;
    box-shadow: 0 14px 30px rgba(67, 0, 113, .28) !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
#hero .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(67, 0, 113, .35) !important; }
#hero #iniciarDemo {
    background: #fff !important;
    color: var(--hp-primario) !important;
    border: 1px solid var(--hp-borde) !important;
    box-shadow: var(--hp-sombra);
    transition: transform .2s ease, box-shadow .2s ease;
}
#hero #iniciarDemo:hover { transform: translateY(-2px); box-shadow: var(--hp-sombra-hover); }
#hero-trust span {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--hp-borde);
    font-weight: 500;
}
#hero .hero-image { filter: drop-shadow(0 30px 50px rgba(67, 0, 113, .18)); }
#hero .particles { opacity: .5; }

/* ---------- Secciones ---------- */
#main section { padding: 100px 0; }
#main section.section-bg, #services, #pricing { background: #faf8fd !important; background-image: none !important; }
.section-title { text-align: center; max-width: 760px; margin: 0 auto 56px; padding-bottom: 0 !important; }
.section-title h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
    color: var(--hp-texto) !important;
    text-transform: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 14px !important;
}
.section-title h2::before { display: none !important; }
.section-title h2::after {
    position: static !important;
    display: block !important;
    content: "" !important;
    width: 56px !important;
    height: 4px !important;
    margin: 14px auto 0 !important;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--hp-primario), var(--hp-secundario)) !important;
}
.section-title p { color: var(--hp-texto-suave); font-size: 1.05rem; line-height: 1.7; }

/* ---------- Acerca de (sectores) ---------- */
#clientes .content p { text-align: center; color: var(--hp-texto-suave); font-size: 1.05rem; max-width: 820px; margin: 0 auto; }
#clientes .row > .col-lg-4 {
    background: #fff;
    border: 1px solid var(--hp-borde);
    border-radius: var(--hp-radio);
    box-shadow: var(--hp-sombra);
    padding: 32px 28px;
    margin-bottom: 24px;
    transition: transform .25s ease, box-shadow .25s ease;
}
#clientes .row:has(> .col-lg-4) { gap: 24px 0; }
@media (min-width: 992px) {
    #clientes .row > .col-lg-4 { flex: 0 0 calc(33.333% - 16px); max-width: calc(33.333% - 16px); margin-right: 24px; }
    #clientes .row > .col-lg-4:nth-child(3n) { margin-right: 0; }
}
#clientes .row > .col-lg-4:hover { transform: translateY(-6px); box-shadow: var(--hp-sombra-hover); }
#clientes .row > .col-lg-4 img {
    width: 64px !important;
    height: 64px;
    padding: 12px;
    border-radius: 16px;
    background: var(--hp-primario-suave);
    margin-bottom: 18px;
}
#clientes h4 { font-weight: 700; color: var(--hp-texto); }
#clientes ul { padding-left: 0; list-style: none; }
#clientes ul li { padding: 6px 0; color: var(--hp-texto-suave); }
#clientes ul li i { color: var(--hp-primario); margin-right: 6px; }

/* ---------- Servicios ---------- */
#services .icon-box {
    width: 100%;
    background: #fff;
    border: 1px solid var(--hp-borde) !important;
    border-radius: var(--hp-radio) !important;
    box-shadow: var(--hp-sombra) !important;
    padding: 36px 28px !important;
    text-align: left;
    transition: transform .25s ease, box-shadow .25s ease !important;
}
#services .icon-box:hover { transform: translateY(-8px) !important; box-shadow: var(--hp-sombra-hover) !important; }
#services .icon-box .icon { margin-bottom: 20px; }
#services .icon-box .icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 28px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--hp-primario), var(--hp-primario-claro));
    box-shadow: 0 10px 22px rgba(67, 0, 113, .25);
}
#services .icon-box h4 { font-size: 1.15rem; font-weight: 700; }
#services .icon-box h4 a { color: var(--hp-texto) !important; }
#services .icon-box p { color: var(--hp-texto-suave); font-size: .95rem; line-height: 1.6; }

/* ---------- Capturas ---------- */
.screenshot-box {
    width: 100%;
    background: #fff;
    border: 1px solid var(--hp-borde);
    border-radius: var(--hp-radio);
    box-shadow: var(--hp-sombra);
    padding: 14px 14px 22px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.screenshot-box:hover { transform: translateY(-6px); box-shadow: var(--hp-sombra-hover); }
.screenshot-box img, .imagenZoom {
    height: 230px !important;
    object-fit: cover;
    object-position: top center;
    border-radius: 14px !important;
    box-shadow: none !important;
}
.imagenZoom:hover { transform: scale(1.03) !important; }
.screenshot-box h4 { margin-top: 18px !important; font-weight: 700 !important; color: var(--hp-texto); }
.screenshot-box p { color: var(--hp-texto-suave) !important; font-size: .95rem; padding: 0 8px; }

/* ---------- Manual ---------- */
#manual .row > div {
    padding: 32px 24px;
    border-radius: var(--hp-radio);
    transition: background .25s ease;
}
#manual .row > div:hover { background: #faf8fd; }
#manual .row i {
    width: 72px;
    height: 72px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: var(--hp-primario-suave);
    font-size: 30px !important;
}
#manual h4 { font-weight: 700; }
#manual p { color: var(--hp-texto-suave); }
#manual a[href*="manual"] {
    background: linear-gradient(135deg, var(--hp-secundario), #ff9a4d) !important;
    box-shadow: 0 12px 26px rgba(253, 113, 25, .3);
    transition: transform .2s ease, box-shadow .2s ease;
}
#manual a[href*="manual"]:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(253, 113, 25, .38); }

/* ---------- Precios ---------- */
#pricing .box {
    background: #fff !important;
    border: 1px solid var(--hp-borde) !important;
    border-radius: 24px !important;
    box-shadow: var(--hp-sombra) !important;
    padding: 44px 32px !important;
    transition: transform .25s ease, box-shadow .25s ease;
}
#pricing .box:hover { transform: translateY(-8px); box-shadow: var(--hp-sombra-hover) !important; }
#pricing .box.featured, #pricing .box.recommended {
    border: 2px solid var(--hp-primario) !important;
    box-shadow: 0 24px 50px rgba(67, 0, 113, .18) !important;
}
#pricing h3 { font-weight: 700; color: var(--hp-texto); }
#pricing h4 { font-weight: 800 !important; color: var(--hp-primario) !important; letter-spacing: -.02em; }
#pricing .row > [class*="col-"] { display: flex; margin-bottom: 24px; }
#pricing .box { display: flex; flex-direction: column; width: 100%; height: 100%; }
#pricing .box ul { flex-grow: 1; padding: 0 !important; margin: 0 0 28px !important; list-style: none; text-align: left; }
#pricing ul li {
    position: relative !important;
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0 !important;
    color: var(--hp-texto-suave);
    line-height: 1.5;
}
#pricing ul li i {
    position: static !important;
    flex-shrink: 0;
    margin: 2px 0 0 !important;
    font-size: 20px;
    color: #2fc722;
}
#pricing .buy-btn { align-self: center; margin-top: auto; }
#pricing .buy-btn {
    background: linear-gradient(135deg, var(--hp-primario), var(--hp-primario-claro)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 34px !important;
    box-shadow: 0 10px 24px rgba(67, 0, 113, .25);
    transition: transform .2s ease, box-shadow .2s ease;
}
#pricing .buy-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(67, 0, 113, .32); }

/* ---------- Nosotros ---------- */
#about .card-feature, #about .card {
    border: 1px solid var(--hp-borde) !important;
    border-radius: var(--hp-radio) !important;
    box-shadow: var(--hp-sombra) !important;
    transition: transform .25s ease, box-shadow .25s ease;
}
#about .card-feature:hover, #about .card:hover { transform: translateY(-6px); box-shadow: var(--hp-sombra-hover) !important; }
#about p { color: var(--hp-texto-suave); line-height: 1.7; }

/* ---------- Contacto ---------- */
#contact { background: linear-gradient(180deg, #ffffff 0%, #fff6ef 100%) !important; }
#contact .info, #contact .php-email-form, #contact form {
    background: #fff;
    border: 1px solid var(--hp-borde) !important;
    border-radius: 24px !important;
    box-shadow: var(--hp-sombra) !important;
    padding: 32px !important;
}
#contact input, #contact textarea {
    border-radius: 12px !important;
    border: 1px solid #e6e2ef !important;
    padding: 12px 14px !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#contact input:focus, #contact textarea:focus {
    border-color: var(--hp-primario-claro) !important;
    box-shadow: 0 0 0 4px rgba(154, 96, 195, .15) !important;
    outline: none;
}
#contact button[type="submit"] {
    background: linear-gradient(135deg, var(--hp-secundario), #ff9a4d) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 36px !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(253, 113, 25, .3);
}

/* ---------- Footer ---------- */
#footer {
    background: linear-gradient(135deg, #1f0a33 0%, var(--hp-primario) 100%) !important;
    color: rgba(255, 255, 255, .85);
    padding: 48px 0 32px !important;
    margin-bottom: 0 !important;
}
#footer a { color: #fff; opacity: .85; transition: opacity .2s ease; }
#footer a:hover { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    #header {
        background: rgba(255, 255, 255, .97) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    #header .navbar-mobile { z-index: 9999; }
    #header .navbar-mobile ul { border-radius: 16px; box-shadow: 0 20px 45px rgba(0, 0, 0, .2); }
    #header .navbar-mobile a, #header .navbar-mobile a:focus { color: var(--hp-texto) !important; }
    #header .navbar-mobile .getstarted { margin: 10px 15px; justify-content: center; color: #fff !important; }
    #header .mobile-nav-toggle { color: var(--hp-primario) !important; }
    #header .navbar-mobile .mobile-nav-toggle { color: #fff !important; }
    #main section { padding: 70px 0; }
    #hero { padding-top: 90px; }
    #hero .hero-image { width: 100% !important; margin-left: 0 !important; }
}
@media (max-width: 768px) {
    #hero { height: auto !important; padding-bottom: 60px; }
    #alert-successMes { width: 92%; border-radius: 16px !important; top: 80px !important; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}