/* =========================================================================
   ACAMPA GOTO: landing /programa/goto (parceria Goto Esportes + Acampamento
   Corujas). Carregado SÓ nesta página, via seção "styles" da view; fica FORA
   do bundle (a lista de CSS do Minify é explícita e não inclui este arquivo).
   Identidade da marca GoTo, verde limão sobre escuro, aplicada POR CIMA dos
   componentes do tema: nenhuma anatomia nova, só retintura por token e os
   dois blocos próprios da página (faixa da parceria e passos de inscrição).
   Tudo escopado em .goto-landing.
   ========================================================================= */

/* 1. TOKENS DA MARCA GOTO: único lugar do arquivo com hex. Alfa e tinta
      derivadas SEMPRE via color-mix sobre estes tokens. */
:root {
    --goto-lime: #C4D600;   /* verde limão da marca: CTAs e destaques (10,4:1 sobre --goto-ink) */
    --goto-ink: #1B2013;    /* escuro esverdeado da marca: títulos e fundo da seção de inscrição */
    --goto-moss: #55700B;   /* verde escuro p/ texto pequeno sobre fundo claro (5,6:1 no branco, AA) */
    --goto-shadow: #333D02; /* o limão escurecido p/ sombra de botão, mesma gramática do --shadow-warm */
}

/* 2. FAIXA DA PARCERIA no herói (bloco próprio da página) */
.goto-landing .goto-partner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
}

.goto-landing .goto-partner__badge {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.8125rem;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--goto-lime);
    background: var(--goto-ink);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-pill);
}

.goto-landing .goto-partner__marks {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--goto-ink);
}

.goto-landing .goto-partner__goto {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.goto-landing .goto-partner__plus {
    color: var(--goto-moss);
}

.goto-landing .goto-partner__corujas {
    display: block;
    height: 2rem;
    width: auto;
}

/* 3. RETINTURA DO HERÓI: mesma anatomia de vacation-season, cores da GoTo.
      O rótulo (h1) desce para o musgo AA; a declaração (h2) usa o escuro. */
.goto-landing .hero-section .hero-title h1 {
    color: var(--goto-moss);
}

.goto-landing .hero-section .hero-title h2 {
    color: var(--goto-ink);
}

.goto-landing .hero-section .hero-bubble-blue {
    background-color: var(--goto-moss);
}

.goto-landing .hero-section .hero-bubble-yellow {
    background-color: var(--goto-lime);
}

.goto-landing .hero-section .hero-bubble-green {
    background-color: var(--goto-ink);
}

/* 4. TÍTULOS DAS SEÇÕES: o teal do tema dá lugar ao escuro da marca.
      Seletores repetem os do main.css com o prefixo do escopo para vencer
      no empate de origem (este arquivo entra DEPOIS do bundle). */
.goto-landing h2 {
    color: var(--goto-ink);
}

.goto-landing .incluso-content h3,
.goto-landing .programacao-title,
.goto-landing .programacao-item-text h3,
.goto-landing .circle-icons .text h3 {
    color: var(--goto-ink);
}

/* 5. FUNDOS TONALIZADOS: lavagem de limão no lugar do creme do tema. */
.goto-landing .goto-experiencia {
    background: color-mix(in srgb, var(--goto-lime) 12%, var(--white));
}

.goto-landing .goto-experiencia .center-box p {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}

/* O tema declara o creme com !important; mesma arma, especificidade maior. */
.goto-landing .incluso-section {
    background: color-mix(in srgb, var(--goto-lime) 8%, var(--white)) !important;
}

/* Grade Quando / Onde / Pra quem: 3 cartões da MESMA anatomia .incluso-card;
   só a grade muda de trilha para caberem os três na mesma linha. */
.goto-landing .goto-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: var(--sp-10);
}

/* 6. BOLHAS DECORATIVAS das seções de mídia, no trio da marca. */
.goto-landing .programacao-bubble-blue {
    background: var(--goto-lime);
}

.goto-landing .programacao-bubble-yellow {
    background: var(--goto-moss);
}

.goto-landing .programacao-bubble-green {
    background: var(--goto-ink);
}

/* Círculo dos ícones da equipe e dos passos: amarelo do tema vira limão suave. */
.goto-landing .circle-icons .icon {
    background: color-mix(in srgb, var(--goto-lime) 20%, var(--white));
}

/* Os SVGs do tema trazem a própria cor no arquivo (o carrinho é teal, o
   WhatsApp é verde, o Instagram é preto), e lado a lado a lista aparecia com
   três cores diferentes. A máscara descarta a cor do arquivo e pinta todos
   pelo token, do mesmo jeito que o tema já faz com os ícones de campo. */
.goto-landing .goto-step-icon {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    background-color: var(--goto-ink);
    -webkit-mask: var(--goto-step-icon) center / contain no-repeat;
    mask: var(--goto-step-icon) center / contain no-repeat;
}

/* 7. SEÇÃO DE INSCRIÇÃO (#inscricao): o palco escuro da marca. Os cartões
      brancos do tema saltam sobre ele sem mudar uma linha de anatomia. */
.goto-landing .goto-signup-section {
    background: var(--goto-ink);
}

.goto-landing .goto-signup-section .season-signup {
    margin-top: 0;
}

.goto-landing .goto-signup-section .season-signup-title {
    color: var(--goto-lime);
}

.goto-landing .season-bubble-left {
    background-color: var(--goto-moss);
}

.goto-landing .season-bubble-right {
    background-color: var(--goto-lime);
}

/* Foco visível sobre o fundo escuro: o azul do tema some no escuro. */
.goto-landing .goto-signup-section .season-card-btn:focus-visible,
.goto-landing .goto-signup-section a:focus-visible {
    outline-color: var(--goto-lime);
}

/* 8. CTAs: limão da GoTo com texto no escuro da marca (10,4:1). A sombra
      repete a gramática do tema (anel de aresta + contato) com o limão
      escurecido. A variante --waitlist fica com o visual do tema. */
.goto-landing .primary-btn,
.goto-landing .programacao-btn,
.goto-landing .season-card-btn:not(.season-card-btn--waitlist) {
    background: var(--goto-lime);
    color: var(--goto-ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--goto-shadow) 24%, transparent),
                0 1px 2px color-mix(in srgb, var(--goto-shadow) 11%, transparent);
}

.goto-landing .primary-btn:hover,
.goto-landing .programacao-btn:hover,
.goto-landing .season-card-btn:not(.season-card-btn--waitlist):hover {
    background: color-mix(in srgb, var(--goto-lime) 84%, var(--goto-ink));
    color: var(--goto-ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--goto-shadow) 28%, transparent),
                0 2px 6px color-mix(in srgb, var(--goto-shadow) 15%, transparent);
}

.goto-landing .primary-btn:active,
.goto-landing .programacao-btn:active,
.goto-landing .season-card-btn:not(.season-card-btn--waitlist):active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--goto-shadow) 32%, transparent),
                0 1px 1px color-mix(in srgb, var(--goto-shadow) 13%, transparent);
}

/* 9. BLOCOS DE TEXTO PRÓPRIOS: medida de leitura. */
.goto-landing .goto-seguranca {
    max-width: 46rem;
    margin: var(--sp-12) auto 0;
}

.goto-landing .goto-steps {
    max-width: 42rem;
    margin: var(--sp-10) auto 0;
}

.goto-landing .goto-steps .circle-icons > li {
    margin-bottom: var(--sp-8);
}

.goto-landing .goto-steps .circle-icons > li:last-child {
    margin-bottom: 0;
}

/* 10. RESPONSIVO: mesmas paradas do tema (o grosso do responsivo vem do
       bundle, que já cuida do herói, das grades e dos cartões). */
@media (max-width: 62em) {
    /* O herói centraliza a coluna de texto nesta parada; a faixa da
       parceria acompanha. */
    .goto-landing .goto-partner {
        align-items: center;
    }

    .goto-landing .goto-partner__marks {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 48em) {
    .goto-landing .goto-partner__badge {
        font-size: 0.75rem;
    }

    .goto-landing .goto-steps {
        margin-top: var(--sp-8);
    }
}

/* Estrela do estado "Inscrições em breve": a cor vem daqui (o SVG usa
   currentColor), para não ficar o amarelo do Corujas numa página lime. */
.goto-landing .season-card-header svg {
    color: var(--goto-lime);
}