/* Configuración General con Fondo */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* --- NUEVO: Propiedades del Fondo --- */
    background-image: url('bolas.jpg'); /* Asegúrate de que el nombre coincida */
	background-size: cover; /* La imagen cubre toda la pantalla */
    background-position: center; /* Centrada */
    background-attachment: fixed; /* Efecto Parallax (la imagen no se mueve al hacer scroll) */
}

/* --- NUEVO: Efecto de Difuminado Global --- */
/* Usamos un pseudoelemento ::before para difuminar solo el fondo, no el contenido */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: inherit; /* Hereda la imagen del body */
    filter: blur(2px); /* Ajusta este valor para más o menos difuminado */
    transform: scale(1.1); /* Evita bordes blancos por el blur */
    z-index: -1; /* Se coloca detrás de todo el contenido */
}

/* Ajustes de contraste para Header y Footer */
header, footer {
    /* Fondo semitransparente para que se intuya la imagen detrás */
    background-color: rgba(44, 62, 80, 0.9); 
    color: white;
    text-align: center;
    padding: 1rem 0,25rem;
    position: relative; /* Para asegurar que esté sobre el blur */
}

footer {
    /* Reducimos el padding de 2rem a 1rem */
    padding: 0,25rem; 
    background-color: rgba(44, 62, 80, 0.9);
    color: white;
    text-align: center;
    margin-top: auto; /* Mantiene el footer al final, pero sin empujar */
}


/* Ajuste para el texto principal */
.intro-text {
    max-width: 400px;
    margin: 1rem auto;
    padding: 0,75rem;
    text-align: center;
    
    /* --- NUEVO: Tarjeta de texto legible --- */
    background-color: rgba(255, 255, 255, 0.85); /* Fondo blanco con transparencia */
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Sombra para dar profundidad */
    position: relative; /* Sobre el blur */
}

/* El Slider Sensible */
.slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* gap: 15px; */
	gap: 2%;
    padding: 0,5rem;
    scrollbar-width: none; /* Oculta scroll en Firefox */
}

.slide {
    /* En pantallas grandes, cada tarjeta ocupa el 48% del ancho */
    /* El 4% restante es para el espacio (gap) entre ellas */
    flex: 0 0 48%; 
    scroll-snap-align: start; /* Alinea al inicio para que encajen las dos */
    height: 700px;
    overflow-y: auto;
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 15px;
    box-sizing: border-box; /* Asegura que el padding no sume al ancho */
}


/* Estilo opcional para la barrita de scroll interna (más fina y elegante) */
.slide::-webkit-scrollbar {
    width: 6px;
}
.slide::-webkit-scrollbar-thumb {
    background-color: #bdc3c7;
    border-radius: 5px;
}

/* Aplicar scroll solo a la tarjeta con id="p1" */
#p1 {
    height:700px; 
    overflow-y: auto;
}

/* --- MEDIA QUERIES (La magia de la adaptabilidad) --- */


/* Para tablets y escritorio (pantallas mayores a 768px) */
@media (min-width: 768px) {
    .intro-text {
        font-size: 1.2rem; /* Texto un poco más grande en PC */
        max-width: 700px;
    }

    .slide {
        /* En pantallas grandes, mostramos más de una tarjeta a la vez */
		/* flex: 0 0 30%; */
        flex: 0 0 50%; 
    }
    
    header h1 {
        font-size: 2.5rem;
    }
}

/* Para pantallas muy pequeñas (móviles estrechos) */
@media (max-width: 480px) {
    header {
        padding: 1.5rem 0.5rem;
    }
    
    header h1 {
        font-size: 1.5rem; /* Ajustamos el título para que no se corte */
    }
}

/* Contenedor para controlar el tamaño del gráfico */
.tableau-wrapper {
    width: 100%;
    height: 690px; /* Ajusta la altura según necesites */
    overflow-y: auto; /* Permite scroll interno si el gráfico es grande */
    margin: 15px 0;
    border-radius: 8px;
    background: #f9f9f9;
}

/* Ajuste específico para que Tableau no bloquee el deslizamiento del slider en móviles */
.tableauPlaceholder {
    margin: 0 auto;
    max-width: 100%;
}

/* En pantallas más grandes podemos dar más altura al gráfico */
@media (min-width: 768px) {
    .tableau-wrapper {
        height: 680px;
    }
}

/* Pequeño ajuste en el contenedor del slider para que flote sobre el fondo */
.slider-container {
    position: relative;
    max-width: 1000px;
    /* Reducimos el margen vertical a 0.5rem */
    margin: 0.5rem auto; 
    padding: 0.5rem; /* Menos espacio alrededor de las flechas */
    z-index: 1;
}

.nav-btn {
    background-color: rgba(44, 62, 80, 0.7);
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.5rem;
    z-index: 10;
    transition: background 0.3s;
    /* Evitamos que se vean gigantes en móviles */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:hover {
    background-color: #FF7F50;
}

/* Ocultar botones en móviles muy pequeños si prefieres que solo usen el dedo */
@media (max-width: 480px) {
    .nav-btn {
        display: none; 
    }
}

h1, h2, h3, p {
    margin-top: 0;
    margin-bottom: 0.5rem; /* Espacio mínimo debajo de cada texto */
}

/* Estilo para el archivo SVG externo */
.mlb-icon-file {
    width: 40px;   /* Ajusta el ancho a tu gusto */
    height: 40px;  /* Ajusta el alto a tu gusto */
    flex-shrink: 0; /* Evita que se deforme */
    display: block;
}

/* Ajuste del enlace para que sigan alineados */
.mlb-link {
    display: inline-flex;
    align-items: center;
    gap: 12px; 
    text-decoration: none;
    color: #002D72;
    font-weight: bold;
    padding: 10px;
    transition: transform 0.2s;
}

.mlb-link:hover {
    transform: translateX(5px);
}