<!--
=====================================================================
PÁGINA DE VENDAS — "Ganá tu Año" · Sofía Contreras / Mastery Haus
=====================================================================
02/09/2026 · Produto core do funil (o alto ticket do lançamento), vendido
para a sala do bootcamp "Ganá tu día". Copy: brief "Ganá tu Año | Brief de
producto". Idioma: espanhol rioplatense (voseo). Copy preservada quase toda
verbatim; ver "AJUSTES DE COPY" no fim deste cabeçalho.

DESTINO: Go High Level. Este arquivo inteiro vai colado dentro de UM
elemento de código da página do GHL, igual às outras páginas da Sofía
(masteryhaus.com/gana-tu-dia-v1 etc.). Não há dependência externa além do
Google Fonts.

CONCEITO: "El Camino" (mochila, cordillera, campamentos, el paso, la cumbre).
A página inteira é a subida: a trilha dos 7 níveis é o eixo visual, e o
evento de dezembro é a chegada ao cume.

VERSAO B (v2) · Esta é a variante da seção dos 7 níveis com MONTANHA e
caminho largo, pedida em 02/09/2026. A gêmea, com a mesma trilha em fundo
creme e linha fina, é gana_tu_ano.html. Fora essa seção as duas são iguais.
Aqui a seção é escura, com a serra e um mapa topográfico ao fundo
(CONFIG.IMG.sierra e CONFIG.IMG.mapa, exclusivos desta versão) e a trilha é
uma rota de carta topográfica. Ela termina no NÍVEL VII: o card do Trasciende
inverte para o dourado, o último trecho sai em ouro cheio e um halo envolve a
chegada. A placa "Y acá termina la subida" foi removida em 02/09/2026 porque
repetia a seção La Cumbre 2026, que vem logo abaixo e é o ponto final.

02/09/2026 (2a rodada) · A seção dos 7 níveis virou TRILHA, a pedido do
Leandro e a partir das duas referências que ele mandou: cards em zigue-zague
(esquerda/direita), marco redondo com ícone sobrepondo o topo de cada card,
tarja dourada com o número em romano, e uma linha pontilhada curva ligando
um card ao seguinte. A linha é desenhada por JS (bloco 9b): ela sai do PÉ de
um card e sobe até o marco do próximo, então acompanha a altura real dos
cards em qualquer largura. Sem JS a linha some e os cards seguem legíveis.
No celular vira coluna única, mas o marco continua alternando de lado, que é
o que faz a trilha serpentear.

IDENTIDADE VISUAL (nova, tirada da referência de cor que o Leandro mandou:
ilustração de escadaria celeste em turquesa e ouro, e da mochila teal da
cenografia do bootcamp):
  tinta profunda #0B2E33 · tinta 2 #123F45 · teal de marca #1C6B72
  turquesa claro #7FBEC0 · ORO #C79A3B · oro claro #E3C77A
  crema #F5F1E8 (herdado da marca) · urgência terracota #C0492B
  display 'Playfair Display' · corpo 'Inter'
  Obs.: o coral/laranja do "Ganá tu día" NÃO entra aqui. Este produto tem
  identidade própria (é a subida, não o dia). O creme é o elo entre os dois.

ESCASSEZ (as três peças do padrão):
  1. fita sticky rolante no topo, com 4 mensagens
  2. barra de progresso da JANELA de inscrição (hero + card de oferta)
     Ela mede dias corridos entre a abertura e o fechamento, calculada
     sozinha pelas datas do CONFIG. Não inventa número de vagas.
     Quem quiser barra de cupos: CONFIG.PROGRESO_MODO = "cupos".
  3. aviso de inscrição no canto, só cidade e tempo, sem nome nem foto

EDITAR RÁPIDO -> bloco CONFIG (fim do arquivo):
  · Link do checkout       -> CONFIG.LINK_CHECKOUT        (PENDÊNCIA)
  · Preços                 -> CONFIG.PRECIO_*             (497 / 3x 187)
  · Abertura e fechamento  -> CONFIG.APERTURA_UTC / CIERRE_UTC
  · Início do programa     -> CONFIG.INICIO_UTC
  · Imagens                -> CONFIG.IMG.*  (URLs do Media do GHL)
  · Fotos de pessoas       -> CONFIG.FOTOS.* (Sofía + 6 mentores)
  · WhatsApp de suporte    -> CONFIG.WHATSAPP_URL         (PENDÊNCIA)

IMAGENS: a página funciona SEM nenhuma imagem. Todo bloco de imagem tem um
fundo desenhado em CSS/SVG por baixo; se a URL do CONFIG estiver vazia, o
desenho fica e nada quebra. Os arquivos gerados por IA estão em
"Sofia Contreras/imagens/ganatuano-*.jpg": subir no Media do GHL e colar as
URLs no CONFIG.IMG.

AJUSTES DE COPY (o que saiu do brief e por quê):
  · bandeiras de país dos mentores removidas (regra: zero emoji na página);
    o país virou texto ao lado da área.
  · travessões trocados por vírgula, ponto ou dois pontos (mesma regra).
  · "decidír" -> "decidir" e "Gana tu año" -> "Ganá tu Año" (voseo, como a
    marca escreve o nome em todo o resto do material).
  · "El diagnóstico", "El programa", "Los niveles" etc. eram títulos de
    documento, não de página: viraram os H2 reais de cada bloco.
  · A frase "Quedan 100 días para que se termine este año" foi mantida
    verbatim. Ela fecha certo a partir de 22/09 (início do programa); hoje,
    02/09, faltam 120 dias para 31/12. Ver PENDÊNCIAS na entrega.
=====================================================================
-->
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Meta Pixel Code -->
  <script>
    !function (f, b, e, v, n, t, s) {
      if (f.fbq) return; n = f.fbq = function () {
        n.callMethod ?
          n.callMethod.apply(n, arguments) : n.queue.push(arguments)
      };
      if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0';
      n.queue = []; t = b.createElement(e); t.async = !0;
      t.src = v; s = b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t, s)
    }(window, document, 'script',
      'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', '1022073601617770');
    fbq('track', 'PageView');
  </script>
  <noscript><img height="1" width="1" style="display:none"
      src="https://www.facebook.com/tr?id=1022073601617770&ev=PageView&noscript=1" /></noscript>
  <!-- End Meta Pixel Code -->

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-7BM8Y3J37N"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-7BM8Y3J37N');
  </script>
  <title>Ganá tu Año | Alcanzá tu cumbre 2026 con Sofía Contreras</title>
  <meta name="description"
    content="100 días para instalar el orden de tus días, la claridad de tus prioridades y la acción en lo pendiente. 7 encuentros en vivo con Sofía Contreras, 7 niveles y La Cumbre 2026 en diciembre.">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Ganá tu Año | Alcanzá tu cumbre 2026 con Sofía Contreras">
  <meta property="og:description"
    content="100 días para instalar el orden de tus días, la claridad de tus prioridades y la acción en lo pendiente. 7 encuentros en vivo con Sofía Contreras, 7 niveles y La Cumbre 2026 en diciembre.">
  <meta property="og:image" content="https://www.soficontreras.com/imagens/gana-tu-ano/ganatuano-hero-desktop.webp">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Ganá tu Año | Alcanzá tu cumbre 2026 con Sofía Contreras">
  <meta name="twitter:description"
    content="100 días para instalar el orden de tus días, la claridad de tus prioridades y la acción en lo pendiente. 7 encuentros en vivo con Sofía Contreras, 7 niveles y La Cumbre 2026 en diciembre.">
  <meta name="twitter:image" content="https://www.soficontreras.com/imagens/gana-tu-ano/ganatuano-hero-desktop.webp">
  <link rel="shortcut icon" type="image/x-icon"
    href="https://cdn.prod.website-files.com/6060e6c66acd5a7636de522c/6060e6c66acd5a899cde528b_favicon%2001.svg">
  <link rel="apple-touch-icon"
    href="https://cdn.prod.website-files.com/6060e6c66acd5a7636de522c/6060e6c66acd5a260dde5264_favicon%2002.svg">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&display=swap">

  <style>
    /* ================================================================
       TOKENS
    ================================================================ */
    :root {
      --tinta: #0B2E33;
      --tinta-2: #123F45;
      --tinta-3: #17565C;
      --teal: #1C6B72;
      --teal-claro: #7FBEC0;
      --oro: #C79A3B;
      --oro-claro: #E3C77A;
      --oro-oscuro: #8A6A21;
      --crema: #F5F1E8;
      --crema-2: #EDE6D6;
      --blanco: #FFFDF8;
      --texto: #16292B;
      --texto-suave: #566B6C;
      --urgencia: #C0492B;
      --urgencia-osc: #A03A20;
      --radio: 16px;
      --radio-sm: 10px;
      --sombra: 0 18px 44px rgba(11, 46, 51, .13);
      --sombra-sm: 0 6px 18px rgba(11, 46, 51, .10);
      --borde: 1px solid rgba(11, 46, 51, .12);
      --wrap: 1180px;
      --fita: 44px;
    }

    /* ================================================================
       RESET
    ================================================================ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--crema);
      color: var(--texto);
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
      font-size: 17px;
      line-height: 1.62;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* hidden precisa vencer os display:flex/block das regras abaixo:
       é ele que segura os blocos que só aparecem quando o CONFIG
       tem valor (imagens, contador, garantia, foto do hero no mobile) */
    [hidden] {
      display: none !important;
    }

    a {
      color: inherit;
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      line-height: 1.12;
      margin: 0 0 .5em;
      letter-spacing: -.01em;
    }

    p {
      margin: 0 0 1.05em;
    }

    p:last-child {
      margin-bottom: 0;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    button {
      font: inherit;
    }

    /* ================================================================
       ESTRUTURA
    ================================================================ */
    .wrap {
      width: 100%;
      max-width: var(--wrap);
      margin: 0 auto;
      padding: 0 22px;
    }

    .seccion {
      padding: 92px 0;
      position: relative;
    }

    .seccion--ajustada {
      padding: 68px 0;
    }

    .seccion--crema {
      background: var(--crema);
    }

    .seccion--crema2 {
      background: var(--crema-2);
    }

    .seccion--oscura {
      background: var(--tinta);
      color: #E8F1F0;
    }

    .seccion--oscura h2,
    .seccion--oscura h3 {
      color: var(--blanco);
    }

    .titulo-bloque {
      max-width: 760px;
      margin-bottom: 46px;
    }

    .titulo-bloque h2 {
      font-size: clamp(1.85rem, 3.9vw, 2.9rem);
    }

    .titulo-bloque p {
      color: var(--texto-suave);
      font-size: 1.06rem;
      max-width: 640px;
    }

    .seccion--oscura .titulo-bloque p {
      color: #B7CDCC;
    }

    .centrado {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    em.oro {
      font-style: italic;
      color: var(--oro);
      font-weight: 600;
    }

    .seccion--crema em.oro,
    .seccion--crema2 em.oro {
      color: var(--oro-oscuro);
    }

    strong.teal {
      color: var(--teal);
      font-weight: 700;
    }

    /* ================================================================
       BOTÕES
    ================================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: linear-gradient(180deg, #D8AA48 0%, var(--oro) 55%, #B4862C 100%);
      color: #17110A;
      font-weight: 700;
      font-size: 1.05rem;
      letter-spacing: .01em;
      text-decoration: none;
      padding: 19px 34px;
      border-radius: 999px;
      border: 0;
      cursor: pointer;
      box-shadow: 0 12px 30px rgba(199, 154, 59, .32);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
      text-align: center;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 40px rgba(199, 154, 59, .42);
      filter: brightness(1.04);
    }

    .btn:active {
      transform: translateY(0);
    }

    .btn--grande {
      font-size: 1.14rem;
      padding: 22px 40px;
      width: 100%;
      max-width: 520px;
    }

    .btn__flecha {
      display: inline-block;
      transition: transform .18s ease;
    }

    .btn:hover .btn__flecha {
      transform: translateX(4px);
    }

    .btn-nota {
      display: block;
      margin-top: 17px;
      font-size: .92rem;
      color: var(--texto-suave);
      font-weight: 500;
    }

    .seccion--oscura .btn-nota,
    .oferta .btn-nota,
    .cierre .btn-nota,
    .hero .btn-nota {
      color: #C3D7D6;
    }

    /* ================================================================
       FITA STICKY (urgência rotativa)
    ================================================================ */
    .fita {
      position: sticky;
      top: 0;
      z-index: 60;
      background: linear-gradient(90deg, #0B2E33 0%, #144249 50%, #0B2E33 100%);
      color: #F3EEE1;
      height: var(--fita);
      display: flex;
      align-items: center;
      overflow: hidden;
      border-bottom: 1px solid rgba(199, 154, 59, .34);
    }

    .fita__pista {
      display: flex;
      width: max-content;
      animation: correr 34s linear infinite;
    }

    .fita__grupo {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
    }

    .fita__msg {
      display: inline-block;
      padding: 0 26px;
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .fita__msg b {
      color: var(--oro-claro);
    }

    .fita__msg s {
      opacity: .62;
      text-decoration-thickness: 2px;
    }

    .fita__punto {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--oro);
      flex: 0 0 auto;
    }

    @keyframes correr {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .fita__pista {
        animation: none;
      }

      .wall-fila__pista {
        animation: none;
      }
    }

    /* ================================================================
       WALL DE CAPTURAS — Workshop de Gestión del Tiempo
       ----------------------------------------------------------------
       03/09/2026 · Filas horizontales de capturas reales (WhatsApp,
       Instagram, YouTube) que se deslizan solas, mismo mecanismo que
       .fita__pista (dos grupos idénticos, loop a -50%). Cada <img>
       fija la ALTURA de la fila y deja el ancho libre: las capturas
       llegan con relaciones de aspecto muy distintas entre sí (desde
       tiras panorámicas hasta capturas verticales de conversación
       entera), y forzar un ancho parejo recortaría texto. Contenido en
       partials/gta-wall-tiempo.html — ver ese archivo para el porqué
       de estar separado.
    ================================================================ */
    .wall-tiempo {
      overflow: hidden;
      padding: 70px 0;
    }

    .wall-fila {
      overflow: hidden;
      margin-bottom: 22px;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    }

    .wall-fila:last-child {
      margin-bottom: 0;
    }

    .wall-fila__pista {
      display: flex;
      width: max-content;
      gap: 18px;
      animation: wallCorrer 46s linear infinite;
    }

    .wall-fila--reversa .wall-fila__pista {
      animation-direction: reverse;
      animation-duration: 58s;
    }

    /* pausa al pasar el mouse: para poder leer una captura sin que las
       vecinas seis se sigan moviendo por debajo del cursor */
    .wall-fila:hover .wall-fila__pista {
      animation-play-state: paused;
    }

    .wall-fila__grupo {
      display: flex;
      gap: 18px;
      flex: 0 0 auto;
    }

    .wall-fila img {
      height: 260px;
      width: auto;
      max-width: none;
      border-radius: 12px;
      box-shadow: 0 14px 34px rgba(4, 20, 23, .45);
      border: 1px solid rgba(199, 154, 59, .22);
    }

    /* fila de comunidad (Circle + Zoom): mezcla tarjetas blancas con
       capturas de Instagram en modo oscuro, con "..." y "Liked · Reply"
       que las de WhatsApp no tienen. En vez de forzarla a la misma
       altura de las otras dos filas (lo que además las agrandaba de más
       y las volvía borrosas), tiene su propia altura, más chica: se lee
       como "otro tipo de prueba" a propósito, no como un error. */
    .wall-fila--comunidad img {
      height: 190px;
    }

    @keyframes wallCorrer {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    @media (max-width: 720px) {
      .wall-tiempo {
        padding: 44px 0;
      }

      .wall-fila img {
        height: 170px;
      }

      .wall-fila--comunidad img {
        height: 130px;
      }

      .wall-fila {
        margin-bottom: 14px;
      }
    }

    /* ================================================================
       HERO
    ================================================================ */
    .hero {
      position: relative;
      background: var(--tinta);
      color: #EAF3F2;
      overflow: hidden;
      padding: 74px 0 84px;
      isolation: isolate;
    }

    .hero__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .hero__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 72% center;
    }

    /* montanhas desenhadas: ficam por baixo da foto e seguram o bloco
       quando ainda não há imagem no CONFIG */
    .hero__sierra {
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(120% 88% at 78% 8%, rgba(199, 154, 59, .30) 0%, rgba(199, 154, 59, 0) 58%),
        radial-gradient(90% 70% at 88% 30%, rgba(127, 190, 192, .22) 0%, rgba(127, 190, 192, 0) 62%),
        linear-gradient(180deg, #0A343B 0%, #0B2E33 62%, #092429 100%);
    }

    .hero__sierra svg {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: auto;
    }

    .hero__velo {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(96deg, rgba(9, 36, 41, .96) 0%, rgba(9, 36, 41, .92) 34%, rgba(9, 36, 41, .70) 52%, rgba(9, 36, 41, .18) 72%, rgba(9, 36, 41, .05) 100%),
        linear-gradient(180deg, rgba(9, 36, 41, .55) 0%, rgba(9, 36, 41, 0) 32%);
    }

    .hero .wrap {
      position: relative;
      z-index: 2;
    }

    /* o card de arte do hero é exclusivo do mobile: no desktop a mesma
       arte entra como fundo full-bleed (.hero__bg). Sem este display:none
       ele aparece nas duas larguras e empurra a headline para baixo. */
    .hero-foto {
      display: none;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 60%);
    }

    .hero-grid>* {
      min-width: 0;
    }

    .hero-pill {
      display: inline-block;
      background: rgba(199, 154, 59, .14);
      border: 1px solid rgba(199, 154, 59, .48);
      color: var(--oro-claro);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      padding: 8px 16px;
      border-radius: 999px;
      margin-bottom: 22px;
    }

    .hero-datos {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 18px;
      font-size: .95rem;
      color: #CFE0DF;
    }

    .hero-datos b {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 600;
      color: var(--blanco);
      font-size: 1.06rem;
      letter-spacing: .01em;
    }

    .hero-datos span.sep {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--oro);
      display: inline-block;
    }

    .hero h1 {
      font-size: clamp(2.15rem, 5.4vw, 4.1rem);
      color: var(--blanco);
      margin-bottom: 20px;
      text-wrap: balance;
    }

    .hero h1 em {
      font-style: italic;
      color: var(--oro-claro);
    }

    .hero .sub {
      font-size: clamp(1.02rem, 1.5vw, 1.17rem);
      color: #C6DAD9;
      max-width: 620px;
      margin-bottom: 30px;
    }

    .hero .sub b {
      color: var(--blanco);
      font-weight: 700;
    }

    .hero-cta-row {
      margin-bottom: 26px;
    }

    /* barra da janela de inscrição */
    .lote {
      max-width: 440px;
      margin-top: 8px;
    }

    .lote__top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      font-size: .82rem;
      font-weight: 600;
      letter-spacing: .02em;
      margin-bottom: 8px;
      color: #BCD2D1;
    }

    .lote__top b {
      color: var(--oro-claro);
    }

    .lote__riel {
      height: 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .14);
      overflow: hidden;
    }

    .lote__fill {
      height: 100%;
      width: 4%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--teal-claro) 0%, var(--oro) 100%);
      transition: width 1.5s cubic-bezier(.22, .9, .3, 1);
    }

    /* últimas 48 horas: a barra e o texto passam para a cor de urgência */
    .lote.urgente .lote__fill {
      background: linear-gradient(90deg, var(--oro) 0%, var(--urgencia) 100%);
    }

    .lote.urgente .lote__top b {
      color: #F0A78F;
    }

    .seccion--crema .lote__top,
    .precio-card .lote__top {
      color: #97ADAC;
    }

    /* cards de data/formato/acesso */
    .hero-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 40px;
      position: relative;
      z-index: 2;
    }

    .hcard {
      background: rgba(255, 253, 248, .07);
      border: 1px solid rgba(199, 154, 59, .30);
      border-radius: var(--radio-sm);
      padding: 16px 18px;
      backdrop-filter: blur(6px);
    }

    .hcard__ico {
      color: var(--oro);
      margin-bottom: 8px;
      display: block;
    }

    .hcard__rot {
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #9FBAB9;
      font-weight: 700;
      display: block;
      margin-bottom: 3px;
    }

    .hcard__val {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.08rem;
      font-weight: 600;
      color: var(--blanco);
      line-height: 1.3;
      display: block;
    }

    /* prova social do hero */
    .hero-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 34px;
      margin-top: 34px;
      padding-top: 26px;
      border-top: 1px solid rgba(255, 255, 255, .14);
      position: relative;
      z-index: 2;
    }

    .hstat b {
      display: block;
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.7rem;
      color: var(--oro-claro);
      line-height: 1;
      margin-bottom: 4px;
    }

    .hstat span {
      font-size: .84rem;
      color: #A9C3C2;
      letter-spacing: .02em;
    }

    /* ================================================================
       DIAGNÓSTICO — uma coluna só, em sequência
       ----------------------------------------------------------------
       Era duas colunas, e o argumento se lia pela metade: a pergunta de
       um lado, o preço do outro. Agora desce em ordem: a palavra, as
       quatro provas, o acúmulo, o que custa e a decisão. As quatro
       frases entram em escada, cada uma um pouco mais para dentro, para
       o adiamento parecer o que é: uma coisa empurrando a outra.
    ================================================================ */
    .diag {
      background: var(--tinta);
      color: #DCE9E8;
      position: relative;
      overflow: hidden;
    }

    .diag::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(72% 52% at 50% 0%, rgba(199, 154, 59, .17) 0%, rgba(199, 154, 59, 0) 68%);
      z-index: 0;
    }

    .diag .wrap {
      position: relative;
      z-index: 1;
    }

    .diag__col {
      max-width: 820px;
      margin: 0 auto;
      text-align: center;
    }

    .diag h2 {
      font-size: clamp(1.9rem, 4.4vw, 3.1rem);
      color: var(--blanco);
      margin-bottom: 14px;
    }

    .diag__pregunta {
      font-size: clamp(1.05rem, 2vw, 1.2rem);
      color: #C6DAD9;
      max-width: 620px;
      margin: 0 auto;
    }

    .despues {
      font-family: 'Playfair Display', Georgia, serif;
      font-style: italic;
      font-size: clamp(3.4rem, 11vw, 6.4rem);
      color: var(--oro);
      line-height: 1;
      margin: 30px 0 6px;
      opacity: .95;
    }

    .despues-lista {
      text-align: left;
      max-width: 600px;
      margin: 26px auto 34px;
      position: relative;
      padding-left: 26px;
    }

    .despues-lista::before {
      content: "";
      position: absolute;
      left: 0;
      top: 10px;
      bottom: 10px;
      width: 2px;
      background: linear-gradient(180deg, rgba(199, 154, 59, .75) 0%, rgba(199, 154, 59, .12) 100%);
    }

    .despues-lista li {
      font-size: clamp(1.02rem, 1.9vw, 1.14rem);
      color: #C9DCDB;
      padding: 9px 0;
    }

    /* a escada: cada "después" empurra o seguinte um pouco mais longe */
    .despues-lista li:nth-child(2) {
      margin-left: 20px;
    }

    .despues-lista li:nth-child(3) {
      margin-left: 40px;
    }

    .despues-lista li:nth-child(4) {
      margin-left: 60px;
    }

    .despues-lista li b {
      color: var(--oro-claro);
      font-weight: 600;
      font-style: italic;
      font-family: 'Playfair Display', Georgia, serif;
    }

    .diag__acumula {
      font-size: clamp(1.05rem, 2vw, 1.2rem);
      color: #C6DAD9;
      max-width: 660px;
      margin: 0 auto 40px;
    }

    .diag__sep {
      width: 1px;
      height: 46px;
      margin: 0 auto 34px;
      background: linear-gradient(180deg, rgba(199, 154, 59, .6), rgba(199, 154, 59, 0));
    }

    .contador-anio {
      background: linear-gradient(180deg, rgba(199, 154, 59, .16) 0%, rgba(199, 154, 59, .05) 100%);
      border: 1px solid rgba(199, 154, 59, .44);
      border-radius: var(--radio);
      padding: 34px 34px 30px;
      max-width: 680px;
      margin: 0 auto 30px;
    }

    .contador-anio__num {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(4rem, 12vw, 6rem);
      line-height: .9;
      color: var(--oro-claro);
      display: block;
      margin-bottom: 10px;
    }

    .contador-anio__txt {
      font-size: clamp(1.02rem, 1.9vw, 1.12rem);
      color: #D7E5E4;
      margin: 0;
    }

    .diag__costo {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.15rem, 2.4vw, 1.5rem);
      color: var(--blanco);
      margin: 0 auto 30px;
    }

    .diag__remate {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.4rem, 3.4vw, 2.2rem);
      line-height: 1.3;
      color: var(--blanco);
      max-width: 740px;
      margin: 0 auto;
    }

    .diag__remate em {
      font-style: italic;
      color: var(--oro-claro);
    }

    /* ================================================================
       PROGRAMA — três cards com mockup do material
    ================================================================ */
    .prog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .pcard {
      background: var(--blanco);
      border: var(--borde);
      border-radius: var(--radio);
      box-shadow: var(--sombra-sm);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .pcard:hover {
      transform: translateY(-3px);
      box-shadow: var(--sombra);
    }

    .pcard__img {
      aspect-ratio: 16/10;
      background: linear-gradient(160deg, #17565C 0%, #0B2E33 100%);
      position: relative;
      overflow: hidden;
    }

    .pcard__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .pcard__img svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .pcard__cuerpo {
      padding: 24px 24px 28px;
    }

    .pcard h3 {
      font-size: 1.32rem;
      margin-bottom: 10px;
    }

    .pcard p {
      color: var(--texto-suave);
      font-size: 1rem;
      margin: 0;
    }

    /* ================================================================
       LA SENDA (v2) — a subida desenhada como caminho de montanha
       ----------------------------------------------------------------
       A seção vira escura, com a serra ao fundo e um mapa topográfico
       por cima em opacidade baixa. A trilha não é mais um fio: são três
       traços sobre o MESMO path (leito, via com gradiente teal->ouro e
       a marcação central tracejada), o que dá largura de caminho.
       O path continua sendo calculado por JS a partir da posição real
       dos marcos, incluindo o marco final do cume.
    ================================================================ */
    .senda-mapa {
      position: relative;
      background: var(--tinta);
      color: #DCE9E8;
      overflow: hidden;
    }

    .senda-mapa__fondo {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    /* a serra entra pelo ALTO da seção: o cume aparece atrás do título,
       como destino à vista, e some antes dos cards para não competir com
       a leitura. A trilha desce a partir dele. */
    .senda-mapa__fondo {
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 26%, rgba(0, 0, 0, .25) 52%, transparent 72%);
      mask-image: linear-gradient(180deg, #000 0%, #000 26%, rgba(0, 0, 0, .25) 52%, transparent 72%);
    }

    .senda-mapa__fondo img {
      width: 100%;
      height: auto;
      min-height: 62%;
      object-fit: cover;
      object-position: center top;
      opacity: .62;
    }

    /* o mapa topográfico faz o contrário: entra de baixo, dando textura
       de carta de trilha onde a serra já saiu */
    .senda-mapa__mapa {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-size: cover;
      background-position: center;
      opacity: .17;
      mix-blend-mode: screen;
      -webkit-mask-image: linear-gradient(180deg, transparent 34%, #000 62%, #000 100%);
      mask-image: linear-gradient(180deg, transparent 34%, #000 62%, #000 100%);
    }

    /* serra desenhada: fica por baixo de tudo e segura o bloco quando
       ainda não há imagem no CONFIG */
    .senda-mapa__pintura {
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(70% 45% at 50% 0%, rgba(199, 154, 59, .20) 0%, rgba(199, 154, 59, 0) 62%),
        linear-gradient(180deg, #0A343B 0%, #0B2E33 55%, #092429 100%);
    }

    .senda-mapa__pintura svg {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: auto;
      opacity: .9;
    }

    .senda-mapa__velo {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(180deg, rgba(9, 36, 41, .55) 0%, rgba(9, 36, 41, .74) 30%, rgba(9, 36, 41, .90) 62%, rgba(9, 36, 41, .95) 100%);
    }

    .senda-mapa .wrap {
      position: relative;
      z-index: 2;
    }

    .senda-mapa h2 {
      color: var(--blanco);
    }

    .senda-mapa .titulo-bloque p {
      color: #B7CDCC;
    }

    .senda {
      position: relative;
      margin-top: 24px;
      padding-top: 26px;
    }

    .senda__linea {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      overflow: visible;
    }

    /* o rastro: faixa de terra pisada, larga e translúcida */
    .senda__lecho {
      fill: none;
      stroke: rgba(227, 199, 122, .19);
      stroke-width: 17;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* fio contínuo que dá corpo ao caminho */
    .senda__borde {
      fill: none;
      stroke: rgba(227, 199, 122, .42);
      stroke-width: 1.6;
    }

    /* a rota marcada por cima, em pontos, como numa carta de trilha */
    .senda__via {
      fill: none;
      stroke: url(#viaGrad);
      stroke-width: 5;
      stroke-dasharray: 1.5 10;
      stroke-linecap: round;
    }

    /* o último trecho, do nível VII ao cume, sai do gradiente e vira ouro
       cheio: é a parte do caminho que já é chegada */
    .senda__final {
      fill: none;
      stroke: var(--oro-claro);
      stroke-width: 6;
      stroke-dasharray: 2 9;
      stroke-linecap: round;
      filter: drop-shadow(0 0 10px rgba(227, 199, 122, .45));
    }

    /* curvas de nível ao redor de cada marco */
    .senda__curvas circle {
      fill: none;
      stroke: rgba(227, 199, 122, .2);
      stroke-width: 1;
    }

    .nivel {
      position: relative;
      z-index: 1;
      width: 47%;
      margin-bottom: 26px;
    }

    .nivel:nth-of-type(even) {
      margin-left: auto;
    }

    .nivel:last-of-type {
      margin-bottom: 0;
    }

    /* mojón: pedra de marcação na beira do caminho */
    .nivel__icono {
      position: absolute;
      top: 0;
      left: 28px;
      width: 68px;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--oro-claro);
      filter: drop-shadow(0 10px 22px rgba(4, 20, 23, .65));
      z-index: 2;
    }

    /* o mojón é um hexágono desenhado, não um círculo com borda: é o que
       tira a seção da cara de mapa de metrô e a leva para carta de trilha */
    .mojon {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .mojon polygon {
      fill: #0C3940;
      stroke: rgba(227, 199, 122, .82);
      stroke-width: 4;
    }

    .nivel__icono .ico {
      position: relative;
      z-index: 1;
    }

    .nivel:nth-of-type(even) .nivel__icono {
      left: auto;
      right: 28px;
    }

    .nivel--cumbre .nivel__icono {
      color: var(--oro-claro);
      filter: drop-shadow(0 12px 26px rgba(199, 154, 59, .5));
    }

    .nivel--cumbre .mojon polygon {
      fill: #0C3940;
      stroke: #FFF6E0;
      stroke-width: 5;
    }

    .nivel__caja {
      background: linear-gradient(180deg, rgba(18, 63, 69, .93) 0%, rgba(10, 44, 50, .93) 100%);
      border: 1px solid rgba(199, 154, 59, .34);
      border-radius: var(--radio);
      box-shadow: 0 22px 50px rgba(4, 20, 23, .45);
      backdrop-filter: blur(3px);
      padding: 54px 28px 28px;
      margin-top: 32px;
      transition: transform .2s ease, border-color .2s ease;
    }

    .nivel__caja:hover {
      transform: translateY(-2px);
      border-color: rgba(199, 154, 59, .6);
    }

    /* do nível VII em diante a subida acabou: o bloco inverte para o
       dourado e passa a parecer outra coisa, o convite ao evento */
    .nivel--cumbre .nivel__caja {
      border-color: rgba(255, 246, 224, .7);
      background: linear-gradient(180deg, #F7EBCE 0%, #EBD6A2 100%);
      box-shadow: 0 26px 60px rgba(199, 154, 59, .3);
    }

    .nivel--cumbre .nivel__nombre {
      color: #17110A;
    }

    .nivel--cumbre .nivel__caja p {
      color: #4A3A18;
    }

    .nivel--cumbre .nivel__tarja {
      background: linear-gradient(90deg, #10393F 0%, #0A2C32 100%);
      color: var(--oro-claro);
      box-shadow: 0 8px 20px rgba(4, 20, 23, .4);
    }

    .nivel__tarja {
      display: block;
      background: linear-gradient(90deg, var(--oro) 0%, #B4862C 100%);
      color: #17110A;
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
      padding: 8px 18px;
      border-radius: 6px;
      margin: 0 0 16px -28px;
      width: 64%;
      text-align: center;
      box-shadow: 0 8px 20px rgba(4, 20, 23, .45);
    }

    .nivel:nth-of-type(even) .nivel__tarja {
      margin-left: auto;
      margin-right: -28px;
    }

    .nivel__nombre {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--blanco);
      letter-spacing: .01em;
      margin: 0 0 10px;
    }

    .nivel__caja p {
      color: #BFD4D3;
      margin: 0;
      font-size: 1.02rem;
    }

    /* a trilha termina no nível VII: o halo dourado que antes envolvia a
       placa do cume agora fica atrás dele, e a seção La Cumbre 2026, logo
       abaixo, é o ponto final. */
    .nivel--cumbre::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -180px;
      width: 150vw;
      max-width: 1500px;
      height: 820px;
      transform: translateX(-50%);
      background: radial-gradient(50% 44% at 50% 50%, rgba(199, 154, 59, .30) 0%, rgba(199, 154, 59, .09) 46%, rgba(199, 154, 59, 0) 72%);
      pointer-events: none;
      z-index: -1;
    }


    /* ================================================================
       LA CUMBRE (evento de dezembro)
    ================================================================ */
    .cumbre {
      position: relative;
      background: var(--tinta);
      color: #DCE9E8;
      overflow: hidden;
    }

    .cumbre__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .cumbre__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 60%;
    }

    .cumbre__pintura {
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(80% 70% at 50% 100%, rgba(199, 154, 59, .30) 0%, rgba(199, 154, 59, 0) 62%),
        linear-gradient(180deg, #092429 0%, #0F3A40 55%, #0B2E33 100%);
    }

    .cumbre__pintura svg {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: auto;
      opacity: .85;
    }

    .cumbre__velo {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(180deg, rgba(9, 36, 41, .80) 0%, rgba(9, 36, 41, .62) 45%, rgba(9, 36, 41, .90) 100%);
    }

    .cumbre .wrap {
      position: relative;
      z-index: 2;
    }

    .cumbre__caja {
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
    }

    .cumbre__fecha {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(199, 154, 59, .5);
      background: rgba(199, 154, 59, .12);
      color: var(--oro-claro);
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      padding: 8px 18px;
      border-radius: 999px;
      margin-bottom: 22px;
    }

    .cumbre h2 {
      font-size: clamp(2rem, 5vw, 3.3rem);
      color: var(--blanco);
    }

    .cumbre p {
      color: #CBDEDD;
      font-size: 1.08rem;
    }

    .cumbre__remate {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.2rem, 2.5vw, 1.6rem);
      color: var(--oro-claro);
      font-style: italic;
      margin-top: 22px;
    }

    /* ================================================================
       ESPECIALISTAS
    ================================================================ */
    .mentores {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .mentor {
      background: var(--blanco);
      border: var(--borde);
      border-radius: var(--radio);
      box-shadow: var(--sombra-sm);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .mentor__foto {
      aspect-ratio: 4/3;
      background: linear-gradient(160deg, #17565C 0%, #0B2E33 100%);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .mentor__foto img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .mentor__mono {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 2.6rem;
      color: rgba(227, 199, 122, .82);
      letter-spacing: .04em;
      border: 1px solid rgba(227, 199, 122, .38);
      width: 82px;
      height: 82px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      padding-top: 4px;
    }

    .mentor__area {
      position: absolute;
      left: 14px;
      bottom: 14px;
      background: rgba(199, 154, 59, .94);
      color: #17110A;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
      padding: 6px 12px;
      border-radius: 999px;
    }

    .mentor__cuerpo {
      padding: 22px 22px 26px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .mentor__nombre {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.24rem;
      font-weight: 700;
      line-height: 1.2;
      margin: 0;
    }

    .mentor__pais {
      font-size: .78rem;
      color: var(--teal);
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      display: block;
      margin-top: 4px;
    }

    .mentor p {
      font-size: .96rem;
      color: var(--texto-suave);
      margin: 0;
    }

    .mentor__ref {
      font-size: .96rem;
      color: var(--texto);
      border-top: var(--borde);
      padding-top: 12px;
      margin-top: auto;
    }

    .mentor__ref b {
      color: var(--oro-oscuro);
    }

    .sin-costo {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: rgba(28, 107, 114, .10);
      border: 1px solid rgba(28, 107, 114, .28);
      color: var(--teal);
      font-weight: 700;
      font-size: .92rem;
      padding: 10px 18px;
      border-radius: 999px;
      margin-top: 30px;
    }

    /* ================================================================
       TESTIMONIOS — gente que ya hizo "Ganá tu día". Vivía entre "100
       días" y los 7 niveles, en crema2, con tarjetas blancas. Se movió
       entre especialistas y bonos (dos secciones claras seguidas que
       necesitaban un corte) y pasó a oscura: las tarjetas dejaron de
       ser blancas y ahora son el mismo "cristal" con borde dorado que
       ya usan los cards de "Nadie sube solo" (.comu) y los niveles de
       la senda (.nivel__caja), para no meter un bloque blanco suelto
       sobre fondo oscuro.
    ================================================================ */
    .testimonios {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .testi {
      background: rgba(255, 253, 248, .05);
      border: 1px solid rgba(199, 154, 59, .34);
      border-radius: var(--radio);
      padding: 28px 26px;
      display: flex;
      flex-direction: column;
    }

    .testi__estrellas {
      color: var(--oro);
      letter-spacing: 3px;
      font-size: .92rem;
      margin-bottom: 14px;
    }

    .testi__texto {
      font-size: .97rem;
      line-height: 1.6;
      color: #C9DCDB;
      margin-bottom: 22px;
      flex-grow: 1;
    }

    .testi__pie {
      display: flex;
      align-items: center;
      gap: 12px;
      border-top: 1px solid rgba(199, 154, 59, .24);
      padding-top: 16px;
    }

    .testi__avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
      background: linear-gradient(160deg, #17565C 0%, #0B2E33 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .testi__avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .testi__mono {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.05rem;
      color: rgba(227, 199, 122, .82);
      line-height: 1;
    }

    .testi__nombre {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 1rem;
      color: var(--blanco);
    }

    .testi__rol {
      font-size: .68rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #9FBAB9;
      font-weight: 700;
      margin-top: 2px;
    }

    /* ================================================================
       BONOS — nove peças que entram com a inscrição
       ----------------------------------------------------------------
       Cada card tem palco com slot de imagem (CONFIG.IMG.bono1..9). Sem
       imagem, o palco mostra o selo com o número e o ícone do bônus, e
       nada quebra. O valor riscado de cada card sai do mesmo número que
       alimenta o stack do card de preço: mexeu num, mexa nos dois.
    ================================================================ */
    .bonos {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .bono {
      background: var(--blanco);
      border: var(--borde);
      border-radius: var(--radio);
      box-shadow: var(--sombra-sm);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .bono:hover {
      transform: translateY(-3px);
      box-shadow: var(--sombra);
    }

    /* palco CLARO e 3:2: os mockups chegam em 1536x1024 com fundo branco,
       então o card precisa acompanhar. Escuro deixaria uma caixa branca no
       meio do card, e 16:10 cortaria 6% da altura de cada mockup. */
    .bono__palco {
      aspect-ratio: 3/2;
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, #FFFDF8 0%, #F4F0E5 100%);
      border-bottom: 1px solid rgba(11, 46, 51, .08);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bono__palco img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* o selo de espera acompanha o palco claro */
    .bono__sello {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: var(--oro-oscuro);
    }

    .bono__sello b {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.9rem;
      line-height: 1;
      letter-spacing: .02em;
    }

    .bono__cuerpo {
      padding: 20px 22px 22px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .bono__meta {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
      margin-bottom: 9px;
    }

    .bono__num {
      font-size: .66rem;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--oro-oscuro);
    }

    .bono__chip {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--teal);
      border: 1px solid rgba(28, 107, 114, .32);
      border-radius: 999px;
      padding: 4px 10px;
    }

    .bono h3 {
      font-size: 1.1rem;
      line-height: 1.3;
      margin-bottom: 7px;
    }

    .bono p {
      color: var(--texto-suave);
      font-size: .95rem;
      margin: 0 0 16px;
    }

    .bono__pie {
      margin-top: auto;
      padding-top: 13px;
      border-top: var(--borde);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .bono__valor {
      font-size: .92rem;
      color: #93A6A6;
      text-decoration: line-through;
      text-decoration-thickness: 1.5px;
    }

    .bono__incluido {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: .74rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--teal);
    }

    .bonos-total {
      margin-top: 30px;
      text-align: center;
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.15rem, 2.4vw, 1.55rem);
      color: var(--texto);
    }

    .bonos-total b {
      color: var(--oro-oscuro);
    }

    /* ================================================================
       INVERSIÓN — o stack, agora como seção própria antes da oferta
       ----------------------------------------------------------------
       Saiu de dentro do card de preço: ali competia com a cifra e com a
       lista do que inclui. Como seção, ele vira o momento da conta, e o
       preço aparece depois, já com o número na cabeça de quem lê.
       Fundo claro de propósito: dá respiro entre dois blocos escuros e
       faz o stack ler como nota, não como enfeite.
    ================================================================ */
    .inversion__intro {
      max-width: 760px;
      margin: 0 auto 40px;
      text-align: center;
    }

    .inversion__intro h2 {
      font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    }

    .inversion__intro p {
      color: var(--texto-suave);
      font-size: clamp(1.02rem, 1.9vw, 1.14rem);
    }

    .inversion__intro b {
      color: var(--texto);
    }

    .stack {
      max-width: 640px;
      margin: 0 auto;
      background: var(--blanco);
      border: 1px solid rgba(199, 154, 59, .42);
      border-radius: var(--radio);
      box-shadow: var(--sombra);
      padding: 30px 32px 26px;
      text-align: left;
    }

    .stack__rot {
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .17em;
      text-transform: uppercase;
      color: var(--oro-oscuro);
      margin: 0 0 16px;
      text-align: center;
    }

    .stack__linea {
      display: flex;
      align-items: baseline;
      gap: 10px;
      font-size: 1rem;
      padding: 8px 0;
      color: var(--texto);
    }

    .stack__linea span {
      flex: 0 1 auto;
      min-width: 0;
    }

    .stack__linea i {
      flex: 1 1 auto;
      border-bottom: 1px dotted rgba(11, 46, 51, .28);
      transform: translateY(-4px);
      min-width: 12px;
    }

    .stack__linea b {
      flex: 0 0 auto;
      color: #8A9A9A;
      text-decoration: line-through;
      text-decoration-thickness: 1.5px;
      font-weight: 500;
    }

    .stack__linea--programa {
      font-weight: 700;
      padding-bottom: 13px;
      margin-bottom: 7px;
      border-bottom: 1px solid rgba(11, 46, 51, .12);
    }

    .stack__linea--programa b {
      color: var(--oro-oscuro);
      text-decoration: none;
      font-weight: 800;
    }

    .stack__total {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 2px solid rgba(199, 154, 59, .45);
      font-size: 1.04rem;
      font-weight: 700;
      color: var(--texto);
    }

    .stack__total b {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.6rem;
      color: #8A9A9A;
      text-decoration: line-through;
      text-decoration-thickness: 2px;
    }

    .inversion__cierre {
      max-width: 700px;
      margin: 40px auto 0;
      text-align: center;
    }

    .inversion__cierre p {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.2rem, 2.6vw, 1.65rem);
      line-height: 1.42;
      color: var(--texto);
    }

    .inversion__cierre em {
      font-style: italic;
      color: var(--oro-oscuro);
    }

    .inversion__puente {
      display: block;
      margin-top: 26px;
      font-family: 'Inter', sans-serif;
      font-size: .96rem;
      color: var(--texto-suave);
      letter-spacing: .02em;
    }

    /* ================================================================
       BIO
    ================================================================ */
    .bio-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 52px;
      align-items: center;
    }

    .bio-foto {
      aspect-ratio: 4/5;
      border-radius: var(--radio);
      overflow: hidden;
      background: linear-gradient(160deg, #17565C 0%, #0B2E33 100%);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--sombra);
    }

    .bio-foto img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .bio-foto__slot {
      color: rgba(227, 199, 122, .8);
      font-family: 'Playfair Display', Georgia, serif;
      text-align: center;
      padding: 24px;
      font-size: 1rem;
      line-height: 1.5;
    }

    .bio h2 {
      font-size: clamp(1.85rem, 3.8vw, 2.8rem);
    }

    .bio p {
      color: var(--texto-suave);
      font-size: 1.05rem;
    }

    .bio-logros {
      margin: 26px 0 0;
      display: grid;
      gap: 12px;
    }

    .bio-logros li {
      display: flex;
      gap: 13px;
      align-items: flex-start;
      font-size: 1.01rem;
      color: var(--texto);
    }

    .bio-logros svg {
      flex: 0 0 auto;
      margin-top: 4px;
      color: var(--oro-oscuro);
    }

    .bio-firma {
      font-family: 'Playfair Display', Georgia, serif;
      font-style: italic;
      font-size: 1.24rem;
      color: var(--teal);
      margin-top: 26px;
    }

    /* ================================================================
       COMUNIDAD
    ================================================================ */
    .comu-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 34px;
    }

    .comu {
      border: 1px solid rgba(199, 154, 59, .34);
      background: rgba(255, 253, 248, .05);
      border-radius: var(--radio);
      padding: 28px 26px;
      text-align: center;
    }

    .comu svg {
      color: var(--oro);
      margin-bottom: 12px;
    }

    .comu b {
      display: block;
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.2rem;
      color: var(--blanco);
      margin-bottom: 6px;
    }

    .comu span {
      font-size: .96rem;
      color: #B7CDCC;
    }

    /* ================================================================
       OFERTA
    ================================================================ */
    .oferta {
      background: linear-gradient(180deg, #0B2E33 0%, #10393F 48%, #0B2E33 100%);
      color: #DCE9E8;
      position: relative;
      overflow: hidden;
    }

    .oferta::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(60% 50% at 50% 0%, rgba(199, 154, 59, .20) 0%, rgba(199, 154, 59, 0) 70%);
    }

    .oferta .wrap {
      position: relative;
      z-index: 1;
    }

    .precio-card {
      max-width: 780px;
      margin: 0 auto;
      background: linear-gradient(180deg, rgba(255, 253, 248, .075) 0%, rgba(255, 253, 248, .03) 100%);
      border: 1px solid rgba(199, 154, 59, .46);
      border-radius: 22px;
      padding: 44px 44px 40px;
      text-align: center;
      box-shadow: 0 30px 70px rgba(4, 20, 23, .45);
    }

    .precio-card h2 {
      font-size: clamp(1.7rem, 3.6vw, 2.5rem);
      color: var(--blanco);
      margin-bottom: 10px;
    }

    .precio-card__nota {
      color: #B7CDCC;
      font-size: 1rem;
      max-width: 520px;
      margin: 0 auto 26px;
    }

    .precio-tachado__rot {
      display: block;
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .17em;
      text-transform: uppercase;
      color: #9FBAB9;
      margin-bottom: 4px;
    }

    .precio-tachado {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.5rem, 3.4vw, 2.1rem);
      color: rgba(220, 233, 232, .5);
      text-decoration: line-through;
      text-decoration-thickness: 2px;
      display: block;
      margin-bottom: 4px;
    }

    .precio-hoy {
      display: block;
      font-size: .74rem;
      font-weight: 800;
      letter-spacing: .19em;
      text-transform: uppercase;
      color: var(--oro-claro);
      margin-bottom: 2px;
    }

    .precio-grande {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 6px;
      margin: 6px 0 4px;
      line-height: 1.08;
    }

    .precio-grande__cifra {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 800;
      font-size: clamp(4rem, 15vw, 7.4rem);
      background: linear-gradient(180deg, #F0DCA8 0%, #D8AA48 46%, #B4862C 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      letter-spacing: -.01em;
    }

    .precio-grande__moneda {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: clamp(1.4rem, 4vw, 2.4rem);
      color: var(--oro-claro);
      letter-spacing: .02em;
    }

    .precio-linea {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      color: #C3D7D6;
      font-size: 1rem;
      margin-bottom: 26px;
    }

    /* inline-block, não inline-flex: em flex cada nó de texto vira item e o
       espaço entre eles é descartado ("o 3 cuotas de$187 USD") */
    .precio-pill {
      display: inline-block;
      background: rgba(199, 154, 59, .16);
      border: 1px solid rgba(199, 154, 59, .55);
      color: var(--oro-claro);
      font-weight: 700;
      padding: 7px 16px;
      border-radius: 999px;
      font-size: .98rem;
    }

    .incluye {
      text-align: left;
      display: grid;
      gap: 11px;
      max-width: 560px;
      margin: 0 auto 30px;
      padding: 26px 0 0;
      border-top: 1px solid rgba(255, 255, 255, .13);
    }

    .incluye li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 1rem;
      color: #DCE9E8;
    }

    .incluye svg {
      flex: 0 0 auto;
      margin-top: 4px;
      color: var(--oro);
    }

    .incluye li b {
      color: var(--blanco);
    }

    .cuenta {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin: 0 0 26px;
    }

    .cuenta__box {
      background: rgba(9, 36, 41, .55);
      border: 1px solid rgba(199, 154, 59, .35);
      border-radius: var(--radio-sm);
      padding: 12px 6px 9px;
      min-width: 72px;
    }

    .cuenta__box b {
      display: block;
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.85rem;
      color: var(--oro-claro);
      line-height: 1;
    }

    .cuenta__box span {
      font-size: .62rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #9FBAB9;
      font-weight: 700;
    }

    .cuenta__rot {
      font-size: .74rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #A9C3C2;
      font-weight: 700;
      margin-bottom: 12px;
      text-align: center;
    }

    .pagos {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 22px;
      padding-top: 22px;
      border-top: 1px solid rgba(255, 255, 255, .13);
    }

    .pagos span {
      font-size: .8rem;
      color: #9FBAB9;
      letter-spacing: .04em;
      width: 100%;
      margin-bottom: 4px;
    }

    .pagos svg {
      border-radius: 4px;
      background: #FFFDF8;
      padding: 4px 6px;
    }

    .garantia {
      max-width: 700px;
      margin: 40px auto 0;
      display: flex;
      gap: 20px;
      align-items: flex-start;
      background: rgba(255, 253, 248, .05);
      border: 1px solid rgba(127, 190, 192, .3);
      border-radius: var(--radio);
      padding: 26px 28px;
    }

    .garantia svg {
      flex: 0 0 auto;
      color: var(--teal-claro);
    }

    .garantia b {
      display: block;
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.16rem;
      color: var(--blanco);
      margin-bottom: 5px;
    }

    .garantia p {
      margin: 0;
      color: #B7CDCC;
      font-size: .98rem;
    }

    /* ================================================================
       PLANOS — dois preços, dois checkouts
    ================================================================ */
    .planes {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      max-width: 660px;
      margin: 0 auto 30px;
      text-align: left;
    }

    .plan {
      position: relative;
      background: linear-gradient(180deg, rgba(9, 36, 41, .72) 0%, rgba(6, 26, 30, .82) 100%);
      border: 1px solid rgba(199, 154, 59, .34);
      border-radius: 18px;
      padding: 30px 26px 26px;
      display: flex;
      flex-direction: column;
    }

    /* o plano em destaque ganha aro dourado e a tarja */
    .plan--destacado {
      border-color: rgba(227, 199, 122, .78);
      background: linear-gradient(180deg, rgba(27, 63, 60, .78) 0%, rgba(9, 36, 41, .88) 100%);
      box-shadow: 0 22px 50px rgba(4, 20, 23, .5), 0 0 0 1px rgba(227, 199, 122, .22);
    }

    .plan__tarja {
      position: absolute;
      top: -13px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(90deg, var(--oro) 0%, #E3C77A 50%, #B4862C 100%);
      color: #17110A;
      font-size: .64rem;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      padding: 6px 16px;
      border-radius: 999px;
      white-space: nowrap;
      box-shadow: 0 8px 18px rgba(4, 20, 23, .45);
    }

    .plan__nombre {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.34rem;
      font-weight: 700;
      color: var(--blanco);
      margin-bottom: 4px;
    }

    .plan__detalle {
      font-size: .84rem;
      color: #9FBAB9;
      letter-spacing: .01em;
      margin-bottom: 18px;
    }

    .plan__precio {
      display: flex;
      align-items: baseline;
      gap: 7px;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }

    .plan__cifra {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 800;
      font-size: clamp(2.6rem, 6vw, 3.5rem);
      line-height: 1.05;
      background: linear-gradient(180deg, #F0DCA8 0%, #D8AA48 46%, #B4862C 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      letter-spacing: -.01em;
    }

    .plan__moneda {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: 1.08rem;
      color: var(--oro-claro);
    }

    .plan__nota {
      font-size: .88rem;
      color: #C3D7D6;
      margin-bottom: 20px;
    }

    .plan .btn {
      width: 100%;
      padding: 16px 20px;
      font-size: 1rem;
      margin-top: auto;
    }

    /* o segundo plano usa botão de contorno, para o olho ir ao destaque */
    .plan:not(.plan--destacado) .btn {
      background: transparent;
      border: 1px solid rgba(227, 199, 122, .62);
      color: var(--oro-claro);
      box-shadow: none;
    }

    .plan:not(.plan--destacado) .btn:hover {
      background: rgba(227, 199, 122, .10);
      box-shadow: none;
    }

    .plan__pie {
      font-size: .74rem;
      color: #8FA9A8;
      text-align: center;
      margin-top: 10px;
    }

    /* ================================================================
       FAQ
    ================================================================ */
    .faq {
      max-width: 820px;
      margin: 0 auto;
    }

    .faq__item {
      background: var(--blanco);
      border: var(--borde);
      border-radius: var(--radio-sm);
      box-shadow: var(--sombra-sm);
      margin-bottom: 12px;
      overflow: hidden;
    }

    .faq__q {
      width: 100%;
      background: none;
      border: 0;
      text-align: left;
      padding: 20px 54px 20px 24px;
      font-size: 1.04rem;
      font-weight: 600;
      color: var(--texto);
      cursor: pointer;
      position: relative;
      font-family: 'Inter', sans-serif;
      line-height: 1.45;
    }

    .faq__q::after {
      content: "";
      position: absolute;
      right: 24px;
      top: 50%;
      width: 11px;
      height: 11px;
      border-right: 2px solid var(--teal);
      border-bottom: 2px solid var(--teal);
      transform: translateY(-70%) rotate(45deg);
      transition: transform .22s ease;
    }

    .faq__item.abierto .faq__q::after {
      transform: translateY(-30%) rotate(225deg);
    }

    .faq__a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease;
    }

    .faq__a p {
      padding: 0 24px 22px;
      color: var(--texto-suave);
      margin: 0;
      font-size: 1rem;
    }

    /* ================================================================
       CIERRE
    ================================================================ */
    .cierre {
      background: var(--tinta);
      color: #DCE9E8;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .cierre::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(70% 60% at 50% 100%, rgba(199, 154, 59, .22) 0%, rgba(199, 154, 59, 0) 66%);
    }

    .cierre .wrap {
      position: relative;
      z-index: 1;
      max-width: 780px;
    }

    .cierre h2 {
      font-size: clamp(1.9rem, 4.4vw, 3rem);
      color: var(--blanco);
    }

    .cierre h2 em {
      font-style: italic;
      color: var(--oro-claro);
    }

    .cierre p {
      color: #C6DAD9;
      font-size: 1.08rem;
    }

    .cierre .btn {
      margin-top: 26px;
    }

    .ps {
      margin-top: 34px;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, .14);
      font-size: .98rem;
      color: #A9C3C2;
    }

    .ps b {
      color: var(--oro-claro);
    }

    /* ================================================================
       FOOTER / FLUTUANTES
    ================================================================ */
    .pie {
      background: #071F23;
      color: #8FA9A8;
      padding: 40px 0 34px;
      text-align: center;
      font-size: .9rem;
    }

    .pie img {
      height: 18px;
      margin: 0 auto 16px;
      filter: brightness(0) invert(1);
      opacity: .9;
    }

    .pie__marca {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.3rem;
      color: #E8F1F0;
      margin: 0 auto 16px;
      letter-spacing: .04em;
    }

    .pie__redes {
      display: flex;
      gap: 18px;
      justify-content: center;
      margin-bottom: 18px;
    }

    .pie__redes a {
      color: #8FA9A8;
      text-decoration: none;
      transition: color .18s ease;
    }

    .pie__redes a:hover {
      color: var(--oro-claro);
    }

    .pie a.pol {
      color: #8FA9A8;
    }

    .toast {
      position: fixed;
      left: 18px;
      bottom: 18px;
      z-index: 70;
      background: var(--blanco);
      border: var(--borde);
      border-left: 3px solid var(--oro);
      border-radius: var(--radio-sm);
      box-shadow: var(--sombra);
      padding: 12px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      max-width: 320px;
      opacity: 0;
      transform: translateY(14px);
      pointer-events: none;
      transition: opacity .3s ease, transform .3s ease;
    }

    .toast.on {
      opacity: 1;
      transform: translateY(0);
    }

    .toast__ico {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(28, 107, 114, .12);
      color: var(--teal);
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }

    .toast__txt {
      font-size: .86rem;
      line-height: 1.4;
      color: var(--texto);
    }

    .toast__txt b {
      display: block;
      font-weight: 700;
    }

    .toast__txt span {
      color: var(--texto-suave);
      font-size: .8rem;
    }

    .cta-fijo {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 65;
      background: rgba(9, 36, 41, .96);
      backdrop-filter: blur(8px);
      border-top: 1px solid rgba(199, 154, 59, .34);
      padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
      display: none;
      transform: translateY(110%);
      transition: transform .28s ease;
    }

    .cta-fijo.is-visible {
      transform: translateY(0);
    }

    .cta-fijo .btn {
      width: 100%;
      padding: 16px 20px;
      font-size: 1rem;
    }

    .cta-fijo__precio {
      display: block;
      text-align: center;
      font-size: .76rem;
      color: #A9C3C2;
      margin-top: 6px;
    }

    .wa {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 66;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #25D366;
      color: #fff;
      display: none;
      align-items: center;
      justify-content: center;
      box-shadow: var(--sombra);
      text-decoration: none;
    }

    /* ================================================================
       RESPONSIVO
    ================================================================ */
    @media (max-width: 1024px) {
      .hero-grid {
        grid-template-columns: minmax(0, 72%);
      }

      .mentores,
      .bonos,
      .testimonios {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 900px) {

      .prog-grid,
      .comu-grid {
        grid-template-columns: 1fr;
      }

      .bio-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .bio-foto {
        max-width: 380px;
        aspect-ratio: 4/4.4;
      }
    }

    @media (max-width: 820px) {
      body {
        font-size: 16.5px;
      }

      .seccion {
        padding: 66px 0;
      }

      .seccion--ajustada {
        padding: 52px 0;
      }

      /* a arte deixa de ser fundo com véu e vira card nítido no topo */
      .hero {
        padding: 26px 0 46px;
      }

      .hero__bg,
      .hero__velo {
        display: none;
      }

      /* 16/9 em vez de 4/3: com 4/3 a arte come 64px a mais e o botão do
         hero cai abaixo da dobra num 390x844 (medido) */
      .hero-foto:not([hidden]) {
        display: block;
        border-radius: var(--radio);
        overflow: hidden;
        margin-bottom: 18px;
        aspect-ratio: 16/9;
        box-shadow: 0 16px 36px rgba(4, 20, 23, .45);
        border: 1px solid rgba(199, 154, 59, .3);
      }

      .hero-foto img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 62%;
      }

      .hero-grid {
        grid-template-columns: 1fr;
      }

      /* a ficha de data/formato sai do mobile: os três cards logo abaixo
         já trazem a mesma informação, e ela custava 60px da primeira dobra */
      .hero-datos {
        display: none;
      }

      .hero-pill {
        margin-bottom: 16px;
      }

      .hero h1 {
        font-size: clamp(1.95rem, 7.6vw, 2.6rem);
        margin-bottom: 16px;
      }

      .hero .sub {
        font-size: 1rem;
        margin-bottom: 22px;
      }

      .hero-cards {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 30px;
      }

      .hcard {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 13px 16px;
      }

      .hcard__ico {
        margin-bottom: 0;
      }

      .hero-stats {
        gap: 22px;
      }

      .lote {
        max-width: none;
      }

      /* em 360-390px o rótulo e o tempo restante cabem em uma linha cada
         (dentro do card de oferta a largura útil cai para ~310px) */
      .lote__top {
        font-size: .72rem;
      }

      .btn,
      .hero-cta-row .btn {
        width: 100%;
        max-width: none;
      }

      .mentores,
      .bonos,
      .testimonios {
        grid-template-columns: 1fr;
      }

      /* coluna única, mas o marco segue alternando de lado: é ele que
         faz a trilha serpentear no celular */
      .nivel,
      .nivel:nth-of-type(even) {
        width: 100%;
        margin-left: 0;
        margin-bottom: 30px;
      }

      .senda__lecho {
        stroke-width: 11;
      }

      .senda__via {
        stroke-width: 3.6;
        stroke-dasharray: 1.5 8;
      }

      .senda__final {
        stroke-width: 4.5;
        stroke-dasharray: 2 8;
      }

      .nivel__icono {
        width: 56px;
        height: 56px;
        left: 20px;
      }

      .mojon polygon {
        stroke-width: 5;
      }

      .nivel:nth-of-type(even) .nivel__icono {
        right: 20px;
      }

      .nivel__caja {
        padding: 44px 20px 24px;
        margin-top: 26px;
      }

      .nivel__tarja {
        margin-left: -20px;
        width: 72%;
      }

      .nivel:nth-of-type(even) .nivel__tarja {
        margin-right: -20px;
      }

      .nivel__nombre {
        font-size: 1.3rem;
      }

      .precio-card {
        padding: 32px 20px 30px;
      }

      .planes {
        grid-template-columns: 1fr;
        gap: 26px;
      }

      .plan {
        padding: 28px 22px 24px;
      }

      .incluye {
        max-width: none;
      }

      .garantia {
        flex-direction: column;
        gap: 14px;
        padding: 22px 20px;
      }

      .cuenta__box {
        min-width: 62px;
      }

      .cta-fijo {
        display: block;
      }

      .toast {
        left: 12px;
        right: 12px;
        bottom: 92px;
        max-width: none;
      }

      .wa {
        bottom: 96px;
      }
    }

    @media (max-width: 720px) {

      .despues-lista li:nth-child(2),
      .despues-lista li:nth-child(3),
      .despues-lista li:nth-child(4) {
        margin-left: 0;
      }
    }

    @media (max-width: 420px) {
      .fita__msg {
        padding: 0 16px;
        font-size: .7rem;
      }

      .cuenta {
        gap: 7px;
      }

      .cuenta__box {
        min-width: 56px;
        padding: 10px 4px 8px;
      }

      .cuenta__box b {
        font-size: 1.5rem;
      }
    }
  </style>
</head>

<body>

  <!-- ============================================================
       FITA STICKY · 4 mensagens rolando.
       Os dois grupos são idênticos de propósito (o -50% da animação
       depende disso): mexeu numa mensagem, mexa nas duas.
  ============================================================ -->
  <div class="fita" role="region" aria-label="Inscripciones abiertas">
    <div class="fita__pista">
      <div class="fita__grupo" aria-hidden="false">
        <span class="fita__msg">Inscripciones abiertas hasta el <b>miércoles 9 de septiembre</b></span>
        <span class="fita__punto"></span>
        <span class="fita__msg"><b class="precio-fita">$497 USD</b> o 3 cuotas de <b class="cuota-fita">$187 USD</b></span>
        <span class="fita__punto"></span>
        <span class="fita__msg">El camino empieza el <b>22 de septiembre</b></span>
        <span class="fita__punto"></span>
        <span class="fita__msg">La Cumbre 2026 es en <b>diciembre</b></span>
        <span class="fita__punto"></span>
      </div>
      <div class="fita__grupo" aria-hidden="true">
        <span class="fita__msg">Inscripciones abiertas hasta el <b>miércoles 9 de septiembre</b></span>
        <span class="fita__punto"></span>
        <span class="fita__msg"><b class="precio-fita">$497 USD</b> o 3 cuotas de <b class="cuota-fita">$187 USD</b></span>
        <span class="fita__punto"></span>
        <span class="fita__msg">El camino empieza el <b>22 de septiembre</b></span>
        <span class="fita__punto"></span>
        <span class="fita__msg">La Cumbre 2026 es en <b>diciembre</b></span>
        <span class="fita__punto"></span>
      </div>
    </div>
  </div>

  <!-- ============================================================
       HERO
       Desktop: arte full-bleed com véu, copy à esquerda.
       Mobile:  a arte vira card nítido acima da headline.
       Sem imagem no CONFIG, a cordilheira em SVG segura o bloco.
  ============================================================ -->
  <header class="hero">
    <div class="hero__sierra" aria-hidden="true">
      <svg viewBox="0 0 1440 420" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 420V250l150-88 122 62 118-96 136 108 130-146 148 170 126-70 144 96 116-54 150 92v96z" fill="#0E3A41" />
        <path d="M0 420V300l180-70 140 74 150-102 160 130 150-92 170 110 150-64 180 96v38z" fill="#0B3037" />
        <path d="M0 420V352l200-46 170 52 180-64 190 76 180-52 200 60 180-38 140 44v36z" fill="#092A30" />
      </svg>
    </div>
    <div class="hero__bg" id="heroBg" hidden><img alt="" id="heroBgImg" src=""></div>
    <div class="hero__velo" aria-hidden="true"></div>

    <div class="wrap">
      <div class="hero-foto" id="heroFoto" hidden><img alt="" id="heroFotoImg" src=""></div>

      <div class="hero-grid">
        <div>
          <span class="hero-pill">Sistema de maestría personal</span>

          <div class="hero-datos">
            <b>22 SEP al 10 NOV</b>
            <span class="sep"></span>
            <b>7 encuentros en vivo</b>
            <span class="sep"></span>
            <b>Online</b>
          </div>

          <h1>Ganá tu Año y alcanzá tu <em>cumbre 2026</em>.</h1>

          <p class="sub">Instalá el <b>ORDEN</b> de tus días, la <b>CLARIDAD</b> de tus prioridades y la
            <b>ACCIÓN</b> en lo pendiente. Ganá tu Año es el sistema de maestría personal completo que te va a
            sostener semana a semana hasta que alcances tu Cumbre 2026.
          </p>

          <div class="hero-cta-row">
            <a href="#oferta" class="btn btn--grande" data-cta-ancla>
              Quiero ganar mi año <span class="btn__flecha" aria-hidden="true">&rarr;</span>
            </a>
            <span class="btn-nota"><b class="precio-nota">$497 USD</b> en un pago o 3 cuotas de <b
                class="cuota-nota">$187 USD</b></span>
          </div>

          <div class="lote">
            <div class="lote__top">
              <span class="lote__rot">La inscripción cierra el 9 de septiembre</span>
              <b class="pct">0%</b>
            </div>
            <div class="lote__riel">
              <div class="lote__fill"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="hero-cards">
        <div class="hcard">
          <span class="hcard__ico" aria-hidden="true">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
              stroke-linecap="round">
              <rect x="3" y="5" width="18" height="16" rx="2" />
              <path d="M8 3v4M16 3v4M3 10h18" />
            </svg>
          </span>
          <div>
            <span class="hcard__rot">Empieza</span>
            <span class="hcard__val">Martes 22 de septiembre</span>
          </div>
        </div>
        <div class="hcard">
          <span class="hcard__ico" aria-hidden="true">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
              stroke-linecap="round">
              <path d="M15 10l5-3v10l-5-3z" />
              <rect x="3" y="6" width="12" height="12" rx="2" />
            </svg>
          </span>
          <div>
            <span class="hcard__rot">Formato</span>
            <span class="hcard__val">7 encuentros en vivo con Sofía</span>
          </div>
        </div>
        <div class="hcard">
          <span class="hcard__ico" aria-hidden="true">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
              stroke-linecap="round">
              <path d="M12 2l3 6 7 1-5 5 1.2 7L12 18l-6.2 3L7 14 2 9l7-1z" />
            </svg>
          </span>
          <div>
            <span class="hcard__rot">Acceso</span>
            <span class="hcard__val">De por vida</span>
          </div>
        </div>
      </div>

      <div class="hero-stats">
        <div class="hstat"><b>+30.000</b><span>copias vendidas de Pasa a la Acción</span></div>
        <div class="hstat"><b>+18.000</b><span>personas acompañadas</span></div>
        <div class="hstat"><b>+500</b><span>conferencias dadas</span></div>
      </div>
    </div>
  </header>

  <!-- ============================================================
       DIAGNÓSTICO
  ============================================================ -->
  <section class="seccion diag">
    <div class="wrap">
      <div class="diag__col">
        <h2>La inacción tiene su precio</h2>
        <p class="diag__pregunta">¿Sabés cuál es la palabra que más repetís y se está cobrando tu vida?</p>

        <p class="despues">Después…</p>

        <ul class="despues-lista">
          <li><b>Después</b> ordeno mis finanzas.</li>
          <li><b>Después</b> empiezo a cuidar mi salud.</li>
          <li><b>Después</b> tengo esa conversación que vengo evitando.</li>
          <li><b>Después</b> arranco eso que prometí hace tiempo.</li>
        </ul>

        <p class="diag__acumula">La misma palabra, día tras día, año tras año. La dijiste en enero. La dijiste
          este mes. Probablemente la dijiste hoy.</p>

        <div class="diag__sep" aria-hidden="true"></div>

        <div class="contador-anio">
          <span class="contador-anio__num">100</span>
          <p class="contador-anio__txt">días para que se termine este año. La pregunta ahora no es cuántos
            "después" acumulaste. Es qué vas a hacer con los 100 que te quedan.</p>
        </div>

        <p class="diag__costo">La inacción también tiene su costo.</p>

        <p class="diag__remate">¿Vas a repetir el mismo año nuevamente o vas a decidir que sea <em>el año donde
            todo cambia</em>?</p>
      </div>
    </div>
  </section>

  <!-- ============================================================
       EL PROGRAMA
  ============================================================ -->
  <section class="seccion seccion--crema">
    <div class="wrap">
      <div class="titulo-bloque">
        <h2>100 días que lo cambian todo</h2>
        <p>Avanzarás más hacia tu cumbre en este programa de lo que lo hiciste en los últimos años.</p>
      </div>

      <div class="prog-grid">
        <article class="pcard">
          <div class="pcard__img" data-img="mockupPlan">
            <svg viewBox="0 0 400 250" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <g fill="none" stroke="#7FBEC0" stroke-width="1.4" opacity=".5">
                <rect x="124" y="58" width="152" height="134" rx="7" />
                <path d="M124 92h152" />
              </g>
              <g fill="#C79A3B" opacity=".55">
                <rect x="140" y="106" width="10" height="10" rx="2" />
                <rect x="158" y="106" width="10" height="10" rx="2" />
                <rect x="176" y="106" width="10" height="10" rx="2" />
                <rect x="140" y="124" width="10" height="10" rx="2" />
                <rect x="194" y="124" width="10" height="10" rx="2" />
                <rect x="158" y="142" width="10" height="10" rx="2" />
                <rect x="212" y="142" width="10" height="10" rx="2" />
                <rect x="140" y="160" width="10" height="10" rx="2" />
              </g>
            </svg>
          </div>
          <div class="pcard__cuerpo">
            <h3>100 días que lo cambian todo</h3>
            <p>Del 22 de septiembre al 10 de noviembre trabajamos en vivo, y el
              acompañamiento sigue hasta el 31 de diciembre. Son los últimos 100 días del
              año, usados a favor tuyo.</p>
          </div>
        </article>

        <article class="pcard">
          <div class="pcard__img" data-img="mockupSistema">
            <svg viewBox="0 0 400 250" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <g fill="none" stroke="#7FBEC0" stroke-width="1.4" opacity=".5">
                <rect x="112" y="66" width="176" height="112" rx="8" />
                <path d="M160 190h80" />
              </g>
              <g fill="#C79A3B" opacity=".4">
                <rect x="126" y="80" width="46" height="34" rx="4" />
                <rect x="178" y="80" width="46" height="34" rx="4" />
                <rect x="230" y="80" width="46" height="34" rx="4" />
                <rect x="126" y="120" width="46" height="34" rx="4" />
                <rect x="178" y="120" width="46" height="34" rx="4" />
                <rect x="230" y="120" width="46" height="34" rx="4" />
              </g>
            </svg>
          </div>
          <div class="pcard__cuerpo">
            <h3>Sistema personal completo</h3>
            <p>Compartido en 7 encuentros en vivo con Sofía Contreras. Sesiones intensivas
              donde enfocás, desbloqueás y accionás hacia TU PROPIA cumbre.</p>
          </div>
        </article>

        <article class="pcard">
          <div class="pcard__img" data-img="mockupAcceso">
            <svg viewBox="0 0 400 250" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <g fill="none" stroke="#7FBEC0" stroke-width="1.4" opacity=".5">
                <rect x="120" y="58" width="104" height="134" rx="6" />
                <rect x="236" y="86" width="60" height="106" rx="8" />
              </g>
              <path d="M120 150c30-22 54-22 104 0v36a6 6 0 01-6 6h-92a6 6 0 01-6-6z" fill="#C79A3B" opacity=".32" />
              <path d="M236 158c18-14 34-14 60 0v28a6 6 0 01-6 6h-48a6 6 0 01-6-6z" fill="#C79A3B" opacity=".28" />
            </svg>
          </div>
          <div class="pcard__cuerpo">
            <h3>Acceso de por vida</h3>
            <p>Para que regreses cada vez que las cosas se pongan difíciles y quieras reconfigurar y avanzar.</p>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ============================================================
       LOS 7 NIVELES · a senda
  ============================================================ -->
  <section class="seccion senda-mapa" id="niveles">
    <div class="senda-mapa__pintura" aria-hidden="true">
      <svg viewBox="0 0 1440 420" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 420V236l180-118 140 96 170-140 160 150 150-90 190 128 160-76 290 168v122z" fill="#0E3A41" />
        <path d="M0 420V310l210-64 170 70 180-84 190 96 190-62 300 84v80z" fill="#0A2C32" />
      </svg>
    </div>
    <div class="senda-mapa__fondo" id="sendaFondo" hidden><img alt="" id="sendaFondoImg" src=""></div>
    <div class="senda-mapa__mapa" id="sendaMapa" hidden></div>
    <div class="senda-mapa__velo" aria-hidden="true"></div>

    <div class="wrap">
      <div class="titulo-bloque">
        <h2>Atravesamos 7 niveles y nos encontramos <em class="oro">todos en la cumbre</em>, en diciembre</h2>
        <p>Cada nivel resuelve una razón concreta por la que hasta hoy no avanzaste. No se saltea ninguno: así se
          sube.</p>
      </div>

      <div class="senda">
        <svg class="senda__linea" id="sendaLinea" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <linearGradient id="viaGrad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#1C6B72" />
              <stop offset="55%" stop-color="#3E8C82" />
              <stop offset="100%" stop-color="#C79A3B" />
            </linearGradient>
          </defs>
          <g class="senda__curvas"></g>
          <path class="senda__lecho" d="" />
          <path class="senda__borde" d="" />
          <path class="senda__via" d="" />
          <path class="senda__final" d="" />
        </svg>

        <article class="nivel">
          <span class="nivel__icono" aria-hidden="true">
            <svg class="mojon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
              <polygon points="50,4 91,27 91,73 50,96 9,73 9,27" />
            </svg>
            <svg class="ico" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
              stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="6" r="2.4"/><path d="M3 12.5c2.4-2.2 4.2-2.2 6.6 0s4.2 2.2 6.6 0 4.2-2.2 4.8-1.2"/><path d="M3 17.5c2.4-2.2 4.2-2.2 6.6 0s4.2 2.2 6.6 0 4.2-2.2 4.8-1.2"/>
            </svg>
          </span>
          <div class="nivel__caja">
            <span class="nivel__tarja">Nivel I</span>
            <h3 class="nivel__nombre">PROFUNDIZA</h3>
            <p>Acá entendés por qué ese éxito que "se ve bien" no te llena. Aprendés a poner los límites que hasta
            ahora cedías sin darte cuenta, porque nadie construye algo propio desde una vida prestada.</p>
          </div>
        </article>

        <article class="nivel">
          <span class="nivel__icono" aria-hidden="true">
            <svg class="mojon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
              <polygon points="50,4 91,27 91,73 50,96 9,73 9,27" />
            </svg>
            <svg class="ico" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
              stroke-linecap="round" stroke-linejoin="round">
              <path d="M4 20L20 4"/><path d="M4 20h16"/><path d="M4 20V9"/><path d="M9 15l2.4 2.4"/><path d="M13 11l2.4 2.4"/>
            </svg>
          </span>
          <div class="nivel__caja">
            <span class="nivel__tarja">Nivel II</span>
            <h3 class="nivel__nombre">DISEÑA</h3>
            <p>Acá entendés por qué tu año ideal nunca pasa de ser una idea. No es falta de disciplina: es que nunca
            supiste cómo activar tu cerebro para enfocarse en lo concreto. Aprendés a diseñar tus días y tu vida,
            porque nada cambia el 1 de enero, cambia en la unidad pequeña que te lleva a la cumbre.</p>
          </div>
        </article>

        <article class="nivel">
          <span class="nivel__icono" aria-hidden="true">
            <svg class="mojon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
              <polygon points="50,4 91,27 91,73 50,96 9,73 9,27" />
            </svg>
            <svg class="ico" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
              stroke-linecap="round" stroke-linejoin="round">
              <path d="M13 2L5 13h5.5L10 22l8.5-11H13z"/>
            </svg>
          </span>
          <div class="nivel__caja">
            <span class="nivel__tarja">Nivel III</span>
            <h3 class="nivel__nombre">ACCIONA</h3>
            <p>Acá entendés por qué arrancás con todo y en dos semanas ya aflojaste. Estás usando el combustible
            incorrecto: las metas solas no sostienen nada. Armás el sistema que te va a sostener incluso los días
            sin ganas.</p>
          </div>
        </article>

        <article class="nivel">
          <span class="nivel__icono" aria-hidden="true">
            <svg class="mojon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
              <polygon points="50,4 91,27 91,73 50,96 9,73 9,27" />
            </svg>
            <svg class="ico" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
              stroke-linecap="round" stroke-linejoin="round">
              <rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 017.6-1.8"/>
            </svg>
          </span>
          <div class="nivel__caja">
            <span class="nivel__tarja">Nivel IV</span>
            <h3 class="nivel__nombre">ROMPE</h3>
            <p>Con el sistema puesto, enfrentás lo que realmente te frena: la resistencia que aparece justo cuando
            estás por avanzar. Acá entendés por qué sabés exactamente qué hacer y aun así no lo hacés, y cómo
            superarlo.</p>
          </div>
        </article>

        <article class="nivel">
          <span class="nivel__icono" aria-hidden="true">
            <svg class="mojon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
              <polygon points="50,4 91,27 91,73 50,96 9,73 9,27" />
            </svg>
            <svg class="ico" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
              stroke-linecap="round" stroke-linejoin="round">
              <path d="M3 4h18l-7 8.2V20l-4 2v-9.8z"/>
            </svg>
          </span>
          <div class="nivel__caja">
            <span class="nivel__tarja">Nivel V</span>
            <h3 class="nivel__nombre">CANALIZA</h3>
            <p>Acá entendés por qué la frustración y el enojo te vienen ganando hace años. Dejan de ser obstáculos y
            se vuelven información a tu favor. Aprendés a usarlos a tu favor, porque lo que reprimís no
            desaparece: decide por vos cuando menos lo esperás.</p>
          </div>
        </article>

        <article class="nivel">
          <span class="nivel__icono" aria-hidden="true">
            <svg class="mojon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
              <polygon points="50,4 91,27 91,73 50,96 9,73 9,27" />
            </svg>
            <svg class="ico" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
              stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="4.5" r="2.2"/><path d="M12 6.7V21"/><path d="M7.5 11h9"/><path d="M4.5 14.5a7.5 7.5 0 0015 0"/>
            </svg>
          </span>
          <div class="nivel__caja">
            <span class="nivel__tarja">Nivel VI</span>
            <h3 class="nivel__nombre">PERMANECE</h3>
            <p>Acá entendés por qué un solo tropiezo te hace abandonar todo lo que venías construyendo. Porque la
            pregunta no es si vas a fallar en el camino, es cuándo: el fallo es inevitable. Acá el fracaso deja de
            sacarte de la cancha y empieza a sumarte.</p>
          </div>
        </article>

        <article class="nivel nivel--cumbre">
          <span class="nivel__icono" aria-hidden="true">
            <svg class="mojon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
              <polygon points="50,4 91,27 91,73 50,96 9,73 9,27" />
            </svg>
            <svg class="ico" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
              stroke-linecap="round" stroke-linejoin="round">
              <path d="M2 20h20L14.5 6.5 11 12.8 8.4 9z"/><path d="M14.5 6.5V2l4.2 1.4-4.2 1.6"/>
            </svg>
          </span>
          <div class="nivel__caja">
            <span class="nivel__tarja">Nivel VII</span>
            <h3 class="nivel__nombre">TRASCIENDE</h3>
            <p>Acá entendés por qué postergás justo lo que más te importa: no es que tengas tiempo de sobra, es que
            actuás como si lo tuvieras. Aprendés a vivir con la urgencia real que la vida tiene, porque nadie, en
            su último día, recuerda los "después" que nunca existieron.</p>
          </div>
        </article>

      </div>
    </div>
  </section>

  <!-- ============================================================
       LA CUMBRE 2026 · o evento de dezembro
  ============================================================ -->
  <section class="seccion cumbre">
    <div class="cumbre__pintura" aria-hidden="true">
      <svg viewBox="0 0 1440 360" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 360V214l190-104 150 96 160-130 170 150 160-96 180 118 170-72 260 148v136z" fill="#0E3A41" />
        <path d="M0 360V282l220-52 180 60 190-72 200 82 200-52 250 66v46z" fill="#092A30" />
      </svg>
    </div>
    <div class="cumbre__bg" id="cumbreBg" hidden><img alt="" id="cumbreBgImg" src=""></div>
    <div class="cumbre__velo" aria-hidden="true"></div>

    <div class="wrap">
      <div class="cumbre__caja">
        <span class="cumbre__fecha">Diciembre 2026 · en vivo</span>
        <h2>La Cumbre 2026</h2>
        <p>Evento online en vivo en diciembre con el gran cierre de ciclo, con toda tu camada reunida, donde
          premiamos el compromiso, el esfuerzo y a todos los comprometidos con su cumbre. Acá ves realmente cómo
          comenzaste y dónde te encontrás hoy.</p>
        <p class="cumbre__remate">No es un evento más. Es el hito que marca el cambio radical que buscabas. Y lo
          celebramos todos juntos.</p>
      </div>
    </div>
  </section>

  <!-- ============================================================
       ESPECIALISTAS
       As 6 fotos são [FOTO-REAL]: enquanto não chegam, cada card
       mostra o monograma. Basta preencher CONFIG.FOTOS.mentores.
  ============================================================ -->
  <section class="seccion seccion--crema" id="especialistas">
    <div class="wrap">
      <div class="titulo-bloque">
        <h2>¿Cuál es tu área foco hacia tu <em class="oro">cumbre 2026</em>?</h2>
        <p>Accedés a masterclasses exclusivas con referentes especialistas. Porque en este recorrido no estoy
          sola. No se llega a la Cumbre solo con voluntad: se llega con la persona indicada en la posta justa.</p>
      </div>

      <div class="mentores">
        <article class="mentor">
          <div class="mentor__foto" data-foto="mentor1">
            <div class="mentor__mono" aria-hidden="true">MM</div>
          </div>
          <div class="mentor__cuerpo">
            <h3 class="mentor__nombre">Marina Mammoliti</h3>
            <p>Es la psicóloga detrás de "Psicología al Desnudo", uno de los podcasts de salud mental más
              escuchados en español, y fundadora de Psi Mammoliti, la plataforma que acompaña a miles de personas
              por semana en todo el mundo.</p>
            <p class="mentor__ref">Va a ser tu referente en <b>Salud</b>: el mismo trabajo que hace con su
              comunidad global, puesto sobre tus relaciones concretas.</p>
          </div>
        </article>

        <article class="mentor">
          <div class="mentor__foto" data-foto="mentor2">
            <div class="mentor__mono" aria-hidden="true">VG</div>
          </div>
          <div class="mentor__cuerpo">
            <h3 class="mentor__nombre">Vero Giordano</h3>
            <p>Fundó Jaribu Finanzas para acompañar a mujeres emprendedoras a ordenar su plata y convertirse en la
              CFO de su propio proyecto, no después de escalarlo, sino como condición para lograrlo.</p>
            <p class="mentor__ref">Va a ser tu referente en <b>Finanzas</b>: el mismo método con el que ordenó las
              cuentas de cientos de emprendedoras, ahora sobre las tuyas.</p>
          </div>
        </article>

        <article class="mentor">
          <div class="mentor__foto" data-foto="mentor3">
            <div class="mentor__mono" aria-hidden="true">SS</div>
          </div>
          <div class="mentor__cuerpo">
            <h3 class="mentor__nombre">Santiago Siri</h3>
            <p>Fundó cerca de una decena de empresas de internet, entre ellas Three Melons, adquirida por Disney en
              2010, y hoy preside Democracy Earth Foundation, referente en el futuro del trabajo y la tecnología.
            </p>
            <p class="mentor__ref">Va a ser tu referente en <b>Trabajo</b>: para repensar tu carrera o tu negocio
              con la misma cabeza con la que él lleva una década adelantado al resto.</p>
          </div>
        </article>

        <article class="mentor">
          <div class="mentor__foto" data-foto="mentor4">
            <div class="mentor__mono" aria-hidden="true">NG</div>
          </div>
          <div class="mentor__cuerpo">
            <h3 class="mentor__nombre">Nico Grupe</h3>
            <p>Coach de productividad y desarrollo personal con más de un millón de seguidores, creador del método
              FARO y profesor en la Universidad Católica de Córdoba.</p>
            <p class="mentor__ref">Va a ser tu referente en <b>Desarrollo Personal</b>: el mismo método con el que
              ya acompañó a más de 500 alumnos.</p>
          </div>
        </article>

        <article class="mentor">
          <div class="mentor__foto" data-foto="mentor5">
            <div class="mentor__mono" aria-hidden="true">MA</div>
          </div>
          <div class="mentor__cuerpo">
            <h3 class="mentor__nombre">Marcos Apud</h3>
            <p>Psicólogo clínico y biohacker, especializado en optimizar cuerpo, mente y energía con hábitos
              sostenibles, no con soluciones rápidas ni dietas de moda.</p>
            <p class="mentor__ref">Va a ser tu referente en <b>Salud</b>: los hábitos que sostienen todo lo demás.
            </p>
          </div>
        </article>

        <article class="mentor">
          <div class="mentor__foto" data-foto="mentor6">
            <div class="mentor__mono" aria-hidden="true">NC</div>
          </div>
          <div class="mentor__cuerpo">
            <h3 class="mentor__nombre">Julian Appiani</h3>
            <p>Chef profesional y coach de nutrición con más de 590 mil seguidores, creador de "MAPPA", su programa
              de transformación para recuperar energía y cambiar tu cuerpo con comida real.</p>
            <p class="mentor__ref">El mismo método con el que ya acompañó a <b>miles de personas</b> a comer
              distinto sin que se sienta un sacrificio.</p>
          </div>
        </article>
      </div>

      <span class="sin-costo">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M20 6L9 17l-5-5" />
        </svg>
        6 mentores especialistas incluidos, sin costo extra
      </span>
    </div>
  </section>

  <!-- ============================================================
       TESTIMONIOS · cargado desde partials/gta-testimonios.html
       ----------------------------------------------------------------
       03/09/2026 · Separada en un archivo aparte a pedido de Sofía: así
       se puede seguir afinando testimonios (agregar citas reales del
       libro y del Workshop de Gestión del Tiempo, ajustar copy) sin que
       esos cambios convivan en el mismo diff que un cambio urgente en
       ESTE archivo. El contenido y el historial de la sección están en
       partials/gta-testimonios.html — se inyecta acá por fetch() en el
       bloque "0) INCLUIR PARCIAIS" del script, antes de que corra la
       aplicación de fotos (bloque 4), que se vuelve a llamar después de
       la inyección para resolver las fotos de data-foto="testi1..6".
       Depende de JS: si el fetch falla (archivo movido, o la página
       abierta como file:// en vez de servida por Vercel), esta sección
       simplemente no aparece y el resto de la página sigue funcionando.
  ============================================================ -->
  <div id="incluirTestimonios" data-incluir="/partials/gta-testimonios.html"></div>

  <!-- ============================================================
       WALL DE CAPTURAS · cargado desde partials/gta-wall-tiempo.html
       ----------------------------------------------------------------
       03/09/2026 · Primer borrador a pedido de Sofía, para ver el
       formato general con las 19 capturas reales que ya mandó, sin los
       testimonios del libro (esos siguen pendientes de aprobación).
       Mismo mecanismo de include que el bloque de arriba — ver el
       comentario de partials/gta-wall-tiempo.html para el detalle y el
       porqué de estar en su propio archivo.
  ============================================================ -->
  <div id="incluirWallTiempo" data-incluir="/partials/gta-wall-tiempo.html"></div>

  <!-- ============================================================
       BONOS
       03/09/2026: la bajada mostraba "Solas suman $1.800 USD" — se
       sacó a pedido de Sofía, mismo criterio que ya se había aplicado
       en el tachado del card de precio (ver CONFIG.PRECIO_TACHADO más
       abajo). El número salía de la función sumaBonos() del script,
       que sumaba data-valor de .stack__linea — una sección de precio
       que ya no existe en este HTML. Esa función también se sacó: sin
       .stack__linea en la página, no hacía nada (early return).
  ============================================================ -->
  <section class="seccion seccion--crema2" id="bonos">
    <div class="wrap">
      <div class="titulo-bloque">
        <h2>Nueve bonos <em class="oro">exclusivos</em></h2>
        <p>Nueve piezas que se suman a tu inscripción, sin costo extra.</p>
      </div>

      <div class="bonos">
        <article class="bono">
          <div class="bono__palco" data-img="bono1">
            <span class="bono__sello" aria-hidden="true">
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                stroke-linecap="round" stroke-linejoin="round">
                <path d="M5 3l14 9-14 9z" />
              </svg>
              <b>01</b>
            </span>
          </div>
          <div class="bono__cuerpo">
            <div class="bono__meta">
              <span class="bono__num">Bono 01</span>
              <span class="bono__chip">Acceso</span>
            </div>
            <h3>Acceso de por Vida al contenido de Ganá tu Día</h3>
            <p>Volvé a Ganá tu Día las veces que quieras, para siempre.</p>
            <div class="bono__pie">
              <span class="bono__valor">$297 USD</span>
              <span class="bono__incluido">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
                  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M20 6L9 17l-5-5" />
                </svg>
                Incluido
              </span>
            </div>
          </div>
        </article>

        <article class="bono">
          <div class="bono__palco" data-img="bono2">
            <span class="bono__sello" aria-hidden="true">
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                stroke-linecap="round" stroke-linejoin="round">
                <circle cx="7" cy="7" r="2.6"/><circle cx="17" cy="7" r="2.6"/><circle cx="12" cy="17" r="2.6"/><path d="M9 8.4l2 6M15 8.4l-2 6M9.6 7h4.8"/>
              </svg>
              <b>02</b>
            </span>
          </div>
          <div class="bono__cuerpo">
            <div class="bono__meta">
              <span class="bono__num">Bono 02</span>
              <span class="bono__chip">Sistema</span>
            </div>
            <h3>Modelos Mentales: Pensá Claro, Decidí Mejor</h3>
            <p>Los modelos mentales para decidir rápido y bien, incluso bajo presión.</p>
            <div class="bono__pie">
              <span class="bono__valor">$97 USD</span>
              <span class="bono__incluido">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
                  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M20 6L9 17l-5-5" />
                </svg>
                Incluido
              </span>
            </div>
          </div>
        </article>

        <article class="bono">
          <div class="bono__palco" data-img="bono3">
            <span class="bono__sello" aria-hidden="true">
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18M8 15h4"/>
              </svg>
              <b>03</b>
            </span>
          </div>
          <div class="bono__cuerpo">
            <div class="bono__meta">
              <span class="bono__num">Bono 03</span>
              <span class="bono__chip">Hoja de ruta</span>
            </div>
            <h3>Planificá tu Año Completo: Tu Hoja de Ruta Estratégica</h3>
            <p>Tu hoja de ruta del año, con objetivos claros y nada librado al azar.</p>
            <div class="bono__pie">
              <span class="bono__valor">$97 USD</span>
              <span class="bono__incluido">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
                  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M20 6L9 17l-5-5" />
                </svg>
                Incluido
              </span>
            </div>
          </div>
        </article>

        <article class="bono">
          <div class="bono__palco" data-img="bono4">
            <span class="bono__sello" aria-hidden="true">
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 12a9 9 0 11-3.2-6.9"/><path d="M21 4v5h-5"/>
              </svg>
              <b>04</b>
            </span>
          </div>
          <div class="bono__cuerpo">
            <div class="bono__meta">
              <span class="bono__num">Bono 04</span>
              <span class="bono__chip">Metodología</span>
            </div>
            <h3>Reset de Fin de Año: Cerrá Ciclos, Abrí Espacio</h3>
            <p>La metodología para cerrar ciclos y arrancar el próximo con la cabeza despejada.</p>
            <div class="bono__pie">
              <span class="bono__valor">$197 USD</span>
              <span class="bono__incluido">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
                  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M20 6L9 17l-5-5" />
                </svg>
                Incluido
              </span>
            </div>
          </div>
        </article>

        <article class="bono">
          <div class="bono__palco" data-img="bono5">
            <span class="bono__sello" aria-hidden="true">
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="9"/><path d="M12 7v5.4l3.4 2"/>
              </svg>
              <b>05</b>
            </span>
          </div>
          <div class="bono__cuerpo">
            <div class="bono__meta">
              <span class="bono__num">Bono 05</span>
              <span class="bono__chip">Workshop</span>
            </div>
            <h3>Workshop de Gestión del Tiempo</h3>
            <p>El workshop best seller de la Academia SC, con más de 5.000 personas, para recuperar el control de tus días.</p>
            <div class="bono__pie">
              <span class="bono__valor">$357 USD</span>
              <span class="bono__incluido">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
                  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M20 6L9 17l-5-5" />
                </svg>
                Incluido
              </span>
            </div>
          </div>
        </article>

        <article class="bono">
          <div class="bono__palco" data-img="bono6">
            <span class="bono__sello" aria-hidden="true">
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 4h5.5a2.5 2.5 0 012.5 2.5V20a2 2 0 00-2-2H4z"/><path d="M20 4h-5.5A2.5 2.5 0 0012 6.5V20a2 2 0 012-2h6z"/>
              </svg>
              <b>06</b>
            </span>
          </div>
          <div class="bono__cuerpo">
            <div class="bono__meta">
              <span class="bono__num">Bono 06</span>
              <span class="bono__chip">Biblioteca</span>
            </div>
            <h3>La Biblioteca del Tiempo</h3>
            <p>Los libros que transformaron mi visión y la de miles de alumnos.</p>
            <div class="bono__pie">
              <span class="bono__valor">$47 USD</span>
              <span class="bono__incluido">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
                  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M20 6L9 17l-5-5" />
                </svg>
                Incluido
              </span>
            </div>
          </div>
        </article>

        <article class="bono">
          <div class="bono__palco" data-img="bono7">
            <span class="bono__sello" aria-hidden="true">
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                stroke-linecap="round" stroke-linejoin="round">
                <path d="M14.7 6.3a4 4 0 00-5.4 5.4L4 17v3h3l5.3-5.3a4 4 0 005.4-5.4l-2.6 2.6-2.4-2.4z"/>
              </svg>
              <b>07</b>
            </span>
          </div>
          <div class="bono__cuerpo">
            <div class="bono__meta">
              <span class="bono__num">Bono 07</span>
              <span class="bono__chip">Recursos</span>
            </div>
            <h3>La Caja de Herramientas para Ganar tus Días</h3>
            <p>Mi selección personal de recursos técnicos para rendir más cada día.</p>
            <div class="bono__pie">
              <span class="bono__valor">$97 USD</span>
              <span class="bono__incluido">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
                  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M20 6L9 17l-5-5" />
                </svg>
                Incluido
              </span>
            </div>
          </div>
        </article>

        <article class="bono">
          <div class="bono__palco" data-img="bono8">
            <span class="bono__sello" aria-hidden="true">
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                stroke-linecap="round" stroke-linejoin="round">
                <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.9M16 3.1a4 4 0 010 7.8"/>
              </svg>
              <b>08</b>
            </span>
          </div>
          <div class="bono__cuerpo">
            <div class="bono__meta">
              <span class="bono__num">Bono 08</span>
              <span class="bono__chip">Sistema</span>
            </div>
            <h3>Ordená tu Equipo: Las Reuniones Que Sí Funcionan</h3>
            <p>El sistema para que tu equipo deje de perder tiempo y gane foco.</p>
            <div class="bono__pie">
              <span class="bono__valor">$474 USD</span>
              <span class="bono__incluido">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
                  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M20 6L9 17l-5-5" />
                </svg>
                Incluido
              </span>
            </div>
          </div>
        </article>

        <article class="bono">
          <div class="bono__palco" data-img="bono9">
            <span class="bono__sello" aria-hidden="true">
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
                stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 2l3 6 7 1-5 5 1.2 7L12 18l-6.2 3L7 14 2 9l7-1z"/>
              </svg>
              <b>09</b>
            </span>
          </div>
          <div class="bono__cuerpo">
            <div class="bono__meta">
              <span class="bono__num">Bono 09</span>
              <span class="bono__chip">Masterclass</span>
            </div>
            <h3>Creá tu Destino: Masterclass con Sofi</h3>
            <p>Los 5 mecanismos para construir negocios sólidos: Sofi te lleva a diseñar el destino que querés.</p>
            <div class="bono__pie">
              <span class="bono__valor">$137 USD</span>
              <span class="bono__incluido">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
                  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M20 6L9 17l-5-5" />
                </svg>
                Incluido
              </span>
            </div>
          </div>
        </article>

      </div>
    </div>
  </section>

  <!-- ============================================================
       COMUNIDAD · sube antes de la BIO a propósito: corta la racha de
       tres secciones claras seguidas (especialistas, bonos) y le da a
       Sofía como instructora una entrada propia, con el fondo oscuro
       de por medio como respiro visual.
  ============================================================ -->
  <section class="seccion seccion--ajustada seccion--oscura">
    <div class="wrap">
      <div class="titulo-bloque centrado">
        <h2>Nadie sube solo</h2>
        <p>Todo lo que pasa en Ganá tu Año se hace en comunidad, y mi equipo de mentores está acompañando cada día
          y cada nuevo nivel.</p>
      </div>

      <div class="comu-grid">
        <div class="comu">
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
            stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
            <circle cx="9" cy="7" r="4" />
            <path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75" />
          </svg>
          <b>Comunidad</b>
          <span>Tu camada entera subiendo al mismo tiempo, semana a semana.</span>
        </div>
        <div class="comu">
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
            stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
          </svg>
          <b>Soporte humano</b>
          <span>Personas que responden, no un formulario que se pierde.</span>
        </div>
        <div class="comu">
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
            stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M12 2l3 6 7 1-5 5 1.2 7L12 18l-6.2 3L7 14 2 9l7-1z" />
          </svg>
          <b>Mentores</b>
          <span>Seis especialistas en las áreas troncales de tu vida.</span>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       BIO · [FOTO-REAL] da Sofía (CONFIG.FOTOS.sofia)
  ============================================================ -->
  <section class="seccion seccion--crema2 bio">
    <div class="wrap">
      <div class="bio-grid">
        <div class="bio-foto" data-foto="sofia">
          <div class="bio-foto__slot">Foto de Sofía Contreras<br>(4:5)</div>
        </div>

        <div>
          <h2>Quién soy yo para acompañarte</h2>
          <p>Cuando te hablo de alcanzar lo que te proponés y reconstruir tu vida, no te habla una teórica ni
            alguien que recién sale a la vida.</p>
          <p>Te hablo desde la experiencia de haber reconstruido mi propia vida y acompañado a miles a hacer lo
            mismo.</p>

          <ul class="bio-logros">
            <li>
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"
                stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M20 6L9 17l-5-5" />
              </svg>
              <span>Escribí el best seller <b>Pasa a la Acción</b>, con más de 30.000 copias vendidas.</span>
            </li>
            <li>
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"
                stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M20 6L9 17l-5-5" />
              </svg>
              <span>Acompañé a más de <b>18.000 personas</b> a transformar sus hábitos en mi academia de
                productividad.</span>
            </li>
            <li>
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"
                stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M20 6L9 17l-5-5" />
              </svg>
              <span>He dado más de <b>500 conferencias</b> llevando mi mensaje a miles de personas para salir del
                piloto automático y recuperar su poder.</span>
            </li>
            <li>
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"
                stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M20 6L9 17l-5-5" />
              </svg>
              <span>Llevo <b>16 años</b> de carrera profesional. He asesorado a CEOs, deportistas y estrellas de
                cine y televisión.</span>
            </li>
            <li>
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"
                stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M20 6L9 17l-5-5" />
              </svg>
              <span>Mi podcast <b>"Pasa a la acción"</b> acumula millones de escuchas y es uno de los más
                reproducidos en su categoría.</span>
            </li>
          </ul>

          <p class="bio-firma">Todo lo que vemos, lo viví, lo hice y lo validé. Funciona.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       OFERTA
       Os dois preços aparecem juntos, no formato pedido: cifra grande
       para o pago único e pill ao lado para as cuotas.
       O riscado só aparece se CONFIG.PRECIO_TACHADO tiver valor.
       O bloco de garantia só aparece se CONFIG.GARANTIA_DIAS for maior
       que zero (a página nunca promete garantia que não foi confirmada).
  ============================================================ -->
  <section class="seccion oferta" id="oferta">
    <div class="wrap">
      <div class="precio-card">
        <h2>Las inscripciones <em class="oro">están abiertas</em></h2>
        <p class="precio-card__nota">Tenés hasta el miércoles 9 de septiembre para entrar. El camino empieza el
          22 con toda la camada junta, y llegamos juntos a la Cumbre en diciembre.</p>

        <div class="cuenta-wrap" id="cuentaWrap">
          <p class="cuenta__rot">La inscripción cierra en</p>
          <div class="cuenta" id="cuenta" hidden>
            <div class="cuenta__box"><b data-c="d">00</b><span>días</span></div>
            <div class="cuenta__box"><b data-c="h">00</b><span>hs</span></div>
            <div class="cuenta__box"><b data-c="m">00</b><span>min</span></div>
            <div class="cuenta__box"><b data-c="s">00</b><span>seg</span></div>
          </div>
        </div>

        <span class="precio-tachado" id="precioTachado" hidden></span>

        <div class="planes">
          <div class="plan plan--destacado">
            <span class="plan__tarja">Mejor valor</span>
            <span class="plan__nombre">Pago único</span>
            <span class="plan__detalle">Un solo pago · Acceso inmediato</span>
            <span class="plan__precio">
              <b class="plan__cifra" id="planUnicoCifra">$497</b>
              <span class="plan__moneda">USD</span>
            </span>
            <span class="plan__nota">Entrás con todo, de una vez.</span>
            <a href="#" class="btn" data-cta data-plan="unico">
              Quiero mi lugar <span class="btn__flecha" aria-hidden="true">&rarr;</span>
            </a>
          </div>

          <div class="plan">
            <span class="plan__nombre">Pago en cuotas</span>
            <span class="plan__detalle" id="planCuotasDetalle">3 pagos mensuales · Acceso inmediato</span>
            <span class="plan__precio">
              <b class="plan__cifra" id="planCuotasCifra">$187</b>
              <span class="plan__moneda" id="planCuotasMoneda">USD ×3</span>
            </span>
            <span class="plan__nota">El mismo acceso, repartido en el tiempo.</span>
            <a href="#" class="btn" data-cta data-plan="cuotas">
              Quiero mi lugar <span class="btn__flecha" aria-hidden="true">&rarr;</span>
            </a>
          </div>
        </div>

        <ul class="incluye">
          <li>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"
              stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M20 6L9 17l-5-5" />
            </svg>
            <span><b>7 encuentros en vivo</b> con Sofía Contreras, del 22 de septiembre al 10 de noviembre.</span>
          </li>
          <li>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"
              stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M20 6L9 17l-5-5" />
            </svg>
            <span>Los <b>7 niveles</b> del camino completo, de Profundiza a Trasciende.</span>
          </li>
          <li>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"
              stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M20 6L9 17l-5-5" />
            </svg>
            <span><b>La Cumbre 2026</b>, el evento de cierre en vivo, en diciembre, con toda tu camada.</span>
          </li>
          <li>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"
              stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M20 6L9 17l-5-5" />
            </svg>
            <span><b>6 mentores especialistas</b> en las áreas troncales de la vida, sin costo extra.</span>
          </li>
          <li>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"
              stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M20 6L9 17l-5-5" />
            </svg>
            <span><b>Comunidad y soporte humano</b> durante todo el recorrido.</span>
          </li>
          <li>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"
              stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M20 6L9 17l-5-5" />
            </svg>
            <span><b>Acceso de por vida</b>, para volver cada vez que necesites reconfigurar y avanzar.</span>
          </li>
        </ul>

        <span class="btn-nota">Pago seguro. Al entrar elegís cómo pagar.</span>

        <div class="lote" style="max-width:none;margin-top:26px">
          <div class="lote__top">
            <span class="lote__rot">La inscripción cierra el 9 de septiembre</span>
            <b class="pct">0%</b>
          </div>
          <div class="lote__riel">
            <div class="lote__fill"></div>
          </div>
        </div>

        <div class="pagos">
          <span>Medios de pago</span>
          <svg width="42" height="26" viewBox="0 0 48 30" aria-label="Visa">
            <text x="24" y="20" font-family="Inter,sans-serif" font-size="13" font-weight="800" fill="#1A1F71"
              text-anchor="middle" letter-spacing="1">VISA</text>
          </svg>
          <svg width="42" height="26" viewBox="0 0 48 30" aria-label="Mastercard">
            <circle cx="19" cy="15" r="9" fill="#EB001B" />
            <circle cx="29" cy="15" r="9" fill="#F79E1B" opacity=".85" />
          </svg>
          <svg width="42" height="26" viewBox="0 0 48 30" aria-label="American Express">
            <text x="24" y="19" font-family="Inter,sans-serif" font-size="9" font-weight="800" fill="#2E77BC"
              text-anchor="middle">AMEX</text>
          </svg>
          <svg width="52" height="26" viewBox="0 0 60 30" aria-label="PayPal">
            <text x="30" y="19" font-family="Inter,sans-serif" font-size="10" font-weight="800" fill="#003087"
              text-anchor="middle">PayPal</text>
          </svg>
        </div>
      </div>

      <div class="garantia" id="garantia" hidden>
        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
          stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
          <path d="M9 12l2 2 4-4" />
        </svg>
        <div>
          <b>Garantía de <span id="garantiaDias">7</span> días</b>
          <p>Entrá, mirá el primer nivel y hacé el trabajo. Si no es para vos, escribís y te devolvemos el dinero.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       FAQ
       Respostas marcadas com "CONFIRMAR" no comentário abaixo dependem
       de definição do time da Mastery: gravações, plataforma de acceso
       e carga semanal. Estão escritas no padrão do programa; conferir
       antes de publicar.
  ============================================================ -->
  <section class="seccion seccion--crema">
    <div class="wrap">
      <div class="titulo-bloque centrado">
        <h2>Preguntas frecuentes</h2>
      </div>

      <div class="faq">
        <div class="faq__item">
          <button class="faq__q" type="button">¿Cuándo empieza y cuándo termina?</button>
          <div class="faq__a">
            <p>Los 7 encuentros en vivo van del martes 22 de septiembre al martes 10 de noviembre. Después seguimos
              acompañándote hasta el 31 de diciembre, y cerramos todos juntos en La Cumbre 2026, en diciembre.</p>
          </div>
        </div>

        <div class="faq__item">
          <button class="faq__q" type="button">¿Y si no puedo estar en vivo en algún encuentro?</button>
          <div class="faq__a">
            <p>Cada encuentro queda grabado y disponible para vos. Como el acceso es de por vida, podés verlo
              cuando puedas y volver todas las veces que lo necesites.</p>
          </div>
        </div>

        <div class="faq__item">
          <button class="faq__q" type="button">Ya probé otros programas y no los sostuve. ¿Por qué este sí?</button>
          <div class="faq__a">
            <p>Porque el problema no fue tu disciplina, fue la forma. El Nivel 3 arma el sistema que te sostiene los
              días sin ganas, y el Nivel 6 trabaja específicamente el tropiezo: qué hacés cuando fallás, que es el
              momento exacto en el que hasta hoy abandonabas.</p>
          </div>
        </div>

        <div class="faq__item">
          <button class="faq__q" type="button">¿Cuánto tiempo por semana necesito?</button>
          <div class="faq__a">
            <p>Un encuentro en vivo por semana más el trabajo que instalás en tus propios días. No es una agenda
              nueva encima de la que ya tenés: es ordenar la que ya tenés.</p>
          </div>
        </div>

        <div class="faq__item">
          <button class="faq__q" type="button">¿Puedo pagar en cuotas?</button>
          <div class="faq__a">
            <p>Sí. Podés entrar con un pago único de <b class="precio-nota">$497 USD</b> o en 3 cuotas de <b
                class="cuota-nota">$187 USD</b>. Las dos opciones te dan exactamente el mismo acceso.</p>
          </div>
        </div>

        <div class="faq__item">
          <button class="faq__q" type="button">¿Cómo accedo después de pagar?</button>
          <div class="faq__a">
            <p>Te llega un email con los datos de acceso apenas se confirma el pago. Ahí adentro vas a encontrar el
              recorrido completo, el calendario de los encuentros y el espacio de la comunidad.</p>
          </div>
        </div>

        <div class="faq__item">
          <button class="faq__q" type="button">¿Hasta cuándo puedo anotarme?</button>
          <div class="faq__a">
            <p>Las inscripciones cierran el miércoles 9 de septiembre. Cerramos ahí porque el camino arranca el 22 y
              toda la camada empieza junta: el trabajo de las primeras semanas se hace en grupo, y entrar más tarde
              sería empezar solo.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       CIERRE
  ============================================================ -->
  <section class="seccion cierre">
    <div class="wrap">
      <h2>¿Vas a repetir el mismo año, o este va a ser <em>el año donde todo cambia</em>?</h2>
      <p>Tenés hasta el 9 de septiembre para decidirlo. El 22 arranca la subida con toda la camada junta, y en
        diciembre nos encontramos todos en la cumbre.</p>

      <a href="#oferta" class="btn btn--grande" data-cta-ancla>
        Quiero ganar mi año <span class="btn__flecha" aria-hidden="true">&rarr;</span>
      </a>
      <span class="btn-nota"><b class="precio-nota">$497 USD</b> en un pago o 3 cuotas de <b
          class="cuota-nota">$187 USD</b></span>

      <p class="ps"><b>P.D.</b> Las inscripciones cierran el miércoles 9 de septiembre. Después de esa fecha la
        camada arranca completa y el camino empieza sin vos. Los 100 días se van a terminar igual: la única
        diferencia es qué vas a tener en la mano el 31 de diciembre.</p>
    </div>
  </section>

  <!-- ============================================================
       FOOTER
  ============================================================ -->
  <footer class="pie">
    <div class="wrap">
      <img src="/assets/images/606275729b31010e9877784a_logo-sofiacontreras-white.svg" alt="Sofía Contreras">
      <div class="pie__redes">
        <a href="https://www.facebook.com/soysofiacontreras/" target="_blank" rel="noopener">Facebook</a>
        <a href="https://www.instagram.com/soysofiacontreras" target="_blank" rel="noopener">Instagram</a>
        <a href="https://www.tiktok.com/@soysofiacontreras" target="_blank" rel="noopener">TikTok</a>
        <a href="https://open.spotify.com/show/5yS1w7rWxQzOxHtvnqURpw" target="_blank" rel="noopener">Spotify</a>
        <a href="https://www.youtube.com/channel/UCVZKJmHkom1ViD2mBP60Naw" target="_blank" rel="noopener">YouTube</a>
      </div>
      <p>Ganá tu Año · Sofía Contreras<br>
        <a class="pol" href="https://masteryhaus.com/politica-de-privacidad" target="_blank"
          rel="noopener">Política de privacidad</a>
      </p>
    </div>
  </footer>

  <!-- aviso de inscrição: só cidade e tempo, sem nome nem foto -->
  <div class="toast" id="toast" role="status" aria-live="polite">
    <span class="toast__ico" aria-hidden="true">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"
        stroke-linecap="round" stroke-linejoin="round">
        <path d="M20 6L9 17l-5-5" />
      </svg>
    </span>
    <span class="toast__txt">
      <b id="toastCiudad">Buenos Aires</b>
      <span id="toastTiempo">Una inscripción hace 3 minutos</span>
    </span>
  </div>

  <div class="cta-fijo">
    <a href="#oferta" class="btn" data-cta-ancla>Quiero ganar mi año</a>
    <span class="cta-fijo__precio"><b class="precio-nota">$497 USD</b> o 3 cuotas de <b
        class="cuota-nota">$187 USD</b></span>
  </div>

  <a href="#" class="wa" id="wa" target="_blank" rel="noopener" aria-label="WhatsApp">
    <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path
        d="M17.5 14.4c-.3-.2-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.4 1.9.8 2.7.9 3.6.8.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.3c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z" />
    </svg>
  </a>

  <script>
    /* ================================================================
       CONFIG — tudo o que se edita nesta página está aqui
    ================================================================ */
    const CONFIG = {
      /* Os DOIS checkouts. Cada plano abre o seu; os demais CTAs da página
         rolam até a oferta para a pessoa escolher. */
      LINK_PAGO_UNICO: "https://pay.masteryhaus.com/gta-checkout/",
      LINK_PAGO_CUOTAS: "https://pay.masteryhaus.com/gta-checkout-split/",
      /* usado só como destino do CTA_DIRECTO: qual dos dois abrir */
      LINK_CHECKOUT: "https://pay.masteryhaus.com/gta-checkout/",

      /* true = TODOS os botões vão direto ao checkout.
         false = só o botão de dentro do card de oferta abre o checkout;
                 os outros rolam até a oferta. */
      CTA_DIRECTO: false,

      /* ---- PREÇOS ------------------------------------------------
         PRECIO_CONTADO governa o plano de pagamento único e todos os
         lugares onde o preço à vista aparece escrito.
         CUOTAS_VALOR e CUOTAS_N governam o plano parcelado. */
      PRECIO_CONTADO: "$497",
      MONEDA: "USD",
      CUOTAS_VALOR: "$187",
      CUOTAS_N: 3,
      CUOTAS_TXT: "$187 USD",
      /* riscado acima do preço, desligado a pedido de Sofía (2026-09-03):
         não quería mostrar el "$1.800" ahí. O riscado só aparece se
         PRECIO_TACHADO tiver valor, então deixamos vazio em vez de
         apagar o mecanismo, para poder reativar com outro número depois. */
      PRECIO_TACHADO: "",
      PRECIO_TACHADO_ROT: "Solo los bonos suman",

      /* ---- DATAS (mês 0-indexado: 8 = setembro) -------------------- */
      /* abertura do carrinho: 02/09/2026 00:00 Argentina (GMT-3) */
      APERTURA_UTC: Date.UTC(2026, 8, 2, 3, 0, 0),
      /* fechamento: 09/09/2026 23:59 Argentina (GMT-3) */
      CIERRE_UTC: Date.UTC(2026, 8, 10, 2, 59, 0),
      /* início do programa, só informativo */
      INICIO_TXT: "22 de septiembre",

      /* contador do card de oferta: desligue aqui se precisar */
      CONTADOR_ON: true,

      /* ---- BARRA DE PROGRESSO -------------------------------------
         "ventana" = mede os dias corridos entre a abertura e o fechamento
                     das inscrições. É o padrão: não inventa vaga.
         "cupos"   = usa PROGRESO_LOTE como porcentagem fixa de ocupação. */
      PROGRESO_MODO: "ventana",
      PROGRESO_LOTE: 0,

      /* PENDÊNCIA: garantia. 0 esconde o selo e a página não promete nada. */
      GARANTIA_DIAS: 0,

      /* WhatsApp de suporte, no canto inferior. "" esconde o botão. */
      WHATSAPP_URL: "https://wa.me/5492915780511?text=Necesito%20ayuda%20con%20Gan%C3%A1%20Tu%20A%C3%B1o",

      /* ---- IMAGENS ------------------------------------------------
         Subir os arquivos de "Sofia Contreras/imagens/ganatuano-*.jpg"
         no Media do GHL e colar as URLs aqui. Enquanto ficarem vazias,
         a página usa as cordilheiras desenhadas em SVG. */
      IMG: {
        heroDesktop: "/imagens/gana-tu-ano/ganatuano-hero-desktop.webp",
        heroMobile: "/imagens/gana-tu-ano/ganatuano-hero-mobile.webp",
        cumbre: "/imagens/gana-tu-ano/ganatuano-cumbre.webp",
        /* mockups do material, nos três cards de "100 días" */
        mockupPlan: "/imagens/gana-tu-ano/ganatuano-mockup-plan.jpeg",
        mockupSistema: "/imagens/gana-tu-ano/ganatuano-mockup-sistema.jpeg",
        mockupAcceso: "/imagens/gana-tu-ano/ganatuano-mockup-acceso.jpeg",
        /* mockups dos nove bonos, em imagens/ganatuano-bono-0X.webp.
           Montados no estúdio de Sofia Contreras/mockups/: capa desenhada
           na identidade da página + print real do conteúdo na tela + folhas
           atrás. O 05 é o mockup do designer, usado como veio.
           Vazios, cada card mostra o selo numerado e nada quebra. */
        bono1: "/imagens/gana-tu-ano/ganatuano-bono-01.webp",
        bono2: "/imagens/gana-tu-ano/ganatuano-bono-02.webp",
        bono3: "/imagens/gana-tu-ano/ganatuano-bono-03.webp",
        bono4: "/imagens/gana-tu-ano/ganatuano-bono-04.webp",
        bono5: "/imagens/gana-tu-ano/ganatuano-bono-05-workshop.png",
        bono6: "/imagens/gana-tu-ano/ganatuano-bono-06-libros.png",
        bono7: "/imagens/gana-tu-ano/ganatuano-bono-07-herramientas.png",
        bono8: "/imagens/gana-tu-ano/ganatuano-bono-08.webp",
        bono9: "/imagens/gana-tu-ano/ganatuano-bono-09.webp",
        /* exclusivas desta versão: fundo da seção dos 7 níveis */
        sierra: "/imagens/gana-tu-ano/ganatuano-sierra-vertical.webp",
        mapa: "/imagens/gana-tu-ano/ganatuano-mapa.webp"
      },

      /* ---- FOTOS DE PESSOAS (nunca geradas por IA) -----------------
         Slots aguardando arquivo do cliente. Enquanto vazios, a Sofía
         mostra a moldura e cada mentor mostra o monograma. */
      FOTOS: {
        /* foto real da Sofía na bio (o card recorta em 4:5 via object-fit).
           Arquivo imagens/ganatuano-sofia-mentora.jpeg */
        sofia: "/imagens/gana-tu-ano/ganatuano-sofia-mentora.jpeg",
        /* Fotos dos mentores em imagens/ganatuano-mentor-*.webp. Pipeline:
           1) Vision do macOS recorta a pessoa do fundo original (tira o
              círculo laranja do Nico, a parede, a mesa);
           2) a API de imagem recebe o recorte JÁ transparente e só compõe
              o fundo teal de estúdio e a luz de contorno.
           Assim o fundo fica com profundidade de estúdio em vez de recorte
           chapado. ATENÇÃO: o passo 2 é generativo, então os traços podem
           sair levemente diferentes do original. Validar com o time antes
           de publicar, que são pessoas públicas. */
        mentor1: "/imagens/gana-tu-ano/ganatuano-mentor-marina.webp", /* Marina Mammoliti */
        mentor2: "/imagens/gana-tu-ano/ganatuano-mentor-vero.webp",   /* Vero Giordano   */
        mentor3: "/imagens/gana-tu-ano/ganatuano-mentor-santi.webp",  /* Santiago Siri   */
        mentor4: "/imagens/gana-tu-ano/ganatuano-mentor-nico.webp",   /* Nico Grupe      */
        mentor5: "/imagens/gana-tu-ano/ganatuano-mentor-marcos.webp", /* Marcos Apud     */
        mentor6: "/imagens/gana-tu-ano/ganatuano-mentor-juli.webp",   /* Nutrichef, Julián Appiani */
        /* fotos reais dos testimonios de "Ganá tu día", herdadas de
           fuera-de-uso/gana-tu-dia.html (imagens/depoimentos/*.jpg) */
        testi1: "/imagens/depoimentos/julia-otero.jpg",
        testi2: "/imagens/depoimentos/pablo-bermudez.jpg",
        testi3: "/imagens/depoimentos/fabricio-barbadillo.jpg",
        testi4: "/imagens/depoimentos/evelyn-nicole.jpg",
        testi5: "/imagens/depoimentos/diego-arbona.jpg",
        testi6: "/imagens/depoimentos/yanel-bernardi.jpg",
        /* 03/09/2026 · mesma tanda, completando as 10 que já existiam na
           página de vendas do workshop (a página só tinha 6 até agora) */
        testi7: "/imagens/depoimentos/micaela-barrera.png",
        testi8: "/imagens/depoimentos/manuela-caticha.png",
        testi9: "/imagens/depoimentos/ramiro-ricardes.png",
        testi10: "/imagens/depoimentos/eugenia-morales.png"
      },

      /* ---- AVISO DE INSCRIÇÃO (canto) -----------------------------
         Sem nome e sem foto de comprador: só cidade e tempo. */
      TOAST_ACTIVO: true,
      TOAST_CIUDADES: ["Buenos Aires", "Córdoba", "Rosario", "Mendoza", "Montevideo", "Santiago", "Bogotá",
        "Ciudad de México", "Lima", "Madrid", "Miami", "Asunción", "La Plata", "Guadalajara"],
      TOAST_INTERVALO_S: 21,

      /* ---- RASTREAMENTO -------------------------------------------
         As UTMs que chegam na URL desta página são guardadas na sessão e
         injetadas no link do checkout, no carregamento e no clique.
         PASSTHROUGH_TC: ThriveCart guarda no pedido só a cópia
         passthrough[utm_source]=..., por isso mandamos as duas formas.
         Se o checkout do Ganá tu Año não for ThriveCart, deixe false. */
      UTM_PARAMS: [
        "utm_source", "utm_medium", "utm_campaign", "utm_content", "utm_term", "utm_id",
        "src", "sck", "xcod", "ref", "aff", "affiliate",
        "gclid", "gbraid", "wbraid", "fbclid", "ttclid", "msclkid", "twclid", "li_fat_id", "igshid", "epik"
      ],
      UTM_PERSISTIR: true,
      DOMINIOS_CHECKOUT: ["pay.masteryhaus.com", "hotmart.com", "kiwify", "monetizze", "eduzz", "mercadopago", "stripe.com"],
      MAPEAR_SRC_SCK: false,
      PASSTHROUGH_TC: true
    };

    /* ================================================================
       0) INCLUIR PARCIAIS — hoje só a seção de testimonios
       ----------------------------------------------------------------
       Troca cada <div data-incluir="..."> pelo conteúdo do arquivo que
       ele aponta (fetch + substituição no DOM). É o único jeito de
       "separar num HTML aparte" numa página estática sem build step:
       não tem template engine nem servidor por trás, então o include
       se resolve no navegador. Se o fetch falhar (arquivo movido, ou a
       página aberta como file:// em vez de servida pelo Vercel), o
       elemento simplesmente é removido e o resto da página segue.
       Depois de injetar, chama aplicarImagensEFotos() de novo (bloco 4)
       pra resolver as fotos data-foto que nasceram dentro do parcial —
       a função já sabe pular o que já tinha foto, então não duplica.
    ================================================================ */
    (function incluirParciais() {
      document.querySelectorAll("[data-incluir]").forEach(marcador => {
        fetch(marcador.getAttribute("data-incluir"))
          .then(r => { if (!r.ok) throw new Error(r.status); return r.text(); })
          .then(html => {
            const tpl = document.createElement("template");
            tpl.innerHTML = html.trim();
            marcador.replaceWith(tpl.content);
            if (typeof aplicarImagensEFotos === "function") aplicarImagensEFotos();
          })
          .catch(() => { marcador.remove(); });
      });
    })();

    /* ================================================================
       1) UTMs
    ================================================================ */
    const UTM = (function rastreio() {
      const CHAVE = "mh_utm_gta";

      const daURL = {};
      try {
        new URLSearchParams(location.search).forEach((valor, chave) => {
          chave = chave.trim();
          if (valor && CONFIG.UTM_PARAMS.indexOf(chave) !== -1) daURL[chave] = valor;
        });
      } catch (e) { }

      let guardado = {};
      if (CONFIG.UTM_PERSISTIR) {
        try { guardado = JSON.parse(sessionStorage.getItem(CHAVE) || "{}") || {}; } catch (e) { guardado = {}; }
      }

      const dados = CONFIG.UTM_PERSISTIR ? Object.assign({}, guardado, daURL) : daURL;
      if (CONFIG.UTM_PERSISTIR && Object.keys(dados).length) {
        try { sessionStorage.setItem(CHAVE, JSON.stringify(dados)); } catch (e) { }
      }

      if (CONFIG.MAPEAR_SRC_SCK) {
        if (!dados.src && dados.utm_source) dados.src = dados.utm_source;
        if (!dados.sck) {
          const sck = [dados.utm_campaign, dados.utm_medium, dados.utm_content].filter(Boolean).join("|");
          if (sck) dados.sck = sck;
        }
      }

      function temParam(query, chave) {
        const q = "&" + String(query).replace(/^\?/, "");
        return q.indexOf("&" + chave + "=") !== -1
          || q.indexOf("&" + encodeURIComponent(chave) + "=") !== -1;
      }

      function comUTM(href) {
        if (!href) return href;
        const bruto = String(href).trim();
        if (!bruto || bruto.charAt(0) === "#" || /^(mailto:|tel:|javascript:)/i.test(bruto)) return href;
        let url;
        try { url = new URL(bruto, location.href); } catch (e) { return href; }
        if (url.protocol !== "http:" && url.protocol !== "https:") return href;

        const query = url.search;
        const novos = [];
        Object.keys(dados).forEach(chave => {
          const valor = encodeURIComponent(dados[chave]);
          if (!temParam(query, chave)) novos.push(encodeURIComponent(chave) + "=" + valor);
          if (CONFIG.PASSTHROUGH_TC) {
            const pt = "passthrough[" + chave + "]";
            if (!temParam(query, pt)) novos.push(pt + "=" + valor);
          }
        });
        if (!novos.length) return href;
        return url.origin + url.pathname + (query ? query + "&" : "?") + novos.join("&") + url.hash;
      }

      function ehCheckout(a) {
        const href = a.getAttribute("href") || "";
        if (!href || href.charAt(0) === "#") return false;
        if (a.hasAttribute("data-cta")) return true;
        return CONFIG.DOMINIOS_CHECKOUT.some(dominio => href.indexOf(dominio) !== -1);
      }

      function aplicarEm(a) {
        if (!a || !ehCheckout(a)) return;
        const atual = a.getAttribute("href");
        const novo = comUTM(atual);
        if (novo && novo !== atual) a.setAttribute("href", novo);
      }

      function aplicar(raiz) {
        (raiz || document).querySelectorAll("a[href]").forEach(aplicarEm);
      }

      document.addEventListener("click", ev => {
        const a = ev.target && ev.target.closest ? ev.target.closest("a[href]") : null;
        if (a) aplicarEm(a);
      }, true);

      return { dados, comUTM, aplicar, aplicarEm };
    })();
    window.MH_UTM = UTM.dados;

    /* ================================================================
       2) PREÇOS — um lugar só governa os sete
    ================================================================ */
    (function precios() {
      const contado = CONFIG.PRECIO_CONTADO + " " + CONFIG.MONEDA;
      document.querySelectorAll(".precio-nota, .precio-fita").forEach(el => { el.textContent = contado; });
      document.querySelectorAll(".cuota-nota, .cuota-fita, .cuota-pill").forEach(el => { el.textContent = CONFIG.CUOTAS_TXT; });

      const cifra = document.getElementById("precioCifra");
      if (cifra) cifra.textContent = CONFIG.PRECIO_CONTADO;

      const tachado = document.getElementById("precioTachado");
      if (tachado && CONFIG.PRECIO_TACHADO) {
        tachado.textContent = CONFIG.PRECIO_TACHADO + " " + CONFIG.MONEDA;
        tachado.hidden = false;
        if (CONFIG.PRECIO_TACHADO_ROT) {
          const rot = document.createElement("span");
          rot.className = "precio-tachado__rot";
          rot.textContent = CONFIG.PRECIO_TACHADO_ROT;
          tachado.parentNode.insertBefore(rot, tachado);
        }
      }

      /* os dois cards de plano */
      const cifraUnico = document.getElementById("planUnicoCifra");
      if (cifraUnico) cifraUnico.textContent = CONFIG.PRECIO_CONTADO;
      const cifraCuotas = document.getElementById("planCuotasCifra");
      if (cifraCuotas) cifraCuotas.textContent = CONFIG.CUOTAS_VALOR;
      const monedaCuotas = document.getElementById("planCuotasMoneda");
      if (monedaCuotas) monedaCuotas.textContent = CONFIG.MONEDA + " \u00d7" + CONFIG.CUOTAS_N;
      const detalleCuotas = document.getElementById("planCuotasDetalle");
      if (detalleCuotas) detalleCuotas.textContent = CONFIG.CUOTAS_N + " pagos mensuales \u00b7 Acceso inmediato";
    })();

    /* ================================================================
       3) CTAs e checkout
    ================================================================ */
    (function ctas() {
      const link = CONFIG.LINK_CHECKOUT;

      /* cada plano tem o seu destino */
      const destinos = { unico: CONFIG.LINK_PAGO_UNICO, cuotas: CONFIG.LINK_PAGO_CUOTAS };
      document.querySelectorAll('a[data-plan]').forEach(a => {
        const url = destinos[a.getAttribute('data-plan')];
        a.href = url || "#oferta";
      });
      const btnOferta = document.querySelector('.plan--destacado a[data-cta]');

      if (link) {
        if (CONFIG.CTA_DIRECTO) {
          document.querySelectorAll('a[data-cta-ancla]').forEach(a => {
            a.setAttribute("data-ancla", a.getAttribute("href"));
            a.setAttribute("data-cta", "");
            a.href = link;
          });
        }
      }

      UTM.aplicar();

      /* eventos para o GTM (GA4 / Pixel / Clarity leem daqui) */
      window.dataLayer = window.dataLayer || [];
      document.querySelectorAll('a[data-cta], a[data-cta-ancla]').forEach(a => {
        a.addEventListener("click", () => {
          const plan = a.getAttribute("data-plan");
          const eh = a.hasAttribute("data-cta") && (plan || CONFIG.LINK_CHECKOUT);
          window.dataLayer.push({
            event: eh ? "checkout_click" : "cta_click",
            producto: "gana_tu_ano",
            plan: plan || null,
            precio: plan === "cuotas"
              ? CONFIG.CUOTAS_VALOR + " " + CONFIG.MONEDA + " x" + CONFIG.CUOTAS_N
              : CONFIG.PRECIO_CONTADO + " " + CONFIG.MONEDA
          });
        });
      });
    })();

    /* ================================================================
       4) IMAGENS e FOTOS — a página nasce sem nenhuma e não quebra
       ----------------------------------------------------------------
       Função nomeada (não IIFE) porque o bloco 0 chama ela de novo
       depois que o parcial de testimonios entra no DOM, para resolver
       as fotos data-foto="testi1..6" que nascem dentro dele. Os dois
       loops guardam "já tem <img>? pula" pra rodar de novo sem duplicar
       imagem nos elementos que a primeira chamada já resolveu.
    ================================================================ */
    function aplicarImagensEFotos() {
      const img = CONFIG.IMG || {};

      /* hero: arte de fundo no desktop, card nítido no mobile */
      if (img.heroDesktop) {
        const bg = document.getElementById("heroBg");
        const el = document.getElementById("heroBgImg");
        if (bg && el) { el.src = img.heroDesktop; bg.hidden = false; }
      }
      if (img.heroMobile || img.heroDesktop) {
        const caja = document.getElementById("heroFoto");
        const el = document.getElementById("heroFotoImg");
        if (caja && el) { el.src = img.heroMobile || img.heroDesktop; caja.hidden = false; }
      }
      if (img.cumbre) {
        const bg = document.getElementById("cumbreBg");
        const el = document.getElementById("cumbreBgImg");
        if (bg && el) { el.src = img.cumbre; bg.hidden = false; }
      }
      if (img.sierra) {
        const bg = document.getElementById("sendaFondo");
        const el = document.getElementById("sendaFondoImg");
        if (bg && el) { el.src = img.sierra; bg.hidden = false; }
      }
      if (img.mapa) {
        const capa = document.getElementById("sendaMapa");
        if (capa) { capa.style.backgroundImage = "url(" + img.mapa + ")"; capa.hidden = false; }
      }

      /* a imagem entra no lugar do desenho de espera. Some junto o selo
         numerado do bônus: sem isso o número fica visível por trás do
         mockup, porque o script removia só o <svg>. */
      document.querySelectorAll("[data-img]").forEach(caja => {
        const url = img[caja.getAttribute("data-img")];
        if (!url || caja.querySelector("img")) return;
        const el = document.createElement("img");
        el.src = url; el.alt = "";
        caja.appendChild(el);
        const svg = caja.querySelector("svg");
        if (svg) svg.remove();
        const sello = caja.querySelector(".bono__sello");
        if (sello) sello.remove();
      });

      /* fotos de pessoas */
      const fotos = CONFIG.FOTOS || {};
      document.querySelectorAll("[data-foto]").forEach(caja => {
        const url = fotos[caja.getAttribute("data-foto")];
        if (!url || caja.querySelector("img")) return;
        const el = document.createElement("img");
        el.src = url; el.alt = "";
        const mono = caja.querySelector(".mentor__mono, .bio-foto__slot, .testi__mono");
        if (mono) mono.remove();
        caja.insertBefore(el, caja.firstChild);
      });
    }
    aplicarImagensEFotos();

    /* ================================================================
       5) BARRA DE PROGRESSO + texto do tempo restante
    ================================================================ */
    (function progreso() {
      const fills = document.querySelectorAll(".lote__fill");
      const rotulos = document.querySelectorAll(".pct");
      let pct = 0, texto = "";

      if (CONFIG.PROGRESO_MODO === "cupos") {
        pct = Math.max(0, Math.min(100, CONFIG.PROGRESO_LOTE));
        texto = pct + "%";
      } else {
        const ahora = Date.now();
        const total = CONFIG.CIERRE_UTC - CONFIG.APERTURA_UTC;
        const corrido = ahora - CONFIG.APERTURA_UTC;
        pct = total > 0 ? Math.max(6, Math.min(100, Math.round(corrido / total * 100))) : 100;

        const resta = CONFIG.CIERRE_UTC - ahora;
        if (resta <= 0) {
          texto = "cerrada";
          pct = 100;
        } else {
          const horas = Math.floor(resta / 3600000);
          const dias = Math.floor(horas / 24);
          if (dias >= 2) texto = "quedan " + dias + " días";
          else if (horas >= 24) texto = "queda 1 día";
          else if (horas >= 2) texto = "quedan " + horas + " horas";
          else texto = "última hora";
          /* últimas 48 horas: barra e número na cor de urgência */
          if (horas < 48) document.querySelectorAll(".lote").forEach(l => l.classList.add("urgente"));
        }
      }

      rotulos.forEach(el => { el.textContent = texto; });

      if (!fills.length) return;
      let hecho = false;
      const aplicar = () => {
        if (hecho) return; hecho = true;
        fills.forEach(f => { f.style.width = pct + "%"; });
      };
      requestAnimationFrame(() => requestAnimationFrame(aplicar));
      setTimeout(aplicar, 1600);
    })();

    /* ================================================================
       6) CONTADOR até o fechamento das inscrições
    ================================================================ */
    (function contador() {
      const wrap = document.getElementById("cuentaWrap");
      const caja = document.getElementById("cuenta");
      if (!wrap || !caja) return;
      if (!CONFIG.CONTADOR_ON || !CONFIG.CIERRE_UTC) { wrap.hidden = true; return; }

      const campos = {};
      caja.querySelectorAll("[data-c]").forEach(el => { campos[el.getAttribute("data-c")] = el; });
      const dosDigitos = n => (n < 10 ? "0" : "") + n;
      let timer = null;

      const pintar = () => {
        const resta = CONFIG.CIERRE_UTC - Date.now();
        if (resta <= 0) { wrap.hidden = true; if (timer) clearInterval(timer); return; }
        const s = Math.floor(resta / 1000);
        campos.d.textContent = dosDigitos(Math.floor(s / 86400));
        campos.h.textContent = dosDigitos(Math.floor(s % 86400 / 3600));
        campos.m.textContent = dosDigitos(Math.floor(s % 3600 / 60));
        campos.s.textContent = dosDigitos(s % 60);
        caja.hidden = false;
      };
      pintar();
      timer = setInterval(pintar, 1000);
    })();

    /* ================================================================
       7) GARANTIA (só aparece se estiver confirmada)
    ================================================================ */
    (function garantia() {
      const caja = document.getElementById("garantia");
      if (!caja || !CONFIG.GARANTIA_DIAS) return;
      const dias = document.getElementById("garantiaDias");
      if (dias) dias.textContent = CONFIG.GARANTIA_DIAS;
      caja.hidden = false;
    })();

    /* ================================================================
       8) AVISO DE INSCRIÇÃO
    ================================================================ */
    (function toasts() {
      if (!CONFIG.TOAST_ACTIVO) return;
      const box = document.getElementById("toast");
      const ciudad = document.getElementById("toastCiudad");
      const tiempo = document.getElementById("toastTiempo");
      if (!box || !ciudad || !tiempo) return;

      let i = Math.floor(Math.random() * CONFIG.TOAST_CIUDADES.length);
      const mostrar = () => {
        const c = CONFIG.TOAST_CIUDADES[i % CONFIG.TOAST_CIUDADES.length]; i++;
        const min = 2 + Math.floor(Math.random() * 26);
        ciudad.textContent = c;
        tiempo.textContent = "Una inscripción hace " + min + " minutos";
        box.classList.add("on");
        setTimeout(() => box.classList.remove("on"), 4400);
      };
      setTimeout(mostrar, 7000);
      setInterval(mostrar, CONFIG.TOAST_INTERVALO_S * 1000);
    })();

    /* ================================================================
       9) FAQ
    ================================================================ */
    (function faq() {
      document.querySelectorAll(".faq__q").forEach(btn => {
        btn.addEventListener("click", () => {
          const item = btn.parentElement;
          const resp = item.querySelector(".faq__a");
          const abierto = item.classList.toggle("abierto");
          resp.style.maxHeight = abierto ? resp.scrollHeight + "px" : "0px";
        });
      });
    })();

    /* ================================================================
       9b) A TRILHA dos 7 níveis
       ----------------------------------------------------------------
       Liga o centro de cada marco ao do seguinte com uma Bézier cúbica
       de controles horizontais: é isso que dá a curva de caminho em vez
       de uma linha reta. Redesenha no resize e depois que as fontes
       carregam, porque a altura dos cards muda nos dois casos.
    ================================================================ */
    (function senda() {
      const zona = document.querySelector(".senda");
      const svg = document.getElementById("sendaLinea");
      if (!zona || !svg) return;
      const trazos = [...svg.querySelectorAll("path")];
      const curvas = svg.querySelector(".senda__curvas");
      const marcos = [...zona.querySelectorAll(".nivel__icono")];
      if (!trazos.length || marcos.length < 2) return;

      const dibujar = () => {
        const base = zona.getBoundingClientRect();
        if (!base.width) return;
        svg.setAttribute("viewBox", "0 0 " + base.width + " " + base.height);
        const centro = el => {
          const r = el.getBoundingClientRect();
          return { x: r.left - base.left + r.width / 2, y: r.top - base.top + r.height / 2 };
        };
        /* saída: pé do card, na vertical do marco. chegada: o marco seguinte.
           O último trecho, do VI ao VII, é o que sai dourado. */
        const salida = i => {
          const caja = marcos[i].parentElement.querySelector(".nivel__caja");
          if (!caja) return centro(marcos[i]);
          const r = caja.getBoundingClientRect();
          return { x: centro(marcos[i]).x, y: r.bottom - base.top - 4 };
        };
        /* Traçado: em vez de uma curva em S limpa (que lê como estrada),
           passa por pontos intermediários com desvio lateral alternado e é
           suavizado por Catmull-Rom. O desvio é determinístico, então o
           caminho é sempre o mesmo, só que irregular como uma trilha. */
        const suave = pts => {
          let t = "M" + pts[0].x.toFixed(1) + " " + pts[0].y.toFixed(1);
          for (let i = 0; i < pts.length - 1; i++) {
            const p0 = pts[i - 1] || pts[i], p1 = pts[i], p2 = pts[i + 1], p3 = pts[i + 2] || pts[i + 1];
            const c1x = p1.x + (p2.x - p0.x) / 6, c1y = p1.y + (p2.y - p0.y) / 6;
            const c2x = p2.x - (p3.x - p1.x) / 6, c2y = p2.y - (p3.y - p1.y) / 6;
            t += " C" + c1x.toFixed(1) + " " + c1y.toFixed(1) + ", " + c2x.toFixed(1) + " "
              + c2y.toFixed(1) + ", " + p2.x.toFixed(1) + " " + p2.y.toFixed(1);
          }
          return t;
        };

        let d = "", ultimo = "";
        for (let i = 0; i < marcos.length - 1; i++) {
          const a = salida(i), b = centro(marcos[i + 1]);
          const dx = b.x - a.x, dy = b.y - a.y;
          const lado = i % 2 ? -1 : 1;
          const amp = Math.min(Math.abs(dx) * 0.24 + 42, 118);
          const pts = [
            a,
            { x: a.x + dx * 0.10 - lado * amp * 0.62, y: a.y + dy * 0.26 },
            { x: a.x + dx * 0.44 + lado * amp, y: a.y + dy * 0.50 },
            { x: a.x + dx * 0.78 - lado * amp * 0.5, y: a.y + dy * 0.74 },
            b
          ];
          const trecho = suave(pts);
          d += trecho + " ";
          if (i === marcos.length - 2) ultimo = trecho;
        }
        trazos.forEach(t => {
          t.setAttribute("d", t.classList.contains("senda__final") ? ultimo : d);
        });

        /* curvas de nível ao redor de cada marco, para a seção ler como
           carta topográfica e não como diagrama */
        if (curvas) {
          curvas.textContent = "";
          const NS = "http://www.w3.org/2000/svg";
          marcos.forEach((m, i) => {
            const c = centro(m);
            [54, 82, 116].forEach((r, j) => {
              const el = document.createElementNS(NS, "circle");
              el.setAttribute("cx", c.x.toFixed(1));
              el.setAttribute("cy", c.y.toFixed(1));
              el.setAttribute("r", (r + (i % 3) * 6).toFixed(1));
              el.setAttribute("opacity", (0.9 - j * 0.28).toFixed(2));
              curvas.appendChild(el);
            });
          });
        }
      };

      dibujar();
      setTimeout(dibujar, 400);
      setTimeout(dibujar, 1200);
      if (document.fonts && document.fonts.ready) document.fonts.ready.then(dibujar);
      let t = null;
      window.addEventListener("resize", () => { clearTimeout(t); t = setTimeout(dibujar, 140); });
    })();

    /* ================================================================
       10) CTA fixo do mobile: só aparece quando o do hero sai da tela
    ================================================================ */
    (function ctaFijo() {
      const bar = document.querySelector(".cta-fijo");
      const ancla = document.querySelector(".hero-cta-row");
      if (!bar || !ancla) return;
      if (!("IntersectionObserver" in window)) { bar.classList.add("is-visible"); return; }
      const io = new IntersectionObserver(entries => {
        entries.forEach(e => bar.classList.toggle("is-visible", !e.isIntersecting));
      }, { threshold: 0 });
      io.observe(ancla);
    })();

    /* ================================================================
       11) WhatsApp flutuante
    ================================================================ */
    (function whatsapp() {
      const wa = document.getElementById("wa");
      if (wa && CONFIG.WHATSAPP_URL) { wa.href = CONFIG.WHATSAPP_URL; wa.style.display = "flex"; }
    })();
  </script>
</body>

</html>