body {
  margin: 0;
  font-family: "Conneqt", sans-serif;
  background-color: #f1f5f9;
  color: #2b2d42;
}

/* Alturas fijas */
.with-fixed-header { padding-top: 70px; }
.with-fixed-footer { padding-bottom: 80px; }

/* Header siempre fijo */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #2b2d42;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo en header */
.site-header .container img {
  max-height: 50px;
}

/* Tarjetas base */
.service-card {
  font-family: 'Raleway', sans-serif;
  border: none;
  border-radius: 1rem;
  background-color: #fff;
  transition: transform .3s ease, box-shadow .3s ease, background-color .2s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  background-color: #8d99ae; 
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
  color:#fff;
}

.service-card .card-body {
  padding: 1.5rem;
}

.service-card .icon,
.service-card .icon-large {
  color: #2b2d42;
}

.service-card .title {
  margin-top: .75rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: #2b2d42;
}

.service-card img {
  max-width: 80%;
  height: auto;
  margin: 0 auto;
  display: block;
  padding: .5rem 0;
}

/* Menús principales (full-cards) */
.full-card {
  background-color: #2b2d42;
  color: #fff;
  border-radius: 1rem;
  transition: transform .3s ease, box-shadow .3s ease, background-color .2s ease;
}

.full-card:hover {
  background-color: #edf2f4;
  color: #2b2d42;
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

/* Ajuste de altura para full-card */
.full-card .card-body {
  padding: 3rem 1.5rem; /* Aumenta el padding vertical para hacer la tarjeta más alta */
}

/* Footer siempre fijo */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #2b2d42;
  color: #fff;
  padding: .75rem 0;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.2);
  text-align: center;
  z-index: 2000;
}

/* Estilos para el acordeón */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-toggle {
  cursor: pointer; /* Indica que la tarjeta es clickable */
}

/* 1) Icono y título en blanco al hacer hover */
.service-card:hover .icon,
.service-card:hover .icon-large,
.service-card:hover .title {
  color: #fff;
}

.accordion-content.active {
  /* Altura máxima suficiente y permitir overflow */
  max-height: 1000px; /* o el valor que necesites */
  overflow: visible;
}