@import url(./base.css);
:root{
    --color-neutral-0: #0e0c0c;
    --color-neutral-10: #171717;
    --color-neutral-30: #a8a29e;
    --color-neutral-40: #f5f5f5;
    --color-khaki:#f0e68c;
    --color-brown:#8B4513;
    --color-dark1:#000000;
    --color-dark2:#080808;
    --color-dark3:#101010;
    --color-white:#f5f5f5;
    --color-yellow:#ffff66;
    --color-conr:#FFF8DC;
    --color-gray:#b2b2b2;
    --color-cream:#ece0d1;
    --color-cream2:#dbc1ac;
    --color-coffe:#967259;
    --color-coffe2:#634832;
    --color-coffe3:	#38220f;
}
header {
    flex: 0 0 auto;
    justify-content: space-between;
    align-items: center;
    background-color: var(--cor-principal);
    padding: 0.7rem 6rem;
    display: flex;
    }
header img{
    width: 100px;
}
.logo{
    margin: 5px;
    float: left;
}
.img_ponto{
    float: left;
}

.flex-container{
    background-size: cover;
    background-repeat: no-repeat;
    width: 80%;
    margin:auto;
    
}
   .produto{
    background-color: rgb(187, 132, 69);
    border: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px ;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: center;
    display: flex;
    justify-content: space-around;
   }
   .fotos{
       margin-top: 1%;
       margin-left: 40px;
       margin-right:40px ;  
       position: relative;
   }
   .caixa-principal{
    position: absolute; 
    bottom: 60%;
    left: 70%;
    transform: translateX(-50%); 
    background-color: rgba(0, 0, 0, 0.7); 
    color: white;
    padding: 15px; 
    border-radius: 5px; 
    text-align:center; 
    z-index:20; 
    bottom:20%; 
    left: 50%;
   } 
   .link-box{
        display: inline-block;
        padding: 15px 25px;
        background-color: var(--color-cream2); /* Cor de fundo */
        border: 2px solid #38220f; /* Borda */
        border-radius: 8px; /* Bordas arredondadas */
        text-align: center;
        transition: transform 0.2s, box-shadow 0.2s; /* Animações */
      }
      
      .link-box a {
        text-decoration: none; /* Remove o sublinhado */
        color: #4b3621; /* Cor do texto */
        font-weight: bold;
        font-size: 16px;
      }
      
      .link-box:hover {
        transform: scale(1.05); /* Aumenta levemente no hover */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra */
      }
      .container img{
        max-width:1000px;
        max-height:500px;
        width: auto;
        float:right;
    }

    @media (max-width:430px) {
        .caixa-principal h1{
            font-size: 11px;
        } 
        .caixa-principal h4{
            font-size: 10px;
            float: right;
        }
        .caixa-principal{
            padding: 0;
            Top: -40%;
            min-width: 10%;
            top: -15px; /* Move a caixa mais para baixo */
            
            
        }
        .link-box{
            margin: 0 auto; 
            display: block; 
            width: fit-content; 
            padding: 8px 10px;
        }
       
        .container img{
            width: auto;
            height: 300px;
            margin: 10%;
        }
        .col-md-7{
            margin: auto;
            margin-left: auto;
        }
        .flex-container{
            width: 100%;
            right: 100%;
            z-index: 100%;
        }
        .content{
            right: 100%;
        }
    }
    @media (max-width: 390px) {
        .link-box {
            margin: 0 auto;
            display: block;
            width: fit-content;
            padding: 8px 10px;
        }
        
        .container img {
            width: 100px;
            height: 300px;
        }
    
        .col-md-7 {
            margin: auto;
            margin-left: auto;
        }
    
        .flex-container {
            width: 100%;
            right: 100%;
           
        }
    
        .content {
            right: 100%;
        }
    
        .caixa-principal {
            width: 90%; /* Usa uma largura relativa para ocupar a tela */
            padding: px; /* Aumenta o espaçamento interno */
            top: -20px; /* Move a caixa mais para baixo */
            
        }
    
        .caixa-principal h1 {
            font-size: 10px; /* Tamanho do título */
        }
    
        .caixa-principal h4 {
            font-size: 9px; /* Tamanho do subtítulo */
        }
    
        br {
            display: none;
        }
    }

        
        @media (max-width: 1280px) {
            .link-box{
                margin: 0 auto; 
                display: block; 
                width: fit-content; 
                padding: 8px 10px;
            }
           
            .container img{
                width: auto;
                height: 250px;
                margin: 10%;
            }
            .col-md-7{
                margin: auto;
                margin-left: auto;
            }
            .flex-container{
                width: 100%;
                right: 100%;
                margin-top: 10px;
            }
            .content{
                right: 100%;
         
            }
           .caixa-principal{
            flex-direction: column; /* Empilha os elementos verticalmente */
            text-align: center; /* Centraliza os textos dentro da div */
            padding: 10px; /* Reduz o espaçamento interno */

           }
           h1 {
            font-size: 24px; 
            text-align: center; 
            margin: 10px 0; 
          }
        
          h3 {
            font-size: 16px; 
            line-height: 1.4; 
            text-align: center; 
            margin: 0 15px; 
          }
        
          br {
            display: none; 
          }
        }