/* Componentes reutilizables: botones, cards, nav, badges */

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.btn--small {
  padding: var(--space-2) var(--space-4);
}

.btn--lime {
  background-color: var(--color-lime);
  color: var(--text-on-lime);
}

.btn--navy {
  background-color: var(--color-navy);
  color: var(--text-on-dark);
}

/* Heading helpers (escala tipográfica del PDF: 12/16/18/30) */
.heading-xl {
  font-size: var(--fs-heading);
  font-weight: var(--fw-extrabold);
  line-height: 1.2;
}

.heading-md {
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: 1.5;
}

/* Nav */
.site-nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.site-nav__list a {
  color: var(--text-on-dark);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.site-nav__list a:hover {
  color: var(--color-lime);
}

/* Card lima (franja metodológica) */
.card-lime {
  background-color: var(--color-lime);
  color: var(--text-on-lime);
  border-radius: var(--radius-card);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lead);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 1 / 1;
  padding: var(--space-3);
}

/* Card de integración (Chattigo / Odoo / EasyPods) */
.card-integration {
  background-color: var(--color-navy);
  color: var(--text-on-dark);
  border: 1px solid var(--color-blue);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-5);
}

.card-integration--green {
  box-shadow: 0 0 48px -12px var(--color-lime);
}

.card-integration--blue {
  box-shadow: 0 0 48px -12px var(--color-blue);
}

.card-integration--warm {
  box-shadow: 0 0 48px -12px var(--color-glow-warm);
}

.card-integration__eyebrow {
  color: var(--color-lime);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lead);
  margin-bottom: var(--space-3);
}

.card-integration__text > * + * {
  margin-top: var(--space-3);
}

.card-integration__media img {
  border-radius: var(--radius-card);
}

/* Case card (casos de éxito) */
.case-card {
  display: grid;
  gap: var(--space-4);
}

.case-card__text > * + * {
  margin-top: var(--space-3);
}

.case-card__tagline {
  font-weight: var(--fw-semibold);
}

.case-card__media img {
  border-radius: var(--radius-card);
}

/* Carousel controls (visual únicamente — funcionalidad en Fase 4) */
.carousel__controls {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-bottom: var(--space-4);
}

.carousel__btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-lime);
  color: var(--text-on-lime);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel__btn:last-child {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-light);
}

/* Logo cloud item */
.logo-cloud__item {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-light);
  font-weight: var(--fw-medium);
  aspect-ratio: 3 / 2;
}

.logo-cloud__item img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}