/* ---- Nunito (Títulos) ---- */
/* ---- DM Sans (Corpo / Subtítulos) ---- */
/* Carregado via Google Fonts no HTML */


:root {
    /* Cores principais */
    --cacau: #302a27;        /* Textos principais, fundos escuros */
    --pistachio: #7a7859;    /* Acentos secundários, ícones */
    --especiaria: #854627;   /* Destaques, CTAs, links hover */
    --natural: #c9bda9;      /* Bordas, backgrounds suaves, dividers */
    --ivory: #eae8e5;        /* Background principal, áreas de respiro */

    /* Derivadas */
    --white: #FFFFFF;
    --cacau-light: #4a423e;  /* Textos secundários */
    --ivory-dark: #d9d5d0;   /* Hovers em backgrounds claros */

    /* Fontes */
    --font-heading: 'Nunito', 'Trebuchet MS', sans-serif;
    --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* =========================================
   RESET E BASE
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base para rem */
    overflow-x: hidden; /* Garante ZERO scroll lateral */
    width: 100%;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--cacau-light);
    background-color: var(--ivory);
    overflow-x: hidden; /* Reforço de segurança */
    width: 100%;
}

/* =========================================
   HERO SECTION
   ========================================= */
#hero {
    position: relative;
    width: 100%;
    min-height: auto; /* Remove altura mínima forçada no mobile */
    display: flex;
    align-items: center;
    background-color: var(--ivory);
    
    /* Padding padrão para o texto */
    padding: 20px 0 0 0; /* Removido padding-bottom para colar a imagem no final */
    align-items: flex-start;
    overflow: hidden;
}

/* Background Hero Otimizado */
.hero-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mobile: Cover */
    object-position: center top;
}

/* Container do Hero */
#hero .container {
    position: relative;
    z-index: 2;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Texto no topo */
    align-items: center; /* Centraliza o bloco na tela */
    padding-top: 0; /* Removido padding extra do container para subir mais */
}

.hero-content {
    width: 100%;
    /* 
       Define uma largura máxima fixa para o bloco no mobile (ex: 85%).
       Isso força o bloco a se desgrudar das bordas e ficar no centro.
    */
    max-width: 85%; 
    margin: 0 auto; /* Centraliza o bloco horizontalmente */
    
    color: var(--cacau);
    background: transparent; 
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    border: none;
    box-shadow: none;
    text-align: left; /* Texto alinhado à esquerda dentro do bloco centralizado */
}

/* Título Principal */
#hero h1 {
    font-family: var(--font-heading);
    font-style: normal; /* Regular, não itálico */
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 0.25rem; /* Reduzido de 0.5rem */
    color: #FFFFFF; /* Cor sólida como no print */
    letter-spacing: 0.05em;
}

/* Logo acima do H1 no hero */
.hero-logo-wrapper {
    display: block;
    text-align: left;
    margin-bottom: 1.2rem;
}

.hero-logo {
    width: 220px;
    height: auto;
    display: block;
    object-fit: contain;
}

/* CRM logo abaixo do título */
.crm-hero {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #FFFFFF;
    margin-bottom: 1rem; /* Reduzido de 2rem */
    font-weight: 400;
}

/* Subtítulo */
.hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 1.5rem; /* Reduzido de 2rem */
    color: #FFFFFF;
    font-weight: 400;
    max-width: 90%;
}

/* Lista de Vantagens (Checkmarks) */
.hero-features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Reduzido de 1rem */
    margin-bottom: 2rem; /* Reduzido de 3rem */
}

.hero-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: #FFFFFF;
}

.check-icon {
    font-size: 1.2rem;
    font-weight: bold;
    color: #FFFFFF; /* Check preto como no print */
    line-height: 1;
}

/* Botão Estilo Outline "Fino" */
.hero-actions {
    display: flex;
    justify-content: flex-start;
    width: auto;
}

.btn-outline {
    display: inline-block;
    background-color: transparent;
    color: #FFFFFF;
    padding: 12px 32px;
    border-radius: 50px;
    font-family: var(--font-heading); /* Courier Prime no botão */
    font-size: 1rem;
    font-weight: 400;
    text-transform: lowercase; /* minúsculo */
    letter-spacing: 0.2em; /* bem espaçado */
    border: 1px solid #FFFFFF;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* =========================================
   IMAGEM MOBILE NO FLUXO
   ========================================= */
.mobile-hero-image-container {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 20px; /* Movido para baixo (positivo) para afastar do texto */
    line-height: 0; /* Remove espaço extra abaixo da imagem inline */
    display: block; /* Garante comportamento de bloco */
    -webkit-mask-image: linear-gradient(to top, black 90%, transparent 100%);
    mask-image: linear-gradient(to top, black 90%, transparent 100%);
}

.mobile-hero-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* =========================================
   RESPONSIVO (Desktop)
   ========================================= */
@media (min-width: 992px) {
    .mobile-hero-image {
        display: none !important; /* FORÇA ocultar a imagem no desktop */
    }

    .hero-bg-wrapper {
        -webkit-mask-image: none;
        mask-image: none;
    }

    #hero {
        background-image: url('../hero%20desktop%20livia.png') !important; /* FORÇA o background desktop */
        background-position: right top !important;
        background-size: cover !important;
        align-items: center;
        padding: 0 !important; /* Remove padding mobile */
        min-height: 100vh !important; /* Restaura altura full viewport */
    }

    #hero .container {
        justify-content: center;
        align-items: flex-start; /* Desktop: Alinha à esquerda */
        padding-top: 0;
    }

    .hero-content {
        max-width: 45vw;
        min-width: 480px;
        margin-left: 8vw;
        margin-right: 0; /* Reseta margin auto do mobile */
        padding: 0;
        text-align: left;
    }

    #hero h1 {
        /* Fonte fluida: escala suavemente com a tela, nunca ficando gigante ou minúscula demais */
        font-size: clamp(2rem, 3.2vw, 3.5rem);
        margin-bottom: 0.5rem;
        white-space: nowrap;
    }

    .hero-subtitle {
        font-size: clamp(1.1rem, 1.25vw, 1.5rem); /* Subtítulo também escala */
        line-height: 1.3;
        max-width: 100%;
        margin-bottom: 2rem;
    }

    .hero-features li {
        font-size: 1.1rem;
    }
    
    .btn-outline {
        padding: 14px 48px;
        font-size: 1.1rem;
    }
}

/* =========================================
   SEÇÃO SOBRE A DRA
   ========================================= */
#dra-michele {
    width: 100%;
    background-color: #e8e6e1; /* Continuação do fundo claro/bege */
    position: relative;
    /* Ajuste para descer a seção mas manter a conexão com o quadrado */
    margin-top: -150px; /* Sobe menos (era -100px) para descer visualmente, mas ainda conectar com o fundo extendido */
    z-index: 1; /* BAIXO: Para ficar ABAIXO da faixa escura da seção anterior */
}

.split-container {
    display: flex;
    flex-direction: column; /* Mobile: Empilhado */
    width: 100%;
}

/* Coluna da Imagem */
.image-column {
    width: 100%;
    position: relative;
    height: auto;
    /* No mobile, a imagem ocupa a largura total */
    margin-top: 0; /* Garante zero margem */
}

.dra-photo {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Logo sobreposta (Vertical) */
.dra-logo-overlay {
    display: none; /* Mobile: Não precisa da logo */
}

/* Coluna de Texto */
.text-column {
    width: 100%;
    padding: 60px 20px;
    background-color: #e8e6e1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-wrapper {
    max-width: 600px;
    width: 100%;
}

/* Tipografia Específica da Seção */
#dra-michele .section-tag {
    margin-bottom: 1.5rem;
    display: block;
    color: var(--cacau-light);
}

#dra-michele h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: #000;
    margin-bottom: 2rem;
    font-weight: 400;
    line-height: 1.2;
}

.bio-text {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--cacau);
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.credentials-list {
    list-style: none;
    padding: 0;
    margin-bottom: 2.5rem;
}

.credentials-list li {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #000;
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
}

.credentials-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #000;
    font-weight: bold;
}

.philosophy-text {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--cacau);
    line-height: 1.6;
    margin-bottom: 3rem;
    font-style: italic; /* Opcional, para destacar a filosofia */
}

/* Responsivo Desktop */
@media (min-width: 992px) {
    .split-container {
        flex-direction: row; /* Desktop: Lado a lado */
        min-height: 100vh; /* Ocupa a tela toda */
    }
    
    .image-column {
        width: 50%; /* Metade da tela */
        height: auto;
        flex-shrink: 0; /* Não encolhe */
    }
    
    .dra-photo {
        height: 100%; /* Cobre toda a altura da coluna */
        width: 100%;
    }
    
    /* Logo no Desktop: posicionamento "entre a borda direita (dentro e fora da foto)" */
    /* Vamos colocar na junção das duas colunas */
    .dra-logo-overlay {
        display: block; /* Desktop: Visível */
        position: absolute;
        right: 12px; /* Ajuste fino: 8px para a direita (era 20px) */
        top: 50%; /* Centraliza verticalmente na imagem */
        /* Centraliza no meio da linha e GIRA 90 graus anti-horário */
        transform: translate(50%, -50%) rotate(-90deg); 
        height: 120px; /* Reduzido de 180px para ficar menor */
        width: auto;
        z-index: 10; /* Garante visibilidade sobre ambas as colunas */
    }
    
    .text-column {
        width: 50%; /* Metade da tela */
        padding: 80px 60px; /* Mais espaço interno */
        justify-content: flex-start; /* Alinha mais ao topo/esquerda visualmente */
    }
    
    .content-wrapper {
        margin-left: 40px; /* Afasta um pouco da imagem */
    }
    
    #dra-michele h2 {
        font-size: 3rem;
    }
}
#avaliacao {
    background-color: #FAF5F4; /* Cor de fundo leve ao invés do cinza/pistache */
    padding: 80px 0;
    position: relative;
    /* Remove a linha branca (gap de renderização) puxando a seção para cima */
    margin-top: -1px; 
}

#avaliacao .container {
    max-width: 900px; /* Conteúdo mais centralizado */
    width: 90%;
    margin: 0 auto;
}

/* Reutilizando estilos de tipografia da seção anterior */
#avaliacao .section-tag {
    margin-bottom: 1rem;
    display: block;
}

#avaliacao h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: #000;
    margin-bottom: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
}

#avaliacao .intro-text {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--cacau);
    margin-bottom: 4rem;
    line-height: 1.6;
}

/* Timeline Container */
.timeline {
    position: relative;
    padding-left: 20px; /* Espaço para a linha */
    margin-bottom: 4rem;
}

/* Linha pontilhada vertical */
.timeline::before {
    content: '';
    position: absolute;
    left: 7px; /* Centraliza no marker (16px / 2 - 1px) */
    top: 10px; /* Começa no primeiro marker */
    bottom: 10px; /* Termina no último marker */
    width: 2px;
    border-left: 2px dotted #CDA09B; /* Tom da paleta Livia */
    z-index: 1;
}

.timeline-item {
    position: relative;
    margin-bottom: 3rem;
    padding-left: 30px; /* Afasta o conteúdo da linha */
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* Bolinha do Timeline */
.timeline-marker {
    position: absolute;
    /* Ajuste Preciso: */
    /* Linha está em left: 7px (e tem 2px de largura). O centro da linha é 8px. */
    /* Marker tem 16px de largura. O centro do marker é 8px. */
    /* Para o centro do marker (8px) bater com o centro da linha (8px), o left deve ser 0. */
    /* Se left: 0 não funcionou, vamos tentar mover visualmente para a esquerda. */
    /* Talvez o contexto de posicionamento esteja diferente. */
    left: -7px; /* Forçando para a esquerda para alinhar visualmente sobre a linha */
    left: -20px; /* Ajuste fino: 2px para a direita (era -22px) conforme solicitado */
    top: 5px;
    width: 16px;
    height: 16px;
    background-color: #AA7F79; /* Tom escuro da paleta */
    border-radius: 50%;
    z-index: 2; /* Fica acima da linha */
}

.timeline-content h3 {
    font-family: var(--font-heading); /* Courier Prime para os títulos da lista */
    font-size: 1.2rem;
    color: #AA7F79;
    margin-bottom: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.timeline-content p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--cacau);
    line-height: 1.6;
    margin: 0;
}

.section-actions.center {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Galeria de Consulta */
.consultation-gallery {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative; /* Para o background pseudo-element */
    padding: 0;
    margin-top: 5rem;
    
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna */
    gap: 10px; /* Espaço entre imagens para ver o fundo */
    padding-bottom: 20px; /* Espaço extra embaixo */
}

/* Fundo Escuro Parcial (#302a27) */
.consultation-gallery::before {
    content: '';
    position: absolute;
    top: 0; /* Mobile: Começa do início das imagens */
    left: 0;
    width: 100%;
    height: 100%; /* Mobile: Cobre tudo até o final do container */
    background-color: #302a27;
    z-index: 10; /* ALTO: Fica acima da imagem da Dra (que terá z-index menor) */
}

.gallery-item {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative; /* Para aceitar z-index */
    z-index: 11; /* MAIOR QUE O FUNDO: Garante que as imagens fiquem VISÍVEIS sobre o fundo */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* Responsivo Desktop */
@media (min-width: 992px) {
    #avaliacao h2 {
        font-size: 3rem;
    }
    
    .timeline {
        padding-left: 0;
    }
    
    /* Restaura a posição dos markers no desktop se necessário */
    .timeline-marker {
        left: -1px; /* 7px a direita do valor original (-8px + 7px = -1px) */
    }
    
    .consultation-gallery {
        grid-template-columns: repeat(4, 1fr); /* Desktop: 4 colunas */
        height: 400px;
        gap: 15px; /* Espaço maior no desktop */
        padding: 0 15px 40px 15px; /* Padding lateral e inferior */
        box-sizing: border-box;
    }
    
    .gallery-item {
        height: 100%;
    }
    
    /* Ajuste do fundo escuro no desktop para alinhar com o print */
    .consultation-gallery::before {
        top: 40%; /* Começa mais pra baixo (quase na metade) */
        height: 75%; /* Reduzido ainda mais (era 85%) */
        bottom: -250px; /* Mantido ou ajustado se necessário, mas height controla o fim */
    }
}
#identificacao {
    position: relative;
    width: 100%;
    /* Altura mínima para garantir que o background apareça */
    min-height: 100vh; 
    
    /* Background Mobile */
    background-image: url('../img/queixas%20mobile%20livia.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Padding padrão */
    padding: 80px 0;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

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

/* Tag de Seção (QUEIXAS MAIS COMUNS) */
.section-tag {
    font-family: var(--font-body);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--cacau-light);
    display: block;
    margin-bottom: 1rem;
    font-weight: 500;
}

/* Título (Quando o olhar pesa...) */
#identificacao h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: #000;
    margin-bottom: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
}

/* Texto Introdutório */
#identificacao .intro-text {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--cacau);
    max-width: 800px;
    margin: 0 auto 3rem auto;
    line-height: 1.6;
}

/* Grid de Cards (antigo) */
.cards-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna */
    width: 100%;
    max-width: 100%;
    margin-bottom: 3rem;
}

/* =========================================
   NOVO LAYOUT QUEIXAS - 3 Cards
   ========================================= */
.intro-hint {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #AA7F79;
    font-style: italic;
    margin-bottom: 2rem;
    letter-spacing: 0.02em;
}

.queixas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin-bottom: 2.5rem;
}

.queixa-card {
    background-color: #E8CECD;
    border-radius: 16px;
    padding: 2rem 1.8rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.queixa-line {
    width: 36px;
    height: 3px;
    background-color: #CDA09B;
    border-radius: 2px;
    margin-bottom: 1rem;
}

.queixa-card h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: #302a27;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.queixa-card p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #4a423e;
    line-height: 1.6;
    margin: 0;
}

.queixas-fechamento {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #302a27;
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2rem auto;
    line-height: 1.5;
}

.btn-queixas {
    display: inline-block;
    background-color: #AA7F79;
    color: #FFFFFF !important;
    padding: 14px 40px;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 10;
}

.btn-queixas:hover {
    background-color: #CDA09B;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(170, 127, 121, 0.4);
}

@media (min-width: 768px) {
    .queixas-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}


/* Estilo Base dos Cards */
.card {
    padding: 2.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    transition: all 0.3s ease;
}

.card p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #000;
    line-height: 1.4;
    max-width: 90%;
    margin: 0;
}

/* Cores dos Cards (Alternando conforme a paleta) */
.card-1 {
    background-color: #d6d0c4; /* Bege mais claro */
}

.card-2 {
    background-color: #7a7859; /* Pistachio/Verde Militar */
    color: #fff !important; /* Texto branco no fundo escuro? Vamos testar se preto fica melhor ou não */
}
/* Ajuste específico para texto no fundo escuro se necessário */
.card-2 p, .card-4 p {
    color: #000; /* Mantendo preto conforme o print, ou ajustando se o contraste for ruim */
}

.card-3 {
    background-color: #d6d0c4; /* Repete o bege claro */
    /* Ou uma variação levemente diferente se tiver na paleta: #c9bda9 */
    background-color: #d0c8bb;
}

.card-4 {
    background-color: #7a7859; /* Repete o Pistachio */
}

/* Ajuste Fino das Cores conforme Print */
/* 
   Card 1: Bege Claro (Natural)
   Card 2: Verde Oliva Escuro
   Card 3: Bege Médio
   Card 4: Verde Oliva Escuro
*/
.card-1 { background-color: #dcd6cc; }
.card-2 { background-color: #7b795a; }
.card-3 { background-color: #d3cec3; }
.card-4 { background-color: #7b795a; }


/* Responsivo Desktop */
@media (min-width: 992px) {
    #identificacao {
        background-image: url('../img/queixas%20desktop%20livia.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    #identificacao h2 {
        font-size: 3rem;
    }

    .cards-grid {
        grid-template-columns: repeat(4, 1fr); /* Desktop: 4 colunas lado a lado */
    }
    
    .card {
        min-height: 250px; /* Mais altos no desktop */
        padding: 2rem;
    }
}

/* =========================================
   SEÇÃO BLEFAROPLASTIA (TIPOS)
   ========================================= */
#blefaroplastia-tipos {
    position: relative;
    width: 100%;
    min-height: 600px; /* Altura mínima para mostrar a imagem de fundo */
    background-image: url('../img/blefaroplastia-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end; /* Alinha o conteúdo (box) na parte inferior por padrão ou centro */
    justify-content: center;
    padding: 0 20px 60px 20px; /* Restaurado padding bottom para não cortar a seção visualmente */
    /* Ajuste para sobreposição ou continuidade se necessário */
    margin-top: 0;
}

#blefaroplastia-tipos .container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    display: flex;
    align-items: flex-end; /* Box fica em baixo */
    justify-content: center; /* Centralizado horizontalmente */
    min-height: 500px; /* Garante altura para o flex funcionar bem no mobile */
}

/* Caixa de Texto Translúcida */
.info-box {
    background-color: rgba(232, 230, 225, 0.85); /* Cor Ivory com transparência */
    padding: 30px;
    max-width: 900px;
    width: 100%;
    backdrop-filter: blur(5px); /* Efeito de desfoque no fundo */
    /* Posicionamento */
    margin-bottom: 0; /* Remove margem inferior extra para alinhar com o padding da seção */
    margin-top: 280px; /* Aumentado significativamente para empurrar para baixo */
}

.info-box h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #000;
    margin-bottom: 1.5rem;
    font-weight: 400;
    letter-spacing: 1px;
}

.info-box p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #000;
    line-height: 1.6;
    margin: 0;
}

/* Logo Circular no Canto Superior Direito */
.logo-circular {
    position: absolute;
    top: -20px; /* Ajuste fino em relação ao container */
    right: 20px;
    width: 120px; /* Tamanho do logo */
    height: auto;
    z-index: 10;
}

/* =========================================
   SEÇÃO PASSO A PASSO (GRID 4 CARDS)
   ========================================= */
#passo-a-passo {
    width: 100%;
    background-color: var(--brand-bg); /* Fundo Ivory para a coluna da esquerda */
    position: relative;
    /* Remove a linha branca (gap de renderização) se houver */
    margin-top: -1px; 
}

/* Coluna da Esquerda (Intro) */
.intro-column {
    width: 100%;
    padding: 60px 20px;
    background-color: var(--brand-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

#passo-a-passo .section-tag {
    margin-bottom: 1.5rem;
    display: block;
    color: var(--brand-medium);
    letter-spacing: 2px;
    font-size: 0.9rem;
    text-transform: uppercase;
}

#passo-a-passo h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-bottom: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

#passo-a-passo .intro-text {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--text-medium);
    line-height: 1.5;
    margin-bottom: 3rem;
}

/* Coluna da Direita (Grid de Cards) */
.steps-grid-column {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna */
    /* Sem gap, os cards se tocam */
}

.step-card {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Cores dos Cards - Baseado na imagem fornecida */
.card-dark {
    background-color: #DFCBC9; /* Nude mais claro (Cards 01 e 04) */
    color: var(--text-dark);
}

.card-medium {
    background-color: #D0B5B3; /* Nude ligeiramente mais escuro (Cards 02 e 03) */
    color: var(--text-dark);
}

.step-number {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    margin-right: 12px;
    color: var(--text-dark);
    opacity: 0.7;
}

.step-card h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    display: flex;
    align-items: baseline; /* Alinha o número e o texto na mesma linha */
}

.step-card p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-dark);
    margin: 0;
}

/* Botão Quero Conhecer Mais do passo a passo */
#passo-a-passo .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c9a7a6;
    border-radius: 50px;
    padding: 12px 32px;
    color: var(--text-medium);
    text-transform: none;
    font-size: 1.1rem;
    background: transparent;
    transition: all 0.3s ease;
}

#passo-a-passo .btn-outline:hover {
    background-color: var(--brand-accent);
    color: #fff;
    border-color: var(--brand-accent);
}

/* Responsivo Desktop (Blefaroplastia) */
@media (min-width: 992px) {
    #blefaroplastia-tipos {
        height: 100vh; /* Ocupa a tela toda no desktop */
        align-items: center; /* Centraliza verticalmente se preferir, ou flex-end como no print */
    }

    #blefaroplastia-tipos .container {
        align-items: flex-end; /* Mantém em baixo no desktop também, conforme print parece ser */
        padding-bottom: 80px;
        max-width: 1400px; /* Aumentado para permitir maior largura do conteúdo */
    }

    .info-box {
        padding: 60px;
        max-width: 100%; /* Ocupa toda a largura disponível no container */
        margin-top: 0; /* Remove a margem superior no desktop para manter o layout original */
    }

    .info-box h2 {
        font-size: 2.5rem;
    }

    .info-box p {
        font-size: 1.1rem;
    }

    .logo-circular {
        width: 150px; /* Maior no desktop */
        top: 40px;
        right: 40px;
    }
}

/* =========================================
   SEÇÃO FAQ (DÚVIDAS FREQUENTES)
   ========================================= */
#faq {
    width: 100%;
    background-color: var(--ivory);
    padding: 64px 0; /* Mobile padding */
    position: relative;
    /* Remove a linha branca (gap de renderização) se houver */
    margin-top: -1px; 
}

#faq .container {
    max-width: 720px; /* Largura reduzida para leitura */
    width: 90%;
    margin: 0 auto;
}

/* Header da Seção */
#faq .section-header {
    text-align: center;
    margin-bottom: 3rem;
}

#faq .label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--especiaria);
    display: block;
    margin-bottom: 1rem;
}

#faq h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--cacau);
    font-weight: 400;
    line-height: 1.3;
}

/* Lista FAQ Accordion */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--white);
    border: 1px solid var(--natural);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s;
}

.faq-item:hover {
    border-color: rgba(133, 70, 39, 0.3); /* especiaria sutil */
}

/* Botão da Pergunta */
.faq-pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 22px 28px; /* Mobile: reduzido no JS se necessário, mas CSS define */
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cacau);
    text-align: left;
    transition: color 0.3s;
}

.faq-pergunta:hover {
    color: var(--especiaria);
}

.faq-icon {
    font-family: var(--font-body); /* Ou heading para um + mais estilizado */
    font-size: 1.5rem;
    color: var(--natural);
    font-weight: 400;
    transition: transform 0.35s ease;
    line-height: 1;
}

/* Estado Aberto */
.faq-item.aberto .faq-icon {
    transform: rotate(45deg); /* Vira um X */
    color: var(--especiaria);
}

.faq-item.aberto .faq-pergunta {
    color: var(--especiaria);
}

/* Resposta */
.faq-resposta {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-item.aberto .faq-resposta {
    max-height: 500px; /* Valor seguro suficiente para texto */
}

.faq-resposta-inner {
    padding: 0 28px 24px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--cacau-light);
    line-height: 1.75;
}

/* Responsivo Desktop */
@media (min-width: 992px) {
    #faq {
        padding: 100px 0;
    }
}

/* =========================================
   FOOTER
   ========================================= */
footer {
    background: #D0B5B3;
    padding: 48px 0 40px;
    border-top: 1px solid rgba(48, 42, 39, 0.1);
    color: var(--cacau);
    width: 100%;
}

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

/* Grid do Footer */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna */
    gap: 40px;
    margin-bottom: 32px;
    text-align: center; /* Mobile: Centralizado */
}

/* Coluna Identidade */
.footer-col.identity {
    display: flex;
    flex-direction: column;
    align-items: center; /* Mobile: Centralizado */
}

.footer-logo-img {
    width: 200px; /* Logo horizontal maior */
    height: auto;
    margin-bottom: 16px;
    opacity: 0.9;
}

.footer-role {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--cacau-light);
    margin: 0;
    letter-spacing: 0.02em;
    line-height: 1.6; /* Aumentado para melhor leitura do texto longo */
    text-align: left; /* Garante alinhamento à esquerda mesmo no desktop se herdar center */
}

/* Títulos das Colunas */
.footer-col h4 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--cacau);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

/* Coluna Navegação */
.footer-col.navigation {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center; /* Mobile: Centralizado */
}

.footer-col.navigation a {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--cacau-light);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-col.navigation a:hover {
    color: var(--especiaria);
}

/* Coluna Informações */
.footer-col.info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center; /* Mobile: Centralizado */
}

.footer-col.info p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--cacau-light);
    margin: 0;
    line-height: 1.5;
}

/* Coluna Links e Legal */
.footer-col.links-legal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center; /* Mobile: Centralizado */
}

.footer-col.links-legal a {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--cacau-light);
    text-decoration: none;
    transition: color 0.3s, text-decoration 0.3s;
}

.footer-col.links-legal a:hover {
    color: var(--especiaria);
    text-decoration: underline;
}

.legal-info {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(48, 42, 39, 0.1);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.legal-info p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--cacau-light);
    margin: 0;
}

/* Copyright */
.footer-copyright {
    border-top: 1px solid rgba(48, 42, 39, 0.1);
    margin-top: 48px;
    padding-top: 24px;
    text-align: center;
}

.footer-copyright p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--cacau-light);
    margin: 0;
}

/* Responsivo Desktop */
@media (min-width: 992px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr; /* 4 colunas (Identidade maior) */
        text-align: left; /* Desktop: Alinhado à esquerda */
        align-items: start;
        gap: 32px;
    }

    .footer-col.identity,
    .footer-col.navigation,
    .footer-col.info,
    .footer-col.links-legal {
        align-items: flex-start; /* Desktop: Alinhado à esquerda */
    }
}

/* =========================================
   BOTÃO FLUTUANTE WHATSAPP
   ========================================= */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background-color: #25d366; /* Verde oficial do WhatsApp */
    border-radius: 50%; /* Torna o botão redondo */
    z-index: 1000;
    transition: transform 0.3s ease;
    /* Sombras para destaque */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
    display: flex; /* Centraliza o ícone */
    align-items: center;
    justify-content: center;
    padding: 10px; /* Espaço interno para o ícone */
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-float img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* Se o ícone for preto ou outra cor, use filter: brightness(0) invert(1) para branco se necessário */
    /* filter: brightness(0) invert(1); */
}

/* Responsivo Mobile */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
}
#localizacao {
    width: 100%;
    background-color: var(--white);
    padding: 64px 0; /* Mobile padding */
    position: relative;
    border-top: 1px solid rgba(201, 189, 169, 0.3); /* var(--natural) com opacity */
    /* Remove a linha branca (gap de renderização) se houver */
    margin-top: -1px; 
}

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

/* Header da Seção (Alinhado à Esquerda nesta seção) */
#localizacao .section-header {
    text-align: left;
    margin-bottom: 3rem;
    max-width: 800px;
}

#localizacao .label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--especiaria);
    display: block;
    margin-bottom: 1rem;
}

#localizacao h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--cacau);
    font-weight: 400;
    line-height: 1.3;
}

/* Grid de Localização */
.location-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna */
    gap: 32px;
    width: 100%;
}

/* Mapa */
.mapa-container {
    width: 100%;
    height: 100%;
    min-height: 300px; /* Mobile height */
    border-radius: 16px;
    overflow: hidden;
}

/* Informações */
.info-container {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.info-block {
    display: flex;
    flex-direction: column;
}

.info-title {
    font-family: var(--font-body);
    font-weight: 600; /* Semibold */
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pistachio);
    margin-bottom: 8px;
}

.info-content {
    font-family: var(--font-body);
    font-weight: 400; /* Regular */
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--cacau);
    margin: 0;
}

.contact-link {
    color: var(--cacau);
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

.contact-link:hover {
    text-decoration: underline;
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-links a {
    font-family: var(--font-body);
    font-weight: 500; /* Medium */
    font-size: 0.9rem;
    color: var(--especiaria);
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

.social-links a:hover {
    text-decoration: underline;
}

/* Badge Atendimento Particular */
.badge-particular {
    display: inline-block;
    background: rgba(133, 70, 39, 0.08); /* especiaria com opacity */
    border: 1px solid rgba(133, 70, 39, 0.18);
    border-radius: 50px;
    padding: 8px 20px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--especiaria);
    letter-spacing: 0.04em;
    margin-top: 4px; /* Ajuste fino */
    align-self: flex-start; /* Não esticar no flex container */
}

/* Galeria Consultório */
.clinic-gallery {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna */
    gap: 16px;
    margin-top: 48px;
    width: 100%;
}

.clinic-img-wrapper {
    width: 100%;
    height: 400px; /* Aumentado para formato vertical (tipo Reel) */
    border-radius: 12px;
    overflow: hidden;
}

.clinic-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.clinic-img-wrapper:hover img {
    transform: scale(1.05);
}

/* Responsivo Tablet e Desktop */
@media (min-width: 600px) {
    #localizacao .location-grid {
        grid-template-columns: 1fr 1fr; /* 2 colunas */
        gap: 32px;
    }
    
    .mapa-container {
        min-height: 400px;
    }

    /* Galeria em grid no tablet também */
    .clinic-gallery {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas */
    }
}

@media (min-width: 900px) {
    #localizacao {
        padding: 100px 0;
    }
    
    #localizacao .location-grid {
        gap: 48px;
    }
}
#depoimentos {
    width: 100%;
    background-color: var(--ivory);
    padding: 64px 0; /* Mobile padding */
    position: relative;
    /* Remove a linha branca (gap de renderização) se houver */
    margin-top: -1px; 
}

#depoimentos .container {
    max-width: 880px; /* Largura reduzida para centralizar os cards */
    width: 90%;
    margin: 0 auto;
}

/* Header da Seção */
#depoimentos .section-header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#depoimentos .label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--especiaria);
    display: block;
    margin-bottom: 1rem;
}

#depoimentos h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--cacau);
    font-weight: 400;
    line-height: 1.3;
}

/* Grid de Depoimentos */
.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna */
    gap: 24px;
    width: 100%;
}

/* Card de Depoimento */
.testimonial-card {
    background-color: var(--white);
    border: 1px solid var(--natural);
    border-radius: 16px;
    padding: 28px 24px; /* Mobile padding */
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 20px rgba(48,42,39,0.04); /* Sombra sutil */
    transition: transform 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-3px);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.review-header .stars {
    color: #fabb05; /* Amarelo Google */
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.review-time {
    font-size: 0.8rem;
    color: var(--natural);
    font-family: var(--font-body);
}

.testimonial-text {
    font-family: var(--font-body);
    font-weight: 400; /* Regular */
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--cacau-light);
    font-style: italic;
    margin: 0;
    flex-grow: 1; /* Estende pra deixar autor sempre alinhado embaixo no card */
}

.testimonial-divider {
    width: 40px;
    height: 1px;
    background-color: var(--natural);
    margin: 20px 0;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.testimonial-author .name {
    font-family: var(--font-heading);
    font-weight: 600; /* Semibold */
    font-size: 1.1rem;
    color: var(--cacau);
}

.testimonial-author .review-status {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--natural);
}

/* Rodapé Google Reviews */
.google-reviews-footer {
    text-align: center;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.stars-icon svg {
    display: block;
}

.google-reviews-footer p {
    font-family: var(--font-body);
    font-weight: 400; /* Regular */
    font-size: 0.78rem;
    color: var(--pistachio);
    margin: 0;
}

.google-reviews-footer a {
    font-family: var(--font-body);
    font-weight: 500; /* Medium */
    color: var(--especiaria);
    text-decoration: none;
    margin-left: 4px;
}

.google-reviews-footer a:hover {
    text-decoration: underline;
}

/* Responsivo Desktop */
@media (min-width: 992px) {
    #depoimentos {
        padding: 100px 0;
    }

    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr); /* Desktop: 3 colunas */
    }

    .testimonial-card {
        padding: 36px 32px; /* Desktop padding */
    }
}
#procedimentos {
    width: 100%;
    background-color: var(--ivory);
    padding: 80px 20px;
    position: relative;
    /* Remove a linha branca (gap de renderização) se houver */
    margin-top: -1px; 
}

#procedimentos .container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: block; /* Reseta flex column do hero container se herdado */
}

/* Header da Seção */
#procedimentos .section-header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#procedimentos .label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--especiaria);
    display: block;
    margin-bottom: 1rem;
}

#procedimentos h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--cacau);
    font-weight: 400;
    line-height: 1.3;
}

/* Grid de Procedimentos */
.procedures-grid {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Gap vertical entre linhas */
}

/* Linha do Grid (Par de Blocos) */
.proc-row {
    display: flex;
    flex-direction: column; /* Mobile: Empilhado */
    gap: 16px; /* Gap entre bloco de imagem e texto no mobile */
    width: 100%;
}

/* Blocos Comuns */
.proc-block {
    border-radius: 12px;
    width: 100%;
    /* Aspect ratio generoso */
    min-height: 300px;
}

/* Bloco de Texto */
.text-block {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.text-block h3 {
    font-family: var(--font-heading);
    font-weight: 700; /* Bold */
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.proc-subtitle {
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
    margin-bottom: 1rem;
    display: block;
}

.text-block p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* Bloco de Imagem (Placeholder) */
.img-block {
    /* Por enquanto cor sólida, futuramente <img> */
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden; /* Para conter a imagem */
}

.img-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Cores de Fundo */
.bg-natural { background-color: var(--natural); }
.bg-especiaria { background-color: var(--especiaria); }
.bg-pistachio { background-color: var(--pistachio); }
.bg-white { background-color: var(--white); }
.bg-ivory { background-color: var(--ivory); }

/* Cores de Texto (Contraste) */
.bg-natural, .bg-white, .bg-ivory { color: var(--cacau); }
.bg-natural h3, .bg-white h3, .bg-ivory h3 { color: var(--cacau); }

.bg-especiaria, .bg-pistachio, .bg-cacau { color: #fff; }
.bg-especiaria h3, .bg-pistachio h3, .bg-cacau h3 { color: #fff; }

/* Separador Atualizado */
.proc-separator-title {
    width: 100%;
    text-align: center;
    margin-top: 56px;
    margin-bottom: 32px;
}

.proc-separator-title span {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pistachio);
    display: block;
}

/* Grid de Cards Compactos (Complementares) */
.complementary-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 coluna */
    gap: 16px;
    width: 100%;
}

/* Card Compacto */
.compact-card {
    background-color: var(--white);
    border: 1px solid var(--natural);
    border-radius: 12px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.compact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.compact-card h3 {
    font-family: var(--font-heading);
    font-weight: 700; /* Bold */
    font-size: 0.95rem;
    color: var(--cacau);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.compact-card p {
    font-family: var(--font-body);
    font-weight: 400; /* Regular */
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--cacau-light);
    margin: 0;
}

/* Footer da Seção */
.section-footer {
    text-align: center;
    margin-top: 60px;
    padding: 0 20px;
}

.section-footer p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--cacau-light);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.btn-solid {
    display: inline-block;
    background-color: var(--cacau);
    color: #fff;
    padding: 16px 40px;
    border-radius: 50px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-solid:hover {
    background-color: var(--especiaria);
    transform: translateY(-2px);
}

/* Responsivo Desktop */
@media (min-width: 992px) {
    #procedimentos {
        padding: 100px 0;
    }

    #procedimentos h2 {
        font-size: 3rem;
    }

    /* Grid layout */
    .proc-row {
        flex-direction: row; /* Lado a lado */
        gap: 16px;
        align-items: stretch; /* Mesma altura */
    }

    /* Alternância Ziguezague */
    /* text-left: Texto (1) Imagem (2) */
    .text-left .text-block { order: 1; }
    .text-left .img-block { order: 2; }

    /* text-right: Imagem (1) Texto (2) */
    .text-right .img-block { order: 1; }
    .text-right .text-block { order: 2; }

    .proc-block {
        width: 50%; /* Metade da largura */
        min-height: 350px; /* Mais alto no desktop */
    }

    .text-block {
        padding: 36px 32px;
    }

    .text-block h3 {
        font-size: 1.5rem;
    }

    /* Grid Complementar Desktop */
    .complementary-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas */
        /* Para centralizar a última linha de 2 cards, usamos flexbox ou truques de grid. 
           Grid puro alinha à esquerda. Vamos tentar centralizar o container grid se sobrar espaço?
           Não, para centralizar itens na última linha, flex-wrap é melhor, ou alinhamento específico.
           Mas o prompt pede: "Segunda linha: 2 cards centralizados".
           Com grid 3 colunas, os 2 últimos ficam na esquerda.
           Vamos usar justify-content: center no grid container? Não funciona assim no grid padrão.
           
           Melhor abordagem: Grid 6 colunas e spans? Ou Flexbox com wrap e justify-center?
           Flexbox é mais fácil para "centralizar a última linha incompleta".
        */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .compact-card {
        /* Largura para caber 3 em uma linha com gap de 16px */
        /* calc((100% - 2 * 16px) / 3) */
        width: calc((100% - 32px) / 3);
        flex: 0 0 calc((100% - 32px) / 3);
    }
}

/* Tablet (768px a 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .complementary-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas */
        /* Se usar flex, ajusta width */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .compact-card {
        width: calc((100% - 16px) / 2);
        flex: 0 0 calc((100% - 16px) / 2);
    }
}

/* Mobile Specific Order Override */
@media (max-width: 991px) {
    /* No mobile, sempre imagem em cima do texto */
    .proc-row {
        gap: 0; /* Remove gap interno do par para parecer um card único ou manter coesão */
        margin-bottom: 12px; /* Gap entre os pares */
    }
    
    .proc-row .img-block {
        order: 1;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        min-height: 250px; /* Altura da imagem no mobile */
    }
    
    .proc-row .text-block {
        order: 2;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    
    /* Ajuste para o gap geral da grid */
    .procedures-grid {
        gap: 24px; /* Mais espaço entre cards completos no mobile */
    }

    /* Troca de cores dos cards 3 e 4 no mobile para estética */
    /* Original: 1(Dark), 2(Medium), 3(Medium), 4(Dark) */
    /* Mobile: 1(Dark), 2(Medium), 3(Dark), 4(Medium) para alternar */
    
    /* Card 3 vira Nude Claro no mobile para alternar */
    .steps-grid-column .step-card:nth-child(3) {
        background-color: #DFCBC9;
    }
    
    /* Card 4 vira Nude Mais Escuro no mobile para alternar */
    .steps-grid-column .step-card:nth-child(4) {
        background-color: #D0B5B3;
    }
}
@media (min-width: 992px) {
    #passo-a-passo .split-container {
        flex-direction: row; /* Desktop: Lado a lado */
        min-height: 100vh; /* Ocupa a tela toda */
    }
    
    .intro-column {
        width: 40%; /* Menor que a metade */
        padding: 80px 60px;
        justify-content: flex-start; /* Alinha ao topo/esquerda */
    }
    
    .intro-column .content-wrapper {
        max-width: 400px; /* Limita largura do texto */
        margin: auto 0; /* Centraliza verticalmente no flex */
    }
    
    .steps-grid-column {
        width: 60%; /* Maior que a metade */
        grid-template-columns: 1fr 1fr; /* Desktop: 2 colunas */
        grid-template-rows: 1fr 1fr; /* 2 linhas iguais */
    }
    
    /* Ajuste de ordem visual para xadrez */
    /* 
       Grid 2x2:
       1 (Dark)   2 (Medium)
       3 (Medium) 4 (Dark)
    */
    
    .step-card {
        padding: 60px 40px; /* Mais espaço interno no desktop */
        justify-content: center; /* Centraliza conteúdo verticalmente */
    }
    
    #passo-a-passo h2 {
        font-size: 3.5rem; /* Título maior no desktop */
    }
}
/* =========================================
   SEÇÃO DE TRANSFORMAÇÕES (ANTES E DEPOIS)
   ========================================= */
#transformacoes {
    background-color: #AA7F79;
    padding: 80px 0;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

#transformacoes h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #fff;
    margin-bottom: 3rem;
    font-weight: 500;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.3;
}

.carousel-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto 3rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
    gap: 20px;
    padding: 20px 15%; /* Fixes centering for the first slide on mobile */
    align-items: center;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-slide {
    flex: 0 0 70%;
    max-width: 400px;
    scroll-snap-align: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.6;
    transform: scale(0.85);
}

.carousel-slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.carousel-slide img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    object-fit: cover;
}

.carousel-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    transition: opacity 0.3s;
    opacity: 0.8;
}

.carousel-btn:hover {
    opacity: 1;
}

.prev-btn {
    left: -40px;
}

.next-btn {
    right: -40px;
}

.transformacoes-fechamento {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: #fff;
    font-weight: 300;
    margin-bottom: 2rem;
    letter-spacing: 0.05em;
}

.btn-solid-dark {
    background-color: transparent !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}

.btn-solid-dark:hover {
    background-color: #fff !important;
    color: #AA7F79 !important;
}

@media (min-width: 768px) {
    .carousel-container {
        max-width: 1200px;
    }
    .carousel-track {
        padding: 40px calc(50% - 225px); /* Centraliza perfeitamente o card fixo */
    }
    .carousel-slide {
        flex: 0 0 450px;
        max-width: none; /* Sobrepõe os 400px do mobile */
    }
}
@media (max-width: 767px) {
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }
    #transformacoes h2 { font-size: 1.5rem; }
}

/* =========================================
   SEÇÃO O MÉTODO (ANTIGA AVALIAÇÃO)
   ========================================= */
#metodo {
    background-color: var(--ivory);
    padding: 80px 0;
}

#metodo .container {
    max-width: 1200px;
}

.metodo-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.metodo-info {
    flex: 1;
    padding-right: 0;
}

.metodo-info .section-tag {
    font-size: 0.8rem;
    color: #CDA09B;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 2rem;
    display: block;
}

.metodo-info h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: #302a27;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.metodo-info p {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: #4a423e;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.metodo-grid {
    flex: 1.2;
    display: grid;
    grid-template-columns: 1fr;
}

.metodo-card {
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.metodo-card-1 { background-color: #E8CECD; }
.metodo-card-2 { background-color: #DCAFAC; }
.metodo-card-3 { background-color: #DCAFAC; }
.metodo-card-4 { background-color: #E8CECD; }

.metodo-title-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 1.5rem;
}

.metodo-number {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    color: #AA7F79; /* Um tom mais escuro para o número */
    line-height: 1;
    opacity: 0.9;
}

.metodo-card h3 {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 600;
    color: #302a27;
    margin: 0;
    line-height: 1.3;
}

.metodo-card p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #4a423e;
    line-height: 1.6;
    margin: 0;
}

.btn-metodo {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 50px;
    border: 1px solid #AA7F79;
    color: #AA7F79;
    background-color: transparent;
    font-family: var(--font-body);
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-metodo:hover {
    background-color: #AA7F79;
    color: #fff;
}

@media (min-width: 992px) {
    .metodo-wrapper {
        flex-direction: row;
        align-items: stretch;
    }
    
    .metodo-info {
        padding-right: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .metodo-info h2 {
        font-size: 2.8rem;
    }
    
    .metodo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================
   SEÇÃO SAÚDE INTEGRAL (BANNERS)
   ========================================= */
#saude-integral {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0; /* Remove espaço extra no final das imagens */
}

#saude-integral img {
    width: 100%;
    height: auto;
    display: block;
}

#saude-integral .saude-banner-desktop {
    display: none;
}

#saude-integral .saude-banner-mobile {
    display: block;
}

/* Responsivo Desktop */
@media (min-width: 992px) {
    #saude-integral .saude-banner-desktop {
        display: block;
    }
    
    #saude-integral .saude-banner-mobile {
        display: none;
    }
}

/* =========================================
   OVERLAY DE CONTEÚDO SAÚDE INTEGRAL
   ========================================= */
.saude-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* No mobile, ajustamos a altura para encostar exatamente na primeira imagem */
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 3.5rem 1.5rem 1.5rem 1.5rem; /* Mais padding no topo para empurrar o bloco pra baixo no mobile */
    box-sizing: border-box;
    color: #fff;
    z-index: 2;
}

.saude-tag {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 2rem; /* Espaço generoso entre o título e o texto no mobile */
    color: #fff;
    opacity: 1; /* Sem transparência para não ficar ruim de visualizar */
    font-family: var(--font-heading);
    font-weight: 700; /* Mais forte e evidente */
}

.saude-desc {
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
    font-family: var(--font-body);
}

.saude-pills {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Mais enxuto no mobile */
    margin-bottom: 1.5rem;
}

.saude-pill {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 4px 16px 4px 4px; /* Mais enxuto no mobile */
    gap: 12px;
    width: 100%; /* Todos com o mesmo tamanho fixo baseado na tela */
    max-width: 320px;
}

.saude-icon-circle {
    width: 28px; /* Menor no mobile */
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.saude-icon-circle svg {
    width: 14px;
    height: 14px;
    color: #fff;
}

.saude-pill span {
    font-size: 0.9rem; /* Menor no mobile */
    font-family: var(--font-body);
}

.saude-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    font-family: var(--font-heading);
}

.btn-outline-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 10px 24px; /* Mais enxuto no mobile */
    color: #fff;
    font-size: 0.95rem; /* Menor no mobile */
    background: transparent;
    transition: all 0.3s ease;
    width: fit-content;
    text-decoration: none;
}

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

/* OVERLAY RESPONSIVO */
@media (min-width: 992px) {
    .saude-overlay {
        top: 0;
        right: 0;
        left: unset; /* Move para a metade direita no desktop */
        width: 50%;
        height: 100%;
        justify-content: flex-start; /* Joga tudo mais pra cima! */
        padding: 6rem 6rem; /* Top padding define a margem superior exata */
    }

    .saude-tag {
        margin-bottom: 2.5rem;
        font-size: 1rem;
        letter-spacing: 5px;
    }

    .saude-desc {
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 2rem;
        max-width: 90%;
    }

    .saude-pills {
        gap: 14px;
        margin-bottom: 2.5rem;
    }

    .saude-pill {
        padding: 10px 32px 10px 10px; /* Pill muito maior no desktop, mas uniforme */
        gap: 16px;
        max-width: 420px; /* Todas do mesmo tamanho e grandinhas */
    }

    .saude-icon-circle {
        width: 42px;
        height: 42px;
    }

    .saude-icon-circle svg {
        width: 20px;
        height: 20px;
    }

    .saude-pill span {
        font-size: 1.15rem; /* Maior destaque no desktop */
    }

    .saude-subtitle {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    .btn-outline-white {
        padding: 14px 36px;
        font-size: 1.1rem;
    }
}

@media (max-width: 380px) {
    .saude-overlay {
        padding: 2.5rem 1rem 1rem 1rem; /* Empurra pra baixo também em telas muito pequenas */
        height: 50%;
    }
    .saude-desc { font-size: 0.85rem; margin-bottom: 1rem; }
    .saude-pills { margin-bottom: 1rem; }
    .saude-subtitle { margin-bottom: 1rem; font-size: 1rem; }
}

/* =========================================
   SEÇÃO SOBRE A DRA. LÍVIA
   ========================================= */
#sobre-dra {
    width: 100%;
    background-color: #fff;
}

.split-container-sobre {
    display: flex;
    flex-direction: column;
}

.sobre-text-column {
    width: 100%;
    padding: 4rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sobre-content {
    max-width: 540px;
    width: 100%;
}

.sobre-tag {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #d1b4b1; /* Tom nude/rosa bem próximo do print */
    margin-bottom: 1.5rem;
    font-family: var(--font-heading);
    font-weight: 500;
}

.sobre-content h2 {
    font-family: var(--font-heading);
    font-size: 3.2rem; /* Bem grande conforme o print */
    color: #000;
    margin-bottom: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.sobre-desc {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-dark);
    line-height: 1.8; /* Mais espaçamento entre as linhas */
    margin-bottom: 2.5rem;
}

.sobre-quote {
    background-color: #fcf6f5; /* Fundo rosinha bem claro do quote */
    padding: 1.8rem 2.5rem;
    border-radius: 0; /* Bordas retas como no print */
    margin-bottom: 3rem;
    border-left: 2px solid transparent; /* Caso queira borda depois, mas no print não tem */
}

.sobre-quote p {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: #000;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.quote-author {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d1b4b1;
    font-family: var(--font-heading);
    font-weight: 600;
}

.btn-outline-brown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c9a7a6; /* Cor da borda mais nude/clara combinando com o botão "Quero conhecer mais" antigo */
    border-radius: 50px;
    padding: 12px 36px;
    color: var(--text-dark);
    font-size: 1.1rem;
    background: transparent;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: var(--font-body);
}

.btn-outline-brown:hover {
    background: #c9a7a6;
    color: #fff;
}

.sobre-img-column {
    width: 100%;
    /* No mobile, uma proporção elegante antes do texto seria bom, ou depois */
    height: 600px; 
}

.sobre-img-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center; /* Centraliza o corte da Dra Livia */
}

/* SOBRE RESPONSIVO */
@media (min-width: 992px) {
    .split-container-sobre {
        flex-direction: row;
        min-height: 100vh;
    }
    
    .sobre-text-column {
        width: 50%;
        padding: 4rem 8rem; /* Muito mais espaço interno no Desktop */
    }
    
    .sobre-img-column {
        width: 50%;
        height: auto; /* Estica junto com o texto */
    }

    .sobre-content h2 {
        font-size: 4rem; /* H2 monstruoso como no detalhe do print */
    }
}

/* =========================================
   SEÇÃO: SERVIÇOS E TRATAMENTOS
   ========================================= */
#servicos {
    padding: 6rem 0;
    background-color: var(--brand-bg); /* O nude claro de fundo da página */
    text-align: center;
}

.servicos-header {
    margin-bottom: 4rem;
}

.servicos-header h2 {
    font-size: 2.8rem;
    font-family: var(--font-heading);
    color: var(--text-dark);
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.servicos-header p {
    font-size: 1.1rem;
    font-family: var(--font-body);
    color: var(--text-dark);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.servicos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 4rem;
    text-align: left;
}

.servico-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 3rem 2.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.servico-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0,0,0,0.06);
}

.dark-servico {
    background-color: #D0B5B3; /* O nude escuro/cálido */
    color: #000;
    border-color: transparent;
}

.serv-num {
    display: block;
    font-size: 1.25rem;
    font-family: var(--font-heading);
    color: #c9a7a6;
    margin-bottom: 1.5rem;
    font-weight: 600;
    position: relative;
    letter-spacing: 2px;
}

.dark-servico .serv-num {
    color: #fff;
}

.serv-num::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background-color: currentColor;
    margin-top: 10px;
}

.servico-card h3 {
    font-size: 1.8rem;
    font-family: var(--font-heading);
    margin-bottom: 1rem;
    color: var(--text-dark);
    line-height: 1.2;
}

.dark-servico h3 {
    color: #000;
}

.servico-card p {
    font-size: 1rem;
    font-family: var(--font-body);
    line-height: 1.6;
    margin-bottom: 2rem;
    color: var(--text-dark);
    opacity: 0.9;
}

.dark-servico p {
    color: #000;
    opacity: 0.9;
}

.serv-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.serv-list li {
    font-size: 0.95rem;
    font-family: var(--font-body);
    color: var(--text-dark);
    margin-bottom: 1rem;
    position: relative;
    padding-left: 24px;
    line-height: 1.4;
}

.dark-servico .serv-list li {
    color: #000;
}

.serv-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1rem;
    color: #c9a7a6;
    font-weight: bold;
}

.dark-servico .serv-list li::before {
    color: #fff;
}

.servicos-cta {
    text-align: center;
}

/* RESPONSIVO DE SERVIÇOS */
@media (min-width: 992px) {
    .servicos-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
    
    .servico-card {
        padding: 4rem 3rem;
    }
}