/*
 * Wealtfy Galería — retematiza la base (main.css): tinta profunda, lavanda y
 * acento champagne; tipografía display fina y mucho aire. Solo en body.is-galeria.
 */
body.is-galeria {
  --w-cyan: #e8d5b0;            /* eyebrows y acentos: champagne */
  --champagne: #e8d5b0;
  --lav: #c9bfff;
  --bg: #0a0820;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-strong: rgba(18, 14, 46, 0.72);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.22);
  --fg-2: rgba(244, 241, 255, 0.72);
  --fg-3: rgba(244, 241, 255, 0.50);
  --grad: linear-gradient(95deg, #f4f1ff 0%, #c9bfff 45%, #e8d5b0 100%);
  --display: "Clash Display", "Avenir Next", Arial, sans-serif;
  background: #0a0820;
}

.is-galeria .wf-scene-fallback {
  background:
    radial-gradient(55% 45% at 72% 38%, rgba(134, 24, 255, 0.20), transparent 70%),
    radial-gradient(45% 40% at 18% 85%, rgba(8, 185, 244, 0.08), transparent 70%),
    radial-gradient(80% 60% at 50% 0%, rgba(201, 191, 255, 0.07), transparent 70%),
    #0a0820;
}

/* Tipografía */
.is-galeria .wf-title,
.is-galeria .wf-brand__name,
.is-galeria .wf-plan h3,
.is-galeria .wf-plan__price strong { font-family: var(--display); }
.is-galeria .wf-title { font-weight: 400; letter-spacing: -0.035em; line-height: 1.06; }
.is-galeria h1.wf-title { font-size: clamp(44px, 6.4vw, 92px); line-height: 1.0; }
.is-galeria .wf-eyebrow { font-weight: 500; letter-spacing: .28em; }
.is-galeria .wf-lead { font-weight: 300; }

/* Header */
.is-galeria .wf-header.is-scrolled { background: rgba(10, 8, 32, 0.7); }
.is-galeria .wf-btn--primary { background: #f4f1ff; color: #0a0820; box-shadow: none; }
.is-galeria .wf-btn--primary:hover { box-shadow: 0 10px 30px -10px rgba(232, 213, 176, 0.6); }
.is-galeria .wf-btn--ghost { background: transparent; }
.is-galeria .wf-btn--ghost:hover { border-color: var(--champagne); background: rgba(232, 213, 176, 0.06); }

/* Hero: texto arriba, el carrusel completo debajo */
.is-galeria .wf-stage--hero { align-items: flex-start; padding-top: calc(var(--header-h) + 11vh); }
.gl-hero { max-width: 880px; margin: 0 auto; text-align: center; }
.gl-hero .wf-lead { max-width: 600px; margin-left: auto; margin-right: auto; }

/* Capacidades */
.gl-feature { min-height: 130vh; }
.gl-panel { max-width: 460px; }
.gl-index { margin: 0 0 40px; font: 400 13px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em; color: var(--fg-3); }
.gl-index span { color: var(--champagne); }
.gl-index::after { content: ""; display: block; width: 56px; height: 1px; margin-top: 18px; background: linear-gradient(90deg, var(--champagne), transparent); }
.is-galeria .gl-panel .wf-title { font-size: clamp(32px, 3.6vw, 50px); }
.gl-points { margin: 0 0 28px; padding: 0; list-style: none; }
.gl-points li { padding: 14px 0; border-top: 1px solid var(--border); font-size: 15px; color: var(--fg-2); }
.gl-points li:last-child { border-bottom: 1px solid var(--border); }
.gl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0; }
.gl-more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--fg-1); text-decoration: none; }
.gl-more .wf-ic { width: 16px; height: 16px; color: var(--champagne); transition: transform .2s; }
.gl-more:hover .wf-ic, .gl-more:focus-visible .wf-ic { transform: translateX(4px); }
.gl-plan { display: inline-block; margin: 0; padding: 6px 14px; border: 1px solid rgba(232, 213, 176, 0.4); border-radius: 999px; font-size: 12px; letter-spacing: .08em; color: var(--champagne); }

/* Riel de progreso: a la izquierda, fuera de la escena; el nombre aparece al pasar el cursor */
.gl-rail { position: fixed; left: 28px; top: 50%; z-index: 20; display: flex; flex-direction: column; gap: 2px; transform: translateY(-50%); transition: opacity .4s; }
.gl-rail:not(:has(a.is-active)) { opacity: 0; pointer-events: none; }
.gl-rail a { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 12px; color: var(--fg-3); text-decoration: none; transition: color .3s; }
.gl-rail a::before { content: ""; width: 14px; height: 1px; background: currentColor; transition: width .3s; }
.gl-rail a span:not(.gl-rail__name) { font: 400 11px/1 ui-monospace, Menlo, monospace; }
.gl-rail a .gl-rail__name { order: 3; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; padding: 3px 0; transition: max-width .45s ease, opacity .3s; }
.gl-rail a:hover, .gl-rail a:focus-visible { color: var(--fg-1); }
.gl-rail a:hover .gl-rail__name, .gl-rail a:focus-visible .gl-rail__name { max-width: 180px; opacity: 1; }
.gl-rail a.is-active { color: var(--champagne); }
.gl-rail a.is-active::before { width: 30px; }

/* Planes */
.is-galeria .wf-stage--plans { background: linear-gradient(to bottom, transparent, rgba(10, 8, 32, 0.6) 16%, rgba(10, 8, 32, 0.82)); }
.is-galeria .wf-plan { background: rgba(18, 14, 46, 0.7); }
.is-galeria .wf-plan.is-popular { border-color: rgba(232, 213, 176, 0.55); box-shadow: 0 30px 80px -40px rgba(232, 213, 176, 0.35); }
.is-galeria .wf-plan__badge { background: var(--grad); }
.is-galeria .wf-plan li .wf-ic { color: var(--champagne); }
.is-galeria .wf-footer { background: rgba(8, 6, 26, 0.92); }

@media (max-width: 1340px) {
  .gl-rail { display: none; }
}
@media (max-width: 860px) {
  /* Menos scroll en celular: la portada mide su contenido y cada capacidad cierra con poco aire
     (la viñeta de la siguiente ya aparece en el espacio superior de esa sección). */
  .is-galeria .wf-stage--hero { min-height: auto; padding-top: calc(var(--header-h) + 6vh); padding-bottom: 10vh; align-items: flex-start; }
  /* El texto empieza justo bajo la viñeta (ocupa ~10–46 % de la pantalla; con el 72svh general
     de main.css quedaba un hueco grande desde que las viñetas se ajustan al ancho). */
  .gl-feature { min-height: auto; padding-top: 52svh; padding-bottom: 6vh; }
  .gl-panel { max-width: none; padding: 26px 22px; background: rgba(10, 8, 32, 0.78); border: 1px solid var(--border); border-radius: 20px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .gl-index { margin-bottom: 24px; }
}

/* Cierre como sección propia (plantilla Bloques) */
.gl-closing { min-height: auto; display: block; padding: 40px 0 140px; }
.gl-closing .wf-cta { margin-top: 0; }