/* Variables de Colores */
:root {
    --color-amarillo: #DAA520;
    --color-rojo: #DC143C;
    --color-verde: #5e90e3;
    /* Main Blue tone */
    --color-azul: #5e90e3;
    /* Main Blue tone */
    --color-azul-oscuro: #de4c67;
    /* Accent Pink/Red */
    --color-blanco: #FFFFFF;
    --color-gris-claro: #F5F5F5;
    --color-gris: #666666;
    --color-negro: #1A1A1A;
}

/* Reset y Básicos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--color-negro);
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navegación */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #0c1e47 0%, #1e3a8a 50%, #2563eb 100%);
    padding: 1rem 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(12, 30, 71, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.navbar .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-amarillo);
}

.logo i {
    font-size: 2rem;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-menu a {
    color: var(--color-blanco);
    text-decoration: none;
    transition: color 0.3s;
    font-weight: 500;
}

.nav-menu a:hover {
    color: var(--color-amarillo);
}

.btn-inscripcion {
    background: var(--color-rojo);
    padding: 0.7rem 1.5rem;
    border-radius: 25px;
    font-weight: bold;
}

.btn-inscripcion:hover {
    background: var(--color-amarillo);
    color: var(--color-azul-oscuro) !important;
    transform: scale(1.05);
}

.btn-inscripcion.active {
    background: var(--color-amarillo);
    color: var(--color-azul-oscuro) !important;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--color-blanco);
    transition: 0.3s;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    background: linear-gradient(135deg, var(--color-azul-oscuro) 0%, var(--color-azul) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-blanco);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><path fill="rgba(218,165,32,0.1)" d="M0,100 Q300,200 600,100 T1200,100 L1200,0 L0,0 Z"/><path fill="rgba(220,20,60,0.1)" d="M0,300 Q300,400 600,300 T1200,300 L1200,0 L0,0 Z"/></svg>');
    background-size: cover;
    animation: waveAnimation 20s ease-in-out infinite;
}

@keyframes waveAnimation {

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

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

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 0 20px;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 2rem;
    color: var(--color-amarillo);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.hero-description {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Animaciones Hero */
.animate-slide-up {
    animation: slideUp 1s ease-out;
}

.animate-slide-up-delay {
    animation: slideUp 1s ease-out 0.3s both;
}

.animate-fade-in {
    animation: fadeIn 1s ease-out 0.6s both;
}

.animate-fade-in-delay {
    animation: fadeIn 1s ease-out 0.9s both;
}

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

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    animation: bounce 2s infinite;
    cursor: pointer;
}

@keyframes bounce {

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

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

    60% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* Botones */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background: var(--color-rojo);
    color: var(--color-blanco);
}

.btn-primary:hover {
    background: var(--color-amarillo);
    color: var(--color-azul-oscuro);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--color-blanco);
    border: 2px solid var(--color-blanco);
}

.btn-secondary:hover {
    background: var(--color-blanco);
    color: var(--color-azul-oscuro);
    transform: translateY(-3px);
}

.btn-large {
    padding: 1.2rem 2.5rem;
    font-size: 1.2rem;
}

/* Logo Carousel */
.logo-carousel {
    background: var(--color-blanco);
    padding: 4rem 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.logo-carousel::before,
.logo-carousel::after {
    background: linear-gradient(to right, var(--color-blanco) 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100%;
    position: absolute;
    width: 150px;
    z-index: 2;
    top: 0;
}

.logo-carousel::after {
    background: linear-gradient(to left, var(--color-blanco) 0%, rgba(255, 255, 255, 0) 100%);
    right: 0;
}

.logo-carousel::before {
    left: 0;
}

.slider {
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slide-track {
    animation: scroll 30s linear infinite;
    display: flex;
    width: calc(250px * 18);
}

.slide {
    height: 100px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
}

.slide img {
    max-height: 80px;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
    cursor: pointer;
}

.slide img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

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

    100% {
        transform: translateX(calc(-250px * 6));
    }
}

/* Historia Section */
.history-section {
    background: #001f3f;
    /* Dark Blue from the image */
    background: linear-gradient(135deg, #001f3f 0%, #003366 100%);
    padding: 5rem 0;
    color: white;
    position: relative;
    overflow: hidden;
}

.history-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 3rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    line-height: 1.3;
}

.history-content {
    display: flex;
    align-items: center;
    gap: 3rem;
    justify-content: center;
    position: relative;
}

.history-image-container {
    flex: 0 0 350px;
    z-index: 2;
}

.maestra-img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s;
}

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

.history-text-box {
    background: #fffbef;
    /* Creamy white */
    color: #333;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 650px;
}

.history-text-box p {
    margin-bottom: 1rem;
}

.history-text-box strong {
    color: #003366;
}

/* Responsive History */
@media (max-width: 992px) {
    .history-content {
        flex-direction: column;
        text-align: center;
    }

    .history-title {
        font-size: 1.8rem;
    }

    .history-image-container {
        flex: 0 0 auto;
        width: 250px;
    }
}

/* Servicios */
.services {
    padding: 5rem 0;
    background: var(--color-gris-claro);
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--color-azul-oscuro);
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--color-gris);
    margin-bottom: 3rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.service-card {
    background: var(--color-blanco);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.service-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-azul), var(--color-verde));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.service-icon i {
    font-size: 2.5rem;
    color: var(--color-blanco);
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-azul-oscuro);
}

.service-card ul {
    list-style: none;
    margin-top: 1.5rem;
}

.service-card li {
    padding: 0.5rem 0;
    color: var(--color-verde);
}

.service-card li i {
    margin-right: 0.5rem;
}



/* Thematic Section */
.thematic-section {
    background: linear-gradient(135deg, var(--color-azul) 0%, var(--color-azul-oscuro) 100%);
    /* Previously Deep Navy Blue */
    padding: 6rem 0;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
}

.thematic-header h2 {
    font-size: 3.5rem;
    font-family: 'Fredoka One', cursive;
    /* Rounded playful font */
    text-transform: uppercase;
    text-shadow: 4px 4px 0px #000;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
    line-height: 1.1;
    color: white;
}

.thematic-header p {
    font-size: 1.3rem;
    max-width: 900px;
    margin: 0 auto 5rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Flight Path Animation */
.flight-path-container {
    position: absolute;
    top: 50px;
    right: 5%;
    width: 250px;
    height: 120px;
    pointer-events: none;
    z-index: 0;
}

.flight-path-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.path-line {
    opacity: 0.6;
    filter: drop-shadow(0 0 2px white);
}

.plane-icon-flying {
    font-size: 3rem;
    color: white;
    /* Basic imitation of flight since Offset path is tricky cross-browser without prefix, keeping it simple with translation keyframes that match the SVG curve roughly */
    position: absolute;
    top: 0;
    left: 0;
    animation: flyCurve 8s linear infinite;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
    transform-origin: center center;
}

@keyframes flyCurve {
    0% {
        transform: translate(0, 100px) rotate(-45deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    25% {
        transform: translate(60px, 40px) rotate(-30deg);
    }

    50% {
        transform: translate(150px, 10px) rotate(-15deg);
    }

    75% {
        transform: translate(250px, 50px) rotate(10deg);
        opacity: 1;
    }

    100% {
        transform: translate(300px, 80px) rotate(20deg);
    }
}



.thematic-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    /* Closer gap */
    margin-bottom: 4rem;
    padding: 0 1rem;
}

.topic-item {
    position: relative;
    width: 210px;
    height: 250px;
    /* Space for the bubble + visual */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.topic-content {
    background: #fffbef;
    /* Creamy White */
    color: #001f3f;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.topic-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: #FFD700;
    /* Gold */
    color: #001f3f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 900;
    z-index: 3;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.topic-visual {
    position: absolute;
    bottom: -15px;
    /* Overlap bottom */
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 90px;
    background: #0088cc;
    /* Blue circle for visual */
    border: 4px solid #fffbef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.topic-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topic-visual i {
    font-size: 2.5rem;
    color: white;
}

.thematic-footer {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 1rem;
    text-align: justify;
    line-height: 1.6;
    padding: 0 2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .topic-item {
        margin-bottom: 3rem;
    }
}



/* Responsive Thematic */
@media (max-width: 768px) {
    .topic-item {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        background: rgba(255, 255, 255, 0.1);
        padding: 1rem;
    }
}

/* Expositores */
.expositores {
    padding: 5rem 0;
    background: var(--color-blanco);
}

/* Lulu Cisneros Section */
.lulu-section {
    background: linear-gradient(to bottom, var(--color-azul), var(--color-azul-oscuro));
    /* Subtle gradient for depth */
    padding: 6rem 0;
    color: white;
    border-top: 8px solid #FFD700;
    /* Gold separator line */
    position: relative;
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.3);
    /* Shadow to lift it slightly */
}

.lulu-content {
    display: flex;
    align-items: center;
    gap: 3rem;
    justify-content: center;
}

.lulu-image-col {
    flex: 1;
    max-width: 500px;
    text-align: center;
}

.lulu-text-col {
    flex: 1;
    max-width: 600px;
}

.lulu-title-desktop,
.lulu-title-mobile {
    font-family: 'Arial Black', sans-serif;
    font-size: 2.5rem;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 2rem;
    text-align: left;
}

.lulu-title-mobile {
    display: none;
    /* Hidden by default on desktop */
}

.highlight-text {
    color: #fff;
    text-shadow: 2px 2px 0 #000;
}

.lulu-image-wrapper {
    border: 5px solid white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    background: #000;
    /* transform: rotate(-2deg); */
}

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

.lulu-card {
    background: #fffbef;
    /* Cream */
    color: var(--color-negro);
    padding: 2.5rem;
    border-radius: 20px;
    font-size: 1.05rem;
    line-height: 1.6;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    text-align: justify;
}

.lulu-card p {
    margin-bottom: 1rem;
}

.source-text {
    font-style: italic;
    font-weight: bold;
    color: #555;
    margin-top: 1rem;
    border-top: 1px solid #ccc;
    padding-top: 1rem;
}

.lulu-footer-text {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Responsive Lulu */
@media (max-width: 992px) {
    .lulu-content {
        flex-direction: column;
    }

    .lulu-title-desktop {
        display: none;
    }

    .lulu-title-mobile {
        display: block;
        text-align: center;
        margin-bottom: 2rem;
    }

    .lulu-image-col,
    .lulu-text-col {
        max-width: 100%;
    }
}

/* Purpose & Objectives Section */
.purpose-section {
    position: relative;
    padding: 6rem 0 8rem;
    /* Extra bottom padding for flag */
    color: white;
    background: linear-gradient(180deg, rgba(0, 31, 63, 0.9), rgba(0, 40, 85, 0.95)), url('https://source.unsplash.com/random/1920x1080/?mountain,blue') no-repeat center center/cover;
    /* Fallback mountain or just gradient */
    /* Since we don't have the mountain image, using a gradient heavy mix or placeholder if permissible. Keeping simple gradient for now to be safe: */
    background: linear-gradient(135deg, var(--color-azul) 0%, var(--color-azul-oscuro) 100%);
    overflow: hidden;
}

.purpose-title {
    text-align: center;
    font-family: 'Fredoka One', cursive;
    font-size: 3rem;
    text-transform: uppercase;
    text-shadow: 4px 4px 0 #000;
    margin-bottom: 3rem;
    line-height: 1.2;
}

.purpose-card {
    background: #fff;
    color: var(--color-negro);
    padding: 2.5rem;
    border-radius: 40px;
    /* Highly rounded as in image */
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    max-width: 900px;
    margin: 0 auto 4rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    line-height: 1.5;
}

.purpose-card p {
    margin-bottom: 0.5rem;
}

.objectives-title {
    font-family: 'Fredoka One', cursive;
    font-size: 3rem;
    text-transform: uppercase;
    margin-bottom: 2rem;
    text-shadow: 4px 4px 0 #000;
    margin-left: 20px;
    /* Aligned slightly left as per image? Or centered. Image has it left-ish relative to grid */
}

.objectives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding-bottom: 3rem;
    z-index: 2;
    position: relative;
}

.objective-card {
    background: #fff;
    color: var(--color-negro);
    padding: 2rem;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    min-height: 150px;
    transition: transform 0.3s;
}

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

/* Flag Decoration - Bottom Right Corner */
.flag-decoration {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, transparent 50%, #FFD700 50%, #FFD700 66%, #003366 66%, #003366 83%, #DC143C 83%);
    z-index: 1;
    pointer-events: none;
}

/* Requirements Section */
.requirements-section {
    background: linear-gradient(135deg, var(--color-azul-oscuro) 0%, var(--color-azul) 100%);
    /* Deep Navy Blue replaced with Blue-Pink Gradient */
    padding: 6rem 0;
    color: white;
    text-align: center;
}

.requirements-title {
    font-family: 'Fredoka One', cursive;
    font-size: 3rem;
    text-transform: uppercase;
    text-shadow: 4px 4px 0 #000;
    margin-bottom: 4rem;
    line-height: 1.2;
}

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

@media (max-width: 992px) {
    .requirements-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablet */
    }
}

@media (max-width: 768px) {
    .requirements-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }
}

.requirement-card {
    background: #fff;
    color: var(--color-negro);
    padding: 2rem;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    /* Center vertically if short */
    text-align: left;
    min-height: 140px;
}

.requirement-card.centered-content {
    justify-content: center;
    text-align: center;
}

.requirements-extra {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto 4rem;
}

.info-card {
    background: #fff;
    color: var(--color-negro);
    padding: 2.5rem;
    border-radius: 25px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.requirements-cta {
    font-family: 'Fredoka One', cursive;
    font-size: 2.5rem;
    color: white;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 #000;
    margin-top: 2rem;
    line-height: 1.3;
}

/* Expositores Carousel Section */
/* Expositores Carousel Section */
.expositores-carousel-section {
    background: linear-gradient(135deg, var(--color-azul) 0%, var(--color-azul-oscuro) 100%);
    /* Blue-Pink Gradient */
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

/* Decorative Background Elements */
.expositores-carousel-section::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 4rem auto 0;
    padding: 0 60px;
    /* More space for buttons */
}

.carousel-track-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    transition: height 0.3s ease-in-out;
}

.carousel-track {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    /* Smoother bezier */
}

.carousel-slide {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateX(48px) scale(0.99);
    pointer-events: none;
    will-change: opacity, transform;
    transition:
        opacity 0.45s ease,
        transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    /* Fade + slide effect */
}

.carousel-slide.current-slide {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
    z-index: 5;
}

/* Navigation Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.carousel-btn:hover {
    background: #FFD700;
    color: #001f3f;
    border-color: #FFD700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.prev-btn {
    left: 0;
}

.next-btn {
    right: 0;
}

/* Slide Content Layout */
.expositor-slide-content {
    display: flex;
    gap: 4rem;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
}

@media (max-width: 992px) {
    .expositor-slide-content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
}

.slide-left-col {
    flex: 0 0 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeInUp 0.8s ease backwards;
    animation-delay: 0.1s;
}

.expositor-name-large {
    font-family: 'Fredoka One', cursive;
    font-size: 3.5rem;
    color: white;
    line-height: 0.9;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2rem;
    text-shadow: 0 4px 0 #000, 0 10px 20px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}

.expositor-photo-frame {
    position: relative;
    width: 300px;
    height: 380px;
    margin-bottom: 2rem;
    transform: rotate(-2deg);
    /* Stylish tilt */
    transition: transform 0.3s;
}

.expositor-photo-frame:hover {
    transform: rotate(0deg) scale(1.02);
}

.expositor-main-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    border: 5px solid #FFD700;
    /* Gold Border */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

.placeholder-photo {
    width: 100%;
    height: 100%;
    background: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: #fff;
    border-radius: 15px;
    border: 5px solid #FFD700;
}

.flag-badge {
    position: absolute;
    bottom: -25px;
    right: -25px;
    width: 90px;
    height: 90px;
    border: 4px solid #FFD700;
    /* Gold Border */
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    background: #fff;
    z-index: 2;
}

.flag-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.expositor-mini-role {
    color: #FFD700;
    /* Gold Text */
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    max-width: 300px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.slide-right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 600px;
    animation: fadeInUp 0.8s ease backwards;
    animation-delay: 0.3s;
}

.info-card-bio,
.info-card-credentials {
    background: rgba(255, 255, 255, 0.96);
    /* Clean White */
    color: #001f3f;
    padding: 2.5rem;
    border-radius: 0 20px 20px 0;
    /* Modern shape */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    text-align: left;
    border-left: 6px solid #FFD700;
    /* Gold Accent Bar */
}

.bio-summary {
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    font-weight: 500;
}

.info-card-credentials {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.check-icon {
    background: #003366;
    color: #FFD700;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(0, 51, 102, 0.3);
}

.read-more-btn {
    background: linear-gradient(to right, #003366, #001f3f);
    color: #FFD700;
    border: 1px solid #FFD700;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s;
    float: right;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.read-more-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 215, 0, 0.2);
    background: #FFD700;
    color: #001f3f;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 31, 63, 0.95);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.modal-content {
    background: white;
    color: #333;
    padding: 2rem;
    border-radius: 20px;
    max-width: 1200px;
    width: 95%;
    max-height: 95vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    text-align: left;
    display: flex;
    flex-direction: column;
}

.modal-body-scroll {
    columns: 2;
    column-gap: 2rem;
    max-height: calc(95vh - 280px);
    overflow-y: auto;
    padding-right: 1rem;
}

.modal-body-scroll p,
.modal-body-scroll ul,
.modal-body-scroll hr {
    break-inside: avoid;
    margin-bottom: 1rem;
}

.modal-body-scroll h3,
.modal-body-scroll h4 {
    break-after: avoid;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Ajustes responsive para modales */
@media (max-width: 992px) {
    .modal-body-scroll {
        columns: 1;
    }
    
    .modal-content {
        max-width: 90%;
        width: 90%;
        margin-top: 50;
    }
}

@media (max-width: 768px) {
    .modal-content {
        padding: 1.5rem;
        max-height: 90vh;
    }
    
    .modal-body-scroll {
        max-height: calc(90vh - 240px);
    }
}

@media (max-width: 480px) {
    .modal-content {
        padding: 1rem;
        width: 95%;
    }
}

.close-modal {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2rem;
    cursor: pointer;
    color: #666;
}

.close-modal:hover {
    color: red;
}

.modal-body-scroll p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* FAQ */
.faq {
    padding: 5rem 0;
    background: var(--color-gris-claro);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--color-blanco);
    margin-bottom: 1rem;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.faq-question {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-azul-oscuro);
    color: var(--color-blanco);
    transition: background 0.3s;
}

.faq-question:hover {
    background: var(--color-azul);
}

.faq-question h3 {
    font-size: 1.1rem;
    font-weight: 600;
}

.faq-question i {
    transition: transform 0.3s;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    padding: 0 1.5rem;
}

.faq-item.active .faq-answer {
    max-height: 1000px; /* Aumentado para contenido largo */
    padding: 1.5rem;
}

.faq-answer p {
    color: var(--color-gris);
    line-height: 1.8;
}

/* CTA */
.cta {
    background: linear-gradient(135deg, var(--color-rojo), var(--color-amarillo));
    color: var(--color-blanco);
    padding: 5rem 0;
    text-align: center;
}

.cta h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

/* Inscripción */
.inscripcion-section {
    padding: 100px 0 50px;
    background: var(--color-gris-claro);
    min-height: 100vh;
}

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

.inscripcion-header h1 {
    font-size: 2.5rem;
    color: var(--color-azul-oscuro);
    margin-bottom: 1rem;
}

.inscripcion-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
}

.form-container {
    background: var(--color-blanco);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.inscripcion-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-section {
    border-bottom: 2px solid var(--color-gris-claro);
    padding-bottom: 2rem;
}

.form-section:last-of-type {
    border-bottom: none;
}

.form-section h3 {
    color: var(--color-azul-oscuro);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    color: var(--color-azul-oscuro);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.8rem;
    border: 2px solid var(--color-gris-claro);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

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

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.form-note {
    text-align: center;
    color: var(--color-gris);
    font-size: 0.9rem;
}

.alert {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.alert i {
    font-size: 1.5rem;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.info-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-card {
    background: var(--color-blanco);
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.info-card i {
    font-size: 2.5rem;
    color: var(--color-azul);
    margin-bottom: 1rem;
}

.info-card h4 {
    color: var(--color-azul-oscuro);
    margin-bottom: 0.5rem;
}

.info-card.highlight {
    background: linear-gradient(135deg, var(--color-amarillo), var(--color-rojo));
    color: var(--color-blanco);
}

.info-card.highlight i {
    color: var(--color-blanco);
}

.contact-info {
    background: var(--color-azul-oscuro);
    color: var(--color-blanco);
    padding: 1.5rem;
    border-radius: 10px;
}

.contact-info h4 {
    margin-bottom: 1rem;
}

.contact-info p {
    margin-bottom: 0.5rem;
}

/* Footer */
.footer {
    background: var(--color-azul-oscuro);
    color: var(--color-blanco);
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1rem;
    color: var(--color-amarillo);
}

.footer-section p {
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

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

.social-links a {
    width: 40px;
    height: 40px;
    background: var(--color-azul);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blanco);
    transition: background 0.3s;
}

.social-links a:hover {
    background: var(--color-amarillo);
    color: var(--color-azul-oscuro);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }

    .navbar {
        padding: 0.8rem 0;
    }

    .navbar .container {
        justify-content: space-between;
        padding: 0 1rem;
    }

    .hamburger {
        display: flex;
        position: relative;
        z-index: 1002;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 400px;
        height: 100vh;
        background: linear-gradient(180deg, #0c1e47 0%, #1e3a8a 50%, #2563eb 100%);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 80px 0 30px;
        gap: 0;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
        transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        overflow-y: auto;
        border-left: 2px solid rgba(255, 215, 0, 0.3);
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu::before {
        content: '';
        position: fixed;
        top: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);
        z-index: -1;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }

    .nav-menu.active::before {
        opacity: 1;
        pointer-events: all;
    }

    .nav-menu > li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        animation: slideInRight 0.5s ease forwards;
        opacity: 0;
    }

    .nav-menu.active > li {
        animation: slideInRight 0.4s ease forwards;
    }

    .nav-menu > li:nth-child(1) { animation-delay: 0.1s; }
    .nav-menu > li:nth-child(2) { animation-delay: 0.15s; }
    .nav-menu > li:nth-child(3) { animation-delay: 0.2s; }
    .nav-menu > li:nth-child(4) { animation-delay: 0.25s; }
    .nav-menu > li:nth-child(5) { animation-delay: 0.3s; }
    .nav-menu > li:nth-child(6) { animation-delay: 0.35s; }

    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .nav-menu a {
        padding: 1rem 1.5rem;
        display: block;
        font-size: 1.1rem;
        border-left: 3px solid transparent;
        transition: all 0.3s ease;
    }

    .nav-menu > li > a:hover {
        background: rgba(255, 255, 255, 0.1);
        border-left-color: #FFD700;
        padding-left: 2rem;
    }

    .has-submenu > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .has-submenu > a i.fa-chevron-down {
        transition: transform 0.3s ease;
        font-size: 0.9rem;
    }

    .has-submenu.active > a i.fa-chevron-down {
        transform: rotate(180deg);
    }

    .submenu {
        position: static;
        display: none;
        background: rgba(0, 0, 0, 0.3);
        box-shadow: none;
        padding: 0;
        border-radius: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.3s ease;
    }

    .has-submenu.active .submenu {
        display: block;
        max-height: 500px;
        padding: 0.5rem 0;
    }

    .submenu li {
        border-bottom: none;
    }

    .submenu a {
        padding: 0.8rem 1.5rem 0.8rem 3rem;
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.9);
        border-left: 3px solid transparent;
    }

    .submenu a:hover {
        background: rgba(255, 215, 0, 0.15);
        border-left-color: #FFD700;
        color: #FFD700;
    }

    .btn-inscripcion {
        margin: 1rem 1.5rem;
        text-align: center;
        padding: 1rem 2rem;
        border-radius: 30px;
        font-size: 1.1rem;
        box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4);
        animation: pulseButton 2s ease-in-out infinite;
    }

    @keyframes pulseButton {
        0%, 100% {
            box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4);
        }
        50% {
            box-shadow: 0 6px 25px rgba(220, 20, 60, 0.7);
        }
    }

    .sponsor-menu-item {
        background: rgba(230, 57, 70, 0.1);
        border-left: 3px solid #e63946 !important;
    }

    .sponsor-menu-item .sponsor-link {
        padding: 1rem 1.5rem;
    }

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

    .hero {
        height: auto;
        min-height: 100vh;
        padding: 64px 0 32px;
    }

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

    .hero-subtitle {
        font-size: 1.3rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-buttons .btn {
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .inscripcion-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .info-sidebar {
        order: -1;
    }

    .form-section {
        padding: 1.5rem;
    }

    .form-section h3 {
        font-size: 1.3rem;
    }

    .form-group label {
        font-size: 0.95rem;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
    }

    .btn-primary {
        width: 100%;
        padding: 1rem;
        font-size: 1.1rem;
    }

    .services-grid,
    .expositores-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.powered-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* Fondo negro semitransparente + Blur */
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Borde sutil para definir límites */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 8px 16px;
    /* Padding un poco más compacto */
    border-radius: 50px;
    /* Redondeo completo */

    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    text-decoration: none;
    /* Quitar subrayado si es <a> */

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.5px;

    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.powered-text {
    opacity: 0.6;
    text-transform: uppercase;
    /* Hace el texto más profesional */
    font-size: 0.65rem;
}

.powered-logos {
    display: flex;
    align-items: center;
    gap: 12px;
}

.powered-logos img {
    height: 20px;
    /* Un poco más discretos */
    width: auto;
    object-fit: contain;
    transition: transform 0.3s;
}

img.logo-dev {
    /* Ajusta este valor hasta que quede del tamaño deseado.
       Prueba con 45px, 50px, o 60px */
    height: 120px;
    /* Opcional: Si al crecer se pega mucho a la línea, dale un margen extra */

}

.divider {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.2);
}

/* Efectos Hover */
.powered-float:hover {
    transform: translateY(-5px);
    background: rgba(10, 10, 10, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.powered-float:hover .powered-logos img {
    transform: scale(1.1);
    /* Zoom sutil a los logos */
}

/* Sticky CTA for Mobile */
.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--color-rojo);
    color: white;
    text-align: center;
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    display: none;
    /* Hidden by default (desktop) */
    transform: translateY(100%);
    animation: slideUp 0.5s forwards 1s;
}

@media (max-width: 768px) {
    .sticky-cta {
        display: block;
    }

    /* Adjust footer to not be covered by sticky bar */
    .footer {
        padding-bottom: 80px;
    }
}

@keyframes slideUp {
    to {
        transform: translateY(0);
    }
}

/* Pulse Animation for Hero Button */
@keyframes pulse-btn {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 20, 60, 0.7);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(220, 20, 60, 0);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 20, 60, 0);
        transform: scale(1);
    }
}

.hero-buttons .btn-primary {
    animation: pulse-btn 2s infinite;
}

/* =========================================
   Event Flyer & Split Hero Styles
   ========================================= */

.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 2rem 20px;
}

.hero-content-text {
    flex: 1;
    text-align: left;
    max-width: 600px;
}

/* Override existing hero centered text for desktop */
.hero-content-text h1,
.hero-content-text .hero-subtitle,
.hero-content-text .hero-description {
    text-align: left;
}

.hero-content-text .hero-buttons {
    justify-content: flex-start;
}

.hero-content-image {
    flex: 1;
    display: flex;
    justify-content: center;
    perspective: 1500px;
    /* Enable 3D space */
}

.flyer-card {
    position: relative;
    width: 100%;
    max-width: 550px;
    transform-style: preserve-3d;
    transition: transform 0.4s ease-out;
    animation: floatFlyer 6s ease-in-out infinite;
}

.flyer-card:hover {
    transform: rotateY(-5deg) rotateX(5deg) scale(1.02);
}

.hero-flyer {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    /* Warning border equivalent */
    border: 4px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

.flyer-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(94, 144, 227, 0.6) 0%, rgba(222, 76, 103, 0) 70%);
    filter: blur(60px);
    z-index: -1;
    opacity: 0.8;
}

@keyframes floatFlyer {

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

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

/* Responsive Adjusments for Split Hero */
@media (max-width: 992px) {
    .hero-container {
        flex-direction: column-reverse;
        /* Flyer on top or bottom? Let's put text on top for mobile importance, or flyer? User wants 'bonito', usually image first on mobile is engaging if not too huge. Let's stick to standard column-reverse (Text bottom, Image Top)? No, usually Image Top is Column normal. But Hero usually has H1 first. */
        /* Let's do Text First, then Image below on mobile */
        flex-direction: column;
        gap: 2rem;
        text-align: center;
        /* Space for navbar */
    }

    .hero-content-text {
        text-align: center;
        max-width: 100%;
        margin-top: 20px;
    }

    .hero-content-text h1,
    .hero-content-text .hero-subtitle,
    .hero-content-text .hero-description {
        text-align: center;
    }

    .hero-content-text .hero-buttons {
        justify-content: center;
    }

    .flyer-card {
        max-width: 90%;
        margin: 0 auto;
    }
    
}
/* ============================================
   MEJORAS HERO SECTION
   ============================================ */

.event-badge {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.hero-event-card {
    animation: floatCard 3s ease-in-out infinite;
    transition: all 0.3s ease;
}

.hero-event-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

@keyframes floatCard {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.hero h1 {
    animation: fadeInScale 1s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Mejoras responsive para hero */
@media (max-width: 992px) {
    .hero h1 {
        font-size: 2.5rem !important;
    }
    
    .hero h1 span {
        font-size: 2.8rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.4rem !important;
    }
    
    .hero-event-card {
        padding: 1.5rem !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem !important;
    }
    
    .hero h1 span {
        font-size: 2.3rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.2rem !important;
    }
    
    .event-badge {
        font-size: 0.8rem !important;
        padding: 0.4rem 1rem !important;
    }
    
    .hero-event-card > div {
        flex-direction: column;
        text-align: center !important;
    }
    
    .hero-event-card > div > div:first-child {
        margin-bottom: 0.5rem;
    }
}

/* ============================================
   EFECTOS ACU�TICOS Y TEM�TICA DE AGUA
   ============================================ */

/* Burbujas animadas en el fondo */
.bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.bubble {
    position: absolute;
    bottom: -100px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    opacity: 0.6;
    animation: rise 15s infinite ease-in;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3),
                inset 0 0 10px rgba(255, 255, 255, 0.2);
}

.bubble:nth-child(1) {
    width: 40px;
    height: 40px;
    left: 10%;
    animation-duration: 12s;
    animation-delay: 0s;
}

.bubble:nth-child(2) {
    width: 60px;
    height: 60px;
    left: 20%;
    animation-duration: 14s;
    animation-delay: 2s;
}

.bubble:nth-child(3) {
    width: 30px;
    height: 30px;
    left: 35%;
    animation-duration: 10s;
    animation-delay: 4s;
}

.bubble:nth-child(4) {
    width: 50px;
    height: 50px;
    left: 50%;
    animation-duration: 16s;
    animation-delay: 1s;
}

.bubble:nth-child(5) {
    width: 45px;
    height: 45px;
    left: 65%;
    animation-duration: 13s;
    animation-delay: 3s;
}

.bubble:nth-child(6) {
    width: 35px;
    height: 35px;
    left: 80%;
    animation-duration: 11s;
    animation-delay: 5s;
}

.bubble:nth-child(7) {
    width: 55px;
    height: 55px;
    left: 90%;
    animation-duration: 15s;
    animation-delay: 2s;
}

.bubble:nth-child(8) {
    width: 25px;
    height: 25px;
    left: 15%;
    animation-duration: 9s;
    animation-delay: 6s;
}

@keyframes rise {
    0% {
        bottom: -100px;
        transform: translateX(0);
    }
    50% {
        transform: translateX(100px);
    }
    100% {
        bottom: 110vh;
        transform: translateX(-200px);
    }
}

/* Efecto de ondas en el hero */
.water-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath fill='rgba(255,255,255,0.1)' d='M0,50 Q300,0 600,50 T1200,50 L1200,100 L0,100 Z'%3E%3Canimate attributeName='d' dur='5s' repeatCount='indefinite' values='M0,50 Q300,0 600,50 T1200,50 L1200,100 L0,100 Z; M0,50 Q300,100 600,50 T1200,50 L1200,100 L0,100 Z; M0,50 Q300,0 600,50 T1200,50 L1200,100 L0,100 Z'/%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
    pointer-events: none;
    z-index: 1;
}

.water-wave.wave-2 {
    bottom: -20px;
    opacity: 0.5;
    animation: wave-move 7s linear infinite;
}

@keyframes wave-move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 1200px 0;
    }
}

/* Gotas de agua peque�as */
.water-drops {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.drop {
    position: absolute;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3));
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    opacity: 0;
    animation: dropFall 8s infinite;
}

.drop:nth-child(1) {
    width: 8px;
    height: 8px;
    left: 15%;
    animation-delay: 0s;
}

.drop:nth-child(2) {
    width: 10px;
    height: 10px;
    left: 30%;
    animation-delay: 2s;
}

.drop:nth-child(3) {
    width: 6px;
    height: 6px;
    left: 45%;
    animation-delay: 4s;
}

.drop:nth-child(4) {
    width: 12px;
    height: 12px;
    left: 60%;
    animation-delay: 1s;
}

.drop:nth-child(5) {
    width: 9px;
    height: 9px;
    left: 75%;
    animation-delay: 3s;
}

.drop:nth-child(6) {
    width: 7px;
    height: 7px;
    left: 85%;
    animation-delay: 5s;
}

@keyframes dropFall {
    0% {
        top: -10%;
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        top: 110%;
        opacity: 0;
    }
}

/* Mejora del gradiente del hero para parecer más acuático */
.hero {
    background: linear-gradient(135deg, 
        #5e90e3 0%,    /* Azul principal */
        #7ba8e8 25%,   /* Azul claro */
        #de4c67 50%,   /* Rosado acento */
        #e87791 75%,   /* Rosado claro */
        #9dc0ed 100%   /* Azul muy claro */
    );
    position: relative;
    overflow: hidden;
}

/* Overlay con efecto de agua */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(94, 144, 227, 0.2) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Iconos de agua flotantes */
.water-icon {
    position: absolute;
    font-size: 3rem;
    opacity: 0.1;
    color: white;
    animation: floatWater 6s ease-in-out infinite;
    pointer-events: none;
}

.water-icon:nth-child(1) {
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.water-icon:nth-child(2) {
    top: 30%;
    right: 10%;
    animation-delay: 2s;
}

.water-icon:nth-child(3) {
    bottom: 20%;
    left: 15%;
    animation-delay: 4s;
}

@keyframes floatWater {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

/* Efecto de reflejo en las tarjetas */
.hero-event-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent
    );
    transform: skewX(-20deg);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 150%;
    }
}

/* Ajustes responsivos para efectos acu�ticos */
@media (max-width: 768px) {
    .bubble {
        width: 25px !important;
        height: 25px !important;
    }
    
    .water-icon {
        font-size: 2rem;
    }
    
    .water-wave {
        height: 60px;
    }
}

/* ============================================
   MEJORAS DE COLOR ACU�TICO EN TODO EL SITIO
   ============================================ */

/* Secciones con fondo más acuático */
.servicios, .expositores, .faq {
    background: linear-gradient(180deg, 
        #e8f1fb 0%,      /* Azul muy claro */
        #f5e8ed 50%,     /* Rosado muy claro */
        #dde8f7 100%     /* Azul claro brillante */
    );
}

/* Tarjetas con efecto de agua */
.service-card, .expositor-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(232, 241, 251, 0.95) 100%
    );
    border: 2px solid rgba(94, 144, 227, 0.2);
    box-shadow: 0 5px 20px rgba(94, 144, 227, 0.15);
    transition: all 0.3s ease;
}

.service-card:hover, .expositor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(94, 144, 227, 0.3);
    border-color: rgba(222, 76, 103, 0.5);
}

/* Iconos con efecto de brillo acuático */
.service-card i, .stats-item i {
    color: #5e90e3;
    text-shadow: 0 0 10px rgba(94, 144, 227, 0.3);
}

/* Botones con tema acuático */
.btn-primary {
    background: linear-gradient(135deg, #5e90e3 0%, #de4c67 100%);
    box-shadow: 0 5px 15px rgba(94, 144, 227, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #7ba8e8 0%, #e87791 100%);
    box-shadow: 0 8px 25px rgba(222, 76, 103, 0.4);
    transform: translateY(-2px);
}

/* Líneas decorativas con efecto de agua */
.section-title::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #5e90e3 50%, 
        transparent 100%
    );
}

/* Footer con gradiente acuático */
.footer {
    background: linear-gradient(180deg, 
        #4a7bc7 0%,      /* Azul oscuro */
        #5e90e3 50%,     /* Azul principal */
        #7ba8e8 100%     /* Azul brillante */
    );
}

/* Efectos de onda al hacer scroll */
@keyframes rippleEffect {
    0% {
        box-shadow: 0 0 0 0 rgba(94, 144, 227, 0.4);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(94, 144, 227, 0);
    }
}

.scroll-indicator {
    animation: rippleEffect 2s infinite;
}

/* Iconos de redes sociales con tema agua */
.social-links a {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(94, 144, 227, 0.2) 100%
    );
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.social-links a:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #de4c67;
    box-shadow: 0 0 20px rgba(222, 76, 103, 0.5);
}

/* Efecto de reflejo en imágenes */
.hero-flyer, .expositor-card img {
    box-shadow: 0 10px 30px rgba(94, 144, 227, 0.3);
}

/* Estadísticas con tema acuático */
.stats-item {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(232, 241, 251, 0.9) 100%
    );
    border: 2px solid rgba(94, 144, 227, 0.3);
}

/* Animaci�n de onda para elementos interactivos */
@keyframes waveMotion {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

.ripple-button {
    position: relative;
    overflow: hidden;
}

.ripple-button::before {
    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, height 0.6s;
}

.ripple-button:hover::before {
    width: 300px;
    height: 300px;
}

/* ============================================
   ESTILOS PARA FOTO DE PERFIL EN MODALES
   ============================================ */

/* Header del modal con foto de perfil */
.modal-header-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #5e90e3 0%, #de4c67 100%);
    border-radius: 15px 15px 0 0;
    margin: -2rem -2rem 1.5rem -2rem;
    position: relative;
    overflow: hidden;
}

.modal-header-profile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.modal-profile-img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid white;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 
                0 0 0 2px rgba(94, 144, 227, 0.5);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    animation: profilePulse 3s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.modal-profile-img:hover {
    transform: scale(1.05);
}

@keyframes profilePulse {
    0%, 100% {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 
                    0 0 0 2px rgba(94, 144, 227, 0.5),
                    0 0 20px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 
                    0 0 0 2px rgba(222, 76, 103, 0.7),
                    0 0 30px rgba(255, 255, 255, 0.5);
    }
}

.modal-header-profile h2 {
    margin: 1rem 0 0.3rem 0;
    color: white;
    font-size: 1.8rem;
    font-weight: 800;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 1;
    letter-spacing: 0.5px;
}

.modal-header-profile div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

/* Ajustes responsive para el header del modal */
@media (max-width: 768px) {
    .modal-header-profile {
        padding: 1.5rem;
        margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    }
    
    .modal-profile-img {
        width: 140px;
        height: 140px;
    }
    
    .modal-header-profile h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .modal-header-profile {
        padding: 1rem;
        margin: -1rem -1rem 1rem -1rem;
    }
    
    .modal-profile-img {
        width: 120px;
        height: 120px;
    }
    
    .modal-header-profile h2 {
        font-size: 1.5rem;
    }
}

/* Destacar información clave del expositor */
.modal-body-scroll strong {
    color: #5e90e3;
    font-weight: 700;
    font-size: 1.02em;
}

.modal-body-scroll p:first-child {
    font-size: 1.08em;
    line-height: 1.6;
    color: #333;
    background: linear-gradient(135deg, rgba(94, 144, 227, 0.08) 0%, rgba(222, 76, 103, 0.08) 100%);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #5e90e3;
    margin-bottom: 1rem;
    font-weight: 500;
}

.modal-body-scroll ul {
    background: rgba(94, 144, 227, 0.05);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin: 0.8rem 0;
}

.modal-body-scroll ul li {
    margin: 0.5rem 0;
    line-height: 1.5;
    font-size: 0.98em;
}

.modal-body-scroll ul li::marker {
    color: #de4c67;
    font-size: 1.1em;
}

.modal-body-scroll hr {
    border: none;
    border-top: 2px solid rgba(94, 144, 227, 0.2);
    margin: 1rem 0;
}

.modal-body-scroll p {
    margin-bottom: 0.8rem;
    line-height: 1.55;
    font-size: 0.98em;
}

/* ============================================
   MEN�S Y SUBMEN�S
   ============================================ */

/* Estilos para items con submen� */
.has-submenu {
    position: relative;
}

.has-submenu > a {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.has-submenu > a i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.has-submenu:hover > a i {
    transform: rotate(180deg);
}

/* Estilos del submen� */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(135deg, rgba(94, 144, 227, 0.98) 0%, rgba(74, 116, 186, 0.98) 100%);
    min-width: 220px;
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.has-submenu:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu li {
    margin: 0;
    padding: 0;
}

.submenu li a {
    display: block;
    padding: 0.8rem 1.5rem;
    color: white !important;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    border-left: 3px solid transparent;
}

.submenu li a:hover {
    background: rgba(255, 255, 255, 0.15);
    border-left-color: #FFD700;
    padding-left: 2rem;
}

/* Responsive - Men� m�vil */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: linear-gradient(180deg, rgba(94, 144, 227, 0.98) 0%, rgba(74, 116, 186, 0.98) 100%);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.3);
        padding: 1rem 0;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-menu li {
        margin: 0;
        width: 100%;
    }

    /* Submen�s en m�vil */
    .has-submenu {
        position: relative;
    }

    .has-submenu > a i {
        margin-left: auto;
    }

    .submenu {
        position: static;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transform: none;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 0;
        transition: all 0.3s ease;
    }

    .has-submenu.active .submenu {
        opacity: 1;
        visibility: visible;
        max-height: 500px;
        padding: 0.5rem 0;
    }

    .has-submenu.active > a i {
        transform: rotate(180deg);
    }

    .submenu li a {
        padding: 0.7rem 2rem;
        font-size: 0.9rem;
    }

    .submenu li a:hover {
        padding-left: 2.5rem;
    }
}

/* ============================================
   EFECTO DE AGUA EN SECCI�N INICIAL
   ============================================ */

/* Ondas de agua expansivas */
.water-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.water-ripple {
    position: absolute;
    border: 3px solid rgba(94, 144, 227, 0.4);
    border-radius: 50%;
    animation: rippleExpand 6s ease-out infinite;
}

.water-ripple.ripple-1 {
    width: 300px;
    height: 300px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.water-ripple.ripple-2 {
    width: 400px;
    height: 400px;
    top: 50%;
    right: 15%;
    animation-delay: 2s;
    border-color: rgba(222, 76, 103, 0.3);
}

.water-ripple.ripple-3 {
    width: 350px;
    height: 350px;
    bottom: 10%;
    left: 50%;
    animation-delay: 4s;
    border-color: rgba(94, 144, 227, 0.35);
}

@keyframes rippleExpand {
    0% {
        transform: scale(0) translate(-50%, -50%);
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: scale(2) translate(-50%, -50%);
        opacity: 0;
    }
}

/* Part�culas de agua flotantes */
.water-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(94, 144, 227, 0.4) 50%, transparent 70%);
    border-radius: 50%;
    filter: blur(2px);
    animation: floatParticle 8s ease-in-out infinite;
}

.particle-1 {
    width: 8px;
    height: 8px;
    top: 10%;
    left: 20%;
    animation-delay: 0s;
}

.particle-2 {
    width: 12px;
    height: 12px;
    top: 25%;
    left: 40%;
    animation-delay: 1s;
}

.particle-3 {
    width: 10px;
    height: 10px;
    top: 40%;
    left: 60%;
    animation-delay: 2s;
}

.particle-4 {
    width: 15px;
    height: 15px;
    top: 55%;
    left: 80%;
    animation-delay: 3s;
}

.particle-5 {
    width: 9px;
    height: 9px;
    top: 70%;
    left: 15%;
    animation-delay: 1.5s;
}

.particle-6 {
    width: 11px;
    height: 11px;
    top: 85%;
    left: 35%;
    animation-delay: 2.5s;
}

.particle-7 {
    width: 13px;
    height: 13px;
    top: 15%;
    right: 10%;
    animation-delay: 0.5s;
}

.particle-8 {
    width: 8px;
    height: 8px;
    top: 30%;
    right: 25%;
    animation-delay: 1.8s;
}

.particle-9 {
    width: 14px;
    height: 14px;
    top: 60%;
    right: 5%;
    animation-delay: 3.2s;
}

.particle-10 {
    width: 10px;
    height: 10px;
    top: 80%;
    right: 40%;
    animation-delay: 2.8s;
}

@keyframes floatParticle {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    50% {
        transform: translate(30px, -80px) scale(1.2);
        opacity: 0.8;
    }
    90% {
        opacity: 0.4;
    }
    100% {
        transform: translate(60px, -160px) scale(0.8);
        opacity: 0;
    }
}

/* Efecto de luz submarina */
.underwater-light {
    position: absolute;
    top: -50%;
    left: 50%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, 
        rgba(94, 144, 227, 0.3) 0%, 
        rgba(94, 144, 227, 0.15) 30%,
        transparent 70%
    );
    transform: translateX(-50%);
    animation: underwaterGlow 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
    filter: blur(60px);
}

@keyframes underwaterGlow {
    0%, 100% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translateX(-50%) translateY(30px) scale(1.1);
        opacity: 0.7;
    }
}

/* Responsive - Efectos de agua */
@media (max-width: 768px) {
    .water-ripple {
        border-width: 2px;
    }
    
    .water-ripple.ripple-1,
    .water-ripple.ripple-2,
    .water-ripple.ripple-3 {
        width: 200px;
        height: 200px;
    }
    
    .particle {
        width: 6px !important;
        height: 6px !important;
    }
    
    .underwater-light {
        width: 400px;
        height: 400px;
    }
}

/* ============================================
   ESTILOS PARA REDES SOCIALES EN FORMULARIO
   ============================================ */

.section-description {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.social-input label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.social-input label i {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.social-input label i.fa-facebook {
    color: #1877f2;
}

.social-input label i.fa-instagram {
    color: #e4405f;
}

.social-input label i.fa-tiktok {
    color: #000000;
}

.social-input label i.fa-linkedin {
    color: #0a66c2;
}

.social-input label i.fa-twitter {
    color: #1da1f2;
}

.social-input label i.fa-youtube {
    color: #ff0000;
}

.social-input label i.fa-threads {
    color: #000000;
}

.social-input input {
    padding-left: 1rem;
}

.social-input input:focus {
    border-color: #5e90e3;
    box-shadow: 0 0 0 3px rgba(94, 144, 227, 0.1);
}

.form-help {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #666;
}

.form-help i {
    margin-right: 0.3rem;
}

/* Responsive para redes sociales */
@media (max-width: 768px) {
    .social-input {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .social-input label {
        font-size: 0.95rem;
    }
}

/* ============================================
   AUTOCOMPLETADO DE INSTITUCIONES
   ============================================ */

.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #5e90e3;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: -1px;
}

.autocomplete-item {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.autocomplete-active {
    background: linear-gradient(135deg, rgba(94, 144, 227, 0.1) 0%, rgba(222, 76, 103, 0.1) 100%);
}

.institution-name {
    font-weight: 600;
    color: #333;
    flex: 1;
    margin-right: 10px;
}

.institution-location {
    color: #666;
    font-size: 0.9rem;
    font-style: italic;
    margin-left: 8px;
}

.institution-count {
    background: linear-gradient(135deg, #5e90e3 0%, #de4c67 100%);
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Animaci�n de entrada para sugerencias */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.autocomplete-suggestions[style*='display: block'] {
    animation: slideDown 0.2s ease-out;
}

/* Scrollbar personalizado para sugerencias */
.autocomplete-suggestions::-webkit-scrollbar {
    width: 8px;
}

.autocomplete-suggestions::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0 0 6px 0;
}

.autocomplete-suggestions::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #5e90e3 0%, #de4c67 100%);
    border-radius: 4px;
}

.autocomplete-suggestions::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #4a7bc8 0%, #c8374e 100%);
}

/* Mensaje cuando no hay resultados */
.autocomplete-no-results {
    padding: 15px;
    text-align: center;
    color: #999;
    font-style: italic;
}

/* Indicador de carga */
.autocomplete-loading {
    padding: 15px;
    text-align: center;
    color: #5e90e3;
}

.autocomplete-loading::after {
    content: '...';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Responsive */
@media (max-width: 768px) {
    .autocomplete-suggestions {
        max-height: 200px;
        font-size: 0.95rem;
    }
    
    .autocomplete-item {
        padding: 10px 12px;
    }
    
    .institution-name {
        font-size: 0.95rem;
    }
    
    .institution-location {
        font-size: 0.85rem;
    }
    
    .institution-count {
        font-size: 0.7rem;
        padding: 2px 8px;
    }
}

/* ============================================
   MEJORAS RESPONSIVE PARA MÓVILES
   ============================================ */

/* Optimización de efectos de agua para móviles */
@media (max-width: 768px) {
    /* Reducir efectos de agua para mejor rendimiento */
    .water-ripple {
        display: none !important;
    }

    .water-particles {
        opacity: 0.3 !important;
    }

    .underwater-light {
        opacity: 0.2 !important;
    }

    /* Botón flotante más pequeño */
    .powered-float {
        bottom: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 0.75rem;
        gap: 8px;
    }

    .powered-logos img {
        height: 30px;
    }

    .powered-text {
        font-size: 0.7rem;
    }

    /* Mejorar espaciado del formulario */
    .form-section {
        padding: 1.5rem 1rem;
    }

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

    /* Inputs más grandes para mejor usabilidad en móvil */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px !important;
        padding: 0.9rem;
        min-height: 48px;
    }

    /* Botones más grandes */
    .btn {
        min-height: 48px;
        padding: 0.9rem 1.5rem;
        font-size: 1rem;
    }

    /* Tarjetas con mejor espaciado */
    .service-card,
    .expositor-card {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .service-card i,
    .expositor-card i {
        font-size: 2.5rem;
    }

    /* Títulos de sección optimizados */
    .section-title {
        font-size: 2rem;
        padding: 0 1rem;
    }

    .section-subtitle {
        font-size: 1rem;
        padding: 0 1rem;
    }

    /* Hero optimizado */
    .hero-content {
        padding: 0 15px;
    }

    .hero-event-card {
        padding: 1.5rem !important;
        margin: 0 15px;
    }

    /* FAQ más legible */
    .faq-question {
        padding: 1.2rem;
        font-size: 1rem;
    }

    .faq-answer {
        padding: 1.2rem;
        font-size: 0.95rem;
    }

    /* Modal optimizado */
    .modal-content {
        width: 95%;
        padding: 1.5rem;
        max-height: 90vh;
    }

    .close-modal {
        font-size: 1.8rem;
        top: 0.5rem;
        right: 1rem;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0,0,0,0.1);
        border-radius: 50%;
    }

    /* Footer optimizado */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .footer-section {
        padding: 1rem 0;
    }

    /* Navegación sticky */
    .navbar {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
    }

    /* Ajustar padding del body para navbar fija */
    body {
        padding-top: 70px;
    }

    /* Carrusel de expositores responsive */
    .carousel-item {
        min-width: 100%;
    }

    .carousel-button {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    /* Info cards en sidebar del formulario */
    .info-card {
        padding: 1.2rem;
        margin-bottom: 1rem;
    }

    .info-card i {
        font-size: 2rem;
        margin-bottom: 0.8rem;
    }
}

/* Responsive para pantallas muy pequeñas */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    .container {
        padding: 0 10px;
    }

    /* Hero extra pequeño */
    .hero h1 {
        font-size: 1.5rem !important;
        line-height: 1.2;
    }

    .hero h1 span {
        font-size: 1.8rem !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    .hero-description {
        font-size: 0.9rem;
    }

    /* Botones más compactos */
    .btn {
        padding: 0.8rem 1.2rem;
        font-size: 0.95rem;
    }

    /* Títulos más pequeños */
    .section-title {
        font-size: 1.6rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
    }

    /* Powered by aún más pequeño */
    .powered-float {
        bottom: 8px;
        right: 8px;
        padding: 5px 10px;
        font-size: 0.65rem;
        gap: 6px;
    }

    .powered-logos img {
        height: 22px;
    }

    .powered-text {
        font-size: 0.6rem;
    }

    /* Formulario ultra compacto */
    .inscripcion-header h1 {
        font-size: 1.6rem;
    }

    .inscripcion-header p {
        font-size: 0.9rem;
    }

    .form-section {
        padding: 1rem 0.8rem;
    }

    .form-section h3 {
        font-size: 1.2rem;
    }

    /* Tarjetas más compactas */
    .service-card,
    .expositor-card {
        padding: 1.2rem;
    }

    .service-card h3,
    .expositor-card h3 {
        font-size: 1.3rem;
    }

    /* Modal compacto */
    .modal-content {
        padding: 1rem;
    }

    .modal-header-profile {
        padding: 1rem;
        margin: -1rem -1rem 1rem -1rem;
    }

    .modal-profile-img {
        width: 100px;
        height: 100px;
    }

    .modal-header-profile h2 {
        font-size: 1.4rem;
    }

    /* FAQ compacto */
    .faq-question {
        padding: 1rem;
        font-size: 0.95rem;
    }

    .faq-answer {
        padding: 1rem;
        font-size: 0.9rem;
    }

    /* Footer compacto */
    .footer {
        padding: 2rem 0 1rem;
    }

    .footer-section h3,
    .footer-section h4 {
        font-size: 1rem;
    }

    .footer-section p {
        font-size: 0.85rem;
    }

    .social-links a {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }

    /* Ajustar tamaño de burbujas */
    .bubble {
        width: 15px !important;
        height: 15px !important;
    }

    /* Ocultar elementos decorativos pesados */
    .water-wave,
    .hero::before {
        display: none;
    }
}

/* Optimización de touch targets */
@media (hover: none) and (pointer: coarse) {
    /* Asegurar que todos los elementos interactivos sean al menos 44x44px */
    button,
    a,
    input[type="submit"],
    input[type="button"],
    .btn,
    .hamburger,
    .close-modal,
    .faq-question,
    .carousel-button {
        min-width: 44px;
        min-height: 44px;
    }

    /* Remover efectos hover en dispositivos táctiles */
    .service-card:hover,
    .expositor-card:hover,
    .btn:hover {
        transform: none;
    }

    /* Estados activos más visibles */
    .service-card:active,
    .expositor-card:active,
    .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* Landscape mode en móviles */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
        padding: 60px 0 20px;
    }

    .hero h1 {
        font-size: 1.8rem !important;
    }

    .hero-event-card {
        padding: 1rem !important;
    }

    .navbar {
        padding: 0.5rem 0;
    }

    .nav-menu {
        max-height: calc(100vh - 60px);
    }
}

/* Mejoras de accesibilidad */
@media (prefers-reduced-motion: reduce) {
    /*
      Nota: algunos equipos/VMs activan "reducir movimiento" por defecto.
      No apagamos TODAS las animaciones globalmente porque eso detiene
      el carrusel de logos (y otras animaciones clave del sitio).
    */

    html:focus-within {
        scroll-behavior: auto;
    }

    /* Detener animaciones decorativas continuas */
    .bubble,
    .water-ripple,
    .water-particles,
    .underwater-light {
        animation: none !important;
    }

    /* Mantener el carrusel, pero más lento para reducir la sensación de movimiento */
    .slide-track {
        animation-duration: 60s !important;
    }
}

/* Alto contraste para mejor legibilidad */
@media (prefers-contrast: high) {
    .btn {
        border: 2px solid currentColor;
    }

    .service-card,
    .expositor-card {
        border: 2px solid #333;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        border: 2px solid #333;
    }
}

/* ============================================
   RESPONSIVE ESPECÍFICO POR SECCIÓN
   Optimizado para móviles (imaginando vista en teléfono)
   ============================================ */

/* SECCIÓN: NAVBAR - En móvil debe ser compacto y accesible */
@media (max-width: 768px) {
    .navbar {
        padding: 0.6rem 0;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
    }

    .logo {
        font-size: 1.2rem;
    }

    .logo i {
        font-size: 1.5rem;
    }

    /* Asegurar que el menú hamburger sea visible y táctil */
    .hamburger {
        padding: 10px;
        margin-left: auto;
    }

    .hamburger span {
        width: 28px;
        height: 3px;
    }
}

/* SECCIÓN: HERO - Primera impresión en móvil */
@media (max-width: 768px) {
    .hero {
        min-height: auto;
        padding: 90px 15px 40px;
    }

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

    /* Tarjeta del evento más compacta */
    .hero-event-card {
        padding: 1.2rem !important;
        margin: 1rem 0;
        font-size: 0.9rem;
    }

    .event-badge {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.8rem !important;
        margin-bottom: 0.8rem;
    }

    /* Títulos del hero escalados */
    .hero h1 {
        font-size: 1.6rem !important;
        line-height: 1.3;
        margin-bottom: 0.8rem;
    }

    .hero h1 span {
        font-size: 2rem !important;
        display: block;
        margin-top: 0.3rem;
    }

    .hero-subtitle {
        font-size: 1.1rem !important;
        margin-bottom: 1rem;
    }

    .hero-description {
        font-size: 0.95rem !important;
        line-height: 1.5;
        margin-bottom: 1.5rem;
        padding: 0 10px;
    }

    /* Botones del hero apilados y táctiles */
    .hero-buttons {
        flex-direction: column;
        gap: 0.8rem;
        width: 100%;
        padding: 0 10px;
    }

    .hero-buttons .btn {
        width: 100%;
        min-height: 50px;
        font-size: 1rem;
        padding: 0.9rem 1.5rem;
    }

    /* Flyer/imagen del evento */
    .flyer-card {
        margin-top: 2rem;
        max-width: 100%;
    }

    .hero-flyer {
        width: 100%;
        height: auto;
        border-radius: 15px;
    }

    /* Indicador de scroll */
    .scroll-indicator {
        bottom: 15px;
        font-size: 1.2rem;
    }
}

/* SECCIÓN: CARRUSEL DE LOGOS (Aliados) */
@media (max-width: 768px) {
    .logo-carousel {
        padding: 2rem 0;
    }

    .logo-item {
        height: 60px;
        padding: 0 15px;
    }

    .logo-item img {
        max-height: 50px;
    }
}

/* SECCIÓN: HISTORIA */
@media (max-width: 768px) {
    .history-section {
        padding: 3rem 0;
    }

    .history-title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
        padding: 0 15px;
        line-height: 1.4;
    }

    .history-content {
        flex-direction: column;
        gap: 1.5rem;
        padding: 0 15px;
    }

    .history-image-container {
        width: 200px;
        margin: 0 auto;
    }

    .history-text-box {
        padding: 1.5rem;
        font-size: 0.95rem;
        border-radius: 15px;
    }

    .history-text-box p {
        margin-bottom: 0.8rem;
        text-align: left;
    }
}

/* SECCIÓN: TEMÁTICA GENERAL */
@media (max-width: 768px) {
    .thematic-section {
        padding: 3rem 0;
    }

    .thematic-header h2 {
        font-size: 1.6rem;
        padding: 0 15px;
        margin-bottom: 1rem;
    }

    .thematic-header p {
        font-size: 0.95rem;
        padding: 0 15px;
        margin-bottom: 2rem;
    }

    .flight-path-container {
        margin: 1rem 0;
    }

    .plane-icon-flying {
        font-size: 2rem;
    }

    /* Grid de temas en columna única */
    .thematic-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0 15px;
    }

    .topic-item {
        flex-direction: row;
        align-items: center;
        padding: 1rem;
        gap: 1rem;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 12px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    }

    .topic-number {
        font-size: 1.8rem;
        min-width: 50px;
        height: 50px;
        flex-shrink: 0;
    }

    .topic-content {
        flex: 1;
        text-align: left;
    }

    .topic-content p {
        font-size: 0.9rem;
        margin: 0;
    }

    .topic-visual {
        font-size: 1.8rem;
        flex-shrink: 0;
    }

    .thematic-footer {
        padding: 1.5rem 15px;
        font-size: 0.9rem;
        margin-top: 2rem;
    }
}

/* SECCIÓN: LULÚ CISNEROS */
@media (max-width: 768px) {
    .lulu-section {
        padding: 3rem 0;
    }

    .lulu-content {
        flex-direction: column;
        padding: 0 15px;
        gap: 2rem;
    }

    .lulu-title-desktop {
        display: none;
    }

    .lulu-title-mobile {
        display: block;
        text-align: center;
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }

    .lulu-image-wrapper {
        max-width: 250px;
        margin: 0 auto;
    }

    .lulu-card {
        padding: 1.5rem;
        font-size: 0.95rem;
        border-radius: 15px;
        text-align: left;
    }

    .lulu-card p {
        margin-bottom: 0.8rem;
    }

    .source-text {
        font-size: 0.85rem;
    }
}

/* SECCIÓN: PROPÓSITO Y OBJETIVOS */
@media (max-width: 768px) {
    .purpose-section {
        padding: 3rem 0;
    }

    .purpose-title {
        font-size: 1.8rem;
        padding: 0 15px;
        margin-bottom: 2rem;
    }

    .purpose-box {
        padding: 1.5rem;
        margin: 0 15px 1.5rem;
        border-radius: 15px;
    }

    .purpose-box h3 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    .purpose-box p,
    .purpose-box ul {
        font-size: 0.9rem;
    }

    .purpose-box ul li {
        margin-bottom: 0.6rem;
        padding-left: 0.5rem;
    }
}

/* SECCIÓN: REQUISITOS */
@media (max-width: 768px) {
    .requirements-section {
        padding: 3rem 0;
    }

    .requirements-title {
        font-size: 1.8rem;
        padding: 0 15px;
        margin-bottom: 2rem;
        line-height: 1.3;
    }

    .requirements-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 15px;
    }

    .requirement-card {
        padding: 1.2rem;
        font-size: 0.95rem;
        min-height: auto;
        border-radius: 12px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    }

    .requirements-extra {
        padding: 0 15px;
        margin-top: 2rem;
    }

    .info-card {
        padding: 1.5rem;
        font-size: 0.95rem;
        border-radius: 12px;
    }

    .requirements-cta {
        font-size: 1.5rem;
        padding: 0 15px;
        margin-top: 2rem;
        line-height: 1.3;
    }
}

/* SECCIÓN: CARRUSEL DE EXPOSITORES */
@media (max-width: 768px) {
    .expositores-carousel-section {
        padding: 3rem 0;
    }

    .section-title {
        font-size: 1.8rem;
        padding: 0 15px;
        margin-bottom: 2rem;
    }

    .carousel-wrapper {
        position: relative;
        padding: 0 15px;
    }

    /* Slide de expositor en móvil */
    .expositor-slide-content {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1rem;
    }

    .slide-left-col {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .expositor-name-large {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }

    .expositor-photo-frame {
        width: 180px;
        height: 180px;
        margin-bottom: 1rem;
    }

    .flag-badge {
        width: 35px;
        height: 35px;
        bottom: 5px;
        right: 5px;
    }

    .expositor-mini-role {
        font-size: 0.85rem;
        max-width: 100%;
    }

    .slide-right-col {
        width: 100%;
        gap: 1rem;
    }

    .info-card-bio,
    .info-card-credentials {
        padding: 1.2rem;
        font-size: 0.9rem;
        border-radius: 12px;
    }

    .bio-summary {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .read-more-btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
        min-height: 44px;
    }

    .check-icon {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    /* Botones del carrusel más grandes y táctiles */
    .carousel-btn {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }

    .prev-btn {
        left: 5px;
    }

    .next-btn {
        right: 5px;
    }

    /* Indicadores del carrusel */
    .carousel-indicators {
        margin-top: 1.5rem;
        gap: 8px;
    }

    .carousel-indicator {
        width: 10px;
        height: 10px;
    }
}

/* SECCIÓN: FAQ */
@media (max-width: 768px) {
    .faq {
        padding: 3rem 0;
    }

    .section-title {
        font-size: 1.8rem;
        padding: 0 15px;
    }

    .section-subtitle {
        font-size: 0.95rem;
        padding: 0 20px;
        margin-bottom: 2rem;
    }

    .faq-container {
        padding: 0 15px;
    }

    .faq-item {
        margin-bottom: 1rem;
        border-radius: 12px;
    }

    .faq-question {
        padding: 1.2rem;
        gap: 1rem;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .faq-question h3 {
        font-size: 1rem;
        line-height: 1.4;
        flex: 1;
        user-select: none;
    }

    .faq-question i {
        font-size: 1.2rem;
        flex-shrink: 0;
        transition: transform 0.4s ease;
    }

    .faq-answer {
        padding: 0 1.2rem;
        font-size: 0.95rem;
        line-height: 1.6;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    }

    .faq-item.active .faq-answer {
        padding: 1.2rem;
    }

    .faq-answer p {
        margin-bottom: 0.8rem;
    }

    .faq-answer strong {
        color: #5e90e3;
        font-size: 1em;
    }
}

/* SECCIÓN: CTA FINAL */
@media (max-width: 768px) {
    .cta {
        padding: 3rem 15px;
    }

    .cta h2 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
        line-height: 1.3;
    }

    .cta p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .btn-large {
        width: 100%;
        max-width: 100%;
        padding: 1rem 1.5rem;
        font-size: 1.1rem;
        min-height: 50px;
    }
}

/* SECCIÓN: FOOTER */
@media (max-width: 768px) {
    .footer {
        padding: 2.2rem 0 calc(1.5rem + 90px);
    }

    .footer-content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 1rem;
        text-align: center;
    }

    .footer-section {
        padding: 1.2rem 1rem;
        margin: 0 auto;
        width: 100%;
        max-width: 380px;
        flex: 1 1 240px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .footer-section h3 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    .footer-section h4 {
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
    }

    .footer-section p {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .footer-section i {
        margin-right: 0.5rem;
        width: 20px;
        text-align: center;
    }

    /* Redes sociales */
    .social-links {
        justify-content: center;
        gap: 1rem;
        margin-top: 1rem;
    }

    .social-links a {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }

    /* QR Code */
    #qr-code {
        width: 150px;
        height: 150px;
        display: block;
        margin: 0 auto;
        max-width: 100%;
    }

    .footer-bottom {
        padding: 1.5rem 15px 1rem;
        margin-top: 1rem;
    }

    .footer-bottom p {
        font-size: 0.85rem;
        line-height: 1.5;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 1.8rem 0 calc(1.2rem + 90px);
    }

    .footer-content {
        gap: 1rem;
    }

    .footer-section {
        padding: 1rem 0.9rem;
        border-radius: 14px;
        max-width: 520px;
        flex: 1 1 100%;
    }

    .footer-section h3 {
        font-size: 1.15rem;
    }

    .footer-section h4 {
        font-size: 1rem;
    }

    .footer-section p {
        font-size: 0.85rem;
    }

    #qr-code {
        width: 130px;
        height: 130px;
    }

    .footer-bottom p {
        font-size: 0.8rem;
    }
}

/* SECCIÓN: FORMULARIO DE INSCRIPCIÓN */
@media (max-width: 768px) {
    .inscripcion-section {
        padding: 90px 15px 3rem;
    }

    .inscripcion-header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .inscripcion-header h1 {
        font-size: 1.8rem;
        margin-bottom: 0.8rem;
    }

    .inscripcion-header p {
        font-size: 0.95rem;
        padding: 0 10px;
    }

    /* Contenido del formulario */
    .inscripcion-content {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    /* Sidebar de info primero en móvil */
    .info-sidebar {
        order: -1;
        width: 100%;
    }

    .info-card {
        padding: 1.2rem;
        margin-bottom: 1rem;
        border-radius: 12px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    }

    .info-card h4 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .info-card i {
        font-size: 2rem;
        margin-bottom: 0.8rem;
    }

    .info-card p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .contact-info {
        padding: 1.2rem;
        border-radius: 12px;
    }

    .contact-info h4 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .contact-info p {
        font-size: 0.9rem;
        margin-bottom: 0.6rem;
    }

    /* Formulario en sí */
    .form-container {
        width: 100%;
    }

    .inscripcion-form {
        background: white;
        border-radius: 15px;
        padding: 0;
    }

    .form-section {
        padding: 1.5rem 1rem;
        margin-bottom: 1rem;
        border-radius: 12px;
        background: #f8f9fa;
    }

    .form-section h3 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .form-section h3 i {
        font-size: 1.1rem;
        margin-right: 0.5rem;
    }

    /* Campos del formulario */
    .form-row {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .form-group {
        width: 100%;
        margin-bottom: 1.2rem;
    }

    .form-group label {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
        display: block;
        font-weight: 600;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 0.9rem;
        font-size: 16px !important;
        min-height: 48px;
        border: 2px solid #ddd;
        border-radius: 8px;
        transition: all 0.3s;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        border-color: #5e90e3;
        outline: none;
        box-shadow: 0 0 0 3px rgba(94, 144, 227, 0.1);
    }

    .form-group textarea {
        min-height: 120px;
        resize: vertical;
    }

    .form-help {
        font-size: 0.85rem;
        color: #666;
        margin-top: 0.5rem;
    }

    /* Redes sociales en el formulario */
    .social-input {
        width: 100%;
    }

    .social-input label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .social-input label i {
        font-size: 1.2rem;
        width: 24px;
    }

    /* Autocomplete */
    .autocomplete-suggestions {
        max-height: 250px;
        font-size: 0.9rem;
        border-radius: 8px;
    }

    .autocomplete-item {
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .institution-name {
        font-size: 0.95rem;
        margin-bottom: 0.3rem;
    }

    .institution-location {
        font-size: 0.85rem;
        margin-left: 0;
    }

    /* ReCAPTCHA responsive */
    .g-recaptcha {
        transform: scale(0.9);
        transform-origin: 0 0;
    }

    /* Acciones del formulario */
    .form-actions {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem 1rem;
    }

    .form-actions .btn {
        width: 100%;
        min-height: 50px;
        padding: 1rem 1.5rem;
        font-size: 1.05rem;
        border-radius: 10px;
    }

    .btn-primary {
        order: 1;
    }

    .btn-secondary {
        order: 2;
    }

    .form-note {
        font-size: 0.85rem;
        padding: 1rem;
        text-align: center;
        line-height: 1.5;
    }

    /* Alertas */
    .alert {
        padding: 1rem;
        margin: 1rem 15px;
        border-radius: 10px;
        font-size: 0.95rem;
    }

    .alert i {
        font-size: 1.3rem;
        margin-right: 0.8rem;
    }
}

/* MODALES - Vista móvil optimizada */
@media (max-width: 768px) {
    .modal-overlay {
        padding: 1rem;
    }

    .modal-content {
        width: 95%;
        max-width: 95%;
        padding: 1.5rem;
        max-height: 90vh;
        border-radius: 15px;
    }

    .close-modal {
        top: 0.8rem;
        right: 0.8rem;
        width: 44px;
        height: 44px;
        font-size: 1.8rem;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-header-profile {
        flex-direction: column;
        align-items: center;
        padding: 1.5rem;
        margin: -1.5rem -1.5rem 1.5rem -1.5rem;
        border-radius: 15px 15px 0 0;
    }

    .modal-profile-img {
        width: 140px;
        height: 140px;
        margin-bottom: 1rem;
    }

    .modal-header-profile h2 {
        font-size: 1.6rem;
        text-align: center;
        margin-top: 0.8rem;
    }

    .modal-body-scroll {
        columns: 1;
        column-gap: 0;
        max-height: calc(90vh - 260px);
        padding-right: 0.5rem;
    }

    .modal-body-scroll p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .modal-body-scroll h3 {
        font-size: 1.2rem;
        margin-top: 1.5rem;
        margin-bottom: 0.8rem;
    }

    .modal-body-scroll h4 {
        font-size: 1.1rem;
        margin-top: 1.2rem;
        margin-bottom: 0.6rem;
    }

    .modal-body-scroll ul {
        padding: 1rem;
        margin: 1rem 0;
    }

    .modal-body-scroll ul li {
        font-size: 0.9rem;
        margin: 0.6rem 0;
        line-height: 1.5;
    }

    .modal-body-scroll strong {
        font-size: 1em;
    }
}

/* ============================================
   MEJORAS FINALES PARA PANTALLAS MUY PEQUEÑAS
   ============================================ */

@media (max-width: 375px) {
    /* Ajustes para iPhone SE y similares */
    body {
        font-size: 13px;
    }

    .hero h1 {
        font-size: 1.4rem !important;
    }

    .hero h1 span {
        font-size: 1.7rem !important;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .btn {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }

    .expositor-photo-frame {
        width: 150px;
        height: 150px;
    }

    .modal-profile-img {
        width: 120px;
        height: 120px;
    }
}

/* ============================================
   MODAL MAPA DE UBICACIÓN
   ============================================ */

.map-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem;
}

.map-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 1;
}

.map-modal-content {
    position: relative;
    background: white;
    border-radius: 20px;
    padding: 2rem;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideInUp 0.4s ease-out;
    z-index: 2;
}

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

.map-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #f8f9fa;
    border: 2px solid #dc143c;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    z-index: 10;
}

.map-modal-close:hover {
    background: #dc143c;
    color: white;
    transform: rotate(90deg);
}

.map-info {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1.5rem;
    border-radius: 15px;
    margin-bottom: 1.5rem;
    border-left: 5px solid #FFD700;
}

.map-info h3 {
    color: #003366;
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
}

.map-info p {
    margin: 0.5rem 0;
    color: #666;
    font-size: 1rem;
}

.map-info i {
    color: #FFD700;
    margin-right: 0.5rem;
}

.map-container {
    margin: 1.5rem 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.map-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.btn-map-action {
    flex: 1;
    min-width: 200px;
    background: linear-gradient(135deg, #003366 0%, #0066cc 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 51, 102, 0.3);
}

.btn-map-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 51, 102, 0.4);
}

.btn-waze {
    background: linear-gradient(135deg, #33CCFF 0%, #0099CC 100%);
    box-shadow: 0 5px 15px rgba(51, 204, 255, 0.3);
}

.btn-waze:hover {
    box-shadow: 0 8px 25px rgba(51, 204, 255, 0.4);
}

@media (max-width: 768px) {
    .map-modal {
        padding: 1rem;
    }
    
    .map-modal-content {
        padding: 1.5rem;
        max-height: 95vh;
    }
    
    .map-modal-content h2 {
        font-size: 1.3rem;
        padding-right: 40px;
    }
    
    .map-info {
        padding: 1rem;
    }
    
    .map-info h3 {
        font-size: 1.2rem;
    }
    
    .map-container iframe {
        height: 300px;
    }
    
    .map-actions {
        flex-direction: column;
    }
    
    .btn-map-action {
        width: 100%;
        min-width: auto;
    }
}

/* ============================================
   NOTIFICACIÓN PROMOCIONAL SASF
   ============================================ */

.sasf-notification {
    position: fixed;
    bottom: -170px;
    right: 2rem;
    width: 88px;
    height: 88px;
    padding: 0;
    max-width: none;
    background: white;
    border-radius: 50%;
    z-index: 9999;
    transition: bottom 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 2px solid transparent;
    background-image: linear-gradient(white, white), linear-gradient(135deg, #e63946 0%, #667eea 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24), 0 0 0 0 rgba(230, 57, 70, 0.18);
    animation: sasf-fab-pulse 2.2s ease-in-out infinite;
    cursor: pointer;
    overflow: visible;
}

@keyframes pulse-border {
    0%, 100% {
        box-shadow: 0 15px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(230, 57, 70, 0.2);
    }
    50% {
        box-shadow: 0 15px 60px rgba(0, 0, 0, 0.3), 0 0 60px rgba(230, 57, 70, 0.4);
    }
}

.sasf-notification.show {
    bottom: 2rem;
}

.sasf-fab-label {
    position: absolute;
    left: auto;
    right: 2px;
    top: -22px;
    transform: none;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.2px;
    white-space: nowrap;
    text-transform: uppercase;
    -webkit-text-stroke: 0.8px rgba(0, 0, 0, 0.35);
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.35),
        0 2px 0 rgba(0, 0, 0, 0.28),
        0 3px 0 rgba(0, 0, 0, 0.22),
        0 10px 16px rgba(0, 0, 0, 0.30);
    pointer-events: none;
}

.sasf-notification-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sasf-notification-logo {
    width: 62px;
    height: 62px;
    object-fit: contain;
    flex-shrink: 0;
    --sasf-logo-scale: 1;
    margin-right: 0;
    animation: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}

@media (min-width: 769px) {
    .sasf-notification {
        width: 112px;
        height: 112px;
        bottom: -220px;
    }

    .sasf-notification-logo {
        width: 80px;
        height: 80px;
    }

    .sasf-fab-label {
        right: 75px;
        top: -28px;
        font-size: 1.05rem;
        -webkit-text-stroke: 0.9px rgba(0, 0, 0, 0.35);
    }
}

@keyframes bounce-logo {
    0%, 100% {
        transform: translateY(0) scale(var(--sasf-logo-scale, 1));
    }
    50% {
        transform: translateY(-5px) scale(var(--sasf-logo-scale, 1));
    }
}

.sasf-notification-text {
    flex: 1;
}

.sasf-notification-text strong {
    display: block;
    color: #2c3e50;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #e63946 0%, #667eea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.sasf-notification-text p {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}

.sasf-notification-btn {
    background: linear-gradient(135deg, #e63946 0%, #667eea 100%);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-shadow: 0 5px 20px rgba(230, 57, 70, 0.3);
    animation: pulse-button 1.5s ease-in-out infinite;
}

@keyframes pulse-button {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.sasf-notification-btn:hover {
    transform: scale(1.2) !important;
    box-shadow: 0 8px 25px rgba(230, 57, 70, 0.5);
    animation: none;
}

.sasf-notification-btn i {
    font-size: 1.2rem;
}

.sasf-notification-close {
    position: absolute;
    top: -0.7rem;
    right: -0.7rem;
    background: #f8f9fa;
    border: 2px solid #e63946;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.sasf-notification-close:hover {
    background: #e63946;
    color: white;
    transform: rotate(90deg) scale(1.1);
}

.sasf-notification-close i {
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    :root {
        /* Reserva visual para no chocar con la barra fija inferior (sticky CTA)
           y respetar safe-area en móviles con notch */
        --sticky-cta-safe-offset: calc(80px + env(safe-area-inset-bottom, 0px));
    }

    .sasf-notification {
        left: auto;
        right: 1rem;
        max-width: none;
        bottom: -150px;
        width: 78px;
        height: 78px;
        padding: 0;
        border-radius: 50%;
        border: 2px solid transparent;
        background-image: linear-gradient(white, white), linear-gradient(135deg, #e63946 0%, #667eea 100%);
        background-origin: border-box;
        background-clip: padding-box, border-box;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(230, 57, 70, 0.18);
        animation: sasf-fab-pulse 2.2s ease-in-out infinite;
        cursor: pointer;
    }
    
    .sasf-notification.show {
        /* Subir por encima del CTA fijo inferior */
        bottom: calc(1rem + var(--sticky-cta-safe-offset));
    }
    
    .sasf-notification-content {
        width: 100%;
        height: 100%;
        gap: 0;
        justify-content: center;
        overflow: visible;
    }
    
    .sasf-notification-logo {
        width: 54px;
        height: 54px;
        --sasf-logo-scale: 1;
        margin-right: 0;
        animation: none;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
    }

    .sasf-notification-text {
        display: none;
    }
    
    .sasf-notification-text strong {
        font-size: 0.75rem;
    }
    
    .sasf-notification-text p {
        font-size: 0.65rem;
        display: none; /* Ocultar texto secundario en móvil */
    }
    
    .sasf-notification-btn {
        display: none;
    }
    
    .sasf-notification-btn i {
        font-size: 0.85rem;
    }
    
    .sasf-notification-close {
        display: none;
    }
    
    .sasf-notification-close i {
        font-size: 0.7rem;
    }
}

@keyframes sasf-fab-pulse {
    0%, 100% {
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(230, 57, 70, 0.18);
        transform: translateY(0);
    }
    50% {
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24), 0 0 0 10px rgba(230, 57, 70, 0.05);
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sasf-notification {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   SPONSOR EN MENÚ DE NAVEGACIÓN
   ============================================ */

.sponsor-menu-item {
    margin-right: auto;
    padding-right: 2rem;
    border-right: 2px solid rgba(255, 255, 255, 0.1);
}

.sponsor-link {
    display: flex !important;
    align-items: center;
    gap: 0.8rem;
    background: linear-gradient(135deg, #e63946 0%, #667eea 100%);
    /* Mantener el botón del mismo tamaño aunque el logo crezca */
    height: 44px;
    padding: 0 1.2rem !important;
    border-radius: 50px;
    transition: all 0.3s ease;
    overflow: visible;
}

.sponsor-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(230, 57, 70, 0.3);
}

.sponsor-menu-logo {
    height: 100px;
    width: auto;
    filter: brightness(0) invert(1);
}

.sponsor-link span {
    font-size: 0.9rem;
    font-weight: 600;
}

@media (max-width: 968px) {
    .sponsor-menu-item {
        margin-right: 0;
        padding-right: 0;
        border-right: none;
        border-bottom: 2px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
    
    .sponsor-link {
        justify-content: center;
        height: 44px;
        padding: 0 1.2rem !important;
    }
    
    .sponsor-menu-logo {
        height: 60px;
    }
    
    .sponsor-link span {
        font-size: 0.85rem;
    }
}

/* ============================================
   SECCIÓN SUDAMERICANA DE SOFTWARE
   ============================================ */

.sponsor-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 5rem 0;
    border-top: 3px solid #dee2e6;
    border-bottom: 3px solid #dee2e6;
}

.sponsor-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: linear-gradient(135deg, #e63946 0%, #667eea 100%);
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 2rem;
    box-shadow: 0 5px 20px rgba(230, 57, 70, 0.3);
    animation: pulse-gift 2s ease-in-out infinite;
}

.sponsor-badge i {
    font-size: 1.5rem;
    animation: rotate-gift 3s linear infinite;
}

@keyframes pulse-gift {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes rotate-gift {
    0%, 80%, 100% {
        transform: rotate(0deg);
    }
    85%, 95% {
        transform: rotate(-15deg);
    }
    90% {
        transform: rotate(15deg);
    }
}

.sponsor-content {
    display: flex;
    align-items: center;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.sponsor-logo-container {
    text-align: center;
    flex-shrink: 0;
}

.sponsor-logo {
    width: 200px;
    height: auto;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
    transition: transform 0.3s ease;
}

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

.sponsor-title {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #e63946 0%, #667eea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.3;
    margin: 0;
}

.sponsor-info {
    flex: 1;
}

.sponsor-tagline {
    font-size: 1.2rem;
    color: #495057;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.sponsor-tagline i {
    color: #667eea;
    font-size: 1.5rem;
}

.sponsor-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.sponsor-feature {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1rem;
    color: #495057;
}

.sponsor-feature i {
    color: #e63946;
    font-size: 1.2rem;
}

.sponsor-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-sponsor-primary {
    background: linear-gradient(135deg, #e63946 0%, #667eea 100%);
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(230, 57, 70, 0.3);
}

.btn-sponsor-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(230, 57, 70, 0.5);
}

.btn-sponsor-secondary {
    background: transparent;
    color: #e63946;
    padding: 1rem 2rem;
    border: 2px solid #e63946;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.btn-sponsor-secondary:hover {
    background: linear-gradient(135deg, #e63946 0%, #667eea 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(230, 57, 70, 0.3);
}

/* Responsive para la sección sponsor */
@media (max-width: 968px) {
    .sponsor-content {
        flex-direction: column;
        gap: 2rem;
        padding: 2rem;
    }
    
    .sponsor-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sponsor-section {
        padding: 3rem 0;
    }
    
    .sponsor-badge {
        font-size: 0.9rem;
        padding: 0.6rem 1.5rem;
    }
    
    .sponsor-content {
        padding: 1.5rem;
    }
    
    .sponsor-logo {
        width: 150px;
    }
    
    .sponsor-title {
        font-size: 1.4rem;
    }
    
    .sponsor-tagline {
        font-size: 1rem;
    }
    
    .sponsor-actions {
        flex-direction: column;
    }
    
    .btn-sponsor-primary,
    .btn-sponsor-secondary {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ================================================
   Badge flotante "Actividad en vivo"
   ================================================ */
.live-float {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 99990;
    width: 300px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 0 0 2px #FFD700,
        0 0 24px rgba(255, 215, 0, 0.40),
        0 20px 50px rgba(0, 0, 0, 0.50);
    animation: lfEntrance 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    animation-delay: 1.2s;
    opacity: 0;
}

@keyframes lfEntrance {
    from { opacity: 0; transform: translateY(-24px) scale(0.90); }
    to   { opacity: 1; transform: translateY(0)     scale(1); }
}

/* Pulso del borde dorado */
@keyframes goldGlow {
    0%, 100% { box-shadow: 0 0 0 2px #FFD700, 0 0 18px rgba(255,215,0,0.35), 0 20px 50px rgba(0,0,0,0.50); }
    50%       { box-shadow: 0 0 0 2px #FFD700, 0 0 38px rgba(255,215,0,0.70), 0 20px 50px rgba(0,0,0,0.50); }
}
.live-float { animation: lfEntrance 0.6s cubic-bezier(0.175,0.885,0.32,1.275) both, goldGlow 2.4s ease-in-out 1.8s infinite; }

/* ── Cabecera con gradiente del navbar ── */
.lf-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #0c1e47 0%, #1e3a8a 55%, #2563eb 100%);
    border-bottom: 2px solid #FFD700;
}

.lf-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: lfPing 1.3s ease-in-out infinite;
}

@keyframes lfPing {
    0%   { box-shadow: 0 0 0 0   rgba(34,197,94,0.9); }
    70%  { box-shadow: 0 0 0 10px rgba(34,197,94,0);  }
    100% { box-shadow: 0 0 0 0   rgba(34,197,94,0);   }
}

.lf-label {
    font-size: 0.70rem;
    font-weight: 900;
    color: #22c55e;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    flex: 1;
}

.lf-close {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.20);
    color: rgba(255,255,255,0.55);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 50px;
    transition: background 0.2s, color 0.2s;
}
.lf-close:hover { background: rgba(255,255,255,0.20); color: #fff; }

/* ── Cuerpo ── */
.lf-body {
    background: linear-gradient(160deg, #0f2454 0%, #162d62 100%);
    padding: 14px 16px 16px;
}

/* Bloque del número grande */
.lf-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,215,0,0.20);
}

.lf-num-wrap {
    background: linear-gradient(135deg, #5e90e3 0%, #de4c67 100%);
    border-radius: 14px;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(94,144,227,0.45);
    animation: numBounce 2s ease-in-out infinite;
    overflow: hidden;
    position: relative;
}

@keyframes numBounce {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-4px); }
}

.lf-num {
    font-size: 1.9rem;
    font-weight: 900;
    color: #FFD700;
    line-height: 1;
    text-shadow: 0 0 14px rgba(255,215,0,0.6);
    display: block;
}

/* Slot machine: sale hacia arriba */
@keyframes slotOut {
    0%   { transform: translateY(0);     opacity: 1; }
    100% { transform: translateY(-130%); opacity: 0; }
}
/* Slot machine: entra desde abajo */
@keyframes slotIn {
    0%   { transform: translateY(130%);  opacity: 0; }
    100% { transform: translateY(0);     opacity: 1; }
}

.lf-num.slot-out { animation: slotOut 0.28s ease-in  both; }
.lf-num.slot-in  { animation: slotIn  0.32s ease-out both; }

.lf-stat-info { display: flex; flex-direction: column; gap: 2px; }

.lf-stat-title {
    font-size: 0.72rem;
    font-weight: 800;
    color: #FFD700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.lf-stat-text {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.80);
    font-weight: 500;
    line-height: 1.35;
}

/* Frase rotativa */
.lf-phrase {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.92);
    margin: 0 0 14px;
    min-height: 38px;
    line-height: 1.5;
    padding: 8px 10px;
    background: rgba(255,255,255,0.06);
    border-left: 3px solid #de4c67;
    border-radius: 0 8px 8px 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Botón CTA */
.lf-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #0c1e47;
    font-size: 0.88rem;
    font-weight: 900;
    padding: 0.65rem 1rem;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 6px 20px rgba(255,165,0,0.5);
    letter-spacing: 0.3px;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    animation: ctaPulse 2.2s ease-in-out infinite;
}

@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(255,165,0,0.50); }
    50%       { box-shadow: 0 6px 30px rgba(255,165,0,0.85); }
}

.lf-cta:hover {
    transform: translateY(-3px) scale(1.04);
    filter: brightness(1.08);
    color: #0c1e47;
}

@media (max-width: 768px) {
    .live-float {
        top: 68px;
        right: 10px;
        left: 10px;
        width: auto;
        max-width: 100%;
        border-radius: 14px;
        display: flex;
        flex-direction: row;
        overflow: hidden;
    }

    /* Cabecera se convierte en columna lateral izquierda */
    .lf-top {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 10px;
        writing-mode: vertical-rl;
        min-width: 36px;
        border-bottom: none;
        border-right: 2px solid #FFD700;
    }

    .lf-label {
        font-size: 0.58rem;
        letter-spacing: 1px;
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }

    .lf-close {
        writing-mode: horizontal-tb;
        font-size: 0.75rem;
        padding: 2px 5px;
    }

    /* Cuerpo ocupa el resto del ancho */
    .lf-body {
        flex: 1;
        padding: 10px 12px 12px;
        min-width: 0;
    }

    /* Stat en fila compacta */
    .lf-stat {
        margin-bottom: 8px;
        padding-bottom: 8px;
        gap: 8px;
    }

    .lf-num-wrap {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .lf-num {
        font-size: 1.5rem;
    }

    .lf-stat-title {
        font-size: 0.66rem;
    }

    .lf-stat-text {
        font-size: 0.70rem;
    }

    /* Frase más compacta */
    .lf-phrase {
        font-size: 0.74rem;
        min-height: 28px;
        margin-bottom: 10px;
        padding: 6px 8px;
    }

    /* CTA más compacto */
    .lf-cta {
        font-size: 0.80rem;
        padding: 0.50rem 0.8rem;
    }
}

@media (max-width: 380px) {
    .live-float {
        top: 62px;
        right: 6px;
        left: 6px;
    }

    .lf-phrase {
        display: none; /* en pantallas muy pequeñas ocultar la frase para ahorrar espacio */
    }

    .lf-num { font-size: 1.3rem; }
    .lf-cta { font-size: 0.74rem; padding: 0.42rem 0.7rem; }
}

/* ================================================
   Contador de Progreso Hero (Hero Progress Counter)
   ================================================ */
.hpc-widget {
    margin-top: 1.6rem;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    padding: 1.1rem 1.4rem;
    max-width: 500px;
    animation: hpcEntrance 0.6s ease both;
    animation-delay: 0.8s;
}

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

.hpc-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.hpc-fire {
    font-size: 1.4rem;
    flex-shrink: 0;
    animation: hpcPulse 1.6s ease-in-out infinite;
}

@keyframes hpcPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.18); }
}

.hpc-headline {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    line-height: 1.4;
}

.hpc-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: #FFD700;
    letter-spacing: -0.5px;
}

.hpc-bar-wrap {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 0.6rem;
}

.hpc-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #FFD700, #de4c67);
    border-radius: 100px;
    transition: width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.hpc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.hpc-bar-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.hpc-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #003366;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 14px rgba(255, 165, 0, 0.45);
}

.hpc-cta-btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 6px 20px rgba(255, 165, 0, 0.6);
    color: #003366;
}

@media (max-width: 600px) {
    .hpc-widget { max-width: 100%; }
    .hpc-num    { font-size: 1.3rem; }
}

/* ================================================
   Notificación de Prueba Social (Social Proof Toast)
   ================================================ */
.spn-toast {
    position: fixed;
    bottom: 28px;
    left: 20px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.10);
    padding: 14px 16px 14px 14px;
    max-width: 300px;
    border-left: 4px solid #5e90e3;
    pointer-events: none;
    opacity: 0;
    transform: translateX(calc(-100% - 30px));
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.spn-toast.spn-visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.spn-avatar {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
    background: linear-gradient(135deg, #5e90e3 0%, #de4c67 100%);
    border-radius: 50%;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spn-body {
    flex: 1;
    min-width: 0;
}

.spn-name-text {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spn-action-text {
    font-size: 0.78rem;
    color: #555;
    margin: 0;
}

.spn-location {
    font-weight: 400;
    color: #777;
    font-size: 0.80rem;
}

.spn-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: #aaa;
    line-height: 1;
    padding: 2px 4px;
    transition: color 0.2s;
    flex-shrink: 0;
    align-self: flex-start;
}

.spn-close-btn:hover {
    color: #333;
}

@media (max-width: 480px) {
    .spn-toast {
        bottom: 16px;
        left: 10px;
        right: 10px;
        max-width: calc(100% - 20px);
    }
}