/* El encuadre del fondo se fija con ADANER_BG_POSITION, no por CSS: una regla sobre
   #parallax-bg solo alcanzaría al cielo y desalinearía las demás capas. */
@media(max-width:900px){
  .recursos-img { order: 2; }
  .recursos-text { order: 1; }
}
#grupos .cards-grid .card { padding:2.5rem; }   /* 8px más de aire que las tarjetas del resto */
#grupos .two-col h3 { font-family:var(--title); font-size:1.325rem; font-weight:400; color:var(--green-dark); margin-bottom:.75rem; }
@media(min-width:901px) and (max-width:1440px){ #content .grupos-cards { margin-top:2.75rem !important; } }

/* Escritorio: la ultima seccion de esta pagina madre cierra con 240px. */
@media(min-width:1441px){
  #content > section:not(#hero):not(.vista-fondo):has(+ section.vista-fondo) { padding-bottom:120px !important; }
  #content > section:not(#hero):not(.vista-fondo):last-of-type { padding-bottom:240px !important; }
}

/* La foto cierra la rejilla como una fila mas; el boton, a 64px por debajo. */
#grupos .grupos-foto { grid-column:1 / -1; }
/* dos tarjetas por fila: con auto-fit la foto a todo el ancho creaba columnas de mas */
@media(min-width:901px){ #grupos .grupos-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
#grupos .grupos-cta { margin-top:64px; }

/* Movil: ajuste de los huecos alrededor de los tres iconos de seccion.

   Los tres son el ultimo elemento de su .two-col y arrastran los 40px de gap de la
   rejilla. Se corrigen con margenes negativos sobre el contenedor del icono; como el
   icono cierra el bloque, un margin-top negativo sube tambien todo lo que viene
   despues, de modo que el hueco posterior no cambia salvo que se toque aparte.

   Los contenedores de campamentos y talleres no tienen clase propia, asi que se
   seleccionan por la imagen que contienen con :has(), que ya se usa en esta plantilla. */
@media(max-width:600px){
  /* Recursos: el icono se pega a la lista anterior (40 -> 0). */
  .recursos-img{ margin-top:-40px; }

  /* La seccion siguiente gana 40px de aire por arriba. Los :not() replican la
     especificidad de la regla global de shared.css, que si no gana. */
  #content > section#grupos:not(#hero):not(.vista-fondo){ padding-top:78px; }

  /* Campamentos: 40px menos por delante y otros 40 por detras. */
  .two-col > div:has(> img[src*="icono-campamentos"]){ margin-top:-40px; margin-bottom:-40px; }

  /* Talleres: sube 40px y el hueco posterior se queda como estaba. */
  .two-col > div:has(> img[src*="icono-talleres"]){ margin-top:-40px; }
}