/* ==========================================================================
   news.css
   --------------------------------------------------------------------------
   Sección de noticias de la home.

   Aquí SOLO vive el envoltorio de sección: fondo y espaciado. La tarjeta
   (.gt-news-card) y la rejilla (.gt-news-grid) están en components.css, porque
   se reutilizarán en el archivo de la categoría "Noticias" y no son propiedad
   de la home.

   Se carga DESPUÉS de services.css y ANTES de responsive.css.

   Mobile-first: los estilos base son los de móvil.
   ========================================================================== */


/* --------------------------------------------------------------------------
   .gt-news — envoltorio de la sección
   --------------------------------------------------------------------------
   FONDO GRIS CLARO. Encima van las pestañas de servicios y el bloque de lavado
   de cisternas, los dos en blanco: sin este cambio de fondo serían tres
   secciones blancas seguidas y la página perdería el ritmo.

   Además las tarjetas son blancas, así que sobre el gris se recortan solas y la
   sombra apenas tiene que trabajar.
   -------------------------------------------------------------------------- */

.gt-news {
  background-color: var(--color-bg);
  padding-block: 56px;
}


/* --------------------------------------------------------------------------
   .gt-news__actions — zona del botón "Ver todas"
   -------------------------------------------------------------------------- */

.gt-news__actions {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}


@media (min-width: 768px) {

  .gt-news { padding-block: 80px; }

  .gt-news__actions { margin-top: 40px; }

}

@media (min-width: 1024px) {

  .gt-news { padding-block: 64px; }

  .gt-news__actions { margin-top: 48px; }

}

@media (min-width: 1280px) {

  .gt-news { padding-block: 72px; }

}