/* =========================================================
   NOVO aplicado al home (piloto) — layout específico de index.html.
   Depende de los tokens/componentes de novo-design-system.css.
   ========================================================= */

.novo{ font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; }

/* ---------- Encabezado transparente (solo en esta página) ----------
   El header vive fuera del hero, así que solo con "transparent" se veía
   el blanco de la página detrás. Lo hacemos flotar SOBRE el hero (margen
   negativo igual a su alto) para que el degradado lavanda se vea a través. */
.site-header{ background:transparent; backdrop-filter:none; border-bottom:none; margin-bottom:-100px; position:relative; z-index:20; }
.logo img{ filter:drop-shadow(0 1px 6px rgba(255,255,255,.6)); }

/* ---------- Nav del encabezado como una sola cápsula agrupada ---------- */
.main-nav{
  gap:2px;
  background:#fff;
  border-radius:var(--radius-pill);
  padding:6px;
  box-shadow:0 14px 30px -18px rgba(31,27,28,.35);
}
.main-nav a{
  padding:9px 18px;
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:.86rem;
  white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.main-nav a:hover{ background:var(--lav-100); color:var(--purple-deep); }
.main-nav a.is-active{ background:var(--lav-100); color:var(--purple-deep); }
.nav-club{ background:var(--lav-100); color:var(--purple-deep); }

/* Las píldoras necesitan más ancho que el texto plano de las otras páginas,
   así que aquí el menú hamburguesa entra antes (1040px en vez de 720px). */
@media (max-width:1040px){
  .main-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:10px;
    background:#fff; border-bottom:1px solid var(--color-border);
    border-radius:0 0 20px 20px;
    padding:12px 24px 16px;
    box-shadow:0 20px 30px -20px rgba(31,27,28,.25);
  }
  .main-nav.is-open{ display:flex; }
  .nav-toggle{ display:flex; }
  .header-actions .novo-btn{ display:none; }
}

/* ---------- Variante de botón fantasma para fondos oscuros ---------- */
.novo-btn--ghost-light{
  background:transparent;color:#fff;box-shadow:none;
  border:1.5px solid rgba(255,255,255,.5);
}
.novo-btn--ghost-light::before{ display:none; }
.novo-btn--ghost-light .dot{ background:#fff;color:var(--purple-deep); }
.novo-btn--ghost-light:hover{ border-color:#fff;background:rgba(255,255,255,.08); }

/* ---------- Hero ---------- */
.novo-hero{
  position:relative;
  overflow:hidden;
  min-height:clamp(560px,84vh,800px);
  display:flex;
  align-items:center;
  background:linear-gradient(180deg,var(--lav-50) 0%,var(--lav-100) 62%,var(--lav-200) 100%);
  padding-top:128px; /* 28px de diseño + 100px del header flotante encima */
  padding-bottom:64px;
}

/* La tarjeta del buscador se solapaba con los botones del hero al pasar
   al layout nuevo (más alto y flexible); le quitamos el jalón hacia arriba. */
.finder-shell{ margin-top:24px; }

.novo-hero-grid{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(300px,960px) 1fr minmax(140px,172px);
  gap:24px;
  align-items:center;
  width:100%;
  margin-top:-48px;
}

.novo-hero-copy{ position:relative; z-index:3; }
.novo-hero-copy .t-section{ color:var(--purple-deep); margin-bottom:14px; }
.novo-hero-copy .t-body{ margin-top:18px; max-width:none; }

.novo-hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }

.novo-hero-stats{
  position:relative; z-index:3;
  display:flex; flex-direction:column; gap:22px;
}
.novo-hero-stats strong{
  display:block; font-size:1.7rem; font-weight:800; color:var(--purple-deep); line-height:1;
}
.novo-hero-stats > div > span{ display:block; margin-top:6px; font-size:.78rem; color:var(--ink-soft); }

.novo-hero-spacer{
  position:relative;
  height:100%;
  min-height:340px;
  align-self:stretch;
}
.novo-hero-figure{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  z-index:2;
  width:min(480px,190%);
  max-width:92vw;
  pointer-events:none;
}
.novo-hero-figure .fx-bloom{ z-index:0; }
.novo-hero-img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  border-radius:var(--radius-card) var(--radius-card) 0 0;
  box-shadow:var(--shadow-lift);
}

.novo-wordmark{
  position:absolute;
  left:50%;
  bottom:-4%;
  transform:translateX(-50%);
  z-index:1;
  color:rgba(139,92,246,.16);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}

@media (max-width:860px){
  .novo-hero{ padding-top:120px; padding-bottom:48px; }
  .novo-hero-grid{ grid-template-columns:1fr; text-align:center; gap:32px; }
  .novo-hero-copy{ order:1; }
  .novo-hero-copy .t-body{ margin-left:auto; margin-right:auto; }
  .novo-hero-ctas{ justify-content:center; }
  .novo-hero-spacer{ min-height:0; order:2; }
  .novo-hero-figure{
    position:static; transform:none; width:min(420px,86%); max-width:100%; margin:4px auto 0;
  }
  .novo-hero-stats{
    order:3; flex-direction:row; justify-content:center; flex-wrap:wrap; gap:26px; text-align:center; margin-top:8px;
  }
  .novo-wordmark{ font-size:clamp(48px,17vw,120px); }
}

/* ---------- Banda del wordmark "STUDIO" (llena el hueco tras el buscador) ---------- */
.novo-wordmark-band{
  position:relative;
  overflow:hidden;
  padding-bottom:24px;
}
.novo-wordmark-band .novo-wordmark{
  position:relative;
  left:auto;
  bottom:auto;
  transform:none;
  display:block;
  text-align:center;
  color:rgba(139,92,246,.14);
}

/* ---------- Pills del ecosistema ---------- */
#baile{ padding-top:24px; padding-bottom:32px; }
#sedes{ padding-top:32px; padding-bottom:32px; }
.benefit{ padding-top:32px; padding-bottom:32px; }

/* ---------- Contacto: más compacto, botón a la derecha ---------- */
#contacto{ padding-top:48px; padding-bottom:48px; }
#contacto .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
#contacto .section-head{ margin-bottom:0; }
#contacto .contact-cta{ justify-content:flex-end; flex:none; }

@media (max-width:720px){
  #contacto .container{ flex-direction:column; align-items:stretch; text-align:center; }
  #contacto .contact-cta{ justify-content:center; }
}

#baile .section-head{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
#baile .eyebrow{ font-size:1.05rem; }
#baile .section-lead{ font-size:.92rem; }

/* Píldoras con más brillo/color, menos planas */
.pill--soft{ background:linear-gradient(135deg,var(--lav-100),var(--lav-200)); }
.pill--dark{ background:linear-gradient(135deg,#241a42,#4a2a94); }
.pill--grey{ background:linear-gradient(135deg,var(--lav-50),var(--lav-100)); }

/* ---------- Club Vizcaya con el mismo look del hero ---------- */
#club{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,var(--lav-50) 0%,var(--lav-100) 55%,var(--lav-200) 100%);
  color:var(--ink);
  padding-top:48px;
  padding-bottom:48px;
}
#club .eyebrow-light{ color:var(--purple-deep); }
#club .club-text{ color:var(--ink-soft); }
#club .fx-bloom{
  bottom:auto; top:60%; width:min(420px,55%);
  background:radial-gradient(circle at 50% 55%,
    rgba(255,255,255,.45) 0%,
    rgba(226,211,253,.4) 30%,
    rgba(139,92,246,.24) 55%,
    rgba(139,92,246,0) 75%);
}
#club .novo-wordmark{ bottom:-6%; }

/* ---------- Footer con el mismo look del hero ---------- */
.site-footer{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,var(--lav-50) 15%,var(--lav-100) 45%,var(--lav-200) 70%,#fff 100%);
  color:var(--ink-soft);
  padding-top:48px;
}
.site-footer .fx-bloom{
  left:auto; right:-16%; bottom:auto; top:-42%;
  width:min(360px,48%);
  background:radial-gradient(circle at 50% 55%,
    rgba(255,255,255,.4) 0%,
    rgba(226,211,253,.32) 35%,
    rgba(139,92,246,.16) 60%,
    rgba(139,92,246,0) 78%);
  animation:none;
}
.footer-inner{ border-bottom-color:var(--line); }
.footer-brand p{ color:var(--ink-soft); }
.logo-footer img{ filter:none; }
.footer-col h4{ color:var(--ink); }
.footer-col a{ color:var(--ink-soft); }
.footer-col a:hover{ color:var(--purple-deep); }
.footer-bottom{ color:var(--ink-soft); }

@media (max-width:900px){
  .pills{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Reveal on scroll: separación visual entre bloques ---------- */
.novo .reveal{ will-change:opacity,transform; }