/* ==========================================
   1) Estilos generales (válidos para todo)
   ========================================== */
body {
  margin: 0 auto;
  max-width: 1500px;
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  user-select: none;
}

/* Encabezado morado con borde superior redondeado */
.titulo-contenedor {
  background-color: #62489A; /* Morado */
  text-align: center;
  padding: 9px 0;
  border-radius: 20px 20px 0 0;
}
.titulo {
  color: #FFFFFF;
  font-size: 24px;
  font-weight: bold;
  margin: 0;
  text-transform: uppercase;
}

/* Etiqueta extra para subtítulo, si hace falta */
.subtitulo {
  font-size: 0.9em;
  font-weight: normal;
  display: block;
  margin-top: 2px;
}

/* ==========================================
   2) Versión ESCRITORIO: grid-container
   ========================================== */
/* La cuadrícula se ve en pantallas grandes (por defecto) */
.grid-container {
  display: grid;
  /* 1 fila de encabezado + 4 filas INICIAL + 9 filas PRIMARIA + 3 filas SECUNDARIA */
  grid-template-rows:
    60px /* encabezados */
    repeat(4, auto)  /* filas 2..5: INICIAL */
    repeat(8, auto)  /* filas 6..13: PRIMARIA */
    repeat(4, auto); /* filas 14..16: SECUNDARIA */

  grid-template-columns: 15% 25% 40% 20%;
  gap: 10px; /* espacio entre celdas */
  padding: 20px;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Encabezados de la tabla en fila 1 (NIVEL, NOMBRE, DETALLE, PRECIO) */
.header {
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  background-color: #fff;
  color: #231F20;
  font-size: 20px;
  padding: 10px;
}

/* Columnas base en escritorio */
.nivel {
  text-align: center;
}
.nombre {
  /* sin estilos base extras */
}
.detalle {
  vertical-align: top;
}
.precio {
  text-align: center;
}

/* ========== INICIAL (Escritorio) ========== */
.nivel.inicial {
  background-color: #d962a3;
  color: #fff;
  font-weight: bold;
  padding: 10px;
  border-radius: 20px 0 0 20px;
  display: flex; /* Para centrar vertical */
  align-items: center;
  justify-content: center;
}
.nombre.inicial {
  background-color: #EDACCA;
  color: #231F20;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  border: 6px solid #FFFFFF; /* Borde grueso blanco */
  text-transform: uppercase;
  display: flex; /* Para centrar vertical */
  align-items: center;
  justify-content: center;
}
.left-align {
  text-align: left !important;
}
.detalle.inicial div:nth-child(odd) {
  background-color: #B0C9E7;
  color: #231F20;
  padding: 5px;
  border: 3px solid #FFFFFF;
}
.detalle.inicial div:nth-child(even) {
  background-color: #FFFFFF;
  color: #231F20;
  padding: 5px;
  border: 4px solid #FFFFFF;
}
.precio.inicial {
  background-color: #BAD532; /* Verde lima */
  color: #231F20;
  font-weight: bold;
  padding: 10px;
  border: 6px solid #FFFFFF;
  font-size: 16px;
  border-radius: 0 20px 20px 0;
  display: flex; /* Para centrar vertical */
  align-items: center;
  justify-content: center;
}

/* ========== PRIMARIA (Escritorio) ========== */
.nivel.primaria {
  background-color: #378FCA; /* Azul oscuro */
  color: #fff;
  font-weight: bold;
  padding: 10px;
  border-radius: 20px 0 0 20px;
  display: flex; /* Para centrar vertical */
  align-items: center;
  justify-content: center;
}
.nombre.primaria {
  background-color: #89B2DC; /* Azul claro */
  color: #231F20;
  font-weight: bold;
  text-align: left;
  padding: 10px;
  border: 3px solid #FFFFFF;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 5px;
  margin-bottom: 5px;
}
.detalle.primaria div:nth-child(odd) {
  background-color: #B0C9E7;
  color: #231F20;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
}
.detalle.primaria div:nth-child(even) {
  background-color: #B0C9E7;
  color: #231F20;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
}
.detalle.primaria div:last-child {
  margin-bottom: 0;
}
.precio.primaria {
  background-color: #BAD532;
  color: #231F20;
  font-weight: bold;
  padding: 10px;
  border: 3px solid #FFFFFF;
  font-size: 16px;
  border-radius: 0 20px 20px 0;
  display: flex; /* Para centrar vertical */
  align-items: center;
  justify-content: center;
}

/* ========== SECUNDARIA (Escritorio) ========== */
.nivel.secundaria {
  background-color: #F19045; /* Naranja */
  color: #fff;
  font-weight: bold;
  padding: 10px;
  border-radius: 20px 0 0 20px;
  display: flex; /* Para centrar vertical */
  align-items: center;
  justify-content: center;
}
.nombre.secundaria {
  background-color: #F7CBA9; /* Naranja claro */
  color: #231F20;
  font-weight: bold;
  text-align: left;
  padding: 10px;
  border: 3px solid #FFFFFF;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 5px;
  margin-bottom: 5px;
}
.detalle.secundaria div:nth-child(odd) {
  background-color: #B0C9E7;
  color: #231F20;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
}
.detalle.secundaria div:nth-child(even) {
  background-color: #B0C9E7;
  color: #231F20;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
}
.detalle.secundaria div:last-child {
  margin-bottom: 0;
}
.precio.secundaria {
  background-color: #BAD532;
  color: #231F20;
  font-weight: bold;
  padding: 10px;
  border: 3px solid #FFFFFF;
  font-size: 16px;
  border-radius: 0 20px 20px 0;
  display: flex; /* Para centrar vertical */
  align-items: center;
  justify-content: center;
}

.footer-logos {
  display: flex;
  justify-content: center;   /* Centra horizontalmente */
  align-items: center;       /* Alinea verticalmente */
  gap: 50px;                 /* Separa los logos entre sí */
  margin-top: 30px;
  padding: 20px 0;
  flex-wrap: wrap;           /* Permite que se bajen de línea si no cabe en la misma */
}

.footer-logos img {
  max-height: 60px;          /* Controla el tamaño máximo */
  display: block;            /* Evita problemas de inline spacing */
}

/* ==========================================
   3) Versión MÓVIL (Cards)
   ========================================== */
/* 
   - La idea es ocultar .mobile-container en escritorio 
   - y mostrarlo solo en pantallas <= 768px 
   - simultáneamente ocultamos la .grid-container
*/

/* Ocultamos .mobile-container en escritorio */
.mobile-container {
  display: none; 
  margin-top: 20px;
}

/* Cada “fila” se vuelve un “card” en móvil */
.card {
  background-color: #fff;
  margin-bottom: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 10px;
}
.card .nivel,
.card .nombre,
.card .detalle,
.card .precio {
  margin-bottom: 10px;
}

/* INICIAL (Móvil) */
.card .nivel.inicial {
  background-color: #d962a3;
  color: #fff;
  font-weight: bold;
  padding: 8px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 10px;
}
.card .nombre.inicial {
  background-color: #EDACCA;
  color: #231F20;
  font-weight: bold;
  padding: 8px;
  border: 3px solid #fff;
  text-transform: uppercase;
  text-align: center;
}
.card .detalle.inicial div:nth-child(odd) {
  background-color: #B0C9E7;
  color: #231F20;
  padding: 5px;
  border: 3px solid #fff;
  margin-bottom: 3px;
}
.card .detalle.inicial div:nth-child(even) {
  background-color: #fff;
  color: #231F20;
  padding: 5px;
  border: 4px solid #fff;
  margin-bottom: 3px;
}
.card .precio.inicial {
  background-color: #BAD532;
  color: #231F20;
  font-weight: bold;
  padding: 8px;
  border: 3px solid #fff;
  font-size: 16px;
  border-radius: 8px;
  text-align: center;
}

/* PRIMARIA (Móvil) */
.card .nivel.primaria {
  background-color: #378FCA;
  color: #fff;
  font-weight: bold;
  padding: 8px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 10px;
}
.card .nombre.primaria {
  background-color: #89B2DC;
  color: #231F20;
  font-weight: bold;
  padding: 8px;
  border: 3px solid #fff;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 5px;
  margin-bottom: 5px;
  text-align: left;
}
.card .detalle.primaria div:nth-child(odd) {
  background-color: #B0C9E7;
  color: #231F20;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 5px;
}
.card .detalle.primaria div:nth-child(even) {
  background-color: #fff;
  color: #231F20;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 5px;
}
.card .detalle.primaria div:last-child {
  margin-bottom: 0;
}
.card .precio.primaria {
  background-color: #BAD532;
  color: #231F20;
  font-weight: bold;
  padding: 8px;
  border: 3px solid #fff;
  font-size: 16px;
  border-radius: 5px;
  text-align: center;
}

/* SECUNDARIA (Móvil) */
.card .nivel.secundaria {
  background-color: #F19045;
  color: #fff;
  font-weight: bold;
  padding: 8px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 10px;
}
.card .nombre.secundaria {
  background-color: #F7CBA9;
  color: #231F20;
  font-weight: bold;
  padding: 8px;
  border: 3px solid #fff;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 5px;
  margin-bottom: 5px;
  text-align: left;
}
.card .detalle.secundaria div:nth-child(odd) {
  background-color: #B0C9E7;
  color: #231F20;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 5px;
}
.card .detalle.secundaria div:nth-child(even) {
  background-color: #fff;
  color: #231F20;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 5px;
}
.card .detalle.secundaria div:last-child {
  margin-bottom: 0;
}
.card .precio.secundaria {
  background-color: #BAD532;
  color: #231F20;
  font-weight: bold;
  padding: 8px;
  border: 3px solid #fff;
  font-size: 16px;
  border-radius: 5px;
  text-align: center;
}


/* ==========================================
   4) Media Query final para móviles 
   Mostrar .mobile-container y ocultar .grid-container 
   en <= 768px
========================================== */
@media (max-width: 768px) {

  /* Ocultamos la versión de escritorio */
  .grid-container {
    display: none !important;
  }

  /* Mostramos la versión móvil */
  .mobile-container {
    display: block !important;
  }

  @media (max-width: 768px) {
    .footer-logos {
      flex-direction: column;  /* Apila los logos uno debajo del otro */
      gap: 20px;               /* Menor espacio entre ellos en pantallas pequeñas */
    }
  }

}