/* Photo banners — same box on New & Feature, Decoration, Customization, etc.
   Desktop matches the general banner file (1280×166). */
.banner {
    width: 100%;
    overflow: hidden;
    display: block;
    position: relative;
    aspect-ratio: 1280 / 166;
}

.banner picture,
.banner img,
.banner__desktop,
.banner__mobile {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner__mobile {
    display: none;
}

@media (max-width: 768px) {
    section.title__page {
        padding: 36px 0;
    }

    section.title__page h1 {
        font-size: 28px;
    }

    section.intro__page {
        padding: 36px 0;
    }

    section.page-conteudo {
        padding: 24px 0;
    }

    .banner {
        aspect-ratio: auto;
        height: auto;
    }
    .banner picture,
    .banner img,
    .banner__desktop,
    .banner__mobile {
        position: static;
        inset: auto;
        width: 100%;
        height: auto;
        object-fit: unset;
    }
    .banner__desktop { display: none; }
    .banner__mobile  { display: block; }
}

section.title__page {
    display: flex;
    min-width:100%; 
    background-color: var(--azul);
    background-size: cover;
    padding: 100px 0;
    color: #fff;
    border-radius: 20px 20px 0 0;
} 

section.title__page .container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: column;
}

section.title__page h1 {
    font-size: 54px;
}

section.title__page--has-image {
    padding: 0;
    position: relative;
}

section.title__page--has-image .container {
    position: absolute;
    inset: 0;
    margin: auto;
}

.title__page__img {
    display: block;
    width: 100%;
    height: 100%;
}

.title__page__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section.title__page p {
    color:#fff;
    text-transform: uppercase;
    margin-bottom: 30px;
}

section.intro__page {
    padding: 90px 0;
    background: #f2f2f2;
}

section.intro__page .row {
    align-items: center;
}

section.intro__page h3 {
    font-size: 24px;
    font-weight: bold;
    color: var(--roxo);
    margin-bottom: 25px;
}

section.intro__page img {
    border-radius: 40px;
    display: block;
    width:100%;
}

section.intro__page p {
    margin-bottom: 15px;
}

section.page-conteudo {
    padding: 45px 0;
    width: 100%;
}

/* Same gap after a photo banner on New & Feature / Headwear / Decoration.
   Cap Wizard has no empty strip — title starts in .wizard-hero (60px).
   These pages had mt-5 (48px) or breadcrumbs margin-top 90px. */
.page-after-banner {
    margin-top: 24px;
}

.title__page--has-image + .page-after-banner + .page-conteudo,
.banner + .page-after-banner + .page-conteudo,
.banner + .page-after-banner + .decoration-gallery {
    padding-top: 24px;
}

.banner + .page-after-banner + section.catalogs,
.banner + .customizer {
    margin-top: 24px;
}