@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

      :root {
        --primary-color: #00674f; /* Verde Escuro */
        --primary-colorTL: #014b92; /* Azul Marinho (Linha do Tempo) */
        --primary-color-dark: #004f3d;
        --secondary-color: #014b92;
        --text-dark: #11161f;
        --text-light: #6b7280;
        --extra-light: #e6f3ff;
        --max-width: 1200px;
        --timeline-arrow-size: 8px; /* Novo: Tamanho da seta */
        --timeline-dot-bg: #f4f2f2; /* Novo: Cor do background para o ponto (cor do body) */
      }
      
      ::selection {
  background-color: var(--primary-color); 
  color: white; 
}

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

      a {
        text-decoration: none;
      }

      body {
        font-family: "Poppins", sans-serif;
        width: 100%;
        background: #f2f2f2; /* Uso da variável de cor */
        color: var(--text-light);
      }

      h1, h2, h3, h4 {
        font-weight: 600;
        color: var(--text-dark);
      }

      /* --- Clearfix Universal --- */
      .timeline-items-wrapper:after,
      .timeline-item:after, .timeline-item:before,
      header:after, header:before {
        content: '';
        display: table;
        clear: both;
      }

      .container {
        max-width: var(--max-width);
        padding: 0 2rem;
        padding-top: 1rem;
        margin-bottom: 0.8rem;
        margin: 0 auto;
      }

      /* --- NAV --- */
      nav {
        width: 100%;
        position: sticky;
        top: 0;
        left: 0;
        background-color: var(--primary-color);
        z-index: 99;
      }

      .nav__content {
        max-width: var(--max-width);
        margin: auto;
        padding: 1rem 0.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      nav .logo a {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 1rem;
        font-weight: 600;
        color: white;
        transition: 0.3s;
      }

      nav .logo a img {
        vertical-align: middle;
        display: block;
      }

      .logo__text {
        display: block;
        line-height: 1.2;
      }

      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
      }

      nav .checkbox {
        display: none;
      }

      nav .checkbox i {
        font-size: 2rem;
        color: white;
        cursor: pointer;
      }

      ul {
        display: flex;
        align-items: center;
        gap: 1rem;
        list-style: none;
        transition: left 0.3s;
      }

      ul li a {
        padding: 0.5rem 1rem;
        border: 2px solid transparent;
        font-weight: 600;
        color: white;
        transition: 0.3s;
      }

      ul li a:hover {
        border-bottom-color: white;
        color: white;
      }

      /* --- NAV Mobile --- */
      @media (max-width: 749px) {
        nav .checkbox {
          display: block;
        }

        ul {
          position: absolute;
          width: 100%;
          height: calc(100vh - 85px);
          left: -100%;
          top: 85px;
          background-color: var(--primary-color);
          flex-direction: column;
          justify-content: center;
          gap: 3rem;
        }

        nav #check:checked ~ ul {
          left: 0;
        }

        ul li a {
          font-size: 1.25rem;
        }
      }


.slideshow-container {
            width: 30rem; /* 300px */
            height: 20rem; /* 200px */
            position: relative;
            margin: auto;
            margin-top: 0.9rem;
            border-radius: 0.8rem;
            overflow: hidden; 
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            outline: none;
        }
        
        .mySlides { display: none; height: 100%; }
        img { vertical-align: middle; width: 100%; height: 100%; object-fit: cover; }

        /* Texto da Legenda */
        .text {
            color: #f2f2f2;
            font-size: 1.3rem; 
            padding: 0.7rem 1rem;
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
            text-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.9);
            z-index: 2;
        }
        
         .numbertext {
            color: #f2f2f2;
            font-size: 1rem;
            padding: 0.3rem 0.5rem;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.5);
            border-bottom-right-radius: 0.5rem;
            z-index: 2;
        }

        /* Setas de Navegação (Prev e Next) - COMPACTAS (2.5rem) */
        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            
            width: 2.5rem; 
            height: 2.5rem; 
            font-size: 1.4rem; 
            
            background-color: #fff; 
            color: #000; 
            
            font-weight: bold;
            transition: 0.3s ease;
            border: none;
            z-index: 10;
            box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.3); 
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            left: 0.5rem; /* Posição ajustada */
        }

        .next { right: 0.5rem; left: auto; } /* Posição ajustada */

        /* FOCO/HOVER: ALTO CONTRASTE */
        .prev:hover, .next:hover, 
        .prev:focus, .next:focus { 
            background-color: #007bff;
            color: #fff;
            outline: none;
            outline: 0.2rem solid #fff; 
            outline-offset: 0.2rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
            transform: translateY(-50%) scale(1.1); 
        }
        
        /* Dots/Indicadores container - COMPACTO */
        .dot-container {
            padding: 0.4rem;
            position: absolute;
            bottom: 0.5rem; 
            left: 50%;
            transform: translateX(-50%);
            z-index: 10; 
            background-color: rgba(0, 0, 0, 0.6); 
            border-radius: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Dots/Indicadores - COMPACTOS (0.7rem) */
        .dot {
            height: 0.7rem; 
            width: 0.7rem; 
            margin: 0 0.2rem; 
            background-color: #eee;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.3s ease, border-color 0.3s;
            cursor: pointer;
            border: 0.1rem solid transparent;
            tabindex: 0; 
        }

        .dot.active { background-color: #007bff; }

        /* Foco dos Dots */
        .dot:focus {
            outline: none;
            border-color: #007bff; 
            background-color: #fff; 
            outline: 0.2rem solid #007bff; 
            outline-offset: 0.2rem;
        }

        .fade { animation-name: fade; animation-duration: 1.5s; }
        @keyframes fade { from {opacity: .4} to {opacity: 1} }
        
@media screen and (max-width: 600px) {
    .slideshow-container {
        /*
         * Usamos 90vw (90% da largura da viewport) para garantir que
         * haja uma margem em ambos os lados e evite rolagem horizontal.
         * 'max-width: 100%' é uma alternativa segura.
         */
        width: 90vw;
        max-width: 100%; /* Garante que nunca exceda 100% da largura do contêiner pai */

        /* Reduzir a altura para manter a proporção no mobile */
        height: 60vw; /* Usar uma proporção similar a 3:2 (90vw de largura e 60vw de altura) */
        margin-top: 0.5rem; /* Opcional: reduzir margem superior */
    }

    /* Opcional: Reduzir o tamanho da fonte da legenda no mobile */
    .text {
        font-size: 1rem;
        padding: 0.5rem 0.8rem;
    }

    /* Opcional: Reduzir o tamanho das setas de navegação */
     .prev, .next {
        width: 2rem;
        height: 2rem;
        font-size: 1.2rem;
        left: 0.3rem; /* Ajustar a posição para ficar mais discreto */
    }
    .next {
        right: 0.3rem;
    }

    /* Opcional: Reduzir o tamanho dos indicadores (dots) */
    .dot-container {
        padding: 0.2rem;
        bottom: 0.3rem;
    }
    .dot {
        height: 0.5rem;
        width: 0.5rem;
        margin: 0 0.15rem;
    }
}