* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #ece3da;
    font-family: sans-serif;
      overflow-x: hidden;
}

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-fundo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.hero-nome {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.nome-gabriel {
    font-family: 'Owned', sans-serif;
    font-size: 8rem;
    color: #c9a84c;
    position: absolute;
    top: 19%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3; /* na frente do menino */
    white-space: nowrap;
}

.nome-falcao {
    font-family: 'Breathing', sans-serif;
    font-size: 10rem;
    color: #c9a84c;
    position: absolute;
    bottom: 14%;
    left: 53%;
    transform: translateX(-50%);
    z-index: 1; /* atrás do menino */
    white-space: nowrap;
}

.hero-menino {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 1450px;
    left: 52%;
}

.hero-menu {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    align-items: center;
    background-color: white;
    padding: 8px 25px;
    border-radius: 30px;
    z-index: 10;
    pointer-events: all;
}

.hero-menu a {
    text-decoration: none;
    color: black;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 2px;
}

.hero-menu span {
    color: #aaa;
}

.btn-contatar {
    position: absolute;
    bottom: 300px;
    left: 30px;
    background-color: white;
    border: 2px solid black;
    padding: 12px 25px;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    z-index: 10;
    border-radius: 30px;
    font-family: 'Montserrat', sans-serif;
}

.btn-contatar:hover {
    background-color: rgb(71, 71, 71);
    color: white;
}

/* PLAYER */
.player-section {
    margin-top: -40px;
    position: relative;
    z-index: 10;
    background-color: transparent;
    padding: 0 60px;
    display: flex;
    justify-content: center;
}

.player {
    background-color: #1a1a1a;
    border-radius: 15px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 600px;
    
}

.player-capa {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
}

.player-info {
    flex: 1;
}

.player-titulo {
    color: white;
    font-weight: bold;
    font-size: 0.95rem;
}

.player-artista {
    color: #aaa;
    font-size: 0.8rem;
}

.player-controles {
    display: flex;
    gap: 15px;
}

.player-controles button {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}

.player-barra {
    width: 100%;
    accent-color: #1db954;
}

/* ABOUT */
.about-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 60px;
    gap: 40px;
   background-color: #ece3da;
}

.about-texto {
    max-width: 350px;
}

.about-texto p {
    font-family: 'Breathing', sans-serif;
    font-size: 1.8rem;
    line-height: 1.6;
    color: #222;
}

.about-fotos {
    display: flex;
    gap: 20px;
}

.about-fotos img {
    width: 180px;
    height: 250px;
    object-fit: cover;
}

.about-fotos-direita {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-fotos-direita img {
    width: 180px;
    height: 115px;
}

/* TRABALHOS */
.trabalhos-section {
    padding: 60px;
    background-color: #ece3da;
    text-align: center;
}

.trabalhos-section h2 {
    font-family: 'Owned', sans-serif;
    font-size: 3rem;
    margin-bottom: 40px;
    letter-spacing: 3px;
}

.trabalhos-grid {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.trabalho {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.trabalho:hover {
    transform: scale(1.03);
}

.trabalho img {
    width: 220px;
    height: 300px;
    object-fit: cover;
}

.trabalho p {
    font-family: 'Breathing', sans-serif;
    font-size: 1.2rem;
    margin-top: 10px;
    color: #444;
}

/* FINAL 3D */
.final-section {
    position: relative;
    width: 100%;
    height: 500px;
    
}

.final-fundo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.final-menino {
    position: relative;
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%);
    height: 165%; /* mexe só aqui pro menino final */
    width: auto; /* mantém a proporção do menino */
    z-index: 9;
}

.minha-historia {
    width: 100%;
    overflow: hidden;
    text-align: center;
    background-image: url('imagens/Gemini_Generated_Image_y0b8way0b8way0b8.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: 700px;
    position: relative;
}

.minha-historia h2 {
    font-family: 'Owned', sans-serif;
    font-size: 2.5rem;
    padding-top: 40px;
    letter-spacing: 2px;
    color: #333;
}

.minha-historia-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 40px; /* Diminuído o padding para dar mais espaço nas laterais */
    width: 100%;
    max-width: 1400px; /* Aumentado para o conteúdo se espalhar mais nos monitores */
    margin: 0 auto;
    height: 85%;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.minha-historia-foto {
    flex-shrink: 0;
    width: 45%;        
    display: flex;
    align-items: flex-end;
    justify-content: flex-start; /* Alinha a base da foto à esquerda */
}

.minha-historia-gabriel {
    width: 200% !important;   /* Força ele a ficar bem grande na tela */
    max-width: 750px !important; /* Limite bem alto para não barrar o crescimento */
    height: auto !important;
    margin-left: -180px !important; /* Joga ele um pouco para a esquerda para encaixar o ombro na tela */
    margin-bottom: -45px !important; /* Mantém colado na borda de baixo */
    display: block;
}

.minha-historia h3 {
    font-family: 'Owned', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #222;
    text-align: left;
    width: 45%; /* Ajustado para não bater na foto */
    align-self: center;
    flex-shrink: 0;
}

.fotocasal-section {
   position: relative;
    width: 100%;
    height: 500px;
}

.fotocasal-fundo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.casal {
position: relative;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
    height: 130%; /* mexe só aqui pro menino final */
    width: auto; /* mantém a proporção do menino */
    z-index: 9;
}

.container-servicos {
  display: flex;
  flex-direction: column; /* Faz o título ficar em cima e os serviços embaixo */
  align-items: center;    /* Centraliza o título e o bloco de serviços */
  gap: 30px;
  padding: 60px;
  background-color: #ece3da;
  width: 100%;
}

.container-serviços h2 {
    font-family: 'Owned', sans-serif;
    font-size: 3rem;
    margin-bottom: 40px;
    letter-spacing: 3px;
    text-align: center;
}

.servicos-flex {
  display: flex;
  flex-direction: row;     /* Garante que os cartões fiquem lado a lado */
  justify-content: center; /* Centraliza os cartões na tela */
  gap: 30px;
  width: 100%;             /* Ocupa a largura total disponível */
  flex-wrap: wrap;         /* Se não couber em telas menores, joga o cartão pra baixo */
}

.servico {
    background-color: #d0d0d0;
    border-radius: 12px;
    padding: 40px 30px;
    width: 280px;
    min-height: 380px; /* altura mínima igual pra todos */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* empurra o botão sempre pro fundo */
    gap: 15px;
}
.servico-icone {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.servico h3 {
    font-family: 'Owned', sans-serif;
    font-size: 1.3rem;
    color: #222;
    letter-spacing: 1px;
}

.servico p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: #444;
    line-height: 1.6;
}

.btn-servico {
    background-color: white;
    border: 2px solid black;
    padding: 10px 22px;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    border-radius: 30px;
    margin-top: 10px;
}

.btn-servico:hover {
    background-color: black;
    color: white;
}

.merchan-final {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.merchan-fundo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.merchan-gabriel {
    position: absolute;
    bottom: -20;
    right: 0;
    height: 120%;
    width: auto;
    z-index: 2;
}

.merchan-final h2 {
    font-family: 'Owned', sans-serif;
    font-size: 2.5rem;
    position: absolute;
    left: 80px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    color: rgb(0, 0, 0);
    width: 400px;
    text-align: left;
    height: auto;
    bottom: auto;
}

.container-servicos {
    display: flex;
    flex-direction: column; /* Faz o título ficar em cima e os serviços embaixo */
    align-items: center;    /* Centraliza o título e o bloco de serviços */
    gap: 30px;
    padding: 60px;
    background-color: #ece3da;
    width: 100%;
}


.imagem-moda1 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center 20%;
    margin-top: 80px;
}

.imagem-moda2 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    margin-top: 80px;
}

.imagem-moda3 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    margin-top: 80px;
    object-position: center 20%;
}

.imagem-moda4 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    margin-top: 80px;
    object-position: center down 35%;
}

.descricao-moda {
    font-family: 'Breathing', sans-serif;
    font-size: 1.1rem;
    color: #444;
    line-height: 1.6;
    margin-top: 20px;
    text-align: center;
    max-width: 700px; /* Deixa as linhas de texto mais curtas e elegantes para ler */
}

.imagem-altinha1 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center down 20%;
    margin-top: 80px;
}

.imagem-altinha2 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center top 20%;
    margin-top: 80px;
}

.imagem-altinha3 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    margin-top: 80px;
    object-position: center down 20%;
}

.titulo-moda {
    font-family: 'Owned', sans-serif;
    font-size: 3rem;
    text-align: center;
    margin-top: 40px;
    letter-spacing: 2px;
    color: #333;
}

.imagem-bebe1 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center down 20%;
    margin-top: 80px;
}

.imagem-bebe2 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center top 20%;
    margin-top: 80px;
}

.imagem-bebe3 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center 30%;
    margin-top: 80px;
    
}

.imagem-bebe4 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    margin-top: 80px;
    object-position: center 32%;
}

.imagem-bebe5 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    margin-top: 80px;
    object-position: center 35%;
}

.imagem-praia1 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center down 20%;
    margin-top: 80px;
}

.imagem-praia2 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center 59%;
    margin-top: 80px;
}

.imagem-praia3 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    margin-top: 80px;
    object-position: center down 20%;
}

.container-moda {
    width: 100%;
    max-width: 900px;     /* Impede que as fotos fiquem gigantescas em telas largas */
    margin: 0 auto;       /* Centraliza todo o conteúdo perfeitamente no meio do monitor */
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Garante que os itens fiquem um abaixo do outro */
    gap: 50px;             /* Cria um espaçamento padrão e limpo entre cada foto/bloco */
}

.item-moda {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item-moda img {
    width: 100% !important;
    height: auto !important;       /* MUDANÇA PRINCIPAL: Cancela os 400px fixos que cortavam os rostos */
    max-height: 700px;             /* Evita que fotos verticais estourem a altura da tela */
    object-fit: contain !important; /* Garante que a foto inteira apareça sem nenhum corte */
    border-radius: 6px;            /* Deixa os cantos das fotos levemente arredondados (opcional) */
}

/* ==========================================
   MEDIA QUERY PARA DISPOSITIVOS MÓVEIS (CELULARES)
   ========================================== */
@media screen and (max-width: 768px) {
    
    /* Configurações Gerais */
    body {
        overflow-x: hidden;
    }

    br {
        display: none; /* Remove os <br> excessivos que empurram o layout no celular */
    }

    /* HERO (Seção Inicial) */
    .hero {
        height: 90vh; /* Um pouco menor para telas móveis */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .hero-nome {
        position: relative;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 60px;
    }

    .nome-gabriel {
        font-size: 3.5rem; /* Reduz o tamanho do texto */
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        text-align: center;
        z-index: 4;
    }

    .nome-falcao {
        font-size: 4.5rem; /* Reduz o tamanho do texto */
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        text-align: center;
        margin-top: -20px; /* Ajusta a sobreposição */
        z-index: 1;
    }

    .hero-menino {
        position: absolute;
        width: 100%; /* Faz o menino se adaptar à largura da tela */
        max-width: 450px;
        height: auto;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .hero-menu {
        width: 90%;
        justify-content: center;
        padding: 8px 15px;
        top: 15px;
    }

    .hero-menu a {
        font-size: 0.75rem;
        letter-spacing: 1px;
    }

    .btn-contatar {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 40px;
        z-index: 10;
        width: 80%;
        max-width: 280px;
        text-align: center;
    }

    /* PLAYER DE ÁUDIO */
    .player-section {
        margin-top: 20px;
        padding: 0 20px;
        left: 0; /* Reseta o empurrão da esquerda */
        display: flex;
        justify-content: center;
    }

    .player {
        width: 100%;
        max-width: 400px;
        flex-wrap: wrap; /* Permite que os elementos quebrem linha se necessário */
        padding: 15px;
        gap: 15px;
    }

    .player-info {
        min-width: 120px;
    }

    /* QUEM SOU EU / HISTÓRIA */
    .minha-historia {
        height: auto;
        padding: 40px 20px;
        background-size: cover; /* Garante que o fundo cubra a seção */
    }

    .minha-historia h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

   .minha-historia-inner {
        position: relative;
        display: flex;
        flex-direction: column; /* Empilha os elementos no celular */
        align-items: center;
        padding: 0 20px;
        height: auto;
        bottom: auto;
    }

   .minha-historia-foto {
        width: 100%;
        max-width: 320px;      /* Aumentado um pouco para ele ganhar mais corpo */
        margin-bottom: 0;      /* Zera o espaço embaixo para colar na borda */
        order: 2;              /* MOVE A FOTO PARA BAIXO DO TEXTO */
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

  .minha-historia-gabriel {
        width: 100%;
        height: auto;
        margin-bottom: -5px;   
        display: block;
        
        /* DESTRAVA E MOVE PARA A DIREITA: */
        transform: translateX(56px) !important; 
    }
   .minha-historia h3 {
        width: 100%;
        font-size: 0.95rem;
        text-align: center;
        line-height: 1.6;
        font-family: 'Breathing', sans-serif;
        order: 1;              /* MOVE O TEXTO PARA CIMA */
        margin-top: 10px;
        margin-bottom: 20px;   /* Cria um espaço antes da foto começar */
    }

    /* ABOUT (Sobre) */
    .about-section {
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
    }

    .about-texto {
        max-width: 100%;
        text-align: center;
    }

    .about-texto p {
        font-size: 1.4rem;
    }

    .about-fotos {
        justify-content: center;
        width: 100%;
    }

    .about-fotos img {
        width: 45%; /* Divide o espaço proporcionalmente */
        height: 180px;
    }

    .about-fotos-direita {
        width: 45%;
        gap: 10px;
    }

    .about-fotos-direita img {
        width: 100%;
        height: 85px;
    }

    /* TRABALHOS (Grid de Portfólio) */
    .trabalhos-section {
        padding: 40px 20px;
    }

    .trabalhos-section h2 {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    .trabalhos-grid {
        flex-direction: column; /* Um trabalho embaixo do outro */
        align-items: center;
        gap: 25px;
    }

    .trabalho img {
        width: 100%;
        max-width: 280px;
        height: 380px;
    }

    /* SEÇÕES COM EFEITO OVERLAY (Bike e Casal) */
    .final-section, .fotocasal-section {
        height: 300px; /* Reduz a altura da seção no celular */
        margin-top: 40px;
    }

    .final-menino {
        height: 120%;
        bottom: 20%;
    }

    .casal {
        height: 110%;
        bottom: 10%;
    }

    /* SERVIÇOS */
    .container-servicos, .container-serviços {
        padding: 40px 20px;
    }

    .container-serviços h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .servicos-flex {
        flex-direction: column;
        align-items: center;
    }

    .servico {
        width: 100%;
        max-width: 300px;
        padding: 30px 20px;
    }

    /* MERCHAN FINAL (Solicite seu orçamento) */
    .merchan-final {
        height: 400px;
        flex-direction: column;
        justify-content: flex-start;
        padding: 40px 20px;
    }

    .merchan-final h2 {
          font-family: 'Breathing', sans-serif;
        font-size: 1.8rem;
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        text-align: center;
        color: #000; /* Se o fundo for escuro, mude para #fff */
        z-index: 5;
      
    }

    .merchan-gabriel {
        height: 70%;
        bottom: -10px;
        right: 50%;
        transform: translateX(50%); /* Centraliza o boneco embaixo do texto */
    }

    /* IMAGENS DAS PÁGINAS INTERNAS (Moda, Altinha, Praia, Bebê) */
    .titulo-moda {
        font-size: 2rem !important;
        margin-top: 20px !important;
    }

    .imagem-moda1, .imagem-moda2, .imagem-moda3, .imagem-moda4,
    .imagem-altinha1, .imagem-altinha2, .imagem-altinha3,
    .imagem-bebe1, .imagem-bebe2, .imagem-bebe3, .imagem-bebe4, .imagem-bebe5,
    .imagem-praia1, .imagem-praia2, .imagem-praia3 {
        height: 250px; /* Imagens internas menores para não cansar o scroll */
        margin-top: 30px;
    }

  .descricao-moda {
        font-size: 0.95rem !important;
        padding: 0 10px;
    }
}