/* ==========================================================================
   🌍 CONFIGURAÇÕES GERAIS E RESETS ÚNICOS - LIMPO E CALIBRADO
   ========================================================================== */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: #f4f6f9;
    color: #2d3748;
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    padding-top: 54px; 
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
}

/* 🏢 MENU SUPERIOR PADRONIZADO (Preto Premium com Linha Dourada FIXO) 🖤 */
nav.topo-nav,
.topo-nav {
    background: linear-gradient(135deg, #111115 0%, #070709 100%);
    border-bottom: 2px solid #8b7355; 
    padding: 14px 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav.topo-nav a,
.topo-nav a {
    color: #ffffff;
    font-size: 19px;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: 1px;
}

/* 📦 CONTAINER DE CONTEÚDO PRINCIPAL */
.conteudo {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px 15px 30px 15px; 
    box-sizing: border-box;
    flex: 1 0 auto;
}

/* 🔙 BOTÃO VOLTAR - ESTILO BUTTON DE SISTEMA RECALIBRADO COM RESPIRO */
.btn-voltar {
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px; 
    
    /* 🎯 MARGEM CALIBRADA PARA DAR FOLGA DA BARRA DO TOPO: */
    margin-top: 15px;    /* 🌟 ALTERADO: De 5px para 15px para dar o respiro estratégico */
    margin-bottom: 18px; 
    
    /* 🎯 DIMENSÕES COMPACTADAS DE SISTEMA RECALIBRADAS: */
    width: 185px;        
    height: 66px;        
    padding: 0;          /* Mantém as medidas fixas no controle absoluto */
    
    background: #0f1015; /* Preto carbono sólido de alto luxo */
    border: 1px solid #282a36; 
    border-radius: 10px; /* Cantos arredondados modernos */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    box-sizing: border-box;
}

.btn-voltar:hover {
    color: #e4c379; /* O texto acende no tom dourado/champanhe do seu portal */
    background: #16171f; /* Clareia sutilmente mantendo o preto sólido */
    border-color: #e4c379; /* A bordinha acende acompanhando o dourado premium */
    transform: translateY(-2px); /* Elevação suave dando resposta mecânica ao toque */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.btn-voltar:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* 🎛️ ESTRUTURA GRID RESPONSIVA DO PERFIL (BI-COLUNAS) */
.grid-perfil {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 5px; 
}

/* Nome da Acompanhante */
.widget_title {
    font-family: 'Georgia', 'Merriweather', serif; 
    font-size: 20px; 
    font-weight: 500; 
    color: #991b1b; 
    letter-spacing: -0.2px; 
    text-transform: capitalize; 
    margin-top: 14px; 
    margin-bottom: 2px; 
}

/* Linha da Cidade e ID */
.widget_subtitle {
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #64748b; 
}

.sub-titulo-cidade {
    font-size: 14px;
    color: #8b7355; 
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 12px; 
}

.widget_title_bar {
    width: 100%; 
    height: 1px; 
    background: linear-gradient(90deg, #8b7355 0%, #c8a27c 50%, #fdfbf7 100%); 
    border-radius: 2px;
    margin-top: 5px;
    margin-bottom: 18px; 
}

/* 📝 DESCRIÇÃO ESTILO WORD */
.descricao-box,
.texto-perfil-limpo {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 18px; 
    margin-top: 25px;
    margin-bottom: 50px; 
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
    font-size: 16.5px;
    line-height: 1.85; 
    color: #334155;
    font-weight: 500;
    font-style: normal;
    box-shadow: none;
    position: relative;
    text-align: justify;
    word-break: break-word;       
    text-justify: normal;         
    letter-spacing: normal;       
    hyphens: auto;
    -webkit-hyphens: auto;        
    -ms-hyphens: auto;
}
/* 🚀 BOTÕES DE AÇÃO VERTICAIS */
.btn-acao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px; 
    font-size: 14.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 12px; 
    margin-bottom: 12px;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-ligar {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); 
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}
.btn-ligar:hover {
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.3);
}

.btn-whats {
    background: linear-gradient(135deg, #22c55e 0%, #15a34a 100%); 
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25);
}
.btn-whats:hover {
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35);
}

/* ==========================================================================
   📊 ALTERAÇÃO DO TÍTULO "PERFIL" (CLONE EXATO DO ESTILO DO TOPO)
   ========================================================================== */
.titulo-perfil-ficha {
    font-family: 'Manrope', sans-serif; /* Mesma fonte moderna do topo do seu modelo */
    font-size: 26px; /* Tamanho idêntico ao do nome lá de cima */
    font-weight: 700; /* Negrito marcante e robusto */
    color: #2f3338; /* Cor escura elegante e limpa do modelo de referência */
    letter-spacing: -0.5px;
    margin: 0 0 6px 0;
    line-height: 1.2;
    text-transform: capitalize; /* Força a primeira letra maiúscula */
    text-align: left;
}

/* 🎯 A LINHA DO MODELO: Cria a linha dourada fina de 1px logo abaixo da palavra Perfil */
.secao-ficha-perfil::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #cfad7c; /* Sincronizado com o dourado das fotos e do cabeçalho */
    margin-top: 8px;
    margin-bottom: 20px;
}

/* ==========================================================================
   📊 CORREÇÃO DO TÍTULO "PERFIL" (CLONE DO TOPO E JUNTINHO DO WHATSAPP)
   ========================================================================== */
.secao-ficha-perfil {
    /* 🎯 AJUSTADO: Reduzido drasticamente de 35px para apenas 10px para colar o título perto do botão */
    margin-top: 10px; 
    margin-bottom: 15px;
    width: 100%;
}

.titulo-perfil-ficha {
    /* Usa a mesma fonte exata do nome do anunciante */
    font-family: 'Georgia', 'Merriweather', serif; 
    font-size: 24px; /* Tamanho proporcional idêntico ao topo */
    font-weight: 700; 
    
    /* Tom marrom escuro/vinho fechado extraído direto do nome Jose Silva */
    color: #803333; 
    
    letter-spacing: -0.2px;
    /* 🎯 AJUSTADO: Zerada a margem superior para o título subir totalmente */
    margin: 0 0 6px 0; 
    line-height: 1.2;
    text-transform: capitalize; 
    text-align: left;
    display: block;
}

/* Força a linha dourada fina de 1px a nascer LOGO DEBAIXO da palavra Perfil */
.titulo-perfil-ficha::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #cfad7c; /* Sincronizado com o dourado das fotos e do cabeçalho */
    margin-top: 8px; /* Espaço perfeito entre a palavra e a linha */
}

/* ==========================================================================
   📊 LINHAS DA FICHA TÉCNICA (ESTRUTURA DE DADOS MANTIDA)
   ========================================================================== */
.lista-perfil {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
}

.lista-perfil li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 12px; 
    border-bottom: none; 
    font-size: 15px;
    transition: background-color 0.2s ease;
}

.lista-perfil li:hover {
    background-color: #fdfbf7; 
    border-radius: 6px; 
}

.lista-perfil li strong {
    color: #475569; 
    font-weight: 600;
}

.lista-perfil li span {
    color: #cfad7c; /* Sincronizado com o novo dourado acetinado do portal */
    background-color: #fdf8ee; 
    font-weight: 700;
    font-size: 13.5px;
    padding: 6px 16px;
    border-radius: 50px;       
    border: none;              
    box-shadow: 0 2px 6px rgba(139, 115, 85, 0.04); 
    letter-spacing: 0.3px;
}

/* ==========================================================================
   📸 GRADE DA GALERIA DE FOTOS EXTERNA (MANTIDA A ALTURA, BORDA GROSSA E LARGURA MÁXIMA)
   ========================================================================== */
.galeria-grid {
    display: grid;
    /* Mantém as 3 colunas perfeitas e fixas lado a lado */
    grid-template-columns: repeat(3, 1fr);
    /* 🎯 AJUSTADO: Reduzido ao limite de 2px para as fotos ganharem tamanho lateral total */
    gap: 2px; 
    margin-top: 20px;
    width: 100%;
}

.galeria-box {
    position: relative;
    width: 100%;
    /* 🎯 MANTIDO EXATO: Preserva a altura vertical alongada e imponente que você aprovou */
    aspect-ratio: 3 / 4.5;
    overflow: hidden;
    cursor: pointer;
}

/* Regras de moldura dourada robusta e imponente */
.galeria-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* 🎯 AJUSTADO: Engrossado para 3px com o dourado médio acetinado. Contorno forte e de extremo luxo! */
    border: 3px solid #cfad7c;
    border-radius: 4px; /* Mantém os cantos levemente suavizados do modelo */
    
    transition: transform 0.4s ease;
}

.galeria-box img:hover {
    transform: scale(1.04);
}

/* ==========================================================================
   🎯 ENGENHARIA DE MAXIMIZAÇÃO: ZERA MARGENS PARA COLAR NA TELA DO CELULAR
   ========================================================================== */
.col-right-ensaio, .col-direita-ensaio {
    /* 🎯 TRAVADO EM ZERO: Remove qualquer resquício de espaço branco nas laterais,
       forçando a grade dourada a colar perfeitamente nas quinas do aparelho */
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
}

.col-right-ensaio p, .col-direita-ensaio p {
    font-size: 13px;
    color: #4a5568; 
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    text-transform: uppercase; 
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Mantém o texto do título levemente afastado da parede do celular */
    padding-left: 10px; 
}

.col-right-ensaio p::before, .col-direita-ensaio p::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #cfad7c; 
    border-radius: 50%;
    animation: pulsarInteratividade 1.5s infinite;
}


/* ==========================================================================
   🎬 VISUALIZADOR EM PÉ TOTALMENTE INTEGRADO (CÓPIA FIEL DO MODELO)
   ========================================================================== */
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    /* Fundo escuro idêntico ao tom de respiro do modelo da garota */
    background-color: rgba(30, 28, 27, 0.96); 
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* Libera o controle de zoom por dois dedos nativo do celular */
    touch-action: pinch-zoom; 
}

/* Caixa interna que estica 100% nas laterais do celular */
.box-lightbox-wrapper {
    position: relative;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* Container da Imagem Principal */
.lightbox-imagem-box {
    position: relative;
    width: 100%;
    /* A proporção 3/4 cria o enquadramento vertical retrato exato do modelo */
    aspect-ratio: 3 / 4; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* IMAGEM RECALIBRADA: MATA AS BARRAS PRETAS LATERAIS E PREENCHE DE PONTA A PONTA */
div.lightbox-imagem-box img.lightbox-conteudo {
    width: 100%;
    height: 100%;
    /* Mudado para cover para a foto preencher as laterais e sumir com o fundo preto de trás das setas */
    object-fit: cover; 
    
    /* Borda cinza acetinada do modelo de 3px com cantos suaves */
    border: 5px solid #c7bfb8;
   border-radius: 6px 6px 0 0; /* Arredonda apenas os cantos de cima para criar uma moldura perfeita */
    
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
    
    /* Melhora a nitidez e a qualidade da foto na tela ao sofrer a aproximação do zoom */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
}

/* PAINEL DE INFORMAÇÕES DO TEXTO - ADAPTÁVEL PARA QUALQUER TELA */
html body div.lightbox-modal div.lightbox-rodape {
    position: absolute;       /* 💻 PC: Prende o bloco do nome diretamente na estrutura da foto */
    top: -45px;               /* 💻 PC: Faz a caixinha subir e flutuar totalmente acima da foto */
    left: 0;
    right: 0;
    width: 100%;              /* Acompanha exatamente a largura da imagem no computador */
    background-color: #121214; /* Fundo escuro premium para dar leitura excelente e profissional */
    padding: 10px 15px;       /* Espaçamento confortável interno */
    border-radius: 6px 6px 0 0; /* Arredonda apenas os cantos de cima para criar uma moldura perfeita */
    color: #ffffff;
    text-align: center;       /* Centraliza o nome em sintonia com a foto no computador */
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize; /* Garante que as iniciais do nome fiquem sempre maiúsculas */
    margin-top: 0;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    z-index: 9999999;
    line-height: 1.3;
}

/* BOTÃO FECHAR (X) RECALIBRADO EM SINTONIA NO TOPO DA TELA DO PC */
html body .lightbox-fechar {
    position: fixed; 
    top: 20px;                /* Mantém o botão de fechar fixo no topo da tela escura no PC */
    right: 25px; 
    color: #ffffff;
    font-size: 38px; 
    font-weight: 300; 
    cursor: pointer;
    z-index: 9999999; 
    line-height: 1;
    user-select: none;
    opacity: 0.85;
    transition: opacity 0.2s, transform 0.2s;
}

html body .lightbox-fechar:hover {
    opacity: 1;
    transform: scale(1.1);
    color: #ff5a5f; /* Mantém o realce moderno ao passar o mouse */
}

/* SETAS COMPACTAS DISCRETAS SOBRE A IMAGEM EM CELULARES E PC */
html body .seta-lightbox {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 26px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100000;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.4); 
    border-radius: 50%;
}

html body .seta-esq { left: 15px; }
html body .seta-dir { right: 15px; }

/* 📱 📱 REGRAS DE ISOLAMENTO EXCLUSIVAS PARA CELULARES (MANTÉM O SEU ORIGINAL DO SMARTPHONE) */
@media (max-width: 768px) {
    html body div.lightbox-modal div.lightbox-rodape {
        position: fixed;      /* 📱 Celular: Devolve o comportamento fixado original */
        top: 62px;            /* 📱 Celular: Mantém a altura estável que você aprovou no celular */
        left: 20px;      
        right: 70px;     
        width: auto;
        background-color: transparent;
        text-align: left;     /* 📱 Celular: Alinhamento original à esquerda */
        padding: 0;
        border-radius: 0;
    }
    
    html body .lightbox-fechar {
        top: 58px;            /* 📱 Celular: Realinha o X perfeitamente na mesma linha do mobile */
        right: 25px; 
        font-size: 36px;
    }

    html body .seta-lightbox {
        font-size: 24px;
        width: 40px;
        height: 40px;
        background-color: transparent;
    }
    html body .seta-esq { left: 10px; }
    html body .seta-dir { right: 10px; }
}

/* ==========================================================================
   🎯 AJUSTE RESPONSIVO PARA PC E NOTEBOOKS (SEM IMPORTANT)
   ========================================================================== */
@media (min-width: 992px) {
    /* Proporção vertical retrato suave do computador */
    .box-lightbox-wrapper {
        width: 58vh; 
        max-width: 560px; 
    }
    
    .lightbox-imagem-box {
        aspect-ratio: 3 / 3.6; 
        height: auto; 
    }

    div.lightbox-imagem-box img.lightbox-conteudo {
        width: 100%;
        height: 100%;
        object-fit: cover; 
    }
    
    /* 🎯 SELETOR ULTRA FORTE: Redefine o tamanho e adiciona o vidro fosco no PC naturalmente */
    body div.lightbox-modal span.seta-lightbox {
        position: fixed; /* Fixa as setas nas laterais físicas do monitor */
        top: 50%;
        transform: translateY(-50%);
        
        /* 🎯 Medidas robustas em círculo para cliques fáceis com o mouse */
        width: 55px;
        height: 55px;
        border-radius: 50%;
        font-size: 30px; 
        
        /* Cores e transparência de vidro fosco idênticos ao modelo */
        color: rgba(255, 255, 255, 0.75);
        background-color: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        transition: all 0.2s ease;
    }
    
    /* Efeito de destaque ao passar o mouse no computador */
    body div.lightbox-modal span.seta-lightbox:hover {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.25);
        transform: translateY(-50%) scale(1.08);
    }
    
    /* 🎯 Afastamento das quinas laterais do monitor */
    body div.lightbox-modal span.seta-esq { left: 40px; right: auto; }
    body div.lightbox-modal span.seta-dir { right: 40px; left: auto; }

    /* Centraliza as informações textuais embaixo da imagem no PC */
    div.lightbox-modal div.lightbox-rodape {
        text-align: center;
        padding: 0;
        margin-top: 15px;
    }
}

/* ==========================================================================
   👥 BLINDAGEM DE ROSTO PREMIUM - MODELO CÍRCULO REDONDINHO E AJUSTADO
   ========================================================================== */

/* 🎯 1. GRADE EXTERNA: Altera para 32% para fechar totalmente as orelhas e bochechas */
div.galeria-box div.mascara-rosto-premium {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 🎯 AJUSTE MILIMÉTRICO: Subido de 28% para 32% para engolir as bochechas nas laterais.
       Mantém o centro perfeito em 50% horizontal e 55% vertical */
    mask-image: radial-gradient(circle 32% at 50% 55%, black 45%, rgba(0, 0, 0, 0.2) 80%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle 32% at 50% 55%, black 45%, rgba(0, 0, 0, 0.2) 80%, transparent 100%);
    
    /* Vidro fosco denso e acetinado profissional */
    backdrop-filter: blur(25px) brightness(0.96);
    -webkit-backdrop-filter: blur(25px) brightness(0.96);
    background-color: rgba(255, 255, 255, 0.02);
    z-index: 2;
}

/* 🎯 2. VISUALIZADOR CINEMA (LIGHTBOX): Mesma bola redondinha sincronizada para o slide grande */
div.lightbox-imagem-box div.mascara-rosto-premium-lightbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Sincroniza os mesmos 32% para o visualizador expandido de cinema */
    mask-image: radial-gradient(circle 32% at 50% 55%, black 45%, rgba(0, 0, 0, 0.2) 80%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle 32% at 50% 55%, black 45%, rgba(0, 0, 0, 0.2) 80%, transparent 100%);
    
    backdrop-filter: blur(25px) brightness(0.96);
    -webkit-backdrop-filter: blur(25px) brightness(0.96);
    background-color: rgba(255, 255, 255, 0.02);
    z-index: 5;
}

/* 🎬 PLAYERS DE VÍDEO */
.bloco-video { margin-top: 35px; }
.box-video-wrapper {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    background: #000000;
    aspect-ratio: 16/9;
}
.box-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 🖤 RODAPÉ SITE */
.rodape-site {
    background-color: #0d0d11; 
    border-top: 2px solid #8b7355; 
    color: #a0aec0;
    padding: 25px 15px; 
    text-align: center;
    font-size: 13px;
    margin-top: 15px; 
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}
.rodape-site a {
    color: #ffffff;
    text-decoration: none;
    margin: 0 10px;
    font-weight: 500;
}
.rodape-site a:hover {
    color: #c8a27c;
    text-decoration: none;
}
.rodape-aviso {
    max-width: 800px;
    margin: 10px auto 0 auto; 
    font-size: 11px;
    line-height: 1.6;
    color: #718096;
}

/* 💬 SEÇÃO DE COMENTÁRIOS */
.perfil-comentarios-secao {
    width: 100%;
    margin-top: 45px;
    margin-bottom: 30px;
    box-sizing: border-box;
}
.perfil-comentarios-secao .widget_title {
    font-family: 'Georgia', 'Merriweather', serif; 
    font-size: 21px; 
    font-weight: 600; 
    color: #0f172a;
    text-transform: none; 
}
.sub-titulo-comentarios {
    font-size: 13.5px; 
    color: #8b7355;
    font-weight: 500; 
    margin-top: 2px;
    margin-bottom: 12px;
    letter-spacing: 0.2px;
}
.comentario-form-box {
    background-color: transparent; 
    border: none;                  
    padding: 15px 0px;             
    margin-bottom: 30px;
    box-shadow: none;              
}
.comentario-form-box h4 {
    font-family: 'Georgia', 'Merriweather', serif;
    font-size: 16px; 
    font-weight: 600; 
    color: #0f172a;
    margin: 0 0 18px 0;
}
.comentario-form-box .form-linha-dupla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}
.comentario-form-box input[type="text"],
.comentario-form-box select,
.comentario-form-box textarea {
    width: 100%;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0; 
    border-radius: 10px;
    padding: 14px 16px; 
    font-family: inherit;
    font-size: 15px;    
    color: #334155; 
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.comentario-form-box input[type="text"]:focus,
.comentario-form-box select:focus,
.comentario-form-box textarea:focus {
    border-color: #8b7355;
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.05);
}
.comentario-form-box textarea {
    resize: vertical;
    margin-bottom: 18px;
}
.btn-enviar-comentario {
    background: #1e293b; 
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 14px 28px; 
    font-size: 14px;    
    font-weight: 600; 
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
    text-decoration: none;
}
.btn-enviar-comentario:hover {
    background: #0f172a;
    color: #ffffff;
}
.comentarios-lista-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.comentario-item-card {
    background-color: transparent; 
    border: none;                  
    border-bottom: 1px solid #f1f5f9; 
    padding: 20px 0px;             
    box-sizing: border-box;
}
.comentario-item-card:last-child { border-bottom: none; }
.comentario-top-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.comentario-top-meta .cliente-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.comentario-top-meta .cliente-info strong {
    font-size: 16px; 
    color: #0f172a;
    font-weight: 600; 
}
.cliente-badge-verificado {
    font-size: 11px; 
    font-weight: 600;
    color: #16a34a;
    background-color: #f0fdf4;
    padding: 3px 8px;
    border-radius: 50px;
}
.comentario-top-meta .cliente-nota-data {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.comentario-top-meta .estrelas { font-size: 14px; letter-spacing: 1px; }
.comentario-top-meta .data { font-size: 12px; color: #94a3b8; font-weight: 500; }
.comentario-texto-conteudo {
    font-size: 15px; 
    line-height: 1.6;
    color: #334155; 
    margin: 0;
    text-align: left;
}
.comentario-vazio { text-align: center; padding: 40px 20px; color: #64748b; }

/* ==========================================================================
   📱 CALIBRAÇÃO EXCLUSIVA PARA CELULARES (MATA ROLAGEM E AJUSTA PAINEL)
   ========================================================================== */
@media (max-width: 768px) {
    .rodape-site { margin-top: 10px; padding: 20px 15px; }
    .grid-perfil { grid-template-columns: 1fr; }
    
    .lightbox-modal {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    
    .lightbox-modal .box-lightbox-wrapper {
        width: 100vw;
        max-width: 100vw;
        padding: 0;
    }
    
    .lightbox-modal .lightbox-conteudo {
        max-height: 68vh;
        width: 100%;
        max-width: 100%;
        object-fit: contain;
    }
    
    .lightbox-modal .lightbox-rodape {
        background-color: #121214;
        padding: 12px 15px 4px 15px;
        border-radius: 0;
    }
    
    .lightbox-miniaturas-container {
        padding: 4px 15px 20px 15px; 
        border-radius: 0;
    }

    .comentario-form-box .form-linha-dupla { grid-template-columns: 1fr; gap: 14px; }
    .comentario-top-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
    .comentario-top-meta .cliente-nota-data {
        align-items: flex-start;
        flex-direction: row-reverse;
        justify-content: space-between;
        width: 100%;
        margin-top: 4px;
        border-top: 1px solid #f1f5f9;
        padding-top: 8px;
    }
    .btn-enviar-comentario { width: 100%; text-align: center; }
}


    /* 🎯 AJUSTE MOBILE DE MESTRE: Setas fixadas na borda física da tela, 100% fora da foto */
    .lightbox-modal .seta-lightbox {
        position: fixed; /* 👈 Trocado absolute por fixed para prender na borda do aparelho */
        font-size: 20px;
        width: 38px;
        height: 38px;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.6); /* Destaca a seta no fundo preto puro */
        border-radius: 50%;
        z-index: 100000;
    }
    
    /* Cola no limite extremo esquerdo e direito, fora da imagem */
    .lightbox-modal .seta-esq { 
        left: 2px; 
    }
    .lightbox-modal .seta-dir { 
        right: 2px; 
    }



/* ==========================================================================
   🎯 ANIMAÇÃO DE ONDAS PULSANTES PREMIUM PARA OS BOTÕES DE CONTATO
   ========================================================================== */

/* 🟢 1. ONDAS DO WHATSAPP (Efeito Neon Verde Inteligente) */
.pulse-contato-verde {
    position: relative;
    animation: pulsoVerdeEfeito 2s infinite;
}

@keyframes pulsoVerdeEfeito {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}




/* ⚫ 2. ONDAS DO BOTÃO LIGAR (Efeito de Impacto Sofisticado Escuro - Diminuído e Discreto) */
.pulse-contato-preto {
    position: relative;
    animation: pulsoPretoEfeito 2s infinite;
}

@keyframes pulsoPretoEfeito {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6);
    }
    70% {
        /* Reduzido de 15px para 8px para a onda expandir bem pouquinho e ficar colada ao botão */
        box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

/* 🚀 Efeito sutil de flutuação ao passar o mouse ou o dedo por cima */
.btn-acao:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    transition: all 0.3s ease;
}