:root {
    /* Colors */
    --primary: #00C2FF;
    /* Brand Cyan */
    --secondary: #FF4D00;
    /* Brand Red */
    --accent: #FFC107;
    /* Brand Yellow */

    --brand-purple: #9C27B0;
    --brand-orange: #FF9800;
    --brand-blue: #1D4ED8;

    --dark-bg: #1a1a1a;
    /* New Dark Gray Background */
    --card-bg: rgba(255, 255, 255, 0.05);
    --text-main: #ffffff;
    --text-muted: #94a3b8;

    /* Gradients */
    --mesh-1: radial-gradient(at 0% 0%, rgba(0, 194, 255, 0.15) 0, transparent 50%);
    /* Cyan tint */
    --mesh-2: radial-gradient(at 50% 0%, rgba(255, 77, 0, 0.15) 0, transparent 50%);
    /* Purple tint */
    --mesh-3: radial-gradient(at 100% 0%, rgba(255, 77, 0, 0.15) 0, transparent 50%);
    /* Red tint */

    /* Spacing */
    --container-width: 1200px;
    --header-height: 80px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-main);
    overflow-x: hidden;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Utils */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1rem;
}

.mesh-gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--dark-bg);
    background-image: var(--mesh-1), var(--mesh-2), var(--mesh-3);
    z-index: -1;
    pointer-events: none;
}

/* Nav */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-menu {
    display: none;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    max-height: 6em;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    font-weight: 600;
    color: var(--dark-bg);
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--primary);
}

.nav-links a.active {
    color: var(--primary);
    position: relative;
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--primary), var(--accent));
    border-radius: 2px;
}

.btn-nav {
    padding: 0.5rem 1.5rem;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    border-radius: 50px;
    color: white;
    font-weight: 700;
    transition: transform 0.3s ease;
}

.btn-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 194, 255, 0.4);
}

.menu-toggle {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--dark-bg);
}

/* Sections General */
section {
    min-height: 100vh;
    padding: 100px 0;
    position: relative;
}

/* Smooth gradient transitions between sections */
section::before,
section::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 150px;
    pointer-events: none;
    z-index: 5;
}

section::before {
    top: 0;
    background: linear-gradient(to bottom, var(--dark-bg) 0%, transparent 100%);
}

section::after {
    bottom: 0;
    background: linear-gradient(to top, var(--dark-bg) 0%, transparent 100%);
}

/* Disable gradients on specific sections that have their own styling */
.hero-section::before {
    display: none;
}

/* Note: Services section ::before is used for background image (defined later in file) */

.buenoboleto-section::before,
.buenoboleto-section::after {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .mobile-menu {
        display: none;
        flex-direction: column;
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.5);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 0.5rem 2rem 0 rgba(31, 38, 135, 0.1);
        padding: 1.5rem 5%;
        z-index: 999;
        /* Ensure it covers height if needed, or just auto based on content */
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
    }

    .mobile-menu.active {
        display: flex;
        animation: slideDown 0.3s ease forwards;
    }

    .mobile-menu a {
        font-size: 1.1rem;
        padding: 0.8rem 0;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        color: var(--dark-bg);
        font-weight: 600;
        text-decoration: none;
    }

    .mobile-menu a.active {
        color: var(--primary);
        background: rgba(0, 194, 255, 0.05);
        /* Subtle tint */
        border-left: 3px solid var(--primary);
        /* Left marker */
    }

    .mobile-menu a:last-child {
        border-bottom: none;
        margin-top: 1rem;
    }

    .btn-nav-mobile {
        /* Style for the button in mobile menu if needed specifically */
        background: linear-gradient(45deg, var(--primary), var(--secondary));
        color: white !important;
        border-radius: 50px;
        margin-top: 1rem;
    }

    .menu-toggle {
        display: block;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Hero Section Styles is appended below */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--header-height);
    overflow: hidden;
    /* For parallax elements */
}

.hero-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100vh;
    object-fit: contain;
    z-index: 1;
}

.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20vh;
    background: linear-gradient(to bottom, transparent, var(--dark-bg));
    z-index: 2;
    pointer-events: none;
}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 20;
    /* High priority */
}

.hero-text {
    max-width: 800px;
}

.hero-title {
    font-size: 4.5rem;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 2rem;
    color: white;
}

.reveal-text {
    display: inline-block;
    background: linear-gradient(to right, #fff, var(--text-muted));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    margin-left: auto;
    margin-right: auto;
}


.hero-cta-group {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

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

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

.btn-primary {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: white;
    color: var(--dark-bg);
    font-weight: 700;
    border-radius: 50px;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    z-index: 1;
}

.glow-effect {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.glow-effect:hover {
    box-shadow: 0 0 30px rgba(0, 194, 255, 0.5);
}

.btn-secondary {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 700;
    border-radius: 50px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-secondary:hover {
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(255, 193, 7, 0.6);
}

/* Shared animated gradient pseudo-element */
.btn-primary::before,
.btn-secondary::before,
.btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--primary), var(--accent), var(--secondary), var(--primary));
    background-size: 300% 300%;
    z-index: -1;
    transition: transform 0.5s ease;
    transform: scaleX(0);
    transform-origin: left;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover {
    color: white !important;
}

.btn-primary:hover::before,
.btn-secondary:hover::before,
.btn-outline:hover::before {
    transform: scaleX(1);
    animation: gradientMove 3s ease infinite;
}

.btn-primary:hover {
    color: white;
    box-shadow: 0 0 30px rgba(255, 193, 7, 0.6);
}

/* Hero Visual & Parallax */
.hero-visual {
    position: relative;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.silhouette-container {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
}

.silhouette-placeholder {
    width: 80%;
    height: 90%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.0));
    border-radius: 200px 200px 0 0;
    margin: auto;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: absolute;
    bottom: 0;
    left: 10%;
}

.floating-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.08);
    /* Dark glass */
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1rem 1.5rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 20;
    /* Floating on top */
}

.card-1 {
    top: 20%;
    left: 0;
    animation: float 6s ease-in-out infinite;
}

.card-1 i {
    color: var(--primary);
}

.card-2 {
    bottom: 25%;
    right: 0;
    animation: float 7s ease-in-out infinite reverse;
}

.card-2 i {
    color: var(--accent);
}

@keyframes float {

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

    50% {
        transform: translateY(-20px);
    }
}

/* Background Shapes */
.hero-overlay-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
}

.sub-shape-1 {
    width: 500px;
    height: 500px;
    background: var(--primary);
    top: -100px;
    right: -100px;
    mix-blend-mode: screen;
}

.sub-shape-2 {
    width: 400px;
    height: 400px;
    background: var(--accent);
    bottom: 0;
    left: -100px;
    mix-blend-mode: screen;
}

/* Gradient Text for Assertive Phrases */
.gradient-text {
    background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-style: italic;
}

.gradient-gray {
    background: linear-gradient(45deg, #a8a29e, #d6d3d1, #a8a29e);
    /* Elegant light gray / stone / light grey mix */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Maintain font weight or other props if desired, but user kept "estilo" like the others */
}

/* Quiénes Somos Section */
.about-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
}

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

.float-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(0, 194, 255, 0.1), rgba(255, 193, 7, 0.1));
    filter: blur(40px);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.shape-1 {
    width: 300px;
    height: 300px;
    top: 10%;
    right: 5%;
}

.shape-2 {
    width: 200px;
    height: 200px;
    top: 40%;
    left: 5%;
}

.shape-3 {
    width: 250px;
    height: 250px;
    bottom: 10%;
    right: 15%;
}

/* New Split Layout for Quiénes Somos */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 6rem;
}

.about-text-col {
    text-align: left;
}

.about-visual-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-lead {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: white;
    text-align: center;
}

.about-description {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    text-align: justify;
}

/* Client Type Icons */
.client-type-icons {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    justify-content: center;
}

.client-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    transition: color 0.3s;
}

.client-icon-item i {
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    color: var(--primary);
    background: rgba(0, 194, 255, 0.1);
    border-radius: 50%;
    transition: all 0.3s;
    flex-shrink: 0;
}

.client-icon-item:hover i {
    background: var(--primary);
    color: white;
    transform: translateY(-5px);
}

.client-icon-item span {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Experience Counter Badge */
.experience-badge {
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 3rem;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 50px rgba(0, 194, 255, 0.15);
    position: relative;
    z-index: 2;
}

.counter-number {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(to right, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.counter-number::after {
    content: '+';
    font-size: 3rem;
    vertical-align: super;
}

.counter-label {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

.counter-sub {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-text-col {
        text-align: center;
    }

    .section-title {
        text-align: center !important;
    }

    .client-type-icons {
        justify-content: center;
    }
}

.philosophy-wrapper {
    margin: 8rem 0 2rem 0;
}

.courses-section {
    padding: 2rem 0;
}

.philosophy-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.philosophy-text {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--accent);
    margin-bottom: 2rem;
}

.philosophy-main {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 4rem;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
    align-items: stretch;
    padding: 0 1rem;
}

.philosophy-card {
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    padding: 3rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.philosophy-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.3);
}

.card-header,
.goals-intro {
    font-weight: 700;
    margin-bottom: 2rem;
    color: white;
    font-size: 1.25rem;
    /* Standardized Title Size */
    text-transform: none;
    /* Reset distinct transformations */
}

.goals-list li,
.value-row {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1rem;
    /* Standardized Item Size */
    color: var(--text-muted);
    font-weight: 500;
    /* Consistent weight */
    transition: all 0.3s ease;
    cursor: default;
}

.goals-list li:hover,
.value-row:hover {
    transform: translateX(10px);
    color: white;
}

.goals-list li:hover i,
.value-row:hover i {
    transform: scale(1.2);
}

.goals-list li i {
    color: var(--primary);
    font-size: 0.8rem;
}

.values-list-vertical {
    display: flex;
    flex-direction: column;
}

.value-row i {
    color: var(--accent);
    font-size: 0.8rem;
}

.value-row span {
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Animations Utility */
.reveal-up {
    opacity: 0;
    transform: translateY(50px);
}


/* Cursos & Consultorías Styles */
.courses-section {
    padding-bottom: 50px;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.profile-highlight {
    display: flex;
    align-items: stretch;
    gap: 3rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem;
    padding-right: 0;
    /* Remove right padding to allow image to extend */
    padding-bottom: 0;
    /* Remove bottom padding to allow image to reach the bottom */
    border-radius: 30px;
    margin-bottom: 5rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    transition: border-color 0.3s ease;
    overflow: visible;
    /* Allow overflow for depth effect */
    position: relative;
    min-height: 600px;
    /* Ensure adequate height for the image */
}

.profile-highlight:hover {
    border-color: var(--accent);
}

.profile-image-container {
    flex-shrink: 0;
    width: 450px;
    /* Increased width */
    height: 100%;
    /* Fill the container height */
    position: relative;
    align-self: flex-end;
    /* Align to bottom */
    overflow: visible;
    /* Allow overflow for arm sticking out */
}

/* If user uses the placeholder div */
.profile-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--text-muted), var(--dark-bg));
    border: 3px solid var(--accent);
    border-radius: 20px;
}

/* If user inserts an actual img tag later */
.profile-image-container img {
    width: 120%;
    /* Slightly larger to allow overflow */
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    /* Anchor to bottom */
    position: relative;
    right: 4px;
    bottom: -8px;
}

.profile-content {
    flex: 1;
    /* Take remaining space */
    text-align: left;
}

.profile-content h3 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: white;
    text-transform: uppercase;
    line-height: 0.9;
}

.role {
    color: var(--accent);
    /* Pinkish highlight */
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 2rem;
    display: block;
}

.bio {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.profile-content .btn-primary {
    display: inline-block;
    position: relative;
    z-index: 10;
    /* Bring to front */
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .profile-highlight {
        flex-direction: column;
        /* Content top, Image bottom */
        text-align: center;
        padding: 3rem 2rem 0 2rem;
        /* Remove bottom padding so image touches edge */
        gap: 2rem;
        min-height: auto;
        /* Allow height to adjust */
    }

    .profile-content {
        text-align: center;
    }

    .profile-content h3 {
        font-size: 2.5rem;
    }

    .profile-image-container {
        width: 100%;
        max-width: 350px;
        height: 400px;
        /* Fixed height for image area */
        border-radius: 0;
        /* Reset specific radius if needed, or keep generic */
        margin: 0 auto;
        right: auto;
        align-self: center;
    }

    .profile-image-container img {
        width: 100%;
        right: auto;
        bottom: 0;
        /* Ensure it sits at bottom */
    }
}

.services-grid-featured {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Force 4 columns */
    gap: 1.5rem;
}

@media (max-width: 1200px) {
    .services-grid-featured {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .services-grid-featured {
        grid-template-columns: 1fr;
    }
}

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 1rem;
    transition: transform 0.4s ease, border-color 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.glass-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
}

.glass-card.highlight-border {
    border: 1px solid var(--primary);
    box-shadow: 0 0 20px rgba(0, 194, 255, 0.2);
}

.card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    font-weight: 700;
}

.card-badge.free {
    background: var(--accent);
    color: white;
}

.card-badge.star {
    background: linear-gradient(45deg, var(--accent), var(--brand-orange));
    color: black;
}

.card-badge.ia-badge {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: white;
}

.card-img-top {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.glass-card p {
    color: var(--text-muted);
    margin-bottom: 2rem;
    flex-grow: 1;
}

.card-features {
    margin-bottom: 2rem;
    text-align: left;
}

.card-features li {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-features li i {
    color: var(--secondary);
    font-size: 0.8rem;
}

.btn-outline {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    text-align: center;
    transition: all 0.3s;
    font-weight: 600;
    position: relative;
    /* Added for pseudo-element */
    overflow: hidden;
    /* Added for pseudo-element */
    z-index: 1;
    /* Added for pseudo-element */
    background: transparent;
    /* Explicit transparent */
}

.btn-outline:hover {
    border-color: transparent;
    /* Hide border on hover to let gradient shine */
    /* background: white;  <-- REMOVED to let pseudo-element show */
    color: white;
}

.btn-primary.small {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    text-align: center;
}

/* Servicios Digitales Grid Styles */
.services-section {
    padding-bottom: 2rem;
}

.digital-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.service-item {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 16px;
    transition: all 0.3s;
}

.service-item:hover {
    background: rgba(0, 194, 255, 0.1);
    border-color: var(--primary);
    transform: scale(1.02);
}

.service-icon {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.service-item h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.service-item p {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.highlight-service {
    background: linear-gradient(135deg, rgba(0, 194, 255, 0.2) 0%, rgba(255, 77, 0, 0.2) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.center-cta {
    text-align: center;
}

@media (max-width: 768px) {
    .profile-highlight {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
}

/* Eventos (Horizontal Scroll) */
/* Eventos (Horizontal Scroll) */
.events-section {
    padding: 100px 0;
    overflow: hidden;
    /* Mask content */
    position: relative;
    padding-top: 0;
    /* Remove top padding to bring text closer if needed, logic handled in intro */
}

/* Removed specific section gradient that covered text defined in previous steps */

.events-intro {
    text-align: center;
    margin-bottom: 2rem;
    padding-top: 100px;
    position: relative;
    z-index: 20;
    background-color: var(--dark-bg);
}

.horizontal-scroll-wrapper {
    width: 300%;
    /* 3 panels */
    display: flex;
    flex-wrap: nowrap;
}

.horizontal-container {
    display: flex;
    width: 100%;
}

.event-panel {
    width: 100vw;
    /* Screen width panel */
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.02), transparent);
    position: relative;
    overflow: hidden;
}

/* Background image overlay for event panels */
.event-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.25;
    z-index: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.event-panel:hover::before {
    opacity: 0.35;
    transform: scale(1.05);
}

/* Fase 1 - Previo al Evento */
.panel-1::before {
    background-image: url('/images/fase01_prio_web.webp');
}

/* Fase 2 - Durante el Evento */
.panel-2::before {
    background-image: url('/images/fase02_prio_web.webp');
}

/* Fase 3 - Post-Evento */
.panel-3::before {
    background-image: url('/images/fase03_prio_web.webp');
}

.panel-content {
    max-width: 600px;
    padding: 2rem;
    position: relative;
    z-index: 2;
}

.step-number {
    font-size: 8rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.05);
    position: absolute;
    top: -4rem;
    left: -2rem;
    z-index: -1;
}

.panel-content h3 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--primary);
}

.panel-content p {
    font-size: 1.25rem;
}

.panel-result {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(0, 194, 255, 0.1);
    border-left: 3px solid var(--primary);
    font-size: 0.9rem;
    font-style: italic;
}

/* Portfolio Styles */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    grid-auto-flow: dense;
}

.portfolio-tags {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.portfolio-tags span {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.3s;
}

.portfolio-tags span:hover {
    background: var(--primary);
}

.portfolio-tags span.active {
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    color: white;
    box-shadow: 0 4px 15px rgba(0, 194, 255, 0.4);
}

/* Portfolio Filter Animations */
.portfolio-grid {
    position: relative;
    min-height: 600px;
    /* Force minimum height to prevent layout shift */
    transition: height 0.3s ease;
}

.portfolio-item.filter-hidden {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
    pointer-events: none;
    position: absolute !important;
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.portfolio-item.filter-entering {
    animation: filterFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes filterFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(40px);
    }

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

.portfolio-item {
    background: #1e293b;
    height: 300px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Align text to bottom */
    text-align: left;
    font-size: 1.5rem;
    color: white;
    /* Changed from faded to white for visibility */
    transition: all 0.4s;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    padding: 0;
    /* Remove padding to let image fill */
}

.portfolio-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 0.6s ease;
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 70%);
    z-index: 1;
    pointer-events: none;
    transition: background 0.4s ease;
}

.portfolio-item:hover .portfolio-overlay {
    background: rgba(0, 0, 0, 0.7);
}

.portfolio-content {
    position: relative;
    z-index: 2;
    padding: 1.5rem;
    width: 100%;
}

.portfolio-content h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s ease;
}

.portfolio-cta {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--primary);
    margin: 0;
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.portfolio-item:hover .portfolio-content h3 {
    transform: translateY(-8px);
}

.portfolio-item:hover .portfolio-cta {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-item:hover {
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.6);
}

.item-large {
    grid-row: span 2;
    height: 616px;
    /* 300*2 + 16 gap */
}

.item-wide {
    grid-column: span 2;
}

/* Bueno Boleto */
.buenoboleto-section {
    background: linear-gradient(90deg, var(--brand-orange) 0%, var(--accent) 100%);
    /* Gold theme example */
    color: black;
    border-radius: 40px;
    margin: 0rem 1rem;
    /* inset look */
    padding: 2rem;
}

.bb-flex {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.bb-content {
    flex: 1;
}

.bb-title {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.bb-subtitle {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

.bb-features li {
    margin-bottom: 0.5rem;
    list-style-type: disc;
    margin-left: 1.5rem;
    font-weight: 600;
}

.bb-visual {
    flex: 1;
    display: flex;
    justify-content: center;
}

.ticket-visual {
    width: 300px;
    height: 150px;
    background: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-10deg);
    border-radius: 10px;
    border: 2px dashed #444;
    transition: transform 0.3s;
}

.ticket-visual:hover {
    transform: rotate(0deg) scale(1.1);
}

.ticket-stub {
    font-family: monospace;
    font-size: 2rem;
    letter-spacing: 5px;
    text-transform: uppercase;
}

/* Contact Styles */
.contact-section {
    padding-bottom: 100px;
}

.contact-wrapper {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
}

.contact-info {
    flex: 1;
}

.contact-info h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.5rem;
    margin-top: 2rem;
    color: var(--accent);
}

.contact-form-container {
    flex: 1;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: white;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
}

/* Footer */
footer {
    background: #000000;
    padding: 50px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-links h4,
.footer-contact h4 {
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    color: white;
}

.footer-links a {
    display: block;
    margin-bottom: 0.8rem;
    color: var(--text-muted);
    transition: color 0.3s;
}

.footer-links a:hover {
    color: white;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.9rem;
}


/* NEW STYLES for Video Hero & Detailed Form */

/* Video Hero Styles */
.hero-section.video-hero {
    position: relative;
    overflow: hidden;
    background: black;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
    opacity: 0.6;
    /* Slight dimming built-in or use overlay */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    /* Final darker state */
    z-index: 1;
    transition: background 1.5s ease;
}

.video-overlay.intro-state {
    background: rgba(0, 0, 0, 0.2);
    /* Very light intro state */
}

.hero-container {
    position: relative;
    z-index: 2;
    /* Content above video */
}

/* Detailed Contact Form Styles */
.contact-form-detailed {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-section-title {
    font-size: 1.1rem;
    color: var(--accent);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}

.checkbox-group,
.radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.8rem;
}

.radio-group.inline {
    display: flex;
    gap: 1.5rem;
}

.checkbox-group label,
.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
}

.checkbox-group input[type="checkbox"],
.radio-group input[type="radio"] {
    accent-color: var(--primary);
    width: 1rem;
    height: 1rem;
}

.checkbox-simple label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .bb-flex {
        flex-direction: column;
    }

    .contact-wrapper {
        flex-direction: column;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .item-large,
    .item-wide {
        grid-column: span 1;
        grid-row: span 1;
        height: 300px;
    }
}

.hero-controls {
    position: absolute;
    bottom: 40px;
    right: 50px;
    display: flex;
    gap: 15px;
    z-index: 100;
}

.btn-control {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#audio-toggle {
    width: 45px;
    padding: 0;
}

.btn-control:hover {
    background: rgba(0, 194, 255, 0.2);
    border-color: var(--primary);
    transform: translateY(-2px);
}

#hero-content {
    opacity: 0;
    pointer-events: none;
}

#hero-content.revealed {
    pointer-events: all;
    margin-bottom: 2rem;
}

/* Eventos (Horizontal Scroll) */
.events-section {
    padding: 0;
    overflow: hidden;
    /* margin moved to previous section */
}

.events-intro {
    text-align: center;
    padding: 1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
    /* Removed min-height to allow text to sit higher */
}

.projects-intro {
    margin-top: 4rem;
    text-align: center;
    margin-bottom: 2rem;
}

.projects-intro h3 {
    margin-bottom: 1rem;
}

.projects-intro p {
    color: var(--text-muted);
    max-width: 800px;
    margin: 0 auto;
}

/* 
   Horizontal Scroll Logic Refactor
   Wrapper: Acts as the window (100vw).
   Container: Holds all panels in a row (300vw).
*/
.horizontal-scroll-wrapper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* Gradient to blend image start with dark background */
.horizontal-scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 250px;
    background: linear-gradient(to bottom, var(--dark-bg) 10%, transparent 100%);
    z-index: 5;
    pointer-events: none;
}

.horizontal-container {
    display: flex;
    width: max-content;
    /* Allow it to take up necessary space */
    height: 100%;
}

.event-panel {
    width: 100vw;
    height: 100%;
    flex-shrink: 0;
    /* Prevent shrinking */
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.02), transparent);
}

.services-section {
    position: relative;
    z-index: 10;
    background-color: #1a1a1a;
    transition: background-color 0.7s ease;
    overflow: hidden;
    margin-bottom: 30vh;
    /* Substantial gap */
}

/* Background image layer with blend mode */
.services-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--service-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
    mix-blend-mode: overlay;
    transition: background-image 0.5s ease, opacity 0.5s ease;
    z-index: 0;
    pointer-events: none;
}

/* Ensure content stays above the background */
.services-section>* {
    position: relative;
    z-index: 1;
}

/* Top and Bottom gradient overlay for smooth transition */
.services-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient: Dark at top -> Transparent middle -> Dark at bottom */
    background: linear-gradient(to bottom,
            var(--dark-bg) 0%,
            transparent 15%,
            transparent 85%,
            var(--dark-bg) 100%);
    z-index: 2;
    pointer-events: none;
}

.services-carousel-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    min-height: 100vh;
    padding: 0rem;
    /* Full screen for pinning */
}

/* Info panel always above the wheel */
@media (min-width: 900px) {
    .services-carousel-wrapper {
        flex-direction: row;
        /* Row layout: Wheel Left, Info Right */
        align-items: center;
        justify-content: center;
        text-align: left;
        gap: 4rem;
        padding-top: 0;
        /* Lift up */
        min-height: 80vh;
        /* Reduce height to pull up */
    }
}

/* --- Info Panel --- */
.carousel-info-panel {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    max-width: 500px;
    width: 100%;
    order: 2;
    /* Info second (Right on desktop) */
}

/* Ensure chart panel is first */
.carousel-chart-panel {
    order: 1;
}

@media (min-width: 900px) {
    .carousel-info-panel {
        align-items: flex-start;
        text-align: left;
        padding: 3rem;
        order: 2;
        /* Explicitly second */
    }

    .carousel-chart-panel {
        order: 1;
        /* Explicitly first */
    }
}

.info-content {
    opacity: 0;
    transform: translateY(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

@media (min-width: 900px) {
    .info-content {
        align-items: flex-start;
        text-align: left;
    }
}

.icon-box {
    display: inline-flex;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.icon-box i {
    font-size: 2.5rem;
    color: white;
}

.service-dynamic-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 1rem;
    text-shadow: 0 0 10px currentColor;
    /* Glow effect */
    transition: color 0.3s ease;
}

@media (min-width: 900px) {
    .service-dynamic-title {
        font-size: 3.5rem;
    }
}

.service-dynamic-desc {
    font-size: 1.125rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 450px;
    margin-bottom: 2rem;
}

/* --- Controls --- */
.carousel-controls {
    display: none;
    /* Hidden as per request to rely on scroll */
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.btn-control-circle {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-control-circle:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-control-circle:active {
    transform: scale(0.95);
}

.btn-control-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: white;
    color: #1a1a1a;
    /* Dark bg color */
    border-radius: 9999px;
    font-weight: 700;
    font-size: 1.125rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-control-main:hover {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

.btn-control-main:active {
    transform: scale(0.95);
}

/* --- Chart Panel --- */
.carousel-chart-panel {
    flex: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    order: 1;
    /* Mobile: on top */
    margin-top: -50px;
    /* Move carousel up */
}

@media (min-width: 900px) {
    .carousel-chart-panel {
        order: 2;
        height: auto;
        margin-top: -80px;
        /* Move up more on desktop if needed */
    }
}

.chart-svg-container {
    width: 350px;
    height: 350px;
    position: relative;
    z-index: 10;
}

@media (min-width: 900px) {
    .chart-svg-container {
        width: 650px;
        /* Slightly larger container to fit larger text if needed */
        height: 650px;
    }
}

#pie-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* SVG Elements */
.slice-path {
    transition: all 0.3s ease;
    cursor: pointer;

    /* Glassmorphism Effect */
    fill-opacity: 0.3 !important;
    /* Override inline fill opacity if any, or just ensure translucency */
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 1px;
    backdrop-filter: blur(10px);
    /* Experimental on SVG */
}

.slice-path:hover {
    fill-opacity: 0.6 !important;
    filter: brightness(1.2);
    stroke: rgba(255, 255, 255, 0.8);
}

.slice-text {
    font-size: 24px;
    /* Significantly larger */
    font-weight: 800;
    fill: white;
    pointer-events: none;
    text-transform: uppercase;
    font-family: 'Outfit', sans-serif;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    /* Better readability on glass */
}

/* Selection Arrows */
.selection-arrow {
    position: absolute;
    z-index: 20;
    pointer-events: none;
}

.desktop-arrow {
    display: none;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid white;
    /* Ensures arrow points right towards chart */
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

@media (min-width: 900px) {
    .desktop-arrow {
        display: block;
    }
}

.mobile-arrow {
    display: block;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 30px solid white;
    /* Points UP */
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

@media (min-width: 900px) {
    .mobile-arrow {
        display: none;
    }
}

/* =========================================
   FLOATING WHATSAPP BUTTON & CONTACT STYLES
   ========================================= */

/* Floating WhatsApp */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 35px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.whatsapp-float:hover {
    background-color: #128c7e;
    transform: scale(1.1);
    color: #FFF;
    box-shadow: 2px 2px 10px rgba(37, 211, 102, 0.5);
}

/* Footer Styles Updates */
.footer-contact p.footer-item {
    margin-bottom: 0.8rem;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--text-muted);
}

.footer-contact p.footer-item i {
    margin-top: 5px;
    color: var(--primary);
    min-width: 20px;
}

.footer-map-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-map-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

.footer-social h4 {
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    color: white;
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-link {
    font-size: 1.5rem;
    color: white;
    transition: color 0.3s, transform 0.3s;
    background: rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.social-link:hover {
    color: white;
    background: var(--primary);
    transform: translateY(-3px);
}

/* Contact Section Updates */
.contact-method {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var (--text-muted);
}

.contact-method.align-start {
    align-items: flex-start;
}

.contact-method i {
    font-size: 1.5rem;
    color: var(--accent);
    min-width: 30px;
    text-align: center;
}

/* Fix for overlapping buttons */
.hero-controls {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: auto;
    /* Reset right alignment if any */
    display: flex;
    gap: 1rem;
    z-index: 20;
    pointer-events: auto;
}

.btn-control {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.8rem 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
    backdrop-filter: blur(5px);
}

.btn-control:hover {
    background: var(--primary);
    border-color: var(--primary);
}

/* Unified Footer Links Styles */
.footer-link-item {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

/* Hover Yellow (Accent) for all footer links */
.footer-links a:hover,
.footer-link-item:hover,
.footer-map-link:hover {
    color: var(--accent) !important;
    text-decoration: none;
}

/* Social Links Hover - Yellow Background */
.social-link:hover {
    background: var(--accent) !important;
    color: var(--dark-bg) !important;
    /* Dark text on yellow */
    transform: translateY(-3px);
}

/* Carousel Pagination Dots */
/* Unified Carousel Controls */
.carousel-unified-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    width: 100%;
}

.carousel-pagination {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 0;
    /* Reset margin since it's in flex container */
    z-index: 20;
}

.nav-arrow-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    outline: none;
}

/* Services Section Spacing */
/* Services Section Spacing */
/* .services-section rule removed by user, cleaning up empty block */

/* Events Section Spacing */
.events-section {
    margin-top: -10%;
}

/* Events Carousel Styles (New) */
.events-slider-wrapper {
    overflow: hidden;
    width: 90%;
    max-width: 1200px;
    margin: 2rem auto;
    /* padding: 0 1rem; Removed to let images be full width if needed */
    position: relative;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.events-slider-track {
    display: flex;
    width: 300%;
    /* 3 slides = 300% */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.event-slide {
    width: 33.333%;
    min-height: 500px;
    padding: 1rem;
    /* Reduced padding for cleaner look */
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    /* Center vertically */
    justify-content: center;
    /* Center horizontally */
}

/* Background Images for Panels */
.panel-1 {
    background-image: url('../images/fase01_prio_web.webp');
    background-color: #2c3e50;
}

.panel-2 {
    background-image: url('../images/fase02_prio_web.webp');
    background-color: #34495e;
}

.panel-3 {
    background-image: url('../images/fase03_prio_web.webp');
    background-color: #1abc9c;
}

.event-slide .panel-content {
    background: rgba(15, 15, 15, 0.9);
    backdrop-filter: blur(10px);
    padding: 1rem;
    /* Inner padding */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 600px;
    width: 90%;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s ease 0.3s;
    text-align: center;
    /* Center text */
}

.event-slide.active .panel-content {
    transform: translateY(0);
    opacity: 1;
}

.event-slide .panel-content h3 {
    font-size: 1.3rem;
    white-space: nowrap;
    margin-bottom: 0.5rem;
}

.event-slide .panel-result {
    margin-top: 1.5rem;
    padding: 0.8rem 1.5rem;
    background: var(--primary);
    color: white;
    font-weight: bold;
    border-radius: 12px;
    display: inline-block;
    font-size: 1rem;
}

.events-controls {
    margin-top: 2rem;
}

.nav-arrow-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 194, 255, 0.5);
}

.carousel-dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.carousel-dot:hover {
    background-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

.carousel-dot.active {
    background-color: var(--primary);
    border-color: var(--primary);
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(0, 194, 255, 0.5);
}

/* Service Selection Buttons (Checkbox Replacement) */

/* --- BUENO BOLETO VISUAL IDENTITY --- */
.buenoboleto-section {
    background: #111;
    /* Dark bg for negative logo */
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

/* Background Gradients (Blue/Dark) */
.buenoboleto-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(38, 20, 147, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
    /* #261493 */
    z-index: 1;
    pointer-events: none;
}

.buenoboleto-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(53, 177, 235, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
    /* #35b1eb */
    z-index: 1;
    pointer-events: none;
}

.bb-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    position: relative;
    z-index: 2;
}

.bb-content {
    flex: 1;
    max-width: 600px;
}

.bb-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Typography */
.bb-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4rem;
    color: #fff;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #fff, #35b1eb);
    /* White to Bright Blue */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bb-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #35b1eb;
    /* Blue Bright */
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bb-slogan {
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 1.2rem;
    color: #ccc;
    margin-bottom: 2rem;
    border-left: 3px solid #35b1eb;
    padding-left: 1rem;
}

.bb-mission-values p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: #e0e0e0;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.bb-features {
    list-style: none;
    padding: 0;
    margin-bottom: 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.bb-features li {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bb-features li i {
    color: #35b1eb;
}

/* Contact Grid */
.bb-contact-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.bb-contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #ccc;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    transition: color 0.3s ease;
}

.bb-contact-item:hover {
    color: #35b1eb;
}

.bb-contact-item i {
    font-size: 1.2rem;
    color: #261493;
    /* Dark Blue */
    background: #fff;
    padding: 0.5rem;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Button */
.bb-btn {
    background: linear-gradient(90deg, #261493, #35b1eb);
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(53, 177, 235, 0.4);
}

.bb-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(53, 177, 235, 0.6);
}

/* Visual - Images */
.bb-image-container {
    position: relative;
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bb-isotipo {
    width: 200px;
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 0 20px rgba(53, 177, 235, 0.5));
    /* animation: float 6s ease-in-out infinite; <--- Removed to stop "jumping" */
    transition: transform 0.3s ease;
    /* Add smooth transition for hover if needed */
}

.bb-graphic-element {
    position: absolute;
    width: 100%;
    height: auto;
    z-index: 1;
    opacity: 0.6;
    /* Removed rotation animation as requested to only animate isotype */
    /* animation: rotateSlow 20s linear infinite; */
}

@keyframes rotateSlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Mobile */
@media (max-width: 992px) {
    .bb-flex {
        flex-direction: column;
        text-align: center;
    }

    .bb-content {
        max-width: 100%;
    }

    .bb-image-container {
        width: 300px;
        height: 300px;
    }

    .bb-isotipo {
        width: 150px;
    }

    .bb-features {
        justify-items: center;
        /* Center grid items */
    }

    .bb-slogan {
        border-left: none;
        padding-left: 0;
    }

    .bb-contact-item {
        justify-content: center;
    }
}

/* Service Selection Grid (Restored) */
.service-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

/* Service Accordion */
.service-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    opacity: 0;
}

.service-accordion-content.expanded {
    max-height: 2000px;
    /* Sufficient height */
    opacity: 1;
}

.service-toggler {
    text-align: center;
    cursor: pointer;
    color: var(--secondary);
    /* Cyan/Blue */
    font-weight: 600;
    margin-top: -1rem;
    /* Pull up closer */
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    padding: 0.5rem;
    border-radius: 8px;
}

.service-toggler:hover {
    background: rgba(255, 255, 255, 0.05);
}

.service-toggler i {
    transition: transform 0.3s ease;
}

.service-toggler.expanded i {
    transform: rotate(180deg);
}

.no-margin-top {
    margin-top: 0 !important;
}

.service-item {
    position: relative;
}

.service-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.service-card-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    height: 100%;
    min-height: 140px;
}

.service-card-label:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
}

.service-card-label i {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--secondary);
    /* Cyan/Blue */
    transition: all 0.3s ease;
}

.service-card-label span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.3;
    transition: color 0.3s ease;
}

/* Checked State */
.service-item input:checked+.service-card-label {
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.2), rgba(0, 194, 255, 0.2));
    border-color: var(--secondary);
    box-shadow: 0 0 20px rgba(0, 194, 255, 0.3);
    transform: translateY(-3px);
}

.service-item input:checked+.service-card-label i {
    color: var(--secondary);
    transform: scale(1.1);
    text-shadow: 0 0 10px rgba(0, 194, 255, 0.6);
}

.service-item input:checked+.service-card-label span {
    color: white;
    font-weight: 600;
}

/* Desarrollo de Proyectos Empresariales Section */
.projects-detailed-section {
    padding: 100px 0;
    position: relative;
    background: linear-gradient(to bottom, var(--dark-bg), #0f1012);
    /* Subtle variation */
    overflow: hidden;
}

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

/* Left Column: Text */
.projects-text-col {
    position: sticky;
    top: 120px;
    /* Sticky effect when scrolling */
}

.project-description-lead {
    font-size: 1.4rem;
    line-height: 1.6;
    color: white;
    margin-bottom: 2rem;
}

.project-description-sub {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 3rem;
}

.project-cta-container {
    margin-top: 2rem;
}

/* Right Column: Process Diagram */
.projects-visual-col {
    position: relative;
    padding-left: 20px;
}

.process-flow-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
}

/* Vertical Line connecting steps */
.process-flow-container::before {
    content: '';
    position: absolute;
    top: 25px;
    left: 24px;
    /* Center of the icon (50px width / 2 = 25px, approx) */
    width: 2px;
    height: calc(100% - 50px);
    background: linear-gradient(to bottom, var(--primary), var(--secondary), var(--accent));
    z-index: 0;
    opacity: 0.5;
}

.process-step {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    /* Removed transform/all to prevent GSAP conflict */
}

.process-step:hover {
    /* transform: translateX(10px);  <-- Removed CSS hover transform to avoid conflict with GSAP inline styles.
       We will rely on simple visual cues or add GSAP hover if strictly needed,
       but for now removing conflict is priority.
       Actually, if we clean props, we can use it. But let's keep it simple. */
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.step-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--dark-bg);
    border: 2px solid var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(0, 194, 255, 0.3);
    z-index: 2;
    /* Above the line */
}

/* Vary border/glow colors for subsequent steps to match gradient */
.process-step:nth-child(3n+2) .step-icon {
    border-color: var(--secondary);
    box-shadow: 0 0 10px rgba(255, 77, 0, 0.3);
}

.process-step:nth-child(3n+3) .step-icon {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
}

.step-content h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #e2e8f0;
}

/* Responsive */
@media (max-width: 900px) {
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .projects-text-col {
        position: static;
        /* Remove sticky on mobile */
        text-align: center;
        margin-bottom: 2rem;
    }

    .projects-visual-col {
        padding-left: 0;
    }

    .process-flow-container::before {
        left: 24px;
        /* Adjust line position if padding changes */
    }

    .process-step {
        padding: 1rem;
    }

    /* Ensure icons stay same size or adjust if needed */
}