/* ==========================================
   CONFIGURAÇÕES GERAIS (RESET)
   ========================================== */

*{
    margin:0;           /* Remove margens padrão */
    padding:0;          /* Remove espaçamentos */
    box-sizing:border-box; /* Mantém o tamanho correto dos elementos */
}


body{
    font-family: Arial, sans-serif; /* Fonte padrão */
    background: linear-gradient(135deg, #080808 0%, #141414 50%, #080808 100%);
    color:white;    /* Cor do texto */
    background-attachment: fixed;   
}

/*SIDEBAR MOBILE*/
#toggle-menu {
    display: none;
}

.sidebar {
    position: fixed;
    top: 0;
    right: -260px;
    width: 220px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.92);
    border-left: 2px solid #f39c12;
    z-index: 400;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 40px;
    transition: right 0.35s ease;
}

#toggle-menu:checked ~ .sidebar {
    right: 0;
}

.btn-fechar {
    position: absolute;
    top: 16px;
    right: 16px;
    color: white;
    font-size: 1.4rem;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-fechar:hover {
    color: #f39c12;
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    width: 100%;
}

.sidebar-nav ul li a {
    display: block;
    text-decoration: none;
    color: white;
    font-size: 1rem;
    padding: 11px 20px;
    border-radius: 10px;
    transition: 0.3s;
}

.sidebar-nav ul li a:hover,
.sidebar-nav ul li a.ativo {
    background-color: #f39c12;
    color: black;
}

.hamburguer {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
    user-select: none;
}

.hamburguer:hover {
    color: #f39c12;
}

.menu{
    display: none;
}

/* ==========================================
   CABEÇALHO (HEADER)   
   ========================================== */

.header{
    width: 100%;
    padding: 20px 15px;
    background-color: black;
    border-bottom: 2px solid #f39c12;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.container-logo{
    display: flex;
    align-items: center;
    gap: 15px;
}

.container-logo img{
    width: 70px;
}

.container-logo h1{
    font-family: 'Rye', serif;
    font-size: 1.5rem;
    color: white;
}

.menu ul{
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu li{
    text-align: center;
}

.menu li a{
    text-decoration: none;
    color: white;
    padding: 12px 18px;
    border-radius: 10px;
    transition: 0.3s;
    display: block;
    font-size: 1rem;
}

.menu li a:hover{
    background-color: #f39c12;
    color: black;
}

.ativo{
    background-color: #f39c12;
    color: black !important;
}

/* ==========================================
   CONTAINER E TÍTULOS
   ========================================== */

.container{
    max-width:1100px;              /* Largura máxima */
    margin:0 auto;                 /* Centraliza */
    padding:60px 20px;
    color: white; 
}

h2{
    margin-bottom:25px;
    border-left:4px solid #f39c12; /* Barra lateral */
    padding-left:10px;
    color: white !important;   
    font-family: Rye, serif;    
}

/* ==========================================
   CARDS
   ========================================== */

.card, .contact-card{
    background:rgba(0,0,0,0.75)!important;           /* Fundo do card */
    border:1px solid #333;         /* Borda */
    border-radius: 20px;            /* Cantos arredondados */
    padding:25px;
    margin-bottom:25px;
    transition:.3s;
    color: white;
}

.card:hover, .contact-card:hover{
    transform:translateY(-5px);    /* Efeito subir */
    border-color:#f39c12;          /* Borda laranja */
}

/*grazi: adicionei pra mostrar que é clicavel*/
.card{
    cursor: pointer;
}

/* ==========================================
   SERVIÇOS
   ========================================== */

.service{
    display:flex;
    justify-content:space-between; /* Nome esquerda / preço direita */
    align-items:center;
    color: rgba(255, 255, 255, 0.903);
}

.service-info p{
    margin:5px 0;
    color:#aaa;                    /* Texto secundário */
}

.price{
    font-size:20px;
    font-weight:bold;
    color:#f39c12;
    white-space:nowrap;            /* Não quebra linha */
}

/* ==========================================
   GALERIA
   ========================================== */

.gallery{
    display:none;                  /* Escondida */
    margin-top:15px;
}

.gallery.active{
    display:flex;                  /* Mostra */
    flex-wrap:wrap;                /* Quebra linha */
}

/*grazi: mudei border-radius*/
.gallery img{
    width:100%;
    max-width:250px;
    margin:5px;
    border-radius:20px;
}

/* ==========================================
   TÍTULO ADICIONAIS
   ========================================== */
 
.titulo-adicionais{
    text-align:center;
    font-family: Rye, serif; 
    font-size:32px;
    margin:40px auto;
    width:fit-content;
}

/* ==========================================
   CONTATO E INFORMAÇÕES
   ========================================== */

.info-box{
    background:#111;
    border:1px solid #2d2d2d;
    padding:15px;
    margin-bottom:12px;
    border-radius:8px;
    color:#ccc;
    overflow-wrap: break-word; /*grazi: adicionei, tava quebrando no mobile*/
}

.hour-box{
    display:flex;
    justify-content:space-between; /* Dia esquerda / horário direita */
    background:#111;
    border:1px solid #2d2d2d;
    padding:12px;
    margin-bottom:10px;
    border-radius:8px;
    color: #ccc;
}

.hour-box strong{
    color:#f39c12;                 /* Destaque */
}

/*grazi: adicionei pra manter dia e horario em lados opostos sem quebrar no mobile*/
.hour-box span,
.hour-box strong{
    font-size: 0.8rem;
}

/* ==========================================
   CANAIS DE CONTATO
   ========================================== */

.channel-box{
    display:flex;
    flex-direction: column;
    gap:20px;
    background:#111;
    border:1px solid #2d2d2d;
    padding:20px;
    border-radius:12px;
    margin-bottom:20px;
    color: white;
}

.icon-box{
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#1b1b1b;
    border-radius:10px;
    font-size:24px;
}

.channel-button, .map-button{
    display:inline-block;
    margin-top:10px;
    background:#f39c12;
    color:black;
    padding:10px 18px;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;
    
}


/* ==========================================
   WHATSAPP
   ========================================== */

.whatsapp-section{
    margin-top:40px;
    background:#07142b;
    border-radius:20px;
    padding:50px 20px;
    text-align:center;
    border:1px solid #1f335c;
}

.whatsapp-icon{
    width:80px;
    height:80px;
    margin:auto;
    margin-bottom:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: #25d366;
    border-radius:10px;
    font-size:36px;
}

.whatsapp-section h2{
    font-size:32px;
    margin-bottom:15px;
    font-family: arial;
}

.whatsapp-section p{
    margin-bottom:10px;
    color:#ccc;
}

.whatsapp-section a{
    display:inline-block;
    background:#25D366;
    color:black;
    text-decoration:none;
    padding:15px 30px;
    border-radius:10px;
    font-weight:bold;
}

/* ==========================================
   MAPA
   ========================================== */

.map-section{
    background:#161616;
    border:1px solid #333;
    border-radius:20px;
    padding:30px;
    margin-top:30px;
    text-align:center;
}

.map-section iframe{
    width:100%;
    height:400px;
    border:none;
    border-radius:15px;
}

/* ==========================================
   BLOCO DE CONTATO (HEADER)
   ========================================== */

.contact-header{
    display:flex;
    align-items:center;
    border-radius:10px;
    overflow:hidden;
    border:1px solid #222;
    margin-bottom:30px;

}

.contact-title{
    background:#1a1a1a;
    padding:20px 30px;
    font-weight:bold;
    letter-spacing:1px;
    border-right:1px solid #222;
}

.contact-text{
    flex:1;
    padding:20px;
    color: rgba(245, 245, 245, 0.894); 
    background:#111;
    font-weight: 500;
}

/* ==========================================
   RODAPÉ (FOOTER)
   ========================================== */

footer{
    width: 100%;
    margin-top: 60px;
    padding: 35px 20px;
    background-color: rgba(0, 0, 0, 0.127);
    display: flex;
    flex-direction: column;
    text-align: center;
    color: white;
}
/* ==========================================
   RESPONSIVIDADE
   ========================================== */

@media(min-width:768px){    

   .header{ 
        flex-direction: row;
        justify-content: space-around;
    }

    .menu ul{   
        flex-direction: row;
    }

    .menu li a{
        padding: 8px 12px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .container-logo h1{    
        font-size: 2rem;
    }

    .service{
        flex-direction:column;
        align-items:flex-start;
    }

    .price{
        margin-top:10px;
    }

    .channel-box{
        flex-direction:row;
    }
    
    .hamburguer { display: none; }

    .sidebar    { display: none !important; }

    .menu{
        display: block;
    }
}