/* ═══════════════════════════════════════════════════════════
   HERO — Panel de control
   ═══════════════════════════════════════════════════════════ */

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

/* Alineadas arriba, solapamiento de -32px */
.hero__gym-photos--panel {
  align-items: flex-start;
  gap: 0;
  max-width: 1200px;
}

/* iPad: 400px de alto, aspecto original preservado, sin border-radius */
.hero__gym-photos--panel .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--panel .hero__gym-photo--left img {
  width: auto;
  height: 100%;
  object-fit: unset;
}

/* Foto entrenador: 500×360, inclinada +5° */
.hero__gym-photos--panel .hero__gym-photo--right {
  flex: 0 0 500px;
  height: 360px;
  transform: rotate(5deg);
  z-index: 2;
}

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

@media (max-width: 1024px) {
  .hero__gym-photos--panel .hero__gym-photo--left  { height: 420px; }
  .hero__gym-photos--panel .hero__gym-photo--right { flex: 0 0 480px; height: 320px; }
}

@media (max-width: 768px) {
  .hero__gym-photos--panel .hero__gym-photo--left  { height: 280px; }
  .hero__gym-photos--panel .hero__gym-photo--right { flex: 0 0 320px; height: 215px; }
  .hero__gym-photos--panel { margin-right: -16px; }
}


/* ═══════════════════════════════════════════════════════════
   COMPARISON — Variante papel vs MTP
   ═══════════════════════════════════════════════════════════ */

/* Sin overflow clip para que las cards rotadas no se corten */
.comparison--paper {
  overflow: visible;
}

/* Sin fondo: transparente sobre el bg de la página */
.comparison--paper .comparison__body {
  background: transparent;
  border-radius: 0;
}

/* Título en blanco (antes era color-primary para fondo surface) */
.comparison--paper .comparison__title {
  color: var(--color-white);
}

/* Subtítulo en blanco (antes era color-primary para fondo surface) */
.comparison--paper .comparison__subtitle {
  color: var(--color-white);
  opacity: 0.72;
}

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

/* Cols: gap 32px, sin max-width restrictivo, overflow visible para rotaciones */
.comparison--paper .comparison__cols {
  max-width: 900px;
  gap: var(--space-64);
  overflow: visible;
}

/* Cards: glass blur blanco con transparencia */
.comparison--paper .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);
}

/* Texto de los items en claro */
.comparison--paper .comparison__col li {
  color: rgba(214, 241, 245, 0.85);
}

/* Iconos: X normal, check tintado en accent */
.comparison--paper .comparison__col--no li img {
  opacity: 0.6;
}
.comparison--paper .comparison__col--yes li img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Rotaciones: izq −5°, dcha +5° */
.comparison--paper .comparison__col--no  { transform: rotate(-5deg); }
.comparison--paper .comparison__col--yes { transform: rotate(5deg); }

.comparison__pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-16) var(--space-32);
  margin-bottom: clamp(var(--space-32), 4vw, var(--space-48));
  text-align: center;
}

.comparison__pillar-title {
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 500;
  color: var(--color-accent);
  max-width: 320px;
}

/* Cabecera de columna: centrada, sin icono */
.comparison__col-header {
  padding-bottom: var(--space-20);
  margin-bottom: var(--space-20);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.comparison__col-header h3 {
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--lh-body);
  color: rgba(214, 241, 245, 0.9);
}

/* CTA centrado bajo las columnas */
.comparison__cta--center {
  text-align: center;
  padding-top: clamp(var(--space-32), 4vw, var(--space-48));
}

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

  /* Cols: scroll lateral con margen a ambos lados */
  .comparison--paper .comparison__cols {
    gap: var(--space-32);
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Cancela el padding del body para llegar al borde */
    margin-inline: calc(-1 * clamp(var(--space-24), 4vw, var(--space-40)));
    padding-inline: var(--space-32);
    max-width: unset;
  }
  .comparison--paper .comparison__cols::-webkit-scrollbar { display: none; }

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

  /* Nav sticky: margen lateral en mobile */
  .panel-features__nav {
    padding-inline: var(--space-32);
  }

}


/* ═══════════════════════════════════════════════════════════
   PANEL COBROS / MIGRACIÓN — bloques de confianza cortos
   ═══════════════════════════════════════════════════════════ */

.panel-cobros {
  padding: 0 var(--space-32) var(--section-gap);
  text-align: center;
}

.panel-cobros__container {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.panel-cobros__title {
  font-size: clamp(24px, 2.5vw, var(--text-h2));
  font-weight: 500;
  line-height: var(--lh-h2);
  color: var(--color-white);
}

.panel-cobros__subtitle {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 500;
  color: var(--color-accent);
}

.panel-cobros__desc {
  font-size: clamp(14px, 1.2vw, var(--text-body));
  color: rgba(214, 241, 245, 0.72);
  line-height: var(--lh-body);
}


/* ═══════════════════════════════════════════════════════════
   PANEL FEATURES — "Un panel, todas las áreas del negocio"
   ═══════════════════════════════════════════════════════════ */

.panel-features {
  padding-top: 0;
  padding-bottom: var(--section-gap);
}

.panel-features__header {
  text-align: center;
  padding-inline: var(--space-32);
  padding-bottom: clamp(var(--space-32), 4vw, var(--space-48));
}

.panel-features__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);
}

.panel-features__subtitle {
  font-size: clamp(15px, 1.3vw, var(--text-body-lg));
  line-height: var(--lh-body-lg);
  color: rgba(214, 241, 245, 0.72);
  margin-top: var(--space-8);
}

/* Nav sticky: se pega bajo el nav principal con 32px de margen */
.panel-features__nav {
  position: sticky;
  top: calc(73px + var(--space-32));
  z-index: 20;
  display: flex;
  justify-content: center;
  padding-bottom: clamp(var(--space-40), 5vw, var(--space-64));
}

/* Links sin text-decoration, centrado vertical */
.panel-features__navlink {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 768px) {
  /* safe center: centra .platform__tabs cuando cabe; si desborda,
     cae a flex-start para no dejar la 1ª tab en scroll negativo
     inalcanzable (mismo criterio que .comparison__tabs). */
  .panel-features__nav {
    justify-content: safe center;
  }
  .panel-features__nav .platform__tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 4px;
  }
  .panel-features__nav .platform__tabs::-webkit-scrollbar { display: none; }
}

/* ── Panel de contenido ──────────────────────────────────── */

.panel-feature-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  width: min(1200px, 100% - var(--space-64));
  margin-inline: auto;
  margin-bottom: var(--space-32);
  background-color: #1A4141;
  border-radius: var(--radius-32);
  overflow: hidden; /* imagen queda clipeada al border-radius del panel */
  scroll-margin-top: calc(73px + var(--space-32) + 57px);
}

.panel-feature-panel--reverse {
  background-color: #1C3132;
}

/* Normal: texto izquierda (order 1), imagen derecha a sangre (order 2) */
.panel-feature-panel .panel-feature-panel__text { order: 1; }
.panel-feature-panel .panel-feature-panel__img  { order: 2; }

/* Reverse: imagen izquierda a sangre (order 1), texto derecha (order 2) */
.panel-feature-panel--reverse .panel-feature-panel__img  { order: 1; }
.panel-feature-panel--reverse .panel-feature-panel__text { order: 2; }

/* Imagen: a sangre, llena todo el alto del panel */
.panel-feature-panel__img {
  overflow: hidden;
}

.panel-feature-panel__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Texto: padding interno, centrado a lo alto */
.panel-feature-panel__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-24);
  padding: clamp(var(--space-40), 5vw, var(--space-64));
}

.panel-feature-panel__title {
  font-size: clamp(28px, 3vw, var(--text-h1));
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: clamp(-1px, -0.14vw, -2px);
  color: var(--color-white);
}

.panel-feature-panel__intro {
  font-size: clamp(15px, 1.3vw, var(--text-body));
  line-height: var(--lh-body);
  color: rgba(214, 241, 245, 0.72);
  margin: var(--space-8) 0 var(--space-16);
}

.panel-feature-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.panel-feature-panel__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  font-size: clamp(15px, 1.3vw, var(--text-body));
  line-height: var(--lh-body);
  color: rgba(214, 241, 245, 0.80);
}

.panel-feature-panel__list li img {
  flex-shrink: 0;
  margin-top: 2px;
  filter: brightness(0) invert(1);
}

/* ≤1024px: apilar — imagen arriba, texto abajo */
@media (max-width: 1024px) {
  .panel-feature-panel {
    grid-template-columns: 1fr;
  }

  .panel-feature-panel .panel-feature-panel__img,
  .panel-feature-panel--reverse .panel-feature-panel__img {
    order: 1;
    aspect-ratio: 16 / 9;
  }

  .panel-feature-panel .panel-feature-panel__text,
  .panel-feature-panel--reverse .panel-feature-panel__text {
    order: 2;
  }
}


/* ═══════════════════════════════════════════════════════════
   ECOSYSTEM — "La diferencia no es tener los datos"
   ═══════════════════════════════════════════════════════════ */

.ecosystem {
  padding-top: 0;
  padding-bottom: var(--section-gap);
  text-align: center;
}

.ecosystem__container {
  width: min(840px, 100% - var(--space-64));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--space-24), 3vw, var(--space-40));
}

.ecosystem__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);
}

.ecosystem__subtitle {
  font-size: clamp(15px, 1.3vw, var(--text-body-lg));
  line-height: var(--lh-body-lg);
  color: rgba(214, 241, 245, 0.72);
  max-width: 600px;
}

.ecosystem__diagram {
  display: block;
  width: min(680px, 100%);
  height: auto;
  margin-inline: auto;
}