/*
 * paginas-catalogo.css
 * Composición de Planes (filas tipo ticket) y Clases (semana por día).
 */

/* Planes */
.planes-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-3);
}

.planes-barra .titulo-seccion {
  margin: 0;
}

.planes {
  display: grid;
  gap: var(--espacio-3);
}

/* Cada plan es una fila: nombre y precio a la izquierda, beneficios y botón a la derecha */
.plan {
  display: grid;
  gap: var(--espacio-1) var(--espacio-3);
  padding: var(--espacio-3);
  border: 2px solid var(--negro);
  border-radius: var(--radio-m);
}

.plan-nombre {
  margin: 0;
  font-size: 1.75rem;
}

.plan-precio {
  display: flex;
  align-items: baseline;
  gap: var(--espacio-1);
  margin: 0;
}

.plan-monto {
  font-family: var(--fuente-titulos);
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
}

.plan-periodo {
  color: var(--gris-texto);
}

.plan-ahorro {
  margin: 0;
  font-weight: 700;
}

.plan-beneficios {
  margin: var(--espacio-1) 0 var(--espacio-2);
  padding-left: 1.2rem;
}

.plan-beneficios li {
  padding: 0.2rem 0;
}

.plan-beneficios li::marker {
  color: var(--naranja);
}

.plan-boton {
  justify-self: start;
}

@media (min-width: 768px) {
  .plan {
    grid-template-columns: 1fr 1.4fr;
    grid-template-areas:
      "nombre beneficios"
      "precio beneficios"
      "ahorro boton";
    align-items: start;
    padding: var(--espacio-4);
  }

  .plan-nombre { grid-area: nombre; }
  .plan-precio { grid-area: precio; }
  .plan-ahorro { grid-area: ahorro; }
  .plan-beneficios { grid-area: beneficios; margin: 0; }
  .plan-boton { grid-area: boton; }
}

.planes-comparativa {
  display: grid;
  gap: var(--espacio-4);
}

/* Sin esto la tabla ensancha la columna y desborda la página en móvil */
.planes-comparativa > * {
  min-width: 0;
}

@media (min-width: 1024px) {
  .planes-comparativa {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}

/* Clases: en móvil un día debajo de otro; en escritorio la semana completa */
.semana {
  display: grid;
  gap: var(--espacio-3);
}

.dia[hidden] {
  display: none;
}

.dia-titulo {
  padding-bottom: var(--espacio-1);
  border-bottom: 3px solid var(--negro);
  font-size: 1.4rem;
}

.dia-lista {
  display: grid;
  gap: var(--espacio-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.clase[hidden] {
  display: none;
}

.clase-boton {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  width: 100%;
  min-height: 64px;
  padding: var(--espacio-1) var(--espacio-2);
  border: 2px solid var(--gris-borde);
  border-radius: var(--radio-m);
  background: var(--blanco);
  font: inherit;
  text-align: left;
  color: var(--negro);
  cursor: pointer;
  transition: border-color var(--transicion), transform var(--transicion);
}

.clase-boton:hover {
  border-color: var(--naranja);
  transform: translateY(-2px);
}

.clase-hora {
  grid-row: span 2;
  font-family: var(--fuente-titulos);
  font-size: 1.2rem;
  font-weight: 600;
}

.clase-nombre {
  font-weight: 700;
}

.clase-disciplina {
  font-size: 0.925rem;
  color: var(--gris-texto);
}

@media (min-width: 768px) {
  .semana {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1440px) {
  .semana {
    grid-template-columns: repeat(6, 1fr);
  }

  .clase-boton {
    grid-template-columns: 1fr;
  }

  .clase-hora {
    grid-row: auto;
  }
}

.niveles-lista {
  display: grid;
  gap: var(--espacio-2);
  margin: var(--espacio-2) 0 0;
}

.niveles-lista dt {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 600;
}

.niveles-lista dd {
  margin: 0;
}

@media (min-width: 768px) {
  .niveles-lista {
    grid-template-columns: repeat(3, 1fr);
  }
}