/* =========================================================
   02_HERO_BOTONES — EST1 (alineación correcta y centrado)
   - Aplana .col-* para que los <a> se alineen en una sola fila
   - Controla separación con gap
   ========================================================= */

:root{
  --est1-primary: #871515;
  --est1-primary-hover: #B51C1C;

  --est1-gap: 34px;      /* separación entre botones (8–18 recomendado) */
  --est1-btn: 110px;     /* tamaño del botón */
  --est1-icon: 44px;     /* tamaño del icono */
}

/* 1) El contenedor real que vimos en tu captura */
.est1-hero .row.g-2.g-md-3.justify-content-center{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;   /* CENTRAR el grupo */
  align-items: flex-start !important;
  gap: var(--est1-gap) !important;

  margin: 0 !important;                 /* evita empujes laterales */
}

/* 2) “Aplanar” columnas: hace que los <a> sean flex-items directos del row */
.est1-hero .row.g-2.g-md-3.justify-content-center > [class*="col-"]{
  display: contents !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3) Botón/tarjeta (tu clase real) */
.est1-hero a.est1-hero-btn{
  width: var(--est1-btn) !important;
  height: var(--est1-btn) !important;

  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 8px !important;
  margin: 0 !important;

  background: var(--est1-primary) !important;
  border: 1px solid var(--est1-primary) !important;
  border-radius: 0 !important;

  color: #fff !important;
  text-decoration: none !important;

  font-weight: 300 !important;
  font-size: 0.8rem !important;
  line-height: 1.1 !important;
  text-align: center !important;

  box-shadow: 0 6px 16px rgba(0,0,0,.18) !important;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease !important;
}

/* Quita el w-100 (en tu captura aparece) */
.est1-hero a.est1-hero-btn.w-100{
  width: var(--est1-btn) !important;
}

/* 4) Hover */
.est1-hero a.est1-hero-btn:hover,
.est1-hero a.est1-hero-btn:focus{
  background: var(--est1-primary-hover) !important;
  border-color: var(--est1-primary-hover) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

/* 5) Icono: cubre <img> y también <svg> si lo hubiera */
.est1-hero a.est1-hero-btn img.est1-hero-btn-icon{
  width: var(--est1-icon) !important;
  height: var(--est1-icon) !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 0 8px 0 !important;
  filter: brightness(0) invert(1) !important; /* icono blanco */
}

/* Si en algún botón el icono no es <img> sino <svg> */
.est1-hero a.est1-hero-btn svg{
  width: var(--est1-icon) !important;
  height: var(--est1-icon) !important;
  margin: 0 0 8px 0 !important;
}

/* 6) Texto */
.est1-hero a.est1-hero-btn .est1-hero-btn-text{
  display: block