@charset "utf-8";
/* CSS Document */

/* --- ESTILOS BASE HERO (Móvil) --- */
.hero {
   
    /* Imagen de fondo: El jugador. */
    /* Usaremos linear-gradient para oscurecer la imagen y que el texto resalte en móvil */
    /* background-image: url(../imagenes/vaqueros-picHero.jpg);*/
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../imagenes/vaqueros-picHero.jpg'); 
    background-size: cover;
    background-position: center right; /* En móvil, centramos más al jugador */
    background-repeat: no-repeat;
    background-color: var(--negro);
	height: 80vh; /* 80vh 80% del alto de la pantalla */
    display: flex;
    align-items: center; /* Centrado vertical */
}

.hero-container {
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
}

.hero-content {
    max-width: 100%; /* En móvil toma todo el ancho */
    text-transform: uppercase;
}

.hero-subtitle {
    font-family: var(--font-body); /* Jakarta para texto pequeño */
    color: var(--blanco);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.hero-title {
    font-family:  'BaseR', sans-serif; /* Tu fuente de béisbol */
    font-size: 2.8rem; /* Tamaño grande pero adaptable */
    line-height: 1.1;
    margin: 0;
}

.text-white {
    color: var(--blanco);
}

.text-orange {
    color: var(--naranja-primario);
}

/* --- AJUSTES PARA ESCRITORIO (Desde tablet grande) --- */
@media (min-width: 992px) {
    .hero {
        height: 420px; /* Alto completo en escritorio */
        /* Quitamos el gradiente oscuro fuerte, confiamos en la imagen oscura */
        background-image: url('../imagenes/vaqueros-picHero.jpg');
        background-position: right center; /* Jugador a la derecha */
    }

    .hero-content {
        max-width: 60%; /* Limitamos el texto a la izquierda */
        padding-left: 0;
    }

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

    .hero-title {
        font-size: 5rem; /* Tamaño masivo para impacto visual */
    }
}



/* ------------ Noticias ----------- */

.latest-news {
    background-color: #fd4d00; /* Naranja Vibrante */
    padding: 20px 0;
    overflow: hidden; /* Evita desbordamiento del carrusel */
}

.news-container {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px 1fr; /* Título izquierda, carrusel derecha */
    gap: 40px;
    padding: 0 20px;
}

/* Títulos de la izquierda */
.news-main-title {
    font-family: 'BaseR', sans-serif;
    color: #ffffff;
    font-size: 3.5rem;
    line-height: 0.9;
    margin: 0 0 20px 0;
    text-transform: uppercase;
}

.view-more-link {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #000000;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.1rem;
    border-bottom: 2px solid #000000;
    transition: 0.3s;
}

.view-more-link:hover {
    color: #ffffff;
    border-color: #ffffff;
}

/* Estilos del Carrusel */
.news-carousel-wrapper {
    overflow-x: auto; /* Permite el scroll horizontal */
    scroll-snap-type: x mandatory; /* Para que las tarjetas se 'imanten' al deslizar */
    scroll-behavior: smooth; /* Refuerza el movimiento suave */
    scrollbar-width: none; /* Oculta scroll en Firefox */
}

.news-carousel-wrapper::-webkit-scrollbar {
    display: none; /* Oculta scroll en Chrome/Safari */
}

/* Aseguramos que el track no se rompa */
.news-track {
    display: flex;
    gap: 20px;
    padding-bottom: 15px; /* Espacio para el scroll invisible */
}

/* La Tarjeta */
.news-card {
    background-color: #000000;
    width: 320px; /* Ancho fijo para las tarjetas */
    flex-shrink: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
	border-radius:10px;
}

.card-image { text-align:center; }

.card-image img {
    width: 96%;
    height: 200px;
    object-fit: cover;
	border-radius:10px;
	padding:3px;
}

.card-content {
    padding: 20px;
}

.card-date {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #cccccc;
    font-size: 0.8rem;
    display: block;
    margin-bottom: 10px;
}

.card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #ffffff;
    font-size: 1.1rem;
    margin: 0 0 10px 0;
	text-transform: uppercase;
}

/* Estilo del enlace en el título */
.card-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.card-title a:hover {
    color: #e04c0d; /* Cambia a naranja al pasar el mouse */
}


.card-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #ffffff;
    font-size: 0.7rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.card-link {
    color: #e04c0d; /* Naranja Primario */
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Responsivo */
@media (max-width: 992px) {
    .news-container {
        grid-template-columns: 1fr;
    }
    .news-main-title {
        font-size: 2.5rem;
    }
}


/* Controles del Carrusel */
.carousel-controls {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.control-btn {
    background-color: #000000;
    border: 2px solid #ffffff;
    color: #ffffff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.control-btn:hover {
    background-color: #ffffff;
    color: #fd4d00;
}

/* Aseguramos que el track no se rompa */
.news-track {
    display: flex;
    gap: 20px;
    padding-bottom: 15px; /* Espacio para el scroll invisible */
}

/* -------- BARRA BOLETOS -------------- */
.info-boletos {
    background-color: var(--negro);
    padding: 80px 0;
}

.split-container {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 45% 55%; 
    gap: 60px;
    align-items: center;
    padding: 0 20px;
}

/* --- COLUMNA IZQUIERDA --- */
.mini-subtitle {
    font-family: var(--font-body);
    color: var(--naranja-primario);
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.main-headline {
    font-family: var(--font-main);
    color: var(--blanco);
    font-size: 3.5rem;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 25px 0;
}

.description-text {
    font-family: var(--font-body);
    color: var(--blanco);
    line-height: 1.6;
    margin-bottom: 35px;
    font-size: 1.1rem;
}

/* Botón Izquierdo: Negro con borde naranja */
.btn-outline-orange {
    font-family: var(--font-body); 
    color: var(--naranja-primario);
    background-color: #000000;
    border: 2px solid var(--naranja-primario);
    padding: 12px 30px;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 15px;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-outline-orange:hover {
    background-color: var(--naranja-primario);
    color: #FFF; /* Efecto invertido */
}

/* --- COLUMNA DERECHA --- */
.col-boletos {
    text-align: center; /* Centra la imagen y el botón */
}

.promo-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 25px;
}

/* Botón Derecho: Naranja sólido */
.btn-solid-orange {
    font-family: var(--font-body);
    color: var(--blanco);
    background-color: var(--naranja-vibrante);
    padding: 15px 50px;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 15px;
    font-size: 1.2rem;
    display: inline-block;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.btn-solid-orange:hover {
    background-color: var(--naranja-primario);
    transform: scale(1.05);
}

/* --- RESPONSIVO --- */
@media (max-width: 992px) {
    .split-container {
        grid-template-columns: 1fr; /* Una columna en móvil */
        gap: 40px;
        text-align: center;
    }

    .main-headline {
        font-size: 2.5rem;
    }
    
    .btn-outline-orange, .btn-solid-orange {
        width: 80%; /* Botones más anchos en móvil */
    }
}

/* próximo juego */

.next-game-section {
    background-color: #fd4d00; /* Naranja base */
    background-image: url('../imagenes/bckg-proxGame.jpg'); /* Tu imagen de la pelota */
    background-size: cover;
    background-position: left center;
    padding: 60px 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.next-game-container {
    max-width: 1080px;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* Título a la izquierda */
.next-game-title-side {
    flex: 0 0 auto; /* No se encoge */
}

.main-headlineNG {
    font-family: 'BaseR', sans-serif;
    color: #ffffff;
    font-size: 4rem;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}

/* La tarjeta negra */
.game-details-card {
    background-color: #000000;
    border: 1px solid #e04c0d;
    border-radius: 8px;
    padding: 30px;
    display: grid;
    grid-template-columns: 140px 1fr 240px; /* Tres columnas claras */
    align-items: center;
    gap: 20px;
    flex-grow: 1; /* Ocupa el espacio restante */
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

/* Estilos internos de la tarjeta */
.game-date {
    border-right: 1px solid #333;
    text-align: center;
    padding-right: 20px;
    color: #fff;
}

.day-name { color: #e04c0d;  font-family: var(--font-body); font-weight: bold; font-size: 0.8rem; display: block; }
.day-number { font-family: 'BaseR', sans-serif; font-size: 3.5rem; display: block; line-height: 1; }
.month-year {  font-family: var(--font-body); font-size: 0.8rem; display: block; }

.game-matchup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.team { text-align: center; }
.team img { height: 70px; width: auto; }
.team-name { color: #fff; font-family: var(--font-body); font-size: 0.75rem; display: block; margin-top: 5px; }
.team-vaqueros { color: #e04c0d; }

.vs-badge {
    background-color: #333;
    color: #888;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    border: 1px solid #444;
}

.game-info {
    border-left: 1px solid #333;
    padding-left: 20px;
    color: #fff;
    font-size: 0.9rem;
}

.info-row { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.icon { color: #e04c0d; }

.btn-ver-detalles {
    border: 1px solid #e04c0d;
    color: #e04c0d;
    padding: 8px 15px;
    text-decoration: none;
    font-size: 0.8rem;
    display: inline-block;
    margin-top: 10px;
    transition: 0.3s;
}

.btn-ver-detalles:hover { background: #e04c0d; color: #000; }

/* --- SOLUCIÓN PARA MÓVIL --- */
@media (max-width: 992px) {
    .next-game-container {
        flex-direction: column; /* Apila Título arriba y Tarjeta abajo */
        text-align: center;
    }

    .game-details-card {
        grid-template-columns: 1fr; /* Una sola columna dentro de la tarjeta */
        width: 100%;
    }

    .game-date, .game-info {
        border: none;
        padding: 0;
    }

    .main-headline {
        font-size: 3rem;
        margin-bottom: 20px;
    }
}

/* Merch banner */ 

.merchCnt {
	background-color: var(--negro);
    /* Aplicamos las manchas naranjas a los costados */
    background-image: url('../imagenes/back-merch-Izq.jpg'), url('../imagenes/back-merch-Der.jpg');
    background-position: left center, right center;
    background-repeat:no-repeat;
    background-size: auto; /* Ajusta según el diseño de tus manchas */
	/* background-size: auto 80%; */ /* Ajusta según el diseño de tus manchas */
}

.merchImg { width:100%; max-width:1042px; margin:auto; }

/* ----------- jugadores ----------------- */
.team-preview-section {
    background-color: #000000;
    padding: 80px 0;
}

.container-1080 {
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px; /* Margen de seguridad para móviles */
}

/* Título */
.team-title {
    font-family: 'BaseR', sans-serif;
    font-size: 3rem;
    margin-bottom: 50px;
    text-transform: uppercase;
}

.white-text { color: #ffffff; }
.orange-text { color: #fd4d00; }

/* Grilla de Jugadores */
.players-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px; /* Separación entre imágenes */
    padding: 0 80px; /* Separación del conjunto respecto a los 1080px */
    margin-bottom: 40px;
}

.player-item {
    display: block;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.player-item img {
    width: 100%;
    height: auto;
    display: block;
    /* Filtro opcional para que se vean más como siluetas */
    filter: brightness(0.7);
    transition: filter 0.3s ease;
}

/* Efecto al pasar el mouse (ya que funcionarán como botones) */
.player-item:hover {
    transform: translateY(-10px);
}

.player-item:hover img {
    filter: brightness(1.1);
}

/* Enlace inferior */
.roster-link-wrapper {
    margin-top: 20px;
}

.view-roster-link {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #fd4d00;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 1.1rem;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.3s ease;
}

.view-roster-link:hover {
    border-bottom: 2px solid #fd4d00;
}

/* --- RESPONSIVO --- */
@media (max-width: 992px) {
    .players-grid {
        padding: 0 20px; /* Reducimos el margen lateral en tablets */
        grid-template-columns: repeat(2, 1fr); /* 2x2 en tablets */
    }
}

@media (max-width: 576px) {
    .players-grid {
        grid-template-columns: 1fr; /* 1 columna en móviles */
    }
    .team-title {
        font-size: 2rem;
    }
}

/*patrocinadores */

/* --- SECCIÓN PATROCINADORES --- */
.sponsors-section {
    background-color: #050505;
    padding: 60px 0;
    border-top: 1px solid #111;
}

.sponsors-title {
    font-family: 'BaseR', sans-serif;
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 40px;
    color: #fff;
}

.sponsors-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; /* Espacio entre cuadros */
}

/* --- ESTILO PARA MÓVIL (Por defecto a color) --- */
.sponsor-card {
    background-color: #f8f8f8; /* Gris casi blanco para suavizar el contraste */
    width: calc(33.33% - 15px); /* 3 columnas exactas */
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 6px;
    filter: grayscale(0); /* Siempre a color en móvil */
    transition: all 0.3s ease;
}

.sponsor-card img {
    max-width: 90%;
    max-height: 80%;
    object-fit: contain;
}

/* --- AJUSTE PARA COMPUTADORAS (Desktop) --- */
@media (min-width: 992px) {
    .sponsor-card {
        width: calc(20% - 15px); /* 5 columnas en desktop */
        height: 110px;
        filter: grayscale(1) opacity(0.5); /* Efecto gris inicial */
        cursor: pointer;
    }

    /* Solo en desktop activamos el hover */
    .sponsor-card:hover {
        filter: grayscale(0) opacity(1);
        transform: translateY(-5px);
        background-color: #ffffff;
        box-shadow: 0 8px 15px rgba(253, 77, 0, 0.2);
        border: 1px solid #fd4d00;
    }
}

/* Ajuste para pantallas muy pequeñas (celulares verticales) */
@media (max-width: 480px) {
    .sponsor-card {
        width: calc(50% - 15px); /* 2 columnas para que no se vean diminutos */
        height: 70px;
    }
    
    .sponsors-title {
        font-size: 1.8rem;
    }
}