/* Grow With Fans 2026 — componentes de las páginas troncales.
   Depende de los tokens de gwf.css. */

/* barras de países / intención */
.gwf-bars { display: grid; grid-template-columns: 1fr; gap: 16px 48px; }
@media (min-width: 760px) { .gwf-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gwf-bar { display: grid; grid-template-columns: 120px minmax(0, 1fr) 56px; align-items: center; gap: 14px; font-size: 15px; }
.gwf-bar__track { height: 12px; border-radius: 999px; background: var(--gwf-line-2); }
.gwf-bar__fill { height: 12px; border-radius: 999px; background: var(--gwf-violet-light); }
.gwf-bar__fill--hot { background: var(--gwf-pink); }
.gwf-bar__fill--dim { background: #4B4366; }
.gwf-bar__pct { text-align: right; font-weight: 700; }
.gwf-meter { display: flex; flex-direction: column; gap: 8px; }
.gwf-meter__top { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.gwf-meter .gwf-bar__track, .gwf-meter .gwf-bar__fill { height: 10px; }

/* armador de campaña (maqueta) */
.gwf-choice { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gwf-choice span { text-align: center; border: 1px solid var(--gwf-line-3); border-radius: 10px; padding: 12px 0; font-weight: 600; }
.gwf-choice .is-on { border: 2px solid var(--gwf-pink); background: var(--gwf-card-3); padding: 11px 0; }
.gwf-field { border: 1px solid var(--gwf-line-3); border-radius: 10px; padding: 12px; font-size: 14px; }
.gwf-estimate { background: var(--gwf-bg); border-radius: 14px; padding: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* formatos (mini maquetas) */
.gwf-mock { height: 200px; border-radius: 18px; background: var(--gwf-card); border: 1px solid var(--gwf-line); padding: 16px; }
.gwf-mock--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gwf-mock--grid div { border-radius: 8px; background: var(--gwf-line-2); }
.gwf-mock .is-hot { background: #3A2547 !important; border: 2px solid var(--gwf-pink); }
.gwf-mock--list { display: flex; flex-direction: column; gap: 10px; }
.gwf-mock__bar { height: 14px; width: 55%; border-radius: 6px; background: var(--gwf-line); }
.gwf-mock__hit { flex: 1; border-radius: 10px; display: flex; align-items: center; padding: 0 14px; font-size: 13px; font-weight: 700; }
.gwf-mock__foot { height: 26px; border-radius: 8px; background: var(--gwf-line-2); }
.gwf-mock--side { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.gwf-mock--side div { border-radius: 10px; background: var(--gwf-line-2); }
.gwf-mock--side .is-hot { display: flex; align-items: flex-end; padding: 8px; font-size: 11px; font-weight: 700; }

/* cifras en fila con divisores */
.gwf-figures { display: grid; grid-template-columns: 1fr; border: 1px solid var(--gwf-line); border-radius: var(--gwf-radius-lg); overflow: hidden; }
.gwf-figures > div { padding: 28px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--gwf-line); }
.gwf-figures > div:last-child { border-bottom: 0; }
.gwf-figures strong { font-family: var(--gwf-font-display); font-size: 40px; font-weight: 800; }
@media (min-width: 900px) {
  .gwf-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gwf-figures > div { border-bottom: 0; border-right: 1px solid var(--gwf-line); }
  .gwf-figures > div:last-child { border-right: 0; }
}

/* lista numerada en tarjetas */
.gwf-numlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.gwf-numlist li { display: flex; gap: 18px; align-items: flex-start; background: var(--gwf-card); border: 1px solid var(--gwf-line); border-radius: var(--gwf-radius); padding: 20px; font-size: 16px; line-height: 1.55; }
.gwf-numlist b { font-family: var(--gwf-font-display); color: var(--gwf-pink); font-size: 20px; }

/* recorrido en nodos */
.gwf-journey { display: grid; grid-template-columns: 1fr; gap: 12px; text-align: left; width: 100%; padding-top: 24px; }
@media (min-width: 700px) { .gwf-journey { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.gwf-journey > div { background: var(--gwf-card); border: 1px solid var(--gwf-line); border-radius: var(--gwf-radius); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.gwf-journey > div.is-hot { background: var(--gwf-card-2); border: 2px solid var(--gwf-pink); }
.gwf-journey span { font-size: 12px; color: var(--gwf-muted-2); }
.gwf-journey .is-hot span { color: var(--gwf-pink-text); }
.gwf-journey small { font-size: 13px; color: var(--gwf-muted); }

/* zigzag */
.gwf-zig { display: flex; flex-direction: column; gap: 72px; }
.gwf-zig__num { font-family: var(--gwf-font-display); font-size: 64px; font-weight: 800; color: var(--gwf-line); line-height: 1; }
@media (min-width: 1000px) { .gwf-zig > .gwf-split:nth-child(even) > :first-child { order: 2; } }

/* embudo */
.gwf-funnel { display: flex; flex-direction: column; gap: 12px; }
.gwf-funnel > div { border-radius: var(--gwf-radius); padding: 22px 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 17px; max-width: 100%; }
.gwf-funnel strong { font-family: var(--gwf-font-display); font-size: 24px; }

/* línea de tiempo vertical */
.gwf-vtl { margin: 0; padding: 0 0 0 28px; list-style: none; border-left: 2px solid var(--gwf-line); display: flex; flex-direction: column; gap: 32px; }
.gwf-vtl li { position: relative; display: flex; flex-direction: column; gap: 6px; }
.gwf-vtl li::before { content: ""; position: absolute; left: -38px; top: 4px; width: 16px; height: 16px; border-radius: 999px; background: var(--gwf-violet-light); }
.gwf-vtl li.is-hot::before { background: var(--gwf-pink); }
.gwf-vtl b { font-family: var(--gwf-font-display); color: var(--gwf-violet-light); }
.gwf-vtl li.is-hot b { color: var(--gwf-pink-text); }
.gwf-vtl strong { font-size: 18px; }

/* reglas permitido / no */
.gwf-rule { border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.gwf-rule--ok { border: 1px solid #2F5A41; background: #0F1A14; }
.gwf-rule--no { border: 1px solid #5A2636; background: #1A0F13; }
.gwf-rule--ok > strong { color: var(--gwf-green); font-size: 18px; }
.gwf-rule--no > strong { color: #FF8FA8; font-size: 18px; }
.gwf-rule ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--gwf-text-2); }

/* checklist en tarjetas */
.gwf-checks { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .gwf-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gwf-checks li { background: var(--gwf-card); border: 1px solid var(--gwf-line); border-radius: var(--gwf-radius); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.gwf-checks strong { color: var(--gwf-pink); }
.gwf-checks span { font-size: 15px; line-height: 1.55; color: var(--gwf-muted); }

/* bento */
.gwf-bento { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .gwf-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gwf-bento .is-wide { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .gwf-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gwf-bento .is-wide { grid-column: span 2; } }
.gwf-kicker { font-size: 13px; font-weight: 700; color: var(--gwf-violet-light); }
.gwf-kicker--pink { color: var(--gwf-pink-text); }

/* franja manifiesto */
.gwf-band { background: var(--gwf-violet-deep); padding: 80px 0; text-align: center; }
.gwf-band h2 { color: #fff; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; font-weight: 800; max-width: 900px; margin: 0 auto; }
.gwf-band p { color: #E6DCFF; font-size: 19px; line-height: 1.6; max-width: 760px; margin: 20px auto 0; }

/* escalones de volumen */
.gwf-tiers { display: flex; flex-direction: column; gap: 12px; }
.gwf-tiers > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--gwf-card); border: 1px solid var(--gwf-line); border-radius: var(--gwf-radius); padding: 22px 26px; font-size: 17px; }
.gwf-tiers > div.is-hot { background: var(--gwf-card-3); border-color: var(--gwf-pink); }
.gwf-tiers em { font-style: normal; color: var(--gwf-pink-text); font-weight: 700; }

/* formulario */
.gwf-form { display: flex; flex-direction: column; gap: 18px; }
.gwf-form label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--gwf-text-2); }
.gwf-form input, .gwf-form select { background: var(--gwf-bg); border: 1px solid var(--gwf-line-3); border-radius: 10px; padding: 14px; color: var(--gwf-text); font-size: 15px; font-family: var(--gwf-font); }

/* tarjetas-link de recursos */
.gwf .gwf-res { text-decoration: none; color: var(--gwf-text); }
.gwf .gwf-res:hover { color: var(--gwf-text); border-color: var(--gwf-pink); }
.gwf-res strong { font-family: var(--gwf-font-display); font-size: 21px; }

/* diagrama de 5 pasos (postback) */
.gwf-flow { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .gwf-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.gwf-flow > div { background: var(--gwf-card); border: 1px solid var(--gwf-line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.gwf-flow > div.is-hot { background: var(--gwf-card-2); border: 2px solid var(--gwf-pink); }
.gwf-flow b { font-family: var(--gwf-font-display); color: var(--gwf-pink); }
.gwf-flow span { font-size: 14px; color: var(--gwf-muted); }
.gwf-flow code { color: var(--gwf-text-2); }

/* selector de precios */
.gwf-tabs { display: inline-flex; gap: 6px; background: var(--gwf-card); border: 1px solid var(--gwf-line); border-radius: 14px; padding: 6px; }
.gwf-tabs button { border: 0; cursor: pointer; font-family: var(--gwf-font); font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 10px; background: transparent; color: #fff; min-height: 44px; }
.gwf-tabs button[aria-selected="true"] { background: var(--gwf-pink-deep); }
.gwf-panel[hidden] { display: none !important; }
.gwf-card--dashed { background: transparent; border: 1px dashed var(--gwf-line-3); }
.gwf-card--violet { background: var(--gwf-violet-deep); border: 0; }
.gwf-card--violet, .gwf-card--violet .gwf-h3, .gwf-card--violet .gwf-price { color: #fff; }
.gwf-card ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--gwf-text-2); }
.gwf-card--violet ul { color: #F1ECFF; }
.gwf-methods { display: flex; flex-wrap: wrap; gap: 10px; }
.gwf-method { border: 1px solid var(--gwf-line-3); border-radius: 12px; padding: 12px 16px; font-weight: 600; }

/* historia (about) */
.gwf-story { position: relative; display: grid; grid-template-columns: 1fr; gap: 36px; }
.gwf-story__line { display: none; }
@media (min-width: 900px) {
  .gwf-story { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .gwf-story__line { display: block; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--gwf-line); }
}
.gwf-story > div { position: relative; display: flex; flex-direction: column; gap: 14px; }
.gwf-story__dot { width: 20px; height: 20px; border-radius: 999px; background: var(--gwf-violet-light); }
.gwf-story__dot--hot { background: var(--gwf-pink); }
.gwf-story__year { font-family: var(--gwf-font-display); font-weight: 800; font-size: 28px; }

/* principios numerados */
.gwf-principles { display: flex; flex-direction: column; }
.gwf-principles > div { display: flex; gap: 22px; padding: 24px 0; border-top: 1px solid var(--gwf-line); }
.gwf-principles > div:last-child { border-bottom: 1px solid var(--gwf-line); }
.gwf-principles b { font-family: var(--gwf-font-display); color: var(--gwf-pink); font-size: 20px; }
.gwf-principles strong { display: block; font-size: 19px; margin-bottom: 6px; }
.gwf-principles span { font-size: 15px; line-height: 1.6; color: var(--gwf-muted); }