/*
        * 1. Configurações de Fonte: Inter para texto geral, Playball para o título estilizado.
        * 2. Configurações de Fundo: Imagem da fazenda com um overlay escuro.
        */

        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Playball:wght@400&display=swap');
        
        :root {
            font-family: 'Inter', sans-serif;
        }

        /* Estilo para a fonte principal do título (simulando a fonte cursiva) */
        .title-font {
            font-family: 'Playball', cursive;
            font-size: clamp(2rem, 4vw, 3rem); 
            line-height: 1;
        }

        /* Classe para o fundo do HEADER com vídeo em loop */
        .header-background-container {
            position: relative;
            overflow: hidden;
            height: 650px;
            margin-left: -16rem; /* Compensa o margin-left do wrapper */
            width: calc(100% + 16rem); /* Garante largura total */
        }

        /* Vídeo de fundo */
        .header-background-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            min-height: 100%;
        }

        /* Define as margens específicas para o contêiner do título, garantindo o posicionamento exato */
        .header-title-box-fixed-width {
            margin-left: 33.27%;
            margin-right: 33.27%;
            width: auto; /* Ocupa o espaço restante entre as margens */
        }

        /* Overlay escuro aplicado sobre o vídeo */
        .header-background-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0);
            z-index: 1;
        }

        /* Garante que o conteúdo principal fique acima do overlay */
        .main-content-wrapper {
            position: relative;
            z-index: 2;
            margin-left: 16rem; /* Compensar a largura da sidebar (w-64) no desktop */
            min-height: 100vh;
            background-color: #1a1a1a; /* Fundo principal da página (quase preto) */
        }
        
        /* Sidebar e Conteúdo Principal para Mobile/Tablet */
        @media (max-width: 1024px) {
            .sidebar {
                width: 100%;
                height: auto;
                position: relative; /* Remove o 'fixed' para evitar sobreposição total */
                box-shadow: none;
            }
            .main-content-wrapper {
                margin-left: 0 !important; /* Remove o margin no mobile */
            }
            .header-background-container {
                margin-left: 0 !important; /* Remove o margin no mobile */
                width: 100% !important; /* Largura total no mobile */
                height: 300px !important; /* Altura menor no mobile */
            }
        }

        /* Estilos específicos para pág de Documentos (Termos/Privacidade) */
        .doc-section {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
        }

        .doc-section-title {
            color: #ffffff; /* Títulos em branco para destaque */
            font-weight: 700;
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }
        
        /* Estilos para conteúdo dinâmico dos termos */
        .termos-content {
            line-height: 1.6;
            color: #d1d5db;
        }
        
        .termos-content h1 {
            color: #ffffff;
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 1rem;
            border-bottom: 2px solid #84cc16;
            padding-bottom: 0.5rem;
        }
        
        .termos-content h2 {
            color: #84cc16;
            font-size: 1.5rem;
            font-weight: bold;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }
        
        .termos-content h3 {
            color: #ffffff;
            font-size: 1.25rem;
            font-weight: bold;
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
        }
        
        .termos-content p {
            margin-bottom: 1rem;
            text-align: justify;
        }
        
        .termos-content strong {
            color: #84cc16;
            font-weight: bold;
        }
        
        .termos-content ul, .termos-content ol {
            margin-left: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .termos-content li {
            margin-bottom: 0.5rem;
        }
        
        
        /* Estilo do botão de carrinho (grande e escuro) */
        .cart-button-style {
            background-color: #374151; /* bg-gray-700 */
            color: white;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            font-weight: 600;
            text-transform: uppercase;
            transition: background-color 0.2s;
        }
        .cart-button-style:hover {
            background-color: #65A30D; /* hover:bg-lime-600 */
        }
        
        /* Modal Styles */
        .modal-panel {
            transform: scale(0.96);
            opacity: 0;
            transition: transform 200ms ease, opacity 200ms ease;
        }
        .modal-panel.modal-open {
            transform: scale(1);
            opacity: 1;
        }
        /* iframe size (para carregar o form de login/cadastro) */
        #login-modal-iframe {
            width: 420px;
            height: 560px;
            max-width: 90vw;
            max-height: 90vh;
            background: transparent;
        }
        @media (max-width: 480px) {
            #login-modal-iframe {
                width: 360px;
                height: 520px;
            }
        }