/* Extensiones propias de la página central (index.html).
   Se carga DESPUÉS de global.css, que es una copia fiel de la hoja del portal
   de Presupuesto y no se edita acá: solo va lo que esta página necesita y
   global.css no trae. Cada bloque dice por qué existe; si sumás uno, anotalo
   también en docs/estetica.md (sección "Extensiones de esta página"). */

html {
  scroll-behavior: smooth; /* global.css ya lo apaga con prefers-reduced-motion */
}

/* El hero va a sangre. En el celular global.css vuelve a poner padding en
   .app-main (media ≤ 640 px) y, al venir después, le gana a .app-main--flush:
   el hero quedaba flotando con márgenes. Con dos clases gana siempre. */
.app-main.app-main--flush {
  padding: 0;
}

/* Si la foto del hero no carga, que quede grafito y no gris transparente:
   el "background" de global.css deja el color de fondo en transparent. */
.municipal-hero {
  background-color: var(--moron-charcoal);
}

/* Numeración automática de las tarjetas (01, 02, 03…): al sumar, sacar o
   reordenar una tarjeta no hay que renumerar nada a mano. */
.service-grid {
  counter-reset: aplicacion;
}
.service-card {
  counter-increment: aplicacion;
}
.service-number::before {
  content: counter(aplicacion, decimal-leading-zero);
}

/* Tarjetas del mismo alto por fila y "Acceder" siempre abajo, aunque el título
   ocupe una o dos líneas. Las tarjetas ya no llevan descripción (criterio de la
   Subsecretaría, ver docs/estetica.md sección 8): el que empuja "Acceder" hacia
   abajo es su propio margen automático, y el título conserva el aire de 23 px
   que antes le daba el párrafo. */
.service-card {
  display: flex;
  flex-direction: column;
}
.service-card h3 {
  margin-bottom: 23px;
}
.service-card .service-cta {
  margin-top: auto;
}

/* Con 9 tarjetas en 3 columnas, por debajo de 1100 px los títulos (34 px,
   Neo Sans Ultra) quedan en 3-4 líneas: pasan a 2 columnas. Mismo corte que
   usa global.css para .service-grid.cuatro. En el celular sigue 1 columna. */
@media (max-width: 1100px) {
  .service-grid:not(.cuatro) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .service-grid:not(.cuatro) {
    grid-template-columns: 1fr;
  }
}