/* ============================================================
   TEMA MARIA IVONETE — paleta do Vercel (espresso / cream / bronze)
   Carregado por último: sobrescreve as cores de cada seção.
   ============================================================ */

/* --- Variáveis compartilhadas (todas as seções vêm do mesmo template) --- */
.fk-cely, .fk-navi, .fk-ic, .fk-wb {
  --primary: #2B1D12;
  --primary-dark: #1F140B;
  --primary-light: #D4BFA1;
  --primary-50: #F4ECDF;
  --accent: #8B6F47;
  --accent-light: #C5AC81;
  --ink: #1A120A;
  --ink-2: #352618;
  --muted: #806B58;
  --line: #E6DFCE;
  --line-strong: #D4BFA1;
  --bg: #FBF9F2;
  --bg-soft: #F1ECDE;
  --bg-card: #FFFFFF;
}
.fk-wb {
  --bg-inv: #1F140B;
  --bg-inv-soft: #2B1D12;
  --ink-inv: #FBF9F2;
  --line-inv: rgba(251,249,242,.12);
  --line-inv-strong: rgba(251,249,242,.24);
}

/* --- Fontes iguais às do W Beauty: Instrument Serif (títulos) + Inter (corpo) --- */
.fk-cely, .fk-navi, .fk-ic, .fk-wb, .fk-lavie {
  --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  font-family: 'Inter', system-ui, sans-serif;
}
.fk-cely h1, .fk-cely h2, .fk-cely h3, .fk-cely h4,
.fk-navi h1, .fk-navi h2, .fk-navi h3, .fk-navi h4,
.fk-ic h1, .fk-ic h2, .fk-ic h3, .fk-ic h4,
.fk-wb h1, .fk-wb h2, .fk-wb h3, .fk-wb h4 {
  font-family: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  letter-spacing: -.01em;
}

/* ===== HIERARQUIA TIPOGRÁFICA ÚNICA (todas as seções) =====
   !important para vencer as classes de título específicas de cada origem
   (dif__title, .s-head h2, qs__name, domiciliar h2 etc.) */
.fk-cely .hero h1 {
  font-size: clamp(44px, 5.6vw, 68px) !important; line-height: 1.04 !important; letter-spacing: -.02em !important; margin: 0 !important;
}
.fk-cely h2, .fk-navi h2, .fk-ic h2, .fk-wb h2,
.fk-wb .dif__title, .fk-wb .qs__name,
.fk-ic .s-head h2, .fk-navi .s-head h2, .fk-navi .domiciliar h2 {
  font-size: clamp(29px, 3.4vw, 42px) !important; line-height: 1.1 !important; letter-spacing: -.015em !important; margin: 0 0 .35em !important;
}
.fk-cely h3, .fk-navi h3, .fk-ic h3, .fk-wb h3, .fk-ic .programa__head h3 {
  font-size: clamp(20px, 1.7vw, 23px) !important; line-height: 1.2 !important; letter-spacing: -.01em !important;
}
.fk-cely h4, .fk-navi h4, .fk-ic h4, .fk-wb h4,
.fk-navi .domiciliar__card h4, .fk-ic .process__content h4 {
  font-size: clamp(17px, 1.25vw, 19px) !important; line-height: 1.3 !important; font-weight: 600 !important; font-family: 'Inter', system-ui, sans-serif !important; letter-spacing: -.005em !important;
}
/* leads / subtítulos */
.fk-cely .hero__lead, .fk-cely .s-head p, .fk-navi .s-head p, .fk-ic .s-head p,
.fk-ic .programa__desc, .fk-wb .dif__sub, .fk-navi .domiciliar p:first-of-type {
  font-size: clamp(15.5px, 1.15vw, 18px); line-height: 1.6;
}
/* corpo */
.fk-cely p, .fk-navi p, .fk-ic p, .fk-wb p,
.fk-cely li, .fk-navi li, .fk-ic li, .fk-wb li {
  font-size: 16px; line-height: 1.6;
}
.fk-ic .programa__list li, .fk-ic .symp__item, .fk-navi .domiciliar__card p { font-size: 15px; }
/* números das stats permanecem grandes */
.fk-ic .stats__value, .fk-ic .stats__suffix { font-size: clamp(38px, 4.5vw, 60px); line-height: 1; }
.fk-ic .stats__label { font-size: 13px; }
/* numerais grandes (jornada / fatores) */
.fk-ic .process__num span { font-size: clamp(30px, 3vw, 42px); }
.fk-navi .domiciliar__num { font-size: clamp(26px, 2.4vw, 34px); }
.fk-cely p, .fk-cely a, .fk-cely span, .fk-cely li, .fk-cely .btn,
.fk-navi p, .fk-navi a, .fk-navi span, .fk-navi li,
.fk-ic p, .fk-ic a, .fk-ic span, .fk-ic li, .fk-ic .btn,
.fk-wb p, .fk-wb a, .fk-wb span, .fk-wb li, .fk-wb .btn { font-family: 'Inter', system-ui, sans-serif; }

/* Fontes alinhadas à identidade Maria (serifa elegante + Manrope) */
.fk-cely h1, .fk-cely h2, .fk-navi h2, .fk-ic h2, .fk-wb h2,
.fk-cely h3, .fk-ic h3 { letter-spacing: -.01em; }

/* ===== 1 · HERO (Cely) — CLARO ===== */
.fk-cely .hero, .fk-cely .hero__left, .fk-cely .hero__content { background: #FBF9F2; }
.fk-cely .hero h1 { color: #1A120A; }
.fk-cely .hero h1 em { color: #8B6F47; font-style: normal; }
.fk-cely .btn--primary { background: #2B1D12; color: #FBF9F2; border-color: #2B1D12; }
.fk-cely .btn--ghost { color: #2B1D12; border-color: #2B1D12; }

/* ===== 2 · MARQUEE (La Vie) — ESPRESSO, full-bleed ===== */
.fk-lavie .lvm { background: #2B1D12; border-radius: 0; padding: 16px 0; }
.fk-lavie .lvm__item { border-right-color: rgba(251,249,242,.18); }

/* ===== 3 · PROCEDIMENTOS (IC) — CLARO ===== */
.fk-ic .programas { background: #F1ECDE; }
.fk-ic .programa { background: #FFFFFF; border-color: #E6DFCE; }
.fk-ic .programa--featured { background: #2B1D12; color: #FBF9F2; border-color: #2B1D12; }
.fk-ic .programa--featured .programa__desc, .fk-ic .programa--featured .programa__list li { color: rgba(251,249,242,.82); }
.fk-ic .programa--featured .btn--primary { background: #FBF9F2; color: #2B1D12; }
.fk-ic .programas__more-link { color: #6B5430; }
/* Cards de protocolo: altura igual + botão full-width pinado embaixo (1 linha) */
.fk-ic .programa { display: flex; flex-direction: column; }
.fk-ic .programa__list { flex: 1 0 auto; }
.fk-ic .programa .btn--primary {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 15px 20px; border-radius: 999px; margin-top: auto;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.fk-ic .programa--featured .btn--primary { background: #FBF9F2 !important; color: #2B1D12 !important; }
.fk-ic .programa:not(.programa--featured) .btn--primary { background: #2B1D12 !important; color: #FBF9F2 !important; }
/* itens de protocolo agora curtos: mantém 1 linha */
.fk-ic .programa__list li { text-wrap: nowrap; white-space: nowrap; }

/* ===== 4 · JORNADA (IC, section--ink) — ESPRESSO ===== */
.fk-ic .process.section--ink { background: #1F140B; }
.fk-ic .process .btn--white { background: #FBF9F2; color: #2B1D12; }
.fk-ic .process__num span { color: #C5AC81; }

/* Reveal das origens não dispara aqui (sem o JS delas) → força visível */
.fk-ic .process__step, .fk-ic .reveal,
.fk-cely .reveal, .fk-navi .reveal, .fk-lavie .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ===== 5 · DIFERENCIAIS (W Beauty) — CLARO ===== */
.fk-wb .dif { background: #FBF9F2; }

/* ===== 6 · FATORES (Navi) — ESPRESSO ===== */
.fk-navi .domiciliar { background: #2B1D12; color: #FBF9F2; }
.fk-navi .domiciliar h2, .fk-navi .domiciliar h4 { color: #FBF9F2; }
.fk-navi .domiciliar h2 em { color: #C5AC81; font-style: normal; }
.fk-navi .domiciliar p, .fk-navi .domiciliar__card p { color: rgba(251,249,242,.74); }
.fk-navi .domiciliar__card { background: rgba(251,249,242,.04); border-color: rgba(251,249,242,.12); }
.fk-navi .domiciliar__icon { color: #C5AC81; }
.fk-navi .domiciliar__num { color: rgba(251,249,242,.4); }

/* ===== 7 · SINTOMAS (IC) — CLARO ===== */
.fk-ic .symp { background: #F1ECDE; }
.fk-ic .symp__item { background: #FFFFFF; border-color: #E6DFCE; }
.fk-ic .symp__check { background: #2B1D12; color: #FBF9F2; }
.fk-ic .symp__cta .btn--primary { background: #2B1D12; color: #FBF9F2; }

/* ===== 8 · STATS (IC) — ESPRESSO (forçado p/ alternar) ===== */
.fk-ic .stats { background: #1F140B; }
.fk-ic .stats .stats__value, .fk-ic .stats .stats__suffix { color: #C5AC81; }
.fk-ic .stats .stats__label { color: rgba(251,249,242,.7); }
.fk-ic .stats .stats__item { border-color: rgba(251,249,242,.12); }

/* ===== 9 · LOCALIZAÇÃO (W Beauty) — CLARO ===== */
.fk-wb .wloc { background: #FBF9F2; }

/* ===== 10 · QUEM SOMOS (W Beauty) — ESPRESSO ===== */
.fk-wb .qs, .fk-wb .qs__left { background: #150D07; }
.fk-wb .qs__name em, .fk-wb .qs em { color: #C5AC81; }

/* ===== 11 · RODAPÉ (W Beauty) — CLARO ===== */
.fk-wb .foot2 { background: #F1ECDE; color: #1A120A; }
.fk-wb .foot2 .foot2__brand { color: rgba(43,29,18,.05); }
.fk-wb .foot2 a, .fk-wb .foot2 p, .fk-wb .foot2 h5 { color: #352618; }

/* Botões espresso padrão em seções claras */
.fk-ic .btn--primary, .fk-wb .btn--primary { background: #2B1D12; color: #FBF9F2; }

/* ===== ANTI-VIÚVA (site inteiro): balance em títulos e itens de card ===== */
.fk-cely h1, .fk-cely h2, .fk-cely h3, .fk-cely h4,
.fk-navi h2, .fk-navi h3, .fk-navi h4,
.fk-ic h2, .fk-ic h3, .fk-ic h4,
.fk-wb h1, .fk-wb h2, .fk-wb h3, .fk-wb h4,
.fk-cely .hero__lead, .fk-cely .s-head p, .fk-navi .s-head p, .fk-ic .s-head p,
.fk-ic .programa__desc, .fk-ic .programa__list li, .fk-ic .symp__item,
.fk-ic .process__content p, .fk-navi .domiciliar p, .fk-navi .domiciliar__card p,
.fk-wb .dif__feat p, .fk-wb .dif__sub {
  text-wrap: balance;
}
/* Bolinha dos itens de protocolo alinhada ao topo (1ª linha), não ao centro */
.fk-ic .programa__list li { align-items: flex-start !important; }
.fk-ic .programa__list li::before { margin-top: .52em; flex: 0 0 auto; }

/* ============================================================
   BOTÃO PADRÃO — unifica todos os estilos (site inteiro)
   Padrão: pill espresso sólido + texto cream, uppercase.
   Em fundo escuro: pill cream + texto espresso.
   ============================================================ */
.fk-cely .btn, .fk-ic .btn, .fk-navi .btn, .fk-wb .btn,
.fk-wb .btn-arrow, .fk-wb .btn-arrow--inv, .fk-wb .foot2__btn-pill,
.fk-extra .fkx__cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  background: #2B1D12; color: #FBF9F2; border: none; border-radius: 999px;
  padding: 15px 30px; height: auto; line-height: 1;
  font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none; cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.fk-cely .btn:hover, .fk-ic .btn:hover, .fk-navi .btn:hover,
.fk-wb .btn-arrow:hover, .fk-wb .btn-arrow--inv:hover, .fk-wb .foot2__btn-pill:hover,
.fk-extra .fkx__cta-btn:hover { background: #1F140B; transform: translateY(-1px); }

/* esconde setas/círculos decorativos p/ uniformizar */
.fk-wb .btn-arrow__icon, .fk-cely .hero__shop-arrow { display: none !important; }

/* VARIANTE CLARA em fundo escuro */
.fk-ic .process .btn, .fk-wb .qs .btn-arrow {
  background: #FBF9F2 !important; color: #2B1D12 !important;
}
.fk-ic .process .btn:hover, .fk-wb .qs .btn-arrow:hover { background: #EDE3D0 !important; }

/* secundário do hero = outline */
.fk-cely .btn--ghost {
  background: transparent !important; color: #2B1D12 !important; border: 1.5px solid #2B1D12 !important;
}
.fk-cely .btn--ghost:hover { background: #2B1D12 !important; color: #FBF9F2 !important; }

/* Título Diferenciais maior (pedido específico) + balance */
.fk-wb .dif .dif__title {
  font-size: clamp(36px, 4.6vw, 56px) !important;
  line-height: 1.06 !important;
  text-wrap: balance !important;
  max-width: 16ch;
}

/* Nome "Dra. Maria Ivonete" (Quem Somos) bem maior */
.fk-wb .qs .qs__name { font-size: clamp(48px, 6.5vw, 92px) !important; line-height: .98 !important; margin-bottom: .25em !important; }

/* ===== Depoimentos estilo Navi — recolor paleta Maria ===== */
.fk-navi .depo.section--soft { background: #F1ECDE; }
.fk-navi .depo__card { background: #FFFFFF; border-color: #E6DFCE; }
.fk-navi .depo__mark { color: #C5AC81; }
.fk-navi .depo__avatar { background: #2B1D12; color: #FBF9F2; }
.fk-navi .depo__chip--primary { background: #2B1D12; color: #FBF9F2; border-color: #2B1D12; }
.fk-navi .depo__chip { color: #4F3D1F; border-color: #D4BFA1; }
.fk-navi .depo__arrow { border-color: #D4BFA1; color: #2B1D12; }
.fk-navi .depo__arrow:disabled { opacity: .35; }

/* ============================================================
   FIXES DE BUG (auditoria)
   ============================================================ */
/* chips de depoimento: texto cream legível no espresso */
.fk-navi .depo__chip.depo__chip--primary { color: #FBF9F2 !important; }
/* botão do rodapé: texto cream (a regra .foot2 a estava deixando escuro) */
.fk-wb .foot2 a.foot2__btn-pill, .fk-wb .foot2 a.foot2__btn-pill span { color: #FBF9F2 !important; }
/* título Localização com balance */
.fk-wb .wloc__head h2 { text-wrap: balance !important; }
/* menu fixo visível (estava escondido em top:-72 / translateY) */
.fk-wb .nav { top: 0 !important; transform: none !important; }

/* Menu em fluxo (não sobre a imagem do hero) */
.fk-wb .nav { position: relative !important; top: 0 !important; transform: none !important; }
/* Botões do hero lado a lado (CTA principal) */
.fk-cely .hero__cta { display: flex; flex-wrap: nowrap; gap: 12px; align-items: center; }
.fk-cely .hero__cta .btn { padding: 16px 22px !important; font-size: 12px !important; height: auto !important; white-space: nowrap; flex: 0 0 auto; }

/* Botão do menu alinhado ao padrão (estava menor) */
.fk-wb .nav__cta { padding: 13px 26px !important; font-size: 12px !important; border-radius: 999px !important; }

/* ============================================================
   EFEITOS — reveal on scroll, hover lift, zoom de foto
   ============================================================ */
.fk-fx-up { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.fk-fx-up.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fk-fx-up { opacity: 1 !important; transform: none !important; } }

/* hover lift nos cards */
.fk-ic .programa, .fk-navi .domiciliar__card, .fk-navi .depo__card,
.fk-wb .dif__feat, .fk-ic .symp__item, .fk-extra .fkx__quote {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.fk-ic .programa:hover, .fk-navi .depo__card:hover, .fk-ic .symp__item:hover, .fk-extra .fkx__quote:hover {
  transform: translateY(-4px); box-shadow: 0 16px 34px -14px rgba(43,29,18,.28);
}
.fk-navi .domiciliar__card:hover { border-color: rgba(197,172,129,.45); transform: translateY(-3px); }

/* zoom suave nas fotos */
.fk-cely .hero__photo, .fk-wb .qs__right { overflow: hidden; }
.fk-cely .hero__img, .fk-wb .qs__photo { transition: transform .9s cubic-bezier(.22,.61,.36,1); }
.fk-cely .hero__photo:hover .hero__img, .fk-wb .qs__right:hover .qs__photo { transform: scale(1.045); }

/* ============================================================
   CHECKBOXES INTERATIVOS (Sintomas)
   ============================================================ */
.fk-ic .symp__item--toggle { cursor: pointer; user-select: none; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease; }
.fk-ic .symp__item--toggle .symp__check {
  background: rgba(139,111,71,.12); border: 1.5px solid rgba(197,172,129,.55); color: #8B6F47;
  transition: background .2s ease, border-color .2s ease, color .2s ease; }
.fk-ic .symp__item--toggle .symp__check svg { opacity: .4; transition: opacity .15s ease; }
.fk-ic .symp__item--toggle:hover { border-color: #C5AC81; transform: translateY(-2px); }
.fk-ic .symp__item--toggle:focus-visible { box-shadow: 0 0 0 3px rgba(139,111,71,.32); }
.fk-ic .symp__item--toggle.is-checked { border-color: #2B1D12; box-shadow: 0 8px 22px -12px rgba(43,29,18,.3); }
.fk-ic .symp__item--toggle.is-checked .symp__check { background: #2B1D12; border-color: #2B1D12; color: #FBF9F2; }
.fk-ic .symp__item--toggle.is-checked .symp__check svg { opacity: 1; }

/* ============================================================
   CURSOR CUSTOM (anel bronze) — global, fora de escopo
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  body, body * { cursor: none !important; }
}
.jf-cursor {
  position: fixed; top: 0; left: 0; width: 26px; height: 26px;
  border: 1.5px solid #8B6F47; border-radius: 50%;
  pointer-events: none; z-index: 99999; opacity: 0;
  transition: opacity .25s ease, width .25s ease, height .25s ease, background .2s ease, border-color .2s ease;
}
.jf-cursor::after { content: ''; position: absolute; top: 50%; left: 50%;
  width: 4px; height: 4px; border-radius: 50%; background: #8B6F47;
  transform: translate(-50%, -50%); transition: background .2s ease; }
.jf-cursor.is-visible { opacity: 1; }
.jf-cursor.is-hover { width: 48px; height: 48px; background: rgba(139,111,71,.12); }
.jf-cursor.is-dark { border-color: #C5AC81; }
.jf-cursor.is-dark::after { background: #C5AC81; }
.jf-cursor.is-dark.is-hover { background: rgba(197,172,129,.16); }

/* Título Localização maior (pedido) */
.fk-wb .wloc .wloc__head h2 { font-size: clamp(36px, 4.6vw, 56px) !important; line-height: 1.06 !important; }

/* ============================================================
   AJUSTES MOBILE
   ============================================================ */
@media (max-width: 768px) {
  /* Stats: vira 2x2 (no IC virava flex/marquee e estourava) */
  .fk-ic .stats__grid {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 30px 18px !important; transform: none !important; animation: none !important; width: auto !important;
  }
  .fk-ic .stats__item { width: auto !important; min-width: 0 !important; flex: none !important; }
  .fk-ic .stats__item--dup { display: none !important; }
  /* hero: botões podem empilhar se faltar espaço */
  .fk-cely .hero__cta { flex-wrap: wrap; }
  .fk-cely .hero__cta .btn { flex: 1 1 auto; }
  /* nav: botão um pouco menor no celular */
  .fk-wb .nav__cta { padding: 11px 18px !important; font-size: 11px !important; }
}
@media (max-width: 420px) {
  /* nav: esconde o CTA muito apertado (fica o hambúrguer + logo) */
  .fk-wb .nav__cta { display: none !important; }
}

/* Mobile: centralizar cabeçalho dos Diferenciais (título estava à esquerda) */
@media (max-width: 768px) {
  .fk-wb .dif__head { text-align: center; align-items: center; }
  .fk-wb .dif .dif__title { text-align: center; max-width: none; margin-left: auto; margin-right: auto; }
  .fk-wb .dif__head-right { align-items: center; text-align: center; }
}

/* Mobile: centralizar todos os cabeçalhos de seção (split incluído) */
@media (max-width: 768px) {
  .fk-ic .s-head, .fk-ic .s-head--split,
  .fk-navi .s-head, .fk-navi .depo__head,
  .fk-wb .wloc__head, .fk-cely .s-head {
    text-align: center !important; align-items: center !important;
  }
  .fk-ic .s-head h2, .fk-ic .s-head p,
  .fk-navi .depo__head h2, .fk-navi .depo__head p,
  .fk-wb .wloc__head h2, .fk-wb .wloc__head p { text-align: center !important; }
  .fk-navi .depo__nav { justify-content: center; }
}

/* Mobile — ajustes finos (setas centralizadas + botões hero lado a lado) */
@media (max-width: 768px) {
  .fk-navi .depo__nav {
    justify-content: center !important;
    margin-left: auto !important; margin-right: auto !important; width: max-content;
  }
  .fk-cely .hero__cta {
    flex-wrap: nowrap !important; gap: 10px; justify-content: center;
  }
  .fk-cely .hero__cta .btn {
    flex: 1 1 0 !important; min-width: 0; white-space: normal; line-height: 1.2;
    padding: 13px 12px !important; font-size: 11px !important;
  }
}