/* ==========================================================================
   VERSÃO ESCOPO — estilos das seções do documento do cliente.
   Carrega DEPOIS do style.css: herda cores, botões e container da marca,
   e define só o que é novo nesta versão.
   ========================================================================== */

.escopo { background: var(--color-background); }

.ep-secao { padding: var(--spacing-4xl) 0; }
.ep-secao-clara { background: var(--color-elegant-gray-light); }

.ep-header { max-width: 900px; margin: 0 auto var(--spacing-2xl); text-align: center; }

.ep-h2 {
    font-family: "Julius Sans One", sans-serif;
    font-size: clamp(1.5rem, 3.6vw, 2.3rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-elegant-dark);
    justify-content: center;      /* h2 herda display:flex do style.css */
    text-align: center;
    margin-bottom: var(--spacing-md);
}
.ep-h2-claro { color: #fff; }
.ep-h2-esq { justify-content: flex-start; text-align: left; }

.ep-lead { font-size: 1.02rem; line-height: 1.75; color: var(--color-elegant-gray); margin-bottom: 0.6rem; }
.ep-lead-centro { max-width: 860px; margin: 0 auto var(--spacing-2xl); text-align: center; }
.ep-aviso { margin-top: var(--spacing-md); font-size: 0.92rem; color: var(--color-elegant-gray); }
.ep-aviso strong { color: var(--color-elegant-dark); }
.ep-centro { text-align: center; margin-top: var(--spacing-xl); }

/* ---------- Micro resposta (AI Overview) ---------- */
.ep-micro { background: var(--color-elegant-gray-light); padding: var(--spacing-xl) 0; border-bottom: 1px solid var(--color-border); }
.ep-micro p { max-width: 900px; margin: 0 auto; text-align: center; font-size: 1.05rem; line-height: 1.7; color: var(--color-elegant-dark); }

/* ---------- Prova social ---------- */
.ep-depoimentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl); }
.ep-depoimento {
    margin: 0; background: #fff; border: 1px solid rgba(212, 175, 55, 0.28);
    border-top-left-radius: 0; border-top-right-radius: 28px;
    border-bottom-right-radius: 0; border-bottom-left-radius: 28px;
    padding: var(--spacing-xl); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.5);
}
.ep-estrelas { display: flex; gap: 2px; margin-bottom: var(--spacing-md); }
.ep-estrelas svg { width: 16px; height: 16px; color: #f7c70c; fill: #f7c70c; }
.ep-estrelas-inline { display: inline-flex; }
.ep-depoimento blockquote { margin: 0; border: 0; font-size: 0.98rem; line-height: 1.7; color: var(--color-elegant-dark); }
.ep-depoimento figcaption { margin-top: var(--spacing-md); font-size: 0.82rem; color: var(--color-elegant-gray); }
.ep-depoimento figcaption strong { display: block; color: var(--color-elegant-dark); }

.ep-google { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-lg) var(--spacing-xl); margin-top: var(--spacing-2xl); }
.ep-google-marca { display: flex; align-items: center; gap: 0.6rem; }
.ep-google-logo { font-family: "Inter", sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.ep-google-nota { font-family: "Julius Sans One", sans-serif; font-size: 1.6rem; color: var(--color-elegant-dark); }
.ep-google-qtd { font-size: 0.88rem; color: var(--color-elegant-gray); }

/* ---------- Lista "ouvimos você" ---------- */
.ep-escuta { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-sm); margin: 0 auto var(--spacing-xl); padding: 0; max-width: 820px; }
.ep-escuta li { font-family: "Inter", sans-serif; font-size: 0.85rem; font-weight: 500; color: var(--color-elegant-dark); background: var(--color-muted); border: 1px solid var(--color-accent); border-radius: 20px; padding: 6px 16px; }

/* ---------- Cards genéricos ---------- */
.ep-cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl); }
.ep-cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-xl); }
.ep-card {
    display: flex; flex-direction: column; background: #fff;
    border: 1px solid var(--color-border);
    border-top-left-radius: 0; border-top-right-radius: 25px;
    border-bottom-right-radius: 0; border-bottom-left-radius: 25px;
    padding: var(--spacing-xl); box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth); text-decoration: none; color: inherit;
}
.ep-card-link:hover { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: var(--shadow-elegant); }
.ep-card-icone { width: 30px; height: 30px; color: #b99300; margin-bottom: var(--spacing-md); }
.ep-card-titulo { font-family: "Julius Sans One", sans-serif; font-size: 1.02rem; font-weight: 400; line-height: 1.3; color: var(--color-elegant-dark); margin-bottom: var(--spacing-sm); }
.ep-card-texto { font-size: 0.88rem !important; line-height: 1.65; color: var(--color-elegant-gray); flex: 1; }
.ep-card-cta { display: inline-block; margin-top: var(--spacing-md); font-size: 0.8rem; font-weight: 600; color: #b99300; }

/* ---------- Números ---------- */
.ep-numeros { background: var(--color-elegant-dark); padding: var(--spacing-3xl) 0; }
.ep-numeros-lista { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl); padding: 0; margin: var(--spacing-2xl) 0 0; }
.ep-numeros-lista li { display: flex; align-items: center; gap: 0.75rem; color: rgba(255,255,255,0.9); font-size: 0.95rem; line-height: 1.5; }
.ep-numeros-lista svg { width: 24px; height: 24px; flex-shrink: 0; color: #f7c70c; }

/* ---------- Transições ---------- */
.ep-transicao { background: var(--color-elegant-gray-light); padding: var(--spacing-3xl) 0; text-align: center; }
.ep-transicao-titulo { font-family: "Julius Sans One", sans-serif; font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 400; justify-content: center; text-align: center; color: var(--color-elegant-dark); margin-bottom: var(--spacing-md); }
.ep-transicao p { max-width: 780px; margin: 0 auto var(--spacing-xl); color: var(--color-elegant-gray); line-height: 1.7; }

/* ---------- Serviços (alternando lado) ---------- */
.ep-servico { padding: var(--spacing-3xl) 0; border-top: 1px solid var(--color-border); }
.ep-servico-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-3xl); align-items: center; }
.ep-servico-invertido .ep-servico-grid { direction: rtl; }
.ep-servico-invertido .ep-servico-grid > * { direction: ltr; }
.ep-servico-sem-foto .ep-servico-grid { grid-template-columns: 1fr; max-width: 860px; }

.ep-servico-fotos { display: grid; gap: var(--spacing-md); }
.ep-servico-foto { margin: 0; overflow: hidden; border-top-left-radius: 0; border-top-right-radius: 32px; border-bottom-right-radius: 0; border-bottom-left-radius: 32px; box-shadow: var(--shadow-elegant); }
.ep-servico-foto img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; }
.ep-servico-foto.principal img { aspect-ratio: 3/2; }

.ep-servico-tag { display: inline-block; font-family: "Inter", sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; color: #b99300; margin-bottom: var(--spacing-sm); }
.ep-servico-h2 { font-family: "Julius Sans One", sans-serif; font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 400; line-height: 1.2; color: var(--color-elegant-dark); margin-bottom: var(--spacing-md); }
.ep-servico-texto p { font-size: 0.9rem; line-height: 1.65; color: var(--color-elegant-gray); margin-bottom: 0.45rem; }
.ep-servico-lista-titulo { font-family: "Inter", sans-serif; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-elegant-dark); margin: var(--spacing-lg) 0 var(--spacing-sm); }
.ep-servico-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; }
/* Pills douradas com texto branco, a pedido do cliente. O tom escolhido
   (#b99300) mantém contraste AA com o branco — o dourado claro da marca
   (#f7c70c) deixaria o texto ilegível. */
.ep-servico-lista li { font-size: 0.82rem; font-weight: 500; color: #fff; background: linear-gradient(135deg, #c9a227 0%, #b99300 100%); border: 1px solid #a37f00; border-radius: 20px; padding: 6px 14px; box-shadow: 0 2px 6px rgba(185,147,0,0.25); }
.ep-servico-lista li::before { content: '✔ '; color: rgba(255,255,255,0.85); }

.ep-unico-lugar { text-align: center; padding-top: var(--spacing-3xl); border-top: 1px solid var(--color-border); }
.ep-pills { list-style: none; display: flex; flex-wrap: wrap; gap: var(--spacing-sm); padding: 0; margin: var(--spacing-xl) 0 0; }
.ep-pills-centro { justify-content: center; }
.ep-pills li { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 500; color: var(--color-elegant-dark); background: var(--color-muted); border: 1px solid var(--color-border); border-radius: 20px; padding: 6px 14px; }
.ep-pills svg { width: 15px; height: 15px; color: var(--color-moss); }

/* ---------- Galeria ---------- */
.ep-galeria-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); }
.ep-galeria-btn { display: flex; flex-direction: column; gap: 0.2rem; text-align: left; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: var(--transition-fast); }
.ep-galeria-btn strong { font-family: "Julius Sans One", sans-serif; font-size: 0.92rem; font-weight: 400; color: var(--color-elegant-dark); }
.ep-galeria-btn span { font-size: 0.72rem; line-height: 1.45; color: var(--color-elegant-gray); }
.ep-galeria-btn em { font-size: 0.7rem; font-style: normal; font-weight: 600; color: #b99300; }
.ep-galeria-btn:hover { border-color: var(--color-accent); }
.ep-galeria-btn.active { background: var(--color-elegant-dark); border-color: var(--color-elegant-dark); }
.ep-galeria-btn.active strong, .ep-galeria-btn.active span { color: #fff; }
.ep-galeria-btn.active em { color: #f7c70c; }

.ep-galeria-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--spacing-md); }
.ep-galeria-item { margin: 0; overflow: hidden; border-radius: 14px; aspect-ratio: 3/4; box-shadow: var(--shadow-soft); }
.ep-galeria-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); }
.ep-galeria-item:hover img { transform: scale(1.06); }
.ep-galeria-vazio { text-align: center; color: var(--color-elegant-gray); padding: var(--spacing-2xl) 0; }
.ep-galeria-destaque { text-align: center; margin-top: var(--spacing-2xl); }
.ep-galeria-destaque p { font-size: 1.05rem; color: var(--color-elegant-gray); margin-bottom: var(--spacing-md); }

/* ---------- História / propósito / proprietárias ---------- */
.ep-duas-colunas { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--spacing-3xl); align-items: center; }
.ep-duas-colunas p { font-size: 0.98rem; line-height: 1.75; color: var(--color-elegant-gray); margin-bottom: 0.6rem; }
.ep-historia-foto { margin: 0; overflow: hidden; border-top-left-radius: 0; border-top-right-radius: 40px; border-bottom-right-radius: 0; border-bottom-left-radius: 40px; box-shadow: var(--shadow-elegant); }
.ep-historia-foto img { width: 100%; display: block; aspect-ratio: 3/4; object-fit: cover; }

.ep-proposito { background: var(--color-elegant-dark); padding: var(--spacing-3xl) 0; text-align: center; }
.ep-proposito p { max-width: 820px; margin: 0 auto 0.6rem; color: rgba(255,255,255,0.85); line-height: 1.75; }

.ep-proprietarias { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-xl); max-width: 720px; margin: 0 auto; }
.ep-proprietarias figure { margin: 0; overflow: hidden; border-top-left-radius: 0; border-top-right-radius: 28px; border-bottom-right-radius: 0; border-bottom-left-radius: 28px; box-shadow: var(--shadow-soft); }
.ep-proprietarias img { width: 100%; display: block; aspect-ratio: 3/4; object-fit: cover; object-position: center top; }
.ep-legenda { max-width: 700px; margin: var(--spacing-xl) auto 0; text-align: center; font-family: "Darker Grotesque", sans-serif; font-size: 1.4rem; font-style: italic; line-height: 1.4; color: var(--color-elegant-dark); border: 0; }

/* ---------- Carrossel do espaço ---------- */
.ep-carrossel { position: relative; max-width: 980px; margin: 0 auto; overflow: hidden; background: var(--color-elegant-dark); border-top-left-radius: 0; border-top-right-radius: 40px; border-bottom-right-radius: 0; border-bottom-left-radius: 40px; box-shadow: var(--shadow-elegant); }
.ep-carrossel-slides { position: relative; aspect-ratio: 16/10; }
.ep-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: scale(1.04); transition: opacity .7s ease-in-out, visibility .7s ease-in-out, transform .7s ease-in-out; }
.ep-slide.active { opacity: 1; visibility: visible; transform: scale(1); z-index: 1; }
.ep-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 3.5rem var(--spacing-xl) var(--spacing-xl); font-size: 0.9rem; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); }
.ep-carrossel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(0,0,0,.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: var(--transition-fast); }
.ep-carrossel-nav:hover { background: #fff; color: var(--color-elegant-dark); }
.ep-carrossel-nav svg { width: 20px; height: 20px; }
.ep-carrossel-nav.prev { left: var(--spacing-md); }
.ep-carrossel-nav.next { right: var(--spacing-md); }
.ep-carrossel-dots { position: absolute; bottom: var(--spacing-md); left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: .5rem; }
.ep-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; transition: var(--transition-fast); }
.ep-dot.active { background: #f7c70c; width: 22px; border-radius: 4px; }

/* ---------- Blog ---------- */
.ep-blog-categorias { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); padding: 0; margin: 0 0 var(--spacing-2xl); }
.ep-blog-categorias li { background: var(--color-elegant-gray-light); border: 1px solid var(--color-border); border-radius: 14px; padding: 12px 16px; }
.ep-blog-categorias strong { display: block; font-family: "Julius Sans One", sans-serif; font-size: 0.92rem; font-weight: 400; color: var(--color-elegant-dark); }
.ep-blog-categorias span { font-size: 0.76rem; line-height: 1.5; color: var(--color-elegant-gray); }
.ep-blog-destaque-titulo { font-family: "Julius Sans One", sans-serif; font-size: 1.2rem; font-weight: 400; text-align: center; color: var(--color-elegant-dark); margin-bottom: var(--spacing-xl); }
.ep-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl); }
.ep-blog-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-soft); transition: var(--transition-smooth); }
.ep-blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-elegant); }
.ep-blog-img { height: 190px; overflow: hidden; }
.ep-blog-img img { width: 100%; height: 100%; object-fit: cover; }
.ep-blog-body { padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md); display: flex; flex-direction: column; flex: 1; }
.ep-blog-body h4 { font-family: "Julius Sans One", sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.35; color: var(--color-elegant-dark); margin-bottom: var(--spacing-sm); }
.ep-blog-body p { font-size: 0.84rem; line-height: 1.6; color: var(--color-elegant-gray); flex: 1; }

/* ---------- Redes e CTA final ---------- */
.ep-redes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-xl); max-width: 760px; margin: 0 auto; }
.ep-rede-card { text-align: center; background: #fff; border: 1px solid rgba(212,175,55,.28); border-radius: 20px; padding: var(--spacing-xl); }
.ep-rede-unidade { display: block; font-family: "Inter", sans-serif; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #b99300; }
.ep-rede-arroba { display: block; margin-top: 0.2rem; font-size: 0.9rem; color: var(--color-elegant-gray); }
.ep-rede-icones { display: flex; justify-content: center; gap: .6rem; margin-top: var(--spacing-md); }
.ep-rede-icones a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(212,175,55,.55); color: #b99300; transition: var(--transition-fast); }
.ep-rede-icones a:hover { background: var(--color-elegant-dark); border-color: var(--color-elegant-dark); color: #fff; }
.ep-rede-icones svg { width: 18px; height: 18px; }

.ep-final { background: var(--color-elegant-dark); padding: var(--spacing-4xl) 0; text-align: center; }
.ep-final-titulo { font-family: "Julius Sans One", sans-serif; font-size: clamp(1.4rem, 3.2vw, 2.1rem); font-weight: 400; justify-content: center; text-align: center; color: #fff; margin-bottom: var(--spacing-md); }
.ep-final > .container > p { max-width: 720px; margin: 0 auto var(--spacing-2xl); color: rgba(255,255,255,.8); }
.ep-unidades { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-xl); align-items: stretch; }
.ep-unidade { display: flex; flex-direction: column; background: rgba(255,255,255,.05); border: 1px solid rgba(247,199,12,.3); border-radius: 20px; padding: var(--spacing-xl); text-align: left; }
.ep-unidade h3 { font-family: "Julius Sans One", sans-serif; font-size: 1.05rem; font-weight: 400; color: #fff; margin-bottom: var(--spacing-sm); }
.ep-unidade-end { font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,.75); }
.ep-unidade-tel { display: inline-flex; align-items: center; gap: .4rem; margin: var(--spacing-sm) 0 var(--spacing-md); font-size: 0.92rem; font-weight: 500; color: #f7c70c; text-decoration: none; }
.ep-unidade-tel svg { width: 16px; height: 16px; }
.ep-unidade-mapa { border-radius: 12px; overflow: hidden; margin-bottom: var(--spacing-md); }
.ep-unidade .btn { margin-top: auto; }

/* ---------- Responsivo ---------- */
@media (max-width: 1024px) {
    .ep-cards-4, .ep-galeria-nav, .ep-galeria-grid { grid-template-columns: repeat(3, 1fr); }
    .ep-cards-3, .ep-depoimentos, .ep-blog-grid, .ep-blog-categorias { grid-template-columns: repeat(2, 1fr); }
    .ep-servico-grid, .ep-duas-colunas { grid-template-columns: 1fr; gap: var(--spacing-xl); }
    .ep-servico-invertido .ep-servico-grid { direction: ltr; }
    .ep-numeros-lista { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .ep-cards-3, .ep-cards-4, .ep-depoimentos, .ep-blog-grid, .ep-blog-categorias,
    .ep-galeria-nav, .ep-redes, .ep-unidades, .ep-numeros-lista { grid-template-columns: 1fr; }
    .ep-galeria-grid { grid-template-columns: repeat(2, 1fr); }
    .ep-proprietarias { grid-template-columns: repeat(2, 1fr); }
    .ep-carrossel-slides { aspect-ratio: 4/3; }
    .ep-servico-lista li, .ep-pills li, .ep-escuta li { font-size: 0.75rem; padding: 5px 10px; }
    .ep-legenda { font-size: 1.15rem; }
}

/* ==========================================================================
   BOTÃO FLUTUANTE DO WHATSAPP
   Este CSS existia inline no footer da versão anterior. Sem ele o <svg> não
   tem tamanho e ocupa a largura toda da página, e o fill="currentColor" herda
   a cor padrão de link visitado (roxo) — era essa a "quebra" no rodapé.
   ========================================================================== */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    z-index: 1000;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #fff;              /* trava o currentColor do SVG em branco */
    animation: pulse 2s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
    color: #fff;
}

.whatsapp-float:visited { color: #fff; }

.whatsapp-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: #fff;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); }
    50%      { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.7); }
}

@media (max-width: 768px) {
    .whatsapp-float {
        bottom: calc(20px + env(safe-area-inset-bottom));
        right: calc(20px + env(safe-area-inset-right));
        width: 56px;
        height: 56px;
    }

    .whatsapp-icon { width: 28px; height: 28px; }
}

/* ==========================================================================
   HISTÓRIA + MISSÃO/VISÃO/VALORES + FAQ  (reestruturação set/2026)
   ========================================================================== */

.ep-h3-centro {
    font-family: "Julius Sans One", sans-serif;
    font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    color: var(--color-elegant-dark);
    margin-bottom: var(--spacing-md);
}

/* --- História: texto à esquerda, as duas fotos à direita --- */
.ep-historia { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--spacing-3xl); align-items: center; }
.ep-historia-texto p { font-size: 0.95rem; line-height: 1.75; color: var(--color-elegant-gray); margin-bottom: 0.6rem; }
/* Retrato único das duas proprietárias (set/2026). A foto é quase quadrada;
   o aspect-ratio 4/5 dá um leve corte no rodapé sem cortar os rostos. */
.ep-historia-foto {
    margin: 0;
    overflow: hidden;
    border-top-left-radius: 0;
    border-top-right-radius: 32px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 32px;
    box-shadow: var(--shadow-elegant);
}

.ep-historia-foto img {
    width: 100%;
    display: block;
    aspect-ratio: 4/5;
    object-fit: cover;
    object-position: center top;
}

.ep-proprietarias-texto { max-width: 880px; margin: var(--spacing-3xl) auto 0; text-align: center; }
.ep-proprietarias-texto p { font-size: 0.95rem; line-height: 1.75; color: var(--color-elegant-gray); margin-bottom: 0.6rem; }

/* --- Missão e Visão --- */
.ep-mvv { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-xl); margin-bottom: var(--spacing-3xl); }
.ep-mvv-card {
    background: #fff;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-top-left-radius: 0; border-top-right-radius: 28px;
    border-bottom-right-radius: 0; border-bottom-left-radius: 28px;
    padding: var(--spacing-xl);
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45);
}
.ep-mvv-card .ep-card-titulo { font-size: 1.25rem; }
.ep-mvv-subtitulo { margin-bottom: var(--spacing-xl); }

/* --- FAQ --- */
.ep-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--spacing-md); }
.ep-faq-item {
    background: #fff;
    border: 1px solid var(--color-border);
    border-top-left-radius: 0; border-top-right-radius: 20px;
    border-bottom-right-radius: 0; border-bottom-left-radius: 20px;
    padding: var(--spacing-lg) var(--spacing-xl);
    box-shadow: var(--shadow-soft);
}
.ep-faq-item summary {
    font-family: "Julius Sans One", sans-serif;
    font-size: 1rem;
    color: var(--color-elegant-dark);
    cursor: pointer;
    list-style: none;
    padding-right: 1.5rem;
    position: relative;
}
.ep-faq-item summary::-webkit-details-marker { display: none; }
.ep-faq-item summary::after { content: '+'; position: absolute; right: 0; top: -2px; color: #b99300; font-size: 1.35rem; line-height: 1; }
.ep-faq-item[open] summary::after { content: '−'; }
.ep-faq-item p { margin-top: var(--spacing-md); font-size: 0.92rem; line-height: 1.7; color: var(--color-elegant-gray); }

@media (max-width: 1024px) {
    .ep-historia, .ep-mvv { grid-template-columns: 1fr; gap: var(--spacing-xl); }
}

@media (max-width: 700px) {
    .ep-faq-item { padding: var(--spacing-md); }
    .ep-faq-item summary { font-size: 0.92rem; }
}

/* Hero com CTA única (revisão set/2026): sem o segundo botão, o bloco de
   botões não precisa mais dividir a largura em dois. */
.hero-buttons-unico {
    width: auto;
    justify-content: center;
}

/* ==========================================================================
   HERO EM SLIDES (set/2026)
   As fotos do salão passando ao fundo, com o overlay bem mais claro para
   dar ênfase às imagens. A legibilidade do texto passa a vir do painel
   .hero-text (que tem fundo próprio + blur), não de escurecer a foto toda.
   ========================================================================== */

.ep-hero-slides {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ep-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    /* Ken Burns discreto: a foto "respira" enquanto está visível. */
    transform: scale(1.06);
    transition: opacity 1.4s ease-in-out, visibility 1.4s ease-in-out;
}

.ep-hero-slide.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity 1.4s ease-in-out, visibility 1.4s ease-in-out, transform 7s ease-out;
    z-index: 1;
}

.ep-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Overlay CLAREADO: era 68–78% de preto e apagava a foto.
   Agora escurece só o suficiente nas bordas para o texto respirar. */
.ep-hero-overlay {
    z-index: 2;
    background: linear-gradient(180deg,
        rgba(26, 20, 16, 0.45) 0%,
        rgba(26, 20, 16, 0.18) 35%,
        rgba(26, 20, 16, 0.28) 100%) !important;
    box-shadow: inset 0 -140px 90px -90px rgba(0, 0, 0, 0.6) !important;
}

/* O painel de texto ganha um pouco mais de corpo para compensar o fundo claro. */
.escopo .hero-text {
    background: rgba(26, 20, 16, 0.55);
    -webkit-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Indicadores dos slides */
.ep-hero-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    gap: 0.5rem;
}

.ep-hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: var(--transition-fast);
}

.ep-hero-dot.active {
    background: #f7c70c;
    width: 26px;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .ep-hero-dots { bottom: 18px; }

    /* Alvo de toque de 44px sem mudar o tamanho visual do ponto. */
    .ep-hero-dot {
        background-clip: content-box;
        padding: 14px 6px;
        width: 21px;
        height: 37px;
        border-radius: 0;
    }
    .ep-hero-dot.active { width: 38px; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ep-hero-slide, .ep-hero-slide.active { transition: opacity 0.2s linear; transform: none; }
}

/* Selo da unidade sobre o hero: diz de qual salão é a foto que está passando. */
.ep-hero-selo {
    position: absolute;
    top: calc(var(--header-height) + 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: "Inter", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(26, 20, 16, 0.5);
    -webkit-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(247, 199, 12, 0.55);
    border-radius: 20px;
    padding: 6px 14px;
}

.ep-hero-selo svg { width: 13px; height: 13px; color: #f7c70c; }

@media (max-width: 768px) {
    .ep-hero-selo { font-size: 0.65rem; padding: 5px 11px; }
}

/* ==========================================================================
   AJUSTES MOBILE — versão escopo (iOS e Android)
   O style.css já traz a base (100svh, safe-area, tap-highlight, reduced-motion).
   Aqui vai só o que é específico das seções desta versão.
   ========================================================================== */

@media (max-width: 900px) {
    /* Serviços: no desktop a foto e o texto alternam de lado. No celular vira
       uma coluna só — e a FOTO deve vir primeiro, senão o bloco abre com um
       muro de texto e a pessoa não entende do que se trata. */
    .ep-servico-grid { display: flex; flex-direction: column; }
    /* A foto (carrossel ou imagem única) vem ANTES do texto: empilhado, abrir
       com um bloco de texto não diz do que o serviço se trata. */
    .ep-foto-carrossel,
    .ep-servico-foto { order: 1; }
    .ep-servico-texto { order: 2; }
    .ep-servico { padding: var(--spacing-2xl) 0; }
}

@media (max-width: 768px) {
    /* Hero: o título é longo (13 palavras) e estourava em telas estreitas. */
    .escopo .hero-title { font-size: clamp(1.35rem, 6.4vw, 1.9rem); line-height: 1.25; }
    .escopo .hero-description { width: 100%; font-size: 0.95rem; padding: 0.75rem 0; }
    .escopo .hero-text { padding: 34px 18px; margin-top: 0; }
    .escopo .banner-logo { max-width: 190px; }

    /* Dots do hero acima da barra inferior do iPhone. */
    .ep-hero-dots { bottom: calc(14px + env(safe-area-inset-bottom)); }

    /* Selo da unidade não pode encostar no header fixo. */
    .ep-hero-selo { top: calc(var(--header-height) + 10px); }

    /* Títulos de seção: o clamp do desktop ficava grande demais no celular. */
    .ep-h2 { font-size: clamp(1.3rem, 5.6vw, 1.7rem); }
    .ep-servico-h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
    .ep-secao { padding: var(--spacing-2xl) 0; }

    /* Alvo de toque de 44px nos filtros da galeria. */
    .ep-galeria-btn { min-height: 44px; }

    /* Depoimentos e cards com menos respiro interno para caber mais conteúdo. */
    .ep-depoimento, .ep-card, .ep-mvv-card { padding: var(--spacing-lg) var(--spacing-md); }

    /* Bloco do Google quebrando em duas linhas no lugar certo. */
    .ep-google { flex-direction: column; gap: var(--spacing-md); }

    /* Mapas menores para não dominarem a tela. */
    .ep-unidade-mapa iframe { height: 160px; }
}

@media (max-width: 560px) {
    /* No celular a foto das proprietárias fica um pouco mais alta. */
    .ep-historia-foto img { aspect-ratio: 1 / 1; }

    /* Listas de técnicas: pílulas menores para caber mais por linha. */
    .ep-servico-lista li { font-size: 0.74rem; padding: 5px 11px; }

    .ep-legenda { font-size: 1.05rem; }
    .ep-google-logo { font-size: 1.25rem; }
    .ep-google-nota { font-size: 1.35rem; }
}

/* Telas bem estreitas (iPhone SE, Androids de 360px). */
@media (max-width: 380px) {
    .escopo .hero-title { font-size: 1.22rem; }
    .escopo .banner-logo { max-width: 160px; }
    .ep-hero-selo { font-size: 0.6rem; padding: 4px 9px; }
    .ep-galeria-btn strong { font-size: 0.84rem; }
    .ep-galeria-btn span { font-size: 0.68rem; }
    .ep-faq-item summary { font-size: 0.88rem; }
}

/* Celular deitado com pouca altura: o hero de tela cheia empurrava tudo. */
@media (max-height: 500px) and (orientation: landscape) {
    .escopo .hero { min-height: auto; padding: 6rem 0 3rem; }
    .ep-hero-dots { display: none; }
}

/* ==========================================================================
   CARROSSEL DE FOTOS DOS SERVIÇOS
   Blocos com mais de uma foto passam a alternar em vez de empilhar: a coluna
   da imagem fica com a mesma altura do texto e a seção não estica.
   ========================================================================== */
.ep-foto-carrossel {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 0;
    border-top-right-radius: 32px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 32px;
    box-shadow: var(--shadow-elegant);
    background: var(--color-elegant-dark);
}

.ep-foto-slides { position: relative; aspect-ratio: 4 / 5; }

.ep-foto-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease-in-out, visibility .7s ease-in-out;
}

.ep-foto-slide.active { opacity: 1; visibility: visible; z-index: 1; }

.ep-foto-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ep-foto-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: var(--transition-fast);
}

.ep-foto-nav:hover { background: #fff; color: var(--color-elegant-dark); }
.ep-foto-nav svg { width: 18px; height: 18px; }
.ep-foto-nav.prev { left: 12px; }
.ep-foto-nav.next { right: 12px; }

.ep-foto-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: .4rem;
}

.ep-foto-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: var(--transition-fast);
}

.ep-foto-dot.active { background: #f7c70c; width: 22px; border-radius: 4px; }

/* Foto única mantém o mesmo recorte do carrossel, para os blocos combinarem. */
.ep-servico-foto img { aspect-ratio: 4 / 5; }

@media (max-width: 768px) {
    .ep-foto-slides { aspect-ratio: 4 / 3; }
    .ep-servico-foto img { aspect-ratio: 4 / 3; }
    .ep-foto-nav { width: 44px; height: 44px; }
    /* alvo de toque maior nos pontos, sem mudar o tamanho visual */
    .ep-foto-dot { background-clip: content-box; padding: 12px 5px; width: 18px; height: 32px; border-radius: 0; }
    .ep-foto-dot.active { width: 32px; border-radius: 0; }
    .ep-foto-dots { bottom: 2px; }
}

/* ==========================================================================
   BOTÕES DE AGENDAMENTO POR UNIDADE
   Antes era um botão só, que mandava todo mundo para o mesmo WhatsApp.
   Agora a pessoa escolhe onde quer ser atendida — e o número já vai certo.
   ========================================================================== */
.ep-agendar { margin-top: var(--spacing-xl); }

.ep-agendar-label {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #b99300;
    margin-bottom: 0.6rem;
}

.ep-agendar-botoes { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.ep-agendar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    padding: 0.7rem 1.2rem;
    border: 1px solid #b99300;
    border-top-left-radius: 0;
    border-top-right-radius: 26px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 26px;
    background: #fff;
    color: var(--color-elegant-dark);
    transition: var(--transition-smooth);
}

.ep-agendar-btn:hover {
    background: linear-gradient(135deg, #c9a227 0%, #b99300 100%);
    border-color: #a37f00;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(185, 147, 0, .8);
}

.ep-agendar-btn svg { width: 18px; height: 18px; color: #25D366; flex-shrink: 0; }
.ep-agendar-btn:hover svg { color: #fff; }

.ep-agendar-btn span { display: flex; flex-direction: column; line-height: 1.2; }
.ep-agendar-btn strong { font-family: "Inter", sans-serif; font-size: 0.86rem; font-weight: 600; }
.ep-agendar-btn small { font-size: 0.72rem; opacity: .75; }

/* No hero o fundo é escuro: inverte as cores para manter o contraste. */
.ep-agendar-hero { margin-top: var(--spacing-lg); }
.ep-agendar-hero .ep-agendar-label { color: #f7c70c; }
.ep-agendar-hero .ep-agendar-botoes { justify-content: center; }

.ep-agendar-hero .ep-agendar-btn {
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: rgba(247, 199, 12, .65);
    color: #fff;
}

.ep-agendar-hero .ep-agendar-btn:hover {
    background: #f7c70c;
    border-color: #f7c70c;
    color: var(--color-elegant-dark);
}

.ep-agendar-hero .ep-agendar-btn:hover svg { color: var(--color-elegant-dark); }

@media (max-width: 768px) {
    /* Empilhados e ocupando a largura toda: alvo grande e fácil de acertar. */
    .ep-agendar-botoes { flex-direction: column; }
    .ep-agendar-btn { width: 100%; justify-content: center; min-height: 48px; }
    .ep-agendar-hero { margin-top: var(--spacing-md); }
}

/* ==========================================================================
   ACABAMENTO MOBILE — passada final antes da entrega
   ========================================================================== */

@media (max-width: 768px) {
    /* Respiro entre blocos de serviço: no celular eles ficam colados. */
    .ep-servico { padding: var(--spacing-xl) 0; }
    .ep-servico-grid { gap: var(--spacing-lg); }
    .ep-servico-tag { font-size: 0.68rem; letter-spacing: 0.1em; }
    .ep-servico-lista-titulo { font-size: 0.76rem; margin-top: var(--spacing-md); }

    /* Rótulo "Agendar na unidade" menor, sem roubar espaço dos botões. */
    .ep-agendar-label { font-size: 0.66rem; margin-bottom: 0.45rem; }
    .ep-agendar { margin-top: var(--spacing-lg); }

    /* História: as colunas empilham, então o texto precisa de menos margem. */
    .ep-historia-texto p { font-size: 0.92rem; }
    .ep-proprietarias-texto { margin-top: var(--spacing-xl); }
    .ep-h3-centro { font-size: 1.05rem; }

    /* Depoimentos: aspas grandes ocupavam duas linhas à toa. */
    .ep-depoimento blockquote { font-size: 0.92rem; }

    /* CTA final e transições. */
    .ep-final { padding: var(--spacing-3xl) 0; }
    .ep-final-titulo { font-size: clamp(1.25rem, 5.6vw, 1.7rem); }
    .ep-transicao { padding: var(--spacing-2xl) 0; }
    .ep-transicao p { font-size: 0.92rem; }

    /* Blog: cartão mais baixo para caber mais de um na tela. */
    .ep-blog-img { height: 165px; }
    .ep-blog-categorias li { padding: 10px 14px; }
}

@media (max-width: 380px) {
    .ep-agendar-btn { padding: 0.65rem 0.9rem; }
    .ep-agendar-btn strong { font-size: 0.8rem; }
    .ep-agendar-btn small { font-size: 0.68rem; }
    .ep-servico-lista li { font-size: 0.7rem; padding: 4px 9px; }
    .ep-blog-body h4 { font-size: 0.92rem; }
}