/* Reset básico para manter consistência entre navegadores */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* Tipografia */
body {
  font-family: "Parisienne", cursive;
  font-size: 22px;
  background-color: #a08282;
  color: #ffffff;
  padding-top: 40px; /* Espaço para o header fixo reduzido */
}

h1 {
  font-family: "Great Vibes", cursive;
}

h2, h4 {
  font-family: "Great Vibes", cursive;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Menu de navegação fixo no topo */
header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #873f2b;
  padding: 8px 20px; /* Reduzido à metade */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Garante que fique acima de outros elementos */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease; /* Transição suave para esconder/mostrar */
  height: 40px; /* Altura reduzida à metade */
}




nav ul {
  list-style: none;
  display: flex;
  gap: 15px; /* Reduzido à metade */
}

nav li {
  cursor: pointer;
  font-weight: bold;
  transition: color 0.3s ease;
  font-size: 0.9rem; /* Reduzido à metade */
}

nav li:hover {
  color: #333;
}

/* Estado do header quando oculto */
header.hidden {
  transform: translateY(-100%);
}

/* Capa - Tela Cheia */
.capa {
  height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  
  /* Usando uma imagem de fundo para ocupar toda a tela */
  background-image: url('./img/pre wedding por do sol.jpg'); /* Manter a imagem original */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: white; /* Texto branco sobre a imagem */
}

.capa::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Overlay escuro para melhorar a leitura */
}

.capa-conteudo {
    position: relative;
    z-index: 10;
    padding: 20px;
}

.logo-capa {
    width: 250px; /* Ajuste o tamanho conforme necessário */
    height: auto;
    margin-bottom: 20px;
}

.capa h1 {
    display: none;
}

.capa p {
    max-width: 600px;
    margin: 30px auto 0;
    font-size: 1.5rem;
}

/* Cronômetro */
.cronometro {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 15px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

.tempo {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.tempo span {
    font-size: 3rem;
    font-family: "stylesheet" href="style.css"
    line-height: 1;
}

.tempo small {
    font-size: 1rem;
    font-weight: normal;
    font-family: "stylesheet" href="style.css"
}

/* Galeria - Carrossel */
.galeria-secao {
    padding: 60px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.galeria-secao h2 {
    font-size: 3rem;
    margin-bottom: 40px;
    color: #FFFFFF;
}

.galeria-carrossel {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 70vh; /* Aumentar a altura para ocupar mais espaço */
    max-width: 90%;
    margin: 0 auto;
}

.galeria-carrossel .item {
    position: absolute;
    width: 60vw; /* Aumentar a largura para ocupar mais espaço */
    height: 65vh;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.galeria-carrossel .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Estilos para o carrossel */
.galeria-carrossel .item.active {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 5;
}

.galeria-carrossel .item.prev {
    opacity: 1;
    transform: translateX(-35vw) scale(0.7); /* Ajuste para ocupar menos espaço e ficar mais próximo */
    z-index: 4;
    filter: brightness(0.7);
}

.galeria-carrossel .item.next {
    opacity: 1;
    transform: translateX(35vw) scale(0.7);
    z-index: 4;
    filter: brightness(0.7);
}

.galeria-carrossel .item.prev-prev,
.galeria-carrossel .item.next-next {
    opacity: 0;
    transform: scale(0.5); /* Esconder as imagens mais distantes */
    pointer-events: none;
}




/* Setas de Navegação */
.seta-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    color: #c94d6d;
    transition: color 0.3s;
    padding: 10px;
}

.seta-btn:hover {
    color: #a33c56;
}

.seta-btn.anterior {
    left: 20px;
}

.seta-btn.proximo {
    right: 20px;
}

.seta-btn svg {
    width: 40px;
    height: 40px;
}

/* Indicadores (Dots) */
.indicadores {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #c94d6d;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #f8e8e8;
    font-size: 1rem;
    margin-top: 40px;
}



/* Estilos para a seção "Sobre Nós" */
.sobre-nos {
    height: 100vh; /* Ocupa toda a altura da tela */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    background-color: #a08282; /* Cor de fundo do body, para manter a consistência */
    color: #ffffff;
}

.sobre-conteudo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 90%;
    max-width: 900px;
    background-color: #ffffff; /* Fundo branco para o "quadro" */
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    color: #333; /* Cor do texto para contraste no fundo branco */
}



.sobre-conteudo-novo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Distribui o espaço entre os elementos */
    width: 100%; /* Ocupa a largura total do wrapper */
    height: 100%; /* Ocupa a altura total do wrapper */
    max-width: 900px;
    text-align: center;
}



.fotos-rasgadas {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 50px; /* Espaço do topo */
}



.foto-rasgada-circulo {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    /* Efeito de borda "rasgada" usando clip-path ou SVG, mas para simplificar e garantir compatibilidade, usaremos uma borda sólida e um box-shadow criativo */
    border: 8px solid #f4f4f4; /* Cor de fundo do wrapper para simular o papel rasgado */
    transform: rotate(2deg); /* Pequena rotação para o efeito "colado" */
}



.foto-rasgada-circulo:nth-child(2) {
    transform: rotate(-3deg);
}

.img-rasgada {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.texto-convite {
    font-size: 1.3rem;
    line-height: 1.6;
    max-width: 700px;
    margin-bottom: 50px; /* Espaço da parte inferior */
    color: #333; /* Cor do texto alterada para preto */
}



/* Estilos para a seção do Vídeo com Rolagem (Antiga Agradecimentos) */
.secao-video-scroll {
    /* Altura da seção deve ser grande o suficiente para o efeito de rolagem */
    /* 100vh para o vídeo em si + altura extra para a rolagem */
    height: 500vh; /* Exemplo: 5 vezes a altura da tela para um bom efeito */
    position: relative;
    background-color: #a08282; /* Cor de fundo para o espaço de rolagem */
}

.video-container {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh; /* Ocupa toda a tela */
    overflow: hidden;
}

.video-scroll {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translate(-50%, -50%);
    object-fit: cover; /* Garante que o vídeo cubra toda a área */
}

/* Estilos para a seção Agradecimentos (Removida) */
/* O conteúdo foi removido do HTML, mas mantemos o ID para o menu de navegação */

/* Media Query para telas menores */
@media (max-width: 768px) {
    .secao-video-scroll {
        height: 300vh; /* Ajuste a altura para telas menores, se necessário */
    }
    .fotos-rasgadas {
        /* Mantém o display flex e a direção padrão (row) para que as imagens fiquem lado a lado */
        gap: 20px; /* Reduz o gap para caber melhor */
        margin-top: 30px;
    }

    .foto-rasgada-circulo {
        width: 150px;
        height: 150px;
    }

    .texto-convite {
        font-size: 1.1rem;
        margin-bottom: 30px;
    }

    .citacao-amor-agradecimentos {
        font-size: 1.5rem;
    }
}

/* Estilos para a seção "Cerimônia" */
.secao-cerimonia {
    height: 100vh; /* Ocupa toda a altura da tela */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #f8e8e8; /* Cor de fundo diferente para contraste */
    color: #333;
}

.cerimonia-conteudo {
    display: flex;
    flex-direction: column; /* Altera para layout de coluna */
    width: 90%;
    height: 90%; /* Aumenta a altura para ocupar mais espaço vertical */
    max-width: 1200px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    overflow: hidden;
}

.cerimonia-texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    background-color: #ffffff;
    text-align: center;
}

.cerimonia-texto h2 {
    font-size: 3.5rem;
    margin-bottom: 40px;
    font-family: 'Great Vibes', cursive;
    color: #873f2b;
}

.cerimonia-texto p {
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

.cerimonia-mapa {
    flex: 2; /* Dá mais espaço para o mapa */
    height: 100%;
}

.cerimonia-mapa iframe {
    display: block;
}

/* Media Query para responsividade */
@media (max-width: 992px) {
    .cerimonia-conteudo {
        flex-direction: column;
        height: 95%;
        width: 95%;
    }

  .cerimonia-texto {
        padding: 30px;
    }
   .cerimonia-texto h2 {
        font-size: 3rem;
        margin-bottom: 30px;
    }    .cerimonia-mapa {
        height: 400px; /* Altura fixa para o mapa em telas menores */
    }
}

/* Estilos para a seção "Lista de presentes" */
.secao-presentes {
    height: 100vh; /* Ocupa toda a altura da tela */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    background-color: #f8e8e8; /* Cor de fundo diferente para contraste */
    color: #333;
}

.presentes-conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 1000px;
    background-color: #ffffff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.presentes-conteudo h2 {
    font-size: 3rem;
    margin-bottom: 40px;
    font-family: 'Great Vibes', cursive;
    color: #873f2b;
}

.presentes-colunas {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
    gap: 40px;
}

.coluna-link, .coluna-pix {
    flex: 1;
    padding: 20px;
    border-radius: 10px;
    background-color: #f4f4f4;
    height: 100%;
}

.coluna-link h3, .coluna-pix h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #873f2b;
    font-family: 'Great Vibes', cursive;
}

.coluna-link p, .coluna-pix p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

.botao-presente {
    display: inline-block;
    padding: 10px 20px;
    background-color: #873f2b;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
    margin-top: 10px;
}

.botao-presente:hover {
    background-color: #a33c56;
}

.chave-pix {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    background-color: #e0e0e0;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
}

.info-pix {
    font-size: 1rem;
    color: #666;
}

/* Media Query para responsividade da seção Presentes */
@media (max-width: 768px) {
    .presentes-colunas {
        flex-direction: column;
        gap: 30px;
    }

    .presentes-conteudo {
        padding: 20px;
    }

    .presentes-conteudo h2 {
        font-size: 2.5rem;
        margin-bottom: 30px;
    }

    .coluna-link, .coluna-pix {
        padding: 15px;
    }

    .coluna-link h3, .coluna-pix h3 {
        font-size: 1.5rem;
    }
}



/* Media Queries para responsividade - Consolidadas */
@media (max-width: 768px) {
    /* Header e Navegação */
    header {
        flex-direction: column;
        padding: 5px 10px;
        height: auto; /* Ajuste para acomodar o menu empilhado */
    }

    nav ul {
        margin-top: 5px;
        gap: 10px;
        flex-wrap: wrap; /* Permite que o menu quebre a linha se necessário */
        justify-content: center;
    }
    
    nav li {
        font-size: 0.8rem;
    }

    /* Capa e Cronômetro */
    .logo-capa {
        width: 200px;
    }

    .cronometro {
        gap: 10px;
        padding: 10px;
    }

    .tempo span {
        font-size: 2rem;
    }

    .tempo small {
        font-size: 0.7rem;
    }

    /* Seção Sobre Nós */
    .sobre-nos {
        height: auto; /* Permite que o conteúdo defina a altura */
        padding: 40px 20px;
    }

    .sobre-conteudo-wrapper {
        padding: 20px;
        height: auto;
    }

    .sobre-conteudo-novo {
        justify-content: flex-start;
    }

    .fotos-rasgadas {
        flex-direction: column; /* Empilha as fotos */
        gap: 15px;
        margin-top: 20px;
    }

    .foto-rasgada-circulo {
        width: 140px;
        height: 140px;
        transform: rotate(0deg) !important; /* Remove a rotação no mobile */
    }

    .foto-rasgada-circulo:nth-child(2) {
        transform: rotate(0deg) !important;
    }

    .texto-convite {
        font-size: 1.1rem;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* Galeria */
    .galeria-secao h2 {
        font-size: 2.5rem;
    }

    .galeria-carrossel {
        height: 50vh;
    }

    .galeria-carrossel .item {
        width: 80vw;
        height: 45vh;
    }

    .galeria-carrossel .item.prev {
        transform: translateX(-45vw) scale(0.7);
    }

    .galeria-carrossel .item.next {
        transform: translateX(45vw) scale(0.7);
    }

    .seta-btn {
        padding: 5px;
    }

    .seta-btn svg {
        width: 30px;
        height: 30px;
    }

    /* Seção Cerimônia */
    .secao-cerimonia {
        height: auto; /* Permite que o conteúdo defina a altura */
        padding: 40px 20px;
    }

    .cerimonia-conteudo {
        flex-direction: column; /* Empilha o texto e o mapa */
        padding: 20px;
    }

    .cerimonia-texto {
        padding-right: 0;
        margin-bottom: 20px;
        text-align: center;
    }

    .cerimonia-mapa {
        width: 100%;
        height: 250px; /* Altura ajustada para o mapa */
    }

    /* Seção Presentes */
    .secao-presentes {
        height: auto; /* Permite que o conteúdo defina a altura */
        padding: 40px 20px;
    }

    .presentes-conteudo {
        padding: 20px;
    }

    .presentes-colunas {
        flex-direction: column; /* Empilha as colunas */
        gap: 30px;
        align-items: center;
    }

    .coluna-link, .coluna-pix {
        width: 100%;
        max-width: 350px;
    }

    /* Seção Vídeo com Rolagem */
    .secao-video-scroll {
        height: 300vh; /* Altura ajustada para telas menores */
    }
}