/* =========================================================
   ONE GYM - Pases y membresías
   Medidas tomadas del diseño a 1440px de ancho
   ========================================================= */

/* Color de acento por sede: rojo (ONE GYM) por defecto */
.pases-page {
  --pase: var(--red);
  --pase-soft: #4a1a1c;
  --pase-edge: #a4272b;
  --pase-line: rgba(237, 50, 55, 0.45);
}

.pases-page--elite {
  --pase: var(--elite);
  --pase-soft: #5d4118;
  --pase-edge: var(--elite);
  --pase-line: rgba(216, 141, 33, 0.6);
}

.pases-page--premier {
  --pase: var(--premier);
  --pase-soft: #533523;
  --pase-edge: var(--premier);
  --pase-line: rgba(189, 111, 61, 0.6);
}

.text-accent { color: var(--pase); }
.pases-intro .eyebrow { color: var(--pase); }

/* Círculo con ícono */
.icon-circle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 61px;
  height: 61px;
  border-radius: 50%;
  background-color: var(--pase-soft);
}

.icon-circle svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--pase);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.icon-circle--lg { width: 60px; height: 60px; }
.icon-circle--lg svg { width: 44px; height: 44px; stroke-width: 3; }

/* ===== Intro ===== */
.pases-intro {
  position: relative;
  min-height: 943px;
  padding-top: 119px;
  overflow: hidden;
}

.pases-intro__outline {
  position: absolute;
  top: 45px;
  left: -10px;
  font-size: 251px;
}

.pases-intro__inner { position: relative; z-index: 1; }

.pases-intro .eyebrow { font-size: 30px; }
.pases-intro .eyebrow__line { width: 42px; }

.pases-intro__title {
  margin-top: -3px;
  font-size: 156px;
  line-height: 1;
}

.pases-intro__address {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 35px;
  color: var(--muted);
  font-size: 20.7px;
}

.pases-intro__address svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.pases-intro__subtitle {
  margin-top: 112px;
  font-size: 47px;
  line-height: 1.1;
}

/* Fotos superpuestas */
.pases-intro__img {
  position: absolute;
  object-fit: cover;
}

.pases-intro__img--back {
  top: 248px;
  left: calc(50% + 340px);
  right: 0;
  width: calc(50% - 340px);
  height: 531px;
  object-position: center 30%;
}

.pases-intro__img--front {
  top: 413px;
  left: calc(50% - 1px);
  width: 392px;
  height: 530px;
  object-position: center 40%;
}

/* ===== Card Pase Platinum ===== */
.platinum-card {
  --accent: var(--pase);
  width: 626px;
  margin-top: 22px;
  margin-left: 3px;
  padding: 46px 92px 29px 55px;
  border: 1px solid transparent;
  border-left-width: 10px;
  border-radius: 32px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--pase-edge), var(--pase-edge)) left / 40px 100% no-repeat border-box,
    linear-gradient(var(--pase-line), var(--pase-line)) border-box;
}

.platinum-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.platinum-card__badge {
  display: inline-flex;
  align-items: center;
  height: 61px;
  padding: 0 27px;
  border-radius: 999px;
  background-color: var(--pase-soft);
  color: var(--pase);
  font-family: var(--font-display);
  font-size: 25px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.platinum-card__text {
  margin-top: 32px;
  font-size: 22px;
  line-height: 1.21;
}

.platinum-card__btn {
  height: 47px;
  margin-top: 30px;
  padding: 0 32px;
  font-size: 17.5px;
}

/* ===== Listado de pases ===== */
.pases-list { padding: 47px 0 104px; }

.pases-list__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 56px;
  padding-inline: calc(var(--gutter) + 3px);
}

.pase-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 314px;
  padding: 44px 30px 36px 55px;
  border: 1px solid transparent;
  border-radius: 36px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--pase-line), var(--pase-line)) border-box;
  transition: transform var(--transition), box-shadow var(--transition);
}

.pase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px var(--pase);
}

/* Borde izquierdo con degradé de las 3 sedes */
.pase-card--multisede {
  margin-left: -11px;
  border-left-width: 11px;
  padding-left: 54px;
  padding-right: 8px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(180deg, var(--red) 0%, var(--elite) 50%, var(--premier) 100%) left / 40px 100% no-repeat border-box,
    linear-gradient(var(--pase-line), var(--pase-line)) border-box;
}

/* Card a todo el ancho (ej: multisede en ELITE) */
.pase-card--wide { grid-column: 1 / -1; }

.pase-card__note {
  margin-top: 46px;
  color: var(--gray);
  font-size: 10.5px;
  font-style: italic;
}

.pase-card__note + .pase-card__link { margin-top: 0; padding-top: 14px; }

.pase-card__title {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 29px;
  font-family: var(--font-display);
  font-size: 25.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.pase-card__title .tri-lines { gap: 10px; }

.pase-card__text {
  margin-top: 13px;
  color: var(--gray);
  font-size: 15.3px;
  line-height: 1.6;
}

.pase-card__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 24px;
  color: var(--pase);
  font-size: 12.5px;
  font-weight: 700;
}

.pase-card__arrow {
  position: relative;
  width: 15px;
  height: 1px;
  background-color: currentColor;
  transition: width var(--transition);
}

.pase-card__arrow::after {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  width: 5px;
  height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.pase-card__link:hover .pase-card__arrow { width: 26px; }

/* Ajustes propios del diseño de PREMIER */
.pases-page--premier .platinum-card { padding-right: 40px; padding-bottom: 25px; }
.pases-page--premier .pases-list { padding-bottom: 66px; }
.pases-page--premier .pases-list__grid { row-gap: 24px; }
.pases-page--premier .pase-card--wide { min-height: 0; padding-bottom: 29px; }
.pases-page--premier .pase-card--wide .pase-card__link { padding-top: 30px; }

/* Ajustes propios del diseño de ELITE */
.pases-page--elite .pases-intro__img--front { top: 367px; }
.pases-page--elite .platinum-card { padding-bottom: 25px; }
.pases-page--elite .pases-list__grid { row-gap: 24px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1365px) {
  .pases-intro__title { font-size: clamp(90px, 10.8vw, 156px); }
  .pases-intro__img--back { left: auto; width: 27vw; }
  .pases-intro__img--front { left: auto; right: calc(27vw - 50px); width: 27vw; }
  .platinum-card { width: min(626px, 46vw); padding-right: 40px; }
  .platinum-card__text br { display: none; }
}

@media (max-width: 1100px) {
  .pases-intro { min-height: 0; padding-top: 72px; }
  .pases-intro__outline { font-size: 22vw; top: 40px; }
  .pases-intro__address { margin-top: 24px; }
  .pases-intro__subtitle { margin-top: 64px; }
  .platinum-card { width: auto; margin-left: 0; }

  .pases-intro__media {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 48px;
    padding-inline: var(--gutter);
  }

  .pases-intro__img,
  .pases-intro__img--back,
  .pases-intro__img--front {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .pases-intro__img--front,
  .pases-page--elite .pases-intro__img--front { order: -1; margin-top: 48px; }

  .pases-list { padding: 56px 0 72px; }
  .pases-list__grid { gap: 24px; padding-inline: var(--gutter); }
  .pase-card { padding: 36px 32px 32px; }
  .pase-card--multisede { margin-left: 0; padding-left: 32px; }
  .pase-card__text br { display: none; }
}

@media (max-width: 760px) {
  .pases-list__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .pases-intro { padding-top: 48px; }
  .pases-intro .eyebrow { font-size: 18px; }
  .pases-intro__title { font-size: clamp(56px, 17vw, 90px); }
  .pases-intro__address { font-size: 16px; }
  .pases-intro__subtitle { margin-top: 48px; font-size: clamp(30px, 9vw, 40px); }

  .platinum-card { padding: 28px 20px 24px 24px; border-radius: 26px; }
  .platinum-card__badge { height: 48px; padding: 0 20px; font-size: 20px; }
  .icon-circle--lg { width: 48px; height: 48px; }
  .icon-circle--lg svg { width: 30px; height: 30px; }
  .platinum-card__text { font-size: 18px; margin-top: 24px; }
  .platinum-card__btn { width: 100%; justify-content: center; }

  .pases-intro__media { gap: 8px; margin-top: 32px; }
  .pases-intro__img--front { margin-top: 32px; }

  .pase-card { min-height: 0; padding: 28px 22px; border-radius: 26px; }
  .pase-card--multisede { padding-left: 22px; }
  .pase-card__title { flex-wrap: wrap; gap: 12px; font-size: 22px; }
  .pase-card__text { font-size: 14.5px; }
  .pase-card__link { font-size: 14px; }
  .pase-card__note { margin-top: 32px; font-size: 12px; line-height: 1.5; }
}

/* Laptops (1101–1439): las fotos arrancan después de la card del pase, con aire, para no pisarla */
@media (min-width: 1101px) and (max-width: 1439px) {
  .pases-intro { --card-w: min(626px, 44vw); --media-left: calc(var(--gutter) + 3px + var(--card-w) + 36px); }
  .platinum-card { width: var(--card-w); padding-right: 40px; }
  .platinum-card__text br { display: none; }
  .pases-intro__img--front {
    left: var(--media-left);
    right: auto;
    width: calc((100% - var(--media-left)) * 0.54);
  }
  .pases-intro__img--back {
    left: calc(var(--media-left) + (100% - var(--media-left)) * 0.47);
    right: auto;
    width: calc((100% - var(--media-left)) * 0.53);
  }
}