/* ============================================================
   YEP AG — Sistema de design Instituto Marzola (fase 2)
   Relatório ago/2026 §2 (leitura), §3 (textos), §4 (interface)
   Padrão de referência: Playfair Display (títulos) + DM Sans (corpo)
   ============================================================ */

:root {
    --mz-gold: #BD8C51;
    --mz-gold-dark: #8A6638;
    --mz-gold-hover: #A87A42;
    --mz-ink: #2B2724;
    --mz-dark: #1C1A19;
    --mz-cream: #FAF6F0;
    --mz-cream-deep: #F3ECE2;
    --mz-text-on-dark: #EDE7DE;
}

/* ---------- 1. Tipografia: 2 famílias, pesos legíveis ---------- */

/* Corpo de texto: DM Sans, tamanho e entrelinha confortáveis */
body,
p,
li,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
    font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
    font-weight: 400;
    line-height: 1.7 !important;
    letter-spacing: .01em;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
    font-size: 1.0625rem !important; /* 17px */
}

/* Títulos: Playfair com peso presente (nunca 200 ultrafino) */
h1, h2, h3,
.elementor-heading-title,
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title,
/* títulos de icon-box / image-box que viram link ficam na mesma família */
.elementor-icon-box-title a,
.elementor-image-box-title a {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: .01em;
}

h1, h1.elementor-heading-title { font-size: clamp(2rem, 4.5vw, 3.1rem) !important; }
h2, h2.elementor-heading-title { font-size: clamp(1.55rem, 3.2vw, 2.3rem) !important; }
h3, h3.elementor-heading-title { font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important; }

/* Subtítulos pequenos e UI: DM Sans */
h4, h5, h6,
h4.elementor-heading-title, h5.elementor-heading-title, h6.elementor-heading-title {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* ---------- 1b. Texto que vive fora de p / li / text-editor ----------
   Widgets do Elementor, JetEngine, acordeão aninhado e Trustindex escrevem
   em span/div com font-family própria (The Seasons / Quando / Quattrocento /
   themify). Sem estes seletores esse texto cai na fonte padrão do navegador.
   NUNCA usar seletor universal aqui: quebraria eicons/fontawesome/themify. */
.elementor-icon-list-text,
.elementor-icon-list-item > .elementor-icon-list-text,
.elementor-icon-list-item > a,
.elementor-icon-box-description,
.elementor-image-box-description,
.elementor-divider__text,
.elementor-testimonial-content,
.elementor-testimonial-name,
.elementor-testimonial-job,
.widget-image-caption,
.elementor-pagination,
.elementor-post__excerpt,
.jet-listing-dynamic-field,
.jet-listing-dynamic-field__content,
.jet-listing-dynamic-terms__link,
.jet-listing-dynamic-terms__prefix,
.jet-listing-dynamic-terms__suffix,
.elementor-field-group .elementor-field-textual,
.elementor-field-group .elementor-select-wrapper select,
blockquote, figcaption, dd, dt, td, th {
    font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
    font-weight: 400;
    letter-spacing: .01em;
}

/* Trustindex (avaliações do Google): o CSS do themify aplica
   font-family:'themify' a tudo que casa [class^="ti-"] / [class*=" ti-"] —
   inclusive o texto das avaliações, que só tem glifo de ícone e portanto cai
   na fonte padrão do navegador. Listamos apenas as classes de TEXTO;
   .ti-star, .ti-arrow-top-right e afins continuam com a fonte de ícone. */
.ti-review-text,
.ti-name,
.ti-date,
.ti-read-more,
.ti-tooltip,
.ti-verified-tooltip {
    font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
    font-weight: 400;
    letter-spacing: .01em;
}

.elementor-icon-list-text,
.elementor-icon-list-item > .elementor-icon-list-text,
.elementor-icon-list-item > a,
.elementor-icon-box-description,
.elementor-image-box-description,
.ti-review-text {
    line-height: 1.65 !important;
}

/* Parágrafo dentro do widget "heading": é corpo de texto, não título.
   Sem isto o Elementor renderiza esses trechos em Playfair / The Seasons /
   Quattrocento. Só a família e a entrelinha são forçadas — o tamanho fica
   sem !important de propósito, para não achatar as linhas de apoio
   ("Saiba mais sobre nós", "Dicas sobre:") que o layout define em 18-20px.
   O piso de 16px no mobile vem da media query no fim deste bloco. */
p.elementor-heading-title {
    font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.0625rem;
    line-height: 1.7 !important;
    letter-spacing: .01em;
}

/* Título de item do acordeão aninhado (FAQ). O tema pede "Playfair"
   (família que não existe — a carregada é "Playfair Display") com
   line-height 0.9em, o que gera texto cortado na fonte de fallback. */
.e-n-accordion-item-title-text {
    font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: clamp(1rem, 2.2vw, 1.25rem) !important;
    line-height: 1.4 !important;
    letter-spacing: .01em;
}

/* Menu e navegação */
.elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: .04em;
    white-space: nowrap;
}
.elementor-nav-menu--layout-horizontal .elementor-nav-menu {
    flex-wrap: nowrap !important;
}

/* Subtítulo do hero (seção boxed que contém o h1): marfim legível sobre imagem escura */
.e-con-boxed:not(.yep-light):has(> .e-con-inner h1) p,
.e-con-boxed:not(.yep-light):has(> .e-con-inner h1) .elementor-widget-text-editor {
    color: var(--mz-text-on-dark) !important;
}

/* Piso de tamanho no mobile — nada de 12px */
@media (max-width: 767px) {
    .elementor-widget-text-editor,
    .elementor-widget-text-editor p,
    .elementor-widget-text-editor li,
    .elementor-icon-list-text,
    .elementor-icon-list-item > a,
    .elementor-icon-box-description,
    .elementor-image-box-description,
    .elementor-post__excerpt,
    .jet-listing-dynamic-field,
    .jet-listing-dynamic-field__content,
    .ti-review-text,
    p, li {
        font-size: 1rem !important;   /* 16px mínimo */
        line-height: 1.65 !important;
    }
}

/* ---------- 2. Blocos de leitura longa em fundo claro ----------
   A classe .yep-light já vem no HTML (evita o flash escuro→creme) e o
   yep-fixes.js reaplica como rede de segurança. Cobre hoje:
     • "Detalhes do serviço" — 13 páginas de /procedimentos
     • corpo de post (.elementor-widget-theme-post-content) — 6 páginas de blog
     • "No que acreditamos..." — /sobre-a-clinica
     • "O propósito da Mentoria Vip.." — /mentoria-vip
     • FAQ "Perguntas Frequentes" — 2 páginas de mentoria + paciente modelo
   Regra do sistema: leitura longa = creme; hero, card e CTA = escuro premium. */

.yep-light {
    background-color: var(--mz-cream) !important;
    background-image: none !important;
}
.yep-light .e-con,
.yep-light .e-con-inner,
.yep-light .elementor-element {
    background-color: transparent !important;
}
.yep-light p,
.yep-light li,
.yep-light .elementor-widget-text-editor,
.yep-light .elementor-widget-text-editor p {
    color: var(--mz-ink) !important;
}
.yep-light h1, .yep-light h2, .yep-light h3,
.yep-light .elementor-heading-title {
    color: var(--mz-dark) !important;
}
.yep-light strong, .yep-light b { color: var(--mz-dark); }
.yep-light a:not(.elementor-button) { color: var(--mz-gold-dark) !important; }
/* dourado escuro em fundo claro (contraste AA) */
.yep-light .elementor-icon,
.yep-light .elementor-icon-box-icon { color: var(--mz-gold-dark) !important; }

/* Texto que não é p/li também precisa escurecer dentro do bloco claro,
   senão fica branco sobre creme (invisível). */
.yep-light .elementor-icon-list-text,
.yep-light .elementor-icon-box-title,
.yep-light .elementor-icon-box-description,
.yep-light .elementor-image-box-title,
.yep-light .elementor-image-box-description,
.yep-light .elementor-divider__text,
.yep-light .widget-image-caption,
.yep-light .jet-listing-dynamic-field,
.yep-light .jet-listing-dynamic-field__content,
.yep-light blockquote,
.yep-light td, .yep-light th {
    color: var(--mz-ink) !important;
}

/* FAQ (acordeão aninhado) dentro do bloco claro:
   a barra da pergunta é dourada (--e-global-color-primary #BD8C51);
   texto branco nela dá ~2.3:1 — forçamos tinta escura (~6.5:1). */
.yep-light .e-n-accordion-item-title,
.yep-light .e-n-accordion-item-title-text,
.yep-light .e-n-accordion-item-title-header {
    color: var(--mz-dark) !important;
}
.yep-light .e-n-accordion-item-title-icon svg {
    fill: var(--mz-dark) !important;
}
.yep-light .e-n-accordion-item-title-icon i {
    color: var(--mz-dark) !important;
}

/* Setas do carrossel de imagens dentro do bloco claro */
.yep-light .elementor-swiper-button {
    color: var(--mz-dark) !important;
}
.yep-light .elementor-swiper-button svg {
    fill: currentColor;
}

/* Largura de leitura confortável dentro do bloco claro */
.yep-light .elementor-widget-text-editor {
    max-width: 720px;
}

/* ---------- 3. Botões: um só estilo ---------- */

.elementor-button,
a.elementor-button,
.elementor-button-link {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .07em;
    text-transform: uppercase;
    background-color: var(--mz-gold) !important;
    background-image: none !important;
    color: #1C1A19 !important;
    border: 1px solid var(--mz-gold) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transition: background-color .2s ease, transform .2s ease;
}
.elementor-button:hover,
a.elementor-button:hover {
    background-color: var(--mz-gold-hover) !important;
    border-color: var(--mz-gold-hover) !important;
    color: #141210 !important;
}
.elementor-button .elementor-button-text { color: inherit !important; }
.elementor-button .elementor-button-icon svg,
.elementor-button .elementor-button-icon i { fill: currentColor; color: inherit !important; }

/* Mata qualquer brilho/varredura animada nos botões */
.elementor-button::before,
.elementor-button::after,
.elementor-button *::before,
.elementor-button *::after {
    animation: none !important;
}
.elementor-button { overflow: hidden; }

/* ---------- 4. Imagens deformadas e cortadas ---------- */

/* Fachada (mockup): nunca esticar na vertical */
img[src*="MOCKUP-FACHADA"] {
    height: auto !important;
    object-fit: cover;
    aspect-ratio: auto;
}

/* Cards de listagem (Outros Procedimentos): enquadramento superior,
   preserva rosto/objeto em vez de cortar 2/3 da imagem */
.jet-listing-grid img,
.jet-listing-grid .jet-listing-dynamic-image img {
    object-fit: cover !important;
    object-position: center 30% !important;
}

/* Nenhuma imagem transborda o container */
.elementor-widget-image img,
.e-con img {
    max-width: 100%;
    height: auto;
}

/* ---------- 5. Refinamentos gerais ---------- */

/* Nunca rolar horizontal: carrosséis slick clipados no próprio container */
html, body { overflow-x: hidden !important; }
.slick-list { overflow: hidden !important; }

/* Texto marfim nas seções escuras (conforto visual) */
[data-element_type="container"] p {
    -webkit-font-smoothing: antialiased;
}

/* Frase de destaque dourada sobre branco → dourado escuro */
.elementor-widget-heading .elementor-heading-title[style*="color"] { }