/* Lifesoftw — Efectos globales del sitio público (todas las páginas) */

.site-animated.public-site {
    background: #03080c;
}

.site-animated .site-main {
    background: transparent !important;
    isolation: auto;
}

.site-animated .public-site-header {
    position: sticky;
    z-index: 1050;
}

.site-animated .public-nav {
    position: relative;
    z-index: 2;
}

.site-animated .public-topbar {
    position: relative;
    z-index: 3;
}

.site-animated .site-main,
.site-animated .public-footer {
    position: relative;
    z-index: 10;
}

.site-animated .site-main {
    isolation: auto;
}

.site-animated .public-cta,
.site-animated .public-page-header {
    position: relative;
    z-index: 10;
}

.site-animated .public-cta .container,
.site-animated .public-footer .container,
.site-animated .public-footer .footer-brand-block,
.site-animated .public-footer .footer-main,
.site-animated .public-page-header .container {
    position: relative;
    z-index: 2;
}

.site-animated .logo-tech-wrap,
.site-animated .site-logo,
.site-animated .footer-logo {
    position: relative;
    z-index: 3;
}

/* Canvas de fondo tech — fijo detrás del contenido */
.public-tech-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: transparent;
}

#publicTechCanvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
}

/* Secciones transparentes — la animación se ve entre tarjetas */
.site-animated .public-section,
.site-animated .public-section.bg-light-subtle,
.site-animated .testimonials-section,
.site-animated .trust-section,
.site-animated .process-section,
.site-animated .clients-strip,
.site-animated .home-fallback-hero,
.site-animated .catalog-section,
.site-animated .home-features {
    position: relative;
    z-index: 2;
    background: transparent !important;
}

.site-animated .public-section .container {
    position: relative;
    z-index: 3;
}

/* Títulos legibles sobre fondo animado */
.site-animated .section-head h2,
.site-animated .public-section > .container > .d-flex h2,
.site-animated .public-section > .container > h2.mb-4,
.site-animated .public-section > .container > h2 {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75), 0 0 40px rgba(0, 0, 0, 0.5);
}

.site-animated .home-page .public-section > .container > .d-flex {
    background: rgba(4, 14, 20, 0.88);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(30, 208, 213, 0.3);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.site-animated .home-page .public-section > .container > .d-flex h2 {
    margin-bottom: 0.35rem;
}

.site-animated .home-page .public-section > .container > .d-flex .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

.site-animated .section-label {
    color: var(--primary) !important;
    text-shadow: 0 0 16px rgba(30, 208, 213, 0.55);
}

.site-animated .section-head .text-muted,
.site-animated .public-section > .container > .section-head .text-muted,
.site-animated .public-section > .container > .d-flex > div .text-muted,
.site-animated .public-section > .container > .d-flex .text-muted {
    color: rgba(255, 255, 255, 0.78) !important;
}

.site-animated .public-section .btn-outline-primary {
    color: var(--primary);
    border-color: rgba(30, 208, 213, 0.55);
    background: rgba(30, 208, 213, 0.08);
}

.site-animated .public-section .btn-outline-primary:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Sobre nosotros — panel legible sobre fondo animado */
.site-animated .about-content-panel {
    background: linear-gradient(180deg, #f6f7f8 0%, #eceef1 100%) !important;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.22);
    position: relative;
    z-index: 5;
}

.site-animated .about-paragraph {
    color: #3a454c !important;
}

.site-animated .about-lead {
    color: #2a3439 !important;
}

.site-animated .about-content-panel .text-muted {
    color: #5c6b73 !important;
}

/* Tarjetas sólidas encima del fondo */
.site-animated .feature-box,
.site-animated .public-product-card,
.site-animated .testimonial-card,
.site-animated .public-form-card,
.site-animated .contact-info-card,
.site-animated .service-category-card,
.site-animated .catalog-filter .form-control,
.site-animated .catalog-filter .form-select {
    position: relative;
    z-index: 5;
}

.site-animated .product-media-stack {
    background: #fff;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
    position: relative;
    z-index: 5;
}

.site-animated .catalog-filter {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 5;
}

.site-animated .alert-info {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(30, 208, 213, 0.3);
    color: #1a2e35;
    position: relative;
    z-index: 5;
}

.site-animated .landing-form-card {
    background: #fff !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}

.site-animated .campaign-banner {
    position: relative;
    z-index: 5;
}

.site-animated .feature-box,
.site-animated .public-product-card,
.site-animated .testimonial-card,
.site-animated .public-form-card,
.site-animated .contact-info-card,
.site-animated .service-category-card {
    background: #fff !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}

.site-animated .process-section .process-step {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem 1rem 1.25rem;
    height: 100%;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(30, 208, 213, 0.15);
    position: relative;
    z-index: 5;
}

.site-animated .process-section .process-step h5 {
    color: #1a2e35;
}

.site-animated .process-section .process-step p,
.site-animated .process-section .process-step .text-muted {
    color: #5c6b73 !important;
}

.site-animated .trust-item {
    background: #fff;
    border-radius: 14px;
    z-index: 5;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

/* Hover y lift */
.site-animated .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.site-animated .hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(30, 208, 213, 0.15);
}

.site-animated .footer-links a,
.site-animated .footer-contact-item,
.site-animated .footer-cta-box,
.site-animated .footer-bottom-links a,
.site-animated .footer-social a,
.site-animated .feature-box,
.site-animated .public-product-card,
.site-animated .testimonial-card,
.site-animated .service-category-card,
.site-animated .contact-info-card,
.site-animated .public-form-card,
.site-animated .process-step,
.site-animated .trust-item,
.site-animated .public-cta .btn,
.site-animated .btn-glow {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.25s ease, color 0.25s ease;
}

.site-animated .footer-links a:hover {
    color: var(--primary);
    transform: translateX(6px);
}

.site-animated .footer-contact-item:hover {
    transform: translateX(4px);
    border-color: rgba(30, 208, 213, 0.35);
    background: rgba(30, 208, 213, 0.08);
}

.site-animated .footer-cta-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.site-animated .footer-social a:hover {
    transform: translateY(-3px) scale(1.1);
}

.site-animated .public-product-card:hover,
.site-animated .service-category-card.hover-lift:hover,
.site-animated .contact-info-card.hover-lift:hover,
.site-animated .public-form-card.hover-lift:hover,
.site-animated .landing-form-card.hover-lift:hover,
.site-animated .product-media-stack.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(30, 208, 213, 0.18);
}

.site-animated .btn-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(30, 208, 213, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    #publicTechCanvas {
        display: none !important;
    }
    .public-tech-bg {
        background: #061018;
    }
    .site-animated.public-site {
        background: #061018;
    }
}

@media (max-width: 768px) {
    #publicTechCanvas {
        opacity: 0.92;
    }
}