* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    background: #fafafa;
    color: #333;
}

/* FONTE POPPINS
   Hospedada no proprio servidor, nao no Google Fonts: evita uma conexao
   a outro dominio no caminho critico e mantem o site independente de
   terceiros. Sao só os caracteres latinos - o suficiente para portugues,
   acentos inclusive - o que deixa a familia inteira em ~31 KB.

   font-display: swap faz o texto aparecer na hora, na fonte do sistema,
   e trocar para a Poppins quando ela chega. Sem isso o visitante veria
   um trecho de texto invisivel enquanto a fonte carrega. */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/poppins-400.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/poppins-500.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/poppins-600.woff2") format("woff2");
}

/* 700 e' o peso que os navegadores usam por padrao em h1-h3, <b> e
   <strong>. Sem este bloco esses textos cairiam para a fonte do sistema. */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/poppins-700.woff2") format("woff2");
}

:root {
    /* Check dourado usado como marcador das listas de serviços.
       Antes era o glifo "\f00c" da fonte do Font Awesome; sem ela o
       navegador mostrava um quadradinho vazio no lugar. Aqui o desenho
       vai embutido no próprio CSS, sem baixar fonte nenhuma. */
    --check-dourado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23c59d5f' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
}

/* ÍCONES (SVG)
   Substituem o Font Awesome, que baixava ~296 KB de um servidor de
   terceiros para desenhar 13 ícones.

   O truque aqui e' o "1em" com "currentColor": faz o SVG se comportar
   exatamente como um caractere de fonte. Assim todas as regras que ja'
   existiam (.card-icon, .contato-icon, etc.) continuam funcionando com
   font-size e color, sem precisar de nenhuma alteracao. */
.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    /* alinha o ícone com a linha de base do texto ao lado */
    vertical-align: -0.125em;
}

/* O sprite e' so' a biblioteca de desenhos: nao aparece na tela. */
.svg-sprite {
    display: none;
}

/* Centralizacao dos icones que sao "display: block".
   Antes eles eram letras de uma fonte, entao o text-align: center do
   elemento pai bastava para centralizar. O SVG tem largura propria
   (1em), entao o text-align nao o alcanca - quem centraliza agora e'
   a margem automatica dos dois lados. */
.card-icon,
.contato-icon,
.service-detail-icon,
.service-modal-icon,
.servicos-grid .icon {
    margin-left: auto;
    margin-right: auto;
}

/* HEADER */
/*
   position + z-index alto criam um contexto de empilhamento proprio para o
   cabecalho. Sem isso o gradiente escuro do hero (.hero-overlay, tambem
   z-index 1) era pintado POR CIMA do menu suspenso e deixava os itens
   com aparencia apagada.
*/
header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    position: relative;
    z-index: 100;
}

header .container {
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    height: 70px;
}

nav a {
    margin-left: 20px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

nav a:hover {
    color: #c59d5f;
}

/* HERO */
.hero {
    position: relative;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: #222;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
}

/* Foto de destaque como <img> de verdade (e nao background-image), para a
   imagem poder aparecer no Google Imagens e ter texto alternativo.
   O object-fit: cover reproduz exatamente o enquadramento que o
   background-size: cover fazia antes. */
.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-slide.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
}

.hero-text {
    position: relative;
    z-index: 2;
}

.hero-text h1 {
    font-size: 3rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.hero-text p {
    color: #fff;
    margin: 10px 0 20px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.hero-dots .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 0;
}

.hero-dots .dot.active {
    background: #c59d5f;
    border-color: #c59d5f;
}

.btn {
    background: #c59d5f;
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
}

.btn:hover {
    background: #a8844a;
}

/* SEÇÕES */
section {
    padding: 60px 0;
}

.container {
    width: 90%;
    margin: auto;
}

h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2rem;
    color: #c59d5f;
}

/* SOBRE */
.sobre p {
    max-width: 700px;
    margin: 0 auto 15px;
    text-align: center;
    line-height: 1.6;
    color: #555;
}

.equipe-heading {
    text-align: center;
    color: #c59d5f;
    font-size: 1.4rem;
    margin: 40px 0 25px;
}

/* NOTA DO GOOGLE (selo na seção Sobre) */
.google-nota {
    /* flex + width fit-content para o margin auto centralizar de verdade:
       o .container da secao nao tem text-align: center (quem centraliza
       ali sao as regras de h2 e p, uma a uma) */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    margin: 0 auto 25px;
    padding: 8px 18px;
    border: 1px solid #e8dcc4;
    border-radius: 999px;
    background: #fdfaf4;
    text-decoration: none;
    transition: 0.3s;
}

.google-nota:hover {
    border-color: #c59d5f;
    transform: translateY(-2px);
}

.google-nota-valor {
    font-weight: 700;
    font-size: 1.15rem;
    color: #333;
}

.google-nota-estrelas {
    color: #c59d5f;
    letter-spacing: 1px;
}

.google-nota-texto {
    color: #666;
    font-size: 0.92rem;
}

@media (max-width: 400px) {
    .google-nota {
        gap: 7px;
        padding: 8px 14px;
    }

    .google-nota-texto {
        font-size: 0.82rem;
    }
}

/* CARROSSEL (Serviços / Equipe) */
.carousel {
    display: flex;
    align-items: center;
    gap: 15px;
}

.carousel--team,
.carousel--ambiente {
    max-width: 950px;
    margin: 0 auto;
}

.carousel-viewport {
    overflow: hidden;
    width: 100%;
}

.carousel-track {
    display: flex;
    gap: 20px;
    transition: transform 0.4s ease;
}

.carousel-track .card {
    flex: 0 0 calc((100% - 5 * 20px) / 6);
}

.carousel-track .team-card {
    flex: 0 0 calc((100% - 3 * 20px) / 4);
}

/* data-per-view="3,2,1" */
.carousel-track .ambiente-card {
    flex: 0 0 calc((100% - 2 * 20px) / 3);
}

.carousel-btn {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #eee;
    background: #fff;
    color: #c59d5f;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
}

.carousel-btn:hover {
    background: #c59d5f;
    color: #fff;
    border-color: #c59d5f;
}

.carousel-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.carousel-btn:disabled:hover {
    background: #fff;
    color: #c59d5f;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

/* Carrossel que tem texto logo abaixo, e nao o fim da secao. */
.carousel-dots--meio {
    margin-bottom: 35px;
}

.carousel-dots .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: #ddd;
    cursor: pointer;
    padding: 0;
}

.carousel-dots .dot.active {
    background: #c59d5f;
}

@media (max-width: 992px) {
    .carousel-track .card {
        flex: 0 0 calc((100% - 2 * 20px) / 3);
    }

    .carousel-track .team-card,
    .carousel-track .ambiente-card {
        flex: 0 0 calc((100% - 1 * 20px) / 2);
    }
}

@media (max-width: 600px) {
    .carousel-track .card,
    .carousel-track .team-card,
    .carousel-track .ambiente-card {
        flex: 0 0 100%;
    }
}

.card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    border: 1px solid #eee;
    transition: 0.3s;
    cursor: pointer;
}

.card:hover {
    transform: translateY(-5px);
    border-color: #c59d5f;
}

/* EQUIPE */
.team-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: 0.3s;
    line-height: 0;
}

.team-card:hover {
    transform: translateY(-5px);
    border-color: #c59d5f;
}

.team-photo {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    transition: transform 0.3s;
}

.team-photo:hover {
    transform: scale(1.04);
}

/* FOTOS DO SALAO (carrossel "Nosso Espaço") */
.ambiente-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: 0.3s;
    line-height: 0;
}

.ambiente-card:hover {
    transform: translateY(-5px);
    border-color: #c59d5f;
}

/*
   As fotos vieram do celular em 4:3 e 3:4 misturados. O aspect-ratio fixo
   com object-fit: cover deixa todos os cards do mesmo tamanho, sem distorcer
   a imagem e sem depender de recortar os arquivos.
*/
.ambiente-photo {
    width: 100%;
    /* sem o height: auto, o atributo height="960"/"1280" do <img> vale como
       hint de apresentacao, vence o auto inicial e anula o aspect-ratio */
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.3s;
}

.ambiente-photo:hover {
    transform: scale(1.04);
}

/* PROMOÇÕES (banners verticais)
   As artes chegam prontas em formato retrato e com o texto dentro da
   imagem, entao nada de object-fit: cover aqui - o corte comeria o
   preco. Cada banner fica inteiro dentro de uma moldura 3/4 escura:
   como o fundo das artes tambem e' escuro, a sobra lateral some e a
   arte parece ocupar o cartao todo. */
.promocoes {
    background: linear-gradient(180deg, #161514 0%, #211d17 100%);
    padding: 55px 0 60px;
}

.promocoes h2 {
    margin-bottom: 8px;
}

.promocoes-tag {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.75rem;
    color: #c59d5f;
    margin-bottom: 10px;
}

.promocoes-sub {
    text-align: center;
    color: #bdb7ae;
    max-width: 620px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.promocoes-fine {
    text-align: center;
    color: #8b857c;
    font-size: 0.8rem;
    max-width: 640px;
    margin: 25px auto 0;
    line-height: 1.5;
}

.carousel--banners {
    max-width: 1000px;
    margin: 0 auto;
}

/* Com 3 banners e 3 colunas no desktop nao ha' o que navegar - as setas
   somem em vez de ficarem apagadas. No tablet e no celular elas voltam. */
.carousel--banners .carousel-btn:disabled {
    display: none;
}

.carousel--banners .carousel-btn {
    background: transparent;
    border-color: rgba(197, 157, 95, 0.5);
}

.carousel--banners .carousel-btn:hover {
    background: #c59d5f;
    border-color: #c59d5f;
}

.carousel--banners .carousel-dots .dot {
    background: rgba(255, 255, 255, 0.25);
}

.carousel--banners .carousel-dots .dot.active {
    background: #c59d5f;
}

.carousel-track .banner-card {
    flex: 0 0 calc((100% - 2 * 20px) / 3);
}

.banner-card {
    display: flex;
    flex-direction: column;
    background: #0f0e0d;
    border: 1px solid rgba(197, 157, 95, 0.3);
    border-radius: 10px;
    overflow: hidden;
    transition: 0.3s;
}

.banner-card:hover {
    transform: translateY(-5px);
    border-color: #c59d5f;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.banner-figure {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    line-height: 0;
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: zoom-in;
    transition: transform 0.4s ease;
}

.banner-card:hover .banner-img {
    transform: scale(1.04);
}

.banner-zoom {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: #f2e4cb;
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: 0.5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.banner-zoom .icon {
    width: 13px;
    height: 13px;
    fill: #c59d5f;
}

.banner-card:hover .banner-zoom {
    opacity: 1;
}

.banner-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
    border-top: 1px solid rgba(197, 157, 95, 0.18);
}

.banner-info h3 {
    color: #e9d9bb;
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.banner-info p {
    color: #a8a199;
    font-size: 0.87rem;
    line-height: 1.5;
    margin-bottom: 14px;
}

.banner-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 10px 18px;
    border-radius: 5px;
    background: #c59d5f;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: 0.3s;
}

.banner-cta:hover {
    background: #a8844a;
}

.banner-cta .icon {
    width: 16px;
    height: 16px;
    fill: #fff;
}

/* Sem hover (celular e tablet) o aviso de ampliar fica sempre visivel,
   senao ninguem descobre que da' para abrir a arte em tela cheia. */
@media (hover: none) {
    .banner-zoom {
        opacity: 1;
    }
}

@media (max-width: 992px) {
    .carousel-track .banner-card {
        flex: 0 0 calc((100% - 1 * 20px) / 2);
    }
}

@media (max-width: 600px) {
    .carousel-track .banner-card {
        flex: 0 0 100%;
    }

    .carousel--banners {
        max-width: 420px;
    }
}

/* LIGHTBOX */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    z-index: 1000;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox img {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transform: scale(0.85);
    transition: transform 0.3s;
}

.lightbox.active img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
}

/* MODAL DE DETALHES DO SERVIÇO */
.service-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    z-index: 1000;
    padding: 20px;
}

.service-modal.active {
    opacity: 1;
    visibility: visible;
}

.service-modal-content {
    background: #fff;
    border-radius: 12px;
    max-width: 460px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 45px 30px 30px;
    text-align: center;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.service-modal.active .service-modal-content {
    transform: scale(1);
}

.service-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: #999;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.service-modal-close:hover {
    color: #c59d5f;
}

.service-modal-icon {
    display: block;
    font-size: 3rem;
    color: #c59d5f;
    margin-bottom: 15px;
}

.service-modal-content h3 {
    color: #333;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.service-modal-content p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}

.service-modal-list {
    list-style: none;
    text-align: left;
    margin: 0 0 25px;
}

.service-modal-list:empty {
    display: none;
}

.service-modal-list li {
    color: #555;
    line-height: 1.6;
    padding-left: 24px;
    position: relative;
}

.service-modal-list li::before {
    content: "";
    background-image: var(--check-dourado);
    background-repeat: no-repeat;
    background-size: contain;
    width: 0.85rem;
    height: 0.85rem;
    position: absolute;
    left: 0;
    top: 6px;
}

.service-modal--compact .service-modal-icon {
    font-size: 2.2rem;
    margin-bottom: 8px;
}

.service-modal--compact .service-modal-content h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.service-modal--compact .service-modal-content p {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 10px;
}

.service-modal--compact .service-modal-list {
    margin-bottom: 15px;
}

.service-modal--compact .service-modal-list li {
    font-size: 0.82rem;
    line-height: 1.35;
    padding-left: 20px;
    margin-bottom: 4px;
}

.service-modal--compact .service-modal-list li::before {
    font-size: 0.75rem;
}

/* CONTATO */
.contato {
    background: #fff;
}

.contato-subtitle {
    text-align: center;
    color: #555;
    margin-top: -15px;
    margin-bottom: 40px;
}

.contato-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.contato-card {
    background: #fafafa;
    padding: 30px 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #eee;
    transition: 0.3s;
}

.contato-card:hover {
    transform: translateY(-5px);
    border-color: #c59d5f;
}

.contato-icon {
    display: block;
    font-size: 2.2rem;
    color: #c59d5f;
    margin-bottom: 12px;
}

.contato-card h3 {
    color: #333;
    margin-bottom: 6px;
    font-size: 1.05rem;
}

.contato-card p {
    font-size: 1rem;
    color: #555;
}

.contato-card a {
    color: #555;
    text-decoration: none;
}

.contato-card a:hover {
    color: #c59d5f;
}

.btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto;
    background: #25d366;
}

.btn-whatsapp:hover {
    background: #1eb855;
}

/* FOOTER */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 15px;
}


/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
    margin-left: 20px;
}

/*
   O "Servicos" nao e mais link: virou botao que so abre a lista.
   Quem navega sao os itens do submenu, cada um com sua propria pagina.
   Os estilos abaixo repetem os de "nav a" para o visual ficar igual.
*/
.dropdown-toggle {
    color: #333;
    font-weight: 500;
    font-family: inherit;
    font-size: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.dropdown-toggle:hover,
.dropdown.open > .dropdown-toggle {
    color: #c59d5f;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    min-width: 240px;
    border: 1px solid #eee;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    padding: 6px 0;
    z-index: 200;
}

.dropdown-content a {
    color: #333;
    /* zera o margin-left de "nav a", que desalinhava os itens da lista */
    margin-left: 0;
    padding: 10px 18px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f5f5f5;
    color: #c59d5f;
}

/* Aberto pelo clique/toque - funciona no celular e no desktop */
.dropdown.open > .dropdown-content {
    display: block;
}

/* Hover so onde existe mouse de verdade (evita o menu "grudar" no celular) */
@media (hover: hover) and (pointer: fine) {
    .dropdown:hover .dropdown-content {
        display: block;
    }
}

/* ------------------------------------------------------------
   MENU NO CELULAR
   ------------------------------------------------------------
   Os quatro itens do menu nao cabem ao lado da logo em telas
   estreitas: o nav quebrava em duas linhas e ficava desalinhado
   com a logo. Ate 768px o menu vira um painel que desce do
   cabecalho, aberto pelo botao de tres tracos.
   ------------------------------------------------------------ */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    /* 44px e o alvo minimo confortavel para o dedo */
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background: #333;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.2s;
}

/* Aberto, os tres tracos viram um X */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .logo {
        height: 52px;
        width: auto;
    }

    /* O painel se apoia no header, que ja e position: relative */
    header nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid #eee;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
        padding: 4px 0;
    }

    header nav.open {
        display: block;
    }

    header nav > a,
    .dropdown-toggle {
        display: block;
        margin-left: 0;
        padding: 14px 20px;
        border-bottom: 1px solid #f2f2f2;
    }

    .dropdown {
        display: block;
        position: static;
        margin-left: 0;
    }

    .dropdown-toggle {
        width: 100%;
        text-align: left;
    }

    /*
       Dentro do painel o submenu empurra os itens de baixo em vez de
       flutuar por cima: flutuando, ele sairia da tela no celular.
    */
    .dropdown-content {
        position: static;
        min-width: 0;
        background-color: #faf8f4;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }

    .dropdown-content a {
        padding: 12px 20px 12px 36px;
        border-bottom: 1px solid #f0ece4;
    }

    .dropdown-content a:last-child {
        border-bottom: none;
    }

    header nav > a:last-child {
        border-bottom: none;
    }
}


/* Cards com ícones */
.card-icon {
    display: block;
    font-size: 2.5rem;
    color: #c59d5f;
    margin-bottom: 15px;
}
.card h3 {
    color: #c59d5f;
    margin-bottom: 8px;
}
.card p {
    font-size: 0.95rem;
    color: #555;
}

/* PÁGINA DE SERVIÇO INDIVIDUAL */
.breadcrumb {
    font-size: 0.85rem;
    color: #888;
    padding: 15px 0 0;
}

.breadcrumb a {
    color: #888;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: #c59d5f;
}

.breadcrumb .current {
    color: #c59d5f;
}

.service-detail {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.service-detail-icon {
    display: block;
    font-size: 3rem;
    color: #c59d5f;
    margin-bottom: 15px;
}

.service-detail-intro {
    color: #555;
    line-height: 1.7;
    margin-bottom: 25px;
    font-size: 1.05rem;
}

.service-detail-list {
    list-style: none;
    text-align: left;
    margin: 0 0 35px;
    display: inline-block;
}

/* H2 do bloco de introducao, presente em todas as paginas de servico */
.service-detail-h2 {
    font-size: 1.35rem;
    color: #c59d5f;
    margin-bottom: 12px;
}

.service-detail-list li {
    color: #555;
    line-height: 1.8;
    padding-left: 26px;
    position: relative;
}

.service-detail-list li::before {
    content: "";
    background-image: var(--check-dourado);
    background-repeat: no-repeat;
    background-size: contain;
    width: 0.85rem;
    height: 0.85rem;
    position: absolute;
    left: 0;
    top: 9px;
}

/* Em /servicos/estetica cada item da lista e' o link de um tratamento. Herdam
   a cor do item, como em .bairros-list, para nao aparecer o azul do navegador;
   o filete dourado e' o que ainda diz que da' para clicar. */
.service-detail-list a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #e2d2b4;
}

.service-detail-list a:hover {
    color: #c59d5f;
    border-bottom-color: #c59d5f;
}

.outros-servicos {
    background: #fff;
}

.servicos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    max-width: 950px;
    margin: 0 auto;
}

.servicos-grid a {
    display: block;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 18px 12px;
    text-align: center;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 0.9rem;
    transition: 0.3s;
}

.servicos-grid a:hover {
    transform: translateY(-3px);
    border-color: #c59d5f;
    color: #c59d5f;
}

.servicos-grid .icon {
    display: block;
    font-size: 1.6rem;
    color: #c59d5f;
    margin-bottom: 10px;
}

.service-modal-link {
    display: block;
    margin: -8px 0 18px;
    color: #c59d5f;
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 600;
}

.service-modal-link:hover {
    text-decoration: underline;
}

/* AREA DE ATENDIMENTO (SEO LOCAL) */
.area-atendimento {
    background: #fafafa;
}

.area-atendimento .container {
    max-width: 950px;
}

.area-atendimento p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 15px;
    text-align: center;
}

.area-atendimento h3 {
    text-align: center;
    margin: 30px 0 18px;
    font-size: 1.1rem;
    color: #333;
}

.bairros-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
}

/* Os bairros agora sao links para a pagina daquele bairro. Herdam a cor
   e o tamanho da "pastilha" para o visual continuar igual ao de antes. */
.bairros-list a,
.bairros-list .bairro-atual {
    color: inherit;
    font-size: inherit;
    text-decoration: none;
}

.bairros-list a:hover {
    color: #c59d5f;
}

/* O bairro da propria pagina nao vira link */
.bairros-list .bairro-atual {
    font-weight: 600;
    color: #c59d5f;
}

.bairros-list li {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 0.85rem;
    color: #555;
}

.area-endereco {
    font-weight: 500;
    color: #333 !important;
}

.area-endereco .icon {
    color: #c59d5f;
    margin-right: 6px;
}

/* FAQ */
.faq {
    background: #fff;
}

.faq .container {
    max-width: 800px;
}

.faq-item {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item h3 {
    font-size: 1.05rem;
    color: #333;
    margin-bottom: 10px;
}

.faq-item p {
    color: #555;
    line-height: 1.7;
    font-size: 0.95rem;
}

.faq-item a {
    color: #c59d5f;
    font-weight: 500;
}

.hero-text .hero-sub {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-top: -12px;
}

@media (max-width: 600px) {
    .bairros-list li {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}


/* ------------------------------------------------------------
   ARTIGOS (/blog)
   ------------------------------------------------------------
   As secoes de servico centralizam o texto, o que funciona bem
   para paragrafos de duas linhas mas cansa a leitura em conteudo
   longo. Aqui o texto e alinhado a esquerda, com medida de linha
   limitada (~800px) - o intervalo em que o olho acha a proxima
   linha sem esforco.
   ------------------------------------------------------------ */
.artigo {
    background: #fff;
}

.artigo .container {
    max-width: 800px;
}

.artigo h2 {
    text-align: left;
    font-size: 1.5rem;
    margin: 38px 0 14px;
}

.artigo h2:first-child {
    margin-top: 0;
}

.artigo h3 {
    font-size: 1.08rem;
    color: #333;
    margin: 26px 0 8px;
}

.artigo p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 16px;
}

.artigo ul,
.artigo ol {
    color: #555;
    line-height: 1.8;
    margin: 0 0 20px 22px;
}

.artigo li {
    margin-bottom: 8px;
}

.artigo strong {
    color: #333;
    font-weight: 600;
}

.artigo a {
    color: #c59d5f;
    font-weight: 500;
}

/* Primeiro paragrafo: um pouco maior, para dar entrada no texto. */
.artigo-intro {
    font-size: 1.08rem;
    color: #444;
    margin-bottom: 30px;
}

/* Aviso destacado (ex.: teste de mecha antes de quimica). */
.artigo-nota {
    background: #fdf8f0;
    border-left: 3px solid #c59d5f;
    border-radius: 4px;
    padding: 18px 22px;
    margin: 28px 0;
}

.artigo-nota p:last-child {
    margin-bottom: 0;
}

/* Bloco de chamada no fim do artigo. */
.artigo-cta {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 26px;
    margin-top: 40px;
    text-align: center;
}

.artigo-cta p {
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .artigo h2 {
        font-size: 1.3rem;
    }

    .artigo-cta {
        padding: 20px 16px;
    }
}

/* Link do artigo do blog dentro da pagina de servico. Fica entre a
   lista de servicos e o botao do WhatsApp, entao precisa respirar
   dos dois lados sem competir com o botao. */
.service-detail-leia {
    color: #555;
    font-size: 0.92rem;
    line-height: 1.7;
    margin: -20px 0 30px;
}

.service-detail-leia a {
    color: #c59d5f;
    font-weight: 500;
}

/* ------------------------------------------------------------
   ASSINATURA DO DESENVOLVEDOR (rodape)
   ------------------------------------------------------------
   Fica abaixo dos dados do salao, separada por uma linha e em
   corpo menor: e um credito, nao pode competir com o telefone e
   o endereco do proprio negocio.
   ------------------------------------------------------------ */
.powered-by {
    margin: 14px auto 0;
    padding-top: 14px;
    border-top: 1px solid #454545;
    max-width: 320px;
    font-size: 0.78rem;
}

/* inline-flex para o logo e o texto ficarem lado a lado e
   centralizados verticalmente entre si, sem float nem posicao
   absoluta. */
.powered-by a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #b0b0b0;
    text-decoration: none;
    text-align: left;
    transition: color 0.3s;
}

.powered-by a:hover {
    color: #fff;
}

.powered-by strong {
    color: #d6e7f0;
    font-weight: 600;
}

/* flex-shrink: 0 impede o logo de ser amassado quando o texto
   quebra em telas estreitas. */
.powered-by-logo {
    width: 62px;
    height: 30px;
    flex-shrink: 0;
}

/* MODAL DE PROMOÇÃO (clientes novos)
   Mesma mecanica dos outros modais do site: fica no HTML desde o inicio,
   invisivel, e o script so' acrescenta a classe .active. O visibility
   tambem tira o bloco da leitura dos leitores de tela enquanto fechado. */
.promo-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    z-index: 1100;
    padding: 20px;
}

.promo-modal.active {
    opacity: 1;
    visibility: visible;
}

.promo-modal-content {
    background: #fff;
    border-radius: 12px;
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px 30px 25px;
    text-align: center;
    position: relative;
    /* entra subindo um pouco, para o olho perceber que e' algo novo
       e nao um bloco que ja estava na pagina */
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border-top: 4px solid #c59d5f;
}

.promo-modal.active .promo-modal-content {
    transform: translateY(0) scale(1);
}

/* O cartao recebe o foco na abertura so' para orientar o leitor de tela;
   como nao e' um controle, nao mostra o anel de foco. Os botoes de dentro
   mantem o deles. */
.promo-modal-content:focus {
    outline: none;
}

.promo-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: #999;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.promo-modal-close:hover {
    color: #c59d5f;
}

.promo-badge {
    display: inline-block;
    background: #c59d5f;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 15px;
}

.promo-modal-content h2 {
    color: #333;
    font-size: 1.35rem;
    line-height: 1.3;
    margin-bottom: 12px;
}

.promo-modal-text {
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

.promo-modal-text strong {
    color: #c59d5f;
}

/* Os tres servicos em linha. O flex-wrap deixa que quebrem sozinhos
   nas telas mais estreitas, sem precisar de media query. */
.promo-modal-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 25px;
}

.promo-modal-list li {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #faf6ef;
    border: 1px solid #eadfc8;
    border-radius: 8px;
    padding: 10px 14px;
    color: #7a5f2e;
    font-size: 0.9rem;
    font-weight: 500;
}

.promo-modal-list .icon {
    font-size: 1.1rem;
    color: #c59d5f;
}

/* Saida discreta: e' um botao de verdade (o teclado alcanca), mas com
   aparencia de link para nao competir com o botao do WhatsApp. */
.promo-modal-dismiss {
    display: block;
    margin: 15px auto 0;
    background: none;
    border: none;
    color: #999;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.promo-modal-dismiss:hover {
    color: #666;
}

.promo-modal-fine {
    color: #999;
    font-size: 0.72rem;
    line-height: 1.5;
    margin-top: 18px;
}

@media (max-width: 600px) {
    .promo-modal-content {
        padding: 35px 20px 20px;
    }

    .promo-modal-content h2 {
        font-size: 1.15rem;
    }

    .promo-modal-text {
        font-size: 0.9rem;
    }

    .promo-modal-list li {
        font-size: 0.85rem;
        padding: 8px 12px;
    }
}

/* Quem pediu menos animacao no sistema recebe o modal sem o
   deslizamento - ele simplesmente aparece. */
@media (prefers-reduced-motion: reduce) {
    .promo-modal,
    .promo-modal-content {
        transition: none;
    }

    .promo-modal-content {
        transform: none;
    }
}

/* PÁGINA TRABALHE CONOSCO */
.vagas {
    background: #fff;
}

.vagas-subtitle {
    text-align: center;
    color: #555;
    max-width: 620px;
    margin: -15px auto 40px;
    line-height: 1.6;
}

/* auto-fit + minmax: com duas vagas ficam lado a lado no desktop e uma
   embaixo da outra no celular, sem media query. Se um dia abrir uma
   terceira vaga, ela se acomoda sozinha. */
.vagas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

/* Coluna flex para o botao poder ser empurrado ate' o fim do cartao. Sem
   isso, a vaga de lista mais curta terminava antes e os dois botoes
   ficavam em alturas diferentes, lado a lado. */
.vaga-card {
    background: #fafafa;
    border: 1px solid #eee;
    border-top: 4px solid #c59d5f;
    border-radius: 8px;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
}

.vaga-icon {
    display: block;
    font-size: 2.2rem;
    color: #c59d5f;
    margin-bottom: 12px;
}

.vaga-card h3 {
    color: #333;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

/* Local, contratacao e remuneracao. Sao dados da vaga, nao itens de
   uma lista de tarefas, entao nao levam o check dourado. */
.vaga-meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}

.vaga-meta li {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #faf6ef;
    border: 1px solid #eadfc8;
    border-radius: 999px;
    padding: 5px 12px;
    color: #7a5f2e;
    font-size: 0.8rem;
}

.vaga-meta .icon {
    color: #c59d5f;
}

.vaga-card h4 {
    color: #c59d5f;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.vaga-lista {
    list-style: none;
    margin: 0 0 25px;
}

.vaga-lista li {
    color: #555;
    line-height: 1.7;
    font-size: 0.92rem;
    padding-left: 24px;
    position: relative;
}

.vaga-lista li::before {
    content: "";
    background-image: var(--check-dourado);
    background-repeat: no-repeat;
    background-size: contain;
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    left: 0;
    top: 7px;
}

/* O botao de cada vaga fica coladinho no fim do cartao, sem a margem
   automatica que o .btn-whatsapp usa quando esta sozinho no meio da tela. */
.vaga-card .btn-whatsapp {
    margin: auto 0 0;
    width: 100%;
}

.banco-talentos {
    background: #faf6ef;
    text-align: center;
}

@media (max-width: 600px) {
    .vaga-card {
        padding: 25px 20px;
    }

    .vaga-card h3 {
        font-size: 1.15rem;
    }
}

/* Chamada para as vagas no rodape. O rodape e escuro (#333) e nao define
   cor de link, entao sem isto o texto sairia no azul padrao do navegador,
   ilegivel nesse fundo. */
.footer-vagas a {
    color: #c59d5f;
    text-decoration: none;
    font-weight: 500;
}

.footer-vagas a:hover {
    color: #fff;
}