@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: hidden;
    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: hidden;
    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 PRINCIPAL (DESKTOP PADRÃO > 1024px)
========================================= */
.header-principal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    /* Começa transparente */
    transition: background-color 0.4s ease, border-bottom 0.4s ease, box-shadow 0.4s ease;
    border-bottom: 1px solid transparent;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
}

/* Classe injetada via JS ao rolar a página */
.header-principal.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);
    filter: none;
}

.container-header {
    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;
}

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

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

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

.header-principal.scrolled .nav-link {
    text-shadow: none;
    color: var(--cor-texto);
    /* Volta pra cor normal do texto */
}

/* Efeito de underline animado e elegante */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--cor-primaria);
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-link:hover::after {
    width: 100%;
}

.btn-cta-header {
    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);
}

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

/* Elementos mobile ocultos no Desktop */
.btn-mobile,
.btn-fechar-menu {
    display: none;
}

/* 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);
}

/* =========================================
   MEDIA QUERIES MODERNAS
========================================= */

/* Tablet / Notebook */
@media (width <=1024px) {
    .container-header {
        padding: 1rem 1.5rem;
    }
}

/* Mobile Padrão e Pequeno */
@media (width <=768px) {

    .btn-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        z-index: 2001;
        /* Aumentado para ficar acima do menu branco */
        cursor: pointer;
        /* Remove o fundo transparente padrão do button se houver */
        background: transparent;
        border: none;

    }

    .btn-mobile.ativo .hamburguer {
        background-color: transparent;
        box-shadow: none;
    }

    /* Gira a linha de cima 45 graus para baixo e muda a cor pra escuro */
    .btn-mobile.ativo .hamburguer::before {
        transform: translateY(8px) rotate(45deg);
        background-color: var(--cor-texto);
        box-shadow: none;
        /* Tira a sombra pois o fundo do menu já é branco */
    }

    /* Gira a linha de baixo 45 graus para cima e muda a cor pra escuro */
    .btn-mobile.ativo .hamburguer::after {
        transform: translateY(-8px) rotate(-45deg);
        background-color: var(--cor-texto);
        box-shadow: none;
    }

    .hamburguer {
        width: 24px;
        height: 2px;
        /* Se o hamburguer for escuro e o vídeo tbm, mude para var(--cor-branca) */
        background-color: var(--cor-branca);
        position: relative;
        transition: 0.3s ease;
        /* Sombra no traço do meio */
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
    }

    .hamburguer::before,
    .hamburguer::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: var(--cor-branca);
        left: 0;
        transition: 0.3s ease;
        /* Sombra nos traços de cima e de baixo */
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
    }

    /* Remove a sombra e volta a cor quando rolar a página (pois o header ganha fundo branco) */
    .header-principal.scrolled .hamburguer,
    .header-principal.scrolled .hamburguer::before,
    .header-principal.scrolled .hamburguer::after {
        background-color: var(--cor-texto);
        box-shadow: none;
    }

    .hamburguer::before {
        top: -8px;
    }

    .hamburguer::after {
        bottom: -8px;
    }

    /* Estilo do Menu Mobile Premium (Glassmorphism) */
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        /* Adapta-se à barra do iOS/Android */
        background-color: rgba(253, 251, 247, 0.97);
        /* Fundo quase sólido */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2000;

        /* Animação de entrada luxuosa (Fade + Scale) */
        opacity: 0;
        visibility: hidden;
        transform: scale(0.95);
        transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .nav-menu.ativo {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

    /* Botão "X" de Fechar */
    .btn-fechar-menu {
        display: block;
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        font-size: 2.5rem;
        color: var(--cor-texto);
        line-height: 1;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: rgba(212, 165, 165, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease, background 0.3s ease;
    }

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

    .nav-lista {
        flex-direction: column;
        gap: 2.5rem;
        text-align: center;
    }



    /* Dentro do @media (width <= 768px), atualize os links para isto: */

    .nav-item {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        display: inline-block;
        /* Crucial: faz a linha animada ter o tamanho exato da palavra */
    }

    .nav-menu.ativo .nav-item {
        opacity: 1;
        transform: translateY(0);
        transition-delay: var(--delay);
    }

    .nav-link {
        font-family: var(--fonte-titulos);
        font-size: clamp(2rem, 6vw, 2.5rem);
        color: var(--cor-texto);
        position: relative;
        padding-bottom: 4px;
        /* Respiro entre a fonte gigante e a linha */
        display: inline-block;
    }

    /* A mágica do hover reativada e adaptada para o tamanho mobile */
    .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 3px;
        /* Ligeiramente mais grossa para acompanhar a fonte maior */
        bottom: 0;
        left: 0;
        background-color: var(--cor-primaria);
        transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .nav-link:hover::after {
        width: 100%;
    }

    /* Mantém a animação tátil do clique */
    .nav-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);
        }
    }

    .btn-cta-header {
        display: inline-block;
        width: 100%;
        max-width: 280px;
        text-align: center;
        margin-top: 1.5rem;
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }
}

/* Mobile Pequeno (Ajustes finos de borda) */
@media (width <=360px) {
    .container-header {
        padding: 0.8rem 1rem;
    }

    .logo img {
        width: 65px;
        /* Reduzido pela metade */
    }

    .nav-link {
        font-size: 1.8rem;
    }
}

/* =========================================
   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 {
        flex: 0 0 calc(70% - 1rem);
        /* Card ocupa 70% da tela para sugerir o próximo */
        scroll-snap-align: center;
    }

    /* 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 calc(90% - 1rem);
        /* Ocupa quase a tela toda */
        /* Para telas muito verticais, 16:9 pode ficar pequeno, adaptamos o aspect ratio levemente */
        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: center;
    }
}

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

    .card-resultado {
        flex: 0 0 calc(80vw - 1rem);
    }

    .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);
}

.links-legais a {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s ease;
}

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

.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: 1rem;
        text-align: center;
    }

    .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 */
    }

}

/* =========================================
   BANNER DE COOKIES (GLASSMORPHISM)
========================================= */
.cookie-wrapper {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    /* Começa escondido */
    width: 90%;
    max-width: 700px;
    z-index: 99999;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.cookie-container {
    background: rgba(253, 251, 247, 0.8);
    /* Sua --cor-fundo com transparência */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(212, 165, 165, 0.3);
    /* Sua --cor-primaria */
    padding: 1.5rem 2rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 2rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.cookie-tag {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--cor-primaria);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.cookie-texto p {
    font-size: 0.9rem;
    color: var(--cor-texto);
    line-height: 1.5;
    margin: 0;
}

.cookie-acoes {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.btn-cookie-primario,
.btn-cookie-secundario {
    padding: 0.8rem 1.2rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

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

.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);
}

/* 1. Tablet / Notebook (<= 1024px) */
@media (width <=1024px) {
    .cookie-wrapper {
        width: 95%;
        max-width: 650px;
    }

    .cookie-container {
        padding: 1.2rem 1.5rem;
        gap: 1.5rem;
    }
}

/* 2. Mobile Padrão (<= 768px) */
@media (width <=768px) {
    .cookie-container {
        flex-direction: column;
        text-align: center;
        gap: 1.2rem;
    }

    .cookie-acoes {
        width: 100%;
        flex-direction: column;
        /* Botões empilhados para facilitar o toque */
        gap: 0.8rem;
    }

    .btn-cookie-primario,
    .btn-cookie-secundario {
        width: 100%;
        padding: 1rem;
        /* Área de toque maior (UX de alta performance) */
    }

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

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

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

    .cookie-tag {
        font-size: 0.65rem;
        letter-spacing: 1.5px;
    }

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