/* ══════════════════════════════════════════════════
   MTP — Entrenadores page styles
   Carga después de home.css y gimnasios.css.
   Solo define lo específico de esta página:
   hero variant, timesaver closing, panel showcase height.
════════════════════════════════════════════════════ */


/* ── Hero: variante entrenadores ─────────────────── */

.hero--entrenadores {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 73px);
  padding-top: 72px;
  padding-bottom: var(--section-gap);
  overflow: hidden;
}

.hero--entrenadores .hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  padding: 0 0 var(--space-48);
}

.hero__title--trainer {
  font-size: clamp(28px, 2.9vw, var(--text-h1));
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: clamp(-1px, -0.14vw, -2px);
  color: var(--color-white);
  margin-bottom: var(--space-20);
}

.hero--entrenadores .hero__subtitle {
  color: var(--color-accent);
  opacity: 0.9;
}

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

@media (max-width: 768px) {
  .hero--entrenadores { padding-top: 72px; }
  .hero--entrenadores .hero__content { padding: 0 var(--space-24) var(--space-40); }
}

@media (max-width: 480px) {
  .hero--entrenadores .hero__mobile-cta { display: inline-flex; margin-top: var(--space-32); }
}


/* Modificador: aspecto glassmorphism tipo pricing__badges, como cierre de la sección */
.timesaver__pillars--badges {
  max-width: 700px;
  margin: var(--space-32) auto 0;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-32);
  padding: var(--space-12) clamp(var(--space-20), 3vw, var(--space-32));
}

.timesaver__pillars--badges .timesaver__pillar-title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-caption);
  color: var(--color-accent);
  max-width: 280px;
  text-align: left;
}

.timesaver__pillars--badges .timesaver__pillar-title img {
  flex-shrink: 0;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .timesaver__pillars--badges {
    flex-direction: column;
    align-items: center;
    width: auto;
    margin-inline: var(--space-32);
    padding: var(--space-24);
  }
  .timesaver__pillars--badges .timesaver__pillar-title {
    max-width: none;
    width: 100%;
  }
}


/* ── Hero: las PNG de trainer tienen fondo opaco propio — sin overrides ── */


/* ── Comparison: 2 columnas (cards apiladas | iPhone) ── */

/* Override: cards apiladas (no encima, yes debajo) en columna izquierda */
.comparison--trainer .comparison__cols {
  grid-template-columns: 1fr;
  max-width: 100%;
}

.comparison__two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.comparison__mockup--iphone {
  display: flex;
  justify-content: center;
  align-items: center;
}

.comparison__mockup--iphone .platform__device--mobile {
  width: 100%;
}

/* iPhone: 550px, alineado al top junto con las cards */
.comparison__mockup--iphone .platform__screen {
  height: 550px;
}

.comparison__mockup--iphone .platform__mockup-img {
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: top;
}

/* Alinear columnas al top */
.comparison--trainer .comparison__two-col {
  align-items: flex-start;
}

/* Pillars con aspecto de checklist (icon-check + texto), bajo las cols */
.comparison__pillars--checklist {
  max-width: 900px;
  margin: var(--space-32) auto 0;
  flex-wrap: nowrap;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-32);
  padding: var(--space-12) clamp(var(--space-20), 3vw, var(--space-32));
}

.comparison__pillars--checklist .comparison__pillar-title {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  flex: 1 1 0;
  font-size: var(--text-caption);
  color: var(--color-white);
  opacity: 0.85;
  text-align: left;
  max-width: none;
}

.comparison__pillars--checklist .comparison__pillar-title img {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .comparison__pillars--checklist {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    margin-inline: var(--space-32);
    padding: var(--space-24);
  }
}

/* Badges + pencil note dentro del bloque blanco */
.comparison__store {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-16);
  padding-top: var(--space-32);
}

.comparison__store .app-showcase__store-note {
  position: absolute;
  right: calc(50% - 219px);
  bottom: -25px;
  width: clamp(140px, 15vw, 220px);
  height: auto;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 768px) {
  /* Apilado vertical: cards primero, iPhone debajo — sin scroll lateral interno */
  .comparison--trainer .comparison__two-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-32);
    max-width: 100%;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .comparison--trainer .comparison__panels {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .comparison--trainer .comparison__mockup--iphone {
    flex: 0 0 auto;
    width: 100%;
  }

  /* .platform__device--mobile (base) solo centra en el eje vertical
     (align-items) — le falta justify-content para centrar el screen
     en el eje horizontal cuando es más angosto que el device (caso
     del iPhone, con height:550px fijo y width:auto por aspect-ratio). */
  .comparison__mockup--iphone .platform__device--mobile {
    justify-content: center;
  }

  /* Cards apiladas verticalmente (no/yes en columna) */
  .comparison--trainer .comparison__cols {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  /* iPhone visible */
  .comparison__mockup--iphone { display: flex; }
  .comparison__store .app-showcase__store-note { display: none; }
}


/* ── Panel showcase: iPad landscape ──────────────── */

.app-showcase--panel {
  padding-top: var(--space-80);
}

/* Slide más ancho para iPad (ratio landscape 1.39:1) */
.app-showcase--panel .app-showcase__track {
  --slide-w: clamp(300px, 50vw, 600px);
}

/* iPad tiene fondo blanco → multiply lo funde con el surface */
.app-showcase--panel .app-slide img {
  mix-blend-mode: multiply;
}

/* Sin pencil note de store en esta sección */
.app-showcase--panel .app-showcase__store-note { display: none; }

@media (max-width: 768px) {
  .app-showcase--panel { padding-top: 72px; }
}