html {
    scroll-behavior: smooth;
}
/* --- Reset & Variáveis Base (Paleta baseada na arte fornecida) --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --rose-bg: #F4E8E3;       /* Fundo suave rosado */
    --rose-dark: #A66E65;     /* Tom principal rosé escuro */
    --gold: #D4AF37;          /* Detalhes e ícones */
    --text-dark: #3A2A27;     /* Texto principal em marrom elegante escuro */
    --white: #FFFFFF;
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Montserrat', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* ==============================
   Fundo Decorativo Desktop
============================== */

body{
    background:#FAF6F4;
    overflow-x:hidden;
}

.background-images{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
}

.background-images .bg{
    position:absolute;
    width:290px;
    opacity:.12;
    filter:grayscale(100%);
    object-fit:cover;
}

/* esquerda superior */
.bg1{
    top:90px;
    left:25px;
    transform:rotate(-8deg);
}

/* esquerda inferior */
.bg2{
    bottom:40px;
    left:25px;
    transform:rotate(6deg);
}

/* direita superior */
.bg3{
    top:90px;
    right:25px;
    transform:rotate(8deg);
}

/* direita inferior */
.bg4{
    bottom:40px;
    right:25px;
    transform:rotate(-6deg);
}


.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Ajuste Fino para Arte Vertical no Desktop --- */
.top-banner-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-top: 60px; /* <--- CORREÇÃO: Cria o espaço para o menu não cobrir a letra V */
    line-height: 0;
}
.top-banner-container img {
    width: 100%;
    display: block;
}

/* --- Reposicionando o Menu Fixado no Topo da Página --- */
.banner-nav {
    position: fixed; /* O menu agora fica fixo no topo, independente da rolagem */
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95); /* Fundo branco sutil com transparência */
    padding: 15px 5%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 1000;
    display: flex;
    justify-content: flex-end; /* Empurra os links para o canto direito da tela */
}
/* Botão de Destaque no Menu */
.btn-nav {
    background-color: var(--rose-dark);
    color: var(--white) !important;
    padding: 8px 20px;
    border-radius: 20px;
    text-shadow: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn-nav:hover {
    background-color: var(--text-dark);
}
.logo h1 {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--rose-dark);
}

nav ul {
    display: flex;
    list-style: none;
    align-items: center;
}

nav ul li {
    margin-left: 25px;
}

nav ul li a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 400;
    font-size: 0.9rem;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: var(--rose-dark);
}

.btn-nav {
    background-color: var(--rose-dark);
    color: var(--white) !important;
    padding: 8px 18px;
    border-radius: 20px;
}

.btn-nav:hover {
    background-color: var(--text-dark);
}

/* --- Hero Section --- */
.hero {
    background: linear-gradient(rgba(58, 42, 39, 0.4), rgba(58, 42, 39, 0.4)), url('img/hero-bg.jpg') no-repeat center center/cover;
    height: 80vh;
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--white);
}

.hero-content h2 {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    font-weight: 400;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    font-weight: 300;
}

.btn-primary {
    display: inline-block;
    background-color: #25D366; /* Verde do WhatsApp para conversão rápida */
    color: var(--white);
    text-decoration: none;
    padding: 15px 35px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 30px;
    transition: transform 0.3s;
}

.btn-primary:hover {
    transform: scale(1.05);
}

/* --- Diferenciais (Features) --- */
.features {
    background-color: var(--rose-bg);
    padding: 40px 0;
}

.features-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.feature-item {
    flex: 1;
    min-width: 180px;
    text-align: center;
    padding: 15px;
}

.feature-item i {
    font-size: 2rem;
    color: var(--rose-dark);
    margin-bottom: 10px;
}

.feature-item h3 {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* --- Seção Sobre --- */
.about {
    padding: 80px 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-img img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 10px 10px 0px var(--rose-bg);
}

.subtitle {
    text-transform: uppercase;
    color: var(--rose-dark);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2px;
}

.about-text h2 {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    margin: 10px 0 20px 0;
}

.about-text p {
    margin-bottom: 15px;
    font-size: 1rem;
}

.highlight {
    font-style: italic;
    color: var(--rose-dark);
    font-weight: 600;
}

/* =====================================================
   SEÇÃO SERVIÇOS
===================================================== */

.services{
    background:#FAF6F4;
    padding:80px 0;
}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-family:var(--font-serif);
    font-size:2.8rem;
}

/* GRID */

.services-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:30px;
}

.services .container{
    max-width:1400px;
}

/* CARD PADRÃO */

.service-card{
    background:var(--white);
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 4px 15px rgba(0,0,0,.05);
    text-align:center;
    padding-bottom:20px;
    transition:.3s;
}

.service-card:hover{
    transform:translateY(-5px);
}

/* IMAGEM PADRÃO */

.service-img{
    overflow:hidden;
    height:550px;
}

.service-img img{
    width:100%;
    height:100%;
    object-fit:contain;
    background-color:#f5f5f5;
}

.convidada-img img{
    object-position:center 20%;
}

.noiva-img img{
    width:110%;
    height:100%;
    max-width:none;
    object-fit:contain;
    margin-left:-5%;
}

/* TÍTULO */

.service-card h3{
    font-family:var(--font-serif);
    font-size:1.5rem;
    margin:18px 0 0;
}

/* =====================================================
   CARD HORIZONTAL - MADRINHAS
===================================================== */

.service-card-horizontal{
    grid-column:1 / -1;
    max-width:480px;
    justify-self:center;
}

.service-card-horizontal .service-img{
    height:auto;
    overflow:visible;
}

.service-card-horizontal .service-img img{
    width:100%;
    height:auto;
    display:block;
    object-fit:unset;
}

.service-card-horizontal h3{
    margin-top:12px;
    text-align:center;
}



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

@media (max-width:768px){

    .services .container{
        width:100%;
        padding:0 15px;
    }

    .services-grid{
        grid-template-columns:1fr;
        gap:25px;
    }


    .service-card{
        width:100%;
    }


    .service-img{
        height:400px;
    }


    .service-img img{
        width:100%;
        height:100%;
        object-fit:contain;
    }


    /* Corrige imagem da noiva no mobile */
    .noiva-img img{
        width:100%;
        margin-left:0;
        max-width:100%;
    }


    /* Card Madrinhas */
    .service-card-horizontal{
        grid-column:auto;
        width:100%;
        max-width:100%;
    }


    .madrinhas-card{
        width:100%;
        max-width:100%;
    }


}


@media (max-width:480px){

    .section-title h2{
        font-size:2.2rem;
    }


    .service-img{
        height:350px;
    }


}
/* --- Galeria --- */
.gallery {
    padding: 80px 0;
}

/* --- Ajustando a Galeria para 4 Colunas no Desktop --- */
.gallery-grid {
    display: grid;
    /* Altera o grid para criar 4 colunas iguais no computador */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; /* Mantém o mesmo espaçamento padrão entre as fotos */
}
/* =====================================================
   GALERIA - PADRÃO SERVIÇOS
===================================================== */

.gallery-item{
    overflow:hidden;
    height:550px;
    border-radius:8px;
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:contain;
    background-color:#f5f5f5;
}
/* TESTE AJUSTE INDIVIDUAL GALERIA */

.penteado1-card img{
    transform:scale(1.55);
}

.penteado2-card img{
    transform:scale(1.40);
}

.penteado3-card img{
    transform:scale(1.75);
}

.penteado4-card img{
    transform:scale(1.50);
}

/* Responsividade: Evita que as fotos espremam demais no celular */
@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 fotos por linha em tablets */
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* 1 foto por linha em celulares pequenos */
    }
}

@media (max-width: 480px) {

    .gallery-grid{
        grid-template-columns: 1fr;
    }

    .gallery-item img{
        height: 500px;
        object-fit: contain;
        background: #FAF6F4;
    }

}

.gallery-item img:hover {
    opacity: 0.9;
}

/* --- Rodapé --- */
footer {
    background-color: var(--text-dark);
    color: var(--white);
    text-align: center;
    padding: 60px 0 20px 0;
}

footer h2 {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.location {
    font-weight: 300;
    margin-bottom: 35px;
    letter-spacing: 1px;
}

.whatsapp-footer {
    display: inline-block;
    background-color: var(--rose-dark);
    color: var(--white);
    text-decoration: none;
    font-size: 1.8rem;
    font-family: var(--font-serif);
    padding: 15px 40px;
    border-radius: 5px;
    margin-bottom: 50px;
    transition: background 0.3s;
}

.whatsapp-footer:hover {
    background-color: #B87E75;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    font-size: 0.8rem;
    font-weight: 300;
    color: #A69694;
}

/* --- Responsividade Básica --- */
@media(max-width: 768px) {
    nav { display: none; } /* Pode ser adaptado para menu hamburguer depois */
    .hero-content h2 { font-size: 2.2rem; }
    .about-grid { grid-template-columns: 1fr; }
    .about-img { order: 2; }
    .about-text { order: 1; }
}

/* Estilo base para os links do menu */
.banner-nav a {
    display: inline-block; /* Necessário para o efeito de escala funcionar bem */
    text-decoration: none;
    color: #333;
    transition: transform 0.3s ease, color 0.3s ease; /* Transição suave */
}

/* Quando passa o mouse, o link expande 10% (1.1) do tamanho original */
.banner-nav a:hover {
    transform: scale(1.1);
    color: #B3887A; /* Cor de destaque ao passar o mouse */
}
/* --- ESTILIZAÇÃO E EFEITOS DA SEÇÃO FEATURES --- */

/* 1. Transformando cada item em um card elegante */
.feature-item {
    background-color: #ffffff; /* Fundo branco para destacar do fundo rosado */
    padding: 30px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* Sombra extremamente sutil */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}

/* Estilo do ícone */
.feature-item i {
    font-size: 2rem;
    color: #B3887A; /* Tom rosé/marrom dos seus ícones */
    margin-bottom: 15px;
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animação com leve "estilingue" */
}

/* Estilo do texto */
.feature-item h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333333;
    margin: 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* 2. Efeito de Toque (Mobile) e Hover (Desktop) */
.feature-item:hover, 
.feature-item:active {
    transform: translateY(-5px); /* O card flutua levemente para cima */
    box-shadow: 0 10px 25px rgba(179, 136, 122, 0.15); /* A sombra aumenta e ganha o tom do seu projeto */
    background-color: #FAF6F4; /* O fundo muda sutilmente para o tom areia */
}

/* O ícone ganha vida quando o card é focado/tocado */
.feature-item:hover i,
.feature-item:active i {
    transform: scale(1.2) rotate(5deg); /* O ícone cresce e inclina levemente */
}

/* ==========================================================================
   ESTILIZAÇÃO COMPLETA DO FOOTER (RODAPÉ COM TARJA PRETA COMPLETA)
   ========================================================================== */

/* Fundo geral do rodapé */
footer {
    background-color: #1a1a1a; /* Cinza escuro elegante */
    color: #ffffff;
    padding: 60px 0 0 0; /* Tira o espaçamento de baixo para colar a tarja */
    text-align: center;
}

/* Força os textos principais a ficarem brancos */
footer h2, footer p, footer .location {
    color: #ffffff !important;
}

/* A TARJA PRETA CORRIGIDA: Ocupa toda a tela e é bem fina */
.footer-bottom {
    background-color: #000000; /* Preto absoluto */
    width: 100%;               /* Força ocupar de ponta a ponta na tela */
    margin-top: 40px;          /* Espaço entre os contatos e a tarja */
    padding: 12px 0;           /* Deixa a tarja bem baixa e elegante */
}

/* Texto dentro da tarja preta */
.footer-bottom p {
    color: #888888 !important; /* Cinza discreto */
    font-size: 0.8rem;         /* Letra menor e sofisticada */
    margin: 0;
    padding: 0 20px;           /* Proteção para o texto não colar na borda do celular */
}

/* ==========================================================================
   BOTÃO FLUTUANTE DO WHATSAPP
   ========================================================================== */

.whatsapp-flutuante {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    background-color: #25d366; /* Verde oficial do WhatsApp */
    color: #fff !important;
    border-radius: 50px;
    text-align: center;
    font-size: 35px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999; /* Garante que ele fique em cima de absolutamente tudo */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Efeito ao passar o mouse (Desktop) ou tocar (Celular) */
.whatsapp-flutuante:hover,
.whatsapp-flutuante:active {
    transform: scale(1.1); /* Dá um leve zoom */
    background-color: #20ba5a; /* Tom de verde ligeiramente mais escuro */
}

/* Container para organizar os botões do rodapé */
footer .whatsapp-footer, 
footer .instagram-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    margin: 10px;
    transition: background 0.3s ease;
}

/* Estilização exclusiva do botão do Instagram */
footer .instagram-link {
    background: #E1306C; /* Cor oficial do Instagram */
    color: #ffffff !important;
}

footer .instagram-link:hover {
    background: #b82354; /* Tom mais escuro para o efeito hover */
}

/* Garante que o botão do WhatsApp também herde o alinhamento correto */
footer .whatsapp-footer {
    background: #a36f63; /* Mantendo o tom rose/marrom que já está na imagem */
    color: #ffffff !important;
}

/* Ajuste de responsividade para telas de celulares */
@media (max-width: 768px) {
    .service-card .service-img {
        background-size: cover !important;       /* Mantém o preenchimento proporcional */
        background-position: center 20% !important; /* Ajusta o foco para não degolar a cabeça nem cortar o queixo */
        height: 250px !important;                /* Altura reduzida e ideal para telas menores não darem zoom forçado */
        width: 100% !important;                  /* Garante 100% da largura do card */
    }
}
.madrinhas-card .service-img img{
    width:100%;
    height:auto;
    display:block;
}
/* AJUSTE EXCLUSIVO CARD MADRINHAS */

.madrinhas-card{
    width:600px;
    max-width:100%;
}  @media (max-width:768px){

    .services-grid{
        grid-template-columns:1fr !important;
    }

    .services{
        overflow-x:hidden;
    }

    .service-card{
        width:100% !important;
        max-width:100% !important;
    }

    .madrinhas-card{
        width:100% !important;
    }

}

/* =====================================================
   GALERIA - RESPONSIVIDADE MOBILE
===================================================== */

@media (max-width:768px){

    .gallery-grid{
        grid-template-columns:1fr;
        gap:20px;
    }


    .gallery-item{
        height:350px;
        width:100%;
    }


    .gallery-item img{
        width:100%;
        height:100%;
        object-fit:contain;
        transform:none;
    }

}


@media (max-width:480px){

    .gallery-item{
        height:300px;
    }

}