/* Cores base */
        :root {
            --color-primary: #0073B7; /* Azul Petrobras */
            --color-secondary: #FFD700; /* Amarelo (para destaques) */
            --color-dark: #1A1A1A; /* Fundo escuro */
            --color-light: #F0F2F5; /* Fundo claro */
            --color-text: #333333; /* Texto principal */
            --color-white: #FFFFFF;
            --color-gray: #6C757D;
            --color-blue: #121730;
            --color-gold-2: #dbc170;
            --color-gold: #bba86e;
            --color-green: #28A745; /* Para energia verde/sustentabilidade */
        }

        /* Reset e Base (Minimalista para crítico) */
        *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
        html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: Montserrat, sans-serif !important; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
        body { margin: 0; line-height: inherit; background-color: var(--color-light); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
        img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; max-width: 100%; height: auto; }
        a { color: inherit; text-decoration: inherit; }
        h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; }
        button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; cursor: pointer; background-color: transparent; background-image: none; }
        
        /* Layout Básico */
        .container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
        @media (min-width: 640px) { .container { max-width: 640px; } }
        @media (min-width: 768px) { .container { max-width: 768px; } }
        @media (min-width: 1024px) { .container { max-width: 1024px; } 
            .ban-mobile {display: none;}
            .ban-deskt {display: block;}

        }
        @media (min-width: 1280px) { .container { max-width: 1280px; }
            .ban-mobile {display: none;}
            .ban-deskt {display: block;}
          

        
         }
         .w-40 {
            width: 40%;
         }

         .fl-align {
            display: flex;
            justify-content: center;            
         }

         .margem {
            margin-bottom: 2em;
         }

         .pt-0 { padding-top: 0 !important; }
         .mt-0 { margin-top: 0 !important; }
         .mb-0 { margin-bottom: 0 !important; }
         .pb-0 { padding-bottom: 0 !important; }

        /* Estilos do Header */
        header { position: sticky; top: 0; z-index: 40; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); background-color: rgba(255,255,255,0.9); backdrop-filter: blur(12px); height: 6rem; display: flex; align-items: center; justify-content: space-between; padding-left: 1.5rem; padding-right: 1.5rem; }
        header img { height: 4.3rem; width: auto; }
        header nav { display: none; }
        header .quote-button { display: none; }
        #mobile-menu-button { display: block; margin-left: 1rem; padding: 0.5rem; color: var(--color-dark); font-size: 1.5rem; }
        #mobile-overlay { position: fixed; inset: 0; background-color: var(--color-dark); z-index: 50; transform: translateX(-100%); transition: transform 0.3s ease-in-out; }
        #mobile-overlay.is-open { transform: translateX(0); }
        #mobile-overlay .p-6 { padding: 1.5rem; }
        #mobile-overlay .flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; }
        #mobile-overlay .h-10 { height: 4.5rem; }
        #close-menu-button { color: var(--color-white); font-size: 2rem; }
        #mobile-nav { display: flex; flex-direction: column; color: var(--color-white); }
        #mobile-nav a { padding: 1rem; font-size: 1.125rem; border-radius: 0;  border-bottom: 1px solid #8f8f8f; text-align: center; width: 100%; font-weight: 500;}
        #mobile-nav a:hover { background-color: rgba(255,255,255,0.1); } /* Corrigido para ser mais escuro no dark background */

        /* Estilos do Carrossel Hero (apenas o essencial) */
        .hero-section { position: relative; height: 90vh; min-height: 700px; width: 100%; overflow: hidden; color: var(--color-white); background-color: var(--color-dark); }
        #hero-slider { height: 100%; display: flex; transition: transform 0.7s ease-in-out; }
        .hero-slide { width: 100%; height: 100%; flex-shrink: 0; position: relative; }
        .hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
        .hero-slide-content-wrapper { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1.5rem; }
        .hero-slide-content { animation: fadeIn 1.5s 0.5s ease-out forwards; opacity: 0; }
        @keyframes fadeIn { to { opacity: 1; } }
        .hero-slide h1 { font-family: 'Playfair Display', serif; font-size: 3rem; line-height: 1; font-weight: 700; text-shadow: 0 4px 6px rgba(0,0,0,0.3); }
        .hero-slide p { margin-top: 1.5rem; max-width: 42rem; font-size: 1.125rem; line-height: 1.75rem; color: #e5e7eb; }
        #prev-slide, #next-slide { position: absolute; top: 50%; transform: translateY(-50%); color: var(--color-white); background-color: rgba(0,0,0,0.3); padding: 0.75rem; border-radius: 9999px; transition: background-color 0.15s ease-in-out; }
        #prev-slide:hover, #next-slide:hover { background-color: rgba(0,0,0,0.5); }
        #prev-slide { left: 1rem; }
        #next-slide { right: 1rem; }
        #pagination-dots { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.75rem; }
        #pagination-dots button { width: 0.75rem; height: 0.75rem; border-radius: 9999px; background-color: rgba(255,255,255,0.5); transition: background-color 0.15s ease-in-out; }
        #pagination-dots button.bg-white { background-color: var(--color-white); }
        #pagination-dots button:hover { background-color: var(--color-white); }
                
            .bg-mar {
                background-color: #121730; 
                background-image: 
                    linear-gradient(rgba(18, 23, 48, 0.9), rgba(18, 23, 48, 0.9)),
                    url('../images/fundo_mar.webp'); 
                background-image: 
                    linear-gradient(rgba(18, 23, 48, 0.9), rgb(18 23 48 / 69%)), url(../images/fundo_mar.avif), url(../images/fundo_mar.webp)
                background-size: cover;
                background-position: center;
            }
            .bg-cota {
                background-color: #121730; 
                background-image: 
                    linear-gradient(rgba(18, 23, 48, 0.9), rgba(18, 23, 48, 0.9)),
                    url('https://agathamarine.com/wp-content/uploads/2023/10/AGATHA-MARINE-01-10.jpg'); 
                background-image: 
                    linear-gradient(rgba(18, 23, 48, 0.9), rgb(18 23 48 / 69%)), url(https://agathamarine.com/wp-content/uploads/2023/10/AGATHA-MARINE-01-10.jpg), url(https://agathamarine.com/wp-content/uploads/2023/10/AGATHA-MARINE-01-10.jpg)
                background-size: cover;
                background-position: center;
            }


            /*
             * CSS para o Botão Flutuante do WhatsApp
             * (Igual ao do print)
             */
            .botao-whatsapp {
              /* --- Posicionamento Fixo --- */
              position: fixed;
              bottom: 24px; /* 1.5rem */
              right: 24px;  /* 1.5rem */
              z-index: 50;  /* Garante que fique na frente */

              /* --- Aparência (Círculo Verde) --- */
              background-color: #25D366; /* Cor oficial do WhatsApp */
              color: #FFFFFF;            /* Cor do ícone (branco) */
              width: 60px;               /* Largura */
              height: 60px;              /* Altura */
              border-radius: 50%;        /* Deixa 100% redondo */

              /* --- Sombra (Efeito Flutuante) --- */
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

              /* --- Centralização do Ícone --- */
              display: flex;
              align-items: center;
              justify-content: center;

              /* --- Ícone --- */
              font-size: 32px; /* Tamanho do ícone */
              
              /* --- Animação (Bônus) --- */
              transition: all 0.3s ease-in-out;
              transform: scale(1);
            }

            /* Efeito ao passar o mouse */
            .botao-whatsapp:hover {
              background-color: #1EAE56; /* Cor levemente mais escura */
              transform: scale(1.1);     /* Leve zoom */
              box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
            }

            .ds-none {
                display: none !important;
            }

                .service-image-wrapper {
                     position: relative;
                     overflow: hidden;
                     border-radius: 0.5rem;
                }

                .service-overlay {
                     position: absolute;
                     inset: 0;
                     background-color: rgba(0, 0, 0, 0.6);
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     opacity: 0;
                     transition: opacity 0.3s ease-in-out;
                }

                .service-icon-circle {
                     background-color: #bba86e;
                     height: 4rem;
                     width: 4rem;
                     border-radius: 9999px;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                }

                .service-image-wrapper img {
                     transition: transform 0.3s ease-in-out;
                }

                .service-image-wrapper:hover img {
                     transform: scale(1.05);
                }

                .service-image-wrapper:hover .service-overlay {
                     opacity: 1;
                }


        /* Media Queries para Desktop (Crítico) */
        @media (min-width: 768px) {
            header { padding-left: 1.5rem; padding-right: 1.5rem; } /* Consistência */
            header nav { display: flex; flex-grow: 1; justify-content: center; }
            header nav a { padding: 0 1.25rem; color: var(--color-text); font-weight: 700; transition: color 0.15s ease-in-out; }
            header nav a:hover { color: var(--color-primary); }
            header .quote-button { display: inline-block; background-color: var(--color-primary); color: var(--color-white); font-weight: 700; padding: 0.75rem 1.5rem; border-radius: 9999px; transition: all 0.3s ease-in-out; }
            header .quote-button:hover { background-color: #0056b3; transform: scale(1.05); }
            #mobile-menu-button { display: none; }
            .hero-slide h1 { font-size: 6rem; } /* Ajuste de tamanho para desktop */
            .hero-slide p { font-size: 1.25rem; }
            #prev-slide { left: 2rem; }
            #next-slide { right: 2rem; }
            .ban-mobile {display: block;}
            .ban-deskt {display: none;}
        }

        .carousel-slide {
            flex-shrink: 0;

        }


        #principles-carousel-wrapper + div { 
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #principles-slider.grabbing {
            cursor: grabbing;
        }
        



        .slider-container {
            position: relative;
        }

        /*
         * Estilização dos controles (Setas Prev/Next) 
         * MUDANÇA: Oculto no mobile (display: none)
         * e visível apenas no desktop (display: block @ 768px)
        */
        .tns-controls button {
            display: none; /* Oculto por padrão (mobile) */
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 20;
            background-color: rgba(255, 255, 255, 0.7); /* bg-white/70 */
            border-radius: 9999px; /* rounded-full */
            padding: 0.75rem; /* p-3 */
            color: #111827; /* text-gray-900 */
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        /* Media query para mostrar os botões no desktop */
        @media (min-width: 768px) {
            .tns-controls button {
                display: block; /* Mostra no desktop */
            }
        }

        .tns-controls button:hover {
            background-color: white; /* hover:bg-white */
        }
        .tns-controls button[data-controls="prev"] {
            left: 1rem; /* left-4 */
        }
        .tns-controls button[data-controls="next"] {
            right: 1rem; /* right-4 */
        }
        .tns-controls button svg {
             width: 1.5rem; /* w-6 */
             height: 1.5rem; /* h-6 */
        }

        /*
         * Estilização da paginação (Pontos) 
         * MUDANÇA: Oculta permanentemente com display: none
        */
        .tns-nav {
            display: none; /* OCULTA OS PONTOS */
            position: absolute;
            bottom: 1.5rem; /* bottom-6 */
            left: 50%;
            transform: translateX(-50%);
            z-index: 20;
            gap: 0.75rem; /* gap-3 */
        }
        .tns-nav button {
            width: 0.75rem; /* w-3 */
            height: 0.75rem; /* h-3 */
            border-radius: 9999px; /* rounded-full */
            background-color: rgba(255, 255, 255, 0.4); /* bg-white/40 */
            border: none;
            padding: 0;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .tns-nav button:hover {
            background-color: rgba(255, 255, 255, 0.7); /* hover:bg-white/70 */
        }
        .tns-nav button.tns-nav-active {
            background-color: #ffffff; /* bg-white */
            width: 2.5rem; /* w-10 */
        }