:root {
    --navy-900: #0f172a;
    --navy-800: #1e293b;
    --navy-600: #475569;
    --blue-500: #3b82f6;
    --white: #ffffff;
    --bg-light: #f8fafc;
    --border-gray: #e2e8f0;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

/* NEW: Subtle Geometric Neuron Pattern Utility */
.bg-neuron-pattern {
    position: relative;
    overflow: hidden;
}

.bg-neuron-pattern::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.1; /* Extremely subtle to just add texture */
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='10' cy='10' r='2' /%3E%3Ccircle cx='60' cy='40' r='1.5' /%3E%3Ccircle cx='100' cy='20' r='1' /%3E%3Ccircle cx='30' cy='90' r='1.8' /%3E%3Ccircle cx='80' cy='100' r='1.2' /%3E%3Cpath d='M10 10 L60 40 L100 20 M60 40 L80 100 L30 90 L10 10' stroke='%23ffffff' stroke-width='0.5' fill='none' /%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

/* SKELETON LOADING - "CARGA FANTASMA" */
.skeleton {
    background: linear-gradient(90deg, 
        rgba(226, 232, 240, 0.5) 25%, 
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(226, 232, 240, 0.5) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.2s infinite linear;
    border-radius: 12px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text { height: 14px; margin-bottom: 10px; border-radius: 4px; }
.skeleton-title { height: 32px; width: 65%; margin: 0 auto; border-radius: 8px; }
.skeleton-circle { width: 70px; height: 70px; border-radius: 50%; margin: 0 auto; }
.skeleton-button { height: 55px; border-radius: 100px; width: 100%; margin-top: 10px; }


/* CUSTOM UTILITIES FOR ELITE UI */
.mt-lg-n5 { margin-top: 0; }
@media (min-width: 992px) {
    .mt-lg-n5 { margin-top: -3.5rem !important; }
}

.transform-hover {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.transform-hover:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}

.hover-translate-up {
    transition: all 0.3s ease;
}

.hover-translate-up:hover {
    transform: translateY(-5px);
}

.letter-spacing-1 { letter-spacing: 1px !important; }
.letter-spacing-2 { letter-spacing: 2px !important; }

.color-navy, .text-navy-900 { color: var(--navy-900) !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }


body {
    font-family: 'Inter', 'Outfit', sans-serif;
    background-color: #e2e8f0; /* Institutional Slate: Darker, Solid, High Contrast */
    /* Vertical Depth Gradient */
    background-image: 
        linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
    color: var(--navy-800);
    min-height: 100vh;
    overflow-x: hidden;
    padding-top: 6rem;
    position: relative;
}

/* ELITE STATS TOKENS */
.highlight-blue {
    color: #60a5fa; /* Soft electric blue */
    text-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
}

.text-caption {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0;
}

.border-start-custom {
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 991px) {
    .border-start-custom { border-left: none; }
}

.opacity-05 { opacity: 0.05; }


/* Subtle Static Academic Symbols (Very Light) */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.03; /* Extremely faint */
    background-image: url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 25 L50 15 L75 25 L50 35 Z M50 35 L50 50' stroke='%23000' fill='none'/%3E%3Ccircle cx='100' cy='100' r='15' stroke='%23000' fill='none'/%3E%3Crect x='10' cy='110' width='30' height='20' transform='rotate(15 25 120)' stroke='%23000' fill='none'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: -1;
}

/* MASSIVE PORTAL SELECTION SYSTEM (ULTRA-MODERN REDESIGN) */
.massive-portal-card {
    position: relative;
    border-radius: 3rem;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3.5rem;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.massive-portal-card.enrollment-bg {
    background: radial-gradient(circle at top left, #1e3a8a, #0f172a);
}

.massive-portal-card.enrollment-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.1;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Ccircle cx='10' cy='10' r='1'/%3E%3Ccircle cx='50' cy='50' r='1'/%3E%3Ccircle cx='90' cy='10' r='1'/%3E%3Ccircle cx='10' cy='90' r='1'/%3E%3Ccircle cx='90' cy='90' r='1'/%3E%3Cpath d='M10 10 L50 50 L90 10 M50 50 L10 90 M50 50 L90 90' stroke='%23ffffff' stroke-width='0.5' fill='none'/%3E%3C/g%3E%3C/svg%3E");
    z-index: 1;
}

.massive-portal-card.credit-bg {
    background: radial-gradient(circle at top right, #059669, #064e3b);
}

.massive-portal-card.credit-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M0 0 L80 80 M0 80 L80 0' stroke='%23ffffff' stroke-width='0.5' fill='none'/%3E%3C/g%3E%3C/svg%3E");
    z-index: 1;
}

/* Background floating abstract elements */
.portal-card-overlay {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    filter: blur(40px);
    z-index: 1;
    transition: all 0.6s;
}

.portal-icon-wrapper {
    width: 110px;
    height: 110px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    margin-bottom: 2.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

.portal-icon-wrapper i {
    font-size: 3.5rem;
    color: #fff;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
    transition: all 0.5s;
}

.portal-card-content {
    position: relative;
    z-index: 3;
    text-align: left !important;
}

.massive-portal-card:hover {
    transform: translateY(-20px) scale(1.02);
    box-shadow: 0 60px 100px -20px rgba(0, 0, 0, 0.6);
}

.massive-portal-card:hover .portal-card-overlay {
    width: 350px;
    height: 350px;
    background: rgba(255, 255, 255, 0.08);
}

.massive-portal-card:hover .portal-icon-wrapper {
    background: #fff;
    transform: rotate(12deg) translateY(-10px);
    border-color: #fff;
}

.massive-portal-card:hover .portal-icon-wrapper i {
    color: var(--navy-900) !important;
    transform: scale(1.1);
}

.btn-portal-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.25rem 2.5rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 120px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.9rem;
    backdrop-filter: blur(15px);
    transition: all 0.4s;
    margin-top: 1rem;
}

.massive-portal-card:hover .btn-portal-action {
    background: #fff;
    color: var(--navy-900);
    border-color: #fff;
    box-shadow: 0 15px 30px rgba(255,255,255,0.2);
}

.portal-action-arrow {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s;
}

.massive-portal-card:hover .portal-action-arrow {
    background: var(--navy-900);
    color: #fff;
    transform: translateX(5px);
}

.btn-navy-modern {
    background: var(--navy-900);
    color: #fff;
    border: none;
    font-weight: 800;
    letter-spacing: 0.05em;
    transition: all 0.3s;
}

.btn-navy-modern:hover {
    background: #000;
    transform: scale(1.05);
    color: #fff;
}

.btn-outline-navy-modern {
    background: transparent;
    color: var(--navy-900);
    border: 2px solid var(--navy-900);
    font-weight: 800;
    letter-spacing: 0.05em;
    transition: all 0.3s;
}

.btn-outline-navy-modern:hover {
    background: var(--navy-900);
    color: #fff;
    transform: scale(1.05);
}

.cursor-pointer { cursor: pointer; }
.shadow-2xl { 
    box-shadow: 0 40px 80px -20px rgba(15, 23, 42, 0.08), 0 10px 20px -10px rgba(0,0,0,0.05) !important; 
}


/* Professional Top Header */
.top-navbar-professional {
    background: var(--navy-900);
    color: var(--white);
    padding: 0.85rem 0; /* Slightly more compact for modern elite look */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--blue-500);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    /* Subtle Neuron Pattern in Header for consistency */
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.2), rgba(15, 23, 42, 0.2)),
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2 L20 20 L40 10 L60 30 L80 15 L100 25' stroke='%236366f1' stroke-width='0.5' stroke-opacity='0.1' fill='none'/%3E%3C/svg%3E");
}

.nav-brand-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text; /* Standard property for compatibility */
    -webkit-text-fill-color: transparent;
}

.nav-brand-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.nav-logo-container {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.nav-logo-img {
    height: 65px;
    width: auto;
}

.nav-phone-link {
    text-decoration: none;
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    font-family: 'Outfit', sans-serif;
    transition: all 0.3s ease;
}

.nav-phone-link:hover {
    color: #10b981;
    transform: translateX(-5px);
}

.nav-social-pill {
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1.25rem;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.nav-social-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.mob-whatsapp-btn {
    width: 38px; /* Slightly smaller for balance */
    height: 38px;
    background: #10b981;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.1rem;
    transition: all 0.3s;
    border: 3px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 576px) {
    .top-navbar-professional {
        padding: 0.75rem 0; /* More compact header on mobile */
    }
}

.mob-whatsapp-btn:active {
    transform: scale(0.9);
}

@media (max-width: 576px) {
    .nav-social-item {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.75rem !important;
    }
    .nav-social-pill {
        padding: 4px !important;
        gap: 0.4rem !important;
    }
}

.nav-social-item:hover {
    background: #fff;
    color: var(--navy-900);
    transform: rotate(15deg) scale(1.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.btn-premium-nav {
    background: var(--blue-500);
    color: #fff !important;
    font-weight: 800;
    font-size: 0.75rem;
    border-radius: 100px;
    padding: 0.7rem 1.5rem;
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
    border: none;
    letter-spacing: 0.05em;
    transition: all 0.3s;
}

.btn-premium-nav:hover {
    background: #fff;
    color: var(--navy-900) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.nav-info-item p {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: -2px;
}

/* Heartbeat Pulse Motto (Lema que Late) */
.nav-motto-center {
    font-family: 'Outfit', sans-serif;
    line-height: 1.1;
    cursor: default;
    user-select: none;
}

.motto-prefix {
    font-size: 0.85rem; /* Larger and clearer */
    letter-spacing: 1.5px;
    font-style: italic;
    color: #fff;
    margin-bottom: -2px;
}

.motto-main {
    font-size: 1.25rem; /* More impactful size */
    letter-spacing: 0.1em;
    color: var(--blue-500);
}

/* Heartbeat Glow Pulse Animation */
.animate-motto-heartbeat {
    animation: mottoPulse 4s infinite ease-in-out;
}

@keyframes mottoPulse {
    0%, 100% { 
        transform: scale(1);
        text-shadow: 0 0 0 rgba(59, 130, 246, 0); 
    }
    10% { 
        transform: scale(1.05); /* First Beat */
        text-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
    }
    15% { 
        transform: scale(1);
    }
    20% { 
        transform: scale(1.03); /* Second Beat */
        text-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
    }
    30%, 100% { 
        transform: scale(1);
        text-shadow: 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* Legacy Wizard Removed - Using New Premium Implementation */

.wizard-item span {
    display: block;
    white-space: nowrap;
}

.premium-card {
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    padding: 3.5rem 2.5rem;
    border-top: 5px solid var(--primary-navy);
}

.btn-premium-red {
    background: var(--primary-navy) !important;
    color: var(--white) !important;
    font-weight: 700;
    border-radius: 12px;
    padding: 0.8rem 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-premium-red:hover {
    background: var(--primary-navy-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-modern {
    background: linear-gradient(135deg, var(--primary-navy), var(--primary-navy-lite));
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 14px;
    font-weight: 700;
    border: none;
    box-shadow: 0 10px 15px -3px rgba(30, 58, 138, 0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(30, 58, 138, 0.3);
}

.progress-dots-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.dot-step {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    transition: all 0.4s;
}

.dot-step.active {
    background: var(--primary-navy);
    color: #fff;
    box-shadow: 0 0 15px rgba(30, 58, 138, 0.2);
}

.section-label-modern {
    color: var(--primary-navy);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
    display: block;
}

.yape-modern {
    background: #f8fafc;
    border: 2px solid #f1f5f9;
    border-radius: 20px;
    padding: 2.5rem;
}

.card-header-academy, .card-header-modern {
    text-align: center;
}

.card-header-academy {
    text-align: center;
    margin-bottom: 2.5rem;
}

.logo-academy {
    width: 130px;
    height: auto;
    margin-bottom: 1.5rem;
}

.form-label-academy {
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.9rem;
}

/* Neon Aura for Card - Static */
.premium-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--navy-900), var(--blue-500));
    border-radius: var(--radius-xl);
    z-index: -1;
    opacity: 0.2;
}

/* Elite Floating Logo Seal */
.logo-seal {
    position: absolute;
    top: -55px;
    left: 45px;
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-shadow: 0 0 25px var(--electric-blue); /* Neon Glow Seal */
    z-index: 10;
    border: 4px solid var(--electric-blue);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Kept from original */
}

.logo-seal:hover {
    transform: scale(1.1) rotate(5deg);
}

.logo-seal img {
    width: 100%;
    height: auto;
}

h1, h2, h3, .logo-text {
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.02em;
    color: var(--text-pure); /* Titles must be bold white */
    font-weight: 800; /* Titles must be bold white */
}

.logo-text {
    font-weight: 800;
    font-size: 2.5rem;
    color: var(--primary-blue);
}

.logo-text span {
    color: var(--secondary-red);
}

/* Premium Card Design */
.premium-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-premium);
    border: 1px solid rgba(255, 255, 255, 0.8);
    overflow: hidden;
}

.card-header-clean {
    padding: 3rem 2rem 2rem;
    text-align: center;
    position: relative;
}

.card-header-clean::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--accent-soft), transparent);
}

/* Steps Progress */
.progress-thin {
    height: 6px !important;
    background-color: var(--accent-soft) !important;
    border-radius: 10px;
    margin: 2rem auto;
    max-width: 80%;
}

.progress-bar-refined {
    background: linear-gradient(90deg, var(--primary-blue), var(--secondary-red)) !important;
    border-radius: 10px;
}

/* Form Styling - Boutique Style */
.form-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-control, .form-select {
    background-color: var(--accent-soft) !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-lg);
    padding: 0.9rem 1.2rem;
    color: var(--text-main) !important;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-control:focus, .form-select:focus {
    background-color: #fff !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 48, 135, 0.1) !important;
}

.form-control::placeholder {
    color: var(--text-light);
}

/* Buttons - Premium Feel */
.btn-premium {
    background: var(--text-main);
    color: #fff;
    border: none;
    padding: 1.1rem 2.5rem;
    border-radius: 100px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.4s ease;
    box-shadow: 0 15px 30px -5px rgba(30, 41, 59, 0.3);
}

.btn-premium:hover {
    transform: translateY(-3px);
    background: var(--primary-blue);
    box-shadow: 0 20px 40px -10px rgba(0, 48, 135, 0.4);
    color: #fff;
}

.btn-premium-red {
    background: var(--secondary-red);
    box-shadow: 0 15px 30px -5px rgba(227, 24, 55, 0.25);
}

.btn-premium-red:hover {
    background: #c1121f;
    box-shadow: 0 20px 40px -10px rgba(227, 24, 55, 0.4);
}

.btn-outline-premium {
    border: 2px solid var(--accent-soft);
    background: transparent;
    color: var(--text-muted);
    border-radius: 100px;
    padding: 1rem 2rem;
    font-weight: 600;
}

.btn-outline-premium:hover {
    background: var(--accent-soft);
    color: var(--text-main);
}

/* SEARCH PORTAL (MODERN SOFT ELITE REDESIGN) */
.search-main-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.08);
    background-image: 
        radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.05) 0px, transparent 40%),
        radial-gradient(at 100% 100%, rgba(148, 163, 184, 0.05) 0px, transparent 40%);
}

.search-header-premium {
    padding: 3.5rem 2.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.search-icon-circle {
    width: 80px;
    height: 80px;
    background: #f8fafc;
    border: 1px solid var(--border-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--blue-500);
    font-size: 2.25rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.search-title-modern {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    color: var(--navy-900);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.search-subtitle-modern {
    color: var(--navy-600);
    font-size: 0.9rem;
    font-weight: 600;
}

.search-input-wrapper {
    max-width: 500px;
    margin: 3.5rem auto;
    position: relative;
}

.input-huge-modern {
    background: #fff !important;
    border: 2px solid var(--border-gray) !important;
    border-radius: 120px !important;
    padding: 1.5rem 4.5rem 1.5rem 2.5rem !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--navy-900) !important;
    letter-spacing: 0.2em;
    text-align: center;
    transition: all 0.4s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.input-huge-modern:focus {
    border-color: var(--blue-500) !important;
    background: #fff !important;
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.15) !important;
}

.btn-search-huge {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--blue-500);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}

.btn-search-huge:hover {
    background: var(--navy-900);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

/* Result Area - Modern Light Card */
.result-portal-modern {
    background: #fff;
    border: 1px solid var(--border-gray);
    border-radius: 2.5rem;
    padding: 3rem;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    transition: all 0.5s;
    box-shadow: 0 20px 60px rgba(0,0,0,0.05);
}

.status-pill-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.75rem;
    border-radius: 100px;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 2.5rem;
}

.status-pill-modern.approved { background: rgba(16, 185, 129, 0.1) !important; color: #10b981 !important; border: 1px solid rgba(16, 185, 129, 0.2); }
.status-pill-modern.pending { background: rgba(245, 158, 11, 0.1) !important; color: #f59e0b !important; border: 1px solid rgba(245, 158, 11, 0.2); }

/* Updated text colors for light theme results */
.result-portal-modern h4, 
.result-portal-modern span:not(.badge) {
    color: var(--navy-900) !important;
}

.result-portal-modern p {
    color: var(--navy-600) !important;
}

.result-name-card {
    background: #f8fafc !important;
    border: 1px solid var(--border-gray);
    border-radius: 1.5rem;
}

.btn-download-elite, .btn-download-premium {
    background: #1e3a8a !important; /* Royal Blue */
    color: #ffffff !important;
    padding: 1.5rem 2.5rem;
    border-radius: 120px;
    font-weight: 900;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 15px 35px rgba(30, 58, 138, 0.3);
    border: none !important;
    opacity: 1 !important;
}

.btn-download-elite *, .btn-download-premium * {
    color: #ffffff !important;
}

.btn-download-elite:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.3);
    background: #000 !important;
}

/* MOBILE RESPONSIVENESS REFINEMENTS */
@media (max-width: 768px) {
    .result-portal-modern {
        padding: 2.5rem 1.25rem !important;
        border-radius: 2rem !important;
    }
    
    .status-pill-modern {
        padding: 0.6rem 1.25rem !important;
        font-size: 0.75rem !important;
        margin-bottom: 2rem !important;
    }

    .input-huge-modern {
        font-size: 1.15rem !important;
        padding: 1.25rem 4rem 1.25rem 1.5rem !important;
        letter-spacing: 0.1em !important; /* Less extreme tracking on mobile */
    }

    .btn-search-huge {
        width: 50px !important;
        height: 50px !important;
        right: 0.85rem !important;
    }

    .btn-download-elite {
        padding: 1.25rem 1.5rem !important;
        font-size: 0.95rem !important;
        gap: 0.75rem !important;
    }
}

/* Yape Container Light */
.yape-light {
    background: #fdf2f8;
    border: 2px dashed #fb7185;
    border-radius: var(--radius-lg);
    padding: 2rem;
}

/* Premium Status Result - Modernized */
.premium-status-container {
    background: var(--white);
    border-radius: 2rem;
    padding: 3.5rem 2.5rem;
    margin-top: 3rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.premium-status-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ecfdf5, #10b981, #ecfdf5); /* Success indicator */
}

.status-valid::before { background: linear-gradient(90deg, #ecfdf5, #10b981, #ecfdf5); }
.status-pending::before { background: linear-gradient(90deg, #fffbeb, #f59e0b, #fffbeb); }

.icon-circle-result {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    font-size: 2.25rem;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.icon-circle-result.status-valid {
    background: #ecfdf5;
    color: #10b981;
    box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.2);
}

.icon-circle-result.status-pending {
    background: #fffbeb;
    color: #f59e0b;
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.2);
}

.result-name {
    color: var(--navy-900);
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.result-dni {
    color: var(--navy-600);
    font-weight: 600;
    font-size: 0.95rem;
    display: block;
    margin-bottom: 2rem;
    opacity: 0.7;
}

.btn-download-premium {
    background: var(--navy-900);
    color: var(--white) !important;
    border: none;
    border-radius: 1.25rem;
    padding: 1.25rem 2.5rem;
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 15px 30px -5px rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    margin-top: 1.5rem;
}

.btn-download-premium:hover {
    background: #000;
    transform: translateY(-6px);
    box-shadow: 0 25px 40px -10px rgba(0, 0, 0, 0.5);
    color: var(--white);
}

/* Animations & Utility */
.fade-up {
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Step Message */
.step-tag {
    background: var(--accent-soft);
    color: var(--primary-blue);
    padding: 0.4rem 1rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex; width: max-content;
    margin-bottom: 1rem;
}

/* Admin Dashboard Styles */
.table-premium {
    border-collapse: separate;
    border-spacing: 0 10px;
}

.table-premium thead th {
    background: transparent;
    color: var(--text-light);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 800;
    border: none;
    padding: 1.5rem 1rem;
}

.table-premium tbody tr {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    border-radius: var(--radius-md);
    transition: transform 0.2s, box-shadow 0.2s;
}

.table-premium tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-premium);
}

.table-premium tbody td {
    padding: 1.5rem 1rem;
    border: none;
    font-size: 0.9rem;
}

.table-premium tbody td:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.table-premium tbody td:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.img-admin-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

.img-admin-thumb:hover {
    transform: scale(1.1);
}

.btn-action-sm {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 100px;
}

/* Split View Layout */
.admin-split-container {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 1200px) {
    .admin-split-container {
        grid-template-columns: 1fr;
    }
}

.table-premium tbody tr {
    cursor: pointer;
}

.table-premium tbody tr.active-row {
    background: var(--accent-soft) !important;
    border-left: 4px solid var(--primary-blue);
    transform: translateX(10px);
}

.preview-panel-sticky {
    position: sticky;
    top: 2rem;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-premium);
    padding: 1.8rem;
    min-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
}

.preview-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    text-align: center;
    border: 2px dashed var(--accent-soft);
    border-radius: var(--radius-md);
    padding: 2rem;
}

.img-preview-full {
    width: 85%;
    margin: 0 auto 1.5rem;
    display: block;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.preview-info-box {
    margin-bottom: 2rem;
}

.preview-info-item {
    margin-bottom: 1rem;
}

.preview-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-light);
    font-weight: 800;
    margin-bottom: 0.2rem;
    display: block;
}

.login-card-elite {
    max-width: 420px;
    width: 100%;
    background: #fff;
    border-radius: 2rem;
    padding: 3.5rem 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.login-card-elite::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--navy-900), var(--blue-500));
}

.login-logo {
    width: 80px;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
}

.login-header {
    text-align: center;
    margin-bottom: 3rem;
}

.login-header h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--navy-900);
    letter-spacing: -0.02em;
}

/* Quick Gallery View */
.voucher-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    padding-bottom: 5rem;
}

/* Removed Moving Ticker */

/* New Floating Logo Style */
.logo-floating {
    position: fixed;
    top: 3.5rem; /* Space for ticker */
    left: 2rem;
    z-index: 999;
}

.logo-floating img {
    height: 80px;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
    transition: transform 0.3s;
}

.logo-floating img:hover {
    transform: rotate(-5deg) scale(1.1);
}

/* Adjust body padding for fixed elements */
body {
    padding-top: 5rem;
}

.premium-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-premium);
    border: none;
    position: relative;
    overflow: hidden;
}

.premium-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-blue), var(--primary-red));
}

.btn-premium {
    border-radius: 100px;
    padding: 1rem 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    font-size: 0.95rem;
}

.btn-premium-red {
    background: var(--electric-blue);
    color: var(--navy-deep);
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
}

.btn-premium-red:hover {
    background: #fff;
    color: var(--navy-deep);
    transform: translateY(-5px);
    box-shadow: 0 0 35px rgba(0, 242, 255, 0.7);
}

.yape-dark {
    background: rgba(0, 242, 255, 0.05);
    border: 1px dashed rgba(0, 242, 255, 0.3);
    border-radius: 24px;
    padding: 2.5rem;
    margin-bottom: 2rem;
}

.yape-qr-img {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    border: 5px solid #fff;
    border-radius: 20px;
    margin-bottom: 1.5rem;
}

.yape-price-neon {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--electric-blue);
    text-shadow: 0 0 20px rgba(0, 242, 255, 0.5);
}

.form-control-premium {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(0, 242, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.2rem;
    color: #fff;
    font-weight: 500;
    transition: all 0.3s;
}

.form-control-premium:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--electric-blue);
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.2);
    color: #fff;
    outline: none;
}

.enrollment-main-card {
    background: var(--white);
    border: 1px solid rgba(226, 232, 240, 0.5);
    border-radius: 2.5rem;
    box-shadow: 0 25px 70px -12px rgba(0, 0, 0, 0.1);
    padding: 0; /* Reset internal padding */
    margin-bottom: 5rem;
    width: 100%; /* Fully responsive width */
    position: relative;
    overflow: hidden;
}

.enrollment-main-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 15%;
    right: 15%;
    height: 6px;
    background: linear-gradient(90deg, transparent, var(--navy-900), var(--blue-500), var(--navy-900), transparent);
    border-radius: 100px;
}

.section-title-professional {
    font-size: 1.3rem; /* Slightly smaller for compact look */
    font-weight: 800;
    color: var(--navy-900);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f1f5f9;
    letter-spacing: -0.01em;
}

.form-label-professional {
    font-weight: 700;
    color: var(--navy-800);
    margin-bottom: 0.6rem;
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    opacity: 0.85;
}

.form-control-minimal {
    width: 100%;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 1.1rem 1.5rem;
    color: var(--navy-900);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.form-control-minimal:focus {
    background: var(--white);
    border-color: var(--blue-500);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    outline: none;
    transform: translateY(-1px);
}

.form-control-minimal::placeholder {
    color: #94a3b8;
    font-weight: 400;
    opacity: 0.6;
}

.btn-professional {
    background: var(--navy-900);
    color: var(--white) !important;
    border: none;
    border-radius: 1rem;
    padding: 1.125rem 2.5rem;
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.btn-professional:hover {
    background: #000;
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.4);
}

.btn-professional i {
    transition: transform 0.3s;
}

.btn-professional:hover i {
    transform: translateX(6px);
}

.btn-outline-professional {
    background: transparent;
    color: var(--navy-600);
    border: 2px solid var(--border-gray);
    border-radius: 1rem;
    padding: 1.125rem 2rem;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.btn-outline-professional:hover {
    background: #f1f5f9;
    border-color: var(--navy-900);
    color: var(--navy-900);
    transform: translateY(-2px);
}

.btn-outline-professional:hover {
    background: #f1f5f9;
    color: var(--navy-900);
}

.section-title-professional {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--navy-900);
    margin-bottom: 2.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid #f1f5f9;
    letter-spacing: -0.01em;
}

.input-group-modern {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-group-modern .input-icon {
    position: absolute;
    left: 1.4rem;
    color: var(--navy-600);
    opacity: 0.4;
    font-size: 1rem;
    pointer-events: none;
    transition: all 0.3s;
    z-index: 10;
}

.input-group-modern:focus-within .input-icon {
    color: var(--blue-500);
    opacity: 1;
    transform: scale(1.15);
}

.input-group-modern .form-control-minimal {
    padding-left: 3.5rem !important; /* Fixed overlap */
}

.yape-professional-area {
    background: #f8fafc;
    border-radius: 1.5rem;
    padding: 3rem;
    border: 2px dashed #e2e8f0;
    transition: all 0.3s;
}

.fraud-notice-glass {
    background: rgba(239, 68, 68, 0.04);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 1.5rem;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.fraud-notice-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #ef4444;
}

.fraud-icon-shield {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.text-danger-emphasis {
    color: #991b1b !important;
    letter-spacing: 0.05em;
}

.yape-professional-area:hover {
    border-color: var(--blue-500);
    background: #fff;
}

.qr-container-premium {
    display: flex; width: max-content;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 2rem;
    box-shadow: 0 25px 50px -12px rgba(30, 58, 138, 0.15);
    margin-bottom: 2.5rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(30, 58, 138, 0.05);
}

.qr-container-premium img {
    border-radius: 1.2rem;
    width: 180px;
    height: 180px;
    object-fit: cover !important;
}

.qr-container-premium:hover {
    transform: translateY(-10px) rotate(-1deg);
    box-shadow: 0 40px 60px -15px rgba(30, 58, 138, 0.25);
}

.color-navy {
    color: var(--navy-900);
}

.letter-spacing-1 {
    letter-spacing: 0.1em;
}

.voucher-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-premium);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s, opacity 0.5s;
    border: 1px solid rgba(0,0,0,0.05);
}

.voucher-card:hover {
    transform: translateY(-5px);
}

.voucher-card-img-container {
    height: 350px;
    background: #f1f5f9;
    overflow: hidden;
    position: relative;
}

.voucher-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
    transition: transform 0.3s;
}

.voucher-card:hover .voucher-card-img {
    transform: scale(1.1);
}

.voucher-card-body {
    padding: 1rem;
}

.voucher-card-name {
    font-weight: 800;
    color: var(--blue-500);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}

.status-badge-premium {
    padding: 0.6rem 1.5rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex; width: max-content;
}

.status-badge-premium.status-valid {
    background: #ecfdf5;
    color: #059669;
}

.status-badge-premium.status-pending {
    background: #fffbeb;
    color: #d97706;
}

.status-error {
    background: #fef2f2;
    color: #dc2626;
    padding: 1.5rem;
    border-radius: 1rem;
    font-weight: 700;
}

.voucher-card-meta {
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 600;
}

.quick-validate-btn {
    width: 100%;
    margin-top: 1rem;
    padding: 0.8rem;
    border-radius: var(--radius-md);
    background: #ecfdf5;
    color: #059669;
    border: none;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    transition: all 0.2s;
}

.quick-validate-btn:hover {
    background: #059669;
    color: #fff;
}

.validating-animation {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

/* ============================================================
   UNIFIED RESPONSIVE SYSTEM - OLA 2000
   ============================================================ */

@media (max-width: 991.98px) {
    body { padding-top: 10.5rem; }
    .nav-logo-img { height: 50px; }
    .moving-ticker-professional { top: 88px; }
    .wizard-progress-nav { margin-top: 2rem; }
}

@media (max-width: 767.98px) {
    body { padding-top: 8.5rem !important; }

    /* Fixed Header Adjustments */
    .top-navbar-professional { padding: 0.6rem 0 !important; border-bottom-width: 2px; }
    .nav-logo-img { height: 42px !important; }
    .nav-social-container { display: none !important; } /* Hide social icons on mobile header */
    
    .moving-ticker-professional { 
        top: 66px !important; 
        padding: 0.5rem 0 !important; 
        font-size: 0.7rem !important; 
        letter-spacing: 0.1em !important;
    }

    /* Wizard Re-alignment */
    .wizard-progress-nav { 
        margin-top: 0.5rem !important; 
        padding: 1rem 0 !important; 
        gap: 0.8rem !important;
        justify-content: space-around;
        width: 100%;
    }
    .wizard-item span { display: none !important; } /* Only icons on mobile */
    .wizard-item { opacity: 0.4; flex: 1; justify-content: center; }
    .wizard-item.active { opacity: 1; transform: scale(1.1); }
    .wizard-dot { width: 35px; height: 35px; font-size: 1rem; }

    /* Main Card Scaling */
    .enrollment-main-card { 
        padding: 1.5rem !important; 
        border-radius: 1.25rem !important; 
        margin-top: 0 !important; 
    }
    .section-title-professional { 
        font-size: 1.15rem !important; 
        margin-bottom: 1.5rem !important; 
    }

    /* Form Elements */
    .form-control-minimal { font-size: 0.95rem !important; padding: 0.9rem 1.2rem 0.9rem 3.5rem !important; }
    .btn-professional { width: 100% !important; padding: 1rem !important; }

    /* Security/Disuasion Message */
    .disuasion-box { padding: 1rem !important; font-size: 0.8rem !important; }

    /* Payment Area */
    .yape-professional-area { padding: 1.5rem 1rem !important; }
    .qr-container-premium img { width: 140px !important; height: auto !important; }
}

@media (max-width: 480px) {
    body { padding-top: 8rem !important; }
    .moving-ticker-professional { top: 62px !important; }
    .wizard-dot { width: 30px; height: 30px; font-size: 0.9rem; }
    .enrollment-main-card { padding: 1.25rem 1rem !important; }
}

.cursor-pointer { cursor: pointer; }

/* --- RE-STYLING REALISTIC ALERTS --- */
.swal-alert-realistic-danger {
    background: #7f1d1d !important; /* Rich Dark Red */
    color: #ffffff !important;
    border-radius: 2rem !important;
    border: 3px solid #b91c1c !important;
    animation: swal-shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes swal-shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

.swal-alert-realistic-danger .swal2-title {
    color: #ffffff !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    font-size: 1.35rem !important;
}

.swal-alert-realistic-danger .swal2-html-container {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}

.swal-alert-realistic-danger .swal2-confirm {
    background-color: #ffffff !important;
    color: #991b1b !important;
    font-weight: 800 !important;
}

.swal-alert-realistic-danger .swal2-cancel {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

.swal-alert-realistic-danger .swal2-icon.swal2-warning {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

.yape-badge-elite {
    background: linear-gradient(135deg, #742d8a, #9c44b5);
    color: #fff;
    padding: 12px 30px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: 0.15em;
    box-shadow: 0 15px 30px rgba(116, 45, 138, 0.4);
    margin: 1.5rem 0 2.5rem;
    text-transform: uppercase;
    border: 3px solid rgba(255, 255, 255, 0.1);
}

.yape-badge-elite i { 
    color: #ff3b81; 
    filter: drop-shadow(0 0 5px rgba(255, 59, 129, 0.5));
}

/* --- DUAL MODULE SWITCHER --- */
.main-module-switcher {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 100px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #fff;
}

.module-tab-btn {
    border: none;
    background: transparent;
    padding: 1rem 2rem;
    border-radius: 100px;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--navy-600);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.module-tab-btn.active {
    background: var(--navy-900);
    color: #fff;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);
    transform: translateY(-2px);
}

/* --- PREMIUM DARK ACCENTS --- */
.bg-navy-900 { background: #0f172a !important; }
.text-navy-900 { color: #0f172a !important; }
.bg-white-10 { background: rgba(255, 255, 255, 0.1) !important; }

.enrollment-main-card, .instruction-guide-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.04);
    transition: all 0.3s ease;
    border-radius: 2.5rem;
    padding: 2.75rem;
}

.instruction-guide-card .guide-step-num {
    background: #f1f5f9;
    color: #1e293b;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
}

.search-group:focus-within {
    outline: 2px solid #0f172a;
    box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.1);
}

.wizard-dot {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
}

/* --- MOBILE-FIRST LUXURY FIXES --- */
@media (max-width: 991px) {
    .top-navbar-professional {
        padding: 10px 0 !important;
    }
    .nav-logo-img {
    height: 75px; 
    width: auto;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.1));
    transition: transform 0.3s ease;
}

.nav-brand-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.5px;
    background: linear-gradient(to right, #fff, rgba(255,255,255,0.8));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.nav-brand-subtitle {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
    .enrollment-main-card, .instruction-guide-card {
        padding: 1.5rem !important;
        margin-bottom: 2rem;
    }
}

@media (max-width: 768px) {
    .h1 { font-size: 1.4rem !important; margin-bottom: 1rem !important; }
    .h3 { font-size: 1.15rem !important; }
    p { font-size: 0.9rem !important; }
    
    .wizard-progress-nav {
        gap: 0.75rem !important;
        margin-bottom: 1.5rem !important;
        padding-top: 10px;
    }
    
    .wizard-dot {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.8rem;
    }

    .wizard-item span {
        font-size: 0.6rem !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
}

@media (max-width: 576px) {
    body {
        background: #f8fafc !important; /* Lighter background for better contrast */
    }
    
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .enrollment-main-card, .instruction-guide-card {
        padding: 1.25rem !important;
        border-radius: 1.25rem !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; /* Softer shadow */
    }

    .wizard-item span {
        display: none !important; /* Hide labels for maximum compactness */
    }

    .wizard-progress-nav {
        justify-content: center !important;
        gap: 2.5rem !important;
    }

    .input-group-modern {
        padding: 6px 10px !important;
    }

    .form-control-minimal {
        font-size: 0.85rem !important;
    }

    .form-label-professional {
        font-size: 0.75rem !important;
        margin-bottom: 4px !important;
    }

    .btn-professional {
        padding: 10px !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
    }
    
    .nav-logo-img {
        height: 55px !important;
    }
    .nav-brand-title {
        font-size: 1.4rem !important;
    }
}

@media (max-width: 576px) {
    .nav-logo-img {
        height: 48px !important;
    }
    .nav-brand-title {
        font-size: 1.25rem !important;
    }
    .nav-brand-subtitle {
        font-size: 0.65rem !important;
    }
    .p-5.bg-navy-900 {
        padding: 1.75rem !important;
        border-radius: 1.25rem !important;
    }
    
    .search-group {
        padding: 4px 10px !important;
    }
    
    .search-group input {
        font-size: 0.8rem !important;
    }
}

/* Ensure the scroll is smooth and clean */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.instruction-guide-card {
    background: #fff;
    border-radius: 2rem;
    padding: 3.5rem 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}

.guide-step-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px dashed #e2e8f0;
}

.guide-step-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.guide-step-num {
    width: 45px;
    height: 45px;
    background: #eff6ff;
    color: var(--blue-500);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.guide-content h4 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--navy-900);
    margin-bottom: 0.5rem;
}

.guide-content p {
    font-size: 0.85rem;
    color: var(--navy-600);
    margin-bottom: 0;
}

/* Compact SweetAlert Mobile Overrides */
@media (max-width: 576px) {
    .compact-swal-mobile {
        padding: 1.25rem !important;
        border-radius: 1.5rem !important;
    }
    .compact-swal-mobile .swal2-title {
        font-size: 1.05rem !important;
        padding-top: 0 !important;
    }
    .compact-swal-mobile .swal2-html-container {
        margin: 0.25rem 0 !important;
        padding: 0 !important;
    }
    .compact-swal-mobile .swal2-icon {
        margin: 0.5rem auto 1rem !important;
        transform: scale(0.8) !important;
    }
    .compact-swal-mobile .swal2-actions {
        margin-top: 0.75rem !important;
        gap: 0.5rem !important;
    }
    .compact-swal-mobile .swal2-confirm, 
    .compact-swal-mobile .swal2-cancel {
        padding: 10px 15px !important;
        font-size: 0.75rem !important;
    }
}
/* Ultra-Modern Payment Track */
.track-step {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.track-step:hover {
    transform: translateY(-5px);
    border-color: var(--blue-500) !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1) !important;
}

.step-num-circle {
    width: 38px;
    height: 38px;
    background: var(--navy-900);
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .step-num-circle {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
        border-radius: 10px;
    }
}
/* Premium Visual Roadmap */
.col-md-2-5 {
    width: 20%;
}

.roadmap-icon-wrapper {
    position: relative;
    width: 70px;
}

.smartphone-mockup {
    width: 50px;
    height: 80px;
    background: #1e293b;
    border-radius: 12px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    position: relative;
    border: 3px solid #334155;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2);
}

.bg-purple-yape { background: #742284 !important; border-color: #9333ea !important; }

.roadmap-number {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    background: var(--blue-500);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.8rem;
    border: 3px solid #fff;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.xx-small { font-size: 0.65rem; }
.line-height-1 { line-height: 1.25; }

.mockup-inner-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 2px solid var(--blue-400);
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.4); opacity: 0; }
}

@media (max-width: 768px) {
    .col-md-2-5 { width: 100%; }
    .roadmap-icon-wrapper { width: 60px; margin-bottom: 0 !important; }
    .smartphone-mockup { height: 60px; width: 40px; font-size: 1.1rem; }
}
/* Infographic Final Step Style */
.payment-infographic-container {
    border: 1px solid #e2e8f0;
}

.infographic-header {
    border-bottom: 2px solid #f1f5f9;
}

.step-phone-mockup {
    width: 48px;
    height: 70px;
    border-radius: 10px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.step-index {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: var(--navy-900);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #e2e8f0;
}

.info-step-item {
    text-align: center;
    transition: transform 0.3s ease;
}

.info-step-item:hover {
    transform: translateY(-3px);
}

.xxx-small { font-size: 0.6rem; }

@media (max-width: 768px) {
    .infographic-body .d-flex {
        gap: 2rem !important;
    }
    .infographic-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* --- NEW MODERN SPLIT FAQ STYLES --- */
.faq-card-premium {
    background: #fff;
    border-radius: 2rem;
    border: 1px solid #f1f5f9;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.faq-card-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05);
    border-color: var(--blue-500);
}

.faq-header-btn {
    width: 100%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    text-align: left;
    transition: all 0.3s;
}

.faq-index-circle {
    width: 40px;
    height: 40px;
    background: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--blue-500);
    transition: all 0.3s;
}

.faq-header-btn:not(.collapsed) .faq-index-circle {
    background: var(--blue-500);
    color: #fff;
    transform: scale(1.1);
}

.faq-chevron {
    font-size: 0.8rem;
    transition: transform 0.4s;
    opacity: 0.3;
}

.faq-header-btn:not(.collapsed) .faq-chevron {
    transform: rotate(180deg);
    opacity: 1;
    color: var(--blue-500);
}

.faq-body-content {
    line-height: 1.8;
    font-size: 1rem;
}

.hover-scale {
    transition: all 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}

@media (max-width: 991px) {
    .faq-header-btn {
        padding: 1.5rem;
    }
    .faq-index-circle {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
}


/* --- PREMIUM NEXUS DESIGN SYSTEM --- */
.wizard-modern-container {
    position: relative;
    max-width: 800px; /* Increased for wider layout */
    margin: 0 auto 3rem;
    padding: 20px 0;
}

.wizard-line-bg {
    position: absolute;
    top: 48px;
    left: 40px;
    right: 40px;
    height: 4px;
    background: #f1f5f9;
    z-index: 1;
    border-radius: 10px;
}

.wizard-line-fill {
    position: absolute;
    top: 48px;
    left: 40px;
    height: 4px;
    background: linear-gradient(90deg, #1e3a8a, #3b82f6);
    z-index: 2;
    border-radius: 10px;
    transition: width 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}

.wizard-steps-wrapper {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
}

.wizard-step-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    text-align: center;
}

.node-circle {
    width: 60px;
    height: 60px;
    background: #fff;
    border: 3px solid #f1f5f9;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #94a3b8;
    font-size: 1.25rem;
    transition: all 0.4s;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.node-label {
    margin-top: 12px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.05em;
}

.wizard-step-node.active .node-circle {
    border-color: #1e3a8a;
    color: #1e3a8a;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(30, 58, 138, 0.1);
}

.wizard-step-node.active .node-label { color: #1e3a8a; }

.wizard-step-node.completed .node-circle {
    background: #1e3a8a;
    border-color: #1e3a8a;
    color: #fff;
}

.panoramic-portal-container {
    max-width: 1350px !important;
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}

/* Premium Form Blocks */
.form-card-modern {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 3rem;
    padding: 4rem; /* Luxury Desktop Padding */
    box-shadow: 0 25px 60px -15px rgba(0,0,0,0.15);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.form-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.2);
}

.section-indicator {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    gap: 15px;
}

.section-icon {
    width: 44px;
    height: 44px;
    background: rgba(30, 58, 138, 0.05);
    color: #1e3a8a;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-title-modern {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    color: #0f172a;
}

.nexus-input-group {
    margin-bottom: 1.5rem;
}

.nexus-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    margin-bottom: 8px;
    margin-left: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-height: 1.2rem; /* Sync row heights */
}

.nexus-input-box {
    position: relative;
}

.nexus-input {
    width: 100%;
    padding: 0.85rem 0.5rem;
    padding-right: 2.2rem;
    background: #f8fafc;
    border: 2px solid transparent;
    border-radius: 16px;
    font-weight: 600;
    color: #0f172a;
    transition: all 0.3s;
    font-size: 0.72rem;
    appearance: none;
    -webkit-appearance: none;
}

.nexus-input:focus {
    outline: none;
    background: #fff;
    border-color: #3b82f6;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.08);
}

.nexus-icon {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: #cbd5e1;
}

/* Notice Component */
.wsp-premium-notice {
    background: #f0f7ff;
    padding: 1rem;
    border-radius: 12px;
    margin-top: 1rem;
    display: flex;
    gap: 12px;
    align-items: center;
}

.wsp-text { font-size: 0.75rem; color: #1e40af; font-weight: 700; }

.btn-nexus-main {
    background: #0f172a;
    color: #fff;
    border: none;
    padding: 1.5rem;
    border-radius: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    transition: all 0.3s;
    width: 100%;
}

.btn-nexus-main:hover {
    background: #1e3a8a;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(15, 23, 42, 0.2);
    color: #fff;
}

/* End of Headers */

/* ==========================================================================
   MOBILE-FIRST ELITE EXCELLENCE (Optimización Móvil Superior)
   ========================================================================== */
@media (max-width: 768px) {
    body {
        padding-top: 5.5rem !important; /* Perfect fit for mobile fixed nav */
    }

    .display-4 { font-size: 1.6rem !important; }
    .display-5 { font-size: 1.35rem !important; }
    .display-6 { font-size: 1.15rem !important; }
    
    .mb-5 { margin-bottom: 1.25rem !important; } 
    .mt-5 { margin-top: 1.5rem !important; } 
    .pt-lg-4 { padding-top: 0 !important; }

/* Spacing normalized */

    /* Step 1 Compactness & Width (Solving the narrow form issue) */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .px-3.px-lg-5 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .form-card-modern {
        padding: 1.25rem 0.85rem !important; /* Más ancho internamente */
        border-radius: 1.5rem !important;
        margin-bottom: 1rem !important;
        width: 100% !important;
    }

    .section-indicator {
        margin-bottom: 1.5rem !important;
        gap: 10px !important;
    }

    .section-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .section-title-modern {
        font-size: 0.68rem !important;
    }

    .nexus-label {
        font-size: 0.68rem !important;
        margin-bottom: 3px !important;
    }

    .nexus-input-group {
        margin-bottom: 0.85rem !important;
    }

    .nexus-input {
        padding: 0.7rem 0.5rem !important;
        padding-right: 2rem !important;
        border-radius: 10px !important;
        font-size: 0.72rem !important;
    }

    .row.g-4 {
        --bs-gutter-y: 0.75rem !important; /* Compactar espacio vertical entre campos */
    }

    /* Portal Cards Mobile */
    .massive-portal-card {
        min-height: 350px;
        padding: 1.8rem;
        border-radius: 2rem;
    }
    
    .portal-icon-wrapper {
        width: 70px;
        height: 70px;
        margin-bottom: 1.25rem;
    }
    
    .portal-icon-wrapper i {
        font-size: 2.2rem;
    }
    
    .btn-portal-action {
        padding: 0.85rem 1.25rem;
        font-size: 0.75rem;
    }

    /* Navbar Mobile */
    .nav-logo-img { height: 40px; }
    .nav-brand-title { font-size: 1.1rem; }
    .mob-whatsapp-btn {
        width: 54px;
        height: 54px;
        font-size: 1.6rem;
    }
    
    /* Wizard / Steps Mobile */
    .wizard-step-node {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
    
    .step-label-modern {
        font-size: 0.55rem !important;
    }

    /* Hide redundant elements visually for speed */
    .portal-card-overlay { display: none; }
}

@media (max-width: 480px) {
    .container { padding-left: 20px; padding-right: 20px; }
    .display-6 { font-size: 1.5rem !important; }
}
/* --- VALIDATION FEEDBACK --- */
.is-invalid.nexus-input, .is-invalid.form-control {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important;
}

.is-valid.nexus-input, .is-valid.form-control {
    border-color: #10b981 !important;
    background-color: #f0fdf4 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
}

.nexus-input.is-invalid ~ .nexus-icon {
    color: #ef4444 !important;
}

.nexus-input.is-valid ~ .nexus-icon {
    color: #10b981 !important;
}

.invalid-feedback-modern {
    color: #ef4444;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 0.5rem;
    display: none;
    animation: fadeIn 0.3s;
}

.is-invalid ~ .invalid-feedback-modern {
    display: block;
}