@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400;1,600;1,700&display=swap');

:root {
    --bg-tech-dark: #070913;
    --cyan-neon: #06b6d4;
    --purple-glow: #6366f1;
    --emerald-neon: #10b981;
    --magenta-glow: #a855f7;
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.12);
}

/* ==========================================
   1. BASE Y CONFIGURACIÓN DE SNAP SCROLL
   ========================================== */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--bg-tech-dark);
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #f8fafc;
}

.snap-scroll-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.snap-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100vh;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

/* ==========================================
   2. PÍLDORA Y MENÚ DE NAVEGACIÓN FLOTANTE
   ========================================== */
header.position-fixed {
    top: 12px !important;
    z-index: 1050 !important;
}

.glass-pill-nav {
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: fit-content;
}

.nav-logo-img {
    height: 28px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(6, 182, 212, 0.3));
}

.max-w-95vw {
    max-width: 95vw;
}

.nav-pill-link {
    transition: all 0.25s ease;
    color: rgba(255, 255, 255, 0.75) !important;
    white-space: nowrap;
    /* Previene saltos de línea en 'Casos de Éxito' */
    letter-spacing: 0.02em;
}

.nav-pill-link:hover,
.nav-pill-link.active-section {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.14);
}

/* ==========================================
   3. HERO SECTION ANIMADO CON PINNED SCROLL
   ========================================== */
.hero-scroll-wrapper {
    height: 140vh;
    /* Espacio para animación interactiva del logo */
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.hero-sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: radial-gradient(circle at center, #130e2a 0%, #070913 80%);

    /* Espacio reservado superior para que el menú no se encime */
    padding-top: 5.5rem !important;
    padding-bottom: 3.5rem !important;
    box-sizing: border-box;
}

#heroTextBlock {
    margin-top: 1rem !important;
}

.tech-orb-bg {
    position: absolute;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.55) 0%, rgba(99, 102, 241, 0.3) 50%, rgba(0, 0, 0, 0) 70%);
    filter: blur(80px);
    z-index: 1;
    pointer-events: none;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

.hero-super-title {
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    letter-spacing: -0.04em;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    background: linear-gradient(180deg, #ffffff 30%, rgba(255, 255, 255, 0.6) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-logo-center-wrapper {
    perspective: 1000px;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

.valcorp-center-logo {
    max-height: 220px !important;
    /* Optimizado para balance vertical */
    width: auto;
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 35px rgba(99, 102, 241, 0.4));
    transition: filter 0.2s ease-out;
}

.hero-action-card {
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    text-align: center;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

/* ==========================================
   4. COMPONENTES GLASS Y BOTONES
   ========================================== */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
    border-color: rgba(6, 182, 212, 0.3) !important;
    box-shadow: 0 12px 30px rgba(6, 182, 212, 0.15);
}

.btn-glass-cyan {
    background: rgba(6, 182, 212, 0.2);
    border: 1px solid var(--cyan-neon);
    color: #fff;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.btn-glass-cyan:hover {
    background: var(--cyan-neon);
    color: #000;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.6);
}

.bg-tech-badge {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(8px);
}

/* ==========================================
   5. SECCIÓN UPGRADE Y CONMUTADOR
   ========================================== */
.upgrade-hero-typography {
    line-height: 0.95;
    letter-spacing: -0.04em;
}

.upgrade-line-main {
    font-size: clamp(2.5rem, 6.5vw, 5.5rem);
    text-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
}

.upgrade-line-italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(3.2rem, 8.5vw, 7.5rem);
    background: linear-gradient(135deg, #ffffff 20%, #06b6d4 80%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 15px 30px rgba(6, 182, 212, 0.3));
}

.mission-vision-switch button {
    transition: all 0.25s ease;
    font-size: 0.85rem;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7) !important;
}

.mission-vision-switch button.active-tab-cyan {
    background: #06b6d4 !important;
    color: #070913 !important;
    font-weight: 800 !important;
    box-shadow: 0 0 18px rgba(6, 182, 212, 0.6);
}

.mission-vision-switch button.active-tab-emerald {
    background: #10b981 !important;
    color: #070913 !important;
    font-weight: 800 !important;
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.6);
}

.mission-vision-pane.active-pane {
    animation: fadeInPane 0.35s ease forwards;
}

@keyframes fadeInPane {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-glow-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.25) 0%, rgba(99, 102, 241, 0.15) 50%, transparent 80%);
    filter: blur(60px);
    pointer-events: none;
}

/* ==========================================
   6. ANIMACIONES DE ENTRADA (INTERSECTION OBSERVER)
   ========================================== */
.reveal-card {
    opacity: 0;
    transform: translateY(30px) scale(0.96);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.25s;
}

.delay-3 {
    transition-delay: 0.4s;
}

/* ==========================================
   7. TARJETAS DE CASOS DE ÉXITO (GRIS CLARO)
   ========================================== */
.client-logo-card {
    height: 110px;
    background: rgba(225, 232, 240, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease;
    cursor: pointer;
}

.client-logo-card:hover {
    transform: translateY(-8px) scale(1.03);
    background: rgba(241, 245, 249, 0.22) !important;
    border-color: rgba(6, 182, 212, 0.6) !important;
    box-shadow: 0 14px 35px rgba(6, 182, 212, 0.25), 0 0 15px rgba(6, 182, 212, 0.15);
}

.client-logo-img {
    max-height: 65px;
    max-width: 85%;
    object-fit: contain;
    filter: brightness(1) opacity(0.95);
    transition: filter 0.35s ease, transform 0.35s ease;
}

.client-logo-card:hover .client-logo-img {
    filter: brightness(1.1) opacity(1);
    transform: scale(1.06);
}

/* ==========================================
   8. CONTACTO DIRECTO, MODAL Y FOOTER
   ========================================== */
.contact-action-card {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
}

.contact-action-card:hover {
    transform: translateY(-8px) scale(1.03);
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(6, 182, 212, 0.5) !important;
    box-shadow: 0 14px 35px rgba(6, 182, 212, 0.25), 0 0 15px rgba(6, 182, 212, 0.15);
}

.contact-action-card .icon-box {
    transition: transform 0.35s ease;
}

.contact-action-card:hover .icon-box {
    transform: scale(1.12) rotate(4deg);
}

#formModal .modal-content {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(6, 182, 212, 0.25);
}

#formModal iframe {
    background: transparent;
}

.hover-cyan {
    transition: color 0.25s ease;
}

.hover-cyan:hover {
    color: var(--cyan-neon) !important;
}

.text-cyan-glow {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.8), 0 0 20px rgba(6, 182, 212, 0.4);
    letter-spacing: 0.05em;
}