/* =========================
    SEÇÃO CHEF
    ========================= */
    .chef-section {
        display: flex;               /* Ativa o Flexbox */
        justify-content: center;     /* Centraliza horizontalmente */
        
        padding: 10px 0;             /* Espaço interno (topo/baixo | laterais) */
        
        background: #f5f3ef;         /* Cor de fundo da seção */
    }

    /* Container principal mantendo proporção */
    .chef-content {
        display: flex;
        width: 1400px;      /* largura total */
        height: 600px;      /* altura igual para os dois lados */
        gap: 40px;          /* espaço entre imagem e texto */
    }
    /* =========================
    LADO ESQUERDO - IMAGEM CHEF
    ========================= */
    .chef-image-container {
        flex: 1;               /* Ocupa 1 parte proporcional do espaço */
        border-radius: 25px;   /* Bordas arredondadas */
        overflow: hidden;      /* Esconde partes que ultrapassarem o limite */
    }

    /* =========================
    IMAGEM DO CHEF
    ========================= */
    .chef-image {
        width: 100%;          /* Ocupa toda a largura do container */
        height: 100%;         /* Ocupa toda a altura do container */
        
        object-fit: cover;    /* Preenche sem distorcer */
        
        display: block;       /* Remove espaço extra abaixo da imagem */
    }

    /* =========================
    LADO DIREITO - BIO DO CHEF
    ========================= */
    .chef-bio-container {
        flex: 1;                    /* Ocupa metade do espaço no flex */
        
        background-color: #e8e6e0;  /* Cor de fundo suave */
        border-radius: 25px;        /* Bordas arredondadas */

        padding: 120px 100px;       /* Espaçamento interno (vertical | horizontal) */

        display: flex;              
        flex-direction: column;     /* Organiza conteúdo em coluna */
        justify-content: center;    /* Centraliza verticalmente */
        
        text-align: center;         /* Centraliza texto */
    }

    /* =========================
    TÍTULO DA SEÇÃO CHEF
    ========================= */
    .chef-title {
        font-size: 48px;                /* Tamanho grande e impactante */
        letter-spacing: 6px;            /* Espaçamento entre letras */
        margin-bottom: 50px;            /* Espaço abaixo do título */
        color: #2b2b2b;                 /* Cor escura elegante */
        font-family: 'Trajan Pro', serif; /* Fonte principal */
    }

    /* =========================
    TEXTO DA BIO DO CHEF
    ========================= */
    .chef-bio-text {
        font-size: 22px;      /* Tamanho confortável para leitura */
        line-height: 1.6;     /* Espaçamento entre linhas */
        color: #7a6a58;       /* Tom marrom suave */
    }

/* =========================
   SEÇÃO ABOUT (HERO)
========================= */
    #about {
        background: 
            linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
            url('fotos/FACHADA/DSC01225.jpg');

        background-size: cover;        /* Faz a imagem cobrir toda a área */
        background-position: center;   /* Centraliza a imagem */
        background-repeat: no-repeat;  /* Evita repetição */

        min-height: 100vh;             /* Ocupa a altura total da tela */

        display: flex;
        justify-content: center;       /* Centraliza horizontalmente */
        align-items: center;           /* Centraliza verticalmente */

        color: #fff;                   /* Texto branco */
    }

    .section-reserva {
    /* Define a imagem de fundo e ajusta seu comportamento */
    background-image: url('./fotos/FACHADA/DSC01225.jpg'); /* 1. Substitua pelo caminho correto da sua imagem */
    background-repeat: no-repeat;                 /* 2. Impede a repetição da imagem, mostrando-a apenas uma vez */
    background-position: center;                  /* 3. Centraliza a imagem dentro da seção */
    background-size: cover;                       /* 4. Faz a imagem cobrir toda a área da seção, mantendo a proporção */
    background-color: #fcfaf5;                    /* 5. Cor de fundo de fallback caso a imagem não carregue */
    padding: 60px 20px;       /* Espaçamento interno para garantir que o texto não cole nas bordas */
    text-align: center;      /* Centraliza todo o texto e elementos internos */
    color: #fcfcfc;             /* Define a cor do texto para branco para contraste com a imagem escura */
    /* Outros estilos como max-width, margin, etc. podem ser mantidos */
    }

/* Estilo para o parágrafo "Quem somos" */
    .section-reserva p:first-of-type {
    /* Pode ser necessário ajustar a cor de fundo ou do texto para garantir a legibilidade sobre a imagem */
    background-color: rgba(0, 0, 0, 0.5); /* Exemplo: fundo semi-transparente para o "botão" */
    color: #fff;
    /* ... outros estilos ... */
    }

/* Estilo para os títulos */
    .section-reserva h1, section h2 {
    color: #fff; /* Garante que os títulos sejam brancos sobre a imagem */
    /* ... outros estilos ... */
    }

/* Você pode adicionar um overlay escuro sobre a imagem inteira usando um pseudo-elemento ou div extra
   para melhorar a legibilidade do texto, se a imagem for muito clara */


        /* =========================
        GALERIA DE VÍDEOS
        ========================= */
        .video-gallery {
            display: flex;              /* Ativa Flexbox */
            flex-wrap: wrap;            /* Permite quebrar linha em telas menores */
            
            gap: 15px;                  /* Espaço entre os vídeos */
            
            justify-content: center;    /* Centraliza os vídeos horizontalmente */
            
            padding: 20px;              /* Espaço interno da seção */
            
            background-color: #E6E2D8;  /* Cor de fundo da galeria */
        }
    /* =========================
    ITEM INDIVIDUAL DO VÍDEO
    ========================= */
    .video-item {
        flex: 1;                       /* Cresce proporcionalmente no flex */
        
        min-width: 300px;              /* Largura mínima */
        max-width: 300px;              /* Largura máxima fixa */

        border-radius: 12px;           /* Cantos arredondados */
        overflow: hidden;              /* Garante que o vídeo respeite o border-radius */

        box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Sombra suave */
    }


    /* =========================
    ELEMENTO VIDEO
    ========================= */
    video {
        width: 100%;        /* Ocupa 100% do container */
        display: block;     /* Remove espaço inferior padrão */
    }