/* index.html */

        body { font-family: 'Inter', sans-serif; background-color: #f8f8f8; color: #333; }
        html { scroll-behavior: smooth; }

        .btn-contato {
            display: flex; align-items: center; justify-content: center;
            padding: 1rem 1.5rem; border-radius: 9999px; font-weight: 700;
            transition: background-color 0.3s ease, transform 0.1s ease;
        }
        .whatsapp { background-color: #25D366; color: white; box-shadow: 0 4px 15px #f4f4f4; }
        .whatsapp:hover { background-color: #128C7E; transform: translateY(-2px); }
        .btn-contato i { margin-right: 0.75rem; font-size: 1.25rem; }

        .mobile-menu-toggle { display: flex; flex-direction: column; justify-content: space-around; width: 30px; height: 25px; cursor: pointer; padding: 0; background: none; border: none; }
        .bar { width: 100%; height: 3px; background-color: #333; border-radius: 5px; transition: all 0.3s ease-in-out; }
        .mobile-menu-toggle.open .bar-1 { transform: rotate(-45deg) translate(-5px, 6px); }
        .mobile-menu-toggle.open .bar-2 { opacity: 0; }
        .mobile-menu-toggle.open .bar-3 { transform: rotate(45deg) translate(-5px, -6px); }

        .banner-slider { position: relative; overflow: hidden; width: 100%; margin-top: 80px; height: 50vh; min-height: 350px; }
        .slides { display: flex; width: 300%; height: 100%; transition: transform 0.5s ease-in-out; }
        .slides img { width: 33.33%; height: 100%; object-fit: cover; flex-shrink: 0; object-position: left top; }
        
        .arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.3); color: #333; border: none; padding: 1rem; cursor: pointer; z-index: 10; transition: all 0.3s; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
        .arrow:hover { background: rgba(255, 255, 255, 0.9); color: #e91e63; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .left { left: 10px; } .right { right: 10px; }
        .dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
        .dot { width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; cursor: pointer; transition: all 0.3s; border: 1px solid rgba(0,0,0,0.1); }
        .dot.active { background-color: #e91e63; transform: scale(1.2); border-color: white; }
        
        @media (min-width: 768px) { 
            .banner-slider { height: 550px; } 
            .slides img { object-position: center top; } 
            .arrow { width: 50px; height: 50px; }
            .left { left: 20px; } .right { right: 20px; }
        }
        
        .resultado-estilo { min-height: 100px; padding: 1.5rem; border-radius: 0.5rem; margin-top: 1rem; background-color: #fff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); border-left: 5px solid #e91e63; }
        .loading-spinner { border: 4px solid #f3f3f3; border-top: 4px solid #e91e63; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 10px auto; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        
        .mapa-wrapper { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; border-radius: 0.75rem; }
        .mapa-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

        .btn-primary { background-color: #ff4e50; color: white; transition: background-color 0.3s; }
        .btn-primary:hover { background-color: #e53935; }

/* prod1.html */
/* Estilo base para garantir a visibilidade do ícone e alinhamento */
        .btn-reservar i {
            margin-right: 0.5rem;
        }
        /* Garantindo que o link se comporte como um botão */
        .btn-reservar {
            text-decoration: none;
        }
 
        /* Configuração de Fonte e Estilo Base */
        body { font-family: 'Inter', sans-serif; background-color: #f8f8f8; color: #333; }

        /* Estilo Customizado para o Toggle Mobile */
        .mobile-menu-toggle { display: flex; flex-direction: column; justify-content: space-around; width: 30px; height: 25px; cursor: pointer; padding: 0; background: none; border: none; }
        .bar { width: 100%; height: 3px; background-color: #333; border-radius: 5px; transition: all 0.3s ease-in-out; }
        .mobile-menu-toggle.open .bar-1 { transform: rotate(-45deg) translate(-5px, 6px); }
        .mobile-menu-toggle.open .bar-2 { opacity: 0; }
        .mobile-menu-toggle.open .bar-3 { transform: rotate(45deg) translate(-5px, -6px); }

        /* ===== BANNER SLIDER RESPONSIVO (CORRIGIDO) ===== */
        .banner-slider { position: relative; overflow: hidden; width: 100%; margin-top: 80px; height: 50vh; min-height: 350px; }
        .slides { display: flex; width: 300%; height: 100%; transition: transform 0.5s ease-in-out; }
        
        /* AQUI ESTÁ A CORREÇÃO DO BANNER NO MOBILE */
        .slides img { 
            width: 33.33%; 
            height: 100%; 
            object-fit: cover; 
            flex-shrink: 0; 
            
            /* MOBILE: Alinha à ESQUERDA para mostrar a modelo */
            object-position: left top; 
        }
        /* Setas de navegação */
        .arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.3); color: #333; border: none; padding: 1rem; cursor: pointer; z-index: 10; transition: all 0.3s; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
        .arrow:hover { background: rgba(255, 255, 255, 0.9); color: #e91e63; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .left { left: 10px; } .right { right: 10px; }
        .dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
        .dot { width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; cursor: pointer; transition: all 0.3s; border: 1px solid rgba(0,0,0,0.1); }
        .dot.active { background-color: #e91e63; transform: scale(1.2); border-color: white; }
        
        /* MEDIA QUERY: AJUSTES PARA PC (Telas maiores) */
        @media (min-width: 768px) { 
            .banner-slider { height: 550px; } 
            
            .slides img { 
                /* PC: Alinha ao CENTRO (fica melhor em telas largas) */
                object-position: center top; 
            } 
            
            /* Setas maiores no PC */
            .arrow { width: 50px; height: 50px; }
            .left { left: 20px; } .right { right: 20px; }
        }
        
        /* Estilos da Consultoria */
        .resultado-estilo { min-height: 100px; padding: 1.5rem; border-radius: 0.5rem; margin-top: 1rem; background-color: #fff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); border-left: 5px solid #e91e63; }
        .loading-spinner { border: 4px solid #f3f3f3; border-top: 4px solid #ff4e50; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 10px auto; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        
        /* Contato */
        .mapa-wrapper { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; border-radius: 0.75rem; }
        .mapa-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

        /* Cores */
        .btn-primary { background-color: #ff4e50; color: white; transition: background-color 0.3s; }
        .btn-primary:hover { background-color: #e53935; }
        /*.menu-link:hover, .submenu-mobile a:hover { color: #ff4e50; }*/

        /* Variáveis de Cores e Estilos Globais para manter a estética */
        :root {
            --rosa: #FF4081; /* Exemplo de cor rosa vibrante */
            --cinza-fundo: #f4f4f4;
            --cinza-texto: #555;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #fff; /* Fundo branco para a página */
        }

        /* Estilo para a Seção de Contato/Detalhes */
        .prod {
            padding: 4rem 1rem;
            /*max-width: 1200px;*/
            margin: 0 auto;
        }

        /* O container que antes tentava ser grid, agora é apenas um wrapper */
        .prod-container {
            /* Removendo o grid aqui, que será aplicado em .store-info */
            padding: 2rem;
            background-color: #ffffff;
            border-radius: 1.5rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        .section h1 span {
            color: var(--rosa);
        }


        .info-bloco h4 {
            font-weight: 700;
            /*color: var(--rosa);*/
            margin-bottom: 0.5rem;
            /*display: flex;*/
            align-items: center;
        }
        .info-bloco h4 i {
            margin-right: 0.5rem;
        }

        /* Estilo do botão de Contato/Reserva */
        .btn-prod {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem 1.5rem;
            border-radius: 9999px; /* rounded-full */
            font-weight: 700;
           /* text-transform: uppercase;*/
            transition: background-color 0.3s ease, transform 0.1s ease;
        }
        
        .whatsapp {
            background-color: #25D366; /* Cor do WhatsApp */
            color: white;
            box-shadow: 0 4px 15px #f4f4f4;
        }
        
        .whatsapp:hover {
            background-color: #128C7E;
            transform: translateY(-2px);
        }

        .btn-prod i {
            margin-right: 0.75rem;
            font-size: 1.25rem;
        }

/* produtos.html */

 body { font-family: 'Inter', sans-serif; background-color: #f8f8f8; color: #333; }
 
 /* Botão Reservar */
 .btn-reservar {
     display: inline-flex; align-items: center; justify-content: center;
     padding: 0.75rem 1.5rem;
     background-color: #25D366; 
     color: white; font-weight: 700;
     border-radius: 0.5rem;
     transition: background-color 0.3s;
     width: 100%; margin-top: 1rem;
 }
 .btn-reservar:hover { background-color: #128C7E; }
 /* Grid de Produtos */
 .produto-grid {
     display: grid; gap: 2rem; padding: 1rem;
     grid-template-columns: 1fr;
 }
 @media (min-width: 640px) { .produto-grid { grid-template-columns: repeat(2, 1fr); } }
 @media (min-width: 1024px) { .produto-grid { grid-template-columns: repeat(3, 1fr); } }
 .produto-card {
     background-color: white; border-radius: 0.75rem;
     box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
     transition: transform 0.3s; overflow: hidden;
     display: flex; flex-direction: column;
 }
 .produto-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
 
 .produto-card img {
     width: 100%; height: 320px; 
     object-fit: cover; 
     object-position: center center; 
 }
 
 .produto-info { padding: 1.5rem; text-align: center; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
 .produto-info h3 { font-size: 1.25rem; font-weight: 700; color: #333; margin-bottom: 0.5rem; }

 .mobile-menu-toggle { display: flex; flex-direction: column; justify-content: space-around; width: 30px; height: 25px; cursor: pointer; padding: 0; background: none; border: none; }
 .bar { width: 100%; height: 3px; background-color: #333; border-radius: 5px; transition: all 0.3s ease-in-out; }
 .mobile-menu-toggle.open .bar-1 { transform: rotate(-45deg) translate(-5px, 6px); }
 .mobile-menu-toggle.open .bar-2 { opacity: 0; }
 .mobile-menu-toggle.open .bar-3 { transform: rotate(45deg) translate(-5px, -6px); }