/* --- NOVIDADE: Estilo do Contador --- */
   .contador-box {
       background: #fff;
       padding: 20px;
       border-radius: 10px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
       text-align: center;
       margin-bottom: 30px;
       border: 1px solid #ffe4e1;
   }

   .contador-titulo {
       font-size: 0.9em;
       text-transform: uppercase;
       letter-spacing: 2px;
       color: #888;
       margin-bottom: 10px;
   }

   #contador {
       font-size: 1.5em;
       font-weight: bold;
       color: #d1607a;
       font-family: 'Montserrat', sans-serif;
   }

   /* --- Configurações Gerais --- */
   body {
       font-family: 'Monserrat', sans-serif;
       font-weight: 300;
       margin: 0;
       padding: 0;
       background-color: #fff0f5;
       color: #333;
       line-height: 1.7;
       scroll-behavior: smooth;
   }

   .container {
       max-width: 800px;
       margin: 0 auto;
       padding: 20px;
   }

   h1,
   h2 {
       font-family: 'Poppins', serif;
       font-weight: 700;
       color: #d1607a;
       text-align: center;
       margin-bottom: 10px;
   }

   h2 {
       font-size: 2.2em;
   }

   h2 .fa-solid {
       margin-right: 15px;
       font-size: 0.8em;
   }

   /* --- Menu de Navegação Fixo --- */
   nav {
       background: #d1607a;
       padding: 15px;
       text-align: center;
       position: sticky;
       top: 0;
       z-index: 100;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
       /* NOVIDADE: Transição suave para o efeito de "sumir" */
       transition: transform 0.4s ease-out;
   }

   /* NOVIDADE: Classe que o JavaScript vai adicionar para "sumir" */
   nav.nav-hidden {
       transform: translateY(-100%);
   }

   nav a {
       font-family: 'Montserrat', sans-serif;
       color: white;
       text-decoration: none;
       margin: 0 15px;
       font-weight: 400;
       padding: 5px 0;
       /* Espaço para o sublinhado */
       transition: opacity 0.3s;
       border-bottom: 2px solid transparent;
       /* Sublinhado transparente */
   }

   nav a:hover {
       opacity: 0.8;
   }

   /* NOVIDADE: Estilo do botão "ativo" que o JavaScript vai controlar */
   nav a.active {
       font-weight: 700;
       /* Fica em negrito */
       border-bottom: 2px solid #fff;
       /* Mostra o sublinhado */
   }

   nav a.active:hover {
       opacity: 1;
       /* Não fica opaco no hover */
   }

   /* --- Seção 1: Capa (Home) --- */
   .hero {
       background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('./fotos/capa2.png');
       background-size: cover;
       background-position: center;
       height: 90vh;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       color: white;
       text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   }

   .hero h1 {
       color: white;
       font-size: 3.5em;
       animation: fadeIn 1s ease-out;
   }

   .hero p {
       font-size: 1.5em;
       animation: fadeIn 1s ease-out 0.5s;
       animation-fill-mode: backwards;
   }

   /* --- Seções de Conteúdo --- */
   section {
       padding: 60px 20px;
       border-bottom: 1px solid #f0e4e6;
       animation: fadeIn 1.2s ease-out;
   }

   /* NOVIDADE: Precisamos dar um 'padding-top' maior
           para o menu não cobrir o título quando clicamos */
   section[id] {
       padding-top: 80px;
       margin-top: -80px;
       /* Anula o espaço extra visualmente */
   }

   .hero[id] {
       /* Ajuste para a primeira seção (capa) */
       padding-top: 0;
       margin-top: 0;
   }

   section:last-of-type {
       border-bottom: none;
   }

   /* --- Galeria de Fotos (Seção 2) --- */
   .gallery {
       display: flex;
       justify-content: space-around;
       flex-wrap: wrap;
       margin-top: 30px;
   }

   .gallery img {
       width: 200px;
       height: 200px;
       object-fit: cover;
       border-radius: 8px;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
       margin: 10px;
       transition: all 0.3s ease;
   }

   .gallery img:hover {
       transform: scale(1.05);
       box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
   }

   /* --- Lista (Seção 4) --- */
   ul {
       list-style-type: none;
       padding-left: 0;
   }

   ul li {
       font-size: 1.1em;
       padding: 10px 0;
       border-bottom: 1px dashed #f0e4e6;
   }

   ul li .fa-solid {
       color: #d1607a;
       margin-right: 15px;
   }

   /* --- Carta (Seção 5) --- */
   .carta {
       font-style: italic;
       background-color: #fff;
       padding: 30px;
       border-radius: 8px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
       border-left: 5px solid #d1607a;
   }

   .assinatura {
       text-align: right;
       font-style: normal;
       font-weight: bold;
       color: #d1607a;
       margin-top: 20px;
   }

   /* --- Rodapé --- */
   footer {
       text-align: center;
       padding: 30px 0;
       font-size: 1.1em;
       font-weight: bold;
       color: #d1607a;
   }

   /* --- Animações --- */
   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(20px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   /* --- Responsivo para Celular --- */
   @media (max-width: 768px) {
       .hero h1 {
           font-size: 2.5em;
       }

       .hero p {
           font-size: 1.1em;
           text-align: center;
           padding: 0 10px;
       }

       .gallery img {
           width: 100%;
           height: auto;
       }

       nav {
           padding: 10px;
       }

       nav a {
           margin: 0 5px;
           font-size: 0.8em;
       }

       /* Menos margem no celular */
       h2 {
           font-size: 1.8em;
       }
   }