/* =====================================================================
   AJUSTES DE ORDEN Y CONSISTENCIA (2026-09-19)
   Se carga al final de cada página, después de su <style> propio.
   Para volver al diseño anterior basta con quitar el <link> a este archivo.
   ===================================================================== */

/* 1. Hero de Inicio alineado con el logo y con el resto de las páginas.
      En pantallas menores a 1280 px el titular quedaba pegado al borde. */
.hero__in{box-sizing:border-box;width:100%;padding-inline:var(--pad)}

/* 2. Grillas sin columnas vacías.
      Tras ocultar Canto y Piano quedaron grillas de 4 columnas con 3 tarjetas
      (y de 5 con 4), con un hueco gris al final. Ahora el número de columnas
      se ajusta a la cantidad real de tarjetas. */
@media (min-width:1001px){
  .grid:has(>:nth-child(3):last-child),
  .teach:has(>:nth-child(3):last-child),
  .vals:has(>:nth-child(3):last-child),
  .levels:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}

  .steps:has(>:nth-child(4):last-child),
  .cal:has(>:nth-child(4):last-child),
  .g4:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}

  /* Planes a todo el ancho (antes ocupaban solo dos tercios de la página). */
  .plans{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* En pantallas grandes, los cuatro planes lado a lado para compararlos. */
@media (min-width:1200px){
  .plans{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Tablet: 3 tarjetas en una fila y 4 pasos en dos filas de dos,
   en vez de dejar una tarjeta sola en la última fila. */
@media (min-width:641px) and (max-width:1000px){
  .grid:has(>:nth-child(3):last-child),
  .teach:has(>:nth-child(3):last-child),
  .vals:has(>:nth-child(3):last-child),
  .levels:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}

  .steps:has(>:nth-child(4):last-child),
  .cal:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 3. Tarjetas de planes del mismo alto con el botón siempre abajo. */
.plan{display:flex;flex-direction:column}
.plan__b{flex:1}

/* 4. Las celdas vacías de la última fila (por ejemplo en Recursos) ya no
      aparecen como bloques grises: la línea entre tarjetas la dibuja cada
      tarjeta, no el fondo de la grilla. */
.grid{background:transparent;border:0;padding:1px}
.grid>*{box-shadow:0 0 0 1px var(--linea)}