/* =============================================================================
   SocialZentral v2 — Navegación por apartados + pasarela de planes en móvil
   Se carga DESPUÉS de style.css. Solo añade/sobrescribe lo necesario.
   ============================================================================= */

:root {
  --nav-h: 84px;
  --nav-h-scrolled: 60px;
}

/* -----------------------------------------------------------------------------
   1. HOME vs APARTADO
   - Home  (por defecto): se ven hero + trust-bar + hub. Apartados ocultos.
   - body.ap-open: se oculta la home y se muestra el apartado activo.
----------------------------------------------------------------------------- */
.apartados { display: none; }

.apartado { display: none; }
.apartado.is-active { display: block; }

body.ap-open .apartados { display: block; }

body.ap-open .hero,
body.ap-open .trust-bar,
body.ap-open .hub,
body.ap-open .hero-scroll-hint { display: none !important; }

/* La barra de progreso de scroll no aporta con apartados cortos */
body.ap-open #scroll-progress { opacity: 0; }

/* Cuando estamos en la home, resaltar "Inicio" en el nav no hace falta;
   cuando hay apartado abierto, el enlace activo lo marca nav-views.js */
.nav-links a.is-current { color: var(--gold-soft); }

/* -----------------------------------------------------------------------------
   2. HUB (los 4 botones grandes en la home)
----------------------------------------------------------------------------- */
.hub {
  position: relative;
  z-index: 2;
  padding: clamp(48px, 8vw, 96px) 24px clamp(64px, 10vw, 120px);
}
.hub-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.hub-kicker {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--gold-metallic);
  text-align: center;
  margin-bottom: 28px;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.4vw, 26px);
}
.hub-card {
  --hub-accent: var(--gold-metallic);
  display: flex;
  align-items: flex-start;
  gap: 20px;
  text-align: left;
  width: 100%;
  padding: clamp(24px, 3vw, 38px);
  background: linear-gradient(160deg, var(--bg-card) 0%, var(--bg-card-soft) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  color: var(--text-white);
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out),
              box-shadow 0.4s var(--ease-out),
              background 0.4s var(--ease-out);
}
.hub-card:hover,
.hub-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: var(--shadow-gold);
  outline: none;
}
.hub-card:active { transform: translateY(-2px); }

.hub-card-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold-metallic);
  flex-shrink: 0;
}
.hub-card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hub-card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.12rem, 2vw, 1.4rem);
  line-height: 1.2;
}
.hub-card-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.hub-card-arrow {
  font-size: 1.3rem;
  color: var(--gold-metallic);
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-out);
}
.hub-card:hover .hub-card-arrow { transform: translateX(6px); }

/* -----------------------------------------------------------------------------
   3. BARRA DE APARTADO (botón "Volver al inicio")
----------------------------------------------------------------------------- */
.apartados { padding-top: var(--nav-h); }

.ap-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px clamp(16px, 5vw, 48px);
  background: rgba(11, 26, 42, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.12);
}
.navbar.scrolled ~ .apartados .ap-bar { top: var(--nav-h-scrolled); }

.ap-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: transparent;
  border: 1px solid var(--gold-metallic);
  border-radius: 999px;
  color: var(--gold-metallic);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.ap-back:hover { background: var(--gold-metallic); color: var(--bg-space); }
.ap-bar-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-white);
  letter-spacing: 0.02em;
}

/* El primer section dentro de un apartado no necesita el enorme padding-top
   que compensaba el hero en la versión de scroll continuo. */
.apartado > section:first-of-type { padding-top: clamp(48px, 8vw, 90px); }

/* -----------------------------------------------------------------------------
   4. PLANES · PASARELA HORIZONTAL EN MÓVIL
   El grid de 3 planes pasa a carrusel con scroll-snap. Se ve el plan del
   centro (destacado) y asoman el más barato (izq) y el más caro (der).
----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #ap-planes .planes-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 0 18px;
    /* sangrado hasta los bordes de la pantalla + carriles laterales para
       que asomen las tarjetas vecinas */
    margin-inline: calc(50% - 50vw);
    padding-inline: 13vw;
    scroll-padding-inline: 13vw;
  }
  #ap-planes .planes-grid::-webkit-scrollbar { display: none; }

  #ap-planes .planes-grid .plan-card {
    flex: 0 0 74vw;
    scroll-snap-align: center;
    margin: 0;
    opacity: 0.55;
    transform: scale(0.94);
    transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  }
  /* La tarjeta centrada se resalta (la marca nav-views.js) */
  #ap-planes .planes-grid .plan-card.in-view {
    opacity: 1;
    transform: scale(1);
  }

  /* Puntos indicadores de la pasarela */
  .plan-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 4px;
  }
  .plan-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(212, 175, 55, 0.28);
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
  }
  .plan-dot.is-active { background: var(--gold-metallic); transform: scale(1.35); }

  .ap-bar-title { display: none; }
}

/* En escritorio no hay puntos */
.plan-dots { display: none; }

/* -----------------------------------------------------------------------------
   5. AJUSTES MENORES
----------------------------------------------------------------------------- */
/* El botón "Inicio" del nav solo tiene sentido con un apartado abierto */
body:not(.ap-open) .nav-links a.nav-home-link { display: none; }

@media (max-width: 992px) {
  body:not(.ap-open) .nav-links a.nav-home-link { display: block; }
}

/* Reanuda la animación de revelado dentro de un apartado recién abierto:
   nav-views.js les pone .is-visible, pero por si acaso, sin JS se ven igual */
.apartado:not(.is-active) .reveal,
.apartado:not(.is-active) .reveal-child { opacity: 1; transform: none; }

@media (max-width: 560px) {
  .hub-grid { grid-template-columns: 1fr; }
  .hub-card-num { font-size: 1.5rem; }
}

/* -----------------------------------------------------------------------------
   6. RENDIMIENTO DE SCROLL EN MÓVIL / TÁCTIL
   El scroll "lento" en el móvil viene de efectos que obligan a repintar toda
   la pantalla en cada frame. Aquí los desactivamos solo en pantallas táctiles;
   en escritorio se mantiene todo el acabado premium.
----------------------------------------------------------------------------- */
@media (max-width: 900px), (hover: none) {

  /* #1: background-attachment: fixed obliga a repintar el fondo entero en
     cada frame de scroll en los navegadores móviles. Es la causa principal. */
  body {
    background-attachment: scroll !important;
    background-image: none !important;
    background-color: var(--bg-space) !important;
  }

  /* #2: backdrop-filter en la barra fija repinta un área enorme al hacer scroll */
  .navbar,
  .navbar.scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(11, 26, 42, 0.94) !important;
  }

  /* #3: capa de grano animada a pantalla completa */
  .grain-overlay { display: none !important; }

  /* #4: la barra "Volver" deja de ser sticky y pierde el blur en móvil */
  .ap-bar {
    position: static;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(11, 26, 42, 0.96);
  }

  /* #5: la barra de progreso de scroll fuerza un paint por frame */
  #scroll-progress { display: none !important; }

  /* quitar promociones de capa que saturan la GPU del móvil */
  .ambient-gradient,
  .ambient-gradient::before,
  .ambient-gradient::after,
  .blueprint-bg,
  .hero-glow { will-change: auto !important; }
}