@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");

/* 1. Contenedor exterior */
.seccion-contenedor-centrado {
  width: 100%;
  padding: 40px 20px;
  background-color: #050a14; /* Color de fondo general de la página */
  display: flex;
  justify-content: center; /* Esto centra la cajita en la pantalla */
  font-family: "Montserrat", sans-serif;
}

/* 2. La Cajita Central (Limita el ancho) */
.caja-central-disciplina {
  width: 100%;
  max-width: 1500px; /* Ancho máximo para mantener todo compacto como en la imagen */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  /* Opcional: puedes darle un color de fondo ligeramente distinto si quieres que parezca una tarjeta */
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 24px;
  padding: 20px;
}

/* 3. Imagen superior dentro de la caja */
.disciplina-hero {
  position: relative;
  width: 100%;
  height: 350px;
  /* REEMPLAZA CON TU RUTA DE IMAGEN */
  background-image: url("../ImagenesFondos/FondoDisciplina.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  margin-bottom: 35px;
}

.capa-oscura {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80%;
  background: linear-gradient(
    to top,
    rgba(5, 10, 20, 0.95) 0%,
    rgba(5, 10, 20, 0) 100%
  );
  z-index: 1;
}

.disciplina-titulo {
  position: relative;
  z-index: 2;
  font-size: 50px;
  font-weight: 700;
  text-align: left;
  margin: 0;
  line-height: 1.2;
  color: #ffffff;
}

/* 4. Contenedor inferior (centra los elementos debajo de la imagen) */
.disciplina-contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 5. Cuadrícula de iconos si queremos modificar*/
.disciplina-grid {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-bottom: 40px;
  width: 100%;
  flex-wrap: wrap;
}

.disciplina-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
  text-align: center;
}

.icono-caja {
  width: 64px;
  height: 64px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  color: #4db8ff;
  transition: background-color 0.3s ease;
}

.icono-caja:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(
    77,
    184,
    255,
    0.5
  ); /* Agrega un sutil brillo azul al borde en hover */
  transform: translateY(
    -3px
  ); /* Hace que la cajita "flote" un poco al pasar el mouse */
}

.icono-caja svg {
  width: 28px;
  height: 28px;
}

.disciplina-item p {
  font-size: 16px;
  color: #a0aec0;
  margin: 0;
  line-height: 1.3;
}

.reproductor-banner p {
  margin: 0;
  font-size: 15px;
  text-align: left;
  color: #e2e8f0;
}

/* 7. Botones principales */
.btn-primario {
  background-color: #1a73e8;
  color: #ffffff;
  border: none;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 25px;
  transition:
    background-color 0.2s ease,
    transform 0.1s ease;
}

.btn-primario:hover {
  background-color: #1557b0;
  transform: scale(1.02);
}

.btn-secundario {
  background: transparent;
  color: #94a3b8;
  border: none;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.btn-secundario:hover {
  color: #ffffff;
}

/* Reglas para pantallas de celular (hasta 768px de ancho) */
@media (max-width: 768px) {
    .disciplina-hero {
        height: 300px; /* Reduce la altura para no recortar tanta imagen a los lados */
        padding: 10px; /* Reduce un poco el padding interno */
    }

    /* Asumiendo que tu texto es un <h1> o <h2>. Cambia la etiqueta si usas otra clase */
    .disciplina-hero h1 { 
        font-size: 24px; /* Achica el texto para que no desborde la pantalla */
        line-height: 1.2;
    }
}

/* --- RESPONSIVE DESIGN (MÓVILES) CAJITAS --- */
@media (max-width: 768px) {
    .disciplina-grid { /* Reemplaza esto con tu clase real */
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Crea 2 columnas del mismo tamaño */
        gap: 15px; /* Espacio entre las cajitas */
        justify-items: center; /* Centra las cajas en su columna */
        margin-top: 20px; /* Separación de la imagen de arriba */
        padding: 0 10px;
    }

    .disciplina-item { /* Reemplaza con la clase de cada cajita individual */
        width: 100%; /* Para que ocupen bien el espacio de su columna */
        text-align: center;
    }
}