/* ===================================================================
   COMMON.CSS — usado em TODAS as páginas do site.
   Header, navegação, botão CTA, rodapé, ícones sociais e WhatsApp
   flutuante. Estilos exclusivos da Home (hero, sobre, serviços,
   galeria, resultados, contato) ficam em home.css.
   =================================================================== */
:root{
    --dourado:#b89765;
    --dourado-hover:#9c7f53;
    --fundo-creme:#fdfbf7;
    --texto-principal:#5e5448;
    --texto-suave:#8a8175;
    --branco:#ffffff;
    --fundo-contato:#b69e81;
    --whatsapp-dourado:#b89765;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    font-family:'Montserrat',sans-serif;
    background-color:var(--fundo-creme);
    color:var(--texto-principal);
    line-height:1.6;
    animation:pageFadeIn .45s ease both;
}
@keyframes pageFadeIn{
    from{opacity:0; transform:translateY(8px);}
    to{opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
    body{animation:none;}
}
h1,h2,h3{font-family:'Playfair Display',serif;}

.icon{width:1em;height:1em;fill:currentColor;vertical-align:-.125em;display:inline-block;}
.servico-pill .icon{color:var(--dourado);font-size:18px;flex-shrink:0;}
.quando-item .icon{color:var(--dourado);flex-shrink:0;}
.info-bloco a{color:var(--dourado-hover);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;}
.info-bloco a:hover{color:var(--dourado);}

/* ===================================================================
   PADRONIZAÇÃO GLOBAL DE LINKS
   Sem o azul padrão do navegador e sem sublinhado fixo: o link
   acompanha o tom de texto da página (color:inherit) e passa para o
   dourado da marca no :hover. Botões (.cta-btn, .bairros-cta, etc.)
   e links já estilizados por classe própria continuam intactos por
   terem especificidade maior.
   =================================================================== */
a{
    color:inherit;
    text-decoration:none;
    transition:color .2s ease;
}
a:hover{
    color:var(--dourado);
}
a:focus-visible{
    outline:2px solid var(--dourado);
    outline-offset:2px;
    border-radius:2px;
}

/* ===================================================================
   JUSTIFICAÇÃO DO TEXTO CORRIDO
   Padroniza em "justificado" os parágrafos de texto longo de todo o
   site (páginas de bairro/serviço, página de bairros, portal do blog e
   posts). Afeta apenas parágrafos e itens de lista de CONTEÚDO —
   títulos, botões, menus, legendas, datas, cards e blocos centralizados
   por design mantêm o alinhamento próprio (regras com especificidade
   maior vencem esta). "text-align-last:left" evita a última linha
   esticada; "hyphens:auto" (com lang="pt-br" no <html>) reduz os vãos
   entre palavras nas colunas estreitas.
   =================================================================== */
.info-bloco p,
.bairros-intro p,
.servico-desc,
.servico-texto p,
.local-text p,
.local-content p,
.artigo-conteudo p,
.article-content p,
.post-content p,
.content p,
.content li{
    text-align:justify;
    text-align-last:left;
    -webkit-hyphens:auto;
    hyphens:auto;
}

/* ===================================================================
   CARDS "Procedimentos mais buscados por quem vem de ..."
   (.quando-grid / .quando-item — presentes nas páginas de bairro).
   Correção de estouro de texto em nomes longos como
   "Intradermoterapia capilar" e "Microagulhamento": permite quebra de
   palavra, deixa o item encolher dentro da grade e reduz/adapta a
   fonte. Seletor com 3 classes para vencer o CSS inline das páginas.
   =================================================================== */
.info-bloco .quando-grid{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
}
.info-bloco .quando-grid .quando-item{
    min-width:0;
    padding:12px 12px;
    font-size:clamp(12px,2.4vw,13px);
    line-height:1.4;
    overflow-wrap:break-word;   /* só quebra a palavra se ela realmente não couber */
}
.info-bloco .quando-grid .quando-item a{
    min-width:0;                /* deixa o link encolher no flex, sem estourar a caixa */
    overflow-wrap:break-word;
}

/* ===================================================================
   HERO DAS PÁGINAS DE SERVIÇO — fluxo do texto descritivo
   O CSS inline das páginas limita .servico-desc a max-width:480px, o
   que quebra o parágrafo antes de acompanhar toda a largura da coluna
   de texto (até a linha do <h1>, que vai até "Guarulhos"), deixando
   um vão abaixo do título no desktop.
   A correção é só liberar essa largura — a distribuição flex-basis
   fixa de .servico-texto (320px) e .servico-hero-img (260px, com
   max-width:340px) já funciona e NÃO deve virar "auto", senão a base
   passa a ser max-content e a imagem quebra para a linha de baixo.
   O seletor .servico-hero .servico-desc tem especificidade maior que
   o inline, então vence sem !important; o mobile já era max-width:100%.
   =================================================================== */
.servico-hero .servico-hero-inner{
    align-items:flex-start;
}
.servico-hero .servico-desc{
    max-width:100%;
}

/* ===================================================================
   Botão "Quero agendar" centralizado dentro do card lateral
   (.servico-lateral .cta-lateral). Seletor com 2 classes para vencer
   o .cta-lateral a{display:inline-block} do CSS inline das páginas —
   vira bloco com largura do conteúdo e margens automáticas, então
   fica centrado sem mexer no alinhamento do texto acima dele.
   =================================================================== */
.servico-lateral .cta-lateral a{
    display:block;
    width:-moz-fit-content;
    width:fit-content;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

header{
    background-color:var(--branco);
    padding:15px 5%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:1000;
    border-bottom:2px solid var(--dourado);
    flex-wrap:wrap;
}
.header-logo{
    height:52px;
    width:156px;
    object-fit:contain;
    display:block;
}
.menu-checkbox{display:none;}
.menu-icon{
    font-size:26px;
    color:var(--dourado);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin:-9px -8px -9px -6px;   /* alvo de toque 44px sem deslocar o layout */
    position:relative;
    z-index:1002;
    -webkit-tap-highlight-color:transparent;
}
.menu-icon .icon{pointer-events:none;}   /* o toque sempre cai no <label>, nunca no <svg> */
/* Fundo escuro atrás do menu aberto: o próprio checkbox vira um véu de tela
   cheia quando marcado. Tocar nele alterna o checkbox e fecha o menu.
   z-index 1000 = abaixo do <nav> (1001), então os links do menu funcionam. */
.menu-checkbox:checked{
    display:block;
    position:fixed;
    inset:0;
    margin:0;
    width:auto;
    height:auto;
    -webkit-appearance:none;
    appearance:none;
    border:0;
    background:rgba(0,0,0,.4);
    z-index:1000;
    cursor:pointer;
    animation:menuFade .2s ease;
}
@keyframes menuFade{from{opacity:0}to{opacity:1}}
/* Menu lateral em telas reduzidas */
nav{
    position:fixed;
    top:0;
    left:0;
    width:min(320px, 82vw);
    height:100dvh;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    text-align:left;
    padding:105px 28px 30px;
    margin:0;
    border:0;
    background:var(--branco);
    box-shadow:10px 0 30px rgba(0,0,0,.18);
    z-index:1001;
    overflow-y:auto;
    transform:translateX(-105%);
    transition:transform .28s ease, visibility 0s linear .28s;
    visibility:hidden;
}
.menu-checkbox:checked ~ nav{
    transform:translateX(0);
    visibility:visible;
    transition:transform .28s ease, visibility 0s linear 0s;
}
nav a{
    text-decoration:none;
    color:var(--texto-principal);
    padding:15px 8px;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    transition:color .2s ease, background-color .2s ease;
    border-radius:5px;
}
nav a:hover{
    color:var(--dourado);
    background:rgba(184,151,101,.08);
}

.cta-btn{
    background-color:var(--dourado);
    color:white;
    padding:14px 35px;
    text-decoration:none;
    font-weight:600;
    font-size:11px;
    letter-spacing:1.5px;
    transition:0.4s;
    text-transform:uppercase;
    display:inline-block;
    border-radius:3px;
    box-shadow:0 4px 15px rgba(0,0,0,0.2);
}
.cta-btn:hover{
    background-color:var(--dourado-hover);
    transform:translateY(-2px);
}

.estetica-footer{
    background-color:var(--branco);
    padding:50px 5% 20px;
    border-top:4px solid var(--dourado);
    text-align:center;
    content-visibility:auto;
    contain-intrinsic-size:420px;
}
.footer-content{
    display:flex;
    flex-direction:column;
    gap:40px;
    max-width:1100px;
    margin:0 auto;
}
.footer-logo{
    max-width:240px;
    height:auto;
    display:block;
    margin:0 auto;
}
.social-icons{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:15px;
}
.social-icons a{
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid var(--dourado);
    color:var(--dourado);
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:0.3s;
}
.social-icons a:hover{
    background:var(--dourado);
    color:white;
}
.whatsapp-float{
    position:fixed;
    bottom:20px;
    right:20px;
    background-color:var(--whatsapp-dourado);
    color:white;
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:26px;
    z-index:999;
    box-shadow:0 4px 15px rgba(0,0,0,0.2);
    transition:0.3s;
}
img{
    -webkit-user-drag:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    pointer-events:auto;
}
img[draggable]{
    pointer-events:none;
    -webkit-user-drag:none;
}
.svg-sprite{display:none;}
.section-white{background-color:var(--branco);}
.section-cream{background-color:var(--fundo-creme);}
.servico-grid-spaced{margin-top:30px;}
.servico-principal-full{flex:1 1 100%;}
.footer-title{margin-bottom:10px;font-size:18px;font-weight:700;}
.footer-meta{margin-top:40px;color:#aaa;font-size:.8rem;}
.footer-admin{margin-top:8px;}
.footer-admin-link{color:#aaa;text-decoration:underline;}
.section-contact{background-color:var(--fundo-contato);color:var(--branco);}
.section-title-light{color:var(--branco);}
.neighborhood-intro{max-width:680px;margin:0 auto 30px;text-align:center;color:var(--branco);opacity:.9;font-size:14.5px;line-height:1.7;}
.center-spaced{ text-align:center;margin-top:30px;}
.cta-light{background:transparent;color:var(--branco);border:1px solid var(--branco);box-shadow:none;}
.location-title{margin-bottom:20px;font-size:24px;}
.blog-intro{text-align:center;color:var(--texto-suave);max-width:600px;margin:-20px auto 40px;font-size:14.5px;}
.cta-outline{background:transparent;color:var(--dourado);border:1px solid var(--dourado);box-shadow:none;}
.local-heading{font-size:19px;margin-top:26px;}
.voltar-bairros{text-align:center;margin-top:14px;font-size:13px;}
.voltar-bairros + .voltar-bairros{margin-top:10px;}
.voltar-bairros a.bairros-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--dourado);
    color:var(--branco);
    padding:14px 24px;
    border:1px solid var(--dourado);
    border-radius:3px;
    box-shadow:0 4px 15px rgba(0,0,0,.16);
    font-size:11px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    transition:background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.voltar-bairros a.bairros-cta:hover{
    background:var(--dourado-hover);
    border-color:var(--dourado-hover);
    color:var(--branco);
    text-decoration:none;
    transform:translateY(-2px);
}
.voltar-bairros a.bairros-cta:focus-visible{
    outline:3px solid rgba(184,151,101,.35);
    outline-offset:3px;
}

@media (min-width:768px){
    .footer-content{
        flex-direction:row;
        justify-content:space-between;
        text-align:left;
    }
    .social-icons{justify-content:flex-start;}
}

@media (min-width:992px){
    header{
        padding:15px 8%;
        flex-wrap:nowrap;
    }
    .header-logo{
        height:64px;
        width:192px;
        font-size:14px;
    }
    .menu-icon{display:none;}
    nav{
        position:static;
        width:auto;
        height:auto;
        display:flex;
        flex-direction:row;
        text-align:left;
        padding:0;
        margin:0;
        border:none;
        background:transparent;
        box-shadow:none;
        overflow:visible;
        transform:none;
        visibility:visible;
        transition:none;
        z-index:auto;
    }
    nav a{
        padding:0;
        margin-left:25px;
        font-size:12px;
        background:transparent;
    }
    nav a:hover{background:transparent;}
    .cta-btn{padding:16px 45px;}
    .whatsapp-float{
        width:60px;
        height:60px;
        font-size:30px;
        bottom:30px;
        right:30px;
    }
    .whatsapp-float:hover{
        transform:scale(1.1);
        background-color:var(--dourado-hover);
    }
}

/* ===================================================================
   MOBILE — ajustes para Android / telas pequenas
   =================================================================== */

/* 1) Nas páginas de serviço, o card "Converse com a equipe" + os botões
   "Ver todos os..." (aside .servico-lateral) ficam por último no HTML,
   depois do FAQ, dos relacionados e do acordeão de bairros. */
.servico-conteudo > .servico-lateral{margin-top:34px;}
.servico-conteudo > .servico-lateral .cta-lateral{max-width:640px;margin-left:auto;margin-right:auto;}
.servico-conteudo > .servico-lateral .voltar-bairros{margin-top:16px;}

/* 2) Rodapé: espaço para o botão flutuante do WhatsApp não passar por
   cima do texto; o "© ..." fica em ~2 linhas, centralizado. */
@media (max-width:600px){
    .estetica-footer{padding-bottom:92px;}
    .footer-meta,
    .estetica-footer > div:last-child{padding-left:12px;padding-right:12px;}
    .footer-meta p,
    .estetica-footer > div:last-child p{max-width:330px;margin-left:auto;margin-right:auto;line-height:1.6;}
}