/* ================================
   layout/prefooter.css
   Pre-footer (CTA + colaboradores)
   ================================ */

.prefooter {
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}

/* ================================
   CTA dentro del prefooter
   ================================ */

.prefooter__cta {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
}

.prefooter__ctaTitle {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-2xl);
  color: var(--color-heading);
}

.prefooter__ctaText {
  max-width: 640px;
  margin: 0 auto var(--space-6);
  color: var(--color-text-soft);
  line-height: var(--line-height-relaxed);
}

.prefooter__ctaActions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Links secundarios (teléfono / WhatsApp) */
.prefooter__ctaLink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-heading);
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-fast),
              background var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.prefooter__ctaLink:hover {
  background: var(--gray-100);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.prefooter__ctaLink--whatsapp {
  color: #188743;
  border-color: rgba(24, 135, 65, 0.22);
  background: rgba(24, 135, 65, 0.08);
}

.prefooter__ctaLink--whatsapp:hover {
  background: rgba(24, 135, 65, 0.14);
  color: #146c36;
}

/* ================================
   Colaboradores
   ================================ */

.prefooter__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

.prefooter__kicker {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-lg); /* antes xs */
 font-weight: 800;                 /* más contundente */
  letter-spacing: 0.1em;
  color: var(--color-heading);      /* deja de ser gris */
  text-transform: uppercase;
  text-align: center;
}


/* Grid de logos */
.prefooter__logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prefooter__logoItem {
  display: grid;
  place-items: center;
  padding: var(--space-3);
}

.prefooter__logo {
  max-height: 84px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.98;
  transition: transform var(--transition-fast);
}

@media (hover: hover) {
  .prefooter__logoItem:hover .prefooter__logo {
    transform: translateY(-1px);
  }
}

/* Excepción: logo blanco (JUDO) */
.prefooter__logoItem--dark {
  background: var(--neutral-900);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  box-shadow: var(--shadow-xs);
  max-width: 180px;
  margin-inline: auto;
}

.prefooter__logoItem--dark .prefooter__logo {
  opacity: 1;
}

/* ================================
   Responsive
   ================================ */

@media (max-width: 1024px) {
  .prefooter__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .prefooter__inner {
    padding: var(--space-8) var(--space-4);
  }

  .prefooter__logos {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .prefooter__logo {
    max-height: 56px;
  }
}
.prefooter__cta {
  background: linear-gradient(
    180deg,
    rgba(32, 184, 191, 0.18),
    rgba(32, 184, 191, 0.12)
  );
}
