.wow {
    visibility: hidden;
}

/* ================================
   HERO SECTION STYLES
================================= */
:root {
    --gradient-primary: linear-gradient(135deg, #ff00ff 0%, #00ffea 50%, #0061f6 100%);
    --gradient-secondary: linear-gradient(135deg, #0061f6 0%, #000043 100%);
    --color-magenta: #ff00ff;
    --color-cyan: #00ffea;
    --color-blue: #0061f6;
    --color-dark-blue: #000043;
    --color-white: #ffffff;
    --font-heading: 'Merriweather', sans-serif;
    --font-body: 'Inter', sans-serif;
    --transition: all 0.3s ease;
    --header-bg: rgba(0, 0, 67, 0.7);
    --header-bg-scrolled: rgba(0, 0, 67, 0.2);
    --header-text: #ffffff; 
}

/* Hero Container */
.hero-home {
    position: relative;
    min-height: calc(100vh + 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-dark-blue);
    overflow: hidden;
    padding: 0px;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 1100px;
    margin: 0 auto;
}

/* Hero Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 2rem;
    transition: var(--transition);
}

.hero-badge:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.badge-icon {
    font-size: 1.2rem;
}

.badge-text {
    color: var(--color-white);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Hero Title */
h1,
.hero-title {
    font-family: var(--font-heading);
    font-size: 3.4rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-white);
    margin-bottom: 1rem; 
}

.gradient-text {
    /* background: var(--gradient-primary); */
    /* -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; */
}

/* Hero Subtitle */
.lead,
.hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.4rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* CTA Buttons */
.hero-cta-wrapper {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    padding: 18px 40px;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    color: #000043;
    /* Texto oscuro para máximo contraste */
    background: #00ffea;
    /* Cyan brillante */
    border-radius: 50px;
    transition: var(--transition);
    box-shadow: 0 10px 30px rgba(0, 255, 234, 0.4);
    position: relative;
    overflow: hidden;
}

.btn-hero-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-hero-primary:hover {
    box-shadow: 0 15px 40px rgba(0, 255, 234, 0.6),
        0 0 30px rgba(0, 255, 234, 0.4);
    color: #000043;
    background: #1affef;
    /* Cyan más brillante */
}

.btn-hero-primary:hover::before {
    left: 100%;
}

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    padding: 18px 40px;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--color-white);
    background: transparent;
    border: 2px solid var(--color-white);
    border-radius: 50px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.btn-hero-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--color-white);
    transition: width 0.4s ease;
    z-index: -1;
}

.btn-hero-secondary:hover {
    color: var(--color-dark-blue);
    border-color: var(--color-white);
}

.btn-hero-secondary:hover::before {
    width: 100%;
}
/* ================================
   BUTTON STYLES - SYSTEM
================================= */

/* ================================
   1. BOTÓN NEGRO SÓLIDO
================================= */
.btn-black {
    display: inline-flex;
    align-items: center;
    padding: 18px 40px;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    color: #ffffff;
    background: #000000;
    border: 2px solid #000000;
    border-radius: 50px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.btn-black::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-black:hover {
    background: #1a1a1a;
    color: #ffffff;
}

.btn-black:hover::before {
    left: 100%;
}

/* ================================
   2. BOTÓN TRANSPARENTE BORDE NEGRO
================================= */
.btn-outline-black {
    display: inline-flex;
    align-items: center;
    padding: 18px 40px;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    color: #000000;
    background: transparent;
    border: 2px solid #000000;
    border-radius: 50px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.btn-outline-black::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #000000;
    transition: width 0.4s ease;
    z-index: 0;
}

.btn-outline-black:hover {
    color: #ffffff;
    border-color: #000000;
}

.btn-outline-black:hover::before {
    width: 100%;
}
.btn{
    width: max-content;
    font-size: 16px;
    padding: 13px 30px;
    font-weight: normal;
}
.btn span{
    position: relative
}
.btn:hover span{
    z-index: 3;
}
/* ================================
   3. BOTÓN BLANCO SÓLIDO
================================= */
.btn-white {
    display: inline-flex;
    align-items: center;
    padding: 18px 40px;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    color: #000000;
    background: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 50px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.btn-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    transition: left 0.5s ease;
}

.btn-white:hover {
    background: #f0f0f0;
    color: #000000;
}

.btn-white:hover::before {
    left: 100%;
}

/* ================================
   4. BOTÓN TRANSPARENTE BORDE BLANCO
================================= */
.btn-outline-white {
    display: inline-flex;
    align-items: center;
    padding: 18px 40px;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    color: #ffffff;
    background: transparent;
    border: 2px solid #ffffff;
    border-radius: 50px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.btn-outline-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #ffffff;
    transition: width 0.4s ease;
    z-index: 0;
}

.btn-outline-white:hover i{
    color: black !important;
}
.btn-outline-white:hover {
    color: #000000;
    border-color: #ffffff;
}

.btn-outline-white:hover::before {
    width: 100%;
}

/* ================================
   5. HYPERLINK CON GRADIENTE
================================= */
.link-gradient {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    color: #000000;
    position: relative;
    transition: var(--transition);
}

.link-gradient::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #000000;
    transition: var(--transition);
}

.link-gradient:hover {
    color: transparent;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.link-gradient:hover::after {
    background: var(--gradient-primary);
    height: 3px;
}

.link-gradient i {
    transition: transform 0.3s ease;
}

.link-gradient:hover i {
    transform: translateX(5px);
}

/* Variante blanca del hyperlink */
.link-gradient.link-white {
    color: #ffffff;
}

.link-gradient.link-white::after {
    background: #ffffff;
}

.link-gradient.link-white:hover {
    color: transparent;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.link-gradient.link-white:hover::after {
    background: var(--gradient-primary);
}

/* ================================
   TAMAÑOS DE BOTONES
================================= */

/* Small */
.btn-sm {
    padding: 12px 28px;
    font-size: 0.95rem;
}

/* Medium (default) */
.btn-md {
    padding: 16px 36px;
    font-size: 1rem;
}

/* Large */
.btn-lg {
    padding: 18px 40px;
    font-size: 1.1rem;
}

/* Extra Large */
.btn-xl {
    padding: 20px 50px;
    font-size: 1.2rem;
}

/* ================================
   VARIANTES DE ANCHO
================================= */

/* Full width button */
.btn-block {
    width: 100%;
    justify-content: center;
}

/* Icon spacing */
.btn-black i,
.btn-outline-black i,
.btn-white i,
.btn-outline-white i {
    transition: transform 0.3s ease;
}

.btn-black:hover i,
.btn-outline-black:hover i,
.btn-white:hover i,
.btn-outline-white:hover i {
    transform: translateX(3px);
}
/* Trust Text */
.hero-trust {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.trust-item {
    display: inline-flex;
    align-items: center;
}

.trust-item i {
    color: var(--color-cyan);
}

.trust-divider {
    color: rgba(255, 255, 255, 0.3);
}

/* Animated Background */
.hero-bg-animated {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: float 20s infinite ease-in-out;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: var(--color-magenta);
    top: -250px;
    left: -250px;
    animation-delay: 0s;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: var(--color-cyan);
    bottom: -200px;
    right: -200px;
    animation-delay: 7s;
}

.orb-3 {
    width: 600px;
    height: 600px;
    background: var(--color-blue);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 14s;
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(50px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-50px, 50px) scale(0.9);
    }
}

/* Scroll Indicator - Mouse Animated */
.scroll-indicator {
    position: absolute;
    bottom: 80px;
    left: 0;
    margin: auto;
    right: 0;
    z-index: 10;
}

.scroll-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: var(--transition);
}

.scroll-link span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: var(--transition);
}

/* Mouse Icon */
.scroll-mouse {
    width: 26px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    position: relative;
    transition: var(--transition);
}

.scroll-mouse::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--color-cyan);
    border-radius: 2px;
    animation: scroll-wheel 2s infinite;
    box-shadow: 0 0 10px var(--color-cyan);
}

@keyframes scroll-wheel {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

.scroll-link:hover .scroll-mouse {
    border-color: var(--color-cyan);
    box-shadow: 0 0 20px rgba(0, 255, 234, 0.3);
}

.scroll-link:hover span {
    color: var(--color-cyan);
}

/* Responsive */
@media (max-width: 767px) {
    .scroll-indicator {
        bottom: 30px;
    }

    .scroll-mouse {
        width: 22px;
        height: 35px;
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}



/* ================================
   ANIMATIONS & EFFECTS
================================= */

/* Fade in animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Pulse animation for badge */
.hero-badge {
    animation: pulse 3s infinite;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 234, 0.4);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(0, 255, 234, 0);
    }
}

/* Gradient animation */
.gradient-text {
    background-size: 200% auto;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

/* Button hover glow effect */
.btn-hero-primary,
.btn-hero-secondary {
    position: relative;
    z-index: 1;
}

.btn-hero-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: -1;
}

.btn-hero-primary:active::after {
    width: 300px;
    height: 300px;
}

/* Loading effect */
body.loading .hero-content>* {
    opacity: 0;
}

 

.dropdown-toggle::after {
    display: none
}

/* Header Container - Glassmorphism Effect */
.header-modern {
    position: fixed;
    top: 15px;
    left: 0;
    right: 0;
    width: calc(100% - 60px);
    margin: 0 auto;
    z-index: 1000;
    padding: 1rem 2rem;
    border-radius: 5px;

    /* Glassmorphism Effect */
    background: var(--header-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    /* Border with gradient */
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    z-index: 9999;
    transition: var(--transition);
}

/* Scrolled State */
.header-modern.scrolled {
    width: 100%;
    top: 0px;
    border-radius: 0px;
    background: var(--header-bg-scrolled);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
    padding: 1rem 2rem;
}

/* Gradient Border Animation on Hover */
.header-modern.scrolled::before {
    border-radius: 0px;

}

.header-modern::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--gradient-primary);
    border-radius: 5px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.header-modern:hover::before {
    opacity: 0.5;
    animation: rotate-gradient 3s linear infinite;
}

@keyframes rotate-gradient {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

.header-container {
    width: 100%;
}

/* Logo */
.logo-wrapper {
    display: flex;
    align-items: center;
}

.logo-link {
    display: inline-block;
    transition: var(--transition);
}

.logo-link:hover {
    transform: scale(1.05);
}

.logo-img {
    height: 40px;
    width: auto;
    transition: var(--transition);
}

/* Desktop Navigation */
.main-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-item {
    position: relative;
}

.nav-link {
    color: var(--header-text);
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    transition: var(--transition);
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    text-transform: uppercase;
}
.nav-link.active,
.nav-link:hover {
    color: var(--color-cyan);
}
.nav-link.active::after,
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
}
.nav-link.active::after,
.nav-link:hover::after {
    width: 100%;
}

/* Special Link (MadisonAlley.TV) */
.nav-link-special {
    color: var(--header-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 0.6rem 1.5rem;
    background: var(--gradient-primary);
    border-radius: 50px;
    transition: var(--transition);
    display: inline-block;
}

.nav-link-special:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 0, 255, 0.4);
    color: var(--header-text);
}

/* Dropdown */
.dropdown-toggle {
    cursor: pointer;
}

.nav-item.dropdown:hover .dropdown-menu-modern {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu-modern {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--header-bg);
    min-width: 220px;
    padding: 1rem 0;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition);
    margin-top: 1rem;
    list-style: none;
}
.dropdown-item-modern.active,
.dropdown-item-modern {
    display: block;
    padding: 0.8rem 1.5rem;
    color: var(--header-text);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: var(--transition);
}
.nav-link-special.active
.dropdown-item-modern:hover {
    background: rgba(0, 255, 234, 0.1);
    color: var(--color-cyan);
    padding-left: 2rem;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    background: transparent;
    border: none;
    padding: 0;
    width: 30px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: var(--transition);
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background: var(--header-text);
    border-radius: 2px;
    transition: var(--transition);
}

.mobile-menu-toggle:hover .hamburger-line {
    background: var(--color-cyan);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--header-bg);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    overflow-y: auto;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    padding: 2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}

.mobile-logo {
    height: 35px;
    width: auto;
}

.mobile-menu-close {
    background: transparent;
    border: none;
    color: var(--header-text);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.mobile-menu-close:hover {
    color: var(--color-cyan);
    transform: rotate(90deg);
}

/* Mobile Navigation */
.mobile-nav {
    flex: 1;
}

.mobile-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-item {
    margin-bottom: 0.5rem;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    color: var(--header-text);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: var(--transition);
}

.mobile-nav-link:hover {
    background: rgba(0, 255, 234, 0.1);
    color: var(--color-cyan);
    padding-left: 1.5rem;
}

.mobile-nav-link-special {
    display: block;
    padding: 1rem;
    color: var(--header-text);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    background: var(--gradient-primary);
    border-radius: 50px;
    text-align: center;
    margin-top: 1rem;
    transition: var(--transition);
}

.mobile-nav-link-special:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(255, 0, 255, 0.4);
}

/* Mobile Submenu */
.mobile-submenu {
    list-style: none;
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-nav-item.has-submenu.active .mobile-submenu {
    max-height: 500px;
}

.mobile-dropdown-toggle i {
    transition: var(--transition);
}

.mobile-nav-item.has-submenu.active .mobile-dropdown-toggle i {
    transform: rotate(180deg);
}

.mobile-submenu-link {
    display: block;
    padding: 0.8rem 1rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 6px;
    transition: var(--transition);
}

.mobile-submenu-link:hover {
    background: rgba(0, 255, 234, 0.1);
    color: var(--color-cyan);
    padding-left: 1.5rem;
}

/* Mobile Menu Footer */
.mobile-menu-footer {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: var(--header-text);
    text-decoration: none;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: var(--transition);
}

.mobile-contact-link:hover {
    background: rgba(0, 255, 234, 0.1);
    color: var(--color-cyan);
}













/* ================================
   TRUST BAR / SOCIAL PROOF SECTION
================================= */
.trust-bar-section {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}
.section-mod{
    padding: 80px 0px
}
/* Trust Label */
.trust-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--color-gray);
    font-weight: 500;
    margin-bottom: 0;
    position: relative;
    display: inline-block;
}

.trust-label::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--gradient-primary);
}

/* Logo Carousel */
.logo-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 2rem 0;
}

.logo-carousel::before,
.logo-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.logo-carousel::before {
    left: 0;
    background: linear-gradient(to right, #f5f5f5, transparent);
}

.logo-carousel::after {
    right: 0;
    background: linear-gradient(to left, #f5f5f5, transparent);
}
 
.landmark-description strong{display: none;}
.logo-track {
    display: flex;
    gap: 4rem;
    animation: scroll-logos 10s linear infinite;
}

.logo-track:hover {
    animation-play-state: paused;
}

@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-100% - 7rem));
    }
}

.logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: var(--transition);
    padding: 1rem 2rem;
}

.logo-item:hover {
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
}

.logo-item img {
    max-width: 140px;
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    transition: var(--transition);
}

.logo-item:hover img {
    filter: grayscale(0%);
}
 
/* Decorative Background */
.trust-bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.trust-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.1;
}

.orb-left {
    width: 400px;
    height: 400px;
    background: var(--color-cyan);
    top: -200px;
    left: -200px;
}

.orb-right {
    width: 500px;
    height: 500px;
    background: var(--color-blue);
    bottom: -250px;
    right: -250px;
}

/* ================================
   RESPONSIVE STYLES
================================= */
@media (max-width: 1200px) {
    .logo-item img {
        max-width: 120px;
        max-height: 45px;
    }

    .logo-track {
        gap: 3rem;
    }
}

@media (max-width: 991px) {
    .trust-bar-section {
        padding: 80px 0;
    }

    .logo-item img {
        max-width: 100px;
        max-height: 40px;
    }

    .logo-track {
        gap: 2.5rem;
    }

    .stat-card {
        padding: 2rem 1rem;
    }

    .stat-number {
        font-size: 2.5rem;
    }

    .stat-prefix,
    .stat-suffix {
        font-size: 1.8rem;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 1rem;
    }

    .stat-icon i {
        font-size: 1.3rem;
    }
}

@media (max-width: 767px) {
    .trust-bar-section {
        padding: 60px 0;
    }

    .trust-label {
        font-size: 0.7rem;
        letter-spacing: 2px;
    }

    .logo-carousel {
        padding: 1.5rem 0;
    }

    .logo-item {
        padding: 0.8rem 1.5rem;
    }

    .logo-item img {
        max-width: 80px;
        max-height: 35px;
    }

    .logo-track {
        gap: 2rem;
        animation: scroll-logos 20s linear infinite;
    }

    .stat-card {
        padding: 1.8rem 1rem;
    }

    .stat-number {
        font-size: 2.2rem;
    }

    .stat-prefix,
    .stat-suffix {
        font-size: 1.6rem;
    }

    .stat-label {
        font-size: 0.85rem;
    }

    .stat-icon {
        width: 45px;
        height: 45px;
    }

    .stat-icon i {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .trust-bar-section {
        padding: 50px 0;
    }

    .logo-carousel::before,
    .logo-carousel::after {
        width: 50px;
    }

    .logo-item {
        padding: 0.5rem 1rem;
    }

    .logo-item img {
        max-width: 70px;
        max-height: 30px;
    }

    .logo-track {
        gap: 1.5rem;
    }

    .stat-card {
        padding: 1.5rem 0.8rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-prefix,
    .stat-suffix {
        font-size: 1.4rem;
    }

    .stat-label {
        font-size: 0.8rem;
    }
}

/* ================================
   ANIMATIONS
================================= */

/* Number counter animation will be handled by JavaScript */
.stat-number.counting {
    animation: number-pop 0.5s ease;
}

@keyframes number-pop {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Gradient shift animation for stats */
.stat-card:hover .stat-number,
.stat-card:hover .stat-prefix,
.stat-card:hover .stat-suffix {
    background-size: 200% auto;
    animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {

    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

/* Pulse animation for icons */
@keyframes icon-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 234, 0.7);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(0, 255, 234, 0);
    }
}

.stat-card:hover .stat-icon {
    animation: icon-pulse 2s infinite;
}




 /* ================================
   CTA CARD WITH IMAGE & GLASS EFFECT
================================= */
 .service-card-cta {
     position: relative;
     border-radius: 8px;
     height: 100%;
     min-height: 500px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
 }

 /* Background Image */
 .cta-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     z-index: 1;
 }

 /* Dark Overlay */
 .cta-background::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 67, 0.2);
     z-index: 2;
 }

 /* Glass Overlay */
 .cta-glass-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     z-index: 3;
 }

 /* Content */
 .cta-content {
     position: relative;
     z-index: 4;
     padding: 2.5rem 2rem;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
 }

 /* Swiper Container */
 .ctaSwiper {
     width: 100%;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     margin-bottom: 2rem;
 }

 .ctaSwiper .swiper-wrapper {
     flex-grow: 1;
 }

 .ctaSwiper .swiper-slide {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Slide Content */
 .cta-slide-content {
     text-align: center;
     padding: 2rem 1rem;
 }

 .cta-stat-number {
     font-family: var(--font-heading);
     font-size: 5rem;
     font-weight: 800;
     color: #ffffff;
     line-height: 1;
     margin-bottom: 1.5rem;
     text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
     letter-spacing: -2px;
 }

 .cta-stat-label {
     font-size: 1.1rem;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.95);
     line-height: 1.5;
     text-transform: uppercase;
     letter-spacing: 1.5px;
 }

 /* Swiper Pagination */
 .ctaSwiper .swiper-pagination {
     position: relative;
     margin-top: 2rem;
     bottom: auto;
 }

 .ctaSwiper .swiper-pagination-bullet {
     width: 10px;
     height: 10px;
     background: rgba(255, 255, 255, 0.4);
     opacity: 1;
     transition: all 0.3s ease;
     margin: 0 5px;
 }

 .ctaSwiper .swiper-pagination-bullet-active {
     background: #ffffff;
     width: 30px;
     border-radius: 5px;
 }

 /* CTA Button Wrapper */
 .cta-button-wrapper {
     text-align: center;
     margin-top: auto;
 }

 .service-card-cta .btn-white {
     box-shadow: 0 4px 20px rgba(255, 255, 255, 0.3);
 }

 .service-card-cta .btn-white:hover {
     box-shadow: 0 6px 30px rgba(255, 255, 255, 0.5);
     transform: translateY(-2px);
 }
.bg-body-secondary{
    background-color: #f5f5f5 !important;
}
 /* ================================
   SERVICES OVERVIEW SECTION - FORMAL
================================= */
 .services-overview-section {
     padding: 120px 0;
     background: #ffffff;
 }

 /* Section Title */
 .section-title {
     font-family: var(--font-heading);
     font-size: 2.8rem;
     font-weight: 500;
     color: var(--color-dark);
     margin-bottom: 1rem;
     position: relative;
 }

 .section-title::after {
     content: '';
     display: block;
     width: 80px;
     height: 5px;
     background: var(--gradient-primary);
     margin: 20px auto 0;
 }

 /* Service Card Formal */
 .service-card-formal {
     background: #ffffff;
     padding: 30px;
     border: 1px solid #e0e0e0;
     border-radius: 8px;
     height: 100%;
     display: flex;
     flex-direction: column;
     transition: box-shadow 0.3s ease, border-color 0.3s ease;
 }



 /* Service Icon Formal */
 .service-card-formal:hover .service-icon-formal {
     background: var(--color-blue);
 }
 .service-icon-formal {
     width: 70px;
     height: 70px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #444;
     border-radius: 8px;
     margin-bottom: 2rem;
 }

 .service-icon-formal i {
     font-size: 2rem;
     color: #ffffff;
 }

 /* Service Title Formal */
 h3,
 .service-title-formal {
     font-family: var(--font-heading);
     font-size: 1.8rem;
     font-weight: 500;
     color: var(--color-dark);
     margin-bottom: 1.5rem;
 }

 /* Service Description Formal */
 .service-description-formal {
     font-size: 1.05rem;
     line-height: 1.7;
     color: #666666;
     margin-bottom: 2rem;
 }

 /* Benefits List Formal */
 .service-benefits-formal {
     list-style: none;
     padding: 0;
     margin: 0 0 2.5rem 0;
     flex-grow: 1;
 }

 .service-benefits-formal li {
     padding-left: 15px;
     margin-bottom: 3px;
     font-size: 1rem;
     line-height: 1.6;
     position: relative;
 }

 .service-benefits-formal li::before {
     content: '';
     position: absolute;
     left: 0;
     top: 8px;
     width: 6px;
     height: 6px;
     background: var(--color-blue);
     border-radius: 50%;
 }

 .section-subtitle {
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 3px;
     color: var(--color-gray);
     font-weight: 500;
     margin-bottom: 10px;
     position: relative;
     display: inline-block;
 }

 .services-overview-section {
     z-index: 7;
     overflow: initial;
     position: relative;
     margin-top: -40px;
     border-radius: 40px 40px 0px 0px;
 }

 .cta-video-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
 }

 .cta-bg-video {
     position: absolute;
     top: 50%;
     left: 50%;
     min-width: 100%;
     min-height: 100%;
     width: 100%;
     height: auto;
     transform: translate(-50%, -50%);
     object-fit: cover;
 }

 .cta-video-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     /* backdrop-filter: blur(2px); */
     z-index: 2;
 }

 .vertical-align {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
 }

 .height-100 {
     height: 100vh;
 }


 .cta-contact-info {
     margin-top: 4rem;
     padding-top: 3rem;
     border-top: 1px solid rgba(255, 255, 255, 0.2);
 }

 .contact-info-grid {
     display: flex;
     justify-content: center;
     gap: 3rem;
     flex-wrap: wrap;
 }

 .contact-info-item {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     color: rgba(255, 255, 255, 0.9);
     text-decoration: none;
     font-size: 0.95rem;
     font-weight: 500;
     transition: all 0.3s ease;
     padding: 0.5rem 1rem;
     border-radius: 8px;
 }

 .contact-info-item i {
     color: var(--color-cyan);
     font-size: 1.1rem;
     transition: all 0.3s ease;
 }

 a.contact-info-item:hover {
     color: #ffffff;
     background: rgba(255, 255, 255, 0.1);
     transform: translateY(-2px);
 }

 a.contact-info-item:hover i {
     transform: scale(1.15);
     color: #ffffff;
 }



  /* ================================
            VIDEO PLAYER STYLES
            ================================= */
  .video-player-wrapper {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
  }

  .player-vimeo {
      position: relative;
      display: block;
      overflow: hidden;
      border-radius: 10px;
      transition-duration: 0.7s;
      transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }

  .player-vimeo img {
      width: 100%;
      transform: scale(1);
      transition-duration: 0.7s;
      transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
      display: block;
  }

  .player-vimeo:hover img {
      transform: scale(1.08);
  }

  /* Play Button Overlay */
  .play-button-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 67, 0.3);
      backdrop-filter: blur(2px);
      transition: all 0.4s ease;
      z-index: 2;
  }

  .player-vimeo:hover .play-button-overlay {
      background: rgba(0, 0, 67, 0.5);
      backdrop-filter: blur(4px);
  }

  .play-button-circle {
      width: 80px;
      height: 80px;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
      position: relative;
      margin-top: 40px;
  }

  .play-button-circle::before {
      content: '';
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
  }

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

      100% {
          transform: scale(1.3);
          opacity: 0;
      }
  }

  .play-button-circle i {
      font-size: 24px;
      color: var(--color-dark-blue);
      margin-left: 4px;
      transition: all 0.3s ease;
  }

  .player-vimeo:hover .play-button-circle {
      transform: scale(1.15);
      background: #ffffff;
      box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
  }

  .player-vimeo:hover .play-button-circle i {
      color: var(--color-blue);
  }

  .play-text {
      color: #ffffff;
      font-size: 1.1rem;
      font-weight: 600;
      margin-top: 1.5rem;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.4s ease;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .player-vimeo:hover .play-text {
      opacity: 1;
      transform: translateY(0);
  }

  /* ================================
            VIDEO MODAL POPUP
            ================================= */
  .video-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s ease;
  }

  .video-modal.active {
      opacity: 1;
      visibility: visible;
  }

  /* Backdrop con Glassmorphism */
  .video-modal-backdrop {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgb(0 0 0 / 49%);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      animation: fadeIn 0.4s ease;
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  /* Modal Content */
  .video-modal-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.9);
      width: 90%;
      max-width: 1200px;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 20px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
      transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  }

  .video-modal.active .video-modal-content {
      transform: translate(-50%, -50%) scale(1);
  }

  /* Close Button */
  .video-modal-close {
      position: absolute;
      top: -50px;
      right: 0;
      width: 45px;
      height: 45px;
      background: rgba(255, 255, 255, 0.95);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      z-index: 10;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }

  .video-modal-close:hover {
      background: #ffffff;
      transform: rotate(90deg) scale(1.1);
      box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
  }

  .video-modal-close i {
      font-size: 20px;
      color: var(--color-dark-blue);
  }

  /* Video Container */
  .video-container {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      /* Aspect ratio 16:9 */
      background: #000000;
      border-radius: 12px;
      overflow: hidden;
  }

  .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 12px;
  }







   /* ================================
   INSIGHTS SECTION
================================= */
   .insights-section {
       padding: 100px 0;
   }

   .insightsSwiper {
       padding: 40px 0 60px;
   }

   .insight-card {
       display: flex;
       flex-direction: column;
       background: #ffffff;
       border: 1px solid #e0e0e0;
       border-radius: 12px;
       padding: 2.5rem;
       min-height: 320px;
       text-decoration: none;
       transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
       position: relative;
       overflow: hidden;
   }

   .insight-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 4px;
       background: var(--gradient-primary);
       transform: scaleX(0);
       transform-origin: left;
       transition: transform 0.5s ease;
   }

   .insight-card:hover::before {
       transform: scaleX(1);
   }

   .insight-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
       border-color: transparent;
   }

   .insight-card-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 1.5rem;
       gap: 1rem;
   }

   .insight-category {
       display: inline-block;
       padding: 0.5rem 1rem;
       background: var(--gradient-primary);
       color: #ffffff;
       font-size: 0.75rem;
       font-weight: 500;
       text-transform: uppercase;
       letter-spacing: 1px;
       border-radius: 6px;
   }

   .insight-date {
       font-size: 0.85rem;
       color: #999999;
       font-weight: 500;
       white-space: nowrap;
   }

   .insight-title {
       font-family: var(--font-heading);
       font-size: 1.5rem;
       font-weight: 500;
       color: black;
       margin-bottom: 1rem;
       line-height: 1.4;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
       transition: color 0.3s ease;
   }



   .insight-excerpt {
       font-size: 0.95rem;
       color: #666666;
       line-height: 1.7;
       margin-bottom: auto;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }

   .insight-card-footer {
       margin-top: 2rem;
       padding-top: 1.5rem;
       border-top: 1px solid #e0e0e0;
   }

   .insight-read-more {
       display: inline-flex;
       align-items: center;
       font-size: 0.9rem;
       font-weight: 500;
       color: var(--color-dark);
       text-transform: uppercase;
       letter-spacing: 1px;
       transition: all 0.3s ease;
   }

   .insight-read-more i {
       transition: transform 0.3s ease;
   }

   .insight-card:hover .insight-read-more {
       color: var(--color-blue);
   }

   .insight-card:hover .insight-read-more i {
       transform: translateX(5px);
   }

   .insights-nav-button {
       width: 50px;
       height: 50px;
       background: #ffffff;
       border: 1px solid #e0e0e0;
       border-radius: 50%;
       color: var(--color-dark);
       transition: all 0.3s ease;
   }

   .insights-nav-button:after {
       font-size: 16px;
       font-weight: 500;
   }

   .insights-nav-button:hover {
       background: var(--color-dark);
       border-color: var(--color-dark);
       color: #ffffff;
   }

   .insights-pagination {
       margin-top: 40px;
   }

   .insights-pagination .swiper-pagination-bullet {
       width: 10px;
       height: 10px;
       background: #cccccc;
       opacity: 1;
       transition: all 0.3s ease;
   }

   .insights-pagination .swiper-pagination-bullet-active {

       width: 30px;
       border-radius: 5px;
   }












 /* ================================
   MADISONALLEY.TV SECTION
================================= */
 .matv-section {
     position: relative;
     padding: 120px 0;
     background: linear-gradient(180deg, #000043 0%, #000020 100%);
     overflow: hidden;
 }

 .matv-bg-decoration {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 0;
 }

 .matv-gradient-orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(120px);
     opacity: 0.15;
 }

 .matv-gradient-orb.orb-left {
     width: 600px;
     height: 600px;
     background: var(--color-blue);
     top: -300px;
     left: -300px;
 }

 .matv-gradient-orb.orb-right {
     width: 500px;
     height: 500px;
     background: var(--color-cyan);
     bottom: -250px;
     right: -250px;
 }

 .matv-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.75rem 1.75rem;
     background: rgba(0, 255, 234, 0.1);
     border: 1px solid rgba(0, 255, 234, 0.3);
     border-radius: 50px;
     color: var(--color-cyan);
     font-size: 0.9rem;
     font-weight: 600;
     margin-bottom: 1.5rem;
 }

 .matv-badge i {
     font-size: 1.2rem;
 }

 .matv-title {
     font-family: var(--font-heading);
     font-size: 3.5rem;
     font-weight: 500;
     color: var(--color-white);
     margin-bottom: 1rem;
 }

 .matv-subtitle {
     font-size: 1.3rem;
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 0;
 }

 .matvSwiper {
     padding: 40px 0 60px;
 }

 .matv-card {
     display: flex;
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 16px;
     overflow: hidden;
     text-decoration: none;
     transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
     height: 280px;
 }

 .matv-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 60px rgba(0, 255, 234, 0.2);
     border-color: rgba(0, 255, 234, 0.3);
 }

 .matv-card-image {
     position: relative;
     flex-shrink: 0;
     width: 45%;
     overflow: hidden;
     background: black
 }

 .matv-card-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
 }

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

 .matv-play-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(0, 0, 67, 0.4);
     opacity: 0;
     transition: opacity 0.4s ease;
 }

 .matv-card:hover .matv-play-overlay {
     opacity: 1;
 }

 .matv-play-overlay i {
     width: 60px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, 0.95);
     color: var(--color-dark-blue);
     font-size: 20px;
     border-radius: 50%;
     padding-left: 4px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 }

 .matv-card-content {
     padding: 2rem;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     width: 55%;
 }

 .matv-card-title {
     font-family: var(--font-heading);
     font-size: 1.5rem;
     font-weight: 500;
     color: var(--color-white);
     margin-bottom: 1rem;
     line-height: 1.3;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .matv-card-excerpt {
     font-size: 0.95rem;
     color: rgba(255, 255, 255, 0.7);
     line-height: 1.6;
     margin-bottom: auto;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .matv-card-date {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 0.85rem;
     color: var(--color-cyan);
     font-weight: 600;
     margin-top: 1rem;
 }

 .matv-card-date i {
     font-size: 0.9rem;
 }

 .matv-nav-button {
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     color: var(--color-white);
     transition: all 0.3s ease;
 }

 .matv-nav-button:after {
     font-size: 18px;
 }

 .matv-nav-button:hover {
     background: rgba(0, 255, 234, 0.2);
     border-color: var(--color-cyan);
     color: var(--color-cyan);
 }

 .matv-pagination {
     margin-top: 40px;
 }

 .matv-pagination .swiper-pagination-bullet {
     width: 12px;
     height: 12px;
     background: rgba(255, 255, 255, 0.3);
     opacity: 1;
     transition: all 0.3s ease;
 }

 .matv-pagination .swiper-pagination-bullet-active {
     background: var(--color-cyan);
     width: 40px;
     border-radius: 6px;
 }







  /* ================================
   INTERNAL HERO SECTION
================================= */
  .internal-hero {
      position: relative;
      background: #ffffff;
      padding: 150px 0 80px;
  }

  .internal-hero-content {
      max-width: 650px;
  }

  .hero-breadcrumb {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
      font-size: 0.9rem;
  }

  .hero-breadcrumb a {
      color: #b0b0b0;
      text-decoration: none;
      transition: color 0.3s ease;
  }

  .hero-breadcrumb a:hover {
      color: var(--color-blue);
  }

  .hero-breadcrumb span {
      color: #cccccc;
  }

  .hero-breadcrumb span:last-child {
      color: #000000;
      font-weight: 600;
  }

  .hero-label {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1.5rem;
      background: linear-gradient(135deg, rgba(0, 97, 246, 0.1), rgba(0, 255, 234, 0.1));
      border: 1px solid rgba(0, 97, 246, 0.2);
      border-radius: 50px;
      margin-bottom: 2rem;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--color-blue);
  }

  .hero-label i {
      font-size: 1.1rem;
  }

  .internal-hero-title {
      font-family: var(--font-heading);
      font-size: 3.5rem;
      font-weight: 500;
      color: #000000;
      line-height: 1.2;
      margin-bottom: 1.5rem;
      letter-spacing: -1px;
  }

  .internal-hero-subtitle {
      font-family: var(--font-body);
      font-size: 1.3rem;
      line-height: 1.7;
      color: #666666;
      margin-bottom: 2.5rem;
  }

  .internal-hero-stats {
      display: flex;
      align-items: center;
      gap: 2rem;
      padding: 2rem 0;
      margin-bottom: 2rem;
      border-top: 1px solid #e0e0e0;
      border-bottom: 1px solid #e0e0e0;
  }

  .stat-item {
      text-align: center;
  }

  .stat-number {
      font-family: var(--font-heading);
      font-size: 2rem;
      font-weight: 500;
      color: #000000;
      line-height: 1;
      margin-bottom: 0.5rem;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  .stat-label {
      font-size: 0.85rem;
      color: #666666;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }

  .stat-divider {
      width: 1px;
      height: 40px;
      background: #e0e0e0;
  }

  .internal-hero-cta {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
  }

  .internal-hero-image {
      position: relative;
  }

  .hero-image-wrapper {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  }

  .hero-image-wrapper img {
      width: 100%;
      height: auto;
      display: block;
  }

  .hero-image-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(0, 97, 246, 0.1), rgba(0, 255, 234, 0.1));
      opacity: 0;
      transition: opacity 0.4s ease;
  }

  .hero-image-wrapper:hover .hero-image-overlay {
      opacity: 1;
  }

  /* ================================
    CHALLENGES SECTION
    ================================= */
  .challenges-section {
      padding: 100px 0;
  }

  .section-intro {
      font-size: 1.2rem;
      color: #666666;
      max-width: 800px;
      margin: 0 auto 3rem;
      line-height: 1.7;
  }

  .challenge-card {
      background: #ffffff;
      padding: 2.5rem;
      border-radius: 12px;
      border: 1px solid #e0e0e0;
      height: 100%;
      transition: all 0.4s ease;
  }

  .challenge-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
      border-color: transparent;
  }

  .challenge-icon {
      width: 70px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #ff00ff 0%, #00ffea 100%);
      border-radius: 12px;
      margin-bottom: 1.5rem;
  }

  .challenge-icon i {
      font-size: 2rem;
      color: #ffffff;
  }

  .challenge-title {
      font-family: var(--font-heading);
      font-size: 1.5rem;
      font-weight: 600;
      color: #010101;
      margin-bottom: 1rem;
  }

  .challenge-description {
      font-size: 1rem;
      color: #666666;
      line-height: 1.7;
      margin-bottom: 0;
  }

  /* ================================
    PROCESS SECTION
    ================================= */
  .process-section {
      padding: 100px 0;
  }

  .process-accordion {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
  }

  .process-item {
      background: #ffffff;
      border: 2px solid #e0e0e0;
      border-radius: 16px;
      overflow: hidden;
      transition: all 0.3s ease;
  }

  .process-item:hover {
      border-color: var(--color-blue);
  }

  .process-header {
      display: flex;
      align-items: center;
      gap: 2rem;
      padding: 2rem;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .process-header:not(.collapsed) {
      background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  }

  .process-number {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--gradient-primary);
      border-radius: 12px;
      font-family: var(--font-heading);
      font-size: 1.5rem;
      font-weight: 500;
      color: #ffffff;
      flex-shrink: 0;
  }

  .process-info {
      flex-grow: 1;
  }

  .process-info h3 {
      font-family: var(--font-heading);
      font-size: 1.5rem;
      font-weight: 500;
      color: #000000;
      margin-bottom: 0;
  }

  .process-duration {
      font-size: 0.9rem;
      color: #999999;
      font-weight: 600;
  }

  .process-toggle {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 97, 246, 0.1);
      border-radius: 50%;
      transition: all 0.3s ease;
  }

  .process-toggle i {
      color: var(--color-blue);
      font-size: 1.2rem;
      transition: transform 0.3s ease;
  }

  .process-header:not(.collapsed) .process-toggle i {
      transform: rotate(180deg);
  }

  .process-body {
      padding: 0 2rem 2rem 2rem;
  }

  .process-body h4 {
      font-family: var(--font-heading);
      font-size: 1.1rem;
      font-weight: 500;
      color: #000000;
      margin-bottom: 1rem;
  }

  .process-body ul {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .process-body ul li {
      padding-left: 1.5rem;
      margin-bottom: 0.75rem;
      position: relative;
      font-size: 1rem;
      color: #666666;
      line-height: 1.6;
  }

  .process-body ul li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: var(--color-cyan);
      font-weight: 500;
  }

  /* ================================
    SERVICES DETAIL SECTION
    ================================= */
  .services-detail-section {
      padding: 100px 0;
  }

  .service-detail-card {
      background: #ffffff;
      padding: 2rem;
      border-radius: 12px;
      border: 1px solid #e0e0e0;
      height: 100%;
      text-align: center;
      transition: all 0.4s ease;
  }

  .service-detail-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
      border-color: transparent;
  }

  .service-detail-icon {
      width: 70px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-blue);
      border-radius: 12px;
      margin: 0 auto 1.5rem;
  }

  .service-detail-icon i {
      font-size: 2rem;
      color: #ffffff;
  }

  .service-detail-card h4 {
      font-family: var(--font-heading);
      font-size: 1.3rem;
      font-weight: 500;
      color: #000000;
      margin-bottom: 1rem;
  }

  .service-detail-card p {
      font-size: 0.95rem;
      color: #666666;
      line-height: 1.6;
      margin-bottom: 0;
  }

  /* ================================
    TIMING SECTION
    ================================= */
  .timing-section {
      padding: 100px 0;
  }

  .timing-checklist {
      background: #ffffff;
      padding: 2.5rem;
      border-radius: 16px;
      border: 2px solid #e0e0e0;
  }

  .timing-checklist h4 {
      font-family: var(--font-heading);
      font-size: 1.4rem;
      font-weight: 500;
      color: #000000;
      margin-bottom: 2rem;
  }

  .timing-checklist ul {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .timing-checklist ul li {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1.25rem;
      font-size: 1rem;
      color: #333333;
      line-height: 1.6;
  }

  .timing-checklist ul li i {
      color: var(--color-cyan);
      font-size: 1.3rem;
      flex-shrink: 0;
      margin-top: 2px;
  }

  /* ================================
    VALUE DRIVERS SECTION
    ================================= */
  .value-drivers-section {
      padding: 100px 0;
  }

  .value-driver-card {
      background: #ffffff;
      padding: 2rem;
      border-radius: 12px;
      border: 1px solid #e0e0e0;
      height: 100%;
      transition: all 0.4s ease;
  }

  .value-driver-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
      border-color: transparent;
  }

  .driver-icon {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(0, 97, 246, 0.1), rgba(0, 255, 234, 0.1));
      border-radius: 12px;
      margin-bottom: 1.5rem;
  }

  .driver-icon i {
      font-size: 1.8rem;
      color: var(--color-blue);
  }

  .value-driver-card h4 {
      font-family: var(--font-heading);
      font-size: 1.2rem;
      font-weight: 500;
      color: #000000;
      margin-bottom: 1rem;
  }

  .value-driver-card p {
      font-size: 0.95rem;
      color: #666666;
      line-height: 1.6;
      margin-bottom: 0;
  }

  /* ================================
    FAQ SECTION
    ================================= */
  .faq-section {
      padding: 100px 0;
  }

  .faq-accordion {
      display: flex;
      flex-direction: column;
      gap: 1rem;
  }

  .faq-item {
      background: #ffffff;
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      overflow: hidden;
  }

  .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem 2rem;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .faq-question:not(.collapsed) {
      background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  }

  .faq-question h4 {
      font-family: var(--font-heading);
      font-size: 1.2rem;
      font-weight: 600;
      color: #000000;
      margin: 0;
      flex-grow: 1;
  }

  .faq-question i {
      color: var(--color-blue);
      font-size: 1.2rem;
      transition: transform 0.3s ease;
      margin-left: 1rem;
  }

  .faq-question:not(.collapsed) i {
      transform: rotate(180deg);
  }

  .faq-answer {
      padding: 0 2rem 1.5rem 2rem;
  }

  .faq-answer p {
      font-size: 1rem;
      color: #666666;
      line-height: 1.7;
      margin: 0;
  }


   /* ================================
   LANDMARK TRANSACTIONS SECTION
================================= */
   .landmark-label {
       display: inline-flex;
       align-items: center;
       gap: 0.75rem;
       padding: 0.6rem 1.5rem;
       background: rgba(255, 255, 255, 0.15);
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 50px;
       font-size: 0.85rem;
       font-weight: 600;
       color: #ffffff;
       text-transform: uppercase;
       letter-spacing: 1px;
   }

   .landmark-label i {
       font-size: 1rem;
       color: var(--color-cyan);
   }

   .landmarkSwiper {
       padding: 20px 0 60px;
   }

   .landmark-card {
       background: rgba(255, 255, 255, 1);
       backdrop-filter: blur(10px);
       border-radius: 12px;
       padding: 2rem 1.5rem;
       min-height: 420px;
       display: flex;
       flex-direction: column;
       align-items: center;
       box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
       transition: all 0.4s ease;
       text-align: center;
   }



   .landmark-logos {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0.75rem;
       margin-bottom: 5px;
       width: 100%;
   }

   .landmark-logo-item {
       width: 100%;
       max-width: 180px;
       height: 60px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .landmark-logo-item img {
       max-width: 100%;
       max-height: 100%;
       width: auto;
       height: 100px;
       object-fit: contain;
       filter: grayscale(0%);
   }

   .landmark-acquisition-text {
       font-size: 12px;
       text-transform: uppercase;
       font-weight: 400;
       color: #999;
       margin: 30px 0; 
       letter-spacing: 1px;
   }

   .landmark-description {
       font-size: 1rem;
       color: #999;
       line-height: 1.4;
       margin: 0.5rem 0;
   }

   .landmark-divider {
       width: 100%;
       max-width: 100px;
       height: 2px;
       background: var(--gradient-primary);
       margin: 1.25rem 0;
   }

   .landmark-content {
       width: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       margin-top: auto;
   }

   .landmark-content h3 {
    font-family: var(--font-heading);
        font-size: 0.85rem;
        font-weight: 400;
        color: #3f3f3f;
        line-height: 1.7;
        margin-bottom: 0.75rem;
        /* text-transform: uppercase; */
        letter-spacing: 0.5px;
   }

   .landmark-title-main {
       font-family: 'Playfair Display', serif;
       font-size: 1.6rem;
       font-weight: 500;
       color: #000000;
       line-height: 1.2;
       position: relative;
       display: inline-block;
       margin-top: 0;
   }

   .landmark-title-main::after {
       content: '';
       position: absolute;
       bottom: -6px;
       left: 0;
       width: 100%;
       height: 3px;
       background: var(--gradient-primary);
   }

   .landmark-pagination {
       margin-top: 30px;
   }

   .landmark-pagination .swiper-pagination-bullet {
       width: 10px;
       height: 10px;
       background: rgba(255, 255, 255, 0.6);
       opacity: 1;
       transition: all 0.3s ease;
   }

   .landmark-pagination .swiper-pagination-bullet-active {
       background: var(--color-cyan);
       width: 30px;
       border-radius: 5px;
   }

   .btn-landmark-gradient {
       display: inline-block;
       padding: 0.75rem 2rem;
       font-size: 0.85rem;
       font-weight: 500;
       color: #ffffff;
       text-decoration: none;
       text-transform: uppercase;
       letter-spacing: 1.5px;
       background: var(--gradient-primary);
       border-radius: 50px;
       transition: all 0.3s ease;
       box-shadow: 0 8px 25px rgba(0, 97, 246, 0.3);
       margin-top: 1.5rem;
   }

   .btn-landmark-gradient:hover {
       transform: translateY(-2px);
       box-shadow: 0 12px 35px rgba(0, 97, 246, 0.4);
       color: #ffffff;
   }








        /* ================================
       TRANSACTIONS HERO COMPACT
    ================================= */
        .transactions-hero-compact {
            position: relative;
            height: 60vh;
            min-height: 400px;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, #000043 0%, #000864 50%, #000043 100%);
            overflow: hidden;
        }
    
        /* Hero Content */
        .hero-compact-content {
            height: 100%;
            display: flex;
            align-items: center;
        }
    
        .hero-subtitle-compact {
            font-size: 1.2rem;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.85);
            margin-bottom: 0;
            max-width: 700px; 
        }
    
        /* Olas Animadas de Fondo */
        .hero-waves-bg {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }
    
        .waves {
            position: absolute;
            width: 200%;
            height: 100%;
            bottom: 0;
            left: 0;
        }
    
        .parallax>use {
            animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
        }
    
        .parallax>use:nth-child(1) {
            animation-delay: -2s;
            animation-duration: 7s;
        }
    
        .parallax>use:nth-child(2) {
            animation-delay: -3s;
            animation-duration: 10s;
        }
    
        .parallax>use:nth-child(3) {
            animation-delay: -4s;
            animation-duration: 13s;
        }
    
        .parallax>use:nth-child(4) {
            animation-delay: -5s;
            animation-duration: 20s;
        }
    
        @keyframes move-forever {
            0% {
                transform: translate3d(-90px, 0, 0);
            }
    
            100% {
                transform: translate3d(85px, 0, 0);
            }
        }
    
        /* Formas Flotantes Decorativas */
        .floating-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }
    
        .shape {
            position: absolute;
            opacity: 0.15;
            animation: float-shape 15s infinite ease-in-out;
        }
    
        .shape-1 {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            top: 15%;
            left: 10%;
            animation-delay: 0s;
        }
    
        .shape-2 {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--color-blue), var(--color-magenta));
            border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
            top: 60%;
            right: 15%;
            animation-delay: 2s;
        }
    
        .shape-3 {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, var(--color-magenta), var(--color-cyan));
            border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
            bottom: 20%;
            left: 20%;
            animation-delay: 4s;
        }
    
        .shape-4 {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--color-cyan), var(--color-magenta));
            border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
            top: 40%;
            right: 30%;
            animation-delay: 1s;
        }
    
        @keyframes float-shape {
    
            0%,
            100% {
                transform: translate(0, 0) rotate(0deg) scale(1);
            }
    
            25% {
                transform: translate(20px, -30px) rotate(90deg) scale(1.1);
            }
    
            50% {
                transform: translate(-15px, 20px) rotate(180deg) scale(0.9);
            }
    
            75% {
                transform: translate(25px, 15px) rotate(270deg) scale(1.05);
            }
        }
    
        /* Breadcrumb ajustado para hero compacto */
        .transactions-hero-compact .hero-breadcrumb {
            margin-bottom: 1.5rem;
        }
    
        .transactions-hero-compact h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
    
        /* ================================
       RESPONSIVE
    ================================= */
        @media (max-width: 991px) {
            .transactions-hero-compact {
                height: 45vh;
                min-height: 350px;
            }
    
            .transactions-hero-compact h1 {
                font-size: 2.5rem;
            }
    
            .hero-subtitle-compact {
                font-size: 1.1rem;
            }
    
            .shape {
                opacity: 0.1;
            }
        }
    
        @media (max-width: 767px) {
            .transactions-hero-compact {
                height: 40vh;
                min-height: 320px;
                max-height: 380px;
            }
    
            .transactions-hero-compact h1 {
                font-size: 2rem;
            }
    
            .hero-subtitle-compact {
                font-size: 1rem;
            }
    
            .shape-1,
            .shape-3 {
                width: 60px;
                height: 60px;
            }
    
            .shape-2,
            .shape-4 {
                width: 50px;
                height: 50px;
            }
        }
    
        @media (max-width: 576px) {
            .transactions-hero-compact {
                height: 40vh;
                min-height: 300px;
            }
    
            .transactions-hero-compact h1 {
                font-size: 1.8rem;
            }
    
            .hero-subtitle-compact {
                font-size: 0.95rem;
            }
    
            .transactions-hero-compact .hero-breadcrumb {
                margin-bottom: 1rem;
            }
        }
    
        /* Reducir altura de olas en móvil */
        @media (max-width: 768px) {
            .waves {
                height: 80%;
            }
        }
    
        /* Estilos adicionales se entregarán en el siguiente mensaje */
        /* ================================
       TRANSACTIONS FILTER SECTION
    ================================= */
        .transactions-filter-section {
            padding: 60px 0;
        }
    
        .filter-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            flex-wrap: wrap;
            background: #ffffff;
            padding: 2rem;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }
    
        .filter-label {
            font-size: 1rem;
            font-weight: 500;
            color: var(--color-dark);
            text-transform: uppercase;
            letter-spacing: 1px;
        }
    
        .filter-buttons {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }
    
        .filter-btn {
            display: inline-flex;
            align-items: center;
            padding: 12px 28px;
            background: transparent;
            border: 2px solid #e0e0e0;
            border-radius: 50px;
            font-size: 0.95rem;
            font-weight: 600;
            color: #666666;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
    
        .filter-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: var(--gradient-primary);
            transition: width 0.4s ease;
            z-index: 0;
        }
    
        .filter-btn span {
            position: relative;
            z-index: 1;
            transition: color 0.3s ease;
        }
    
        .filter-btn:hover {
            border-color: var(--color-blue);
            color: var(--color-blue);
            transform: translateY(-2px);
        }
    
        .filter-btn.active {
            background: var(--gradient-primary);
            border-color: transparent;
            color: #ffffff;
        }
    
        .filter-btn.active::before {
            width: 100%;
        }
    
        /* ================================
       TRANSACTIONS GRID SECTION
    ================================= */
        .transactions-grid-section {
            padding: 80px 0 100px;
        }
    
        /* Landmark Card para Transactions */
        .landmark-card-transaction {
            background: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            padding: 2.5rem 2rem;
            min-height: 450px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
            position: relative;
            overflow: hidden;
            width: 100%;
        }
    
        .landmark-card-transaction::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--gradient-primary);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.5s ease;
        }
    
        .landmark-card-transaction:hover::before {
            transform: scaleX(1);
        }
    
        .landmark-card-transaction:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
            border-color: transparent;
        }
    
        /* Transaction Date */
        .transaction-date {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-size: 0.9rem;
            color: #999999;
            font-weight: 500;
            margin-top: 1rem;
        }
    
        .transaction-date i {
            color: var(--color-blue);
        }
    
        /* Transaction Link Overlay */
        .transaction-link-overlay {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: auto;
            padding: 12px 24px;
            background: transparent;
            border: 2px solid var(--color-blue);
            border-radius: 50px;
            color: var(--color-blue);
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
    
        .transaction-link-overlay::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: var(--color-blue);
            transition: width 0.4s ease;
            z-index: -1;
        }
    
        .transaction-link-overlay:hover {
            color: #ffffff;
            border-color: var(--color-blue);
        }
    
        .transaction-link-overlay:hover::before {
            width: 100%;
        }
    
        .transaction-link-overlay i {
            transition: transform 0.3s ease;
        }
    
        .transaction-link-overlay:hover i {
            transform: translateX(5px);
        }
    
        /* No Results Message */
        .no-results-message {
            text-align: center;
            padding: 80px 20px;
            background: #ffffff;
            border-radius: 16px;
            border: 2px dashed #e0e0e0;
        }
    
        .no-results-message i {
            font-size: 4rem;
            color: #cccccc;
            margin-bottom: 1.5rem;
        }
    
        .no-results-message h3 {
            font-family: var(--font-heading);
            font-size: 1.8rem;
            font-weight: 500;
            color: #333333;
            margin-bottom: 1rem;
        }
    
        .no-results-message p {
            font-size: 1.1rem;
            color: #999999;
            margin: 0;
        }
    
        /* ================================
       RESPONSIVE STYLES
    ================================= */
        @media (max-width: 991px) {
            .transactions-filter-section {
                padding: 40px 0;
            }
    
            .filter-wrapper {
                flex-direction: column;
                gap: 1.5rem;
                padding: 1.5rem;
            }
    
            .filter-label {
                font-size: 0.9rem;
            }
    
            .filter-buttons {
                justify-content: center;
                gap: 0.75rem;
            }
    
            .filter-btn {
                padding: 10px 20px;
                font-size: 0.85rem;
            }
    
            .landmark-card-transaction {
                padding: 2rem 1.5rem;
                min-height: 400px;
            }
    
            .transactions-grid-section {
                padding: 60px 0 80px;
            }
        }
    
        @media (max-width: 767px) {
            .filter-wrapper {
                padding: 1.25rem;
            }
    
            .filter-buttons {
                width: 100%;
            }
    
            .filter-btn {
                flex: 1 1 auto;
                justify-content: center;
                padding: 10px 16px;
                font-size: 0.8rem;
            }
    
            .landmark-card-transaction {
                padding: 1.75rem 1.25rem;
                min-height: 380px;
            }
    
            .landmark-logo-item {
                max-width: 140px;
                height: 50px;
            }
    
            .landmark-acquisition-text {
                font-size: 1rem;
            }
    
            .landmark-description {
                font-size: 0.9rem;
            }
    
            .landmark-content h3 {
                font-size: 0.8rem;
            }
    
            .transaction-link-overlay {
                padding: 10px 20px;
                font-size: 0.85rem;
            }
    
            .no-results-message {
                padding: 60px 20px;
            }
    
            .no-results-message i {
                font-size: 3rem;
            }
    
            .no-results-message h3 {
                font-size: 1.5rem;
            }
    
            .no-results-message p {
                font-size: 1rem;
            }
        }
    
        @media (max-width: 576px) {
            .transactions-filter-section {
                padding: 30px 0;
            }
    
            .filter-wrapper {
                padding: 1rem;
            }
    
            .filter-label {
                font-size: 0.85rem;
                width: 100%;
                text-align: center;
            }
    
            .filter-buttons {
                flex-direction: column;
                width: 100%;
            }
    
            .filter-btn {
                width: 100%;
                padding: 12px 20px;
            }
    
            .landmark-card-transaction {
                padding: 1.5rem 1rem;
                min-height: 360px;
            }
    
            .transactions-grid-section {
                padding: 40px 0 60px;
            }
        }
    
        /* ================================
       ANIMATIONS
    ================================= */
        .transaction-item {
            animation: fadeInUp 0.6s ease forwards;
            opacity: 0;
            display: flex;
        }
    
        .transaction-item:nth-child(1) {
            animation-delay: 0.1s;
        }
    
        .transaction-item:nth-child(2) {
            animation-delay: 0.2s;
        }
    
        .transaction-item:nth-child(3) {
            animation-delay: 0.3s;
        }
    
        .transaction-item:nth-child(4) {
            animation-delay: 0.4s;
        }
    
        .transaction-item:nth-child(5) {
            animation-delay: 0.5s;
        }
    
        .transaction-item:nth-child(6) {
            animation-delay: 0.6s;
        }
    
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
    
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }




/* ================================
   INSIGHTS HERO COMPACT
================================= */
.insights-hero-compact {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #000043 0%, #000864 50%, #000043 100%);
    overflow: hidden;
    padding: 150px 0 80px;
}

.insights-hero-compact h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* ================================
   INSIGHTS FILTER SECTION
================================= */
.insights-filter-section {
    padding: 60px 0;
}

/* ================================
   INSIGHTS GRID SECTION
================================= */
.insights-grid-section {
    padding: 80px 0 100px;
}

/* Insight Card Modern */
.insight-card-modern {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 2.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
}

.insight-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.insight-card-modern:hover::before {
    transform: scaleX(1);
}

.insight-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    border-color: transparent;
}

/* Category Badge */
.insight-category-badge {
    margin-bottom: 1rem;
}

.insight-category-badge span {
    display: inline-block;
    padding: 6px 16px;
    background: var(--gradient-primary);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
}

/* Date */
.insight-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #999999;
    margin-bottom: 1.5rem;
}

.insight-date i {
    color: var(--color-blue);
}

/* Title */
.insight-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.insight-title a {
    color: #000000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.insight-card-modern:hover .insight-title a {
    color: var(--color-blue);
}

/* Excerpt */
.insight-excerpt {
    font-size: 1rem;
    color: #666666;
    line-height: 1.6;
    margin-bottom: auto;
    flex-grow: 1;
}

/* Read More Link */
.insight-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-blue);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.insight-read-more i {
    transition: transform 0.3s ease;
}

.insight-read-more:hover {
    gap: 0.75rem;
}

.insight-read-more:hover i {
    transform: translateX(5px);
}

/* Load More Wrapper */
.load-more-wrapper {
    text-align: center;
    margin-top: 4rem;
}

#loadMoreBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ================================
   RESPONSIVE
================================= */
@media (max-width: 991px) {
    .insights-hero-compact {
        padding: 120px 0 60px;
        min-height: 45vh;
    }

    .insights-hero-compact h1 {
        font-size: 2.5rem;
    }

    .insights-filter-section {
        padding: 40px 0;
    }

    .insights-grid-section {
        padding: 60px 0 80px;
    }

    .insight-card-modern {
        padding: 2rem;
    }
}

@media (max-width: 767px) {
    .insights-hero-compact {
        padding: 100px 0 50px;
    }

    .insights-hero-compact h1 {
        font-size: 2rem;
    }

    .insight-card-modern {
        padding: 1.75rem;
    }

    .insight-title {
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {
    .insights-hero-compact {
        padding: 80px 0 40px;
    }

    .insights-hero-compact h1 {
        font-size: 1.8rem;
    }

    .load-more-wrapper {
        margin-top: 3rem;
    }
}



/* ================================
   INSIGHT DETAIL HERO
================================= */
.insight-detail-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #000043 0%, #000864 50%, #000043 100%);
    overflow: hidden;
    padding: 150px 0 80px;
}

.insight-type-badge {
    display: inline-block;
    margin-bottom: 1.5rem;
}

.insight-type-badge span {
    display: inline-block;
    padding: 10px 24px;
    background: var(--gradient-primary);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 50px;
}

.insight-detail-hero h1 {
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.insight-meta-date {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    opacity: 0.9;
}

.insight-meta-date i {
    color: var(--color-cyan);
}

/* ================================
   INSIGHT DETAIL CONTENT
================================= */
.insight-detail-content {
    padding: 80px 0;
}

/* Featured Image */
.featured-image-wrapper {
    margin-bottom: 4rem;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.featured-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Excerpt Detail */
.insight-excerpt-detail {
    position: relative;
    background: #f8f9fa;
    border-left: 4px solid var(--color-blue);
    padding: 2.5rem 2.5rem 2.5rem 4rem;
    border-radius: 8px;
    margin-bottom: 4rem;
}

.excerpt-icon {
    position: absolute;
    top: 2rem;
    left: 1.5rem;
    color: var(--color-cyan);
    font-size: 1.5rem;
    opacity: 0.3;
}

.insight-excerpt-detail p {
    font-size: 1.3rem;
    line-height: 1.8;
    color: #333333;
    font-style: italic;
    margin: 0;
}

/* Content Body */
.insight-content-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333333;
    margin-bottom: 4rem;
}

.insight-content-body h2,
.insight-content-body h3,
.insight-content-body h4 {
    font-family: var(--font-heading);
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    color: #000000;
}

.insight-content-body h2 {
    font-size: 2rem;
    font-weight: 500;
}

.insight-content-body h3 {
    font-size: 1.6rem;
    font-weight: 500;
}

.insight-content-body h4 {
    font-size: 1.3rem;
    font-weight: 600;
}

.insight-content-body p {
    margin-bottom: 1.5rem;
}

.insight-content-body ul,
.insight-content-body ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.insight-content-body li {
    margin-bottom: 0.75rem;
}

.insight-content-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 2rem 0;
}

.insight-content-body a {
    color: var(--color-blue);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.insight-content-body a:hover {
    color: var(--color-cyan);
}

/* CTA Section */
.insight-cta {
    text-align: center;
    padding: 3rem 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 3rem;
}

/* Back Navigation */
.back-navigation {
    text-align: center;
    padding-top: 2rem;
}

.link-back {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: #666666;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    background: #f8f9fa;
}

.link-back:hover {
    color: var(--color-blue);
    background: rgba(0, 97, 246, 0.1);
    transform: translateX(-5px);
}

.link-back i {
    transition: transform 0.3s ease;
}

.link-back:hover i {
    transform: translateX(-3px);
}

/* Related Insights Section */
.related-insights-section {
    padding: 80px 0;
}

/* ================================
   RESPONSIVE
================================= */
@media (max-width: 991px) {
    .insight-detail-hero {
        padding: 120px 0 60px;
        min-height: 45vh;
    }

    .insight-detail-hero h1 {
        font-size: 2.2rem;
    }

    .insight-detail-content {
        padding: 60px 0;
    }

    .featured-image-wrapper {
        margin-bottom: 3rem;
    }

    .insight-excerpt-detail {
        padding: 2rem 2rem 2rem 3.5rem;
    }

    .insight-excerpt-detail p {
        font-size: 1.1rem;
    }
}

@media (max-width: 767px) {
    .insight-detail-hero {
        padding: 100px 0 50px;
    }

    .insight-detail-hero h1 {
        font-size: 1.8rem;
    }

    .insight-meta-date {
        font-size: 1rem;
    }

    .featured-image-wrapper {
        margin-bottom: 2.5rem;
        border-radius: 12px;
    }

    .insight-excerpt-detail {
        padding: 1.5rem 1.5rem 1.5rem 3rem;
        margin-bottom: 3rem;
    }

    .excerpt-icon {
        font-size: 1.2rem;
        left: 1rem;
    }

    .insight-excerpt-detail p {
        font-size: 1rem;
    }

    .insight-content-body {
        font-size: 1rem;
        margin-bottom: 3rem;
    }

    .related-insights-section {
        padding: 60px 0;
    }
}

@media (max-width: 576px) {
    .insight-detail-hero h1 {
        font-size: 1.5rem;
    }

    .insight-type-badge span {
        padding: 8px 18px;
        font-size: 0.7rem;
    }
}
/* ================================
   STORY INTRO BOX
================================= */
.story-intro-box {
    background: linear-gradient(135deg, rgba(0, 97, 246, 0.05), rgba(0, 255, 234, 0.05));
    border-left: 4px solid var(--color-blue);
    padding: 3rem;
    border-radius: 12px;
}

.story-lead-text {
    font-size: 1.3rem;
    line-height: 1.8;
    color: #333333;
    margin: 0;
}

/* ================================
   EDITORIAL PREMIUM DESIGN
================================= */
.editorial-story-container {
    background: #ffffff;
    padding: 0;
}

.editorial-lead {
    position: relative;
    margin-bottom: 4rem;
    padding-left: 4rem;
}

.editorial-quote-mark {
    position: absolute;
    left: -10px;
    top: -20px;
    font-size: 120px;
    font-family: Georgia, serif;
    color: rgba(0, 97, 246, 0.1);
    line-height: 1;
    font-weight: 700;
    z-index: 0;
}

.editorial-opening {
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0;
    position: relative;
    z-index: 1;
    font-family: 'Georgia', serif;
    letter-spacing: -0.02em;
}

.editorial-content-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 3rem;
    align-items: start;
    margin-top: 4rem;
}

.editorial-section {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.editorial-year {
    font-size: 3rem;
    font-weight: 700;
    color: rgba(0, 97, 246, 0.15);
    line-height: 1;
    min-width: 120px;
    text-align: right;
    font-family: 'Georgia', serif;
    letter-spacing: -0.03em;
}

.editorial-text {
    flex: 1;
}

.editorial-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.editorial-text p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #4a4a4a;
    margin: 0;
}

.editorial-divider {
    width: 1px;
    height: 100%;
    min-height: 150px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 97, 246, 0.2) 20%,
        rgba(0, 97, 246, 0.2) 80%,
        transparent 100%);
    position: relative;
}

.editorial-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--color-blue);
    border-radius: 50%;
}

/* Responsive Design */
@media (max-width: 991px) {
    .editorial-lead {
        padding-left: 2rem;
        margin-bottom: 3rem;
    }

    .editorial-quote-mark {
        font-size: 90px;
        left: -5px;
    }

    .editorial-opening {
        font-size: 1.65rem;
    }

    .editorial-content-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .editorial-divider {
        display: none;
    }

    .editorial-year {
        font-size: 2.5rem;
        min-width: 100px;
    }

    .editorial-subtitle {
        font-size: 1.15rem;
    }

    .editorial-text p {
        font-size: 1rem;
    }
}

@media (max-width: 767px) {
    .editorial-lead {
        padding-left: 0;
        margin-bottom: 2.5rem;
    }

    .editorial-quote-mark {
        font-size: 70px;
        left: 0;
        top: -15px;
    }

    .editorial-opening {
        font-size: 1.4rem;
        padding-left: 1rem;
    }

    .editorial-section {
        flex-direction: column;
        gap: 1rem;
    }

    .editorial-year {
        font-size: 2rem;
        text-align: left;
        min-width: auto;
    }

    .editorial-content-grid {
        gap: 2.5rem;
        margin-top: 3rem;
    }
}

.vision-intro-box {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    padding: 3rem;
    border-radius: 12px;
}

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 500;
}

/* ================================
   STORY CARDS MODERN
================================= */
.story-card-modern {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 2.5rem;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
}

.story-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.story-card-modern:hover::before {
    transform: scaleX(1);
}

.story-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    border-color: transparent;
}

.story-icon-modern {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.story-icon-modern i {
    font-size: 2rem;
    color: #ffffff;
}

.story-card-modern h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 500;
    color: #000000;
    margin-bottom: 1rem;
}

.story-card-modern p {
    font-size: 1rem;
    color: #666666;
    line-height: 1.7;
    margin: 0;
}

/* ================================
   DISTINCTION CARDS
================================= */
.distinction-card-modern {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 2rem;
    height: 100%;
    text-align: center;
    transition: all 0.4s ease;
}

.distinction-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    border-color: var(--color-blue);
}

.distinction-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 97, 246, 0.1), rgba(0, 255, 234, 0.1));
    border-radius: 50%;
    margin: 0 auto 1.5rem;
}

.distinction-icon i {
    font-size: 2.2rem;
    color: var(--color-blue);
}

.distinction-card-modern h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    color: #000000;
    margin-bottom: 1rem;
}

.distinction-card-modern p {
    font-size: 0.95rem;
    color: #666666;
    line-height: 1.6;
    margin: 0;
}

/* ================================
   LANDMARK HIGHLIGHT SECTION
================================= */
.landmark-highlight-section {
    padding: 120px 0;
    position: relative;
    background-attachment: fixed;
}

.landmark-highlight-content {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 4rem;
}

.landmark-highlight-content h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.landmark-highlight-content p {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* ================================
   TEAM MEMBER CARDS
================================= */
.team-member-card {
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.team-member-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.team-photo {
    position: relative;
    overflow: hidden;
    height: 350px;
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.team-member-card:hover .team-photo img {
    transform: scale(1.1);
}

.team-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 97, 246, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.team-member-card:hover .team-overlay {
    opacity: 1;
}

.team-overlay i {
    font-size: 3rem;
    color: #ffffff;
}

.team-info {
    padding: 1.5rem;
    text-align: center;
}

.team-info h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 500;
    color: #000000;
    margin-bottom: 0.5rem;
}

.team-info p {
    font-size: 0.9rem;
    color: #666666;
    line-height: 1.4;
    margin: 0;
}

/* ================================
   TEAM MODALS
================================= */
.team-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    overflow-y: auto;
}

.team-modal.active {
    display: block;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1;
}

.modal-content-staff {
    position: relative;
    max-width: 1200px;
    margin: 50px auto;
    background: #ffffff;
    border-radius: 16px;
    z-index: 2;
    animation: modalSlideIn 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

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

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 50%;
    font-size: 28px;
    color: #333333;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: var(--color-blue);
    color: #ffffff;
    transform: rotate(90deg);
}

.modal-inner {
    padding: 60px 40px;
}

.modal-image {
    margin-bottom: 30px;
    border-radius: 12px;
    overflow: hidden;
}

.modal-image img {
    width: 100%;
    height: auto;
    display: block;
}

.modal-bio h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 500;
    color: #000000;
    margin-bottom: 0.5rem;
}

.modal-bio h4 {
    font-size: 1.1rem;
    color: #666666;
    margin-bottom: 2rem;
    font-weight: 400;
}

.modal-bio p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555555;
    margin-bottom: 1.25rem;
}

.modal-links {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.modal-links a {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: #f8f9fa;
    color: #333333;
    text-decoration: none;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.modal-links a:hover {
    background: var(--color-blue);
    color: #ffffff;
    border-color: var(--color-blue);
    transform: translateY(-2px);
}

/* ================================
   CAREERS BENEFIT CARDS
================================= */
.careers-intro-box {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    padding: 3rem;
    border-radius: 12px;
}

.careers-benefit-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    height: 100%;
    transition: all 0.4s ease;
}

.careers-benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    border-color: var(--color-blue);
}

.benefit-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: 12px;
    margin: 0 auto 1.5rem;
}

.benefit-icon i {
    font-size: 2rem;
    color: #ffffff;
}

.careers-benefit-card h4 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 500;
    color: #000000;
    margin-bottom: 1rem;
}

.careers-benefit-card p {
    font-size: 1rem;
    color: #666666;
    line-height: 1.7;
    margin: 0;
}

/* ================================
   RESPONSIVE
================================= */
@media (max-width: 991px) {

    .story-intro-box,
    .vision-intro-box,
    .careers-intro-box {
        padding: 2.5rem;
    }

    .story-lead-text {
        font-size: 1.2rem;
    }

    .story-card-modern,
    .distinction-card-modern,
    .careers-benefit-card {
        padding: 2rem;
    }

    .landmark-highlight-section {
        padding: 80px 0;
        background-attachment: scroll;
    }

    .landmark-highlight-content {
        padding: 3rem;
    }

    .landmark-highlight-content h2 {
        font-size: 2rem;
    }

    .team-photo {
        height: 300px;
    }

    .modal-inner {
        padding: 40px 30px;
    }

    .modal-bio h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767px) {

    .story-intro-box,
    .vision-intro-box,
    .careers-intro-box {
        padding: 2rem;
    }

    .story-lead-text {
        font-size: 1.1rem;
    }

    .story-card-modern,
    .distinction-card-modern,
    .careers-benefit-card {
        padding: 1.75rem;
        margin-bottom: 1rem;
    }

    .story-icon-modern,
    .benefit-icon {
        width: 60px;
        height: 60px;
    }

    .story-icon-modern i,
    .benefit-icon i {
        font-size: 1.8rem;
    }

    .distinction-icon {
        width: 70px;
        height: 70px;
    }

    .distinction-icon i {
        font-size: 2rem;
    }

    .landmark-highlight-section {
        padding: 60px 0;
    }

    .landmark-highlight-content {
        padding: 2.5rem;
    }

    .landmark-highlight-content h2 {
        font-size: 1.8rem;
    }

    .landmark-highlight-content p {
        font-size: 1rem;
    }

    .team-photo {
        height: 280px;
    }

    .team-overlay i {
        font-size: 2.5rem;
    }

    .modal-content-staff {
        margin: 20px;
    }

    .modal-inner {
        padding: 30px 20px;
    }

    .modal-bio h2 {
        font-size: 1.5rem;
    }

    .modal-bio h4 {
        font-size: 1rem;
    }

    .modal-bio p {
        font-size: 0.95rem;
    }

    .modal-links {
        flex-direction: column;
    }

    .modal-links a {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 576px) {

    .story-intro-box,
    .vision-intro-box,
    .careers-intro-box {
        padding: 1.5rem;
    }

    .story-lead-text {
        font-size: 1rem;
    }

    .landmark-highlight-content {
        padding: 2rem;
    }

    .team-photo {
        height: 250px;
    }

    .modal-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}


/* ====================================
    COOKIE TOAST - ULTRA MINIMALISTA
    ==================================== */
.cookie-toast {
    position: fixed;
    bottom: -200px;
    right: 20px;
    max-width: 420px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    transition: bottom 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 1px solid #e0e0e0;
}

.cookie-toast.active {
    bottom: 20px;
}

.cookie-toast-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.cookie-toast-icon {
    width: 45px;
    height: 45px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cookie-toast-icon i {
    font-size: 1.3rem;
    color: white;
}

.cookie-toast-text {
    flex: 1;
}

.cookie-toast-title {
    font-weight: 500;
    font-size: 0.95rem;
    color: #000;
    margin: 0 0 0.25rem 0;
}

.cookie-toast-desc {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

.cookie-toast-desc a {
    color: var(--color-blue);
    text-decoration: underline;
    font-weight: 600;
}

.cookie-toast-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cookie-toast-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.cookie-toast-btn-primary {
    background: var(--color-blue);
    color: white;
}

.cookie-toast-btn-primary:hover {
    background: var(--color-cyan);
    transform: translateY(-2px);
}

.cookie-toast-btn-settings {
    background: #f0f0f0;
    color: #666;
    width: 40px;
    padding: 10px;
}

.cookie-toast-btn-settings:hover {
    background: #e0e0e0;
    color: var(--color-blue);
}

/* ====================================
    MODAL DE CONFIGURACIÓN DETALLADA
    ==================================== */
.cookie-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cookie-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cookie-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    max-width: 450px;
    width: calc(100% - 2rem);
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.cookie-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.cookie-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.cookie-modal-header h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 500;
    color: #000;
    margin: 0;
}

.cookie-modal-close {
    width: 35px;
    height: 35px;
    background: #f0f0f0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.cookie-modal-close:hover {
    background: var(--color-blue);
    color: white;
    transform: rotate(90deg);
}

.cookie-modal-body {
    padding: 1.5rem;
}

.cookie-modal-desc {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.cookie-options-compact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cookie-option-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    transition: var(--transition);
}

.cookie-option-compact:hover {
    background: #e9ecef;
}

.cookie-option-compact-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cookie-option-compact-title i {
    color: var(--color-blue);
}

.badge-required-small {
    display: inline-block;
    padding: 2px 6px;
    background: #28a745;
    color: white;
    font-size: 0.65rem;
    border-radius: 10px;
    font-weight: 600;
}

.toggle-switch-small {
    position: relative;
    width: 42px;
    height: 22px;
    flex-shrink: 0;
}

.toggle-switch-small input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider-small {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 22px;
    transition: 0.3s;
}

.toggle-slider-small:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-switch-small input:checked+.toggle-slider-small {
    background: var(--color-blue);
}

.toggle-switch-small input:checked+.toggle-slider-small:before {
    transform: translateX(20px);
}

.toggle-switch-small input:disabled+.toggle-slider-small {
    background-color: #28a745;
    cursor: not-allowed;
    opacity: 0.7;
}

.cookie-modal-footer {
    padding: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.cookie-modal-btn {
    width: 100%;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.cookie-modal-btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 97, 246, 0.3);
}

.cookie-modal-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 97, 246, 0.4);
}

/* ====================================
    BOTÓN FLOTANTE MINI
    ==================================== */
.cookie-settings-trigger-mini {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 97, 246, 0.4);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 9998;
}

.cookie-settings-trigger-mini.visible {
    display: flex;
}

.cookie-settings-trigger-mini:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(0, 97, 246, 0.6);
}

.cookie-settings-trigger-mini i {
    font-size: 1.2rem;
    color: white;
}

/* ====================================
    RESPONSIVE
    ==================================== */
@media (max-width: 768px) {
    .cookie-toast {
        right: 10px;
        left: 10px;
        max-width: calc(100% - 20px);
    }

    .cookie-toast.active {
        bottom: 10px;
    }

    .cookie-toast-content {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }

    .cookie-toast-actions {
        width: 100%;
    }

    .cookie-toast-btn {
        flex: 1;
    }

    .cookie-modal {
        max-width: calc(100% - 2rem);
    }

    .cookie-settings-trigger-mini {
        bottom: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
    }
}
/* ==========================================
   HERO POPUP MODAL STYLES
   ========================================== */

.hero-popup-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.hero-popup-modal.active {
    opacity: 1;
    visibility: visible;
}

/* Backdrop */
.hero-popup-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Modal Container */
.hero-popup-container {
    position: relative;
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    background: var(--color-dark-blue);
    border-radius: 24px;
    padding: 60px 40px;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.4s ease;
}

.hero-popup-modal.active .hero-popup-container {
    transform: scale(1);
}

/* Close Button */
.hero-popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-popup-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Popup Content */
.hero-popup-content {
    position: relative;
    z-index: 2;
    color: white;
}

/* Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 50px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge-icon {
    font-size: 18px;
}

.badge-text {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Hero Title */
.hero-title {
    font-size: 42px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 24px;
    color: white;
}

.gradient-text {
    /* background: linear-gradient(135deg, #ffd89b 0%, #ffffff 100%); */
    /* -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; */
}

/* Hero Subtitle */
.hero-subtitle {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* CTA Wrapper */
.hero-cta-wrapper {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.btn-hero-primary,
.btn-hero-secondary {
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-hero-primary {
    background: white;
    color: #667eea;
}

.btn-hero-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.3);
}

.btn-hero-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-hero-secondary:hover {
    background: white;
    color: #667eea;
    transform: translateY(-2px);
}

/* Trust Text */
.hero-trust {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.trust-item {
    display: inline-flex;
    align-items: center;
}

.trust-divider {
    color: rgba(255, 255, 255, 0.4);
}

/* Animated Background for Popup */
.hero-bg-animated {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 24px;
    z-index: 1;
    pointer-events: none;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: float 20s ease-in-out infinite;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
    bottom: -50px;
    right: -50px;
    animation-delay: 5s;
}

.orb-3 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 10s;
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -30px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

/* ==========================================
   NEW CLEAN HERO STYLES
   ========================================== */

.hero-clean {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    padding: 80px 0;
    position: relative;
}

.hero-clean-content {
    padding: 60px 0;
}

/* Clean Hero Title */
.hero-clean-title {
    font-size: 48px;
    font-weight: 300;
    line-height: 1.4;
    color: #1a1a1a;
    margin-bottom: 50px;
    letter-spacing: -0.5px;
    font-family: 'Georgia', 'Times New Roman', serif;
}

/* Decorative Line */
.hero-clean-divider {
    width: 80px;
    height: 6px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    margin: 0 auto 50px;
    border-radius: 2px;
}

/* Clean CTA */
.hero-clean-cta {
    margin-top: 50px;
}

.btn-clean-primary {
    display: inline-flex;
    align-items: center;
    padding: 18px 48px;
    background: #1a1a1a;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.5px;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-clean-primary:hover {
    background: #333;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    color: white;
}

/* ==========================================
   RESPONSIVE STYLES
   ========================================== */

@media (max-width: 991px) {
    .hero-popup-container {
        width: 95%;
        padding: 50px 30px;
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-clean-title {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .hero-popup-container {
        padding: 40px 20px;
        max-height: 95vh;
    }

    .hero-popup-close {
        top: 15px;
        right: 15px;
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .hero-title {
        font-size: 26px;
    }

    .hero-subtitle {
        font-size: 15px;
    }

    .hero-cta-wrapper {
        flex-direction: column;
        gap: 12px;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100%;
        justify-content: center;
    }

    .hero-trust {
        flex-direction: column;
        gap: 8px;
    }

    .trust-divider {
        display: none;
    }

    .hero-clean-title {
        font-size: 28px;
    }

    .btn-clean-primary {
        padding: 16px 36px;
        font-size: 15px;
    }

    .gradient-orb {
        filter: blur(60px);
    }
}

@media (max-width: 575px) {
    .hero-title {
        font-size: 24px;
    }

    .badge-text {
        font-size: 12px;
    }

    .hero-clean-title {
        font-size: 24px;
        font-weight: 400;
    }
}
   /* Hero Clean Title - Dos líneas diferenciadas */
   .hero-clean-title {
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }

   /* Primera línea - Más grande y destacada */
   .hero-title-first-line {
       display: block;
       font-size: 3.5rem;
       font-weight: 700;
       line-height: 1.2;
       letter-spacing: -0.02em;
   }

   /* Segunda línea - Tamaño normal */
   .hero-title-second-line {
       display: block;
       font-size: 1.2rem;
       font-weight: 400;
       line-height: 1.5;
       color: rgba(0, 0, 0, 0.7);
   }

   /* Responsive */
   @media (max-width: 768px) {
       .hero-title-first-line {
           font-size: 2.25rem;
       }

       .hero-title-second-line {
           font-size: 1.25rem;
       }
   }


   /* Seamless Infinite Logo Carousel */
   .logo-carousel-infinite {
       width: 100%;
       overflow: hidden;
       position: relative;
       padding: 2rem 0;
   }

   .logo-track-infinite {
       display: flex;
       gap: 4rem;
       animation: scroll-infinite 40s linear infinite;
       width: fit-content;
   }

   /* Pause animation on hover */
   .logo-track-infinite:hover {
       animation-play-state: paused;
   }

   /* Seamless loop animation - moves exactly 50% (one full set) */
   @keyframes scroll-infinite {
       0% {
           transform: translateX(0);
       }

       100% {
           transform: translateX(-50%);
       }
   }

   .logo-item {
       flex-shrink: 0;
       padding: 1rem 2rem;
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 80px;
   }

   .logo-item img {
       max-width: 150px;
       max-height: 50px;
       width: auto;
       height: auto;
       object-fit: contain;
       filter: grayscale(100%);
       opacity: 0.7;
       transition: all 0.3s ease;
       mix-blend-mode: multiply;
   }

   .logo-item:hover img {
       filter: grayscale(0%);
       opacity: 1;
       transform: scale(1.05);
       mix-blend-mode: multiply;
   }

   /* Responsive */
   @media (max-width: 1199px) {
       .logo-item img {
           max-width: 120px;
           max-height: 45px;
       }

       .logo-track-infinite {
           gap: 3rem;
       }
   }

   @media (max-width: 991px) {
       .logo-item img {
           max-width: 100px;
           max-height: 40px;
       }

       .logo-item {
           padding: 0.8rem 1.5rem;
       }

       .logo-track-infinite {
           gap: 2.5rem;
           animation: scroll-infinite 30s linear infinite;
       }
   }

   @media (max-width: 767px) {
       .logo-carousel-infinite {
           padding: 1.5rem 0;
       }

       .logo-item img {
           max-width: 80px;
           max-height: 35px;
       }

       .logo-item {
           padding: 0.5rem 1rem;
       }

       .logo-track-infinite {
           gap: 2rem;
           animation: scroll-infinite 25s linear infinite;
       }
   }