@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wght@0,5..1200,600;1,5..1200,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* FONTES */
    --fonte-prata: "Prata", serif;
    --fonte-playfair: "Playfair", serif;
    --fonte-montserrat: "Montserrat", sans-serif;

    /* TAMANHOS DAS FONTES DESKTOP */
    --titulo-grande-desktop: 64px;
    --titulo-sessao-desktop: 24px;
    --texto-desktop: 16px;

    /* TAMANHOS DAS FONTES MOBILE */
    --titulo-grande-mobile: 36px;
    --titulo-sessao-mobile: 20px;
    --texto-mobile: 16px;

    /* CORES */
    --cor-destaque: #C9F40E;
    --fundo-primario: #121212;
    --fundo-secundario: #2E2E2E;
    --fundo-terciario: #1C1C1C;
    --cor-branca: #FFFFFF;
    --fundo-inputs: #8D8D8D;
}

body {
    background-color: var(--fundo-primario);
}

a {
    text-decoration: none;
}

a:hover {
    cursor: pointer;
}

/* ======================================================================================================= */

/* EFEITO DE HOVER GERAL */

.link-underline {
    position: relative;
    text-decoration: none;
    color: #1D0F28;
}

.link-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width 0.3s ease;
}

.link-underline:hover::after {
    width: 100%;
}

/* ESTILO DA BARRA DE NAVEGAÇÃO */
.logo img {
    width: 200px;
    padding-left: 15px;
}

.navigation-bar {
    background-color: var(--fundo-terciario);
    height: 95px;
}

.icon-lg {
    width: 29px;
    height: 29px;
    transition: color 0.3s;
}

.icon-lg:hover,
#user-link:hover * {
    color: var(--cor-destaque);
}

.container-search {
    display: flex;
    justify-content: center;
}

.search-input {
    border-radius: 25px;
    padding-left: 30px;
    max-width: 800px;
}

/* ===================== MENU SECUNDÁRIO (BARRA AMARELA) ===================== */

.menu-bar-second {
    background-color: var(--cor-destaque);
}

/* Container flexível que permite scroll */
.modality-menu {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Scroll lateral ativado */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 5px 15px;
}

.modality-menu::-webkit-scrollbar {
    display: none;
}

/* Estilo do Dropdown dentro da barra amarela */
.container-dropdown-options {
    flex-shrink: 0;
    margin-right: 15px;
}

.button-dropdown-nav {
    border: none !important;
    border-right: 1.5px solid rgba(0, 0, 0, 0.2) !important;
    /* Borda divisória */
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 15px 0 0 !important;
    color: #1D0F28 !important;
    font-size: 18px;
    font-weight: normal;
    font-family: var(--fonte-montserrat);
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 0 !important;
}

.button-dropdown-nav::after {
    display: none !important;
    /* Remove seta do bootstrap */
}

/* Dropdown flutuante (fixed para não ser cortado pelo overflow) */
.dropdown-modality {
    background-color: var(--cor-branca) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    padding: 10px 0 !important;
    z-index: 9999 !important;
}

.dropdown-modality .dropdown-item {
    color: var(--fundo-primario) !important;
    font-family: var(--fonte-montserrat);
    font-weight: 500;
    padding: 8px 20px !important;
    transition: background 0.2s;
}

.dropdown-modality .dropdown-item:hover {
    background-color: #f1f1f1 !important;
    cursor: pointer;
}

/* Lista de links ao lado do dropdown */
.list-second-options {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 30px;
    padding-left: 10px;
    list-style: none;
    margin: 0;
}

@media (min-width: 992px) {
    .list-second-options {
        gap: 150px;
    }
}

.list-second-options a {
    color: #1D0F28;
    font-weight: 500;
    font-family: var(--fonte-montserrat);
    white-space: nowrap;
}

/* ======================================================================================================= */

/* NAVBAR MOBILE — barra de pesquisa destacada */

.nav-mobile-top {
    height: 70px;
}

.nav-mobile-search {
    background-color: var(--fundo-terciario);
}

.container-search-mobile {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--cor-branca);
    padding: 10px 16px;
    gap: 8px;
}

.search-input-mobile {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--fundo-primario);
    font-family: var(--fonte-montserrat);
    font-size: 16px;
}

.divider-search-mobile {
    display: inline-block;
    width: 1px;
    height: 22px;
    background-color: var(--fundo-primario);
    margin-right: 8px;
}

.btn-search-mobile {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    color: var(--fundo-primario);
    cursor: pointer;
}

.user-name-mobile {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--cor-branca);
}

@media (max-width: 767px) {
    .logo img {
        width: 155px;
        padding-left: 0;
    }
}

/* ======================================================================================================= */

/* HERO SECTION (ELIAS) */
.title-banner {
    font-family: var(--fonte-playfair);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-style: italic;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 0, 0, 0.8);
}

/* Define fonte e tamanho dos subtitulos da hero section */
.lead {
    font-family: var(--fonte-montserrat);
    font-size: clamp(0.9rem, 1.5vw, 1.25rem);
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 0, 0, 0.8);
}

/* Estiliza os botões de ver detalhes do carrossel*/
.btn-custom-outline {
    border: 2px solid var(--cor-destaque);
    color: var(--cor-destaque);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.9rem, 1.2vw, 1.3rem);
    width: clamp(140px, 25vw, 255px);
    height: clamp(38px, 6vw, 60px);
}

.btn-custom-outline:hover {
    background-color: #c6ff00;
    color: #000;
    font-weight: 500;
}

.hero-slide {
    height: clamp(250px, 60vh, 530px);
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero-slide .container {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Indicadores */
#hero-carousel .carousel-indicators button {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.4;
    border: none;
    margin: 0 6px;
    transition: all 0.3s ease;
}

#hero-carousel .carousel-indicators button.active {
    opacity: 1;
    background-color: var(--cor-destaque);
}

/* ================= TABLET ================= */
@media (max-width: 992px) {
    .hero-slide {
        height: 55vh;
    }
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
    .hero-slide {
        height: 50vh;
        /* máximo metade da tela */
    }

    .hero-slide .container {
        padding: 20px;
    }

    .lead {
        font-size: 0.9rem;
    }

    .btn-custom-outline {
        width: 140px;
        height: 38px;
        font-size: 0.85rem;
    }

    .hero-4 {
        background-image: url("../img/banner/HeroSection.png");
    }
}

/* Imagens de cada slide */
.hero-1 {
    background-image: url("../img/banner/banner-1.png");
}

.hero-2 {
    background-image: url("../img/banner/banner-2.png");
}

.hero-3 {
    background-image: url("../img/banner/banner-3.png");
}

.hero-4 {
    background-image: url("../img/banner/banner-4.png");
}

#hero-carousel .carousel-indicators button {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.4;
    border: none;
    margin: 0 6px;
    transition: all 0.3s ease;
}

#hero-carousel .carousel-indicators button.active {
    width: 16px;
    height: 16px;
    opacity: 1;
    background-color: var(--cor-destaque);
}

/* ======================================================================================================= */


/* ESTILIZAÇÃO DO FOOTER (ELIAS) */

footer {
    color: white;
    background-color: var(--fundo-terciario);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}


/* Cria um contexto para posicionar a linha divisória do footer zera o padding e define a largura do container */
.container-main-footer {
    position: relative;
    width: 90%;
    padding: 0;
}


/* Define a familia da fonte dos titulos do footer */
.container-main-footer h2 {
    font-family: var(--fonte-prata);
}

/* Estiliza os textos do footer */
.container-main-footer p {
    font-family: var(--fonte-montserrat);
    font-style: italic;
    font-size: 15PX;
}

/* Coloca o titulo e o texto do endereço um em baixo do outro*/
.addres-footer {
    display: flex;
    flex-direction: column;
}


/* Seta a cor dos ícones de redes sociais como brancos */
.list-socials-midias-footer ul li a {
    color: white;
}

/* Aumenta o tamanho dos ícones de redes sociais do footer*/
.list-socials-midias-footer svg {
    margin-top: 10px;
    width: 32px !important;
    height: 32px !important;
}

/* Define o tamanho dos titulos do footer*/
.title-footer h2 {
    font-size: 20px;
}

/* Define o tamanho da logo no footer */
.fig-img-footer img {
    width: 204px;
}

.content-footer {
    width: 100%;
}


/* Cria a linha divisória que está dentro do footer*/
.container-main-footer::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    text-align: center;
    width: 100%;
    height: 1px;
    bottom: 20px;
    background-color: var(--cor-destaque);
}

/* Icones do rodape */
.lista-contato{
    flex-direction: column;
}

.lista-contato li{
    display: flex;
    align-items: center;
    gap: .5em;
}

.lista-contato li p{
    margin: 0;
}

.icon-rodape {
    font-size: 20px;
}

.copy {
    text-align: center;
}

/* ================================================================================*/

/* SESSÃO DE BENEFICIOS (ELIAS) */

/* Seta a altura, cor de fundo, torna flexivel e impede os elementos de quebrar a linha no mobile na sessão de beneficios */
.container-section-benefits {
    background-color: var(--fundo-secundario);
    height: 100px;
    display: flex;
    flex-wrap: nowrap !important;
}

/* Estiliza o container interno (onde vçao todos os elementos da sessçao de beneficios)  */
.section-benefits {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: start;
    font-family: var();
    gap: 10px;
    flex: 1;

}

/* Seta o tamanho da fonte dos titulos da sessão de beneficios (usei clamp para ajudar na responsividade).  */
.section-benefits h2 {
    font-size: clamp(12px, 1.5vw, 20px);
    margin: 0;
}

/* Seta o tamanho da fonte dos subtitulos da sessão de beneficios (usei clamp para ajudar na responsividade).  */
.section-benefits h3 {
    font-size: clamp(10px, 1.2vw, 16px);
    font-weight: 100;
    margin: 0;
}

/* Seta o tamanho dos icones da sessão de beneficios (usei clamp para ajudar na responsividade).  */
.icon-benefits {
    width: clamp(40px, 4vw, 60px);
    height: clamp(28px, 4vw, 48px);
}


/* ==================================================================================== */
/* Sessão dos cards de melhores ofertas do dia (ELIAS)*/

/* Adiciona e posiciona a imagem de fundo dos cards de ofertas */

.card-1-offers {
    background-image: url('../img/backgrounds/Card\ melhores\ ofertas\ \(1\).png');
    background-size: cover;
    background-position: center;
    border-radius: 32px;
    height: 100%;
}

.card-2-offers {
    background-image: url('../img/backgrounds/card-offers-2.png');
    background-size: cover;
    background-position: center;
    border-radius: 32px;
    height: 100%;
}

.card-3-offers {
    background-image: url('../img/backgrounds/card-offers-3.png');
    background-size: cover;
    background-position: center;
    border-radius: 32px;
    height: 100%;
}

.card-4-offers {
    background-image: url('../img/backgrounds/card-offers-4.png');
    background-size: cover;
    background-position: center;
    border-radius: 32px;
    height: 100%;
}


.title-section-offers {
    color: var(--cor-destaque);
    font-family: var(--fonte-montserrat);
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 700;
    margin-top: 45px;
    margin-bottom: 30px;
}

/* Define o posicionamento do carousel de ofertas no desktop */
#carouselOfertasDesktop {
    position: relative;
}

/* Define o posicionamento base do carousel de melhores ofertas */
.carrousel-best-offers {
    position: relative;
}

/* Define o posicionamento interno dos itens do carousel */
.carousel-inner {
    position: relative;
}

/* Estiliza os botões de navegação do carousel (setas) */
.carousel-control-prev,
.carousel-control-next {
    opacity: 1;
    width: 5%;
    /* controla o quanto entra no card */
    top: 50%;
    transform: translateY(-50%);
}

/* Posiciona o botão anterior (esquerda) do carousel */
.carousel-control-prev {
    left: 0;
    transform: translate(-50%, -50%);
}

/* Posiciona o botão próximo (direita) do carousel */
.carousel-control-next {
    right: 0;
    transform: translate(50%, -50%);
}

/* Estiliza o ícone personalizado das setas do carousel */
.custom-arrow {
    background-color: var(--cor-destaque);
    padding: 5px;
    border-radius: 50%;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Define a altura dos cards de ofertas */
.container-card-best-offers-child {
    height: 350px;
}

/* Define o tamanho do título dentro dos cards de ofertas */
.container-card-best-offers h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

/* Define o tamanho do valor/preço dentro dos cards */
.value-card-best-offers {
    font-size: clamp(1.5rem, 4vw, 2rem);
}

/* Define o espaçamento interno do texto dos cards */
.txt-card-best-offers {
    padding: 30px 0;
}

/* Estiliza o botão dos cards de ofertas */
.btn-card-best-offers {
    border: 2px solid var(--cor-destaque);
    color: var(--cor-destaque);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.9rem, 1.2vw, 1.3rem);
    width: clamp(160px, 25vw, 200px);
    height: clamp(40px, 6vw, 40px);
}

/* Define o efeito hover do botão dos cards de ofertas */
.btn-card-best-offers:hover {
    background-color: #c6ff00;
    font-weight: 500;
    color: #000;
}

/* CARDS */
.card {
    padding: 15px;
    border-radius: 32px;
    background-color: var(--fundo-secundario);
    color: var(--cor-branca);
    display: flex;
    flex-direction: column;
    gap: .8em;
    transition: 0.2s;
}

.card img {
    border-radius: 24px;
    width: 100%;
}

.img-card {
    position: relative;
}

.card div span {
    position: absolute;
    background-color: var(--fundo-secundario);
    padding: .6em 1em;
    margin: .5em;
    bottom: 0;
    color: var(--cor-destaque);
    border-radius: 20px;
    font-weight: bold;
    font-size: 12px;
    font-family: var(--fonte-montserrat);
}

.card h3 {
    font-size: var(--titulo-sessao-desktop);
    font-family: var(--fonte-montserrat);
    font-weight: 400;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.card>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card div p {
    font-family: var(--fonte-montserrat);
    font-size: var(--titulo-sessao-desktop);
    margin: 0;
    font-weight: bold;
}

.card:hover {
    cursor: pointer;
    background-color: #141414;
}

.botao {
    background-color: var(--cor-destaque);
    padding: 10px 30px;
    border-radius: 50px;
    color: #1D0F28;
    font-family: var(--fonte-montserrat);
    border: none;
    font-size: var(--texto-desktop);
    font-weight: bold;
    transition: .3s;
    text-decoration: none;
}

.botao:hover {
    background-color: #CFED89;
    color: var(--fundo-primario);
}

.card button {
    background-color: var(--cor-destaque);
    border: none;
    border-radius: 20px;
    padding: .5em;
    transition: .3s;
    flex: 0 0 auto;
}

.card button:hover {
    background-color: #CFED89;
}

.icon-card {
    width: 2em;
    height: 2em;
}

/* ================================================================================================================== */

/* CARROUSSEL DE MODALIDADES (ELIAS) */

/* Adiciona um espaço entre o carroussel de modalidades e o form da newsletter*/
.section-modalitys {
    margin-bottom: 80px;
}

/* Define o container do card com posição relativa para permitir posicionamento absoluto de elementos internos, além de bordas arredondadas e corte do conteúdo excedente */
.card-custom {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

/* Ajusta a imagem do card para ocupar toda a largura, define altura fixa, mantém proporção com object-fit e aplica um escurecimento */
.card-custom img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    filter: brightness(0.7);
}

/* Posiciona o texto dentro do card sobre a imagem, fixando na parte inferior esquerda com estilo destacado */
.card-custom span {
    position: absolute;
    bottom: 10px;
    left: 20px;
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Remove espaçamento interno padrão do container do carrossel */
#carouselTrack {
    padding: 0;
}

/* Aplica rolagem suave ao container do carrossel */
#carouselTrack {
    scroll-behavior: smooth;
}

/* Impede que os cards encolham ou cresçam automaticamente dentro de um container flex */
.card-item-modalitys {
    flex: 0 0 auto;
}

/* Estiliza o título da seção de modalidades com cor, fonte, tamanho responsivo e espaçamentos */
.title-modality {
    color: var(--cor-destaque);
    font-family: var(--fonte-montserrat);
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 700;
    margin-top: 45px;
    margin-bottom: 30px;
}

/* Define novamente o container do card com posição relativa, bordas arredondadas e corte do conteúdo excedente */
.card-custom {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

/* Ajusta a imagem do card de modalidades para ocupar toda a largura, altura fixa e manter proporção sem distorção */
.img-card-modalitys {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

/* Posiciona o título sobre o card de forma absoluta, centralizando horizontalmente e ajustando verticalmente ao meio */
.title-card-modalitys {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--fonte-prata);
    font-weight: 100;
    color: white;
    font-size: clamp(1.2rem, 4vw, 1.5rem);
    font-weight: 600;
    text-align: center;
    transition: 0.3s;
    width: 100%;
}

.title-card-modalitys:hover {
    font-size: clamp(1.2rem, 4vw, 1.7rem);
}

.container-list-cards-modalitys {
    position: relative;
}

/* ESTILIZA OS BOTÃO DE PREV DO CARROSSEL DE MODALIDADES DA PÁGINA INDEX */
#prevBtn {
    z-index: 1;
    background-color: var(--cor-destaque);
    color: black;
    border-radius: 50%;
    position: absolute;
    top: 40%;
    transform: translateX(-20px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: none;
}

/* ESTILIZA OS BOTÃO DE NEXT DO CARROSSEL DE MODALIDADES DA PÁGINA INDEX */
#nextBtn {
    z-index: 1;
    background-color: var(--cor-destaque);
    color: black;
    border-radius: 50%;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 40%;
    transform: translateX(20px);
    border: none;
}

.card-item-modalitys {
    flex: 0 0 auto;
    min-width: 0;
}


/* FORM DA NEWSLETTER (ELIAS) */

/* Define um espaçamento inferior maior para separar a sessão de newsletter do conteúdo abaixo */
.newsletter-section {
    margin-bottom: 100px;
}

/* Estiliza o container da newsletter com cor de fundo, cantos arredondados, espaçamento interno e texto branco */
.container-newsletter {
    background-color: var(--fundo-secundario);
    border-radius: 30px;
    padding: 30px;
    color: white;
}

/* Altera a cor de destaque para elementos <span> dentro do container da newsletter */
.container-newsletter span {
    color: var(--cor-destaque);
}

/* Define o estilo do botão da newsletter com cor de destaque e bordas arredondadas */
.btn-news-letter {
    max-height: 50px;
}

/* Ajusta o campo de formulário com bordas arredondadas e espaçamento interno para melhor usabilidade */
.form-control {
    border-radius: 20px;
    padding: 10px;
}

/* Define o tamanho do título com clamp para torná-lo responsivo entre diferentes tamanhos de tela */
.container-newsletter h2 {
    font-size: clamp(0.9rem, 1.2vw, 2rem);
}


/* ── Modal: Feedback produto adicionado ao carrinho ─────────────────────────────── */

.modal-pedido-content {
    background-color: var(--fundo-secundario);
    border: 1px solid #444;
    border-radius: 12px;
    color: var(--cor-branca);
    font-family: var(--fonte-montserrat);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.modal-pedido-header {
    display: flex;
    align-items: center;
    gap: 0.65em;
}

.modal-pedido-icon {
    width: 1.4em;
    height: 1.4em;
    color: var(--cor-destaque);
    flex-shrink: 0;
    stroke-width: 2px;
}

.modal-pedido-titulo {
    font-size: var(--titulo-sessao-desktop);
    font-weight: 700;
    color: var(--cor-destaque);
    margin: 0;
}

.modal-pedido-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modal-pedido-body p {
    margin: 0;
    font-size: var(--texto-desktop);
    line-height: 1.55;
    color: var(--cor-branca);
}

.modal-pedido-sub {
    color: #aaa !important;
    font-size: 0.875rem !important;
}

.modal-pedido-footer {
    display: flex;
    justify-content: flex-end;
}

.btn-modal-fechar {
    background: transparent;
    border: 2px solid var(--cor-destaque);
    color: var(--cor-destaque);
    font-family: var(--fonte-montserrat);
    font-weight: 600;
    font-size: var(--texto-desktop);
    padding: 0.45em 1.4em;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s;
}

.btn-modal-fechar:hover {
    background-color: var(--cor-destaque);
    color: #1D0F28;
}


/* RESPONSIVIDADE NEWSLETTER*/
/* Em telas menores que 991px, ajusta a seção de newsletter para melhor responsividade */
@media (max-width: 991px) {

    /* Centraliza o conteúdo da caixa de newsletter */
    .newsletter-box {
        text-align: center;
    }

    /* Faz o formulário da newsletter ocupar toda a largura disponível */
    .newsletter-form {
        width: 100%;
    }

    /* Faz o campo de input ocupar toda a largura no mobile */
    .newsletter-form .form-control {
        width: 100%;
    }

    /* Faz o botão do formulário ocupar toda a largura disponível */
    .newsletter-form button {
        width: 100%;
    }
}

/* MEDIA QUERIES DO CARROUSSEL DE CARDS DE MODALIDADES */

/* Em telas grandes (desktop), define que cada card ocupe aproximadamente 25% da largura com um pequeno espaçamento */
@media (min-width: 992px) {
    .card-item-modalitys {
        width: calc(25% - 12px);
    }
}


/* Ajustes para telas menores que 992px (tablet e mobile) */
@media (max-width: 991px) {

    /* Remove o espaçamento entre os itens do carrossel no mobile */
    #carouselTrack {
        gap: 0;
        /* remove o espaço só no mobile */
    }

    /* Faz com que cada card ocupe 100% da largura disponível */
    .card-item-modalitys {
        width: 100%;
    }

    /* Move o botão anterior levemente para dentro */
    #prevBtn {
        transform: translateX(20px);
    }

    /* Move o botão próximo levemente para dentro */
    #nextBtn {
        transform: translateX(-20px);
    }

    .carousel-control-prev {
        left: 25px;
        /* controla exatamente */
        transform: translateY(-50%);
    }

    /* Reposiciona o botão próximo do carousel para dentro da tela */
    .carousel-control-next {
        right: 25px;
        transform: translateY(-50%);
    }
}



/* MEDIA QUERIES DA HERO (ELIAS)*/

/* Em telas menores que 768px, centraliza a imagem de fundo da hero */
@media (max-width: 768px) {
    .hero-slide {
        background-position: center;
    }

    /* Em telas menores que 768px vai colocar um pading lateral no container do formulário da newsletter */
    .newsletter-section {
        padding: 0 13px;
    }

    /* Em telas menores que 768px vai diminuir o espaçamento entre a sessão da newsletter e o footer */
    .newsletter-section {
        margin-bottom: 50px;
    }

    /* Em telas menores que 768px vai diminuir o espaçamento entre o carroussel de modalidades e o a sessão da newsletter */
    .section-modalitys {
        margin-bottom: 50px;
    }

    /* Reposiciona o botão anterior do carousel para dentro da tela */
    .carousel-control-prev {
        left: 25px;
        transform: translateY(-50%);
    }

    /* Reposiciona o botão próximo do carousel para dentro da tela */
    .carousel-control-next {
        right: 25px;
        transform: translateY(-50%);
    }

    /* Força a quebra de linha em elementos que utilizam essa classe */
    .break-line {
        display: block;
    }


}

/* Em telas maiores que 1030px, também mantém a imagem centralizada */
/* Em telas maiores que 1030px, centraliza a posição da imagem de fundo do hero */
@media (min-width: 1030px) {
    .hero-slide {
        background-position: center;
    }
}


/* Em telas menores que 470px, ajusta o layout para melhor responsividade mobile */
@media (max-width: 470px) {


    /* Remove o espaçamento entre os itens da seção de benefícios */
    .section-benefits {
        gap: 0px;

    }

    /* Altera o cabeçalho da lista de produtos para layout em coluna */
    .cabecalho-lista-produtos {
        flex-direction: column;
        align-items: start;
        gap: .5em;
    }

    /* Faz os botões do cabeçalho ocuparem toda a largura disponível */
    .cabecalho-lista-produtos button {
        width: 100%;
    }


    /* Reduz o tamanho dos títulos e textos dos cards para mobile */
    h2,
    .card h3,
    .card div p {
        font-size: var(--titulo-sessao-mobile);
    }


    /* Ajusta o tamanho da fonte dos botões para mobile */
    .botao {
        font-size: var(--texto-mobile);
    }

    /* Reposiciona o botão anterior do carousel para dentro da tela no mobile */
    .carousel-control-prev {
        left: 25px;
        transform: translateY(-50%);
    }

    /* Reposiciona o botão próximo do carousel para dentro da tela no mobile */
    .carousel-control-next {
        right: 25px;
        transform: translateY(-50%);
    }

}

/* Em telas menores que 992px, ajusta levemente a posição horizontal da imagem de fundo do hero */
@media (max-width: 992px) {
    .hero-slide {
        background-position: 50% center;
    }
}

/* Em telas menores que 768px (mobile), desloca mais a imagem de fundo para melhor enquadramento */
@media (max-width: 768px) {
    .hero-slide {
        background-position: 65% center;
    }
}

@media (max-width: 850px) {
    .hero-1 {
        background-image: url("../img/banner/banner-mobile-1.png");
    }
 
    .hero-2 {
        background-image: url("../img/banner/banner-mobile-2.png");
    }
 
    .hero-3 {
        background-image: url("../img/banner/banner-mobile-3.png");
    }
 
    .hero-4 {
        background-image: url("../img/banner/banner-mobile.png");
    }
}