.quarto-title .title {
  text-align: center !important;
  font-size: 2.5rem !important;
}

.quarto-title .subtitle {
  text-align: center !important;
  font-size: 1.5rem;
}


.linktree {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.linktree .btn {
  display: flex !important;
  align-items: center !important; /* Centra el texto verticalmente */
  justify-content: center !important; /* Centra el texto horizontalmente */
  position: relative !important; /* Mantiene el círculo en su lugar */
  width: 650px;
  max-width: 90vw !important;
  height: 80px !important; /* Altura fija para que no se deforme */
  margin: 0.1em auto !important;
  padding: 0 70px !important; /* Quitamos padding vertical, dejamos lateral para el icono */  text-align: center !important;
  text-decoration: none !important;
  font-size: 1.3em !important;
  font-weight: 500 !important;
  border-radius: 50px !important;
  border: 2px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  transition: all 0.15s ease-in-out !important;
  word-wrap: break-word !important; /* Por si hay palabras muy largas en celular */
  line-height: 1.2 !important; /* Ajusta el espacio entre líneas del texto envuelto */
}

.linktree .btn.con-icono::before {
  content: "" !important;
  position: absolute !important;
  left: 10px !important; /* Un poquito más cerca del borde para dar espacio al texto */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 60px !important;
  height: 60px !important;
  background-color: white !important;
  border-radius: 50% !important;
    /* Ajuste de la Imagen */
  background-size: cover !important; /* Se ajusta sin cortarse */
  background-repeat: no-repeat !important;
  background-position: center !important; /* Centrado dentro del círculo */
  /* Padding interno para que el logo no toque el borde blanco */
  padding: 6px !important; 
  /* Nos aseguramos de que no se deforme */
  box-sizing: border-box !important; 
  flex-shrink: 0 !important;
}

/* CLASES ESPECÍFICAS PARA CADA TALLER */

/* TALLER RNI */
.rni, .icono-rni { background-color: #cc6600 !important; }
.icono-rni::before { background-image: url('../img/logo_taller_rni.webp') !important; }

/* TALLER ANOVA */
.anova, .icono-anova { background-color: #e03858 !important; }
.icono-anova::before { background-image: url('../img/logo_taller_glm.webp') !important; }

/* TALLER GLM */
.glm, .icono-glm { background-color: #27ae60 !important; }
.icono-glm::before { background-image: url('../img/logo_taller_glm.webp') !important; }

/* TALLER MLM */
.mlm, .icono-mlm { background-color: #8f50b4 !important; }
.icono-mlm::before { background-image: url('../img/logo_taller_mlm.webp') !important; }

.linktree .btn:hover {
  filter: brightness(0.9) !important;
  transition: all 0.15s ease-in-out !important;
}

/* CLASE ESPECÍFICAS PARA WEBINAR */

/* WEBINAR */
.icono-webi::before { background-image: url('../img/webi.webp') !important; }

/* 1. EL CONTENEDOR AZUL PRINCIPAL (Todo el botón) */
.linktree .btn-card {
  display: flex !important;
  flex-direction: column !important; /* Apila el bloque blanco y el texto */
  align-items: center !important; /* Centra horizontalmente todo el contenido */
  justify-content: center !important; /* Centra verticalmente todo el contenido */
  text-decoration: none !important;
  width: 650px;
  max-width: 90vw !important;
  margin: 0.2em auto 1.1em auto !important; 
  background-color: var(--bs-primary) !important;
  border: 2px solid #000000 !important;
  box-shadow: 6px 6px 0px #000000 !important;
  border-radius: 30px !important; /* Misma forma de píldora que los otros */
  padding: 15px 15px !important; 
  transition: all 0.15s ease-in-out !important;
  box-sizing: border-box !important;
}

/* 2. EL RECTÁNGULO BLANCO INTERNO (El contenedor de la imagen) */
.linktree .btn-card .card-body {
  background-color: white !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important; /* Ocupa el ancho disponible dentro del azul */
  height: 300px !important; /* Altura de la caja blanca */
  border-radius: 20px !important; /* Un poco menos redondeado que el exterior */
  padding: 0px !important; 
  margin-bottom: 15px !important; /* Margen inferior para separarlo del texto azul */
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 3. LA IMAGEN DENTRO DE LA CAJA BLANCA */
.linktree .btn-card .card-body img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Mantiene la proporción sin cortarse */
  object-position: center !important;
}

/* 4. EL CONTENEDOR DEL TEXTO (El pie) */
.linktree .btn-card .card-footer {
  text-align: center !important;
  width: 100% !important;
  background-color: transparent !important;
  border: none !important;
  padding: 10px !important;
}

/* 5. EL TEXTO AZUL */
.linktree .btn-card .card-footer span {
  color: #ffffff !important;
  font-size: 1.3em !important;
  font-weight: 500 !important;
  word-wrap: break-word !important; 
}

.linktree .btn-card:hover {
  filter: brightness(0.90) !important; 
  transition: all 0.1s ease-in-out !important;
}



/* --- AJUSTES PARA CELULARES (Pantallas menores a 600px) --- */
@media (max-width: 600px) {
  .linktree .btn {
    /* Achicamos la letra y el margen */
    font-size: 1em !important; 
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  .linktree .btn.con-icono {
    /* Achicamos la letra un poco (estaba en 1.1em) */
    font-size: 1em !important; 
    
    /* Reducimos un poco el padding lateral para ganar espacio de texto */
    padding-left: 70px !important;
    padding-right: 20px !important;
  }

  /* Ajustamos el tamaño del círculo para que sea proporcional a la letra chica */
  .linktree .btn.con-icono::before {
    width: 60px !important;
    height: 60px !important;
    left: 8px !important; /* Lo acercamos un toque más al borde */
  }
  
  .linktree .btn-card .card-body {
    /* Ajustamos la altura proporcionalmente al ancho de la pantalla */
    /* 45vw suele mantener una proporción similar a la de escritorio en mobile */
    height: 45vw !important; 
    margin-bottom: 10px !important;
  }

  .linktree .btn-card {
    padding: 10px !important; /* Un poco menos de padding interno para ganar espacio */
  }

  .linktree .btn-card .card-footer span {
    display: block !important;
    font-size: 1rem !important; /* Texto un poco más pequeño para que no ocupe tanto alto */
    padding-left: 25px !important;
    padding-right: 25px !important;
    text-align: center !important;
  }
  
}