:root { --primary-color: #40C4FF; --secondary-color: #2B2B2B; --white-color: #FFFFFF; --dark-bg: #1a1a1a; --light-gray: #f4f4f4; --text-gray: #555; --accent-color-footer: #00BFFF; }

*, *::before, *::after { box-sizing: border-box; }

body, html { margin: 0; padding: 0; font-family: 'Barlow Condensed', sans-serif; background-color: var(--white-color); color: var(--secondary-color); scroll-behavior: smooth; /*overflow-x: hidden; /* Evita el scroll horizontal */ }

.container { max-width: 1540px; margin: 0 auto; padding: 0 50px; position: relative; }

/* --- Hero Section --- */
.hero-section { position: relative; height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; color: var(--white-color); padding-bottom: 120px; overflow: hidden; /* evita que el vídeo desborde */ }

/* CONTENEDOR DEL VIDEO */
.video-bg-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; pointer-events: none; background-color: rgba(43, 43, 43, 1); background-image: url(/img/miniatura-video-home.jpg); background-repeat: no-repeat; background-size: cover; }

    /* EL VIDEO */
    .video-bg-wrapper iframe { position: absolute; top: 50%; left: 50%; width: 400vw; height: 120vh; transform: translate(-50%, -50%); pointer-events: none; }

/* OVERLAY OSCURO (equivalente a tu linear-gradient original) */
.hero-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ); z-index: -1; }

/* Mantiene tu estructura original */
.hero-section .container { width: 100%; }

.hero-content { width: 100%; text-align: left; position: relative; z-index: 1; /* contenido siempre encima del vídeo */ }

    .hero-content h1 { font-size: 6rem; font-weight: 700; margin: 0; line-height: 1.1; text-transform: uppercase; }

    .hero-content .accent-color { color: var(--primary-color); }

/* EL MENÚ SIEMPRE POR ENCIMA DEL VIDEO */
.main-nav,
.mobile-nav-overlay { position: relative; z-index: 2; }



/* --- Navigation --- */
.main-nav { position: fixed; top: 0; width: 100%; z-index: 1000; transition: background-color 0.3s ease; background-color: transparent; }

    .main-nav .nav-container { max-width: 1540px; margin: 0 auto; padding: 40px 50px; display: flex; justify-content: space-between; align-items: center; transition: padding 0.3s ease; }

    .main-nav.sticky { background-color: rgba(43, 43, 43, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0,0,0,0.3); }

        .main-nav.sticky .nav-container { padding: 15px 50px; }

    .main-nav .logo a { display: block; }

    .main-nav .logo img { height: 100px; transition: height 0.3s ease; display: block; }

    .main-nav.sticky .logo img { height: 50px; }

.desktop-nav { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }

    .desktop-nav li { margin-left: 35px; }

        .desktop-nav li a { color: var(--white-color); text-decoration: none; font-weight: 500; font-size: 20px; text-transform: uppercase; padding: 15px 0; position: relative; transition: color 0.3s ease; }

            .desktop-nav li a::after { content: ''; position: absolute; width: 100%; height: 2px; bottom: 5px; left: 0; background-color: var(--primary-color); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease-in-out; }

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

                .desktop-nav li a:hover::after { transform: scaleX(1); }

.hamburger-menu { display: none; cursor: pointer; z-index: 1002; }

    .hamburger-menu span { display: block; width: 22px; height: 2px; margin: 5px 0; background-color: var(--white-color); }

.mobile-nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--secondary-color); z-index: 1001; display: flex; justify-content: center; align-items: flex-start; padding-top: 100px; transform: translateY(-100%); transition: transform 0.5s ease-in-out; }

    .mobile-nav-overlay.is-active { transform: translateY(0); }

.close-icon { position: absolute; top: 30px; right: 30px; color: var(--white-color); font-size: 3rem; cursor: pointer; }

.mobile-nav-content { text-align: center; }

.logo-mobile img { height: 70px; margin-bottom: 40px; }

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

    .mobile-nav li { margin-bottom: 20px; }

        .mobile-nav li a { color: var(--white-color); text-decoration: none; font-size: 1.6rem; font-weight: 500; text-transform: uppercase; }


/* --- General Section Styling --- */
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }

    .section-header h2 { font-size: 3rem; text-transform: uppercase; margin: 0; }

.highlight-word { position: relative; display: inline-block; z-index: 1; }

    .highlight-word::after { content: ''; position: absolute; width: 112%; height: 25px; background-color: var(--primary-color); left: 0; top: 65%; z-index: -1; transform: translateX(-5px); }

.highlight-word-left::after { transform: translateX(-15px) !important; }


.see-all { text-decoration: none; color: var(--secondary-color); font-weight: 700; transition: color 0.3s ease; display: inline-block; padding: 10px; }

    .see-all:hover { color: var(--primary-color); }

/* --- Two Column Section --- */
.two-column-section { padding: 100px 0; background-color: var(--white-color); }
    .two-column-section .container { display: flex; align-items: center; }

.column-image { flex: 1; padding-right: 50px; position: relative; }

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

.column-text { flex: 1; }

    .column-text h2 { font-size: 3rem; text-transform: uppercase; margin-bottom: 20px; }

    .column-text p { font-size: 1.2rem; line-height: 1.6; color: var(--text-gray); }

/* --- Icon Section --- */
#servicios { padding: 80px 0; background: url(/img/media-maraton-2024.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; }

.icon-section-content { display: flex; justify-content: space-around; max-width: 1200px; margin: 0 auto; gap: 20px; }

.icon-card { background-color: #2B2B2B; color: var(--white-color); padding: 30px; text-align: center; flex: 1; transition: transform 0.3s ease, background-color 0.3s ease; border-top: 5px solid #40C4FF; text-decoration: none }

    .icon-card:hover { transform: translateY(-10px); background-color: rgba(43, 43, 43, 0.8); }

.icon-svg { width: 60px; height: 60px; margin-bottom: 20px; }

.icon-card h3 { font-size: 22px; text-transform: uppercase; margin-bottom: 15px; letter-spacing: 0.3px; }

/* --- Events Section --- */
.events-section { padding: 100px 0; background-color: var(--white-color); }

.event-list { margin-top: 50px; }

.event-item { display: flex; align-items: flex-start; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 2px solid #E6E6E6; }

    .event-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.event-date { text-align: center; margin-right: 30px; color: var(--secondary-color); flex-shrink: 0; display: flex; align-items: end; position: sticky; top: 100px; min-width: 140px; }

    .event-date .day { font-size: 3rem; font-weight: 700; }

    .event-date .month { font-size: 25px; text-align: left; margin-left: 10px; font-weight: 500; line-height: 1em; }

.event-content-wrapper { display: flex; flex-direction: column; flex-grow: 1; gap: 20px; }

.event-content { background-color: #F9F9F9; padding: 20px; border-radius: 10px; display: flex; align-items: center; flex: 1; }

.event-poster img { width: 135px; height: 135px; border-radius: 10px; border: 3px solid #B2B2B2; object-fit: cover; margin-right: 20px; }

.event-details { flex: 1; padding: 0 30px; }

.event-status { background-color: #086600; color: #ffffff; padding: 5px 15px; font-size: 14px; font-weight: 600; display: inline-block; border-radius: 0; letter-spacing: 0.4px; transition: opacity 0.4s ease; }

.event-details .event-status { margin-bottom: 10px; }

.event-details h3 { margin: 0 0 10px 0; font-size: 1.5rem; }

.event-details p { margin: 0; color: var(--text-gray); }

.event-more-info a { display: inline-block; padding: 10px 15px; border-radius: 5px; text-decoration: none; color: var(--secondary-color); font-weight: 700; transition: background-color 0.3s ease, color 0.3s ease; text-transform: uppercase; }

    .event-more-info a:hover { color: var(--primary-color); }

.event-meta-info { display: flex; gap: 15px; margin-top: 10px; }

    .event-meta-info span { color: var(--text-gray); }

    .event-meta-info i { color: var(--primary-color); margin-right: 5px; }

        .event-meta-info i:before { color: #40C4FF !important; }

/* --- Upcoming Events Section --- */
.upcoming-events-section { padding: 100px 0; background-color: var(--secondary-color); position: relative; overflow: hidden; }

    .upcoming-events-section .section-header { justify-content: center; }

        .upcoming-events-section .section-header h2 { color: var(--white-color); }

            .upcoming-events-section .section-header h2 strong { color: var(--white-color); font-weight: 700; }

.upcoming-events-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 50px; position: relative; z-index: 1; }

.event-card { position: relative; overflow: hidden; cursor: pointer; width: 325px; height: 470px; flex-shrink: 0; }

    .event-card .event-status, .event-card .event-status-completed, .event-card .event-status-finished { position: absolute; top: 15px; left: 15px; z-index: 2; }

    .event-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }

    .event-card .event-card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); color: var(--white-color); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; padding: 25px; opacity: 1; transition: opacity 0.4s ease; text-decoration: none; }

    .event-card:hover .event-card-overlay { opacity: 0; }

    .event-card:hover .event-status { opacity: 0; }

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

.overlay-content h3 { font-size: 1.4rem; text-transform: uppercase; }

.overlay-content p { margin: 5px 0; display: flex; align-items: center; }

    .overlay-content p i { color: var(--primary-color); margin-right: 10px; width: 20px; text-align: center; }

.blue-strip { position: absolute; top: 0; right: 0; width: 25%; height: 100%; background-color: var(--primary-color); z-index: 0; }

/* --- Past Events Section --- */
.past-events-section { padding: 100px 0; background-color: var(--white-color); }

.past-events-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 50px; }

a.past-event-card { text-decoration: none; color: inherit; }

.past-event-card { width: 345px; height: 620px; background-color: #F9F9F9; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: 20px; }

.past-event-image-wrapper { width: 305px; height: 435px; border-radius: 5px; overflow: hidden; }

.past-event-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }

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

.past-event-details { padding: 20px; width: 100%; text-align: left; }

.event-status-finished { background-color: #353535; color: #ffffff; padding: 5px 15px; font-size: 14px; font-weight: 600; display: inline-block; border-radius: 0; letter-spacing: 0.4px; margin-bottom: 15px; text-transform: uppercase; }

.event-status-completed { background-color: #E53935; color: #ffffff; padding: 5px 15px; font-size: 14px; font-weight: 600; display: inline-block; border-radius: 0; letter-spacing: 0.4px; margin-bottom: 15px; text-transform: uppercase; }

.past-event-details h3 { margin: 0 0 10px 0; font-size: 1.5rem; }

.past-event-details p { margin: 0; color: var(--text-gray); display: flex; align-items: center; }

    .past-event-details p i { color: var(--primary-color); margin-right: 5px; }


/* --- Footer --- */
.main-footer { background-color: #000000; color: var(--white-color); padding: 80px 0; font-weight: 300; }

.footer-container { display: flex; justify-content: space-between; max-width: 1540px; margin: 0 auto; padding: 0 50px; gap: 40px; }

.footer-column { flex: 1; padding: 0 20px; }

    .footer-column h3 { color: var(--white-color); text-transform: uppercase; font-size: 1.2rem; font-weight: 700; position: relative; padding-bottom: 15px; margin-bottom: 25px; }

    .footer-column .highlight-word::after { height: 12px; top: 40%; transform: translateX(-3px); }

    .footer-column ul { list-style: none; padding: 0; margin: 0; }

        .footer-column ul li { margin-bottom: 20px; }

            .footer-column ul li a, .footer-column ul li { color: var(--white-color); text-decoration: none; transition: color 0.3s ease; display: flex; align-items: flex-start; font-size: 1rem; line-height: 1.5; }

                .footer-column ul li a:hover { color: var(--accent-color-footer); }

                .footer-column ul li i { color: var(--accent-color-footer); margin-right: 15px; width: 20px; text-align: center; font-size: 1.1rem; margin-top: 3px; }

    .footer-column .social-icons { display: flex; gap: 20px; margin-top: 20px; }

        .footer-column .social-icons a i { font-size: 1.5rem; color: var(--white-color); transition: color 0.3s ease; }

        .footer-column .social-icons a:hover i { color: var(--accent-color-footer); }

    .footer-column h3.follow-us, .footer-column h3.info-legal-title { margin-top: 40px; }

    .logoRFEA{margin-top:24px;}

/* --- Buttons (revisado) --- */
.btnHero { text-decoration: none; color: #073d55; padding: 15px 35px; font-weight: 700; display: inline-block; margin-top: 30px; transition: all 0.3s ease; text-transform: uppercase; font-size: 20px; letter-spacing: 0.3px; border: 2px solid var(--primary-color); }

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

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

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

    .btn-secondary:hover { background-color: var(--secondary-color); color: var(--white-color); border-color: var(--secondary-color); }

.day { position: relative; display: inline-block; z-index: 1; }

    .day::after { content: ''; position: absolute; width: 112%; height: 20px; background-color: var(--primary-color); top: 60%; z-index: -1; left: 0; transform: translateX(-5px); }

/*Cookies*/
#divCookies { position: fixed; z-index: 99000; background: #263238; color: #b0bec5; width: 100%; max-height: 600px; overflow-y: auto; bottom: 0; left: 0; font-size: 13px; text-align: center; border-top: solid 1px rgba(255,255,255,.05); display: none; }
    #divCookies > div { position: relative; }
        #divCookies > div > p { line-height: 24px; }
    #divCookies a { color: #b0bec5; text-decoration: none; border: solid 1px #607d8b; padding: 2px 6px; border-radius: 4px; vertical-align: middle; display: inline-block; vertical-align: middle; display: block; margin-top: 4px }
        #divCookies a:hover { color: #263238; background: #b0bec5; }

/* --- Responsive --- */
@media (max-width: 1540px) {
    .past-events-grid { grid-template-columns: repeat(auto-fit, minmax(345px, 1fr)); }
}

@media (max-width: 1024px) {
    .container { padding: 0 30px; }
    .main-nav .nav-container, .main-nav.sticky .nav-container { padding-left: 30px; padding-right: 30px; }
    .desktop-nav { display: none; }
    .hamburger-menu { display: block; }

    .icon-section-content { display: grid; grid-template-columns: repeat(2, 1fr); }

    .upcoming-events-grid { display: grid; gap: 20px; }

    .event-card .event-card-overlay { background-color: rgba(0, 0, 0, 0.6); }


    .event-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

    .event-item { flex-direction: column; align-items: stretch; border-bottom: none; padding-bottom: 0; margin-bottom: 0; background-color: #f9f9f9; border-radius: 10px; overflow: hidden; }

    .event-date { margin: 0; padding: 15px; border-right: none; justify-content: center; background-color: #f0f0f0; order: 1; /* CORREGIDO: La fecha va primero */ }

    .event-content-wrapper { gap: 0; display: contents; }

    .event-content { flex-direction: column; border-radius: 0; padding: 20px; text-align: center; background-color: transparent; }

    .event-poster { width: 100%; order: 2; /* CORREGIDO: El cartel va segundo */ }

        .event-poster img { width: 100%; height: 200px; object-fit: cover; margin: 0; border-radius: 0; border: none; }

    .event-details { padding: 0; order: 3; padding-top: 12px }

    .event-meta-info { flex-direction: column; align-items: center; gap: 10px; }

    .event-more-info { margin-top: 20px; order: 4; }

    .past-events-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-container { flex-wrap: wrap; }
    .footer-column { flex-basis: 45%; }
    .logoRFEA { margin-top: 0px; }

}

@media (max-width: 768px) {

    .two-column-section { padding: 0; }

    .footer-column .social-icons { justify-content: center; }

    .hero-section { align-items: center; text-align: center; }
    .container { padding: 0 20px; }
    .main-nav .nav-container, .main-nav.sticky .nav-container { padding: 15px 20px; }
    .hero-content h1 { font-size: 3.5rem; line-height: 1.2; }
    .section-header h2, .column-text h2 { font-size: 2.2rem; margin-bottom: 15px; }

    .section-header { justify-content: center; display: block; text-align: center; }

    .blue-strip { width: 100%; height: 10px; top: auto; bottom: 0; right: 0; }

    .two-column-section .container { flex-direction: column; padding: 50px 20px; }

    .column-image { padding-right: 0; margin-bottom: 30px; }

    .icon-section-content { gap: 10px; }

    .icon-card { padding: 20px; }

        .icon-card h3 { font-size: 18px; }

    .event-card { height: auto; }

        .event-card .event-status { font-size: 12px; font-weight: 500; }

    .overlay-content h3 { font-size: 1.2rem; }

    .overlay-content p i { font-size: 0.9rem; }

    .event-card-overlay { padding: 10px; }


    .events-section, .upcoming-events-section, .past-events-section, .main-footer { padding: 50px 20px; }

    .event-list { grid-template-columns: 1fr; }

    .past-events-grid { grid-template-columns: 1fr; }

    .footer-container { flex-direction: column; align-items: center; }

    .footer-column { flex-basis: 100%; text-align: center; max-width: 400px; }

        .footer-column ul li a, .footer-column ul li { justify-content: center; }
}