/* --- RESET & VARIÁVEIS --- */
:root {
    /* Paleta de Cores */
    --primary-dark: #241710;    /* Marrom Café/Preto suave - Texto e Títulos */
    --accent-pink: #ebb2b1;     /* Rosa Suave - Botões e Destaques */
    --bg-light: #f9f9f9;        /* Fundo quase branco */
    --bg-gray: #dedede;         /* Cinza para seções secundárias */
    --white: #ffffff;
    
    /* Tipografia */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
}

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

body {
    font-family: var(--font-body);
    color: var(--primary-dark);
    background-color: var(--white);
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--primary-dark);
    font-weight: 700;
}

a {
    text-decoration: none;
    transition: 0.3s ease;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- BOTÕES --- */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 600;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.9rem;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--primary-dark);
    color: var(--white);
    border: 2px solid var(--primary-dark);
}

.btn-primary:hover {
    background-color: var(--accent-pink);
    border-color: var(--accent-pink);
    color: var(--primary-dark);
}

.btn-outline {
    background-color: transparent;
    color: var(--primary-dark);
    border: 2px solid var(--primary-dark);
    margin-left: 10px;
}

.btn-outline:hover {
    background-color: var(--primary-dark);
    color: var(--white);
}

.full-width {
    display: block;
    text-align: center;
    margin-top: 20px;
}

/* --- NAVBAR --- */
.navbar {
    background-color: var(--white);
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 1px;
    color: var(--primary-dark);
    display: flex;          
    align-items: center;    
}

.logo img {
    height: 40px;  
    width: auto;   
    margin-right: 15px;
}

.logo span {
    color: #b58685; 
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links a {
    color: var(--primary-dark);
    font-weight: 600;
    font-size: 0.95rem;
}

.nav-links a:hover {
    color: #b58685;
}

.btn-nav {
    background-color: var(--accent-pink);
    padding: 8px 20px;
    border-radius: 4px;
    color: var(--primary-dark) !important;
}

.btn-nav:hover {
    background-color: var(--primary-dark);
    color: var(--white) !important;
}

/* --- HERO PREMIUM (Fundo Total) --- */
.hero-premium {
    position: relative;
    width: 100%;
    /* Altura impactante: 90% da tela, mas com um mínimo para não ficar pequeno em telas baixas */
    height: 90vh; 
    min-height: 600px;
    display: flex;
    align-items: center; /* Centraliza o texto verticalmente */
    overflow: hidden;
}

/* --- CAMADA 1: IMAGEM DE FUNDO --- */
.hero-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Fica atrás de tudo */
}

.hero-bg-wrapper img {
    width: 100%;
    height: 100%;
    /* O 'cover' é essencial para preencher sem distorcer */
    object-fit: cover;
    /* Foca no centro/direita da imagem, onde estão a Sofia e a mesa */
    object-position: center right; 
}

/* --- CAMADA 2: OVERLAY DE LEITURA (O Segredo!) --- */
.hero-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Fica entre a foto e o texto */
    
    /* Gradiente horizontal: Transparente na esquerda (sobre a Sofia) -> Branco translúcido na direita (sobre o texto) */
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 40%,     /* Começa transparente para mostrar a Sofia */
        rgba(255, 255, 255, 0.4) 50%,   /* Começa a clarear no meio */
        rgba(255, 255, 255, 0.9) 85%,   /* Fica bem branco atrás do texto para dar contraste */
        rgba(255, 255, 255, 1) 100%
    );
}

/* --- CAMADA 3: CONTEÚDO (Texto) --- */
.hero-content-premium {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    
    /* Garante que o bloco todo vá para o final (direita) */
    justify-content: flex-end; 
    
    /* Aumentei um pouco o padding para o texto não colar na borda da tela */
    padding-right: 1%; 
}

.text-wrapper-premium {
    max-width: 600px; /* Um pouco mais largo para o título caber bem */
    
    text-align: right; 
    
    /* Garante que o flexbox respeite o alinhamento */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alinha o botão à direita também */
}

/* Tipografia Ajustada para o Fundo Claro */
.text-wrapper-premium h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    color: var(--primary-dark);
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.text-wrapper-premium p {
    font-size: 1.2rem;
    color: #444; /* Um cinza um pouco mais forte para leitura */
    margin-bottom: 35px;
    line-height: 1.6;
    font-weight: 500;
    
    /* Garante que o parágrafo também alinhe à direita */
    margin-left: auto; 
    margin-right: 0;
}

/* --- BOTÃO HERO --- */
.btn-pill-hero {
    background-color: #e3a6a4; /* Rosa da paleta */
    color: var(--primary-dark); /* Texto Marrom Escuro */
    border-radius: 8px; 
    padding: 12px 32px;
    font-weight: 700;
    font-size: 1rem;
    
    /* Na imagem de exemplo o texto não é tudo maiúsculo. 
       Se quiser igual, use 'none'. Se preferir caixa alta, use 'uppercase' */
    text-transform: none; 
    
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    display: inline-block;
    transition: all 0.3s ease;
    text-decoration: none;
    width: auto;
}

.btn-pill-hero:hover {
    transform: translateY(-2px);
    background-color: #dcbfb8; /* Escurece um pouquinho no hover */
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

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

.title-pill {
    background-color: #e3a6a4; 
    color: var(--primary-dark); 
    
    display: inline-block; 
    padding: 8px 24px;     
    border-radius: 50px;   
    
    font-family: var(--font-heading);
    font-size: 0.85rem;     
    font-weight: 700;      
    text-transform: uppercase; 
    letter-spacing: 2px; 
    line-height: 1;
    
    margin-bottom: 20px;   
    box-shadow: 0 4px 10px rgba(227, 166, 164, 0.4);
}

.subtitle-lead {
    font-size: 1.5rem;       
    color: var(--primary-dark);
    font-family: var(--font-heading); 
    font-weight: 400;      
    line-height: 1.3;
    max-width: 700px;      
    margin: 0 auto;       
}

/* --- FEATURES --- */
.features {
    padding: 60px 0;
    background-color: var(--primary-dark);
    color: var(--white);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    text-align: center;
}

.feature-card h3 {
    color: var(--accent-pink);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.feature-card p {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* --- SOBRE PREMIUM --- */
.about-premium {
    position: relative;
    width: 100%;
    /* Altura automática baseada no conteúdo, mas com um mínimo para mostrar a foto */
    min-height: 80vh; 
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    overflow: hidden;
    padding: 100px 0; /* Espaçamento interno */
}

/* 1. Wrapper da Imagem (Fundo Absoluto) */
.about-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.about-bg-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* IMPORTANTE: Foca na DIREITA (onde a Sofia está) */
    object-position: center right; 
}

/* 2. Gradiente (Branco na Esquerda -> Transparente na Direita) */
.about-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 1) 0%,     /* Branco sólido no início (atrás do texto) */
        rgba(255, 255, 255, 0.8) 35%,    /* Mantém sólido até 35% da tela */
        rgba(255, 255, 255, 0) 50%,  /* Começa a abrir */
        rgba(255, 255, 255, 0) 100%    /* Totalmente transparente na foto */
    );
}

/* 3. Conteúdo (Texto na Frente) */
.about-content-container {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Alinha o bloco à ESQUERDA */
}

.about-text-wrapper {
    max-width: 600px; /* Largura de leitura confortável */
    text-align: left;
}

/* Ajustes de Tipografia */
.section-header-left {
    margin-bottom: 30px;
}

.about-body-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--primary-dark);
    margin-bottom: 25px;
    font-weight: 500;
}

.about-body-text strong {
    color: var(--primary-dark);
    font-weight: 700;
    padding: 0 4px;
}

/* --- SERVIÇOS/CARDS --- */
.services {
    padding: 100px 0;
    background-color: var(--bg-gray);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    transition: transform 0.3s ease;

    display: flex;            
    flex-direction: column;   
    height: 100%;
}

.card p {
    margin-bottom: 25px; 
    flex-grow: 1;        
}

.card .btn {
    margin-top: auto; 
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-pink);
}

.card-header {
    font-size: 0.8rem;
    font-weight: 700;
    color: #999;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.card h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

/* --- FOOTER PREMIUM (Dark 4 Colunas) --- */
.footer-premium {
    background-color: var(--primary-dark); /* Fundo Marrom Escuro */
    color: #f0f0f0; /* Texto quase branco */
    padding-top: 40px;
    font-family: var(--font-body);
}

.footer-grid {
    display: grid;
    /* Cria 4 colunas de tamanho igual */
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding-bottom: 30px;
}

/* Títulos das Colunas */
.footer-col h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--white);
    text-transform: capitalize; /* Primeira letra maiúscula */
}

/* Estilo dos Links */
.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #cccccc; /* Cinza claro */
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--accent-pink); /* Fica rosa ao passar o mouse */
    padding-left: 5px; /* Efeito de movimento sutil */
}

/* Estilo das Redes Sociais (Círculos Rosa) */
.social-icons {
    display: flex;
    gap: 15px;
}

.social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: var(--accent-pink); /* Fundo Rosa (#ebb2b1) */
    color: var(--primary-dark); /* Ícone Marrom */
    border-radius: 50%; /* Faz ficar redondo */
    font-size: 1.1rem;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.social-link:hover {
    transform: translateY(-3px); /* Pula ao passar o mouse */
    background-color: var(--white); /* Vira branco no hover */
}

/* Estilo dos Contatos (Ícone + Texto) */
.contact-info {
    list-style: none;
}

.contact-info li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: #ccc;
    font-size: 0.95rem;
}

.contact-info i {
    color: var(--accent-pink); /* Ícones de contato em rosa */
}

/* Rodapé Inferior (Copyright) */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Linha fina e discreta */
    padding: 25px 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.1); /* Um pouco mais escuro */
}

.footer-bottom p {
    font-size: 0.85rem;
    color: #888;
}

/* --- ESTILOS DA VITRINE (CATÁLOGO) --- */

/* Cabeçalho da página de catálogo */
.catalog-header {
    background-color: var(--bg-light);
    padding: 60px 0;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.catalog-header h1 {
    font-size: 2.5rem;
    color: var(--primary-dark);
    margin-bottom: 15px;
}

.catalog-header p {
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.1rem;
}

/* Área da Grid */
.catalog-section {
    padding: 60px 0;
    background-color: var(--accent-pink);
}

.products-grid {
    display: grid;
    /* Cria colunas automáticas (mínimo 280px de largura cada) */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

/* O Card do Produto */
.product-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px; /* Cantos arredondados */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: var(--accent-pink);
}

/* Imagem do Produto */
.product-image {
    position: relative;
    height: 250px; /* Altura fixa para alinhar */
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-image img {
    max-height: 80%;
    max-width: 90%;
    object-fit: contain; /* Garante que a capa do livro apareça inteira */
    transition: transform 0.3s ease;
}

/* Badges (Etiquetas) */
.badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--primary-dark);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 2;
}

.badge.new {
    background-color: var(--accent-pink);
    color: var(--primary-dark);
}

/* Informações do Produto */
.product-info {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Ocupa o espaço restante */
}

.product-info h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: var(--primary-dark);
    line-height: 1.4;
}

.description {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 20px;
    flex-grow: 1; /* Empurra o preço para baixo */
}

/* Preço */
.price-block {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.old-price {
    text-decoration: line-through;
    color: #ccc;
    font-size: 0.9rem;
}

.new-price {
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 1.4rem;
}

/* Botão de Compra */
.btn-buy {
    background-color: var(--primary-dark);
    color: #fff;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: background 0.3s ease;
    border: none;
    display: block; /* Ocupa largura total */
}

.btn-buy:hover {
    background-color: var(--accent-pink);
    color: var(--primary-dark);
}

.btn-buy i {
    margin-right: 8px;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column-reverse;
        text-align: center;
    }

    .about-text-content {
        padding: 0 15px; 
        text-align: justify; 
    }

    .hero-text h1 {
        font-size: 2.2rem;
    }

    .nav-links {
        display: none; /* Em produção, adicionaria menu hambúrguer */
    }
    
    .cta-group {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .btn-outline {
        margin-left: 0;
    }

    .hero-premium {
        height: auto; /* Remove altura fixa */
        min-height: auto;
        flex-direction: column; /* Empilha */
    }

    .hero-bg-wrapper {
        position: relative;
        height: 50vh; 
        width: 100%;
    }
    
    .hero-bg-wrapper img {
        /* 20% ou 25% (foco mais à esquerda) */
        object-position: 12% center; 
    }
    
    /* Escondemos o gradiente no celular */
    .hero-overlay-gradient { display: none; }

    .hero-content-premium {
        justify-content: center;
        padding: 50px 25px;
        text-align: center;
        background-color: var(--white); /* Fundo branco sólido para o texto */
    }
    
    .text-wrapper-premium {
        align-items: center;
        text-align: center;
        max-width: 100%;
    }

    .btn-pill-hero {
        margin-left: auto;
        margin-right: auto;
    }

    .text-wrapper-premium h1 { font-size: 2.2rem; }
    .text-wrapper-premium p { color: #555; } /* Volta a cor normal */

    .about-premium {
        flex-direction: column; /* Empilha */
        padding: 0;
        height: auto;
        min-height: auto;
    }

    /* No celular, a imagem fica em cima */
    .about-bg-wrapper {
        position: relative; /* Volta ao fluxo normal */
        height: 50vh;
        width: 100%;
    }
    
    .about-bg-wrapper img {
        object-position: 85% center; /* Foca no rosto */
    }

    /* Esconde o gradiente lateral no celular */
    .about-overlay-gradient {
        display: none; 
    }

    /* O texto fica embaixo no fundo branco */
    .about-content-container {
        background-color: var(--white);
        padding: 60px 25px;
    }

    .about-text-wrapper {
        max-width: 100%;
        text-align: center; /* Centraliza no mobile */
    }
    
    .section-header-left {
        text-align: center; /* Centraliza a pílula */
    }

    .footer-grid {
        /* No celular, vira 1 coluna (empilhado) ou 2 colunas */
        grid-template-columns: 1fr; /* Uma coluna só para garantir espaço */
        gap: 40px;
        text-align: center; /* Centraliza tudo no celular */
    }

    /* Centraliza os ícones sociais no celular */
    .social-icons {
        justify-content: center;
    }

    /* Centraliza os itens de contato no celular */
    .contact-info li {
        justify-content: center;
    }

    .catalog-header {
        padding: 40px 20px; /* Menos espaço vertical */
    }

    .catalog-header h1 {
        font-size: 1.8rem; /* Fonte menor para não quebrar linha feio */
    }

    .catalog-header p {
        font-size: 1rem;
        padding: 0 10px;
    }

    /* 2. Ajustar a grade de produtos */
    .catalog-section {
        padding: 30px 20px; /* Menos borda branca em volta */
        background-color: #f4f4f4; /* Dica: Fundo cinza leve destaca os cards brancos no mobile */
    }

    .products-grid {
        gap: 20px; /* Menos espaço entre um card e outro */
        
        /* Garante que o card ocupe a largura total disponível */
        grid-template-columns: 1fr; 
    }

    /* 3. Ajuste no Card */
    .product-card {
        /* Sombra um pouco mais forte no mobile dá sensação de toque */
        box-shadow: 0 4px 10px rgba(0,0,0,0.08); 
    }

    .product-image {
        height: 200px; /* Imagem um pouco menor para ver o botão de comprar logo */
    }
    
    .product-info {
        padding: 20px; /* Um pouco mais compacto */
    }

    .new-price {
        font-size: 1.3rem; /* Preço levemente menor */
    }
}