@font-face {
    font-family: 'FuturaMaxi';
    src: url('futura-maxi-cg-bold.otf') format('opentype'); /* Caminho correto */
    font-weight: bold;
    font-style: normal;
}

/* Aplicando a fonte globalmente */
body {
    margin: 0;
    font-family: 'FuturaMaxi', Arial, sans-serif; /* Fonte principal */
    background: url('bg-section-2.jpg') center center; /* Imagem de fundo */
    background-size: cover; /* Faz a imagem cobrir toda a tela */
    background-attachment: fixed; /* Mantém o fundo fixo ao rolar a página */
    width: 100%;
    height: 100vh; /* Garante que o fundo cubra toda a altura da janela */
    color: #fff; /* Cor do texto */
    overflow-x: hidden; /* Remove possíveis barras horizontais */
    box-sizing: border-box; /* Inclui padding e bordas no tamanho total */
}
.section-1 {
    position: relative;
    width: 100%;
    height: 100vh; /* Ocupa 100% da altura da tela */
    display: flex; /* Centraliza o conteúdo */
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* Inclui o padding no cálculo do tamanho */
    padding: 0 30px; /* Espaçamento lateral */
}

/* Estilização do container */
.container {
    background-color: #121212; /* Fundo preto */
    border-radius: 20px; /* Bordas arredondadas */
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1200px; /* Largura máxima do container */
    width: 100%; /* Largura total com espaçamento */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Sombra suave */
    text-align: center; /* Centraliza texto e conteúdo */
    display: flex; /* Flexbox para alinhar verticalmente */
    flex-direction: column; /* Coloca o texto e o vídeo em uma coluna */
    justify-content: center; /* Alinha verticalmente no centro */
    align-items: center; /* Alinha horizontalmente no centro */
}

.title {
    font-size: 45px;
    font-weight: bold;
    margin-bottom: -10px;
}

.subtitle {
    font-size: 35px;
    color: #00d8d6;
}

.line {
    width: 50%;
    height: 5px;
    background: linear-gradient(to right, #ff0050, #00d8d6);
    margin: 0 auto 30px;
}

.video-container {
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 700px;
    border-radius: 20px;
    overflow: hidden;
    border: 5px solid #ff0050; /* Contorno rosa */
}

.video-container .video {
    display: block;
    width: 100%;
    height: 400px;
    border: none; /* Remove borda padrão do iframe */
    border-radius: 20px; /* Mantém o contorno arredondado */
}

/* Estilo geral da section-2 */
.section-2 {
    position: relative;
    width: 100%;
    padding: 50px 30px; /* Espaçamento interno */
    color: #fff; /* Cor do texto */
    box-sizing: border-box;
    padding: 0 30px; /* Espaçamento lateral */
}

/* Estilo do container principal */
.container-2 {
    background-color: #121212; /* Fundo preto */
    border-radius: 20px; /* Bordas arredondadas */
    max-width: 1200px; /* Largura máxima do container */
    width: 100%; /* Largura total com espaçamento */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Sombra suave */
    text-align: center; /* Centraliza texto e conteúdo */
    margin: 0 auto; /* Centraliza o container */
    background: #121212;
    padding-top: 25px;
}

/* Estilo do título */
.title-2 {
    font-size: 45px;
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px;
}

/* Layout de colunas */
.row {
    display: flex;
    flex-wrap: wrap; /* Permite ajuste para telas menores */
    justify-content: space-between; /* Espaçamento entre colunas */
    align-items: center; /* Alinha verticalmente */
}

.col-6 {
    flex: 0 0 50%; /* Cada coluna ocupa 50% */
    max-width: 50%;
    box-sizing: border-box;
    padding: 15px; /* Espaçamento interno das colunas */
}

/* Estilo da imagem */
.image {
    display: flex; /* Define layout flexível */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    margin-bottom: 20px; /* Espaço entre a imagem e os textos */
}

.image img {
    width: 70%;
    border-radius: 10px;
    display: block;
    border: 5px solid #ff0050; /* Contorno rosa semelhante ao do vídeo */
}

/* Estilo do texto */
.text-content {
    list-style: none; /* Remove os marcadores da lista */
    padding: 0;
    margin: 0;
    font-size: 25px;
    line-height: 1.8;
    text-align: left; /* Alinha o texto à direita */
}

.text-content li {
    display: flex; /* Alinha o texto e a imagem lado a lado */
    align-items: center; /* Centraliza verticalmente o texto e o ícone */
    margin-bottom: 15px; /* Espaço entre os itens */
}

.text-content .icon {
    width: 60px; /* Define a largura do ícone */
    height: 60px; /* Define a altura do ícone */
    margin-right: 10px; /* Espaço entre o ícone e o texto */
}

.highlight-red {
    color: #ff0050; /* Vermelho para palavras destacadas */
}

.highlight-blue {
    color: #00d8d6; /* Azul para palavras destacadas */
}



/* Media Query para dispositivos móveis */
@media screen and (max-width: 768px) {
    .row {
        flex-direction: column; /* Alinha os elementos em uma coluna */
    }

    .col-6 {
        flex: 0 0 100%; /* Cada coluna ocupa 100% do espaço */
        max-width: 100%;
    }

    .image {
        display: flex; /* Define layout flexível */
        justify-content: center; /* Centraliza horizontalmente */
        align-items: center; /* Centraliza verticalmente */
        margin-bottom: 20px; /* Adiciona espaço entre a imagem e o texto */
        order: -1; /* Move a imagem para cima */
    }

    .image img {
        max-width: 80%; /* Ajusta a largura da imagem para telas menores */
    }
}

/* Estilo geral da section-3 */
.section-3 {
    position: relative;
    width: 100%;
    padding: 50px 30px; /* Espaçamento interno */
    color: #fff; /* Cor do texto */
    box-sizing: border-box;
}

/* Estilo do container-3 */
.container-3 {
    background-color: #121212; /* Fundo preto */
    border-radius: 20px; /* Bordas arredondadas */
    max-width: 1200px; /* Largura máxima do container */
    width: 100%; /* Largura total com espaçamento */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Sombra suave */
    text-align: center; /* Centraliza texto e conteúdo */
    margin: 0 auto; /* Centraliza o container */
    padding-top: 25px;
}

/* Estilo do título-3 */
.title-3 {
    font-size: 40px;
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 20px;
    text-align: center;
}

/* Subtítulo menor */
.subtitle-3 {
    font-size: 28px;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Texto destacado */
.highlight-text {
    font-size: 50px;
    font-weight: bold;
    line-height: 1.3;
    margin-top: 20px;
}

.aspas-1 {
    max-width: 20%; /* Define a largura máxima */
    float: left; /* Alinha a imagem à direita */
}

.aspas-2 {
    max-width: 20%; /* Define a largura máxima */
    float: right; /* Alinha a imagem à direita */
}

/* Estilo geral da section-4 */
.section-4 {
    position: relative;
    width: 100%;
    padding: 50px 30px; /* Espaçamento interno */
    color: #fff; /* Cor do texto */
    box-sizing: border-box;
}

/* Estilo do container-3 */
.container-4 {
    background-color: #121212; /* Fundo preto */
    border-radius: 20px; /* Bordas arredondadas */
    max-width: 1200px; /* Largura máxima do container */
    width: 100%; /* Largura total com espaçamento */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Sombra suave */
    text-align: center; /* Centraliza texto e conteúdo */
    margin: 0 auto; /* Centraliza o container */
    padding-top: 25px;
}

/* Estilo do título-3 */
.title-4 {
    font-size: 50px;
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.container-4 h2 {
    font-size: 40px;
    margin: 30px;
}

/* Estilo do carrossel para telas maiores */
.carousel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

.carousel-wrapper {
    overflow: hidden;
    flex: 1;
    margin: 0 20px;
}

.carousel-images {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: calc(100% * 8); /* Ajuste com base no número de imagens */
}

.carousel-images img {
    width: 100%;
    max-width: 300px;
    border-radius: 10px;
    margin: 0 10px;
    border: 5px solid #ff0050;
}

button.prev,
button.next {
    background-color: transparent;
    border: none;
    color: #00d8d6;
    font-size: 22px;
    cursor: pointer;
    font-weight: bold;
}

button.prev:hover,
button.next:hover {
    color: #ff0050;
    font-weight: bold;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    padding-bottom: 30px;
}

.carousel-dots .dot {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background-color: #888;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.carousel-dots .dot.active {
    background-color: #ff0050;
}

/* Imagens empilhadas para dispositivos móveis */
.carousel-mobile {
    display: none; /* Escondido por padrão */
    padding: 10px 0;
    text-align: center;
}

.carousel-mobile img {
    width: 100%;
    max-width: 300px; /* Largura máxima para manter o layout adequado */
    margin-bottom: 15px;
    border-radius: 10px;
    border: 3px solid #ff0050;
}

/* Estilo do footer */
.footer {
    background-color: #0d0d0d; /* Fundo escuro */
    width: 100%; /* Cobre 100% da largura */
    color: #fff; /* Cor do texto */
    padding: 40px 0; /* Espaçamento interno */
    box-sizing: border-box;
}

.footer h2 {
    font-size: 45px;
}

/* Container interno do footer */
.container-footer {
    max-width: 1200px; /* Largura máxima */
    margin: 0 auto; /* Centraliza o container */
    text-align: center;
}

/* Título do footer */
.footer-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
}

/* Grade de valores */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colunas */
    gap: 20px; /* Espaço entre os itens */
    justify-content: center;
    align-items: center;
}

/* Estilo dos itens individuais */
.footer-item {
    background-color: #121212; /* Fundo dos cards */
    padding: 20px;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}

/* Texto dos itens */
.footer-item p {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.6;
}

/* Preços */
.price {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
}

/* Preço antigo */
.old-price {
    color: #00d8d6; /* Azul */
    text-decoration: line-through; /* Linha cortada */
    margin-right: 10px;
}

/* "X" em destaque */
.highlight-red {
    color: #ff0050; /* Vermelho */
    font-size: 28px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Muda para uma coluna em telas menores */
    }
}

/* Promoção abaixo do grid */
.promo-section {
    padding: 30px 0;
    text-align: center;
    box-sizing: border-box;
}

.promo-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 20px;
    border: 15px solid #ff0050; /* Borda rosa */
    background-color: #1c1c1c;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}

.promo-container .promo-price {
    margin: -20px 0px -20px 0px;
}

/* Título da promoção */
.promo-title {
    font-size: 85px;
    font-weight: bold;
    margin-bottom: 10px;
}

.promo-old-price {
    text-decoration: line-through; /* Adiciona linha riscada */
    text-decoration-color: #ff0000; /* Define a cor vermelha para o risco */
    color: #00d8d6; /* Azul */
    font-size: 80px;
}

.promo-price {
    display: flex; /* Alinha os elementos em linha */
    align-items: center; /* Alinha verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    gap: 5px; /* Espaço entre os elementos */
    font-size: 55px; /* Tamanho base */
    font-weight: bold;
}

/* Estilo para "12x" */
.small-text {
    font-size: 18px; /* Texto menor para "12x" */
    vertical-align: text-top; /* Alinha com a parte superior do texto maior */
}

/* Estilo para "17,90" */
.big-price {
    font-size: 100px; /* Texto grande para o preço */
    font-weight: bold;
}

.highlight-blue {
    color: #00d8d6; /* Azul */
}

.highlight-red {
    color: #ff0050; /* Vermelho */
}

.highlight-green {
    color: #00ff00; /* Vermelho */
}

/* Informações da promoção */
.promo-info {
    font-size: 29px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Timer */
.promo-timer {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espaço entre os blocos */
    margin-bottom: 20px;
}

.timer-box {
    background-color: #fff;
    color: #000;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    width: 60px;
}

.timer-box .time {
    font-size: 24px;
    font-weight: bold;
    display: block;
}

.timer-box .label {
    font-size: 12px;
    font-weight: normal;
    text-transform: uppercase;
}

/* Botão */
.promo-button {
    background-color: #00ff00; /* Verde */
    color: #000;
    font-size: 30px;
    font-weight: bold;
    padding: 15px 30px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    padding-bottom: 20px;
}

.promo-button:hover {
    background-color: #00cc00; /* Verde escuro ao passar o mouse */
}

.preco17 {
    font-size: 100px;
}

.por_preco {
    font-size: 50px;
}

/* Animação de pulsação */
@keyframes pulse {
    0% {
        transform: scale(1); /* Tamanho normal */
        opacity: 1; /* Totalmente visível */
    }
    50% {
        transform: scale(1.1); /* Leve aumento */
        opacity: 0.8; /* Leve transparência */
    }
    100% {
        transform: scale(1); /* Retorna ao tamanho normal */
        opacity: 1; /* Totalmente visível */
    }
}

/* Estilo pulsante para "POR", "12x", "17,90" */
.promo-price span {
    display: inline-block; /* Necessário para animação */
    animation: pulse 1.5s infinite; /* Animação infinita */
}

/* Diferentes delays para cada parte */
.promo-price .highlight-blue {
    animation-delay: 0.2s; /* Atraso para sincronizar */
}

.promo-price .highlight-red {
    animation-delay: 0.4s; /* Atraso para sincronizar */
}

/* Animação de pulsação para o botão */
.promo-button {
    animation: pulse 1.5s infinite; /* Animação infinita */
    transition: background-color 0.3s;
}

.promo-button:hover {
    background-color: #00cc00; /* Cor diferente no hover */
    transform: scale(1.1); /* Pequeno aumento ao passar o mouse */
}

/* Estilo para o rodapé final */
.footer-bottom {
    background-color: #000; /* Fundo preto */
    color: #fff; /* Cor do texto */
    text-align: center; /* Centraliza o conteúdo */
    width: 100%; /* Largura total */
    box-sizing: border-box;
    padding: 30px;
}

.footer-bottom-content {
    max-width: 1200px; /* Largura máxima */
    margin: 0 auto; /* Centraliza o conteúdo */
}

.footer-bottom-content p {
    font-size: 18px; /* Tamanho do texto */
    font-weight: bold; /* Negrito */
    margin-bottom: 15px; /* Espaço abaixo do texto */
}

.footer-icons {
    display: flex; /* Layout flexível */
    justify-content: center; /* Centraliza os ícones horizontalmente */
    align-items: center; /* Alinha os ícones verticalmente */
    gap: 20px; /* Espaçamento entre as imagens */
}

.footer-icons img {
    height: 90px; /* Define uma altura uniforme */
    object-fit: contain; /* Mantém a proporção das imagens */
}

/* Estilo do container-3 */
.container-bottom-footer {
    max-width: 1200px; /* Largura máxima do container */
    width: 100%; /* Largura total com espaçamento */
    text-align: center; /* Centraliza texto e conteúdo */
    margin: 0 auto; /* Centraliza o container */
}

.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ocupa toda a largura */
    max-height: 400px;
    max-width: 300px; /* Define a largura máxima do contêiner */
    margin: 0 auto; /* Centraliza o contêiner horizontalmente */
    aspect-ratio: 9 / 16; /* Mantém a proporção 9:16 */
    border: 5px solid #ff0050; /* Bordas do contêiner */
    border-radius: 20px; /* Bordas arredondadas */
    overflow: hidden; /* Evita que o vídeo ultrapasse as bordas */
    background-color: #121212; /* Fundo para contraste */
    margin-bottom: 30px;
}

.video-container video {
    width: 100%; /* O vídeo ocupa a largura total do contêiner */
    height: auto; /* Ajusta a altura automaticamente */
    object-fit: cover; /* Faz com que o vídeo preencha todo o contêiner sem distorcer */
}

@font-face {
    font-family: 'FuturaMaxi';
    src: url('futura-maxi-cg-bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

/* Ajustes para dispositivos móveis */
@media screen and (max-width: 768px) {

    body {
        background-attachment: scroll; /* Remove o fixo para facilitar rolagem */
    }

    .section-1,
    .section-2,
    .section-3,
    .section-4 {
        padding: 20px 15px; /* Menor espaçamento para dispositivos móveis */
    }

    .container,
    .container-2,
    .container-3,
    .container-4 {
        max-width: 90%;
        padding: 15px;
    }

    .title,
    .title-2,
    .title-3,
    .title-4 {
        font-size: 28px; /* Reduz tamanho dos títulos */
        margin-bottom: 10px;
    }

    .subtitle,
    .subtitle-3 {
        font-size: 20px; /* Reduz tamanho dos subtítulos */
        color: #00d8d6;
    }

    .line {
        width: 80%;
        height: 3px;
        margin-bottom: 20px;
    }

    .video-container .video {
        height: 100%; /* Ajusta automaticamente para o tamanho da tela */
    }

    .row {
        flex-direction: column; /* Alinha elementos verticalmente */
        align-items: center;
    }

    .col-6 {
        width: 100%;
        padding: 10px 0;
    }

    .image img,
    .carousel-images img {
        width: 100%;
        max-width: 250px;
        height: auto;
        margin-bottom: 10px;
        border: 3px solid #ff0050;
        border-radius: 10px;
    }

    .text-content {
        font-size: 18px; /* Reduz tamanho da fonte do texto */
        line-height: 1.6;
        padding: 0 10px;
    }

    .highlight-text {
        font-size: 30px; /* Ajusta o destaque para telas menores */
        margin: 10px 0;
    }

    .carousel {
        display: none; /* Esconde o carrossel para telas menores */
    }

    .carousel-mobile {
        display: block; /* Mostra as imagens empilhadas */
    }

    .carousel-dots {
        display: none; /* Esconde os pontos de navegação em dispositivos móveis */
    }

    .container-4 {
        padding: 20px 15px; /* Ajuste de padding para telas menores */
    }

    .title-4 {
        font-size: 28px; /* Reduz o tamanho do título */
    }
    
    h1, .title {
        font-size: 40px;
    }

    .title4 {
        font-size: 45px;
    }

    .line {
        width: 80%;
        height: 3px;
        margin-bottom: 20px;
    }

    button.prev,
    button.next {
        font-size: 18px;
    }

    .promo-container {
        padding: 15px;
        border-width: 8px;
    }

    .promo-title {
        font-size: 40px;
    }

    .title-4, .highlight-red {
        font-size: 50px;
    }

    .highlight-text, .highlight-red {
        font-size: 40px;
    }

    .promo-old-price,
    .promo-price {
        font-size: 30px;
    }

    .big-price {
        font-size: 70px;
    }

    .promo-price {
        font-size: 22px;
        gap: 3px;
    }

    .footer {
        padding: 20px;
    }

    .footer-title,
    .footer h2 {
        font-size: 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr; /* Muda para uma coluna em telas menores */
        gap: 15px; /* Reduz o espaço entre os itens */
    }

    .footer-item {
        padding: 15px;
    }

    .price img {
        max-width: 100%; /* Ocupa 100% da largura disponível em dispositivos móveis */
        height: auto; /* Ajusta a altura mantendo a proporção */
    }

    .footer-icons img {
        height: 60px; /* Ajusta a altura dos ícones */
    }

    .footer-bottom {
        padding: 15px;
    }

    .footer-bottom-content p {
        font-size: 16px;
    }

    .aspas-1,
    .aspas-2 {
        max-width: 15%;
    }
}