/* ==========================================================================
   Damma Cabelos — Landing Page
   Paleta: preto/grafite + dourado (logo) + madeira e neutros quentes (salão)
   ========================================================================== */

:root {
    --preto: #14110F;
    --grafite: #1E1A17;
    --carvao: #2A2420;
    --dourado: #C99B5F;
    --dourado-claro: #E8C892;
    --dourado-suave: rgba(201, 155, 95, 0.14);
    --madeira: #8A6642;
    --creme: #F8F4EE;
    --areia: #F0E8DC;
    --linha: #E4DACB;
    --texto: #2B2622;
    --texto-suave: #71655A;
    --branco: #FFFFFF;
    --whats: #1EBE5A;
    --whats-escuro: #17A64C;
    --fonte-titulo: "Cormorant Garamond", Georgia, serif;
    --fonte-corpo: "Manrope", "Segoe UI", Arial, sans-serif;
    --raio: 18px;
    --sombra: 0 18px 50px -20px rgba(20, 17, 15, 0.35);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--fonte-corpo);
    color: var(--texto);
    background: var(--creme);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.container { width: min(1160px, 92%); margin-inline: auto; }

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.12; }

h2 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: 0.5em; }

.secao { padding: clamp(4rem, 8vw, 6.5rem) 0; }

.secao-intro {
    max-width: 640px;
    color: var(--texto-suave);
    font-size: 1.05rem;
    margin-bottom: 2.5rem;
}

.rotulo {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dourado);
    margin-bottom: 0.9rem;
}

.rotulo-claro { color: var(--dourado-claro); }
.titulo-claro { color: var(--creme); }
.intro-clara { color: rgba(248, 244, 238, 0.72); }

.secao-escura { background: linear-gradient(175deg, var(--preto) 0%, var(--grafite) 60%, var(--carvao) 100%); }
.secao-areia { background: var(--areia); }

.estrelas { color: var(--dourado); letter-spacing: 0.15em; font-size: 1rem; }

/* ------------------------------------------------------------------ botões */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    cursor: pointer;
    border: 0;
}

.btn:hover { transform: translateY(-2px); }

.btn-whats {
    background: var(--whats);
    color: #fff;
    box-shadow: 0 12px 30px -12px rgba(30, 190, 90, 0.65);
}

.btn-whats:hover { background: var(--whats-escuro); }

.btn-contorno {
    border: 1.5px solid rgba(248, 244, 238, 0.45);
    color: var(--creme);
    background: transparent;
}

.btn-contorno:hover { border-color: var(--dourado-claro); color: var(--dourado-claro); }

.btn-grande { padding: 1.05rem 2.1rem; font-size: 1.02rem; }

.link-dourado {
    color: var(--madeira);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}

.link-dourado:hover { color: var(--dourado); }

/* ------------------------------------------------------------------- topo */

.topo {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(20, 17, 15, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(201, 155, 95, 0.25);
}

.topo-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.7rem 0;
}

.topo-logo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--creme);
    font-family: var(--fonte-titulo);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.topo-logo img { width: 52px; height: 52px; object-fit: contain; }

.topo-logo span { color: var(--dourado-claro); }
.topo-logo em { font-style: normal; color: var(--dourado-claro); }

.topo-nav {
    display: flex;
    gap: 1.4rem;
    margin-left: auto;
}

.topo-nav a {
    color: rgba(248, 244, 238, 0.82);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
}

.topo-nav a:hover { color: var(--dourado-claro); }

.topo-cta { padding: 0.6rem 1.2rem; font-size: 0.88rem; }

.topo-insta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* ícone colorido tradicional (pedido do cliente): o hover só realça, não troca a cor */
.topo-insta:hover { transform: scale(1.08); filter: brightness(1.08); }
.topo-insta:focus-visible { outline: 2px solid var(--dourado-claro); outline-offset: 2px; }

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
}

.menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--creme);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ------------------------------------------------------------------- hero */

.hero {
    position: relative;
    background: var(--preto);
    color: var(--creme);
    overflow: hidden;
}

.hero-fundo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.22;   /* 0,55 foi testado em set/2026 e o cliente achou poluído: voltou ao original */
    filter: saturate(0.85);
}

/* a foto do fundo é um <img> (para o celular baixar a versão WebP do tamanho da tela),
   enquadrada como o antigo background: cobre tudo, centralizada */
.hero-fundo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(20, 17, 15, 0.96) 35%, rgba(20, 17, 15, 0.55) 70%, rgba(20, 17, 15, 0.35) 100%);
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.hero-selo {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dourado-claro);
    border: 1px solid rgba(201, 155, 95, 0.45);
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    margin-bottom: 1.4rem;
}

.hero h1 {
    font-size: clamp(2.4rem, 5.4vw, 4rem);
    font-weight: 600;
    margin-bottom: 1.1rem;
}

.hero-sub {
    color: rgba(248, 244, 238, 0.78);
    font-size: 1.08rem;
    max-width: 560px;
    margin-bottom: 2rem;
}

.hero-acoes { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.8rem; }

.hero-avaliacao {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.92rem;
    color: rgba(248, 244, 238, 0.85);
}

.hero-foto {
    position: relative;
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra), 0 0 0 1px rgba(201, 155, 95, 0.35);
    max-height: 560px;
}

.hero-foto img { width: 100%; height: 100%; max-height: 560px; object-fit: cover; }

.hero-foto-selo {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    background: rgba(20, 17, 15, 0.82);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(201, 155, 95, 0.4);
    border-radius: 12px;
    padding: 0.55rem 0.95rem;
    font-size: 0.8rem;
    line-height: 1.35;
}

.hero-foto-selo strong { color: var(--dourado-claro); display: block; }

/* ------------------------------------------------------------------ faixa */

.faixa {
    background: linear-gradient(90deg, var(--dourado) 0%, var(--dourado-claro) 50%, var(--dourado) 100%);
    color: var(--preto);
    padding: 0.8rem 0;
}

.faixa-itens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem 1.4rem;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------ especialista */

.especialista-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}

.especialista-foto { position: relative; }

.especialista-foto > img,
.especialista-foto > picture > img,
.especialista-placeholder {
    border-radius: var(--raio);
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    box-shadow: var(--sombra);
}

.especialista-placeholder {
    background: linear-gradient(160deg, var(--grafite), var(--carvao));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: rgba(248, 244, 238, 0.8);
    text-align: center;
    font-size: 0.95rem;
}

.especialista-placeholder img { width: 110px; opacity: 0.9; }

.especialista-placeholder small { color: rgba(248, 244, 238, 0.5); }

.especialista-citacao {
    position: absolute;
    right: -1.2rem;
    bottom: -1.6rem;
    max-width: 320px;
    background: var(--branco);
    border-left: 3px solid var(--dourado);
    border-radius: 14px;
    box-shadow: var(--sombra);
    padding: 1.1rem 1.3rem;
    font-size: 0.9rem;
}

.especialista-citacao blockquote { font-style: italic; color: var(--texto); }

.especialista-citacao figcaption { margin-top: 0.5rem; color: var(--texto-suave); font-weight: 600; font-size: 0.82rem; }

.especialista-texto .cargo {
    color: var(--dourado);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.especialista-texto > p:not(.cargo):not(.rotulo) { color: var(--texto-suave); margin-bottom: 1.6rem; }

.especialista-numeros {
    display: flex;
    gap: 2.2rem;
    margin-bottom: 1.8rem;
}

.especialista-numeros strong {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 2rem;
    color: var(--madeira);
}

.especialista-numeros span { font-size: 0.85rem; color: var(--texto-suave); max-width: 180px; display: inline-block; }

/* ------------------------------------------------------------ diferenciais */

.diferenciais-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    margin-top: 2.5rem;
}

.card-diferencial {
    background: rgba(248, 244, 238, 0.045);
    border: 1px solid rgba(201, 155, 95, 0.28);
    border-radius: var(--raio);
    padding: 1.9rem 1.7rem;
    color: rgba(248, 244, 238, 0.82);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.card-diferencial:hover { transform: translateY(-5px); border-color: var(--dourado); }

.card-icone {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--dourado-suave);
    color: var(--dourado-claro);
    margin-bottom: 1.2rem;
}

.card-diferencial h3 { color: var(--creme); font-size: 1.45rem; margin-bottom: 0.7rem; }

.card-diferencial p { font-size: 0.93rem; }

/* --------------------------------------------------------------- educação */

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

.educacao-foto img {
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    aspect-ratio: 4 / 3.4;
    object-fit: cover;
}

.educacao-midia { display: grid; gap: 0.9rem; margin: 0; }

.educacao-videos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* raio no proprio <video>: o WebKit nao recorta camada de video
   composta contra o overflow:hidden de um ancestral */
.educacao-video {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    display: block;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    background: var(--carvao);
    pointer-events: none;
}

.educacao-legenda {
    font-size: 0.82rem;
    color: var(--texto-suave);
    line-height: 1.5;
}

.lista-check { list-style: none; display: grid; gap: 0.9rem; }

.lista-check li {
    position: relative;
    padding-left: 2.2rem;
    color: var(--texto-suave);
    font-size: 0.98rem;
}

.lista-check li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--dourado-suave);
    color: var(--madeira);
    font-weight: 800;
    font-size: 0.8rem;
    display: grid;
    place-items: center;
}

/* ---------------------------------------------------------------- métodos */

.metodos-trilha {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}

.card-metodo {
    background: var(--branco);
    border-radius: var(--raio);
    padding: 1rem 1rem 1.4rem;
    box-shadow: 0 10px 30px -18px rgba(20, 17, 15, 0.25);
    border: 1px solid var(--linha);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-metodo:hover { transform: translateY(-5px); box-shadow: var(--sombra); }

.card-metodo-foto {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: rgba(20, 17, 15, 0.06); /* enquanto a foto carrega */
}

.card-metodo-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }

/* Sequência de fotos do método: todas empilhadas, só a .ativa aparece */
.card-metodo-foto[data-sequencia] img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.4s ease;
}

.card-metodo-foto[data-sequencia] img.ativa { opacity: 1; }

.card-metodo:hover .card-metodo-foto img { transform: scale(1.06); }

.card-metodo h3 { font-size: 1.35rem; margin-top: 0.3rem; }

.card-metodo p { font-size: 0.85rem; color: var(--texto-suave); flex: 1; }

/* <picture> das versões WebP (inc/imagens.php) não gera caixa: o <img> de dentro continua
   sendo o item do grid e respeitando as mesmas regras de antes. */
picture { display: contents; }
picture > source { display: none; }   /* sem isso o <source> vira uma casa vazia no grid */

/* ---------------------------------------------------------------- galeria */

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.4rem;
    margin-top: 2.5rem;
}

.card-transformacao {
    background: rgba(248, 244, 238, 0.05);
    border: 1px solid rgba(201, 155, 95, 0.25);
    border-radius: var(--raio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.comparador {
    position: relative;
    aspect-ratio: 3 / 3.6;
    overflow: hidden;
    background: var(--carvao);
    flex-shrink: 0;
}

.comparador img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.45s ease;
}

.comparador .img-antes { opacity: 1; }
.comparador.mostra-depois .img-antes { opacity: 0; }

.comparador-etiqueta {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    z-index: 2;
    background: rgba(20, 17, 15, 0.75);
    color: var(--creme);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    transition: opacity 0.3s ease;
}

.etiqueta-depois { background: var(--dourado); color: var(--preto); opacity: 0; }

.comparador.mostra-depois .comparador-etiqueta { opacity: 0; }
.comparador.mostra-depois .etiqueta-depois { opacity: 1; }

.card-transformacao-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 1rem 1.1rem 1.2rem;
}

.card-transformacao-info > div:not(.alternar) {
    min-width: 0;
    overflow-wrap: break-word;
}

.card-transformacao-info h3 { color: var(--creme); font-size: 1.25rem; }

.card-transformacao-info p { color: rgba(248, 244, 238, 0.6); font-size: 0.8rem; }

.alternar {
    display: inline-flex;
    background: rgba(248, 244, 238, 0.1);
    border-radius: 999px;
    padding: 3px;
    flex-shrink: 0;
}

.alternar button {
    border: 0;
    background: transparent;
    color: rgba(248, 244, 238, 0.7);
    font-family: var(--fonte-corpo);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.alternar button.ativo { background: var(--dourado); color: var(--preto); }

.galeria-cta { text-align: center; margin-top: 2.8rem; }

/* ---------------------------------------------------- destaques do Instagram */

.destaques-insta .container { text-align: center; }
.destaques-insta .secao-intro { margin-inline: auto; }

.destaques-lista {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.6rem 1.4rem;
}

.destaque {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: 104px;
    text-decoration: none;
    color: var(--texto);
}

/* o anel colorido é o mesmo dos stories: quem usa Instagram reconhece na hora */
.destaque-anel {
    display: block;
    width: 96px;
    height: 96px;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7);
    transition: transform 0.25s ease;
}

.destaque-anel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--areia);
    background: var(--creme);
}

.destaque-nome { font-size: 0.84rem; font-weight: 600; line-height: 1.3; text-align: center; }

.destaque:hover .destaque-anel, .destaque:focus-visible .destaque-anel { transform: scale(1.06); }
.destaque:focus-visible { outline: 2px solid var(--dourado); outline-offset: 4px; border-radius: 12px; }

.destaques-perfil { margin-top: 2.6rem; }
.destaques-perfil .btn-contorno { border-color: rgba(43, 38, 34, 0.35); color: var(--texto); }
.destaques-perfil .btn-contorno:hover { border-color: var(--madeira); color: var(--madeira); }

/* ------------------------------------------------------------- depoimentos */

.depoimentos-layout {
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr;
    gap: 1.8rem;
}

.card-google {
    background: linear-gradient(165deg, var(--grafite), var(--carvao));
    border-radius: var(--raio);
    color: var(--creme);
    padding: 2rem 1.7rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    border: 1px solid rgba(201, 155, 95, 0.35);
}

.card-google-nota {
    font-family: var(--fonte-titulo);
    font-size: 3.6rem;
    font-weight: 700;
    color: var(--dourado-claro);
    line-height: 1;
}

.card-google p { color: rgba(248, 244, 238, 0.8); font-size: 0.95rem; }

.card-google-selo {
    margin-top: auto;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(248, 244, 238, 0.55);
    border: 1px solid rgba(248, 244, 238, 0.25);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
}

.card-depoimento {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 2.4rem 2.2rem 2rem;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    box-shadow: 0 24px 48px -32px rgba(30, 26, 23, 0.35);
}

.card-depoimento .aspas {
    font-family: var(--fonte-titulo);
    font-size: 3.8rem;
    line-height: 0.6;
    color: var(--dourado);
    opacity: 0.5;
}

.card-depoimento p { color: var(--texto); font-size: 1.2rem; line-height: 1.55; font-style: italic; font-family: var(--fonte-titulo); font-weight: 500; }

.card-depoimento footer { display: flex; align-items: center; gap: 0.7rem; color: var(--texto-suave); font-weight: 700; font-size: 0.85rem; font-family: var(--fonte-corpo); }

.avatar-inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--dourado-suave);
    color: var(--dourado);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------- carrossel de depoimentos */

.depoimentos-carrossel { display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; }

.carrossel-linha { display: flex; align-items: stretch; gap: 1rem; min-width: 0; }

.carrossel-viewport {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: var(--raio);
}

.carrossel-viewport::-webkit-scrollbar { display: none; }

.carrossel-trilha { display: flex; list-style: none; margin: 0; padding: 0; height: 100%; }

.carrossel-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }

.carrossel-seta {
    flex-shrink: 0;
    width: 3.1rem;
    height: 3.1rem;
    align-self: center;
    border-radius: 50%;
    border: 1px solid var(--linha);
    background: var(--branco);
    color: var(--texto);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.carrossel-seta:hover { background: var(--dourado); border-color: var(--dourado); color: var(--preto); transform: scale(1.06); }

.carrossel-seta:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }

.carrossel-dots { display: flex; justify-content: center; gap: 0.5rem; }

.carrossel-dot {
    width: 0.6rem;
    height: 0.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--linha);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.carrossel-dot.ativo { background: var(--dourado); transform: scale(1.35); }

/* ----------------------------------------------------------------- espaço */

.espaco-fotos {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 1.1rem;
    margin-bottom: 2.2rem;
}

.espaco-fotos img {
    border-radius: var(--raio);
    width: 100%;
    height: 300px;
    object-fit: cover;
    box-shadow: 0 12px 34px -20px rgba(20, 17, 15, 0.4);
}

.espaco-info {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 1.1rem;
}

.espaco-dados {
    background: var(--branco);
    border-radius: var(--raio);
    border: 1px solid var(--linha);
    padding: 2rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    align-items: flex-start;
}

.espaco-dados h3 { font-size: 1.6rem; }

.espaco-linha {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    color: var(--texto-suave);
    font-size: 0.97rem;
}

.espaco-linha svg { color: var(--dourado); flex-shrink: 0; margin-top: 0.2rem; }
.espaco-telefone { color: inherit; text-decoration: none; }
.espaco-telefone:hover { color: var(--madeira); }

.espaco-mapa iframe {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
    border-radius: var(--raio);
    filter: saturate(0.9);
}

/* -------------------------------------------------------------------- FAQ */

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

.faq-lista { display: grid; gap: 0.8rem; }

.faq-item {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: 14px;
    padding: 0 1.4rem;
    transition: border-color 0.25s ease;
}

.faq-item[open] { border-color: var(--dourado); }

.faq-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 0;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-seta {
    flex-shrink: 0;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--dourado-suave);
    color: var(--madeira);
    font-weight: 800;
    transition: transform 0.25s ease;
}

.faq-item[open] .faq-seta { transform: rotate(45deg); }

.faq-item > p { padding: 0 0 1.3rem; color: var(--texto-suave); font-size: 0.96rem; }

/* -------------------------------------------------------------- CTA final */

.cta-final {
    background:
        radial-gradient(ellipse at 50% 120%, rgba(201, 155, 95, 0.28), transparent 60%),
        linear-gradient(170deg, var(--preto), var(--grafite));
    color: var(--creme);
    text-align: center;
    padding: clamp(4.5rem, 9vw, 7rem) 0;
}

.cta-final-logo { width: 90px; margin: 0 auto 1.4rem; }

.cta-final h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }

.cta-final p { color: rgba(248, 244, 238, 0.75); max-width: 520px; margin: 0.8rem auto 2.2rem; }

/* ----------------------------------------------------------------- rodapé */

.rodape { background: var(--preto); color: rgba(248, 244, 238, 0.7); padding: 3rem 0 1.5rem; }

.rodape-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(248, 244, 238, 0.12);
}

.rodape-marca { display: flex; gap: 1rem; align-items: center; font-size: 0.9rem; }

.rodape-marca img { width: 64px; height: 64px; object-fit: contain; }
.rodape-marca a { color: inherit; text-decoration: none; }
.rodape-marca a:hover { color: var(--dourado-claro); }

.rodape-nav { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }

.rodape-nav a { color: rgba(248, 244, 238, 0.7); text-decoration: none; font-size: 0.88rem; }

.rodape-nav a:hover { color: var(--dourado-claro); }

/* razão social, CNPJ e endereço (Decreto 7.962/2013): discreto, mas legível (contraste ≥ 4,5:1) */
.rodape-legal { text-align: center; font-size: 0.74rem; line-height: 1.6; max-width: 62rem; margin: 0 auto; padding: 1.6rem 1rem 0; color: rgba(248, 244, 238, 0.55); }

.rodape-creditos { text-align: center; font-size: 0.78rem; padding-top: 1.4rem; color: rgba(248, 244, 238, 0.4); }

/* ------------------------------------------------------- WhatsApp flutuante */

.whats-flutuante {
    position: fixed;
    right: 1.3rem;
    bottom: 1.3rem;
    z-index: 80;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--whats);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 14px 34px -10px rgba(30, 190, 90, 0.7);
    transition: transform 0.2s ease;
    animation: pulso 2.6s infinite;
}

.whats-flutuante:hover { transform: scale(1.08); }

@keyframes pulso {
    0%, 100% { box-shadow: 0 14px 34px -10px rgba(30, 190, 90, 0.7), 0 0 0 0 rgba(30, 190, 90, 0.35); }
    50% { box-shadow: 0 14px 34px -10px rgba(30, 190, 90, 0.7), 0 0 0 14px rgba(30, 190, 90, 0); }
}

/* ---------------------------------------------------------------- reveal */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }

.reveal.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .whats-flutuante { animation: none; }
    .comparador img, .comparador-etiqueta { transition: none; }
    .card-metodo-foto[data-sequencia] img { transition: none; }
}

/* ------------------------------------------------------ aviso de privacidade */

.aviso-privacidade {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 70;
    max-width: 440px;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--preto);
    color: var(--creme);
    border: 1px solid rgba(201, 155, 95, 0.35);
    border-radius: var(--raio);
    padding: 1rem 1.1rem;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
    font-size: 0.84rem;
    line-height: 1.5;
}

.aviso-privacidade a { color: var(--dourado-claro); }
.aviso-privacidade .btn { padding: 0.55rem 1.1rem; font-size: 0.84rem; flex-shrink: 0; }
.rodape-creditos a { color: inherit; }

/* ------------------------------------------------ páginas próprias (pagina.php) */

/* título só para leitor de tela (a página já tem o H1 visível) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pagina-topo { padding: clamp(1.6rem, 4vw, 2.6rem) 0 clamp(2.2rem, 5vw, 3.2rem); background: var(--creme); }
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 1.6rem; font-size: 0.84rem; color: var(--texto-suave); }
.trilha a { color: inherit; }
.btn-voltar {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1rem;
    border: 1px solid var(--linha); border-radius: 999px; background: var(--branco);
    color: var(--texto); font-weight: 700; font-size: 0.86rem; text-decoration: none;
}
.btn-voltar:hover { border-color: var(--madeira); color: var(--madeira); }
.pagina-topo h1 { font-size: clamp(2.2rem, 5.2vw, 3.4rem); margin-bottom: 0.45em; }
.pagina-intro { max-width: 46rem; }
.pagina-topo .secao-intro { margin-bottom: 0.4rem; }
/* a 1ª seção depois do topo da página começa mais perto (o topo já abre a página) */
.pagina-topo + .secao { padding-top: clamp(2.2rem, 5vw, 3.4rem); }
.pagina-nota { margin: 0.9rem 0 1.5rem; color: var(--texto-suave); font-size: 0.92rem; }
.pagina-nota strong { color: var(--texto); }
.pagina-acoes { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
/* botão secundário em fundo claro (o .btn-contorno do site é para fundo escuro) */
.btn-claro { border: 1.5px solid rgba(43, 38, 34, 0.3); color: var(--texto); background: transparent; }
.btn-claro:hover { border-color: var(--madeira); color: var(--madeira); }
.btn-rota { background: var(--dourado); color: var(--preto); }
.btn-rota:hover { background: var(--dourado-claro); }
.pagina-endereco { margin: 0.4rem 0 0.2rem; max-width: 40rem; }
.pagina-ponte { text-align: center; padding: 0 0 2.6rem; background: var(--areia); }
.pagina-mapa { margin-bottom: 2.4rem; }
.pagina-mapa iframe { width: 100%; height: 340px; border: 0; border-radius: var(--raio); display: block; }
.pagina-subtitulo { margin-top: 0.4rem; }
.pagina-cidades { text-align: center; margin-top: 1.6rem; color: var(--texto-suave); }
.pagina-pergunta { padding: 0 0 clamp(3rem, 6vw, 4.5rem); text-align: center; }
.pagina-pergunta h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.pagina-pergunta p { color: var(--texto-suave); max-width: 36rem; margin: 0 auto 1.3rem; }
.veja-tambem { background: var(--areia); }
.veja-tambem h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.veja-lista { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin: 1.2rem 0 1.6rem; }
.veja-card {
    display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.3rem;
    background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio);
    color: var(--texto); font-weight: 700; text-decoration: none;
}
.veja-card:hover { border-color: var(--madeira); color: var(--madeira); }
.veja-voltar { text-align: center; }
.link-tecnica { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.topo-nav a[aria-current="page"] { color: var(--dourado-claro); }

/* ------------------------------------------------------------- responsivo */

/* Menu em gaveta abaixo de 1100px: com 6 itens + Agendar + Instagram, a linha
   do topo não cabe e os itens quebravam em 2–3 linhas entre 861 e 1100px. */
@media (max-width: 1100px) {
    .topo-nav {
        position: fixed;
        inset: 69px 0 auto 0;
        flex-direction: column;
        background: rgba(20, 17, 15, 0.98);
        padding: 1.4rem 6%;
        gap: 1.1rem;
        border-bottom: 1px solid rgba(201, 155, 95, 0.3);
        transform: translateY(-130%);
        transition: transform 0.3s ease;
        z-index: 55;
    }

    .topo-nav.aberto { transform: none; }

    .menu-toggle { display: flex; margin-left: 0.4rem; }

    /* Agendar, Instagram e menu agrupados à direita */
    .topo-cta { margin-left: auto; }

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

@media (max-width: 1024px) {
    /* 4 cards em 3 colunas deixariam um órfão */
    .metodos-trilha { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
    .diferenciais-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
}

@media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-foto { max-width: 460px; }
    .especialista-grid, .educacao-grid, .espaco-info { grid-template-columns: 1fr; }
    .educacao-texto { order: -1; }
    .especialista-citacao { position: static; margin-top: 1rem; max-width: none; }
    .depoimentos-layout { grid-template-columns: 1fr; }
    .card-depoimento { padding: 2rem 1.7rem; }
    .card-depoimento p { font-size: 1.08rem; }
    .espaco-fotos { grid-template-columns: 1fr 1fr; }
    .espaco-fotos > img:first-child, .espaco-fotos > picture:first-child > img { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .metodos-trilha { grid-template-columns: 1fr 1fr; }
    .espaco-fotos { grid-template-columns: 1fr; }
    .espaco-fotos img { height: 230px; }
    .hero-acoes .btn { width: 100%; justify-content: center; }
    .especialista-numeros { gap: 1.4rem; }
    .topo-cta { display: none; }
    .topo-insta { margin-left: auto; }
    /* deixa o botão flutuante do WhatsApp livre à direita */
    .aviso-privacidade { right: 5.4rem; max-width: none; flex-direction: column; align-items: flex-start; gap: .6rem; }
    .carrossel-seta { display: none; }
    .card-depoimento { padding: 1.8rem 1.5rem; }
    .card-depoimento .aspas { font-size: 3rem; }
    .card-depoimento p { font-size: 1.02rem; }
    /* destaques em grade de 4 por linha: todos aparecem de uma vez, sem capa cortada na borda
       (a fileira que deslizava escondia que dava para arrastar — Antonio, 11/10) */
    .destaques-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem 0.4rem; }
    .destaque { width: auto; }
    .destaque-anel { width: 68px; height: 68px; }
    .destaque-nome { font-size: 0.74rem; }
}

@media (max-width: 440px) {
    .metodos-trilha { grid-template-columns: 1fr; }
    /* com o ícone do Instagram e o menu, "Damma Cabelos" quebrava em 2 linhas */
    .topo-logo { font-size: 1.12rem; gap: 0.55rem; }
    .topo-logo img { width: 44px; height: 44px; }
    .topo-logo span { white-space: nowrap; }
    .topo-nav { top: 67px; }   /* acompanha a barra, que ficou mais baixa com o logo menor */
}