@charset "UTF-8";

/* =========================================
   BASE OBRIGATÓRIA E VARIÁVEIS
========================================= */
:root {
    --cor-fundo: #FDFBF7;
    --cor-fundo-header: rgba(253, 251, 247, 0.85);
    /* Fundo translúcido premium */
    --cor-texto: #3A3535;
    --cor-primaria: #D4A5A5;
    --cor-primaria-hover: #BC8F8F;
    --cor-branca: #FFFFFF;

    --fonte-titulos: 'Playfair Display', serif;
    --fonte-padrao: 'DM Sans', sans-serif;

    --container-width: 1150px;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: clip;
    text-rendering: optimizeLegibility;
    touch-action: manipulation;
}

body {
    min-height: 100vh;
    font-family: var(--fonte-padrao);
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.6;
    position: relative;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    width: 100vw;
    max-width: 100%;
}

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

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

/* =========================================
   HEADER SMART & GAVETA LATERAL (BEM)
========================================= */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    /* Aceleração de Hardware para o Smart Header */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background-color 0.4s ease,
                box-shadow 0.4s ease,
                border-bottom 0.4s ease;
    border-bottom: 1px solid transparent;
}

.header--scrolled {
    background-color: var(--cor-fundo-header);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(212, 165, 165, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}

.header--hidden {
    /* Esconde o menu usando a GPU, sem causar reflow */
    transform: translateY(-100%);
}

.header__container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: clamp(0.8rem, 2vw, 1.2rem) 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__logo-img {
    display: block;
    width: clamp(70px, 7.5vw, 90px);
    height: auto;
    object-fit: contain;
}

/* Ocultos no Desktop */
.header__toggle,
.header__close,
.header__backdrop {
    display: none;
}

.header__list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.header__link {
    font-size: 0.95rem;
    font-weight: 500;
    position: relative;
    padding: 0.5rem 0;
    color: var(--cor-branca);
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
}

.header--scrolled .header__link {
    color: var(--cor-texto);
    text-shadow: none;
}

/* Efeito de underline usando ScaleX para evitar Reflow (PageSpeed 90+) */
.header__link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--cor-primaria);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.header__link:hover::after {
    transform: scaleX(1);
}

.header__cta {
    display: inline-block;
    background-color: var(--cor-primaria);
    color: var(--cor-texto);
    padding: 0.75rem 1.8rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 8px 20px rgba(212, 165, 165, 0.3);
}

.header__cta:hover {
    background-color: var(--cor-primaria-hover);
    transform: translateY(-2px);
}

/* Ajuste universal para o ícone de seta em todos os botões */
.icone-seta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* Garante que o SVG herde a cor do texto do botão */
.icone-seta svg {
    display: block;
    width: 1.1em;
    /* Tamanho relativo ao texto */
    height: 1.1em;
}

/* Efeito de hover que já tínhamos, agora no container do SVG */
.btn-shimmer-premium:hover .icone-seta,
.btn-submit-vip:hover .icone-seta {
    transform: translateX(5px);
}

/* =========================================
   RESPONSIVIDADE DO HEADER (MAX-WIDTH)
========================================= */

/* Tablet / Notebook */
@media (max-width: 1024px) {
    .header__container {
        padding: 1rem 1.5rem;
    }
}

/* Mobile Padrão e Pequeno (Transição para a Gaveta) */
@media (max-width: 768px) {
    .header__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        z-index: 1001; /* Fica acima da logo mas abaixo da gaveta */
    }

    .header__toggle-icon {
        width: 24px;
        height: 2px;
        background-color: var(--cor-branca);
        position: relative;
        transition: background-color 0.3s ease;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
    }

    .header--scrolled .header__toggle-icon {
        background-color: var(--cor-texto);
        box-shadow: none;
    }

    .header__toggle-icon::before,
    .header__toggle-icon::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: inherit;
        left: 0;
        box-shadow: inherit;
    }

    .header__toggle-icon::before { top: -8px; }
    .header__toggle-icon::after { bottom: -8px; }

    /* BACKDROP: Desfocado escuro */
    .header__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1050;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    .header__backdrop--visible {
        opacity: 1;
        visibility: visible;
    }

    /* GAVETA LATERAL (SIDE DRAWER) */
    .header__nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        max-width: 320px;
        height: 100dvh;
        background-color: var(--cor-fundo);
        z-index: 1100;
        padding: 6rem 2rem 2rem;
        display: flex;
        flex-direction: column;
        /* O Segredo do FPS 60+: GPU renderiza fora da tela */
        transform: translateX(100%);
        transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    }

    .header__nav--open {
        transform: translateX(0);
    }

    .header__close {
        display: flex;
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        width: 44px;
        height: 44px;
        font-size: 2.5rem;
        color: var(--cor-texto);
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(212, 165, 165, 0.1);
        transition: transform 0.3s ease, background 0.3s ease;
    }

    .header__close:active {
        transform: scale(0.85) rotate(90deg);
        background: rgba(212, 165, 165, 0.3);
    }

    .header__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    /* Efeito Cascata nos Itens */
    .header__item {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .header__nav--open .header__item {
        opacity: 1;
        transform: translateY(0);
        transition-delay: var(--delay);
    }

    .header__link {
        font-family: var(--fonte-titulos);
        font-size: clamp(1.8rem, 6vw, 2.2rem);
        color: var(--cor-texto);
        text-shadow: none; /* Anula sombra do desktop */
        padding-bottom: 4px;
        display: inline-block;
    }

    /* Tátil Animation para links Mobile */
    .header__link.clicked {
        animation: linkPulse 0.3s ease-out forwards;
        color: var(--cor-primaria);
    }

    @keyframes linkPulse {
        0% { transform: scale(1); }
        50% { transform: scale(0.9); }
        100% { transform: scale(1); }
    }

    .header__cta {
        width: 100%;
        text-align: center;
        margin-top: 1rem;
        padding: 1rem;
    }
}

/* Mobile Pequeno */
@media (max-width: 400px) {
    .header__container {
        padding: 0.8rem 1rem;
    }

    .header__logo-img {
        width: 65px;
    }

    .header__nav {
        max-width: 85vw; /* Ocupa um pouco menos em telas muito estreitas */
        padding: 5rem 1.5rem 2rem;
    }

    .header__link {
        font-size: 1.6rem;
    }
}

/* =========================================
   SEÇÃO 2: HERO VIDEO PREMIUM
========================================= */
.hero-video-section {
    position: relative;
    width: 100%;
    /* Ocupa a tela inteira, ignorando o header fixo */
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Fundo escuro como fallback enquanto o vídeo não carrega */
    background-color: #1A1818;
}

/* --- Container e Tag de Vídeo --- */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Garante que o vídeo preencha a tela sem distorcer */
    object-position: center center;
    /* Suaviza as bordas da compressão de vídeo */
    filter: contrast(1.05) saturate(1.1);
}

/* Overlay inteligente: Mais escuro embaixo para o texto, transparente no topo */
.hero-overlay-gradiente {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0%, rgba(26, 24, 24, 0.6) 100%);
    z-index: 2;
}

/* --- Conteúdo Centralizado --- */
.hero-conteudo-wrapper {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    /* Alinha o texto mais para baixo, deixando o rosto da Dra. (no vídeo) livre */
    align-items: flex-end;
    height: 100%;
    padding-bottom: 12vh;
}

.hero-box-text {
    max-width: 650px;
}

.hero-tag-video {
    display: inline-block;
    font-family: var(--fonte-padrao);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--cor-primaria);
    margin-bottom: 1rem;
    position: relative;
    padding-left: 45px;
}

.hero-tag-video::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 1px;
    background-color: var(--cor-primaria);
}

.hero-titulo-video {
    font-family: var(--fonte-titulos);
    /* Tipografia fluida absurda com clamp */
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    color: var(--cor-branca);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    font-weight: 500;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.hero-descricao-video {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
    line-height: 1.6;
    max-width: 500px;
    font-weight: 300;
}

/* Botão Magnético Premium */
.btn-hero-video {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background-color: var(--cor-primaria);
    color: var(--cor-texto);
    padding: 1.2rem 2.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 10px 30px rgba(212, 165, 165, 0.3);
    position: relative;
    overflow: hidden;
}

/* Efeito de brilho passando no botão (Hover) */
.btn-hero-video::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: all 0.7s ease;
}

.btn-hero-video:hover {
    background-color: var(--cor-primaria-hover);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(212, 165, 165, 0.4);
}

.btn-hero-video:hover::before {
    left: 200%;
}

.icone-seta {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.btn-hero-video:hover .icone-seta {
    transform: translateX(5px);
}

/* =========================================
   RESPONSIVIDADE (HERO VIDEO - 3 MEDIAS)
========================================= */

/* 1. Tablet / Notebook (<= 1024px) */
@media (width <=1024px) {
    .hero-conteudo-wrapper {
        padding-bottom: 10vh;
    }

    .hero-box-text {
        max-width: 550px;
    }

    .hero-titulo-video {
        /* Reduz levemente para não encostar nas bordas */
        font-size: clamp(2.5rem, 5vw, 3.8rem);
    }
}

/* 2. Mobile Padrão (<= 768px) */
@media (width <=768px) {
    .hero-conteudo-wrapper {
        padding-bottom: 15vh;
        /* Levanta o texto para não ficar atrás do botão flutuante futuramente */
        justify-content: center;
        text-align: center;
    }

    .hero-tag-video {
        padding-left: 0;
    }

    .hero-tag-video::before {
        display: none;
    }

    .hero-descricao-video {
        margin: 0 auto 2rem auto;
    }

    .btn-hero-video {
        width: 100%;
        justify-content: center;
        padding: 1.2rem 1rem;
    }
}

/* 3. Mobile Pequeno (<= 360px) */
@media (width <=360px) {
    .hero-conteudo-wrapper {
        padding: 0 1.2rem;
        padding-bottom: 12vh;
    }

    .hero-titulo-video {
        font-size: 2.2rem;
        margin-bottom: 1rem;
    }

    .hero-descricao-video {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    .btn-hero-video {
        font-size: 0.95rem;
        padding: 1rem;
    }
}

/* =========================================
   SEÇÃO 3: PROCEDIMENTOS (CARDS 16:9)
========================================= */
/* --- Cabeçalho da Seção (Elegância e Respiro) --- */
.cabecalho-secao {
    text-align: center;
    /* Respiro fluido e sofisticado antes dos cards */
    margin-bottom: clamp(3rem, 5vw, 4.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.titulo-secao {
    font-family: var(--fonte-titulos);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    /* Grande, imponente e fluido */
    color: var(--cor-texto);
    line-height: 1.1;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
    /* Deixa a fonte serifada mais unida e elegante */
}

.subtitulo-secao {
    font-family: var(--fonte-padrao);
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: rgba(58, 53, 53, 0.7);
    /* Tom mais lavado para focar no título principal */
    max-width: 600px;
    /* Impede que o texto fique comprido demais no Desktop */
    line-height: 1.5;
    position: relative;
    margin-top: 1rem;
}

/* Detalhe premium: Tracinho separador na cor principal da clínica */
.subtitulo-secao::before {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background-color: var(--cor-primaria);
    margin: 0 auto 1rem auto;
}

.secao-procedimentos {
    padding: clamp(4rem, 8vw, 8rem) 0;
    background-color: var(--cor-branca);
    /* content-visibility otimiza o rendering da seção se estiver fora da tela */
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

.container-procedimentos {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

/* --- Estrutura do Grid (Desktop) --- */
.grid-procedimentos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 colunas para valorizar o 16:9 */
    gap: 2.5rem;
}

/* --- Base do Card 16:9 --- */
.card-procedimento-16-9 {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Proporção obrigatória definida */
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--cor-texto);
    transform: translateZ(0);
    /* Força aceleração de hardware */
}

/* Imagem Fluida e WebP/AVIF */
.card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Filtro Escuro Progressivo */
.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(30, 27, 27, 0.95) 0%, rgba(30, 27, 27, 0.4) 50%, rgba(30, 27, 27, 0) 100%);
    transition: background 0.5s ease;
    z-index: 2;
}

/* --- Conteúdo e Textos --- */
.card-conteudo {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Evita que o texto encoste no clique acidental */
    pointer-events: none;
}

.card-titulo {
    font-family: var(--fonte-titulos);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--cor-branca);
    margin-bottom: 0.5rem;
    line-height: 1.1;
    transform: translateY(15px);
    /* Abaixa o título levemente no estado inativo */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* O container do texto escondido (Mágica do Reveal) */
.card-revelacao {
    display: grid;
    grid-template-rows: 0fr;
    /* Esconde a altura nativamente de forma animável */
    opacity: 0;
    transition: grid-template-rows 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
}

/* Hack para o grid-template-rows funcionar na revelação interna */
.card-revelacao>* {
    overflow: hidden;
}

.card-descricao {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.texto-acao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cor-primaria);
}

/* Link invisível esticado para o card todo ser clicável */
.link-absoluto {
    position: absolute;
    inset: 0;
    z-index: 10;
}

/* =========================================
   A MÁGICA DO HOVER (APENAS DESKTOP)
========================================= */
@media (hover: hover) and (pointer: fine) {
    .card-procedimento-16-9:hover .card-bg img {
        transform: scale(1.08);
        /* Efeito 3D sutil */
    }

    .card-procedimento-16-9:hover .card-overlay {
        background: linear-gradient(to top, rgba(30, 27, 27, 0.98) 0%, rgba(30, 27, 27, 0.6) 60%, rgba(30, 27, 27, 0.1) 100%);
    }

    .card-procedimento-16-9:hover .card-titulo {
        transform: translateY(0);
        /* Título sobe para dar espaço */
    }

    .card-procedimento-16-9:hover .card-revelacao {
        grid-template-rows: 1fr;
        /* Revela a altura */
        opacity: 1;
        margin-top: 0.5rem;
    }

    .texto-acao .icone-seta {
        transition: transform 0.3s ease;
    }

    .card-procedimento-16-9:hover .texto-acao .icone-seta {
        transform: translateX(5px);
    }
}

/* =========================================
   RESPONSIVIDADE (3 MEDIAS)
========================================= */

/* 1. Tablet / Notebook (<= 1024px) */
@media (width <=1024px) {
    .grid-procedimentos {
        /* Transforma em um Slider Swipeable (Scroll Snap) */
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 1.5rem;
        /* Padding negativo para o slider encostar na borda da tela sem cortar */
        margin: 0 -2rem;
        padding: 0 2rem 2rem 2rem;
    }

    /* Esconde a barra de rolagem */
    .grid-procedimentos::-webkit-scrollbar {
        display: none;
    }

    .grid-procedimentos {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .card-procedimento-16-9 {
        /* Ocupa no máximo 400px para não esticar e deixa o próximo aparecer (Puxar) */
        flex: 0 0 400px;
        max-width: 80vw; 
        scroll-snap-align: start; /* Alinha o card no início, melhor para deslizar */
    }

    /* No touch, nós anulamos o hover e mostramos tudo sempre */
    .card-titulo {
        transform: translateY(0);
        margin-bottom: 0.5rem;
    }

    .card-revelacao {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: 0.5rem;
    }
}

/* 2. Mobile Padrão (<= 768px) */
@media (width <=768px) {
    .card-procedimento-16-9 {
        flex: 0 0 85vw;
        max-width: 320px; /* Trava o crescimento exagerado */
        aspect-ratio: 4 / 3;
    }

    .card-conteudo {
        padding: 1.5rem;
    }
}

/* 3. Mobile Pequeno (<= 360px) */
@media (width <=360px) {
    .card-procedimento-16-9 {
        flex: 0 0 calc(95% - 1rem);
        aspect-ratio: 1 / 1;
        /* Força um quadrado para caber o texto com folga */
    }

    .card-titulo {
        font-size: 1.4rem;
    }

    .card-descricao {
        font-size: 0.85rem;
    }

    .texto-acao {
        font-size: 0.8rem;
    }
}

/* =========================================
   SEÇÃO 4: MANIFESTO DA NATURALIDADE (NOVO DESIGN ASSIMÉTRICO)
========================================= */
.secao-manifesto {
    padding: clamp(5rem, 10vw, 10rem) 0;
    background-color: var(--cor-fundo);
    overflow: hidden;
    position: relative;
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

.container-manifesto {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

/* O Segredo do Layout Editorial: Grid Avançado de 12 colunas */
.manifesto-grid-assimetrico {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    position: relative;
}

/* --- Imagem: Ocupa 7 colunas na esquerda --- */
.manifesto-imagem-overlap {
    grid-column: 1 / 8;
    grid-row: 1;
    position: relative;
    z-index: 1;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(58, 53, 53, 0.08);
}

.manifesto-bg img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    /* Fica um pouco mais alto, elegante */
    object-fit: cover;
    transform: scale(1.2);
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.reveal-imagem-mascara::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--cor-fundo);
    z-index: 2;
    transform-origin: left;
    /* Cortina abre para a direita */
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.reveal-imagem-mascara.ativo::before {
    transform: scaleX(0);
}

.reveal-imagem-mascara.ativo .manifesto-bg img {
    transform: scale(1);
}

/* Selo Extra de Detalhe */
.manifesto-selo {
    position: absolute;
    bottom: 30px;
    left: -20px;
    background: var(--cor-branca);
    padding: 1.5rem;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(212, 165, 165, 0.2);
    z-index: 5;
    border-left: 3px solid var(--cor-primaria);
    display: flex;
    flex-direction: column;
}

.selo-linha-1 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--cor-primaria);
    margin-bottom: 4px;
}

.selo-linha-2 {
    font-family: var(--fonte-titulos);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--cor-texto);
}

/* --- Texto: Ocupa 6 colunas na direita, sobrepondo a imagem --- */
.manifesto-conteudo-overlap {
    grid-column: 7 / 13;
    grid-row: 1;
    z-index: 2;
    background-color: rgba(253, 251, 247, 0.95);
    /* A cor do fundo, quase sólida */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: clamp(3rem, 5vw, 5rem);
    border-radius: 4px;
    box-shadow: -20px 20px 60px rgba(58, 53, 53, 0.05);
    border: 1px solid rgba(212, 165, 165, 0.1);
}

.manifesto-conteudo-overlap .sobre-tag {
    margin-bottom: 1.5rem;
}

.manifesto-titulo {
    font-family: var(--fonte-titulos);
    font-size: clamp(2.5rem, 4.5vw, 3.8rem);
    color: var(--cor-texto);
    line-height: 1.1;
    margin-bottom: 2rem;
}

.manifesto-titulo em {
    font-style: italic;
    color: var(--cor-primaria);
    font-weight: 500;
}

.manifesto-texto {
    font-size: 1.1rem;
    color: rgba(58, 53, 53, 0.85);
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

/* --- Botão Magnético --- */
.manifesto-cta-box {
    margin-top: 3rem;
}

.btn-magnetico {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background-color: var(--cor-texto);
    color: var(--cor-branca);
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    transition: transform 0.1s linear, background-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.btn-magnetico:hover {
    background-color: var(--cor-primaria);
    box-shadow: 0 15px 30px rgba(212, 165, 165, 0.4);
    transition: none;
}

.btn-magnetico-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1);
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

/* =========================================
   RESPONSIVIDADE DA SEÇÃO MANIFESTO
========================================= */

/* 1. Tablet / Notebook (<= 1024px) */
@media (width <=1024px) {
    .manifesto-grid-assimetrico {
        display: flex;
        flex-direction: column;
    }

    .manifesto-imagem-overlap {
        width: 90%;
        margin: 0 auto;
    }

    .manifesto-conteudo-overlap {
        width: 85%;
        margin: -10% auto 0 auto;
        /* Puxa o card para cima da imagem */
        padding: 3rem;
    }
}

/* 2. Mobile Padrão (<= 768px) */
@media (width <=768px) {
    .secao-manifesto {
        padding: 4rem 0;
    }

    .manifesto-imagem-overlap {
        width: 100%;
        border-radius: 0;
        /* Cola nas bordas da tela */
    }

    .manifesto-bg img {
        aspect-ratio: 1 / 1;
        /* Quadrado perfeito pro mobile */
    }

    .manifesto-selo {
        /* A MÁGICA 1: Trocamos o '20px' por '18%'. 
           Como o card de baixo sobe -15%, o selo agora sempre fugirá dele, ficando logo acima. */
        bottom: 18%;
        left: 0;
        border-radius: 0 4px 4px 0;
        padding: 1rem 1.5rem;
    }

    .manifesto-titulo {
        /* A MÁGICA 2: Reduzimos levemente a fonte base para o celular não sofrer */
        font-size: clamp(1.7rem, 6vw, 2.4rem);
        max-width: 100%;
        /* Removemos o travamento de 320px que causava o vazamento */
        word-wrap: break-word;
        /* Garante que palavras gigantes quebrem de linha se necessário */
        margin-left: auto;
        margin-right: auto;
    }

    .manifesto-conteudo-overlap {
        width: 92%;
        margin: -15% auto 0 auto;
        padding: 2.5rem 1.5rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .manifesto-conteudo-overlap .sobre-tag {
        padding-left: 0;
    }

    .manifesto-conteudo-overlap .sobre-tag::before {
        display: none;
    }

    .manifesto-titulo {
        font-size: clamp(2.2rem, 8vw, 2.8rem);
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .manifesto-cta-box {
        width: 100%;
    }

    .btn-magnetico {
        transform: none !important;
        transition: background-color 0.3s ease !important;
        width: 100%;
        justify-content: center;
        padding: 1.2rem 1rem;
    }
}

/* 3. Mobile Pequeno (<= 360px) */
@media (width <=360px) {
    .manifesto-selo {
        padding: 0.8rem 1rem;
    }

    .selo-linha-2 {
        font-size: 1.1rem;
    }

    .manifesto-conteudo-overlap {
        width: 95%;
        padding: 2rem 1rem;
    }

    .manifesto-titulo {
        font-size: 1.6rem;
    }

    .manifesto-texto {
        font-size: 0.95rem;
    }
}

/* =========================================
   SEÇÃO 5: A ESPECIALISTA
========================================= */
.secao-especialista {
    padding: clamp(5rem, 10vw, 10rem) 0;
    background-color: var(--cor-branca);
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

.container-especialista {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.especialista-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(4rem, 8vw, 8rem);
    align-items: center;
}

/* --- Imagem e Efeito Tilt 3D --- */
.especialista-imagem-container {
    position: relative;
    /* Perspectiva no container pai para o efeito 3D funcionar nos filhos */
    perspective: 1000px;
}

.especialista-imagem-wrapper {
    position: relative;
    border-radius: 4px;
    /* Sombras base */
    box-shadow: 0 30px 60px rgba(58, 53, 53, 0.1);
    transform-style: preserve-3d;
    will-change: transform;
    /* A transição é controlada no JS, mas deixamos um fallback suave */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}

.especialista-foto img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    /* Força a imagem a não vazar do 3D */
    transform: translateZ(0);
}

/* Badge de Autoridade Flutuante */
.badge-autoridade {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background-color: var(--cor-fundo);
    padding: 1.5rem 2rem;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(212, 165, 165, 0.2);
    /* Dá um efeito parallax extra descolando o badge da foto no 3D */
    transform: translateZ(40px);
    display: flex;
    flex-direction: column;
    border-left: 3px solid var(--cor-primaria);
    pointer-events: none;
}

.badge-numero {
    font-family: var(--fonte-titulos);
    font-size: 1.6rem;
    color: var(--cor-primaria);
    line-height: 1.1;
    font-weight: 600;
}

.badge-texto {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cor-texto);
    font-weight: 500;
    margin-top: 4px;
}

/* --- Textos e Conteúdo --- */
.especialista-nome {
    font-family: var(--fonte-titulos);
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--cor-texto);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.especialista-subtitulo {
    font-family: var(--fonte-padrao);
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: 400;
    color: var(--cor-primaria);
    margin-bottom: 2rem;
    font-style: italic;
}

.especialista-biografia {
    font-size: 1.1rem;
    color: rgba(58, 53, 53, 0.85);
    margin-bottom: 2.5rem;
    line-height: 1.8;
}

.especialista-biografia p+p {
    margin-top: 1.5rem;
}

.especialista-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(212, 165, 165, 0.3);
    padding-top: 1.5rem;
}

.especialista-credenciais {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--cor-texto);
    opacity: 0.8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.assinatura-dra {
    font-family: 'Playfair Display', serif;
    /* Fonte serifada para imitar assinatura */
    font-size: 1.8rem;
    font-style: italic;
    color: var(--cor-primaria);
    opacity: 0.8;
}

/* =========================================
   RESPONSIVIDADE (3 MEDIAS)
========================================= */

/* 1. Tablet / Notebook (<= 1024px) */
@media (width <=1024px) {
    .especialista-grid {
        gap: 4rem;
    }

    .badge-autoridade {
        right: -10px;
        bottom: -10px;
        padding: 1.2rem 1.5rem;
    }
}

/* 2. Mobile Padrão (<= 768px) */
@media (width <=768px) {
    .secao-especialista {
        padding: 5rem 0;
    }

    .especialista-grid {
        grid-template-columns: 1fr;
        gap: 5rem;
        text-align: center;
    }

    .especialista-imagem-container {
        /* No mobile a imagem vem primeiro */
        order: 1;
        max-width: 450px;
        margin: 0 auto;
    }

    .especialista-conteudo {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .especialista-conteudo .sobre-tag {
        padding-left: 0;
    }

    .especialista-conteudo .sobre-tag::before {
        display: none;
    }

    .badge-autoridade {
        right: 15px;
        bottom: -15px;
        /* Reseta a profundidade 3D no mobile */
        transform: translateZ(0);
    }

    .especialista-footer {
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
        border-top: none;
        padding-top: 0;
    }

    .especialista-credenciais {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* 3. Mobile Pequeno (<= 360px) */
@media (width <=360px) {
    .especialista-biografia {
        font-size: 1rem;
    }

    .badge-autoridade {
        right: 5px;
        bottom: -10px;
        padding: 1rem;
    }

    .badge-numero {
        font-size: 1.3rem;
    }

    .assinatura-dra {
        font-size: 1.5rem;
    }
}

/* =========================================
   SEÇÃO 6: CONSULTORIA VIP (FORMULÁRIO)
========================================= */
.secao-triagem {
    padding: clamp(6rem, 10vw, 10rem) 0;
    background-color: var(--cor-branca);
    /* Fundo levemente texturizado ou neutro para destacar o form */
    background: linear-gradient(to bottom, var(--cor-branca) 0%, #FAFAFA 100%);
}

.container-triagem {
    max-width: 800px;
    /* Formulário não deve ser largo demais */
    margin: 0 auto;
    padding: 0 2rem;
}

.triagem-wrapper {
    background-color: var(--cor-branca);
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(58, 53, 53, 0.05);
    border: 1px solid rgba(212, 165, 165, 0.2);
}

.cabecalho-triagem {
    text-align: center;
    margin-bottom: 3rem;
}

.titulo-triagem {
    font-family: var(--fonte-titulos);
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: var(--cor-texto);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.subtitulo-triagem {
    font-size: 1.05rem;
    color: rgba(58, 53, 53, 0.8);
}

/* --- Passo 1: Inputs Minimalistas --- */
.form-grupo-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.input-box {
    position: relative;
}

.input-box input {
    width: 100%;
    padding: 10px 0;
    font-size: 1.1rem;
    color: var(--cor-texto);
    border: none;
    border-bottom: 2px solid rgba(58, 53, 53, 0.1);
    background: transparent;
    outline: none;
    transition: border-color 0.3s ease;
    font-family: var(--fonte-padrao);
}

.input-box label {
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 1.1rem;
    color: rgba(58, 53, 53, 0.5);
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Magia do placeholder-shown para o label flutuar */
.input-box input:focus~label,
.input-box input:not(:placeholder-shown)~label {
    top: -15px;
    font-size: 0.85rem;
    color: var(--cor-primaria);
    font-weight: 600;
}

.input-box input:focus {
    border-bottom: 2px solid var(--cor-primaria);
}

/* --- Passo 2: Selection Tiles (Sem JS) --- */
.form-grupo-selecao {
    margin-bottom: 3rem;
}

.label-pergunta {
    font-family: var(--fonte-titulos);
    font-size: 1.4rem;
    color: var(--cor-texto);
    margin-bottom: 1.5rem;
}

.grid-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.tile-label {
    cursor: pointer;
    display: block;
}

/* Esconde o rádio padrão do HTML */
.tile-label input[type="radio"] {
    display: none;
}

.tile-visual {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1.2rem;
    border: 2px solid rgba(212, 165, 165, 0.2);
    border-radius: 6px;
    background-color: var(--cor-branca);
    transition: all 0.3s ease;
    height: 100%;
}

.tile-icone {
    font-size: 1.5rem;
}

.tile-texto {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--cor-texto);
    line-height: 1.4;
}

/* O estado ATIVO do card quando marcado */
.tile-label input[type="radio"]:checked+.tile-visual {
    border-color: var(--cor-primaria);
    background-color: rgba(212, 165, 165, 0.05);
    box-shadow: 0 5px 15px rgba(212, 165, 165, 0.2);
}

.tile-label:hover .tile-visual {
    border-color: rgba(212, 165, 165, 0.5);
}

/* --- Passo 3: Checkbox de Filtro de Preço --- */
.form-grupo-aceite {
    margin-bottom: 2.5rem;
    background-color: rgba(58, 53, 53, 0.03);
    padding: 1.5rem;
    border-radius: 6px;
    border-left: 3px solid var(--cor-texto);
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    cursor: pointer;
    user-select: none;
}

.checkbox-container input {
    display: none;
    /* Esconde checkbox padrão */
}

.checkmark {
    min-width: 24px;
    height: 24px;
    background-color: var(--cor-branca);
    border: 2px solid rgba(58, 53, 53, 0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-top: 2px;
}

.checkbox-container input:checked~.checkmark {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

/* Desenho do V do checkmark */
.checkmark::after {
    content: "";
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    display: none;
}

.checkbox-container input:checked~.checkmark::after {
    display: block;
}

.texto-aceite {
    font-size: 0.95rem;
    color: rgba(58, 53, 53, 0.85);
    line-height: 1.6;
}

/* --- Passo 4: Botão Submit --- */
.form-grupo-botao {
    text-align: center;
}

.btn-submit-vip {
    width: 100%;
    padding: 1.2rem;
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
}

/* Estilo do botão bloqueado */
.btn-submit-vip:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}

.seguranca-texto {
    font-size: 0.85rem;
    color: rgba(58, 53, 53, 0.6);
    margin-top: 1rem;
}

/* =========================================
   RESPONSIVIDADE (3 MEDIAS)
========================================= */

/* 1. Tablet (<= 1024px) */
@media (width <=1024px) {
    .container-triagem {
        max-width: 90%;
    }
}

/* 2. Mobile Padrão (<= 768px) */
@media (width <=768px) {
    .secao-triagem {
        padding: 5rem 0;
    }

    /* A MÁGICA 1: Reduz a margem de fora do formulário no celular */
    .container-triagem {
        padding: 0 1rem;
    }

    /* A MÁGICA 2: Reduz o espaço interno da caixa para dar mais respiro aos inputs */
    .triagem-wrapper {
        padding: 2rem 1.2rem;
    }

    .cabecalho-triagem {
        margin-bottom: 2rem;
        padding: 0 0.5rem;
        /* Centraliza melhor o texto sem encostar nas bordas */
    }

    .form-grupo-inputs {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .grid-tiles {
        grid-template-columns: 1fr;
        /* Cards empilhados no mobile */
    }
}

/* 3. Mobile Pequeno (<= 360px) */
@media (width <=360px) {

    /* Ganha o máximo de espaço possível nas laterais da telinha */
    .container-triagem {
        padding: 0 0.8rem;
    }

    .triagem-wrapper {
        padding: 1.5rem 1rem;
    }

    .titulo-triagem {
        font-size: 1.6rem;
        /* Título um pouco menor para não quebrar feio */
    }

    .label-pergunta {
        font-size: 1.1rem;
    }

    .tile-visual {
        padding: 0.8rem 1rem;
    }

    .texto-aceite {
        font-size: 0.85rem;
    }
}

/* =========================================
   SEÇÃO 7: TECNOLOGIA & SEGURANÇA (DARK)
========================================= */
.secao-tecnologia-ritual {
    padding: clamp(6rem, 10vw, 10rem) 0;
    /* Inversão para o Dark Theme Elegante */
    background-color: var(--cor-texto);
    color: var(--cor-branca);
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: 700px;
}

.container-tech {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.grid-tech {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(4rem, 8vw, 6rem);
    align-items: center;
}

/* --- Coluna de Texto --- */
.tag-clara {
    color: var(--cor-branca);
    opacity: 0.8;
}

.tag-clara::before {
    background-color: var(--cor-branca);
}

.titulo-tech {
    font-family: var(--fonte-titulos);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.titulo-tech em {
    font-style: italic;
    color: var(--cor-primaria);
    font-weight: 400;
}

.desc-tech {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 3rem;
    line-height: 1.8;
}

/* --- Lista de Diferenciais --- */
.lista-tech {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.lista-tech li {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}

.icone-tech {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgba(212, 165, 165, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-primaria);
    border: 1px solid rgba(212, 165, 165, 0.3);
}

.icone-tech svg {
    width: 20px;
    height: 20px;
}

.info-tech strong {
    display: block;
    font-family: var(--fonte-titulos);
    font-size: 1.3rem;
    color: var(--cor-primaria);
    margin-bottom: 0.3rem;
    font-weight: 500;
}

.info-tech p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* --- Coluna Imagem 16:9 Parallax --- */
.tech-imagem-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.tech-bg {
    position: absolute;
    inset: -15%;
    /* Vazamento para permitir o parallax subir e descer sem cortar */
    width: 130%;
    height: 130%;
}

.tech-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
}

.tech-overlay {
    position: absolute;
    inset: 0;
    /* Vinheta sutil para mesclar a imagem com o fundo escuro */
    background: radial-gradient(circle at center, rgba(58, 53, 53, 0) 30%, rgba(58, 53, 53, 0.6) 100%);
    pointer-events: none;
}

/* =========================================
   RESPONSIVIDADE (3 MEDIAS)
========================================= */

/* 1. Tablet (<= 1024px) */
@media (width <=1024px) {
    .grid-tech {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .col-imagem-tech {
        order: -1;
        /* Joga a imagem pra cima no tablet/mobile */
        max-width: 800px;
        margin: 0 auto;
    }
}

/* 2. Mobile Padrão (<= 768px) */
@media (width <=768px) {
    .secao-tecnologia-ritual {
        padding: 5rem 0;
    }

    .col-texto-tech {
        text-align: center;
    }

    .reveal-mask {
        display: flex;
        justify-content: center;
    }

    .tag-clara::before {
        display: none;
    }

    .tag-clara {
        padding-left: 0;
    }

    .lista-tech li {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* 3. Mobile Pequeno (<= 360px) */
@media (width <=360px) {
    .titulo-tech {
        font-size: 2.2rem;
    }

    .desc-tech {
        font-size: 1rem;
    }

    .info-tech strong {
        font-size: 1.1rem;
    }
}

/* =========================================
   SEÇÃO 8: DEPOIMENTOS (MARQUEE DRAGGABLE)
========================================= */
.secao-avaliacoes {
    padding: clamp(6rem, 10vw, 8rem) 0;
    background-color: var(--cor-fundo);
    overflow: hidden;
    /* Importante para não dar scroll horizontal no site todo */
}

.container-avaliacoes {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
    margin-bottom: 3.5rem;
}

/* --- Container Interativo do Slider --- */
.marquee-container {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow-x: hidden;
    cursor: grab;
    /* Indica que pode arrastar */
    padding: 1rem 0 3rem 0;
}

/* Esconde a barra de scroll feia, mantendo a funcionalidade nativa */
.marquee-container::-webkit-scrollbar {
    display: none;
}

.marquee-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Quando o usuário clica para arrastar */
.marquee-container:active {
    cursor: grabbing;
}

.marquee-track {
    display: flex;
    gap: 2rem;
    /* Tamanho baseado no conteúdo, o JS vai cuidar do loop */
    width: max-content;
    padding: 0 2rem;
    pointer-events: none;
    /* Previne bugar o arrastar ao clicar no texto */
}

/* Libera o clique dentro dos cards se quisermos colocar links depois */
.card-avaliacao {
    pointer-events: auto;
    flex: 0 0 380px;
    /* Tamanho fixo perfeito para leitura */
    background-color: var(--cor-branca);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(58, 53, 53, 0.04);
    border: 1px solid rgba(212, 165, 165, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Transição suave ao soltar o arrasto */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
    /* Impede selecionar texto enquanto arrasta */
}

.card-avaliacao:hover {
    box-shadow: 0 20px 40px rgba(212, 165, 165, 0.15);
    transform: translateY(-5px);
}

/* --- Estilo Interno do Depoimento --- */
.avaliacao-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.avaliacao-estrelas {
    color: #D4AF37;
    /* Dourado luxuoso */
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.avaliacao-texto {
    font-size: 1.05rem;
    color: rgba(58, 53, 53, 0.85);
    line-height: 1.7;
    margin-bottom: 2rem;
    font-style: italic;
    flex-grow: 1;
}

/* --- Avatares e Iniciais --- */
.avaliacao-autor {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid rgba(58, 53, 53, 0.08);
    padding-top: 1.5rem;
}

.autor-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    /* Filtro leve para padronizar fotos amadoras */
    filter: sepia(0.2) contrast(1.1);
}

.autor-iniciais {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(212, 165, 165, 0.15);
    color: var(--cor-primaria);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fonte-titulos);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 1px;
    border: 1px solid rgba(212, 165, 165, 0.3);
}

.autor-iniciais.variante-escura {
    background-color: var(--cor-texto);
    color: var(--cor-branca);
    border-color: var(--cor-texto);
}

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

.autor-nome {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--cor-texto);
}

.autor-proc {
    font-size: 0.8rem;
    color: var(--cor-primaria);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* =========================================
   RESPONSIVIDADE (3 MEDIAS)
========================================= */

/* 1. Tablet / Notebook (<= 1024px) */
@media (width <=1024px) {
    .card-avaliacao {
        flex: 0 0 320px;
        padding: 2rem;
    }
}

/* 2. Mobile Padrão (<= 768px) */
@media (width <=768px) {
    .secao-avaliacoes {
        padding: 5rem 0;
    }

    /* A MÁGICA: Libera o arrasto nativo com o dedo apenas no celular */
    .marquee-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Deixa o deslize suave no iPhone (iOS) */
    }

    /* Garante que o toque seja reconhecido mesmo nos espaços em branco entre os cards */
    .marquee-track {
        pointer-events: auto;
    }

    .card-avaliacao {
        /* No mobile, o card ocupa quase a tela toda */
        flex: 0 0 calc(85vw - 2rem);
    }
}

/* 3. Mobile Pequeno (<= 360px) */
@media (width <=360px) {
    .card-avaliacao {
        flex: 0 0 calc(90vw - 1rem);
        padding: 1.5rem;
    }

    .avaliacao-texto {
        font-size: 0.95rem;
    }
}

/* =========================================
   SEÇÃO 9: GALERIA EDITORIAL E LUXO
========================================= */
.secao-galeria-vertical {
    padding: clamp(6rem, 10vw, 10rem) 0;
    background-color: var(--cor-fundo);
    content-visibility: auto;
    contain-intrinsic-size: 1100px;
}

.container-galeria {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

/* --- Cabeçalho Editorial (Tipografia Híbrida) --- */
.cabecalho-editorial {
    text-align: center;
    margin-bottom: 4rem;
}

.tag-portfolio {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--cor-primaria);
    margin-bottom: 1.5rem;
    position: relative;
}

.tag-portfolio::before,
.tag-portfolio::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 1px;
    background-color: var(--cor-primaria);
    vertical-align: middle;
    margin: 0 10px;
}

.titulo-editorial {
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    color: var(--cor-texto);
    line-height: 1.1;
    margin-bottom: 1rem;
    /* Evita quebras de linha estranhas no meio da animação */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

/* O Segredo do Word Reveal */
.titulo-editorial .palavra {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.titulo-editorial .destaque-italico {
    font-family: var(--fonte-titulos);
    font-style: italic;
    color: var(--cor-primaria);
    font-weight: 500;
}

/* Animação acionada via JS quando a classe .ativo é adicionada */
.titulo-editorial.ativo .palavra {
    opacity: 1;
    transform: translateY(0);
}

/* Delays escalonados para cada palavra */
.titulo-editorial .palavra:nth-child(1) {
    transition-delay: 0.1s;
}

.titulo-editorial .palavra:nth-child(2) {
    transition-delay: 0.25s;
}

.titulo-editorial .palavra:nth-child(3) {
    transition-delay: 0.4s;
}

.titulo-editorial .palavra:nth-child(4) {
    transition-delay: 0.55s;
}

.subtitulo-editorial {
    font-size: 1.05rem;
    color: rgba(58, 53, 53, 0.7);
    margin-top: 1rem;
}

/* --- O Grid e os Cards --- */
.grid-galeria-9-16 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-bottom: 4rem;
}

.card-resultado {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.resultado-imagem-box {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 6px;
    overflow: hidden;
    background-color: rgba(212, 165, 165, 0.1);
    box-shadow: 0 15px 35px rgba(58, 53, 53, 0.08);
    cursor: zoom-in;
}

.resultado-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.resultado-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Etiquetas Glassmorphism */
.etiquetas-contexto {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    z-index: 5;
    pointer-events: none;
}

.tag-vidro {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cor-branca);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.resultado-overlay {
    position: absolute;
    inset: 0;
    background: rgba(58, 53, 53, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 4;
}

.icone-zoom {
    color: var(--cor-branca);
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icone-zoom svg {
    width: 20px;
    height: 20px;
}

@media (hover: hover) and (pointer: fine) {
    .resultado-imagem-box:hover .resultado-bg img {
        transform: scale(1.05);
    }

    .resultado-imagem-box:hover .resultado-overlay {
        opacity: 1;
    }

    .resultado-imagem-box:hover .icone-zoom {
        transform: scale(1);
    }
}

.resultado-legenda {
    text-align: center;
}

.resultado-titulo {
    font-family: var(--fonte-titulos);
    font-size: 1.4rem;
    color: var(--cor-texto);
    margin-bottom: 0.4rem;
}

.resultado-desc {
    font-size: 0.95rem;
    color: rgba(58, 53, 53, 0.7);
    line-height: 1.4;
}

/* --- A MÁGICA DO BOTÃO CTA PREMIUM --- */
.cta-editorial-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.status-agendamento {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cor-texto);
    padding: 6px 16px;
    border-radius: 20px;
    background-color: rgba(58, 53, 53, 0.04);
}

/* O Ponto Pulsante */
.dot-pulsante {
    width: 8px;
    height: 8px;
    background-color: #25D366;
    /* Verde do Whats ou troque para var(--cor-primaria) */
    border-radius: 50%;
    position: relative;
}

.dot-pulsante::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background-color: #25D366;
    animation: pulseDot 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pulseDot {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* O Botão Shimmer */
.btn-shimmer-premium {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background-color: var(--cor-texto);
    /* Fundo escuro luxuoso */
    color: var(--cor-branca);
    padding: 1.2rem 2.5rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    overflow: hidden;
    /* Importante para a luz não vazar */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 25px rgba(58, 53, 53, 0.15);
}

/* O Feixe de Luz Infinito (Aceleração de GPU) */
.btn-shimmer-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    /* Começa bem fora da tela */
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: luzShimmer 3.5s infinite linear;
}

@keyframes luzShimmer {
    0% {
        left: -150%;
    }

    15% {
        left: 200%;
    }

    /* Passa rápido */
    100% {
        left: 200%;
    }

    /* Fica invisível o resto do tempo para não irritar */
}

.btn-shimmer-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(58, 53, 53, 0.25);
    background-color: var(--cor-primaria);
    /* Muda para Rose no hover */
}

.btn-shimmer-premium .icone-seta {
    transition: transform 0.3s ease;
}

.btn-shimmer-premium:hover .icone-seta {
    transform: translateX(5px);
}

/* --- LIGHTBOX MODAL --- */
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox-modal.ativo {
    display: flex;
    opacity: 1;
}

.lightbox-conteudo {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 6px;
    transform: scale(0.95);
    transition: transform 0.4s ease;
}

.lightbox-modal.ativo .lightbox-conteudo {
    transform: scale(1);
}

.lightbox-fechar {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
}

/* --- RESPONSIVIDADE --- */
@media (width <=1024px) {
    .grid-galeria-9-16 {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 1.5rem;
        margin: 0 -2rem 3rem -2rem;
        padding: 0 2rem 2rem 2rem;
    }

    .grid-galeria-9-16::-webkit-scrollbar {
        display: none;
    }

    .card-resultado {
        flex: 0 0 320px;
        scroll-snap-align: start; /* Garante o alinhamento perfeito ao deslizar */
    }
}

@media (width <=768px) {
    .secao-galeria-vertical {
        padding: 5rem 0;
    }

    .card-resultado {
        flex: 0 0 80vw;
        max-width: 300px; /* Limite elegante, nunca deforma */
    }

    .btn-shimmer-premium {
        width: 100%;
        justify-content: center;
        padding: 1.2rem;
    }

    /* Ajuste da tag no mobile */
    .tag-portfolio::before,
    .tag-portfolio::after {
        width: 10px;
    }
}

@media (width <=360px) {
    .card-resultado {
        flex: 0 0 calc(90vw - 1rem);
    }

    .titulo-editorial {
        font-size: 2.2rem;
        gap: 0.3rem;
    }
}

/* =========================================
   SEÇÃO 10: FAQ (PERGUNTAS FREQUENTES)
========================================= */
.secao-faq {
    padding: clamp(5rem, 10vw, 8rem) 0;
    background-color: var(--cor-branca);
    content-visibility: auto;
    contain-intrinsic-size: 600px;
}

.container-faq {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: clamp(4rem, 8vw, 6rem);
}

/* --- Lado Esquerdo: Chamada --- */
.tag-faq {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--cor-primaria);
    margin-bottom: 1rem;
}

.titulo-faq {
    font-family: var(--fonte-titulos);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: var(--cor-texto);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.desc-faq {
    font-size: 1.05rem;
    color: rgba(58, 53, 53, 0.75);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 400px;
}

.link-faq-whats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--cor-texto);
    font-size: 0.95rem;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--cor-texto);
    transition: all 0.3s ease;
}

.link-faq-whats:hover {
    color: var(--cor-primaria);
    border-bottom-color: var(--cor-primaria);
}

.link-faq-whats .icone-seta {
    transition: transform 0.3s ease;
}

.link-faq-whats:hover .icone-seta {
    transform: translateX(5px);
}

/* --- Lado Direito: Accordion --- */
.faq-lista {
    display: flex;
    flex-direction: column;
    /* Linha fina no topo para fechar o design */
    border-top: 1px solid rgba(58, 53, 53, 0.1);
}

.faq-item {
    border-bottom: 1px solid rgba(58, 53, 53, 0.1);
}

/* Botão da Pergunta */
.faq-pergunta {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.8rem 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--cor-texto);
    transition: color 0.3s ease;
}

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

.texto-pergunta {
    font-family: var(--fonte-titulos);
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    font-weight: 500;
    padding-right: 1.5rem;
}

/* Ícone Animado (Mais/Menos feito só com CSS) */
.icone-mais {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.icone-mais::before,
.icone-mais::after {
    content: '';
    position: absolute;
    background-color: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s ease;
}

.icone-mais::before {
    width: 100%;
    height: 1.5px;
}

.icone-mais::after {
    height: 100%;
    width: 1.5px;
}

/* A Mágica do Accordion com CSS Grid (0 delay e 100% Performance) */
.faq-resposta {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
}

.faq-conteudo-interno {
    overflow: hidden;
}

.faq-conteudo-interno p {
    font-size: 1rem;
    color: rgba(58, 53, 53, 0.8);
    line-height: 1.7;
    padding-bottom: 1.8rem;
    padding-right: 2rem;
}

/* --- Estados ATIVOS (Quando o item está aberto) --- */
.faq-item.ativo .faq-pergunta {
    color: var(--cor-primaria);
}

.faq-item.ativo .icone-mais::after {
    transform: translate(-50%, -50%) rotate(90deg);
    /* O traço vertical deita, virando um "menos" */
}

.faq-item.ativo .faq-resposta {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* =========================================
   RESPONSIVIDADE (3 MEDIAS)
========================================= */

@media (width <=1024px) {
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .faq-chamada {
        text-align: center;
        max-width: 600px;
        margin: 0 auto;
    }

    .desc-faq {
        margin: 0 auto 2rem auto;
    }
}

@media (width <=768px) {
    .secao-faq {
        padding: 5rem 0;
    }

    .faq-pergunta {
        padding: 1.5rem 0;
    }

    .faq-conteudo-interno p {
        padding-right: 0;
    }
}

@media (width <=360px) {
    .texto-pergunta {
        font-size: 1.1rem;
    }

    .faq-conteudo-interno p {
        font-size: 0.95rem;
    }
}

/* =========================================
   SEÇÃO 11: FOOTER PREMIUM
========================================= */
.footer-premium {
    background-color: #161414;
    /* Fundo super dark luxuoso */
    color: var(--cor-branca);
    padding: 5rem 0 2rem 0;
    position: relative;
    /* Ajuste extra para o botão do WhatsApp não cobrir o rodapé no final da página */
    padding-bottom: 6rem;
}

.container-footer {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

/* --- Brand --- */
/* --- Brand --- */
.logo-footer img {
    width: 90px;
    height: auto;
    margin-bottom: 1.5rem;

}

.footer-bio {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 250px;
}

.footer-sociais {
    display: flex;
    gap: 15px;
}

.footer-sociais a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--cor-branca);
    transition: all 0.3s ease;
}

.footer-sociais a:hover {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    transform: translateY(-3px);
}

.footer-sociais svg {
    width: 18px;
    height: 18px;
}

/* --- Links e Contato --- */
.footer-titulo {
    font-family: var(--fonte-titulos);
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: var(--cor-branca);
    letter-spacing: 0.5px;
}

.footer-links ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    display: inline-block;
    position: relative;
    /* Necessário para ancorar o campo de força */
    transition: color 0.3s ease, transform 0.3s ease;
}

/* O SEGREDO: Uma caixa invisível que estica a área de contato do mouse para os lados.
   Mesmo que o texto mova 5px pra direita, o mouse não vai "cair" do elemento. */
.footer-links a::after {
    content: '';
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: -15px;
    /* Expande 15px para a esquerda */
    right: -15px;
    /* Expande 15px para a direita */
}

.footer-links a:hover {
    color: var(--cor-primaria);
    transform: translateX(5px);
}

.contato-lista li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    line-height: 1.5;
}

.icone-contato {
    font-size: 1rem;
    margin-top: 2px;
}

/* --- Mapa Interativo Premium --- */
.mapa-interativo-wrapper {
    position: relative;
    width: 100%;
    /* A MÁGICA: Passamos de 2/1 para 1/1. Isso dobra a altura do mapa! */
    aspect-ratio: 1 / 1;
    min-height: 220px;
    /* Trava de segurança para telas ultra-wide */
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #222;
}

/* O SEGREDO DO DESIGN: Transforma o mapa branco do Google em um Dark Mode de Luxo */
.mapa-interativo-wrapper iframe {
    display: block;
    width: 100%;
    height: 100%;
    filter: grayscale(100%) invert(90%) contrast(1.2) hue-rotate(180deg);
    transition: filter 0.4s ease;
}

/* Ao passar o mouse, ele revela as cores originais (opcional, pode tirar se quiser sempre dark) */
.mapa-interativo-wrapper:hover iframe {
    filter: grayscale(0%) invert(0%) contrast(1) hue-rotate(0deg);
}

/* Proteção de UX para Mobile: Evita que o dedo fique preso no mapa ao rolar a tela */
.overlay-scroll-mobile {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
}

/* O mapa só interage se o usuário clicar/tocar nele primeiro */
.mapa-interativo-wrapper:hover .overlay-scroll-mobile,
.mapa-interativo-wrapper:active .overlay-scroll-mobile {
    pointer-events: none;
}

/* --- Mapa Otimizado --- */
.mapa-link-otimizado {
    display: block;
    position: relative;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 2 / 1;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mapa-link-otimizado img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    filter: grayscale(100%) contrast(1.2);
    /* Deixa o mapa cinza para combinar com o dark theme */
}

.mapa-overlay {
    position: absolute;
    inset: 0;
    background: rgba(22, 20, 20, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.btn-rota {
    background-color: var(--cor-primaria);
    color: var(--cor-texto);
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.mapa-link-otimizado:hover img {
    transform: scale(1.05);
}

.mapa-link-otimizado:hover .mapa-overlay {
    background: rgba(22, 20, 20, 0.2);
}

.mapa-link-otimizado:hover .btn-rota {
    opacity: 1;
    transform: translateY(0);
}

/* --- Base Legal --- */
.footer-linha {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin-bottom: 2rem;
}

.footer-base {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
}

.crm-text {
    display: inline-block;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* Novo Container do Menu Legal */
.links-legais {
    display: flex;
    list-style: none;
    align-items: center;
}

.links-legais a {
    color: rgba(255, 255, 255, 0.6);
    position: relative;
    padding-bottom: 2px;
    transition: color 0.3s ease;
}

/* Micro-interação Premium (Hover) */
.links-legais a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--cor-primaria);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.links-legais a:hover {
    color: var(--cor-primaria);
}

.links-legais a:hover::after {
    transform: scaleX(1);
}

.separador {
    margin: 0 8px;
    opacity: 0.5;
}

/* --- ASSINATURA FRONTLAB STUDIO --- */
.assinatura-agencia p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.frontlab-signature {
    position: relative;
    font-family: monospace, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cor-texto);
    /* Usa a cor clara se a varivel global for escura ajuste aqui para var(--cor-branca) */
    color: var(--cor-branca);
    /* Ajuste de legibilidade para o dark mode */
    opacity: 0.5;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.frontlab-signature::before,
.frontlab-signature::after {
    content: '';
    opacity: 0;
    color: var(--cor-primaria);
    /* Adaptação para a cor primária da clínica */
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.frontlab-signature::before {
    content: '[';
    transform: translateX(10px);
}

.frontlab-signature::after {
    content: ']';
    transform: translateX(-10px);
}

.status-dot {
    width: 6px;
    height: 6px;
    background-color: #00ff66;
    /* Mantido o Verde Tech */
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 255, 102, 0.5);
    animation: serverPulse 2s infinite;
}

@keyframes serverPulse {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 12px rgba(0, 255, 102, 0.8);
    }

    100% {
        opacity: 0.4;
    }
}

.frontlab-signature:hover {
    opacity: 1;
    color: var(--cor-primaria);
    text-shadow: 0 0 10px rgba(212, 165, 165, 0.2);
}

.frontlab-signature:hover::before,
.frontlab-signature:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================
   BOTÃO WHATSAPP FLUTUANTE (AJUSTADO)
========================================= */
.whatsapp-flutuante {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    /* Centralização Absoluta do Container Pai */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
    z-index: 9999;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Previne qualquer padding herdado bugar o alinhamento */
    padding: 0 !important;
}

/* Estado oculto ativado via JS quando o menu abre */
.whatsapp-flutuante.oculto {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5);
    /* Encolhe suavemente */
    pointer-events: none;
    /* Impede cliques acidentais invisíveis */
}

/* Container interno para o SVG e o pulso */
.whats-avatar-wrapper {
    position: relative;
    /* Centralização Absoluta interna */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 100%;
}

.whatsapp-flutuante svg {
    /* Tamanho do ícone relativo à bolinha (aprox 55%) */
    width: 32px;
    height: 32px;
    display: block;
    /* Previne desvios de linha de base de texto */
    margin: 0;
}

.whats-pulse {
    position: absolute;
    /* Garante que o pulso parta do centro exato */
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25D366;
    animation: whatsPulseAnim 2s infinite;
    z-index: -1;
}

@keyframes whatsPulseAnim {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* =========================================
   RESPONSIVIDADE DO FOOTER (MEDIA FALTANTE)
========================================= */

/* JÁ EXISTIA: Tablet (<= 1024px) */
@media (width <=1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

/* JÁ EXISTIA: Mobile Padrão (<= 768px) */
@media (width <=768px) {
    .footer-premium {
        padding: 4rem 0 5rem 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .footer-bio {
        margin: 0 auto 1.5rem auto;
    }

    .footer-sociais {
        justify-content: center;
    }

    .contato-lista li {
        justify-content: center;
    }

    .footer-base {
        flex-direction: column;
        gap: 2rem; /* Mais respiro entre os 3 blocos */
        text-align: center;
    }

    /* Transforma a lista horizontal em coluna para celular */
    .links-legais {
        flex-direction: column;
        gap: 1rem;
    }

    /* Esconde os separadores no mobile, já que será uma lista empilhada */
    .links-legais .separador {
        display: none;
    }

    /* Aumenta a área de toque para dedos gordos (Mobile Premium) */
    .links-legais a {
        display: block;
        padding: 0.5rem 1rem;
    }

    .crm-text {
        display: block;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        margin-top: 5px;
    }

    /* Ajuste de posição para não colar na borda */
    .whatsapp-flutuante {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 55px;
        height: 55px;
    }

    .whatsapp-flutuante svg {
        width: 28px;
        height: 28px;
    }
}

/* 🎯 NOVA: Mobile Pequeno (<= 360px) - A MEDIA QUE FALTOU */
@media (width <=360px) {

    .container-footer {
        padding: 0 1rem;
    }

    .logo-footer img {
        width: 70px;
        /* Reduzido pela metade no mobile pequeno */
    }


    .footer-titulo {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .footer-links a,
    .contato-lista li p {
        font-size: 0.9rem;
    }

    .mapa-link-otimizado {
        aspect-ratio: 16 / 9;
    }

    /* Mapa mais chato no cel pequeno */
    .btn-rota {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    /* Assinatura Frontlab menor no cel antigo */
    .footer-base,
    .frontlab-signature {
        font-size: 0.8rem;
        gap: 4px;
    }

    .status-dot {
        width: 5px;
        height: 5px;
    }

    /* Botão flutuante menor ainda para não atrapalhar leitura */
    .whatsapp-flutuante {
        width: 50px;
        height: 50px;
        bottom: 1rem;
        right: 1rem;
    }

    .whatsapp-flutuante svg {
        width: 26px;
        height: 26px;
    }

    .mapa-interativo-wrapper {
        aspect-ratio: 4 / 3;
        /* Muito mais espaço para arrastar no touch */
    }

}

/* =========================================
   WIDGET DE COOKIES (GLASSMORPHISM PREMIUM)
========================================= */
.cookie-wrapper {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: calc(100% - 4rem);
    max-width: 420px; /* Formato de notificação premium */
    z-index: 99999;
    
    /* Escondido inicialmente com animação acelerada por GPU */
    transform: translateY(120%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.4s ease, 
                visibility 0.4s ease;
}

.cookie-wrapper.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.cookie-container {
    background: rgba(253, 251, 247, 0.85); /* var(--cor-fundo) translúcida */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 165, 165, 0.4); /* var(--cor-primaria) translúcida */
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cookie-texto {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cookie-tag {
    font-family: var(--fonte-titulos);
    font-size: 1.1rem;
    color: var(--cor-texto);
    font-weight: 700;
}

.cookie-texto p {
    font-size: 0.85rem;
    color: rgba(58, 53, 53, 0.85);
    line-height: 1.5;
    margin: 0;
}

.cookie-texto p a {
    color: var(--cor-primaria);
    text-decoration: underline;
    font-weight: 500;
}

.cookie-acoes {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.btn-cookie-primario,
.btn-cookie-secundario {
    flex: 1; /* Dividem o espaço meio a meio no Desktop */
    padding: 0.8rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
}

.btn-cookie-primario {
    background-color: var(--cor-texto);
    color: var(--cor-branca);
}

.btn-cookie-secundario {
    background-color: transparent;
    color: var(--cor-texto);
    border: 1px solid rgba(58, 53, 53, 0.2);
}

.btn-cookie-primario:hover {
    background-color: var(--cor-primaria-hover);
    transform: translateY(-2px);
}

.btn-cookie-secundario:hover {
    border-color: var(--cor-texto);
    background-color: rgba(58, 53, 53, 0.05);
}

/* =========================================
   RESPONSIVIDADE (WIDGET COOKIES)
========================================= */

/* 1. Tablet / Laptops (<= 1024px) */
@media (max-width: 1024px) {
    .cookie-wrapper {
        max-width: 380px;
    }
}

/* 2. Mobile Padrão (<= 768px) */
@media (max-width: 768px) {
    .cookie-wrapper {
        left: 50%;
        bottom: 1.5rem;
        transform: translateX(-50%) translateY(120%);
        width: calc(100% - 3rem);
        max-width: 100%;
    }

    .cookie-wrapper.show {
        transform: translateX(-50%) translateY(0);
    }

    .cookie-container {
        text-align: center;
        align-items: center;
    }

    .cookie-acoes {
        flex-direction: column;
        gap: 0.8rem;
    }

    .btn-cookie-primario,
    .btn-cookie-secundario {
        width: 100%;
        padding: 1rem; /* Área de toque ampliada para polegares */
    }
}

/* 3. Mobile Pequeno (<= 360px) */
@media (max-width: 400px) {
    .cookie-wrapper {
        bottom: 1rem;
        width: calc(100% - 2rem);
    }

    .cookie-container {
        padding: 1.2rem;
        border-radius: 8px;
        gap: 1rem;
    }

    .cookie-tag {
        font-size: 1rem;
    }

    .cookie-texto p {
        font-size: 0.8rem;
    }

    .btn-cookie-primario,
    .btn-cookie-secundario {
        padding: 0.9rem;
        font-size: 0.8rem;
    }
}

/* =========================================
   CENTRAL LEGAL (TERMOS, PRIVACIDADE E COOKIES)
========================================= */
.secao-legal { padding: clamp(6rem, 10vw, 10rem) 0; background-color: var(--cor-fundo); min-height: 100vh; }
.container-legal { max-width: var(--container-width); margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 280px 1fr; gap: 4rem; align-items: start; }

.menu-legal { position: sticky; top: 120px; background: var(--cor-branca); padding: 2rem; border-radius: 8px; border: 1px solid rgba(212, 165, 165, 0.2); box-shadow: 0 10px 30px rgba(58, 53, 53, 0.03); }
.menu-legal__titulo { font-family: var(--fonte-titulos); font-size: 1.2rem; color: var(--cor-texto); margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(212, 165, 165, 0.2); }
.menu-legal__lista { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.menu-legal__link { display: block; padding: 0.8rem 1rem; border-radius: 4px; font-size: 0.95rem; color: rgba(58, 53, 53, 0.7); transition: all 0.3s ease; font-weight: 500; }
.menu-legal__link:hover { background-color: rgba(212, 165, 165, 0.05); color: var(--cor-primaria); }
.menu-legal__link.ativo { background-color: var(--cor-primaria); color: var(--cor-branca); box-shadow: 0 4px 15px rgba(212, 165, 165, 0.3); }

.conteudo-legal { max-width: 800px; }
.conteudo-legal h1 { font-family: var(--fonte-titulos); font-size: clamp(2.2rem, 4vw, 3rem); color: var(--cor-texto); line-height: 1.1; margin-bottom: 2rem; }
.conteudo-legal h2 { font-family: var(--fonte-titulos); font-size: 1.5rem; color: var(--cor-primaria); margin-top: 3rem; margin-bottom: 1rem; }
.conteudo-legal p, .conteudo-legal li { font-size: 1.05rem; color: rgba(58, 53, 53, 0.8); line-height: 1.8; margin-bottom: 1.2rem; }
.conteudo-legal strong { color: var(--cor-texto); font-weight: 600; }
.conteudo-legal ul { margin-left: 1.5rem; margin-bottom: 2rem; }
.conteudo-legal a { color: var(--cor-primaria); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.3s ease; }
.conteudo-legal a:hover { text-decoration-color: var(--cor-primaria); }
.conteudo-legal__data { display: block; font-style: italic; font-size: 0.9rem !important; opacity: 0.6; margin-top: 3rem; }

.card-dpo { margin-top: 4rem; background: rgba(253, 251, 247, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(212, 165, 165, 0.3); border-radius: 8px; padding: 2.5rem; box-shadow: 0 15px 35px rgba(58, 53, 53, 0.05); }
.card-dpo__titulo { font-family: var(--fonte-titulos); font-size: 1.6rem; color: var(--cor-texto); margin-bottom: 0.5rem; }
.card-dpo__texto { font-size: 0.95rem; color: rgba(58, 53, 53, 0.7); margin-bottom: 2rem; }
.card-dpo__botoes { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-dpo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0.8rem 1.5rem; border-radius: 4px; font-size: 0.9rem; font-weight: 600; transition: all 0.3s ease; text-decoration: none !important; }
.btn-dpo--primario { background-color: var(--cor-texto); color: var(--cor-branca) !important; }
.btn-dpo--primario:hover { background-color: var(--cor-primaria); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(212, 165, 165, 0.3); }
.btn-dpo--secundario { background-color: transparent; color: var(--cor-texto) !important; border: 1px solid rgba(58, 53, 53, 0.2); }
.btn-dpo--secundario:hover { border-color: var(--cor-texto); background-color: rgba(58, 53, 53, 0.05); }

.legal-footer-nav { margin-top: 3rem; }
.btn-voltar-legal { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--cor-texto) !important; text-decoration: none !important; padding-bottom: 4px; border-bottom: 1px solid var(--cor-texto); transition: all 0.3s ease; }
.btn-voltar-legal:hover { color: var(--cor-primaria) !important; border-bottom-color: var(--cor-primaria); }

@media (max-width: 1024px) {
    .container-legal { grid-template-columns: 1fr; gap: 3rem; }
    .menu-legal { position: static; padding: 1.5rem; }
    .menu-legal__lista { flex-direction: row; flex-wrap: wrap; gap: 0.8rem; }
    .menu-legal__link { padding: 0.6rem 1.2rem; background-color: rgba(58, 53, 53, 0.03); border: 1px solid rgba(58, 53, 53, 0.05); }
}
@media (max-width: 768px) {
    .secao-legal { padding: 6rem 0; }
    .container-legal { padding: 0 1.5rem; }
    .conteudo-legal h2 { font-size: 1.3rem; }
    .conteudo-legal p, .conteudo-legal li { font-size: 1rem; }
    .card-dpo { padding: 1.5rem; }
    .card-dpo__botoes { flex-direction: column; }
    .btn-dpo { width: 100%; }
}
@media (max-width: 400px) {
    .menu-legal { padding: 1rem; }
    .menu-legal__link { font-size: 0.85rem; padding: 0.5rem 1rem; width: 100%; text-align: center; }
}