/* Home 3 — composição da referência, sobre a base visual aprovada da Home 2. */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* A referência usa o hero em azul sólido, nas proporções amplas da Home 2. */
html:not(.dark) .home-v3-hero {
    background: #052f63 !important;
}

html:not(.dark) .home-v3-hero img {
    display: block !important;
    filter: saturate(.82) contrast(1.08) !important;
}

html:not(.dark) .home-v3-hero .absolute.inset-0.bg-gradient-to-t {
    background:
        linear-gradient(90deg, rgba(1, 22, 49, .88) 0%, rgba(3, 47, 99, .76) 50%, rgba(1, 22, 49, .68) 100%) !important;
}

html:not(.dark) .home-v3-hero .relative.h-full {
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 5rem !important;
    text-align: center !important;
}

html:not(.dark) .home-v3-hero .max-w-3xl {
    width: 100%;
    max-width: 60rem !important;
}

html:not(.dark) .home-v3-hero h1,
html:not(.dark) .home-v3-hero h2 {
    max-width: 60rem !important;
    font-size: clamp(4rem, 4.25vw, 4.65rem) !important;
    font-weight: 500 !important;
    letter-spacing: -.045em !important;
    line-height: 1.04 !important;
}

html:not(.dark) .home-v3-hero h1,
html:not(.dark) .home-v3-hero h2,
html:not(.dark) .home-v3-hero p {
    margin-right: auto !important;
    margin-left: auto !important;
}

html:not(.dark) .home-v3-hero div.flex.flex-wrap {
    justify-content: center !important;
}

html:not(.dark) .home-v3-hero > .absolute.bottom-\[4\.5rem\] {
    display: none !important;
}

html:not(.dark) .home-v3-search {
    background:
        linear-gradient(to bottom, transparent 0 50%, transparent 50% 100%),
        linear-gradient(100deg, transparent 0 50%, transparent 50% 100%) !important;
    position: relative;
}

html:not(.dark) .home-v3-search::after {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 50%;
    background: #fff8e7;
    content: "";
}

html:not(.dark) .home-v3-search > div.absolute {
    display: none !important;
}

html:not(.dark) body:has(.home-v3) header button.bg-emerald-600 {
    border-color: #e3a008 !important;
    background: #f5b400 !important;
    color: #102a4c !important;
    box-shadow: 0 10px 24px -14px rgba(227, 160, 8, .7) !important;
}

html:not(.dark) body:has(.home-v3) header button.bg-emerald-600:hover {
    background: #e3a008 !important;
}

/* Ordem exclusiva da Home 3. */
html:not(.dark) .home-v3 {
    display: flex;
    flex-direction: column;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #fff8e7 !important;
}

html:not(.dark) .home-v3-popular { order: 1; }
html:not(.dark) .home-v3-catalog { order: 2; }
html:not(.dark) .home-v3-guide { order: 3; }
html:not(.dark) .home-v3-categories { order: 4; }
html:not(.dark) .home-v3-benefits { order: 5; }
html:not(.dark) .home-v3-journey { order: 6; }
html:not(.dark) .home-v3-optional { display: none !important; }

html:not(.dark) main.home-v3 > section.home-v3-popular {
    width: 100%;
    margin: 0 !important;
    padding-top: clamp(4rem, 5vw, 5.5rem) !important;
    padding-bottom: clamp(4rem, 5vw, 5.5rem) !important;
    border: 0 !important;
    background: #fff8e7 !important;
    background-image: none !important;
}

html:not(.dark) .home-v3 > .home-v3-catalog {
    position: relative;
    isolation: isolate;
    background: #f1f6fc !important;
}

html:not(.dark) .home-v3 > .home-v3-catalog::before {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    background: #f1f6fc !important;
    content: "";
}

html:not(.dark) .home-v3-popular > div {
    max-width: 80rem !important;
}

html:not(.dark) .home-v3-popular .mb-6 {
    display: block !important;
    text-align: center;
}

html:not(.dark) .home-v3-popular .mb-6 > div:first-child {
    flex: 1;
}

html:not(.dark) .home-v3-popular .mb-6 > div:first-child > span,
html:not(.dark) .home-v3-journey .text-center > span,
html:not(.dark) .home-v3-categories span.text-secondary-300 {
    display: inline-flex;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: #f5b400;
    color: #102a4c !important;
}

html:not(.dark) .home-v3-popular h2 {
    color: #172333 !important;
    font-size: 2.75rem !important;
    font-weight: 800 !important;
}

html:not(.dark) .home-v3-popular .mb-6 {
    margin-bottom: 3rem !important;
}

html:not(.dark) .home-v3 #catalogo {
    width: 100%;
    max-width: 80rem !important;
    margin: 0 auto !important;
    padding-top: 3.5rem !important;
    padding-bottom: 4.5rem !important;
}

html:not(.dark) .home-v3 #catalogo > .mb-10 {
    display: block !important;
    max-width: 48rem;
    margin: 0 auto 3rem !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: center;
}

html:not(.dark) .home-v3 #catalogo > .mb-10 span {
    display: none !important;
}

html:not(.dark) .home-v3 #catalogo h2 {
    font-size: 2.75rem !important;
    font-weight: 800 !important;
}

html:not(.dark) .home-v3 #catalogo p {
    margin-right: auto !important;
    margin-left: auto !important;
}

html:not(.dark) .home-v3 .home-v3-guide,
html:not(.dark) .home-v3 .home-v3-categories {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html:not(.dark) .home-v3 .home-v3-guide .home-v2-guide-panel {
    margin: 0 !important;
    padding-top: 5.5rem !important;
    padding-bottom: 5.5rem !important;
    border: 0 !important;
    background: #052f63 !important;
}

html:not(.dark) .home-v3-guide .max-w-3xl {
    margin: 0 auto;
    text-align: center;
}

html:not(.dark) .home-v3-guide h2 {
    font-size: 3rem !important;
    font-weight: 500 !important;
}

html:not(.dark) .home-v3-guide .grid {
    max-width: 64rem;
    margin-right: auto;
    margin-left: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html:not(.dark) .home-v3 .home-v3-categories .home-v2-category-panel {
    margin: 0 !important;
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
    border: 0 !important;
    background: #f8f5ef !important;
    text-align: center;
}

html:not(.dark) .home-v3-categories .relative.z-10 {
    max-width: 64rem;
    margin-right: auto;
    margin-left: auto;
}

html:not(.dark) .home-v3 .home-v3-categories .home-v2-category-panel h3 {
    color: #123c6c !important;
    font-size: 2.5rem !important;
    font-weight: 500 !important;
}

html:not(.dark) .home-v3-categories p {
    color: #63758a !important;
}

html:not(.dark) .home-v3-categories .mt-5.flex {
    justify-content: center;
}

html:not(.dark) .home-v3-categories .mt-5.flex a {
    border-color: #d9e1ea !important;
    box-shadow: none !important;
}

html:not(.dark) .home-v3 .home-v3-benefits {
    width: 100%;
    max-width: 70rem !important;
    margin: 0 auto !important;
    padding-top: 4rem !important;
    padding-bottom: 4.5rem !important;
}

html:not(.dark) .home-v3-benefits h2,
html:not(.dark) .home-v3-journey h2 {
    font-size: 2.5rem !important;
    font-weight: 500 !important;
}

html:not(.dark) .home-v3-benefits .grid > div {
    border-top: 1px solid #f1f5f9 !important;
}

html:not(.dark) body main.home-v3 .home-v3-benefits .grid > div,
html:not(.dark) body main.home-v3 .home-v3-benefits .grid > div:hover {
    border-top: 1px solid #f1f5f9 !important;
}

html:not(.dark) .home-v3 .home-v3-journey {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
    border: 0 !important;
    background: #edf9ff !important;
    box-shadow: none !important;
}

html:not(.dark) .home-v3-journey > .text-center,
html:not(.dark) .home-v3-journey > .grid {
    max-width: 70rem;
    margin-right: auto;
    margin-left: auto;
}

html:not(.dark) .home-v3-notice {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    background: #f5f7fb !important;
}

html:not(.dark) .home-v3-notice > div {
    max-width: 70rem !important;
}

/* Componente tipográfico único para todos os cabeçalhos das seções. */
html:not(.dark) .home-v3-section-title {
    margin-top: .75rem !important;
    margin-bottom: .75rem !important;
    color: #052f63 !important;
    font-size: 2.75rem !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
    line-height: 1.08 !important;
    text-align: center !important;
}

html:not(.dark) .home-v3-section-copy {
    max-width: 48rem !important;
    margin: 0 auto !important;
    color: #52657e !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    text-align: center !important;
}

html:not(.dark) .home-v3-guide .home-v3-section-title,
html:not(.dark) .home-v3-guide .home-v3-section-copy {
    color: #fff !important;
}

html:not(.dark) .home-v3-guide .home-v3-section-copy {
    color: #dbeafe !important;
}

html:not(.dark) .home-v3-categories .home-v3-section-copy {
    color: #52657e !important;
}

@media (max-width: 1023px) {
    html:not(.dark) .home-v3-guide .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    html:not(.dark) .home-v3-hero > div.relative:first-child {
        height: 34rem !important;
    }

    html:not(.dark) .home-v3-hero .relative.h-full {
        justify-content: flex-start !important;
        padding-top: 3rem !important;
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    html:not(.dark) .home-v3-hero div.flex.flex-wrap {
        width: 100%;
    }

    html:not(.dark) .home-v3-hero h1,
    html:not(.dark) .home-v3-hero h2 {
        max-width: 24rem !important;
        font-size: clamp(2.35rem, 10vw, 3rem) !important;
    }

    html:not(.dark) .home-v3-hero a {
        flex: 0 1 auto;
        justify-content: center;
        min-width: 9rem;
    }

    html:not(.dark) .home-v3-popular .mb-6 { text-align: center; }

    html:not(.dark) .home-v3-popular h2,
    html:not(.dark) .home-v3 #catalogo h2,
    html:not(.dark) .home-v3-guide h2,
    html:not(.dark) .home-v3 .home-v3-categories .home-v2-category-panel h3,
    html:not(.dark) .home-v3-benefits h2,
    html:not(.dark) .home-v3-journey h2 {
        font-size: 1.75rem !important;
    }

    html:not(.dark) .home-v3-section-copy {
        font-size: .9rem !important;
        line-height: 1.6 !important;
    }

    html:not(.dark) .home-v3-section-title {
        font-size: 1.75rem !important;
    }

    html:not(.dark) .home-v3 #catalogo {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    html:not(.dark) .home-v3 .home-v3-guide .home-v2-guide-panel,
    html:not(.dark) .home-v3 .home-v3-categories .home-v2-category-panel {
        padding: 3.5rem 1rem !important;
        border-radius: 0 !important;
    }

    html:not(.dark) .home-v3-guide .grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html:not(.dark) .home-v3-categories .mt-5.flex a {
        justify-content: space-between;
        width: 100%;
    }

    html:not(.dark) .home-v3 .home-v3-benefits,
    html:not(.dark) .home-v3 .home-v3-journey {
        padding: 3.5rem 1rem !important;
    }

    html:not(.dark) .home-v3-journey > .grid > div {
        display: grid;
        grid-template-columns: 3.5rem minmax(0, 1fr);
        column-gap: .8rem;
        align-items: center;
        text-align: left;
    }

    html:not(.dark) .home-v3-journey .grid .w-16 {
        grid-row: 1 / span 2;
        margin: 0 !important;
    }
}

/* Continuidade visual entre as últimas seções da home. */
html:not(.dark) body main.home-v3 > .home-v3-guide {
    margin-bottom: 0 !important;
}

html:not(.dark) body main.home-v3 > .home-v3-categories {
    padding-top: 4rem !important;
    background: #f8f5ef !important;
}

html:not(.dark) body main.home-v3 > .home-v3-journey {
    margin-bottom: 0 !important;
}

@media (max-width: 420px) {
    html:not(.dark) .home-v3-hero div.flex.flex-wrap {
        flex-direction: column;
    }

    html:not(.dark) .home-v3-hero a {
        width: 100%;
        min-height: 2.75rem;
    }
}

/* Regra final: todos os títulos e textos de abertura usam a mesma escala. */
html:not(.dark) body main.home-v3 .home-v3-section-header .home-v3-section-title.home-v3-section-title {
    margin-top: .75rem !important;
    margin-bottom: .75rem !important;
    color: #052f63 !important;
    font-size: 2.75rem !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
    line-height: 1.08 !important;
    text-align: center !important;
}

html:not(.dark) body main.home-v3 .home-v3-section-header .home-v3-section-copy.home-v3-section-copy {
    max-width: 48rem !important;
    margin: 0 auto !important;
    color: #52657e !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    text-align: center !important;
}

html:not(.dark) body main.home-v3 #catalogo .home-v3-section-header .home-v3-section-copy.home-v3-section-copy {
    color: #52657e !important;
}

html:not(.dark) body main.home-v3 .home-v3-guide .home-v3-section-header .home-v3-section-title.home-v3-section-title {
    color: #fff !important;
}

html:not(.dark) body main.home-v3 .home-v3-guide .home-v3-section-header .home-v3-section-copy.home-v3-section-copy {
    color: #dbeafe !important;
}

html:not(.dark) body main.home-v3 .home-v3-categories .home-v3-section-header .home-v3-section-copy.home-v3-section-copy {
    color: #52657e !important;
}

@media (max-width: 767px) {
    html:not(.dark) body main.home-v3 .home-v3-section-header .home-v3-section-title.home-v3-section-title {
        font-size: 1.75rem !important;
    }

    html:not(.dark) body main.home-v3 .home-v3-section-header.home-v3-section-header .home-v3-section-copy.home-v3-section-copy {
        font-size: .9rem !important;
        line-height: 1.6 !important;
    }

    html:not(.dark) body main.home-v3 #catalogo .home-v3-section-header .home-v3-section-copy.home-v3-section-copy {
        font-size: .9rem !important;
        line-height: 1.6 !important;
    }
}