/* SUMMIT — estilos de la pagina de Membresias
   Generado al extraer el bloque <style> embebido en el HTML.
   Las rutas url() son relativas a este archivo (assets/css/), por eso usan ../../
   Cambia un color aqui y se actualiza en todas las paginas que enlacen esta hoja. */

/* ============================================================
   DESIGN TOKENS — idénticos a la landing SUMMIT (index.html)
   ============================================================ */
:root {
  --summit-black:    #0A0A0A;
  --summit-black-2:  #1A1A1A;
  --summit-black-3:  #121212;
  --summit-gold:     #EFDBB2;
  --summit-gold-dim: #BFAF8E;
  --summit-cream:    #F6EBD7;
  --summit-gray:     #B3B3B3;
  --summit-white:    #FFFFFF;

  --ff-display: "Anton", "Tungsten", "Impact", sans-serif;
  --ff-body:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  --container: 1280px;
  --gutter: clamp(1.25rem, 3.5vw, 2.5rem);
  --ease: cubic-bezier(.2,.7,.2,1);
  /* Curva "expo out" para entradas cinematográficas (aterrizaje suave y premium) */
  --motion-ease-out: cubic-bezier(.16,1,.3,1);
  --reveal-blur: 8px;

  --mountain-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='90' viewBox='0 0 160 90'><g fill='none' stroke='%23EFDBB2' stroke-width='0.6' opacity='1'><path d='M0 80 L40 30 L70 60 L100 15 L140 55 L160 40 L160 90 L0 90 Z'/><path d='M0 90 L20 70 L55 50 L80 70 L120 38 L160 70 L160 90 Z'/></g></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--summit-black);
  color: var(--summit-white);
  font-family: var(--ff-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--summit-gold); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--summit-gold); color: var(--summit-black); }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
section { position: relative; }
.section { padding-block: clamp(4rem, 8vw, 6rem); }
.section--alt { background: var(--summit-black-2); }
.section--texture::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--mountain-pattern);
  background-size: 320px auto;
  opacity: 0.04;
  pointer-events: none;
}

.eyebrow {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--summit-gold);
  display: inline-flex; align-items: center; gap: 0.75rem;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--summit-gold); display: inline-block; }

.section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 1rem; }
.section__head h2 {
  font-family: var(--ff-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(2.5rem, 5.2vw, 5rem);
  line-height: 0.95;
  margin: 0;
  letter-spacing: -0.005em;
}
.section__head p { margin: 0; color: var(--summit-gray); max-width: 58ch; }

/* ============================================================
   SUMMIT SHINE TITLE — mismo destello que el precio "$1,999/mes"
   de index.html (keyframes pricePulse, 3s, delay .9s)
   ============================================================ */
.summit-shine-title {
  text-shadow: 0 0 0 rgba(255,255,255,0);
}
@media (prefers-reduced-motion: no-preference) {
  .summit-shine-title {
    animation: pricePulse 3s var(--ease) infinite;
    animation-delay: .9s;
  }
}
@keyframes pricePulse {
  0%, 100% { text-shadow: 0 0 6px rgba(255,255,255,0.15); }
  50%      { text-shadow: 0 0 34px rgba(255,255,255,0.85), 0 0 12px rgba(255,255,255,0.4); }
}
/* En móvil el destello se suaviza para no saturar ni restar legibilidad */
@media (max-width: 720px) {
  @keyframes pricePulse {
    0%, 100% { text-shadow: 0 0 4px rgba(255,255,255,0.12); }
    50%      { text-shadow: 0 0 18px rgba(255,255,255,0.55), 0 0 8px rgba(255,255,255,0.25); }
  }
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--summit-gold);
  color: var(--summit-cream);
  font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  background: transparent;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  cursor: pointer; line-height: 1;
}
.btn:hover { background: var(--summit-gold); color: var(--summit-black); }
.btn--solid { background: var(--summit-gold); color: var(--summit-black); }
.btn--solid:hover { background: var(--summit-cream); border-color: var(--summit-cream); color: var(--summit-black); }
.btn .arrow { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 1.1rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), padding .3s var(--ease), border-color .4s var(--ease);
}
.nav.is-scrolled {
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(239, 219, 178, 0.18);
  padding-block: 0.75rem;
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav__logo img { width: 110px; height: auto; }
.nav__menu { display: flex; align-items: center; gap: 2.25rem; list-style: none; margin: 0; padding: 0; }
.nav__menu a {
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--summit-white);
  position: relative; padding: 0.4rem 0;
  transition: color .3s var(--ease);
}
.nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--summit-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__menu a:hover { color: var(--summit-gold); }
.nav__menu a:hover::after { transform: scaleX(1); }
.nav__cta { padding: 0.7rem 1.15rem; font-size: 0.72rem; }
@media (max-width: 860px) { .nav__menu { display: none; } }
@media (min-width: 861px) and (max-width: 1120px) { .nav__menu { gap: 1.35rem; } }

/* ============================================================
   HERO DE COMPRA
   ============================================================ */
.buy-hero {
  position: relative;
  min-height: 72svh;
  display: flex; align-items: flex-end;
  padding-block: clamp(8rem, 16vw, 11rem) clamp(4rem, 7vw, 5.5rem);
  background-color: var(--summit-black);
  overflow: hidden;
  isolation: isolate;
}
/* Capa 1 — textura/patrón topográfico SUMMIT, al fondo */
.buy-hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background-image: var(--mountain-pattern);
  background-size: 320px auto;
  opacity: 0.16;
  pointer-events: none;
}
/* Capa 2 — imagen Mayweather encima de la textura, oscurecida e integrada */
.buy-hero__bg {
  position: absolute; inset: 0;
  z-index: 2;
  background-image: url("../../Images/Maywather_traning_gym_memebresias.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.92;
  filter: grayscale(85%) brightness(0.85) contrast(1.05);
  pointer-events: none;
}
/* Capa 3 — overlay oscuro de legibilidad + acento dorado sutil */
.buy-hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 3;
  background:
    /* Más oscuro en la columna de texto (izq.), aclarando hacia la imagen (der.) */
    linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 48%, rgba(0,0,0,0.12) 100%),
    /* Degradado vertical — fundido a negro hacia abajo, suave arriba */
    linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.30) 58%, rgba(0,0,0,0.78) 100%),
    /* Acento dorado sutil arriba a la derecha */
    radial-gradient(ellipse 70% 55% at 80% 8%, rgba(239,219,178,0.10) 0%, transparent 60%);
  pointer-events: none;
}
@media (max-width: 768px) {
  /* En móvil, desplaza la imagen y bájala un poco para legibilidad del texto */
  .buy-hero__bg { background-position: 68% center; opacity: 0.72; }
}
/* Capa 4 — contenido del hero por encima de todo */
.buy-hero__inner { position: relative; z-index: 4; display: grid; gap: 1.4rem; max-width: 60rem; }
.buy-hero h1 {
  font-family: var(--ff-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(3.2rem, 9vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.005em;
  margin: 0;
}
.buy-hero h1 .accent { color: var(--summit-gold); }
.buy-hero__lede {
  margin: 0;
  font-size: clamp(1rem, 1.2vw + .6rem, 1.25rem);
  color: var(--summit-cream);
  max-width: 52ch;
  line-height: 1.6;
}
.buy-hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; }

/* ============================================================
   GRID DE PLANES — mismo tratamiento de tarjetas que la landing
   ============================================================ */
.plans-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 720px)  { .plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plans-grid { grid-template-columns: repeat(3, 1fr); } }

.plan {
  position: relative;
  padding: 2rem 1.75rem;
  background: var(--summit-black);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 1.25rem;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
  min-height: 380px;
}
.section--alt .plan { background: var(--summit-black-3); }
.plan:hover { border-color: rgba(239, 219, 178, 0.45); transform: translateY(-3px); }

.plan__badge {
  position: absolute; top: -10px; left: 1.75rem;
  background: var(--summit-gold); color: var(--summit-black);
  padding: 0.35rem 0.7rem;
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 600;
}
.plan__badge--soft { background: transparent; color: var(--summit-cream); border: 1px solid var(--summit-gold); font-weight: 500; }
.plan__kind { font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--summit-gold); margin-bottom: 0.4rem; display: block; }
.plan__name {
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 2.3vw, 2.4rem);
  text-transform: uppercase; font-weight: 400;
  line-height: 1; margin: 0; color: var(--summit-white);
}
.plan__desc { margin: -0.35rem 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--summit-gray); }

.plan__price-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: clamp(0.6rem, 2.5vw, 1rem);
  padding-block: 0.45rem 1.45rem;
  border-bottom: 1px solid rgba(239,219,178,0.22);
}
.plan__label { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--summit-cream); flex-shrink: 0; }
.plan__amount { display: flex; flex-direction: column; align-items: flex-end; gap: 0.12rem; line-height: 1; min-width: 0; max-width: 100%; }
.plan__amount-cur { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; color: var(--summit-gray); }
.plan__amount-num {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 6vw, 2.25rem);
  line-height: 0.9; white-space: nowrap; max-width: 100%;
  background: linear-gradient(165deg, var(--summit-cream) 0%, var(--summit-gold) 72%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--summit-gold);
}
.plan__amount-sign { -webkit-text-fill-color: var(--summit-gold); color: var(--summit-gold); font-size: 0.42em; vertical-align: 0.6em; margin-right: 0.12em; }
.plan__per { font-size: 0.34em; font-weight: 500; letter-spacing: 0.08em; color: var(--summit-gray); -webkit-text-fill-color: var(--summit-gray); vertical-align: 0.5em; margin-left: 0.2em; font-family: var(--ff-body); }

.plan__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.plan__feature { position: relative; padding-left: 1.05rem; font-size: 0.82rem; letter-spacing: 0.03em; color: var(--summit-cream); }
.plan__feature::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; background: var(--summit-gold); }
.plan__note { margin: -0.25rem 0 0; font-size: 0.74rem; line-height: 1.55; letter-spacing: 0.02em; color: var(--summit-gray); }

.membership-cta {
  margin-top: auto;
  display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem;
  min-height: 48px;
  padding: 0.85rem 1rem;
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500;
  border: 1px solid var(--summit-gold);
  color: var(--summit-gold);
  text-align: center;
  transition: background .3s var(--ease), color .3s var(--ease);
  cursor: pointer;
}
.membership-cta:hover { background: var(--summit-gold); color: var(--summit-black); }
.plan--recommended { border-color: rgba(239, 219, 178, 0.55); }

/* ============================================================
   VIP — tarjeta destacada de "Experiencia VIP" (oscura con acento
   dorado + glow + ribbon). Distinta y más sobria que Dorada Plus (dorada).
   ============================================================ */
.plan--vip {
  border: 1px solid var(--summit-gold);
  background:
    radial-gradient(120% 75% at 50% 0%, rgba(239,219,178,0.18) 0%, transparent 62%),
    var(--summit-black-3);
}
.plan--vip .plan__name { color: var(--summit-gold); }
@media (prefers-reduced-motion: no-preference) {
  .plan--vip { animation: vipGlow 3.4s var(--ease) infinite; }
  @keyframes vipGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(239,219,178,0.22) inset, 0 22px 60px -30px rgba(239,219,178,0.45); }
    50%      { box-shadow: 0 0 0 1px rgba(239,219,178,0.45) inset, 0 26px 72px -22px rgba(239,219,178,0.72); }
  }
}
.plan--vip:hover { border-color: var(--summit-cream); transform: translateY(-3px); }

/* Grid de una sola tarjeta (Children) — centrado y contenido */
.plans-grid--single { max-width: 440px; }

/* ============================================================
   PAQUETES FAMILIARES — bloque interactivo (selector 2–6).
   Desktop: info+selector a la izquierda, beneficios a la derecha,
   CTA abajo-izquierda. Móvil: info → beneficios → CTA.
   ============================================================ */
.family-block {
  display: grid;
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "info benefits" "cta benefits";
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(239,219,178,0.12) 0%, transparent 58%),
    var(--summit-black-3);
  border: 1px solid rgba(239,219,178,0.3);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: 0 30px 80px -42px rgba(0,0,0,0.85);
}
.family-block__info { grid-area: info; min-width: 0; }
.family-block__benefits { grid-area: benefits; align-self: stretch; border-left: 1px solid rgba(239,219,178,0.18); padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.family__cta { grid-area: cta; align-self: start; width: 100%; }
@media (max-width: 860px) {
  .family-block { grid-template-columns: 1fr; grid-template-areas: "info" "benefits" "cta"; }
  .family-block__benefits { border-left: 0; padding-left: 0; border-top: 1px solid rgba(239,219,178,0.18); padding-top: 1.5rem; }
}

.family-selector { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.75rem; }
.family-dot {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: var(--summit-black);
  color: var(--summit-cream);
  font-family: var(--ff-display); font-weight: 400; font-size: 1.3rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.family-dot:hover { border-color: var(--summit-gold); color: var(--summit-gold); }
.family-dot.is-active {
  background: var(--summit-gold); color: var(--summit-black); border-color: var(--summit-gold);
  box-shadow: 0 10px 26px -10px rgba(239,219,178,0.75);
  transform: translateY(-1px);
}
.family__kind { font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--summit-gold); display: block; }
.family__name { font-family: var(--ff-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1; margin: 0.6rem 0 0; color: var(--summit-white); }
.family__subtitle { margin: 0.4rem 0 0; color: var(--summit-gray); font-size: 0.92rem; }
.family__price { display: flex; align-items: flex-end; gap: 0.4rem; margin-top: 1.1rem; }
.family__cur { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--summit-gray); align-self: flex-start; margin-bottom: 0.5rem; }
.family__amount {
  font-family: var(--ff-display); font-weight: 400; line-height: 0.9;
  font-size: clamp(2.6rem, 6vw, 3.7rem); white-space: nowrap;
  background: linear-gradient(165deg, var(--summit-cream) 0%, var(--summit-gold) 72%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--summit-gold);
}
.family__per { font-family: var(--ff-body); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.08em; color: var(--summit-gray); -webkit-text-fill-color: var(--summit-gray); margin-left: 0.35rem; }
.family__secondary { margin: 0.6rem 0 0; color: var(--summit-cream); font-size: 0.82rem; letter-spacing: 0.04em; }
.family-block__info.is-swapping .family__name,
.family-block__info.is-swapping .family__subtitle,
.family-block__info.is-swapping .family__price,
.family-block__info.is-swapping .family__secondary { opacity: 0.35; }
.family__name, .family__subtitle, .family__price, .family__secondary { transition: opacity .25s var(--ease); }
.family__benefits-label { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--summit-gold); display: block; margin-bottom: 1.1rem; }
.family__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
@media (min-width: 520px) { .family__features { grid-template-columns: repeat(2, 1fr); } }
.family__feature { position: relative; padding-left: 1.05rem; font-size: 0.82rem; line-height: 1.45; color: var(--summit-cream); }
.family__feature::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; background: var(--summit-gold); }

/* Beneficios grupales: columnas CSS fluidas en vez de grid, para que los
   ítems se distribuyan compactos sin igualar la altura de cada fila. */
#grp-features {
  display: block;
  columns: 2;
  column-gap: clamp(1.25rem, 3vw, 2rem);
}
#grp-features .family__feature {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 0.6rem;
}
#grp-features .family__feature:last-child { margin-bottom: 0; }
@media (max-width: 519px) { #grp-features { columns: 1; } }

/* ============================================================
   MEMBRESÍAS GRUPALES — selector 2–5 (clase de dot propia para no
   colisionar con el JS del selector familiar; reutiliza el resto de
   estilos .family-* del bloque interactivo).
   ============================================================ */
.group-selector { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.75rem; }
.group-dot {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: var(--summit-black);
  color: var(--summit-cream);
  font-family: var(--ff-display); font-weight: 400; font-size: 1.3rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.group-dot:hover { border-color: var(--summit-gold); color: var(--summit-gold); }
.group-dot.is-active {
  background: var(--summit-gold); color: var(--summit-black); border-color: var(--summit-gold);
  box-shadow: 0 10px 26px -10px rgba(239,219,178,0.75);
  transform: translateY(-1px);
}

/* Dorada Plus — tarjeta dorada destacada (jerarquía invertida, igual que landing) */
.plan--gold {
  background: linear-gradient(180deg, #F6EAD2 0%, var(--summit-gold) 52%, #E8CA8E 100%);
  border: 1px solid var(--summit-gold);
  box-shadow: 0 18px 48px -22px rgba(239,219,178,0.65);
}
.plan--gold::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--mountain-pattern);
  opacity: 0.06; mix-blend-mode: multiply; pointer-events: none;
}
.plan--gold > * { position: relative; z-index: 1; }
.plan--gold:hover { border-color: var(--summit-cream); }
.plan--gold .plan__kind { color: rgba(10,10,10,0.62); }
.plan--gold .plan__name { color: var(--summit-black); }
.plan--gold .plan__desc { color: rgba(18,14,6,0.78); }
.plan--gold .plan__price-row { border-bottom-color: var(--summit-black); }
.plan--gold .plan__label { color: rgba(10,10,10,0.82); }
.plan--gold .plan__amount-cur { color: rgba(10,10,10,0.62); }
.plan--gold .plan__amount-num { background: none; -webkit-text-fill-color: var(--summit-black); color: var(--summit-black); }
.plan--gold .plan__amount-sign { -webkit-text-fill-color: var(--summit-black); color: var(--summit-black); }
.plan--gold .plan__per { color: rgba(10,10,10,0.6); -webkit-text-fill-color: rgba(10,10,10,0.6); }
.plan--gold .plan__feature { color: rgba(10,10,10,0.84); }
.plan--gold .plan__feature::before { background: var(--summit-black); }
.plan--gold .plan__note { color: rgba(10,10,10,0.72); }
.plan--gold .membership-cta { background: var(--summit-black); border-color: var(--summit-black); color: var(--summit-gold); position: relative; overflow: hidden; }
.plan--gold .plan__badge--soft { border-color: var(--summit-black); color: var(--summit-black); }
.plan--gold .membership-cta:hover { background: transparent; border-color: var(--summit-black); color: var(--summit-black); }
@media (prefers-reduced-motion: no-preference) {
  .plan--gold .membership-cta::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%;
    background: linear-gradient(100deg, transparent 0%, rgba(246,235,215,0.22) 50%, transparent 100%);
    animation: ctaSheen 2.8s var(--ease) infinite;
  }
  @keyframes ctaSheen { 0% { left: -75%; } 55%, 100% { left: 125%; } }
}

/* ============================================================
   TABLA COMPARATIVA — secundaria, scroll horizontal en móvil
   ============================================================ */
.compare__scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(255,255,255,0.08); }
.compare table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 0.84rem; }
.compare th, .compare td { padding: 0.8rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.06); text-align: center; }
.compare thead th {
  background: var(--summit-black-2);
  font-family: var(--ff-display); font-weight: 400;
  font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--summit-cream);
  border-bottom: 1px solid rgba(239,219,178,0.3);
  white-space: nowrap;
}
.compare thead th:first-child, .compare td:first-child, .compare tbody th {
  text-align: left;
  font-family: var(--ff-body); font-weight: 400;
  color: var(--summit-gray); font-size: 0.82rem;
  letter-spacing: 0.03em;
  position: sticky; left: 0;
  background: var(--summit-black);
}
.compare thead th:first-child { background: var(--summit-black-2); }
.compare thead th.is-gold { color: var(--summit-gold); }
.compare .check { color: var(--summit-gold); font-size: 0.95rem; }
.compare .dash { color: rgba(255,255,255,0.18); }
.compare td.txt { color: var(--summit-cream); font-size: 0.78rem; }
.compare tfoot td {
  border-bottom: 0;
  font-family: var(--ff-display); font-size: 1.05rem; color: var(--summit-cream);
  background: var(--summit-black-2);
}
.compare tfoot td:first-child { font-family: var(--ff-body); font-size: 0.82rem; }
.compare__hint { margin-top: 0.8rem; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--summit-gray); display: none; }
@media (min-width: 769px) and (max-width: 820px) { .compare__hint { display: block; } }

/* ------------------------------------------------------------
   HEADER STICKY VERTICAL — SOLO ESCRITORIO (≥1024px).
   A este ancho la tabla (min-width 760px) cabe en el layout, así
   que liberamos el overflow del scroller para que el sticky se
   ancle al scroll vertical de la PÁGINA, quedando bajo el navbar
   fijo. En tablet (769–1023px) se conserva el scroll horizontal.
   Móvil (≤768px) usa su vista de tarjetas y no se toca.
   ------------------------------------------------------------ */
@media (min-width: 1024px) {
  /* Sin scroll propio: el sticky pasa a anclarse contra el viewport. */
  .comparison-table-desktop .compare__scroller {
    overflow-x: visible;
    overflow-y: visible;
  }
  /* Neutraliza el transform residual del reveal (translate3d identidad):
     un ancestro con transform crea un containing block y anularía el sticky.
     El fade por opacidad del reveal se conserva intacto. */
  .comparison-table-desktop .compare__scroller.reveal { transform: none; }

  /* Fila de encabezados: fija al hacer scroll vertical, bajo el navbar. */
  #compare-table thead th {
    position: sticky;
    top: 74px;
    z-index: 30;
    background: var(--summit-black-2);
    box-shadow: 0 1px 0 rgba(239,219,178,0.32), 0 12px 28px rgba(0,0,0,0.36);
  }
  /* Primera celda "Beneficio": sticky en ambos ejes (top + left) y por encima. */
  #compare-table thead th:first-child {
    left: 0;
    z-index: 40;
    background: var(--summit-black-2);
  }
  /* Columna destacada (is-gold): conserva el dorado con fondo sólido. */
  #compare-table thead th.is-gold {
    color: var(--summit-gold);
    background: var(--summit-black-2);
  }
}

/* ============================================================
   COMPARATIVA — VISTA MÓVIL (≤768px). Desktop NO se toca.
   ============================================================ */
.comparison-mobile { display: none; }
@media (max-width: 768px) {
  .comparison-table-desktop { display: none; }
  .comparison-mobile { display: block; }
}
.cmp-m { display: grid; gap: 1.5rem; }
.cmp-m__group { display: grid; gap: 0.65rem; }
.cmp-m__label { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--summit-gold); }
.cmp-chips { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.45rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.cmp-chips::-webkit-scrollbar { display: none; }
.cmp-chip {
  flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start;
  min-height: 44px; padding: 0.55rem 1.1rem;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 999px;
  background: var(--summit-black); color: var(--summit-cream);
  font-family: var(--ff-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.cmp-chip:hover { border-color: var(--summit-gold); color: var(--summit-gold); }
.cmp-chip.is-active { background: var(--summit-gold); color: var(--summit-black); border-color: var(--summit-gold); }
.cmp-m__cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.cmp-card { border: 1px solid rgba(239,219,178,0.28); background: var(--summit-black-3); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 1.15rem; min-width: 0; }
.cmp-card--b { border-color: rgba(255,255,255,0.12); }
.cmp-card__head { border-bottom: 1px solid rgba(239,219,178,0.2); padding-bottom: 1.1rem; }
.cmp-card__kind { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--summit-gold); display: block; }
.cmp-card__name { font-family: var(--ff-display); font-weight: 400; text-transform: uppercase; font-size: 1.7rem; line-height: 1; margin: 0.45rem 0 0; color: var(--summit-white); }
.cmp-card__price { display: flex; align-items: baseline; gap: 0.35rem; margin-top: 0.7rem; }
.cmp-card__cur { font-size: 0.62rem; letter-spacing: 0.16em; color: var(--summit-gray); }
.cmp-card__amount { font-family: var(--ff-display); font-weight: 400; font-size: 1.7rem; line-height: 1; color: var(--summit-cream); }
.cmp-card__per { font-size: 0.72rem; color: var(--summit-gray); letter-spacing: 0.06em; }
.cmp-card__desc { margin: 0.7rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--summit-gray); }
.cmp-cat { display: grid; gap: 0.5rem; }
.cmp-cat__title { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--summit-gold); }
.cmp-cat__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.cmp-cat__item { position: relative; padding-left: 1.3rem; font-size: 0.82rem; line-height: 1.45; color: var(--summit-cream); }
.cmp-cat__item::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--summit-gold); font-size: 0.82rem; line-height: 1.45; }
.cmp-card .membership-cta { margin-top: auto; }
.cmp-m__note { font-size: 0.74rem; letter-spacing: 0.06em; color: var(--summit-gray); text-align: center; margin: 0; }

/* ============================================================
   FOOTER COMPACTO
   ============================================================ */
.footer {
  background: var(--summit-black-2);
  padding-block: 3rem 2rem;
  border-top: 1px solid rgba(239,219,178,0.18);
}
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.footer__inner img { width: 120px; }
.footer__inner span { font-size: 0.78rem; color: var(--summit-gray); letter-spacing: 0.06em; }
.footer__inner a { color: var(--summit-cream); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; transition: color .3s var(--ease); }
.footer__inner a:hover { color: var(--summit-gold); }
/* Aviso legal global — letra chiquita, discreta, al final del footer compacto */
.footer__legal {
  width: 100%;
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: clamp(0.6rem, 0.68vw, 0.68rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(179,179,179,0.72);
  text-transform: none;
  text-align: center;
}

/* ============================================================
   REVEAL ON SCROLL — mismo motion que la landing
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.72s var(--motion-ease-out),
    transform 0.72s var(--motion-ease-out);
}
.reveal.in { opacity: 1; transform: translate3d(0, 0, 0); }
.reveal[data-delay="2"] { transition-delay: 0.08s; }
.reveal[data-delay="3"] { transition-delay: 0.16s; }
.reveal[data-delay="4"] { transition-delay: 0.24s; }

/* Capa cinematográfica de desenfoque: solo desktop/puntero fino para cuidar el
   rendimiento en móvil. Blur transitorio que se limpia al entrar.
   Se excluye .compare__scroller: es el contenedor de scroll con la columna
   sticky de la comparativa; un filter permanente sobre él podría afectar el
   sticky, y una tabla ancha no necesita desenfoque. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .reveal:not(.compare__scroller) {
    filter: blur(var(--reveal-blur));
    transition:
      opacity 0.72s var(--motion-ease-out),
      transform 0.72s var(--motion-ease-out),
      filter 0.72s var(--motion-ease-out);
  }
  .reveal:not(.compare__scroller).in { filter: blur(0); }
}

/* ============================================================
   BUY HERO — entrada cinematográfica en carga (visible por defecto:
   si el motion está desactivado, el estado final permanece intacto)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .buy-hero__inner > * {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    animation: buyHeroIn 0.82s var(--motion-ease-out) forwards;
  }
  .buy-hero__inner > .eyebrow      { animation-delay: 0.05s; }
  .buy-hero__inner > h1            { animation-delay: 0.14s; }
  .buy-hero__inner > .buy-hero__lede { animation-delay: 0.24s; }
  .buy-hero__inner > .buy-hero__ctas { animation-delay: 0.34s; }
}
@keyframes buyHeroIn {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  * , *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Microinteracción táctil: feedback sutil al presionar (útil en móvil). */
.btn:active { transform: translateY(0) scale(0.975); }

/* ============================================================
   EXTRAS — Servicios adicionales
   ============================================================ */
.extras-section {
  position: relative;
  overflow: hidden;
}

.extras-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.5rem);
}

.extras-card {
  background: rgba(10, 10, 10, 0.72);
  border: 1px solid rgba(239, 219, 178, 0.24);
  border-radius: 24px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
  overflow: hidden;
}

.extras-card h3 {
  margin: 0 0 1.35rem;
  font-family: var(--ff-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.65rem, 2.6vw, 2.25rem);
  color: var(--summit-gold);
  letter-spacing: 0.01em;
  line-height: 1;
}

.extras-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.extras-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
}

.extras-table--two {
  min-width: 0;
}

.extras-table th {
  padding: 0 0 0.85rem;
  text-align: left;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--summit-gray);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.extras-table th:last-child,
.extras-table td:last-child {
  text-align: right;
  color: var(--summit-gold);
  font-weight: 700;
  white-space: nowrap;
}

.extras-table td {
  padding: 1rem 0;
  color: var(--summit-cream);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  vertical-align: top;
}

.extras-table td span {
  display: block;
  margin-top: 0.22rem;
  color: var(--summit-gray);
  font-size: 0.84rem;
  line-height: 1.4;
}

.extras-note {
  margin: 1rem 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--summit-gray);
  font-style: italic;
}

.extras-disclaimer {
  max-width: 760px;
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
  text-align: center;
  color: var(--summit-gray);
  font-size: 0.88rem;
  line-height: 1.65;
}

@media (max-width: 820px) {
  .extras-grid {
    grid-template-columns: 1fr;
  }

  .extras-card {
    border-radius: 20px;
  }
}

@media (max-width: 520px) {
  .extras-card {
    padding: 1.25rem;
  }

  .extras-table {
    min-width: 390px;
  }

  .extras-table--two {
    min-width: 0;
  }

  .extras-table th {
    letter-spacing: 0.18em;
  }
}