/* ==========================================================================
   CONFIGURAÇÕES PARA CELULAR (Telas de até 768px)
 */
@media screen and (max-width: 768px) {
    
    /* 1. Ajustes Gerais e Margens */
    main {
        overflow-x: hidden; /* Evita barra de rolagem lateral */
    }

    /* 2. Banner Principal */
    .banner-main img {
        height: 400px; /* Reduz a altura do banner no celular */
        object-fit: cover; /* Não distorce a imagem */
    }

    .title-main {
        position: absolute;
        top: 25%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%); /* Centraliza o título perfeitamente na imagem */
        width: 90%;
    }

    .title-main h1 {
        font-size: 2.8rem; /* Diminui o tamanho das fontes */
    }

    .title-main h2 {
        font-size: 1.8rem;
    }

    .title-main hr {
        width: 250px; /* Linha se adapta à tela */
    }

    /* 3. Seção de Serviços (Cards) */
    .option-box {
        flex-direction: column; /* Empilha os cards um embaixo do outro */
        align-items: center;
        margin-left: 0; /* Remove a margem fixa da esquerda */
        gap: 40px;
    }

    /* 4. Lista de Preços */
    .price-list {
        flex-direction: column; /* Empilha a imagem e os preços */
        margin-top: 50px;
    }

    .price-list img {
        width: 100%; /* Imagem ocupa a largura total */
        height: 250px;
        object-fit: cover;
    }

    .price {
        width: 90%; /* Caixa de preços ocupa quase toda a tela */
        margin-left: 0;
        padding: 30px 20px;
        align-items: center;
    }

    .list {
        width: 100%;
        justify-content: space-between; /* Alinha o nome na esquerda e preço na direita */
        margin-bottom: 10px;
    }

    /* Força todas as linhas pontilhadas/hr a terem o mesmo comportamento flexível */
    .list hr, 
    .line1 hr, 
    .line2 hr, 
    .line3 hr, 
    .line4 hr, 
    .line5 hr {
        flex-grow: 1; /* A linha preenche o espaço que sobrar entre o texto e o preço */
        width: auto;  /* Cancela as larguras fixas em pixels (ex: 395px) */
        margin: 0 10px;
    }

    /* 5. Seção dos Barbeiros (Mestres) */
    .employees {
        flex-direction: column; /* Empilha os barbeiros */
        gap: 50px;
        margin-top: 50px;
    }

    .title hr {
        width: 200px; /* Diminui a linha do título */
        margin-bottom: 40px;
    }

    /* 6. Seção Sobre Nós */
    .about-us {
        flex-direction: column; /* Empilha imagem e texto */
        margin-top: 50px;
    }

    .about-us img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    .text {
        width: 90%;
        margin-left: 0;
        padding: 30px 20px;
        text-align: center;
    }

    .about {
        width: 100%;
    }

    /* 7. Rodapé (Footer) */
    .footer-website {
        flex-direction: column; /* Empilha as informações do rodapé */
        gap: 40px;
    }
}