/* ═══════════════════════════════════════════════════════════
   HERO — App para clientes
   ═══════════════════════════════════════════════════════════ */

.hero--appclientes {
  gap: 72px;
}

.hero__gym-photos--app {
  align-items: flex-start;
  gap: 0;
  max-width: 1200px;
}

/* iPhone: sin border-radius, aspecto preservado — igual que iPad en paneldecontrol */
.hero__gym-photos--app .hero__gym-photo--left {
  flex: 0 0 auto;
  height: 400px;
  width: auto;
  border-radius: 0;
  overflow: visible;
  margin-right: -32px;
  transform: rotate(-5deg);
  z-index: 1;
}

.hero__gym-photos--app .hero__gym-photo--left img {
  width: auto;
  height: 100%;
  object-fit: unset;
}

/* Foto derecha: 500×360 con border-radius heredado */
.hero__gym-photos--app .hero__gym-photo--right {
  flex: 0 0 500px;
  height: 360px;
  transform: rotate(5deg);
  z-index: 2;
}

.hero--appclientes .hero__mobile-cta { display: none; }

@media (max-width: 1024px) {
  .hero__gym-photos--app .hero__gym-photo--left  { height: 280px; }
  .hero__gym-photos--app .hero__gym-photo--right { flex: 0 0 380px; height: 260px; }
}

@media (max-width: 768px) {
  .hero__gym-photos--app .hero__gym-photo--left  { height: 200px; }
  .hero__gym-photos--app .hero__gym-photo--right { flex: 0 0 280px; height: 190px; }
}


/* ═══════════════════════════════════════════════════════════
   COMPARISON — Variante App mytrainingspal vs App con tu marca
   ═══════════════════════════════════════════════════════════ */

.comparison--app {
  overflow: visible;
}

.comparison--app .comparison__body {
  background: transparent;
  border-radius: 0;
}

.comparison--app .comparison__title {
  color: var(--color-white);
}

/* Sin el max-width de 800px que sí aplica en gimnasios/entrenadores */
.comparison--app .comparison__header {
  max-width: none;
  margin-inline: 0;
}

.comparison--app .comparison__cols {
  max-width: 900px;
  gap: var(--space-64);
  overflow: visible;
}

.comparison--app .comparison__col {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-24);
}

.comparison--app .comparison__col li {
  color: rgba(214, 241, 245, 0.85);
}

.comparison--app .comparison__col--no li img { opacity: 0.6; }
.comparison--app .comparison__col--yes li img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.comparison--app .comparison__col--no  { transform: rotate(-5deg); }
.comparison--app .comparison__col--yes { transform: rotate(5deg); }

/* Descargas dentro de la tarjeta, con su misma inclinación */
.comparison--app .comparison__store {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding-top: clamp(var(--space-32), 4vw, var(--space-48));
}

.comparison--app .app-showcase__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-16);
  align-items: center;
}

.comparison--app .app-showcase__badges a {
  flex: 0 0 auto;
}

.comparison--app .app-showcase__store-note {
  position: static;
  width: min(220px, 100%);
  height: auto;
}

@media (max-width: 768px) {
  .comparison--app .comparison__col--no,
  .comparison--app .comparison__col--yes {
    transform: none;
  }

  .comparison--app .comparison__cols {
    gap: var(--space-32);
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * clamp(var(--space-24), 4vw, var(--space-40)));
    padding-inline: var(--space-32);
    max-width: unset;
  }
  .comparison--app .comparison__cols::-webkit-scrollbar { display: none; }

  .comparison--app .comparison__col {
    flex: 0 0 75vw;
    scroll-snap-align: start;
  }
}


/* ═══════════════════════════════════════════════════════════
   BOTTOM CTA — "Una app que cuida a tus clientes"
   ═══════════════════════════════════════════════════════════ */

.app-bottom-cta {
  padding-bottom: var(--section-gap);
}

.app-bottom-cta__inner {
  width: min(1200px, 100% - var(--space-64));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--space-32), 4vw, var(--space-48));
  text-align: center;
}

/* Iconos de cards en teal */
.app-bottom-cta .obj-card__icon {
  filter: var(--filter-tint-primary);
}

.app-bottom-cta__title {
  font-size: clamp(28px, 3vw, var(--text-h2));
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: clamp(-1px, -0.14vw, -2px);
  color: var(--color-white);
  max-width: 640px;
}