/* Fuente principal */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #3e4750;
    color: #222;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow-x: hidden;
}

/* Colores personalizados */
.text-x3green {
    color: #bad829 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

}

.bg-x3green {
    background-color: #bee967 !important;
    color: #111;
}

.btn-x3green {
    background-color: #bee967;
    color: #111;
    border: none;
}

.btn-x3green:hover {
    background-color: #82c400;
    color: #000;
}

.text-shadow {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.btn-outline-x3green {
    border-color: #bee967;
    color: #bee967;
}

.btn-outline-x3green:hover {
    background-color: #bee967;
    color: #111;
    transition: all 0.3s ease;
}

/* Navbar */
.navbar {
    background-color: #181c1f !important;
    border-bottom: 3px solid #bee967;
    min-height: 100px;
    /* Aumentá el valor si necesitás más espacio */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-brand img {
    max-height: 70px;
    /* Aumentamos el alto */
    width: auto;
    object-fit: contain;
    display: block;

}

.navbar .nav-link {
    color: #ffffff !important;
    font-weight: 500;
}

.navbar .nav-link:hover {
    color: #bee967 !important;
}

/* Títulos */
h1,
h2,
h3,
h5 {
    color: #ffffff;
}

/* Cards */
.card {
    border-radius: 10px;
    background-color: #333;
    border: 1px solid #bee967;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Formulario */
input.form-control {
    border-radius: 8px;
    border: 1px solid #ccc;
}

.alert {
    border-radius: 8px;
    font-weight: 500;
}

/* Footer */
footer {
    background-color: #181c1f;
    color: #aaa;
    padding: 10px 0;
    font-size: 0.9rem;
    margin-top: 0 !important;
}

footer a:hover {
    text-decoration: underline;
    color: #bfff00;
}


/* Imagenes responsivas */
img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Botón redondeado */
button,
.btn {
    border-radius: 6px;
}

/* Galería */
.section-title {
    color: #bee967;
    font-weight: 600;
}

/* Cards de torneos con fondo oscuro + texto claro */
.torneo-card {
    background-color: #333;
    color: #eee;
    border: none;
}

.hero-section {
    position: relative;
    background-image: url('/media/...');
    /* ya la estás usando */
    background-size: cover;
    background-position: center;
    height: 50vh;
    /* Cambiar de 90vh o 100vh a 60vh por ejemplo */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.hero-section .content {
    position: relative;
    z-index: 2;
}




.bg-x3gray {
    background-color: #f0f1f3;
    /* Más gris que blanco puro */
}

.titulo-resaltado {
    display: inline-block;
    background-color: #181c1f;
    /* gris oscuro casi negro */
    color: #bee967;
    /* verde flúo X3 */
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 1.4rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 12px;
    animation: fadeInTop 0.6s ease;
}

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

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

.ranking-box table thead th {
    font-weight: 600;
    border-bottom: 2px solid #bee967;
}

.ranking-box table tbody tr {
    transition: background-color 0.2s ease;
}

.ranking-box table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.gallery-card {
    background-color: #333;
    padding: 1.5rem;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.card-x3 {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
    transform: scale(1.01);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}

@media (max-width: 576px) {
    .card-x3 {
        padding: 0;
    }
}

.card-complejos {
    border: none;
    background-color: #181c1f;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 100%;
}

@media (max-width: 768px) {
    .swiper-complejos .swiper-slide {
        width: 100% !important;
    }

    .card-complejos {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    }

    .card-complejos img {
        border-radius: 0;
        height: auto;
        width: 100%;
        object-fit: cover;
    }

    .card-complejos .card-body {
        padding: 1rem;
    }
}

/* ranking home */
.ranking-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.5rem;
}

.ranking-table thead {
    background-color: #bee967;
    color: #111;
}

.ranking-table th,
.ranking-table td {
    padding: 0.75rem 1rem;
    text-align: center;
    background-color: #1f1f1f;
    color: white;
}

.ranking-table th.text-start,
.ranking-table td.text-start {
    text-align: left;
}

.ranking-table tbody tr {
    transition: transform 0.2s ease, background-color 0.2s ease;
    border-radius: 8px;
}

.ranking-table tbody tr:hover {
    background-color: rgba(145, 255, 0, 0.08);
    transform: scale(1.01);
}

.ranking-table .oro {
    border-left: 5px solid gold;
    background-color: #1a1a1a;
}

.ranking-table .plata {
    border-left: 5px solid silver;
    background-color: #1a1a1a;
}

.ranking-table .bronce {
    border-left: 5px solid #cd7f32;
    background-color: #1a1a1a;
}

.ranking-table td:first-child {
    padding-left: 10px;
}

/* Estilos SOLO para la galería swiper-galeria-x3 */
/* Galería específica para swiper-galeria-x3 */
/* Evita herencias no deseadas */
.swiper-galeria-x3 .swiper-slide {
    width: 250px;
    opacity: 0.3;
    transition: transform 0.3s, opacity 0.3s;
    transform: scale(0.8);
}

/* Slide activo al frente */
.swiper-galeria-x3 .swiper-slide-active {
    opacity: 1 !important;
    transform: scale(1.1);
    z-index: 2;
}

.swiper-galeria-x3 .swiper-wrapper {
    align-items: center;
}

.swiper-galeria-x3 .galeria-foto-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
}

.fade-in {
    animation: fadeInModal 0.3s ease-out forwards;
}

.fade-out {
    animation: fadeOutModal 0.2s ease-in forwards;
}

@keyframes fadeInModal {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOutModal {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

#turnos-lista .list-group-item.active {
    background-color: #bee967;
    color: black;
    border-color: #bee967;
}

.accordion-button:not(.collapsed) {
    background-color: #bee967;
    color: black;
    font-weight: bold;
}

.card-header {
    font-size: 1.1rem;
}

.card-complejo-hero {
    background-color: rgba(0, 0, 0, 0.65);
    /* transparencia visible */
    backdrop-filter: blur(6px);
    /* desenfoque suave */
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: white;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.card-complejo-hero .card-title,
.card-complejo-hero .card-text {
    color: white !important;
}

.card-complejo-hero:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
    .hero-section {
        background-size: cover !important;
        background-position: top center !important;
        height: 50vh !important;
    }
}

.swiper-complejos {
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    scroll-padding-left: 2rem;
    display: flex;
    justify-content: center;
}

.swiper-slide-complejos {
    width: 18rem;
    /* mismo que la card */
    flex-shrink: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0.5;
    transform: scale(0.9);
}

.swiper-slide-complejos.swiper-slide-active {
    transform: scale(1.05);
    opacity: 1;
}

.swiper-button-prev-complejos,
.swiper-button-next-complejos {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    color: #bee967;
    position: absolute;
    top: 45%;
    z-index: 10;
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
}

/* Reducimos el tamaño del ícono interno */
.swiper-button-prev-complejos::after,
.swiper-button-next-complejos::after {
    font-size: 1.2rem;
}

.swiper-button-prev-complejos {
    left: 0.5rem;
}

.swiper-button-next-complejos {
    right: 0.5rem;
}

.beneficio-card {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    transition: transform 0.3s ease;
}

.beneficio-card:hover {
    transform: scale(1.03);
}

.stat-card {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: scale(1.03);
}

.btn-inscribirme {
    background: linear-gradient(135deg, #bee967, #b9ee74);
    color: #111 !important;
    border: none;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(145, 255, 0, 0.3);
}

.btn-inscribirme:hover {
    background: linear-gradient(135deg, #91ff00, #bee967);
    transform: scale(1.05);
    box-shadow: 0 0 18px rgba(145, 255, 0, 0.5);
}

.btn-inscribirme-sm {
    background: linear-gradient(135deg, #bee967, #91ff00);
    color: #111 !important;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 0 8px rgba(145, 255, 0, 0.3);
}

.btn-inscribirme-sm:hover {
    background: linear-gradient(135deg, #91ff00, #bee967);
    transform: scale(1.05);
    box-shadow: 0 0 14px rgba(145, 255, 0, 0.5);
}

.hover-shadow-sm:hover {
    box-shadow: 0 0 10px rgba(145, 255, 0, 0.4);
    transform: scale(1.02);
    transition: all 0.3s ease;
}

.btn-inscribirme-sm {
    background-color: #91ff00;
    color: #000;
    font-weight: 600;
    border-radius: 20px;
    padding: 6px 16px;
    transition: 0.2s ease-in-out;
}

.btn-inscribirme-sm:hover {
    background-color: #7adc00;
    color: #000;
}

/* En móviles, permitir que la input-group pase a dos líneas */
@media (max-width: 576px) {
    .ig-responsive {
        flex-wrap: wrap;
    }

    .ig-responsive>.form-control,
    .ig-responsive>.form-select {
        flex: 1 0 100%;
        margin-bottom: .5rem;
    }

    .ig-responsive>.btn {
        flex: 1 0 48%;
        /* dos botones lado a lado */
    }
}

/* Pseudo-botón debajo del texto de la card */
.pseudo-btn {
    padding: .35rem .85rem;
    border: 1px solid var(--x3green, #8bc34a);
    border-radius: 9999px;
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    background: rgba(139, 195, 74, .08);
    backdrop-filter: saturate(120%);
    cursor: pointer;
    /* la card completa es el link */
}

.pseudo-btn:hover {
    background: rgba(139, 195, 74, .16);
}

/* separación uniforme entre CTAs */
.hero-cta-wrap {
    gap: .5rem;
}

/* tamaño base (desktop) */
.hero-cta {
    border-radius: 9999px;
    padding: .6rem 1.1rem;
}

/* MOBILE: botones más chicos y con estilo outline suave */
@media (max-width: 576px) {
    header .display-4 {
        font-size: 2rem;
    }

    /* título menos alto */
    header .lead {
        font-size: .95rem;
    }

    /* subtítulo más fino */

    .hero-cta {
        font-size: .92rem;
        padding: .38rem .85rem;
        /* menos alto/ancho */
        border: 1px solid rgba(139, 195, 74, .7);
        /* borde verde sutil */
        color: #e9ecef;
        box-shadow: none;
    }

    .hero-cta:hover {
        background: rgba(139, 195, 74, .12);
        /* feedback suave */
    }
}

/* Base / desktop */
.kpi-section {
    padding-block: 1.75rem;
}

.kpi-card .kpi {
    font-size: 1.6rem;
}

/* tamaño legible en desktop */
.kpi-card .kpi-label {
    opacity: .9;
}

/* Mobile compacto */
@media (max-width: 576px) {
    .kpi-section {
        padding-block: .75rem;
    }

    /* menos alto de sección */
    .kpi-card {
        padding: .5rem .6rem !important;
    }

    .kpi-card .kpi {
        font-size: 1.2rem;
    }

    /* número más chico */
    .kpi-card .kpi-label {
        font-size: .75rem;
    }
}