/* ==========================================================================
   SINTEMAS - HOJA DE ESTILOS MAESTRA
   ========================================================================== */

/* --- 1. VARIABLES GLOBALES --- */
:root, [data-bs-theme="light"] {
    /* Bootstrap Overrides */
    --bs-primary: #0055FF;
    --bs-primary-rgb: 0, 85, 255;
    --bs-secondary: #00A3FF;
    --bs-secondary-rgb: 0, 163, 255;
    --bs-success: #2E6F6D;
    --bs-success-rgb: 46, 111, 109;
    --bs-warning: #D9A441;
    --bs-warning-rgb: 217, 164, 65;
    --bs-dark: #2B2F33;
    --bs-dark-rgb: 43, 47, 51;
    --bs-light: #F4F6F8;
    --bs-light-rgb: 244, 246, 248;
    
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: #003db3;
    --bs-body-color: var(--bs-dark);
    --bs-body-bg: #FFFFFF;

    /* Sintemas Custom Variables */
    --st-primary: #0046ff; /* rgba(0,70,255,1) */
    --st-primary-dark: #0037cc;
    --st-secondary: #00c2ff;
    --st-dark: #1a1a1a;
    --st-light: #f8faff;
    --st-white: #ffffff;
    --st-muted: #6c757d;
    
    --st-risk-low: #198754;
    --st-risk-medium: #ffc107;
    --st-risk-high: #fd7e14;
    --st-risk-critical: #dc3545;
    
    --st-border-radius: 1.25rem;
    --st-shadow: 0 10px 30px rgba(0,0,0,0.05);
    
    /* Layout */
    --navbar-height: 80px;
}

/* --- 2. ESTILOS BASE Y TIPOGRAFÍA --- */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--st-dark);
    line-height: 1.6;
    /* Nota: Se conserva el fondo negro del diseño cyber, anula el --st-light original */
    background-color: black; 
}

/* Utils */
.last-child-mb-0 > div:last-child { margin-bottom: 0 !important; }
.collapse .bg-light { border-radius: 1rem !important; }
.text-balance { text-wrap: balance; }
.gap { width: 50px; height: 50px; }
.z-1 { position: relative; z-index: 10; } /* Fix: z-index 10 aplicado a la clase z-1 */

/* --- 3. COMPONENTES GLOBALES --- */
/* Botones */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #0044cc;
    --bs-btn-hover-border-color: #003db3;
    --bs-btn-active-bg: #003db3;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-warning {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: #c29238;
    --bs-btn-hover-border-color: #b58832;
    --bs-btn-active-bg: #b58832;
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
}

.btn-outline-light {
    backdrop-filter: blur(4px);
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
}

.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

.s7-touch-button {
    height: 100px;
    width: auto;
    border-radius: 10px;
    padding-inline: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95em;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}

.btn-primary.s7-touch-button {
    background-color: var(--st-primary);
    border-color: var(--st-primary);
}

.s7-touch-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(43, 79, 245, 0.25);
    background-color: var(--st-primary-dark);
}

.s7-touch-button:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(43, 79, 245, 0.2);
}

/* Tarjetas */
.s7-problem-card, .card, .s7-card-step {
    border-radius: var(--st-border-radius);
    background: var(--st-white);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.s7-problem-card {
    border: none;
    padding: 2rem;
    height: 100%;
    border-left: 4px solid var(--st-primary);
}

.s7-problem-card:hover, .card:hover, .s7-card-step:hover {
    transform: translateY(-5px);
    border-color: rgba(43, 79, 245, 0.2) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* --- 4. SECCIONES Y LAYOUT --- */
.s7-page { overflow-x: hidden; }

/* Hero */
.s7-hero {
    background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
    padding: 80px 0;
    position: relative;
}

.s7-hero h1 { font-weight: 800; letter-spacing: -0.02em; }
.s7-hero-max-width { max-width: 680px; }

.s7-hero-animated {
    position: relative;
    width: 100%;
    /* Elimina min-height y height de aquí */
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #03091e 0%, #0b153c 50%, #020617 100%);
    background-size: 200% 200%;
    animation: auroraBg 15s ease infinite alternate;
}

/* Typografía del Hero */
.s7-eyebrow {
    display: inline-block;
    color: var(--st-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}
.s7-microcopy { font-size: 0.875rem; color: var(--st-muted); }

/* Fondos Animados */
.fondo {
    background-image: url('/assets/img/fondo05.gif');
    background-size: cover;
    height: 100vh;
    position: fixed;
    top: 0; left: 0; width: 100vw;
    opacity: 0.10;
    transform: rotate(180deg);
    filter: blur(5px);
}

.s7-bg-grid {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(rgba(43, 79, 245, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(43, 79, 245, 0.05) 1px, transparent 1px);
    background-size: 40px 40px; opacity: 0.8; z-index: 1;
}

.s7-bg-glow-1 {
    position: absolute; width: 200px; height: 600px; top: -10%; left: -10%;
    background: radial-gradient(circle, rgba(43, 79, 245, 0.15) 0%, transparent 70%);
    border-radius: 50%; animation: moveGlowOne 20s infinite alternate ease-in-out; z-index: 1;
}

.s7-bg-glow-2 {
    position: absolute; width: 500px; height: 500px; bottom: -5%; right: 5%;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.1) 0%, transparent 70%);
    border-radius: 50%; animation: moveGlowTwo 15s infinite alternate ease-in-out; z-index: 1;
}

/* Ilustraciones */
.hero-illustration {
    animation: techFloat 6s ease-in-out infinite;
    transition: filter 0.3s ease;
}
.hero-illustration:hover { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.06)); }

.s7-avatar-center {
    max-height: 220px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.2));
}

/* --- 5. NAVEGACIÓN (S7 NAVBAR) --- */
.s7-navbar {
    background-color: rgba(10, 20, 38, 0.70);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 242, 254, 0.15) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.75rem 0;
}

.s7-navbar .navbar-nav .nav-link,
.s7-navbar .btn-link {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500;
    position: relative;
    transition: color 0.25s ease, transform 0.2s ease;
}

.s7-navbar .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 80%;
    transform: scaleX(0);
    height: 2px;
    bottom: -2px;
    left: 10%;
    background: linear-gradient(90deg, #2b4ff5, #00f2fe);
    transform-origin: bottom center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.s7-navbar .navbar-nav .nav-link:hover,
.s7-navbar .btn-link:hover {
    color: #00f2fe !important;
}

.s7-navbar .navbar-nav .nav-link:hover::after { transform: scaleX(1); }
.s7-navbar .btn-link:hover {
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.4);
    transform: translateY(-1px);
}

.s7-navbar .dropdown-item {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.2s ease;
}
.s7-navbar .dropdown-item:hover {
    background-color: rgba(0, 242, 254, 0.08) !important;
    color: #00f2fe !important;
    padding-left: 1.5rem;
}

/* Nav Inicio Especial */
.s7-navbar.nav-inicio {
    background-color: rgba(10, 20, 38, 0.40) !important;
    padding: 1.2rem 0;
}
.s7-navbar.nav-inicio > .container {
    display: flex !important; justify-content: center !important; align-items: center !important;
}
.s7-navbar.nav-inicio .navbar-collapse,
.s7-navbar.nav-inicio .navbar-toggler {
    display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none;
}
.s7-navbar .navbar-logo img.logo {
    height: 40px; width: auto !important; filter: brightness(1); transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s ease;
}
.s7-navbar.nav-inicio .navbar-logo img.logo {
    height: 85px; filter: brightness(1.5) drop-shadow(0 0 15px rgb(35, 62, 73));
}

/* --- 6. ASISTENTE WIZARD Y CÓMO FUNCIONA --- */
.s7-step-mode-active .s7-question-step { display: none; animation: fadeIn 0.4s ease; }
.s7-step-mode-active .s7-question-step.is-active { display: block; }
.s7-question-step.is-active .form-label,
.s7-question-step.is-active .form-label i { font-size: 1.5em; color: var(--st-primary); }

.s7-step-progress { height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
.s7-step-progress-bar { height: 100%; background: var(--st-primary); transition: width 0.3s ease; }

.s7-global-progress { height: 12px; border-radius: 10px; background-color: #e9ecef; overflow: hidden; }
.s7-global-progress .progress-bar { box-shadow: 0 0 15px rgba(0, 70, 255, 0.4); position: relative; }
.s7-global-progress .progress-bar::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shine 2s infinite;
}

.s7-help-tooltip { cursor: help; color: var(--st-primary); font-size: 0.9rem; margin-left: 0.5rem; }

/* Sección Cómo Funciona */
#como-funciona .s7-card-step { border: 1px solid rgba(0, 0, 0, 0.06) !important; }
#como-funciona .st-icon-box {
    width: 42px; height: 42px; border-radius: 50%; font-size: 1.1rem;
    background-color: rgba(43, 79, 245, 0.08); color: #2b4ff5; display: flex; align-items: center; justify-content: center;
}
#como-funciona .s7-card-highlight {
    border-color: rgba(43, 79, 245, 0.3) !important;
    box-shadow: 0 12px 30px rgba(43, 79, 245, 0.08) !important;
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, #2b4ff5, #00f2fe) border-box;
}
#como-funciona .s7-card-highlight .st-icon-box {
    background-color: #2b4ff5; color: #ffffff; box-shadow: 0 4px 10px rgba(43, 79, 245, 0.2);
}
#como-funciona .s7-card-highlight:hover {
    transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 40px rgba(43, 79, 245, 0.12) !important;
}
#como-funciona .s7-gradient-text {
    background: linear-gradient(135deg, #2b4ff5 0%, #00a2ff 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; letter-spacing: -0.5px;
}
#como-funciona .s7-badge-free {
    position: absolute; top: 16px; right: 16px; background-color: #e0e7ff; color: #2b4ff5;
    font-size: 0.75rem; font-weight: 700; padding: 4px 12px; border-radius: 2rem; text-transform: uppercase; letter-spacing: 0.5px;
}

/* Slider Custom */
.form-range::-webkit-slider-thumb {
    width: 24px; height: 24px; margin-top: -6px; cursor: pointer; transition: transform 0.1s ease;
}
.form-range::-webkit-slider-thumb:active { transform: scale(1.2); }
.form-range::-moz-range-thumb { width: 24px; height: 24px; border: 0; cursor: pointer; transition: transform 0.1s ease; }
.form-range::-moz-range-thumb:active { transform: scale(1.2); }

/* --- 7. UTILERÍAS FLOTANTES Y ANIMACIONES BASE --- */
.s7-fixed-cta-container {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 20;
}
.s7-pulse-button {
    background-color: #2b4ff5 !important; border: none !important; transition: transform 0.2s ease, background-color 0.2s ease; animation: ctaPulse 2s infinite;
}
.s7-pulse-button:hover { transform: scale(1.05); background-color: #1a3bd6 !important; }

.s7-next-btn-container {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(0);
    z-index: 1000; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1;
}
.s7-next-btn-container.hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); }

.animated-entrance { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-text-delay-1 { animation-delay: 0.1s; }
.hero-text-delay-2 { animation-delay: 0.2s; }
.hero-text-delay-3 { animation-delay: 0.3s; }
.hero-text-delay-4, .hero-image-delay { animation-delay: 0.4s; }
.hero-text-delay-5 { animation-delay: 0.5s; }
.animate-bounce { animation: bounce 1.5s infinite; }

/* Keyframes */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes techFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
@keyframes auroraBg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 50% 100%; } }
@keyframes moveGlowOne { 0% { transform: translate(0px, 0px) scale(1); } 50% { transform: translate(150px, 80px) scale(1.2); } 100% { transform: translate(50px, 200px) scale(0.9); } }
@keyframes moveGlowTwo { 0% { transform: translate(0px, 0px) scale(1); } 50% { transform: translate(100px, 150px) scale(0.8); } 100% { transform: translate(-30px, -500px) scale(1.1); } }
@keyframes ctaPulse { 0% { box-shadow: 0 0 0 0 rgba(43, 79, 245, 0.5); } 70% { box-shadow: 0 0 0 15px rgba(43, 79, 245, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 79, 245, 0); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* --- 8. MEDIA QUERIES ESTRUCTURALES --- */

/* MÓVILES (< 992px) */
@media (max-width: 991.98px) {
    .s7-hero { padding: 60px 0; text-align: center; }
    .s7-hero .hero-illustration { margin-top: 3rem; max-width: 80%; }
    
    .navbar-collapse {
        background: rgba(11, 17, 36, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        border-radius: 1rem; margin-top: 0.75rem; padding: 1.5rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 242, 254, 0.1);
    }
    .navbar-toggler {
        background-color: rgba(255, 255, 255, 0.05); filter: invert(1) brightness(100%); transition: all 0.3s ease;
    }
    .s7-navbar .s7-dropdown-menu {
        background-color: rgba(43, 79, 245, 0.03); border-left: 2px solid #2b4ff5 !important;
        border-radius: 0; box-shadow: none !important; margin-top: 0.25rem; padding-left: 1rem;
    }
}

@media (max-width: 991.98px) {
    .s7-hero-animated {
        min-height: 100vh; /* Ocupa al menos la pantalla */
        height: auto;      /* Permite crecer si hay muchos botones */
        padding-top: 120px; 
        padding-bottom: 80px;
    }
}

@media (max-width: 575.98px) {
    .s7-touch-button { width: 100%; }
    .s7-fixed-cta-container { width: 90%; bottom: 20px; }
    .s7-pulse-button { width: 100%; text-align: center; font-size: 1rem; padding: 12px 20px !important; }
    .s7-hero-animated { padding-bottom: 80px; }
}

/* ESCRITORIO Y NAVEGACIÓN HORIZONTAL (>= 992px) */
@media (min-width: 992px) {
    html, body { overflow: hidden; height: 100%; width: 100%; }
    
    /* Arquitectura Horizontal S7 */
    main.s7-page {
        display: flex; flex-direction: row; flex-wrap: nowrap;
        overflow-x: auto; overflow-y: hidden; width: 100vw;
        height: calc(100vh - var(--navbar-height, 80px)); 
        scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    }
    main.s7-page::-webkit-scrollbar { display: none; }
    
    main.s7-page > section, main.s7-page > footer {
        flex: 0 0 100vw; width: 100vw; height: 100%;
        scroll-snap-align: start; scroll-snap-stop: always;
        overflow-y: auto; overflow-x: hidden;
        display: flex; align-items: center; padding-top: 2rem; padding-bottom: 2rem;
        min-height: calc(100vh - var(--navbar-height, 80px)); position: relative; 
    }
    main.s7-page > footer { background-color: #ffffff; }

    /* Navbar Escritorio */
    .s7-navbar .navbar-nav .nav-link {
        white-space: nowrap; display: inline-flex; align-items: center;
        padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; font-size: 0.95rem;
    }
    .s7-navbar .navbar-collapse { display: flex !important; align-items: center !important; transition: all 0.3s ease-in-out; }
    .s7-navbar .navbar-nav { gap: 1.2rem; }
    .s7-navbar .navbar-nav .nav-item.ms-lg-3 { margin-left: 2.5rem !important; display: flex; align-items: center; gap: 1.5rem; }
    .s7-navbar .btn-link { white-space: nowrap; padding: 0; margin: 0 !important; display: inline-block; line-height: 1; }
    .s7-navbar .dropdown-toggle { display: inline-flex; align-items: center; gap: 0.20rem; }
    
    /* Dropdowns Escritorio */
    .s7-navbar .s7-dropdown-menu {
        background-color: rgba(11, 17, 36, 0.95) !important; backdrop-filter: blur(12px);
        border: 1px solid rgba(0, 242, 254, 0.15) !important; border-radius: 0.75rem;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important; padding: 0.75rem 0; margin-top: 0.5rem !important;
        animation: s7DropdownFade 0.2s ease-out;
    }
    @keyframes s7DropdownFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    
    #como-funciona .s7-card-highlight { transform: scale(1.03); z-index: 2; }
}

@media (min-width: 992px) {
    /* Nos aseguramos de que el Hero se comporte como un bloque estricto del riel */
    .s7-hero-animated {
        height: 100% !important; 
        min-height: calc(100vh - var(--navbar-height, 80px)) !important;
        padding: 0; /* Quitamos el padding que agregamos en móvil */
    }
}

.btn-block{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.95em;
}