/* Las cards de "Sistema online" ahora comparten las mismas clases base que
   las de "Acompañamiento 1 a 1" (.svc, .svc-features, .svc-btn, etc. en
   styles.css), así que no hace falta pisar sus estilos acá. Este archivo
   se deja vacío a propósito — si en el futuro hace falta un ajuste que sea
   único del grupo "sistema", va acá. */

/* ============================================
   NAV — link "Iniciar sesión"
   Va entre los .nav-links y el .nav-btn "Transformate hoy"
   ============================================ */
.nav-login {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--silver);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .3px;
  padding: .45rem .95rem;
  border: 1px solid rgba(200, 214, 229, 0.22);
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.nav-login i {
  font-size: 1rem;
  color: var(--accent2);
  transition: color .2s;
}
.nav-login:hover {
  color: var(--wh);
  border-color: var(--accent);
  background: rgba(74, 144, 217, 0.08);
  transform: translateY(-2px);
}
.nav-login:hover i { color: var(--wh); }

/* Tablet + mobile: ocultamos el texto y dejamos solo el ícono
   para que "Transformate hoy" no se corte al lado derecho */
@media (max-width: 1080px) {
  nav { gap: 1rem; }         /* respiro entre el logo y los links */
  .nav-login {
    padding: .45rem .6rem;
    gap: 0;
  }
  .nav-login span { display: none; }
  .nav-login i { font-size: 1.15rem; color: var(--silver); }
}

/* Mobile: si aparece el hamburger de los links (≤768px), el login sigue como ícono */
@media (max-width: 768px) {
  .nav-login {
    padding: .4rem .55rem;
  }
  .nav-login i { font-size: 1.05rem; }
}

/* ==================================================
   Grids de planes — AUTO-FIT
   Los planes vienen de BD y la cantidad cambia según lo que
   Fede active/oculte en el admin. auto-fit + minmax hace que:
   - Con 1 plan → 1 columna centrada
   - Con 2 planes → 2 columnas parejas
   - Con 3-4 planes → 3-4 columnas
   - Con más → varias filas
   - En mobile → siempre 1 columna (el minmax fuerza el wrap)
   La definición hardcodeada de styles.css se sacó para no chocar.
   ================================================== */
/* Mobile first: una columna. La cantidad de planes llega en --n (style del HTML),
   así en pantallas anchas van todos en una fila y en las medianas de a dos,
   sin que nunca quede una tarjeta sola en la última fila (antes, con auto-fit,
   a unos 770px los 4 planes quedaban 3 + 1). */
.sc-planes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
  justify-content: center;
}
.svcs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  justify-content: center;
  max-width: 560px;
}
@media (min-width: 600px) {
  .sc-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Cantidad impar: la última ocupa el ancho de las dos, centrada y del ancho de una */
  .sc-planes > .svc:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - .6rem);
    justify-self: center;
  }
}
@media (min-width: 1100px) {
  .sc-planes { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
  .sc-planes > .svc:last-child:nth-child(odd) { grid-column: auto; width: auto; }
}
/* 1 a 1: las tarjetas son largas; de a una hasta que entran todas en una fila */
@media (min-width: 1000px) {
  .svcs-grid {
    grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
    max-width: 1300px;
  }
}
/* Si queda 1 sola card, no la estiramos al 100% */
.sc-planes .svc:only-child,
.svcs-grid .svc:only-child {
  max-width: 380px;
  margin: 0 auto;
}

/* ==================================================
   SERVICIOS · sin tagline
   Se sacaron las descripciones (.svc-tagline) de las cards.
   El h3 queda pegado al listado de features, así que
   recuperamos el aire que aportaba el tagline.
   ================================================== */
.svc h3 + .svc-features,
.svc h3 + .svc-gender + .svc-features,
.svc .svc-gender + .svc-features {
  margin-top: .9rem;
}

/* ==================================================
   BONUS arriba de los planes
   El .sc-bonus pasó a ir antes de .sc-planes, así que
   el margen que tenía arriba ahora va abajo.
   ================================================== */
.sc-wrapper .sc-bonus {
  margin: 0 0 2rem;
}

/* ==================================================
   BONUS · tag reordenado
   Ahora el orden es: "Bonus exclusivo" → regalo → "GRATIS".
   El regalo pasa a ser el protagonista visual, así que
   crece y se le invierten los márgenes al small.
   ================================================== */
.sc-bonus-tag i {
  font-size: 2.2rem;
  margin: 0 0 .35rem;
}
.sc-bonus-tag small {
  margin: 0 0 .45rem;
}

/* ==================================================
   1 A 1 · jerarquía visual entre los planes
   El 1º del listado (.svc-tier1) se lleva la vista,
   el 2º (.svc-tier2) queda en un nivel intermedio y
   el resto conserva el estilo base. Qué plan cae en
   cada nivel se define con el campo "orden" del admin.
   Reemplaza a .svc-limited en las cards 1 a 1.
   ================================================== */

/* ---------- Nivel 1 ---------- */
/* Sin cinta de texto: el plan se destaca solo con el marco que late.
   La animación pisa border-color y box-shadow del :hover — es a propósito,
   el hover sigue notándose por el translateY que aplica .svc:hover. */
.svcs-grid .svc-tier1 {
  /* 2px y no 1.5px: en pantallas con DPR fraccionario el navegador
     redondea 1.5px al mismo grosor que el borde base de 1px */
  border: 2px solid rgba(91,163,232,0.7);
  background: linear-gradient(160deg, rgba(37,99,176,0.42), var(--navy2) 65%);
  /* Sobresale sin usar transform: el .reveal lo pisaría al terminar la animación */
  margin-block: -1rem;
  z-index: 2;
  animation: tier1-pulse 3.6s ease-in-out infinite;
}

@keyframes tier1-pulse {
  0%, 100% {
    border-color: rgba(91,163,232,0.4);
    box-shadow: 0 22px 55px rgba(10,22,40,0.55), 0 0 20px rgba(74,144,217,0.12);
  }
  50% {
    border-color: rgba(126,192,255,0.95);
    box-shadow: 0 22px 55px rgba(10,22,40,0.55), 0 0 52px rgba(74,144,217,0.5);
  }
}

/* La página ya tiene bastante movimiento: si el sistema pide menos, se apaga */
@media (prefers-reduced-motion: reduce) {
  .svcs-grid .svc-tier1 {
    animation: none;
    box-shadow: 0 22px 55px rgba(10,22,40,0.55), 0 0 42px rgba(74,144,217,0.25);
  }
}

.svcs-grid .svc-tier1 h3 {
  font-size: 1.85rem;
}

.svcs-grid .svc-tier1 .svc-price {
  font-size: 2.9rem;
  background: linear-gradient(135deg, var(--wh), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.svcs-grid .svc-tier1 .svc-features li {
  color: rgba(255,255,255,0.82);
}

/* ---------- Nivel 2 ---------- */
.svcs-grid .svc-tier2 {
  border-color: rgba(74,144,217,0.38);
  background: linear-gradient(160deg, rgba(30,77,140,0.34), var(--navy2));
  box-shadow: 0 14px 36px rgba(10,22,40,0.4);
}

.svcs-grid .svc-tier2::before {
  content: 'CUPOS LIMITADOS';
  position: absolute;
  top: .8rem;
  right: .8rem;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  background: rgba(74,144,217,0.16);
  border: 1px solid rgba(74,144,217,0.45);
  color: var(--accent2);
  padding: .2rem .6rem;
  border-radius: 3px;
}

/* La cinta va en su propia banda arriba del badge, así que el badge no
   necesita reservarle lugar a la derecha (eso partía en dos líneas a
   "Presencial · Mar del Plata"). Sí deja aire arriba para la cinta. */
.svcs-grid .svc-tier2 .svc-badge {
  padding-right: 0;
  margin-top: .5rem;
}

/* ---------- Resto: CTA en versión secundaria ---------- */
.svcs-grid .svc:not(.svc-tier1):not(.svc-tier2) .svc-btn {
  background: transparent;
  border: 1px solid rgba(74,144,217,0.5);
  color: var(--accent2);
  box-shadow: none;
  animation: none;
}

.svcs-grid .svc:not(.svc-tier1):not(.svc-tier2) .svc-btn::before {
  display: none;
}

.svcs-grid .svc:not(.svc-tier1):not(.svc-tier2) .svc-btn:hover {
  background: rgba(74,144,217,0.14);
  border-color: var(--accent2);
  color: var(--wh);
  box-shadow: 0 10px 26px rgba(74,144,217,0.3);
}

/* En mobile las cards van una debajo de otra: el saliente molesta */
@media (max-width: 1080px) {
  .svcs-grid .svc-tier1 {
    margin-block: 0;
  }
}

/* ==================================================
   LO QUE VAS A LOGRAR · lista de beneficios
   OJO: el texto de cada <li> va envuelto en su propio <span>. Si se deja
   suelto, el <strong> se convierte en un flex item aparte y la negrita
   se separa del resto de la frase con huecos.
   ================================================== */
/* Una sola columna, en desktop y en mobile */
.benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.benefits li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: 1.06rem;
  color: var(--wh2);
  line-height: 1.6;
  padding: .8rem 0;
  border-bottom: 1px solid rgba(200,214,229,0.07);
}

.benefits li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.benefits li:first-child {
  padding-top: 0;
}

.benefit-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: rgba(74,144,217,0.12);
  border: 1px solid rgba(74,144,217,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  letter-spacing: .5px;
  color: var(--accent2);
  line-height: 1;
}

.benefits li strong {
  color: var(--silver3);
}

@media (max-width: 900px) {

  /* Acá el texto ocupa varias líneas: el número va arriba, no centrado */
  .benefits li {
    align-items: flex-start;
  }
  .benefit-num {
    margin-top: 2px;
  }
}

/* ==================================================
   SERVICIOS · más aire
   El padding base era 1.2rem arriba / 1.4rem abajo, y las
   cards quedaban pegadas al borde de la sección. Encima la
   card destacada sobresale 1rem con margin-block negativo,
   así que abajo hacía falta todavía más lugar.
   ================================================== */
.svcs {
  padding: 3rem 5% 5.5rem;
}

@media (max-width: 768px) {
  .svcs {
    padding: 2rem 5% 3.5rem;
  }
}

/* ==================================================
   NAV · menú hamburguesa en mobile
   El nav tenía logo + login + "Transformate hoy" en una sola
   fila y abajo de ~400px no entraban. Además .nav-links se
   ocultaba en mobile, así que no había forma de llegar a las
   secciones. El menú resuelve las dos cosas.
   ================================================== */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 38px;
  padding: 0 9px;
  background: rgba(74,144,217,0.1);
  border: 1px solid rgba(74,144,217,0.25);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--silver);
  transition: transform .28s ease, opacity .2s ease;
}

/* Las tres barras pasan a ser una X */
nav.open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

nav.open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

nav.open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }

  /* El menú cae como panel debajo de la barra */
  nav .nav-r {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding: 1rem 5% 1.3rem;
    background: rgba(10,22,40,0.98);
    border-bottom: 1px solid rgba(200,214,229,0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.45);
    /* Oculto pero sin display:none, para poder animarlo */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }

  nav.open .nav-r {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* styles.css los esconde en mobile: acá vuelven, en columna */
  nav .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  nav .nav-links li {
    border-bottom: 1px solid rgba(200,214,229,0.08);
  }

  nav .nav-links a {
    display: block;
    padding: .8rem .2rem;
    font-size: .95rem;
  }

  /* El login recupera el texto: acá hay lugar de sobra */
  .nav-login {
    justify-content: center;
    padding: .7rem 1rem;
    margin-top: .4rem;
  }

  .nav-login span {
    display: inline;
  }

  .nav-login i {
    font-size: 1rem;
  }

  .nav-btn {
    display: block;
    text-align: center;
    font-size: .85rem;
    padding: .8rem 1rem;
    letter-spacing: .3px;
  }

  nav {
    padding: .6rem 5%;
    gap: .6rem;
  }
}

/* Con el menú, el logo puede quedarse grande hasta bien abajo */
@media (max-width: 420px) {
  .logo-wrap {
    width: 3rem;
    height: 3rem;
  }
  .logo-name {
    font-size: 1rem;
    letter-spacing: 1.5px;
  }
  nav {
    padding: .55rem 4%;
  }
}

@media (prefers-reduced-motion: reduce) {
  nav .nav-r,
  .nav-toggle-bar {
    transition: none;
  }
}

/* ==================================================
   1 A 1 · presentación del plan e ítems con explicación
   El Premium trae una presentación corta (tagline) y cada
   ítem con su explicación debajo ("Título | explicación").
   ================================================== */
.svc-intro {
  margin-top: .8rem;
  font-size: .86rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
}
.svc h3 + .svc-intro + .svc-features {
  margin-top: .6rem;
}
.svc-feat {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.svc-feat b {
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.svc-feat small {
  font-size: .8rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.5);
}

/* ==================================================
   1 A 1 · aire entre el título y las tarjetas
   Se sacó la nota de la cuota del gym que hacía de separador:
   sin ella, el Premium (sobresale 1rem con margin-block negativo)
   quedaba encimado sobre "100% personalizado".
   ================================================== */
.sc-head + .svcs-grid {
  margin-top: 2.2rem;
}

/* ==================================================
   HERO · aire arriba del título
   Se sacó la etiqueta "Cuerpo · Mente" que iba sobre el título:
   sin ella, el título quedaba pegado al menú.
   ================================================== */
.hero-content > h1:first-child {
  margin-top: .75rem;
}
@media (min-width: 1024px) {
  .hero-content > h1:first-child {
    margin-top: 3rem;
  }
}