/* ==========================================
   FONTES LOCAIS – NOWAY
========================================== */
@font-face {
    font-family: 'Noway';
    src: url('../fonts/Noway-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noway';
    src: url('../fonts/Noway-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noway';
    src: url('../fonts/Noway-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noway';
    src: url('../fonts/Noway-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ==========================================
   VARIÁVEIS
========================================== */
:root {
    --gold:       #C8963A;
    --gold-hover: #A97A28;
    --font-main:  'Noway', sans-serif;
}


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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    overflow-x: hidden;
    background: #0d0d0d;
}


/* ==========================================
   HERO BANNER
   ─────────────────────────────────────────
   height: 97vh  →  altura definitiva.
   Isso faz com que h-100 no container filho
   resolva corretamente e mt-auto funcione.
   min-height NÃO estabelece altura para
   cálculo de height:100% em filhos.
========================================== */

#inicio {
    display: flex;
    align-items: center;
}
.hero-banner {
    position: relative;          /* âncora do logo absoluto           */
    width: 100%;
    height: 97vh;                /* altura definitiva para h-100 filho */
    background:
        url('../img/banner-homem-mulher-correndo.png')
        center center / cover no-repeat;
    display: flex;               /* permite h-100 via align-items:stretch */
    align-items: stretch;
}

/* ---- Logo: fora do fluxo, centrado no banner completo ---- */
.hero-logo {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    height: auto;
    display: block;
}

/* ---- Subtítulo ---- */
.hero-subtitle {
    font-size: clamp(16px, 1.26vw, 23px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

/* ---- Data ---- */
.hero-date {
    font-size: clamp(18px, 1.68vw, 31px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ---- Distância ---- */
.hero-km {
    font-size: clamp(16px, 1.38vw, 26px);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.45;
}

/* ---- CTA ---- */
.btn-garanta {
    display: inline-block;
    background-color: var(--gold);
    color: #fff;
    font-family: var(--font-main);
    font-size: clamp(13px, 1.02vw, 18px);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
    padding: clamp(10px, 1.1vh, 15px) clamp(28px, 3vw, 52px);
    border-radius: 50px;
    border: 2px solid var(--gold);
    transition: background-color .28s, border-color .28s, transform .2s;
    white-space: nowrap;
}

.btn-garanta:hover,
.btn-garanta:focus-visible {
    background-color: var(--gold-hover);
    border-color: var(--gold-hover);
    color: #fff;
    transform: translateY(-2px);
    outline: none;
}

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


/* ==========================================
   RESPONSIVO – TABLET / MOBILE
========================================== */
@media (max-width: 991.98px) {
    .hero-banner {
        height: 100svh;
        background-position: 62% center;
    }
}

@media (max-width: 767.98px) {
    .hero-banner {
        background-position: 49%;
    }

    /* Colunas empilhadas, alinhamento à esquerda */
    .hero-banner .row.align-items-end > [class*="col-"] {
        width: 100%;
        text-align: left;
    }

    .viva-img {
        max-width: 200px;
        margin: 0 0 1.25rem;
    }

    .run-img {
        margin: 0;
    }

    /* Fontes +50% em relação ao mínimo desktop */
    .hero-subtitle {
        font-size: 24px; /* 16px × 1.5 */
        text-align: left;
    }

    .hero-date {
        font-size: 27px; /* 18px × 1.5 */
        text-align: left;
    }

    .hero-km {
        font-size: 24px; /* 16px × 1.5 */
        text-align: left;
    }

    /* Botão 100% largura, fonte +50% */
    .hero-banner .btn-garanta {
        font-size: 21px; /* 14px × 1.5 */
        padding: 14px 20px;
        display: block;
        width: 100%;
        text-align: center;
    }
}

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


/* ==========================================
   SOBRE O EVENTO
========================================== */
.sobre-section {
    background-color: #0D3A47;
}

.sobre-label {
    display: block;
    color: #8CC140;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.sobre-titulo {
    color: #fff;
    font-size: clamp(36px, 4.32vw, 67px);
    font-weight: 700;
    line-height: 1.08;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.sobre-texto {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(17px, 1.2vw, 19px);
    font-weight: 400;
    line-height: 1.75;
}


/* ==========================================
   PARA QUEM É
========================================== */
.para-quem-section {
    background-color: #0D3A47;
    background-image: url('../img/textura-para-quem-e.png');
    background-size: cover;
    background-position: center center;
}

.para-quem-titulo {
    color: #fff;
    font-size: clamp(29px, 3.6vw, 55px);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 0;
}

.pq-card {
    background-color: #E8E4DC;
    border-radius: 16px;
    padding: 2rem 1.75rem;
    text-align: center;
}

.pq-card-titulo {
    color: #0D3A47;
    font-size: clamp(18px, 1.32vw, 22px);
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.pq-card-texto {
    color: #1C3D4A;
    font-size: clamp(16px, 1.06vw, 18px);
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 0;
}


/* ==========================================
   DESTINO
========================================== */
.destino-section {
    position: relative;
    background: url('../img/background-destino.png') center center / cover no-repeat;
}

.destino-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 28, 20, 0.65);
    z-index: 0;
}

.destino-section > .container {
    position: relative;
    z-index: 1;
}

.destino-titulo {
    color: #fff;
    font-size: clamp(36px, 4.32vw, 67px);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.08;
    margin-bottom: 1.75rem;
}

.destino-texto {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(17px, 1.2vw, 19px);
    font-weight: 400;
    line-height: 1.75;
    margin-bottom: 0;
}

.destino-box {
    border: 2px solid #8CC140;
    border-radius: 16px;
    padding: 2.5rem 2.25rem;
}

.destino-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.destino-list li {
    color: #fff;
    font-size: clamp(17px, 1.26vw, 20px);
    font-weight: 400;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.destino-list li::before {
    content: '';
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    background-color: #8CC140;
    border-radius: 50%;
    margin-top: 0.28em;
}


/* ==========================================
   GARANTA SUA VAGA (CONDIÇÕES E RESERVA)
========================================== */
.vaga-section {
    background: url('../img/background-vaga.png') center center / cover no-repeat;
}

.vaga-titulo {
    color: #fff;
    font-size: clamp(30px, 3.2vw, 54px);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 0;
}

.vaga-card {
    border: 1.5px solid #09a8d7;
    border-radius: 16px;
    padding: 3rem 2.5rem;
    text-align: center;
    background-color: #003647;
}

.vaga-data-pill {
    display: inline-block;
    background-color: #1A4A5E;
    color: #fff;
    font-size: clamp(14px, 0.95vw, 17px);
    font-weight: 400;
    padding: 0.45rem 2rem;
    border-radius: 50px;
}

.vaga-partir {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(16px, 1.15vw, 20px);
    margin-bottom: 0.15rem;
}

.vaga-preco {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    color: var(--gold);
    line-height: 1;
}

.vaga-rs {
    font-size: clamp(22px, 2.2vw, 36px);
    font-weight: 700;
}

.vaga-valor {
    font-size: clamp(72px, 7.5vw, 120px);
    font-weight: 700;
    line-height: 0.9;
}

.vaga-cents {
    font-size: clamp(22px, 2.2vw, 36px);
    font-weight: 700;
    align-self: flex-start;
    padding-top: 0.35rem;
}

.vaga-adultos {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(16px, 1.15vw, 20px);
}

.vaga-obs {
    color: rgba(255, 255, 255, 0.5);
    font-size: clamp(12px, 0.82vw, 14px);
    line-height: 1.9;
}

.vaga-whatsapp {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(15px, 1.1vw, 19px);
}